• Sons of Suckerfish
• The ULTIMATE CSS only drop-down menu

I’ve been using the Suckerfish menu for years. It’s fairly easy to understand and uses a very small JavaScript file for older version of Internet Explorer. I believe IE8 no longer needs the JavaScript, but all previous versions do. I may be wrong about it being necessary for IE7, but it’s definitely needed for IE6 and below.

The second link above is an example of a css only drop-down. You’ll have to view the source code to see how it’s done. I’ve never used it myself, but the author, Stu Nicholls has tested it across many browsers and versions.

Typical HTML in a Drop Down

In general any time you want to create a menu or navigation bar think unordered lists in your html. For a typical dropdown menu your html might look something like the following:

<ul id="nav">
  <li><a href=""></a></li>
  <li><a href=""></a>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </li>
  <li><a href=""></a></li>
</ul>

The code above is a simple nested list. Two keys to note are first that the nested list comes before the closing </li> of the menu item that will contain the drop down. A common mistake is to forget to add the nested list inside the list item. The other key is we’ve given the outside <ul> an id so we can hook into it through our css.

Again I’ll point you to either of the two links above for styling a drop down menu. If you’d like me to write a post in the future showing the css and developing the full menu from scratch, leave a comment below.

Creating the HTML in WordPress

Editing the css file of a WordPress theme is straightforward. The hard part in creating the dropdown navigation is getting WordPress to display something close to the html above. Many people will hard code the html into their header.php file and while that works, it’s not particularly flexible. If you add a new menu item, you need to add another line of html in the appropriate place.

A better solution is to use a WordPress template tag to produce our html. There are two template tags that can produce the code we want. One has been around for years and one has only been with is since WordPress 2.7. Each has its advantages.

• wp_list_pages()
• wp_page_menu()

Dropdowns with wp_list_pages()

wp_list_pages() has been around for awhile. It outputs your pages as a series of links wrapped in list tags. Odds are your current theme uses this tag to produce your navigation. Not everyone knows how to use this tag to produce nested lists of pages, but it’s rather easy with the use of one parameter you include in the tag.

<ul id="nav">
  <li id="home" <?php if(is_page('home')){echo "class=current_page_item";} ?>><a href="/index.php">Home</a></li>
  <?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>
</ul>

wp_list_pages() produces the list items, but not the <ul></ul> so I’ve hard coded those tags and added our id to hook into the list. The tag only lists your pages and since your home page often isn’t a WordPress page, but rather your index.php page, I’ve included a line of code to display the index.php page in the menu.

You’ll notice the added line also checks to see if the home page is the current page and if so it adds class=current_page_item. This class is used if you want to highlight the current page or style it in some unique way. wp_list_pages() will automatically add that class to the links if creates and so it’s a good idea to add it to the home page link as well.

Let’s look more closely at the one remaining line of code above

<?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>

We’re passing three parameters to the wp_list_pages() tag. The first title_li is set to nothing, since we don’t want a title displayed. The second sort_column is set to menu order which will display our pages in the order we’ve specified through the admin side of WordPress. The last parameter depth is what actually creates our nested lists.

By default depth=1, which is why most menus in WordPress will only show our top level pages and not all your nested pages. By changing the depth to 2 WordPress will go one level deeper in producing our html and we’ll get a nested list, which we can style to be a drop-down. The code produced will look something like:

<ul id="nav">
  <li class='current_page_item'><a href="">Home</a></li>
  <li class="page_item page-item-1"><a href="" title="About">About</a></li>
    <ul>
      <li class="page_item page-item-3"><a href="" title="Our Business">Our Business</a></li>
      <li class="page_item page-item-4"><a href="" title="Our Staff">Our Staff</a></li>
    </ul>
  <li class="page_item page-item-2"><a href="" title="Contact Us">Contact Us</a></li>
</ul>

The actual source of the links would be included and, of course, the menu items would be called whatever you named the pages. wp_list_pages also gives you two additional classes to hook into, page_item, and page_item-#. The important thing to note is that we now have a nested list.

You’re not limited to a depth of 2 either. If your pages go 3 levels deep you could have depth=3. You could go even deeper, though if you need more than 3 levels you probably need to rethink how you’ve organized your content.

Dropdowns with wp_page_menu()

As of WordPress 2.7 we now have the wp_page_menu() template tag, which produces essentially what we did above in a single line of code.

<?php wp_page_menu('title_li=&sort_column=menu_order&show_home=1') ?>

