3 days ago
My newest ‘client’:
Pro bono job for my good friend, Matt, who has traditional drawing and painting ability oozing out of from his bespectacled skull. His work is so obviously unique and powerful that it needs a home on the web. Since he is the visual genius, I wanted him to design the presentation as much as possible. He drew some boxes on a napkin and created the layout you see above. He also indicated that he loved purple and leopard print. I thought Helvetica was ulitarian and attractive, but I recall him prefering Old English styles. Maybe I should font-replace it up!
Soon I need to meet with the artist again so we can work on structuring the navigation. Throughout his career, Matt has traversed different movements and styles, and need to be organized accordingly. I am very pumped about this project!
— Katie O'Connor
geer, web design
68 days ago
This simple jQuery navigation example makes use of two of my favorite functions that play oh-so-nice together, index() and each(). With these, there is no need to specify anything. Simply add buttons and corresponding content in the HTML and the iterators match content by comparing indexes. Let me explain...
Step 1: Create HTML Page
The first step is creating the structure of your content. Order is everything in this example. Below I have recreated a common navigational metaphor: button represents content to be displayed.
1 <html>
2 <head>
3 <title>Simple jQuery Navigation</title>
4 </head>
5 <body>
6 <div id="container">
7 <div id="button-group">
8 <div class="button selected">
9 <div class="button-num selected">1</div>
10 </div>
11 <div class="button">
12 <div class="button-num">2</div>
13 </div>
14 <div class="button">
15 <div class="button-num">3</div>
16 </div>
17 <div class="button">
18 <div class="button-num">4</div>
19 </div>
20 <div class="button last">
21 <div class="button-num">5</div>
22 </div>
23 </div>
24 <div id="content">
25 <div class="page"><div class="page-num">1</div><p>Lorem ipsum dolor ...</p></div>
26 <div class="page"><div class="page-num">2</div><p>Sed interdum pharetra ... </p></div>
27 <div class="page"><div class="page-num">3</div><p>Cras dui elit...</p></div>
28 <div class="page"><div class="page-num">4</div><p>Duis nec dui augue...</p></div>
29 <div class="page"><div class="page-num">5</div><p>Cras rhoncus...</p></div>
30 </div>
31 </div>
32 </div>
33 </body>
34 </html>
But what is the point of a button if all the content is shown anyway?
Step 2: Add jQuery
Now we can add code to show and hide the appropriate content, while giving addition visual cues to enhance usability. First, the jQuery library must be included in some manner.
1 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Create a document ready function so to execute our functions on page load.
1 <script type="text/javascript">
2 $(document).ready(function(){
3
4 });
5 </script>
Start by hiding all the 'page' divs, and then slideDown() the 1st child.
1 $(document).ready(function(){
2
3 $("div.page").hide();
4 $("div.page").eq(0).slideDown();
5
6 });
Now add a click() event to all the "button" divs. This will control the rest of the behavior in this concept.
1 $("div.button").click(function() {
2
3 $('div.button').each(function() {
4 $(this).removeClass("selected").children().removeClass("selected");
5
6 });
7 $('div.page').each(function() {
8 $(this).hide();
9
10 });
11 });
— Katie O'Connor
xhtml/css, jquery
88 days ago
Sad, but true, I feel that I have graduated from the limitations of Txp. Maybe if I was a more creative developer I could do better with it. Results and inspirations have dwindle. Don't worry articles, I just might port some of you worthy ones over.
I must say with my recent experiences with WordPress I am loving a lot of things, especially templates. I search keywords like 'minimal' and browse, I utilize templates that suit my needs and than modify them accordingly. Fun!
My most recent Wordpress project is
Wardrobe Database. This should be really cool and enjoyable for me. I just need to continue to photograph my clothes.
I am very interested in adding more custom fields to my items and using Php to get data from them, like lists of items by a specific brand. The categories are strictly for defining purpose of article, like top or bottom, than branching into broad physical description, like cropped or jeans. At Ann Taylor I experience first hand the system of organizing stock by IDs and codes, generalities and then specifics. It all makes sense to me. You just wait.
(This design is wicked ugly. What was I thinking?)
— Katie O'Connor
web sites, wordpress
118 days ago
After I pulled my previous template, this blog's visits sunk to a rock bottom. It was simply because I eliminated many of the SEO enhancements from the site. Today I attempted to boost visits by re-establishing those elements.
I re-added the tiered category list to the left, increasing the weight of commonly used keywords and tags. To the right, I added something new - a list of all entries. This will further strengthen my search engine visibility by repeating pertinent keywords and phrases.
Just before I disposed of my previous template, I was averaging about 25 unique viewers a day. Since then it's been about 1 per day.
One thing that contributed greatly to the spike in visitors was my "image replacement technique", which sounds a lot more sophisticated than it really is. I, to this day, cannot get sifr (or lightbox for that matter) to work in Txp. I had a static image that read 'Katie O'Connor:design'. To get the impact of the <h1>, without one, I created one and hid it -9999px to the left. I would call that 'ghetto' mark-up. Not only did it say 'Katie O'Connor:design', it said 'Katie O'Connor Web Designer and Developer. Chicago, Illinois.' The next week or so after I added that, I got outrageous hits.
Another 'ghetto' thing that contributed to my massive amount of traffic was that every page on this site had an extra blog article list (every complete article I've published) appended to the bottom of it. That is dozens more instances of every piece of content I've created. That upped the weight astronomically. It looked stupid, like I didn't know how to program, but the attention was exciting.
Good programming can lead to more opportunities and dignity, leading to something more gratifying than attention or capitalism. I am proud of the cleaness and perfection that I have going on right now. It is the Zen of the web, although boring (and somewhat ugly, no offense Txp).
— Katie O'Connor
web design, textpattern
123 days ago
Heh, looks like I nuked my presentation. Over the months I’ve learned a lot about interface design and layout. I am going to create something new and exciting from my template. I will incorporate the previous design’s fonts, colors, and floral imagery into the new design. In that way, it is a realign. I’m not changing everything, just the HTML. The focus on the structural redesign is to create a more readable, larger, and engaging experience, like this template based project.
I have a sweet template. I lost control of the previous. It was a decent template, looked good, but structurally mystifying.
— Katie O'Connor
xhtml/css, web design