wp_page_menu() is actually a wrapper around wp_list_pages() so you can pass the same parameters as well as a few extras. One of those extras is show_home. By setting show_home to 1, we’re telling WordPress to include our home page in the menu. Setting it to 0 would tell WordPress to ignore the home page.

Here’s the html that gets created by the above:

<div class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li class="page_item page-item-1"><a href="" title="About">About</a></li>
      <ul>
        <li class="page_item page-item-3"><a href="" title="Our Business">Our Business</a></li>
        <li class="page_item page-item-4"><a href="" title="Our Staff">Our Staff</a></li>
      </ul>
    <li class="page_item page-item-2"><a href="" title="Contact Us">Contact Us</a></li>
  </ul>
</div>

The code is similar to what we were able to produce with wp_list_pages(), though not quite the same. You can still use it to style your dropdown, but the differences will determine which tag you prefer to use.

First notice that our hook (class=menu) is added to a wrapper div instead of the list itself. You can set the class name via the menu_class parameter and the fact that we’re using a class instead of an id doesn’t really affect anything. The wrapper div isn’t necessary, though it’s often used in coding drop downs. You may or may not want to include it, which would determine your choice in tags.

Ian Stewart has written a nice post on how to add a class or id to the list through a WordPress filter.

The other major difference is that our home page doesn’t get the current_page_item class added. If you were hoping to use it to style the current page’s menu item then you may want to go with wp_list_pages() where you can add it as I did above.

You could also adapt Ian’s filter to add the current_page_item class. Justin Tadlock has also written a post on wp_page_menu, including his own filter, as well as a post on developing a widget for your page menu using the wp_page_menu() tag

Summary

While I’ve spent a lot of time showing you how these two WordPress template tags work and the code they produce, it won’t take you a long time to get comfortable using them.

Give both a try and familiarize yourself with the codex pages for each so you can see the parameters you can use with them. Remember that any parameter you can use with wp_list_pages() you can also use with wp_page_menu(). The latter then adds a few new parameters to the mix.

The next time you want a dropdown menu in your theme, don’t reach for a plugin or hard code your navigation. Just look to use either of these two template tags.

How To Create a Dropdown Menu In WordPress

Visibility and Display Properties in Action

Here’s a simple demo of visibility and display in action that will open in a new window. Click the two links at the top to toggle the visibility and the display to see how each affects the other elements on the page. I’ll explain what’s going on with each property below.

How the CSS Visibility Property Works

The visibility property has four values associated with it, but let’s focus on the two used most often, visible and hidden.

From W3Schools

visibility: visible
The element is visible. This is default
visibility: hidden
The element is invisible (but still takes up space)

Both values are rather straightforward and behave exactly as you think. You see elements that are visible and don’t see elements that are hidden. That important point to note is that when hidden the element still takes up space.

How the CSS Display Property Works

The display property has quite a few values associated with it, but again let’s focus on a smaller subset. The two values that concern us here are block and none, but I want to quickly mention the inline value too.

Again from W3Schools

display: none
The element will generate no box at all
display: block
The element will generate a block box
(a line break before and after the element)
display: inline
The element will generate an inline box
(no line break before or after the element)

On the surface display: none might seem to be the same is visibility: hidden, but it isn’t. The big difference is in that point I called out above.

visibility: hidden – the element stays in the normal document flow

display: none – the element is removed from normal document flow so surrounding html elements collapse to close the space

Elements set to display as block or inline both fill a space. The difference being that block elements have line breaks around them and inline elements don’t. Some elements are block elements by default and some are inline elements.

When Should You Use Visibility and When Should You Use Display?

While both can be used to “hide” an element each does so in a different way. Again that difference is in how each responds to the normal document flow.

You want to use visibility when you want the element to hold its space even when it’s not seen. You want to use display when you want the element to give back its space allowing the other elements on your page to collapse around it.

In practice I tend to use display more than visibility. Usually when you want an element not to show you don’t want to leave an empty space in its place. You do need to understand that other html elements will move to fill the now unoccupied space and develop your layout accordingly.

SEO Effects of Visibility and Display

A sometimes used spam tactic is to stuff keywords on a page and make them invisible in some way. Often this is done not through either of the css properties above, but rather by giving the text the same color as the background it sits on or making the font so small as to render it invisible.

Because these tactics are frowned up by search engines, some people worry about using either the visibility or the display property to “hide” html.

There are many good reasons why you want some elements in your design to sometimes be seen and sometimes not be seen and search engines understand that. As long as you aren’t trying to trick search engines in any way you shouldn’t encounter any problems using either visibility or block to show and hide an element.

Visibility vs Display in CSS

• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites2 – It’s JavaScript Time

Final Navigation Bar Preview

Before we begin let’s take a look at where we’re going. Here’s an image of what our final navigation bar will look like as well as an image of how it will look when mousing over one of the buttons.

And here’s a demo of the navigation bar that will open in a new window.

Even without using images the nav bar above has a 3D feel to it and gives the impression that the buttons can being pressed or clicked.

I won’t be going over all the code used to create the navigation bar in this post as I’ve covered most of it before in my simple navigation bar post. What I want to show you today is the part that gives the button the 3D effect, though I’ll provide all the code to create the nav bar at the bottom of this post.

CSS Borders to Give any Element Depth

The trick to the 3D effect, as you can guess from the heading above, is to use css borders to convey a sense of depth from an imaginary light source. There are 3 simple parts to this technique.

• decide where your light source is
• give sides where light shines a border a shade or two lighter than the button color
• give sides that would be in shadows a border a shade or two darker than the button color

Let’s illustrate the three steps above using a grayscale version of our navigation bar to make the color changes easier.

I’ve used #555555 as the color for the grayscale buttons above and we’re assuming our light source is shining from the upper left. That means the top and left sides of the button should appear lighter while the right and bottom sides will be darker.

#555555 is the hexidecimal representation of a medium gray. To make the color darker we want to lower the numbers toward 0 and to make it lighter we want to increase the number toward F. Here’s the border code I used to create the effect.

border-top:2px solid #777777;
border-right:2px solid #333333;
border-bottom:2px solid #444444;
border-left:2px solid #777777;

I’ve used a 2px border for each side and for the top and left sides used a color of #777777 or two shades lighter than the button color #555555. The right side gets a color two shades darker at #333333 and the bottom I only went one shade darker with #444444.

In practice you might only use a 1px border, but I used 2px here to make the effect more obvious. Also I’ll tend to play around a little with the colors until I get something I like, though I usually start by making all the hex values one or two numbers darker or lighter.

With the rollover button the process is similar except that now the top and left sides will be darker and the right and bottom sides will be lighter. Here I used a color of #999999 for the button itself and then for the borders the code is as follows.

border-top:2px solid #777777;
border-right:2px solid #aaaaaa;
border-bottom:2px solid #aaaaaa;
border-left:2px solid #777777;

Again it’s the same as before except for the darker and lighter sides being reversed.

Extending the CSS Border Technique

The technique above is very simple, but there’s no reason you can’t extend it some for more creative possibilities. You can try altering the width of the different borders or play around with the colors to make it look like the light has been cast through a filter. Instead of changing all 6 hex digits you could raise or lower only the red or green values while keeping the blue constant.

One thing I’ll sometimes do is not change the top and bottom border colors on the rollover. That will give the impression that when pressed in the button sits at the same level as the surrounding page, instead of feeling slightly depressed from the page as shown here.

This technique is also hardly limited to navigation buttons. You can use it on any element that accepts a css border. You could for example set up a class for all your buy now buttons using this technique and then apply that class wherever you want a buy now button across your site.

Hopefully in the not too distant future when all browsers can handle things like css gradients and border radius you’ll be able to style the button with code only and eliminate the need to ever use an image for a button. For now you can use either as part of progressive enhancement on your site.

Code Used to Create the Navigation Bar

As promised here’s all the code I used to create the navigation bar at the top of the page. The #nav-wrapper code is there just to have a color that shows what’s going on better than the white of the page. It’s presented here, but not necessary.

The HTML

<div id="nav-wrapper">
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">FAQ</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

The CSS

#nav-wrapper {
width:465px;
margin:0 auto;
padding:20px 0;
background:#3D3331;
}
ul#nav {
font-family: Verdana;
font-size:14px;
list-style:none;
margin:0 auto;
padding:0;
width:455px;
overflow: auto;
}
ul#nav li {
display:inline;
}
ul#nav li a {
text-decoration:none;
display: block;
padding:5px 21px;
background:#5F3222;
color:#eee;
float:left;
text-align:center;
border-top:2px solid #815444;
border-right:2px solid #3d1000;
border-bottom:2px solid #3d1000;
border-left:2px solid #815444;
}
ul#nav li a:hover {
background:#a37666;
color:#000;
border-top:2px solid #815444;
border-right:2px solid #c59888;
border-bottom:2px solid #c59888;
border-left:2px solid #815444;
}

Any tricks you’ve developed to replace images with code?

How To Create Stylish Navigation Buttons With CSS

If you own a website, you know that SEO is an inherent part of the design process, a very important part that determines your position in the search engine rankings and one that can make or break your success on the Internet.


photo credit: Sarah G…

Everyone knows that keywords are important when you’re thinking SEO, but most people are not aware that SEO is much more than just interspersing your text with the right keywords. If your site is not doing as well as you expected it to, perhaps you’ve been guilty of one or more of these SEO sins, mistakes that could be the reason you’re not getting as much traffic as you would like:

• SEO not being a part of your plan: As far as SEO is concerned, it must be a part of your initial plan, rather than an afterthought, when you’re adding the text portions of your website.

  If you include optimization for a search engine as part of your entire process, you’ll probably bring in someone who is an expert to tell you what you need to do in order to push your rankings higher. Make sure you stay in tune with what your SEO expert is doing so that your design processes are not disconnected from each other.

• Maintenance taking your site out of contention: Not many of us realize this, but if your site is down when you’re performing maintenance work (as you must do sometimes), you risk being taken off the search engine rankings if a search engine spider comes looking your way when there’s a blank page at your regular URL.

  In order to avoid this situation and its consequences, set up a mirror site where users are redirected when you’re down for maintenance.

Note from Steve: Search engines do understand that problems happen on sites and servers. Every site goes down at times whether for maintenance or an issue with the site hosting. You shouldn’t lose ranking for a temporary downtime, however if your site remains down for days or weeks, search engines might conclude your site no longer exists.

• Content not being updated in a while: No matter how popular your site is, if you neglect it for a while, it is going to climb down the ranking ladder sooner than you realize.

  You must update it regularly, with content that is of quality and that helps keep you in the spotlight. If you do not have time to devote for regular updates, outsource the operation.

• Finishing with SEO: No matter how much time you devote to SEO, it is a never-ending process, one that must be performed continuously and constantly. This is because the Internet is a medium that changes at a rapid pace, and unless you are able to keep up, you are definitely going to be left out.

Nicole White writes about online web design school. She welcomes your feedback at Nicole.White222 [at] gmail.com

4 Common But Not-So-Visible SEO Mistakes

• Specificity Calculations
• Inheritance
• The Cascade

Learning these rules will take you to the next level in your css development.

Specificity Calculations

Imagine your html contains a paragraph with a class of “bio” applied to it. You also have the following two css rules:

p {font-size: 12px}
p.bio {font-size: 14px}

Would you expect the text in your paragraph to be 12px or 14px? You can probably guess in this case it will be 14px. The second line of css (p.bio) is more specific than the first when it comes to your class=”bio” paragraph. However, sometimes the specificity isn’t so easy to see.

For example consider the following html and css

<div id="sidebar">
<p class="bio">text here</p>
</div>

div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}

The first line of css might seem more specific at first glance, but it’s actually the second line above that would be more specific to the font-size of your paragraph. Why is that?

To answer the question we need to consider the rules of specificity.

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.

• Element, Pseudo Element: d = 1 – (0,0,0,1)
• Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
• Id: b = 1 – (0,1,0,0)
• Inline Style: a = 1 – (1,0,0,0)

An id is more specific than a class is more specific than an element.

You calculate specificity by counting each of the above and adding 1 to either a,b,c, or d. It’s also important to note that 0,0,1,0 is more specific than 0,0,0,15. Let’s look at some examples to make the calculation clearer.

• p: 1 element – (0,0,0,1)
• div: 1 element – (0,0,0,1)
• #sidebar: 1 id – (0,1,0,0)
• div#sidebar: 1 element, 1 id – (0,1,0,1)
• div#sidebar p: 2 elements, 1 id – (0,1,0,2)
• div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

Let’s look again at the example above

div p.bio {font-size: 14px} - (0,0,1,2)
#sidebar p {font-size: 12px} - (0,1,0,1)

The second has the higher specificity and thus takes precedence.

One last point before we move on. Importance trumps specificity, When you mark a css property with !important you’re overriding specificity rules and so

div p.bio {font-size: 14px !important}
#sidebar p {font-size: 12px}

means the first line of css above takes precedence instead of the second. !important is still mostly a hack around the basic rules and is something you should never need if you understand how the rules work.

Inheritance

The idea behind inheritance is relatively easy to understand. Elements inherit styles from their parent container. If you set the body tag to use color: red then the text for all elements inside the body will also be red unless otherwise specified.

Not all css properties are inherited, though. For example margins and paddings are non-inherited properties. If you set a margin or padding on a div, the paragraphs inside that div do not inherit the margin and padding you set on the div. The paragraph will use the default browser margin and padding until you declare otherwise.

You can explicitly set a property to inherit styles from it’s parent container, though. For example you could declare

p {margin: inherit; padding: inherit}

and your paragraph would then inherit both from it’s containing element.

The Cascade

At the highest level the cascade is what controls all css precedence and works as follows.

1. Find all css declarations that apply to the element and property in question.
2. Sort by origin and weight. Origin refers to the source of the declaration (author styles, user styles, browser defaults) and weight refers to the importance of the declaration. (author has more weight than user which has more weight than default. !importance has more weight than normal declarations)
3. Calculate specificity
4. If two rules are equal in all of the above, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html

#3 above is likely the one you’ll need to pay attention to most. With #2 just understand that your styles will override how a user sets their browser unless they set their rules to be important.

Also realize that your styles will override the browser defaults, but those defaults do exist and is often what leads to cross browser issues. Using a reset file like Eric Meyer’s CSS Reset or Yahoo’s YUI Reset CSS helps take the default styles out of the equation.

Summary

Hopefully the above helps sort out some of your css precedence issues. Most of the time if you have a conflict in styles the issue will come down to specificity. At times when you haven’t declared some css, but an element is behaving in a way you don’t expect it’s likely that element has inherited some css from a parent container or a default style of the browser.

A general rule of thumb when declaring your css is to declare properties with the least specificity needed to style your elements. Use #sidebar instead of div#sidebar for example. I admit to breaking this general rule far more than I should, but by using the least specificity needed it will make it easier for you to override a style by declaring a style more specific.

If you use the most specificity you may run into problems later and find yourself having to add unnecessary html in order to be able to add more specificity or you may find yourself falling back on using !important or declaring inline styles. Start with the least specificity and add more only as needed.

Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

The first part relates to a softball injury I suffered last night, the second is some info about a recent hack in the wild that affected a friend’s sites, and the last refers to a new Twitter client that I think goes one better than most of the current crop.

Jammed Finger

photo credit: Gaspa

If you don’t know how much of a baseball fanatic I am, you haven’t been reading here very long. I love baseball and all things related. From March though October I play 3rd base one night each week for a pretty good softball team.

Last night in the closing inning of the game the first hitter for the other team hit foul popup midway between the plate and 3rd. I’m generally good at charging and sliding in under the ball to make the catch. This time the ball didn’t stay in the air too long and I wasn’t sure I’d be able to get there in time.

I ended up making more of a dive than a slide and somehow got my glove under the ball at the exact moment it was about to touch the dirt. I rolled over my wrist, managed to hold onto the ball, and held it up for the ump to see. If I do say so myself it was a very nice catch, probably one of the best I’ve ever made. It was the kind of catch that would make the top 10 plays of the day, week, and even find it’s way into all those shows at the end of the year. Yeah, it was that good.

Unfortunately in making the play I jammed a finger on my glove hand pretty bad (Don’t worry mom, I’m ok). I iced it last night, but I woke up to a finger twice its normal size, feeling like 10 times its normal size. Ouch. Typing is not my friend today.

Why am I telling you all this? Well it was a really nice catch and I don’t mind bragging a little bit. I also hit well last night and we won the game. But mostly I’m letting people know if they don’t get an email from me the next few days it’s because typing isn’t that easy at the moment. I figured one blog post was better than a number of emails. You don’t realize how much you rely on a single finger until you can’t use it for a time.

photo credit: srid

Hacked Sites

Hopefully none of you will have to deal with this, but a friend of mine recently had her sites hacked by something being referred to as gumblar.cn or martuz.cn. The hack infects your computer and grabs FTP credentials to then inject itself all over your site or sites.

Your website will then be serving a javascript file to infect others. The virus also alters Google search results to send you to the hacker’s affiliate sites I believe.

We think my friend caught the virus during a brief time when her machine was without anti-virus protection. She’s had three sites infected and subsequently blocked by Google for having malicious code. We think a 4th site might become infected and we’re keeping an eye on.

The best sources of information I’ve found about the gumblar and martuz comes from the unmaskparasites website

• Gumblar .cn Exploit – 12 Facts About This Injected Script
• Martuz .cn – New Incarnation of the Gumblar Exploit. So What’s New?
• Stuff I’ve bookmarked at Delicious

The hack leaves code in a lot of files across your site. It creates an image.php and gifimage.php file in every images folder, leaves some encoded javascript at the bottom of .js files and just before the tag on .html and .php files. In some cases it’s also leaving a block php code at the very top of files. We only found the php code at the top of index.php files on one of the three sites.

You really need to go through every file on your server looking for this thing. This thing gets into tmp folders and anywhere else it can.

The hacker also changes some folder permissions in order to leave himself a back door to get in again after you change your login info. It’s a nasty little thing. Hopefully you won’t have to deal with this, but if you do check the two links above for instructions on how to clean your site.

New Twitter Client

How about some good news now?

A couple nights ago I read (on Read Write Web?) about a new Twitter desktop client. I know, I know, yet another Twitter desktop client. This one is called Mixero and goes beyond some of the other current favorites like TweetDeck.

Mixero offers groups and filtering and searching, but I think it goes one better in the organization and the functionality currently available in other clients.

One thing I really like is its ability to stay our of the way when you aren’t actively tweeting, while still be there to the side when you want a quick update. While I like TweetDeck it takes up too much screen real estate for me.

Another nice feature is that you can mouseover shortened urls to see where they really go before clicking. You can also preview pics and videos in the client.

Instead of trying to list all the features here, I’ll suggest you visit the site and watch the video. It’s in the upper right.

You won’t currently find a download link, though. Fill out the contact form and ask for an invite to help beta test if you want to give it a spin.

I haven’t had a chance to tweet much (that finger thing) but I did begin setting up groups and channels last night. My one complaint would be that Mixero has a Vista look that’s out of place on my MacBook. A minor complaint, yet one I hope can be corrected in some way. I have a hunch Mixero is going to be the client I use for awhile as it solves a few problems I’ve had with other clients.

Enjoy the end of the week and the weekend. Hopefully the on again off again icing I’m doing will reduce the swelling in my finger (Don’t worry mom, I really am ok) and I’ll be back to 100% typing speed in a couple of days.

Jammed Finger, Hacked Sites, And A New Twitter Client

• Just because someone follows your tweets, it doesn’t mean they pay attention to anything you say.
• Just because someone clicks a link to your site, it doesn’t mean they have any interest in what you’re offering.
• Just because someone subscribed to your blog, it doesn’t mean they ever read your posts.

More people visiting your site probably means more sales, but it doesn’t have to. A sale does not automatically follow from a visit. In order to become a sale or a lead a visitor needs to go through a variety of intermediate steps. All those steps are important, but they aren’t the end goal.

Crossroads are not the Final Destination

photo credit: Last Hero

You need to understand the difference between your end goal and the intermediate points along the path. Those points are like crossroads and people arriving at them have several options to choose.

If you treat intermediate goals as end goals you allow people to go whichever way they want. If you see them as crossroads you can build signs to lead people further down your path.

• Ranking #1 for a query is meaningless unless the query is one that people actually type into a search engine and those people are potentially going to be interested in your site.
• Submitting content to a social voting site is meaningless unless the community of the site is likely to be interested in the content.
• Placing an ad in a magazine is meaningless unless your market reads that magazine.

Understand what you are trying to achieve and understand how every step in the process contributes to your end goals. Focus your efforts on what leads people down the path you want them to take instead of focusing on intermediate points that allow people to leave your path altogether.

Are You Focusing On The Wrong Goals?

photo credit: Waves at Sunset

At first glance it’s a nice image. We have the sun setting over crashing waves. But where is your eye drawn? What is the main subject of this image? Where you should you look?

Odds are your eye goes back and forth between the waves and the clouds always drawn back to the sun and the horizon in the center of the image.

The center of an image is not the ideal location for the horizon (or any subject). It leaves the viewer questioning whether to look at the sky or the earth below. Centering the horizon creates a static image.

Crop image with the horizon at bottom

Here I’ve cropped the image so the horizon sits at the bottom. Notice where your eye is now drawn. Mine ends up on the cloud directly above the sun.

Here there’s no question where to look. The sky dominates the image and becomes the focus. This image is more dynamic now that the horizon has been pulled down and off center.

But those waves looked nice didn’t they?

Crop image with the horizon at top

Here’s our same image again only this time cropped with the horizon at the top. Our waves are back, though much stronger. Your eye isn’t being pulled away from them toward the sky as it was in the original image.

Without the sky you can feel the force of the waves.

Again by moving the horizon off center we’ve created a stronger and more dynamic image with greater tension.

How to decide where the horizon belongs

Neither of the images above is automatically better than the other. Your choice of where to crop depends on the image and what you’re trying to communicate. You have to decide what feeling you want to convey and which crop works better with your design or content.

The main thing to take away is that a centered horizon is generally a bad idea unless you’re trying to communicate the concept of static. Most of the time you’ll do better to place the horizon above or below the center and the further away from center the more dynamic your image will be.

When taking pictures do you notice yourself placing your subject dead center? Do you crop your images later to create more visual interest?

Try moving your subject off center either when capturing the original image or later through cropping.

Cropping Images For Maximum Impact

Should you organize styles around your html structure or should you organize styles around different aspects of design like layout and color?

In the future I’ll put together a more thorough and detailed post on organizing your css if you’d like.

Organizing CSS Around Your HTML Structure

For years I’ve been organizing my css files mostly the same way. The files will follow a top down approach matching how the design is coded. I’ll usually start with basic html elements followed by common classes and then add sections that mimic the html structure. It generally looks something like this:

body {font:16px helvetica, verdana, arial, sans-serif}
h1 {font-size:24px; margin:0 0 20px 0; color:#00f}
h2 {font-size:24px; margin:20px 0 0 0; color:#0f0}
alignleft {float: left;  margin:0 10px 10px 0}
alignright {float: right; margin:0 0 10px 10px}
.center {text-align: center;}
#wrapper {width:960px; margin:0 auto}
#header {background:#333; color:#eee; border-bottom:1px solid #000}
#nav {margin:0;  background:#777;}
#nav li {float:left; padding:3px 0;}
#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}
#sidebar {float:left; width:320px; font-size:12px; line-height:18px; margin:20px 0}
#sidebar h2 {font-size:18px; border-bottom:1px solid #999}
#content {float:left; width:600px; margin:0; padding-right:20px; font-size:14px; line-height:21px}
#content ul {list-style:disc}
#footer {clear:both}
#footer p {text-align:center}

Organizing CSS Around Aspects Of Design

Lately while working on a WordPress theme framework I’ve been thinking if another approach might be better. Instead of following the html structure I’ve wondered if it would be better to have sections based on different aspects of design.

For example a section of css for layout, another section for typography, and another for color. If you rewrote the css above this way you might end up with something like this:

/* ------------------------------
 		 layout
 ----------------------------- */
#wrapper {width:960px; margin:0 auto}
#sidebar {float:left; width:320px; margin:20px 0}
#content {float:left; width:600px; margin:0; padding-right:20px; }
#footer {clear:both}
#footer p {text-align:center}
/* -----------------------------
 		Typography
----------------------------- */
body {font:16px helvetica, verdana, arial, sans-serif}
h1 {font-size:24px; margin:0 0 20px 0;}
h2 {font-size:24px; margin:20px 0 0 0; }
#nav li a {font-size:12px;}
#sidebar {font-size:12px; line-height:18px;}
#sidebar h2 {font-size:18px; }
#content {ffont-size:14px; line-height:21px}
/* ------------------------------
 		Color
 ----------------------------- */
h1 { color:#00f;}
h2 {color:#0f0}
#header {background:#333; color:#eee;}
#nav { background:#777;}
#nav li a {color:#fff; }
/* ------------------------------
 		Common
 ----------------------------- */
alignleft {float: left;  margin:0 10px 10px 0}
alignright {float: right; margin:0 0 10px 10px}
.center {text-align: center;}
#header {border-bottom:1px solid #000}
#nav {margin:0; }
#nav li {float:left; padding:3px 0;}
#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}
#sidebar h2 {border-bottom:1px solid #999}
#content ul {list-style:disc}

Advantages and Disadvantages of Both Approaches

I can see advantages to both approaches. The top down approach makes it easier to work on a specific section of the site. Say you want to make changes only to your site’s navigation. In that case it would be nice to have all the navigation css in one place.

On the other hand say you’d like to keep everything as is, but would like to change the color scheme of your site. In that case it would likely be easier to have all the css controlling the color in one place.

The disadvantage in either case is whichever you choose you lose out on the other.

If you take the top down approach and want to change your typography you have to constantly scroll throughout your css to find different typographic styles. Changing layouts this way can be a bit of a nightmare as some of you probably know.

If you organize around aspects of your design then you have to look in several places to work on just your navigation or your sidebar.

One other problem is deciding what goes where if you use shortcuts. Take something like the border property. Using shortcuts you might have something like:

border {1px solid #333}

If you only want to pull out the color you lose the shortcut. I think organizing around design aspects would end up leading to more overall code, though probably not too much.

What’s Your Preference?

I’m inclined to think organizing into layout, color, typography, etc will end up being more manageable and ultimately easier to work with and I’m leaning toward changing my css to follow that style.

What do you think? Do you use one or the other and which do you prefer? Do you think one approach would be more maintainable than the other or do you think this comes down to stylistic preference?

How To Organize CSS Files?

Where We’ve Been

As we have throughout this series let’s begin by looking back at where we left off.

We’ve come a long way already. If you look at the image above it’s not a half bad design, especially when you consider we haven’t added anything that could be called visual eye candy. We’ve used a few simple principles of design to come up with a web page that clearly has a purpose.

You can tell the difference between major design elements. We know where the header ends and the content begins. We’re even being called to take a specific action on the page, which is clear at a glance.

We’re almost there. Now lets use the principle of proximity to further refine our design. The changes won’t be as dramatic as last time, but they will make for a more usable design.

Proximity in the Sidebar

I mentioned proximity is the concept of grouping related things together. We already have a fair amount of that going on. If you look at the image above it’s pretty clear that the content is grouped together and the navigation is grouped together and that each group is distinct from the other. We know where the header and footer begin and end and even have clues about what belongs together within each section of the design.

Still there are areas of the design where you might question if certain elements belong together. Look at the navigation in the sidebar. You might have noticed our navigation shows a series of links followed by a space and then by another series of links.

Do all those links go together? Is that second series of links really a set of links? They look the same, but why the gap?

Let’s fix things so the navigation is clearer. I’m going to say the links do belong to different groups and introduce another heading.

Here’s how our new sidebar looks in the overall design.

Notice the difference before and after we applied the principle of proximity. The difference is more subtle, but it’s now obvious the links, while related are somewhat different. In part it’s because we’ve added the extra heading, but it’s also due to the extra spacing we’ve place between them.

If we were to remove both headings, you’d probably still come to the conclusion that the groups of links were somehow different. The headings drive that home. Also notice how the Products heading is closer to the the product links than it is to the service links.

To emphasize things a little more I’ve also added a little more space between the product links and the text below. You likely weren’t going to confuse the text for links, but imagine it were a list instead of a paragraph. The extra space helps distinguish the that the text and links are not the same.

Proximity in the Main Content

Our sidebar is looking good, but what about our main content. Can we improve things there through the principle of proximity? I’m sure you know the question is rhetorical.

One thing we can do is something we just did in the sidebar. I mentioned how the Products heading is closer to the links it describes than it is to the links grouped under services. The headings and paragraphs in the content are currently evenly spaced.

Sure you’d guess that the heading describes the text below, but it doesn’t have to. What if were meant as a pull quote or if the heading was really the caption for an image. In those cases the spacing would play a large role in showing what goes with what.

I’ve done a few things in the image above. First I’ve changed the spacing between the headings and the paragraphs. Headings now sit closer to the paragraph below than above. Again you would likely have understood which paragraph the heading referred to, but it’s much more obvious now.

I’ve added one more change to the last two content sections. Compare how the two bulleted lists look here as they did at the start. Earlier they sat one under another in the same heading/text relationship as the paragraphs above.

Were the lists describing something similar? Was it simply coincidence that they fell one after the other?

Consider how they look now and what the grouping tells us. Each list has it’s own heading so they are somewhat different. Yet both fall under the same major heading indicating that they are somehow related too.

Perhaps each list describes the benefits of your business. Maybe the list on the left is talking about your services and the one on the right is talking about your products. The major heading then might be Benefits and the lesser headings might be Services and Products.

A lot of information is communicated just by the way we’ve changed how the lists are grouped together.

Conclusion

While not as dramatic as contrast or alignment, proximity still adds visual cues to what’s happening in your design. Of all the four basic principles, I think proximity is the one that gets missed the most often. It’s more subtle in many cases, but no less important.

Think about where we started when this series began and what we’ve accomplished. Our initial design was amateur. It was barely a design and yet sadly you’ve probably come across many web pages and websites that has a similar design.

Without having to add much in the way of visual eye candy, we arrived at a professional design by applying a few simple principles. The only images we’ve used are for the call to action button and in the logo and each could be replaced by a non image design element easily enough.

Is this design great? Well, no, but it has crossed from amateur into professional which is what we set out to do. I hope you enjoyed this series and see how powerful a few basic principles can be.

Now that you know what these 4 basic design principles are you should be able to see them in practice as you travel around the web. Take note of them when you do. Notice how one site uses alignment and how another uses repetition. Watch how contrast calls out different design elements and look for how proximity is used to make a design more understandable and usable.

Posts in this series

• Introduction
• Alignment
• Repetition
• Contrast
• Proximity

Design Basics: Proximity To Know What Belongs With What