Microformats are relatively easy to use. In fact if you can code a web page you already have the skills. The goal of this post is to introduce you to the what, how, and why of microformats and point you in the right direction so you can begin using them where appropriate.


photo credit: briansuda

What Are Microformats?

Microformats are a way convey metadata, extra information about your content, to make it easier for others to understand and reuse. They are a set of standards for marking up different types of information that provides a way to consistently structure that information.

For example most websites include some kind of contact information, maybe an address, zip code, and phone number. It’s easy for you and I to recognize that contact information when we see it, but what about machines? Is every string of 5 digits a zip code? Is every set of 10 digits a phone number?

By using semantic markup around a phone number or zip code we can make it easy for that data to be recognized for what it is and allow applications to easily process the information for reuse.

Why Use Microformats?

Before getting to the how, let’s talk about the why. A key point in why to use microformats is in the last sentence above. Because they make it easier to share and reuse information across different applications and websites.

Consider contact information again. Say you come across contact information on a website that you want to add to your email client. How would you add it?

You’d either type the information into the address book of your email client or copy and paste the information. Not hard, but wouldn’t it be easier if the email client understood what part of the web page was the contact information and could add it automatically for you with a click or two?

The image above shows the website for Aref JDEY. Microformats are used for the contact information and the menu overlaid on top of the site is from the operator extension for Firefox.

Imagine your billing application, IM client, general address book, and calendar application also understood the information and could easily add the data. How about finding the location easily in a mapping service with a click? How about making it easier to share social profiles across sites?

Ultimately microformats allow more interaction between your website, other websites, and different applications.

While not specifically a microformat think about RSS feeds. I’m sure you subscribe to some blogs (hopefully this one) in a feed reader. Your feed reader pulls in the content of that blog without you having to visit.

It’s able to do that because the blog publishes a feed marked up in a standard way and your feed reader understands that standard and knows what part of the feed is the blog title, what part is the content, etc. RSS feeds certainly make it easier to publish, share and consume content.

Microformats offer the same idea to other types of content, and one microformat, hAtom, does aim to be a standard for syndicated content.

So how do you actually use microformats? How do you add them to your site.

How to Use Microformats?

I mentioned above that if you can code a web page you have the skills to use microformats. Adding a microformat to your page is no more than using agreed upon classes in your markup.

Take the simple geo microformat, which exists for marking up geographical coordinates. To identify any location all you need are coordinates for latitude and longitude. A simple geo microformat might look like this:

<div class="geo">GEO:
 <span class="latitude">37.386013</span>,
 <span class="longitude">-122.082932</span>
</div>

We have a div with a class of geo letting anyone interested know the contents of the div are the geo microformat. Inside the div are two spans representing latitude and longitude, each with a class of the same name. Any application that can read the geo microformat can now easily grab the information and reuse it.

Contact information has come up a few times in this post so let’s look at the hCard microformat, which exists to mark up your contact information.

Say you’ve added some contact information to your site and it looks something like the following:

<div id="contact">
	<h2>Robert Smith</h2>
	<a href="mailto:robert.smith.mydomain.com">robert.smith.mydomain.com</a>
	<p>
		1234 Main St<br />
		Springfield, IL<br />
		60342<br />
		(123) 456 - 7890
	</p>
</div>

We can turn the above into an hCard by adding a little more markup to it so it looks like:

<div id="hcard-robert-smith" class="card">
	<h2 class="fn">Robert Smith</h2>
	<a class="email" href="mailto:robert.smith.mydomain.com">robert.smith.mydomain.com</a>
	<div class="adr">
		<span class="street-address">1234 Main St</span>
		<span class="locality">Springfield</span>, <span class="refion">IL</span>
		<span class="postal-code">60342</span>
		<span class="tel">(123) 456 - 7890</span>
	</div>
</div>

The two blocks of code above are mostly similar. We’ve changed the id of main wrapping div to more specifically identify it as contact information for a Rober Smith and added a class of vcard. The vcard class is the root class to identify an hCard.

If you look at the rest of the code it should be mostly self-explanatory what each class is doing. email for an email address, tel for a telephone number. The one that might not be so obvious is “fn” which stands for full name.

The hCard does add some extra markup around our contact information, but hardly a lot and if the tradeoff is allowing your visitors to add your contact information to their address book with a click or two isn’t the extra markup worth it?

You can even make it easier to add the markup by using a tool like the hCard Creator. Simply fill in whatever contact information you want to include and the tool creates the markup for you.

Implications of Microformats in SEO and Marketing

One type of machine that might be reading microformats are search engines. Will microformats help your pages rank better? Will they hurt? Will they make any difference at all?

Part of building a search engine friendly site is helping search engines understand your content. Microformats would then seem like a good idea since they aid in having your content understood for what it is.

At the moment there’s no clear evidence that using microformats will help your pages in search results, however Microsoft, Yahoo, and Google have all filed patents about various ways they can segment parts of web pages and separate content from boilerplate code as a way to determine where links are located.

Local search is naturally concerned with your location and some will advise that using hCards can help your content rank better in local search as they are possibly a local search ranking factor.

Google recently introduced the idea of rich snippets into search results. Rich snippets make use of microformats to add additional details about your site in the snippet below your link in search results. Reviews about your products or contact information for ordering might be included directly on the search results page.

Some would say rich snippets aren’t such a good thing, however. The more details you let Google present on their site, the less need people have to visit your site.

Overall I think we’re better off letting our content travel across the web and think rich snippets will help us more than they will hurt us.

photo credit: adactio

Summary

Should you use microformats on your site? That’s really up to you. They aren’t necessary, but neither is publishing a feed and I think most of us who publish a feed would agree there are many benefits to allowing applications to easily understand and reuse your content.

Microformats are relatively easy to implement, though some of the specs can be a little difficult to understand. In general if you can add a class to an html element you can add microformats to your site.

Only a few like hCard are considered stable and in widespread use at the moment, but the more they are added to web pages, the more applications will be built to take advantage of them.

The worst case scenario is you’ll have added some semantic hooks to your html to more easily style your web pages. The best case scenario is more people will be able to access and interact with your content. Seems like a good idea to me.

“Happiness is not a matter of intensity but of balance, order, rhythm and harmony.”
— Thomas Merton

Balance is important in life. Work and play; diet and exercise; yin and yang. A beautiful face is often a matter of the right balance of features. Balance is also a very important design principle. It will help you create an aesthetically pleasing whole and help you better control flow in your designs.

I’ll leave it up to you to find balance in your life. You can read this post to find out how to create balance in your web design.

What is Design Balance?

balance is the state of equalized tension
— Alex W. White from “The Elements of Graphic Design“

Let’s take a step back from design and think about physical balance. Picture a lever with a fulcrum at the midpoint; a see saw perhaps. If you place two equal weights the same distance away on opposite sides of the fulcrum, the lever will balance.

We can use a simple formula to express this.

F1 x D1 = F2 x D2 (where F is the force and D is the distance from the fulcrum)

When the force x distance on each side of the equation is equal, balance is achieved. In the example above the force (weight) of each object is the same as is their distance from the fulcrum so we have balance.

What if the fulcrum is off center.

In that case the force of one of the objects needs to be increased in order to achieve balances. An adult on a see saw must move toward the center if there’s a child on the other side.

Nothing too difficult to understand even if I did lapse into physics momentarily. Balance in design works the same way as a lever or see saw. Your design will have a vertical (or horizontal) axis and the weight of the various elements on either side of the axis and their distance from the axis will determine if your design is balanced.

There are two kinds of balance that correspond to our lever images above, namely symmetrical and asymmetrical balance, but first what gives an element visual weight?

Visual Weight in Design Elements

The major difference in design balance and physical balance is that your visual elements don’t have a physical weight. They do however, have visual weight.

Some things that affect visual weight:

• Size – As you would expect larger elements carry more weight
• Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
• Density – Packing more elements into a given space, gives more weight to that space
• Value – A darker object will have more weight than a ligher object
• Whitspace – Positive space weighs more than negative space or whitespace

Symmetrical Balance

Symmetrical balance is like having our fulcrum in the center of the lever. To achieve balance we need to have elements of equal weight on both sides of a central axis.

Symmetrical balance tends to be more formal and more static. It evokes feelings of consistency, elegance and classicism.

Think of a wedding invitation. They tend to use centered text in part because this helps achieve symmetrical balance, which leads to feelings of formality and elegance. Exactly what a wedding is expected to be.

Symmetrical design balance is easy to see and relatively easy to achieve.

Leonardo’s Last Supper is a great example of symmetrical balance in art. For everything on the left side of the painting there’s something of equal weight on the right. The entire painting is balanced around the central figure of Jesus Christ, which makes perfect sense given what the painting is about.

It’s easy to see the balance in the home page of Tilly Moss. Equal weights exist on each side of the middle column. The central part of the page is symmetrically balanced both vertically and horizontally lending elegance to the products.

Asymmetrical Balance

Asymmetrical balance is like having our fulcrum off center. Unequal weights need to be placed on either side of the fulcrum in order for balance to be in equilibrium. Visual weight will not be evenly distributed around a central axis and often you’ll find one dominant form on one side of the axis offset by several less dominant forms on the other.

Asymmetrical balance is more dynamic as there’s more visual variety in design elements. It’s more interesting because of that variety, but also more difficult to achieve.

Elements in asymmetrical design will have more complex relationships between them and the overall design will use more whitespace to equalize the balance.

Asymmetrical design evokes modernism and feelings of forcefulness, vitality, and movement.

In Kandinsky’s Composition #8 the dominant element is the dark circle in the upper left. No single element on the right side of the painting carries the same weight as this circle, but the dense line work on the right side carries enough weight together to give a counterbalance to the painting. Notice how the left side of the painting contains more whitespace, since the circle already carries enough weight for that side.

Equilibrium is achieved on the home page for the Ernest Hemingway Collection, by balancing the larger content area on the right with a variety of objects packed closer together on the left. The darker color of the elements on the left adds to their weight as does the idea of there being a full cup of coffee in the center of the left hand side.

Would the home page feel as balanced were the coffee cup image at the top? The bottom?

Radial and Mosaic Balance in Design

Most of the time you’ll be dealing with either symmetrical or asymmetrical design, but two other types of balance are worth mentioning

• Radial balance – all elements radiate in or out from the center. Think beams of light coming from the sun. It’s easy to maintain a focal point in radial balance as it will always be the center.
• Mosaic balance – many elements on the page create a sort of balanced chaos. Think of a Jackson Pollack painting. Mosaic balance lacks hierarchy and can look like noise. It’s harder to define a single focal point in all the chaos.

Summary

As in life balance in design is important. It’s one of the principles of design. A balanced design has a unity of composition and helps the design make a single impression on the viewer and just feels right.

In unbalanced design the individual elements tend to dominate instead of the whole. The parts become more visible and there are many messages instead of a singular unified message.

Your own judgement can go far in achieving balance in your designs. Train your eye to see balance in the compositions of others. Which elements of the composition look heavier or lighter and why do they appear that way?

By training your eye and learning to control the weight of different elements you’ll be able to achieve balance in your compositions and create more appealing designs.

photo credit: Abdulwahab Alhajji

Basics of Marketing Distilled

Marketing is a complex topic, but you can boil it all down to a few basic ideas. There are a lot of details within those basic ideas, but you have to understand the basics before you can get the details right.

• Figure out who potential customers are – Where do your services intersect with a specific group of people? That intersection is your market. Always be listening to your market. Pay attention to what they’re saying so you can tailor your offering to their wants and needs.
• Figure out where your market spends its time – Do they visit the same sites? Read the same magazines? Where can you get your message out so it reaches your market
• Build a brand in front of your market – Build a presence where potential customers are. Are potential customers using Twitter? Then open an account. Is a forum’s membership made up of you typical client? Then join that forum and be active.
• Be in front of your market when they’re ready to buy – Find a way to be in the thoughts of potential clients at the moment they’re looking for your services. Search works great for this. Branding is even better.
• Convince your market to purchase from you instead of your competition – You offer web design services. So do hundreds of thousands of other people. Why should I hire you? You have to answer that question. Why you over the competition? Find a way to differentiate yourself.

photo credit: Dylan Luder

Ideas for Landing Clients

• Be realistic about your goals and needs – You don’t need millions or even thousands of visitors to be successful. You don’t need a lot of money to build a brand. You need to reach a handful of people with a message that resonates with them. Build a brand in front of a small community of people in your market
• Keep trying different avenues – Clients can come from anywhere. Try to be in as many places as you can and look to get one or two clients from each place. Put more time into those avenues with better results and spend less or no time in the avenues that lead to little or no results.
• Build a site with a portfolio – Your site is the central hub for everything you do online. Potential clients want to see examples of your work so show them examples. Build a few freebie sites if you have to or build some templates and themes.
• Treat every client well – It takes less time, effort, and money to get business from an existing client than it does to land a new client. Exceed client expectations and turn as many as you can into loyal clients.
• Be persistant – You won’t build a client list overnight. It’s going to take some time no matter what you do so hang in there.

How I Landed My First Few Clients

Early on I put myself out there as much as I could and looked to get clients from every source possible. Over time I’ve gained clients through forums, offline networking, online networking, Chamber of Commerce, search engines, blogging, Twitter, friends and family, and Craig’s List. Some of those avenues led to exactly one client, but it’s still one client.

What worked best for me, especially in the beginning was forums.

Small business forums were my target market. By participating and contributing as often as I could I was able to build a brand in front of a community that was likely to need my services.

My goal was to always add value to the forum and the members. I never asked people to hire me. I simply showed them what they would get if they did hire me.

In addition to small business forums I joined and participated in webmaster and seo forums in order to build relationships with people who would become part of my social network. These people recommended me and linked to my site.

I added a blog to my site to show my expertise and grow my site and consistently worked on making improvements to the site wherever and whenever I could.

It took a few months, but it did work. First an email arrived with a project. Then the phone rang with another project. The projects trickled in at first, but over time they started to come in more often.

The key for me was trying as many different things as I could and working each for one or two clients. Avenues like forums that led to more clients received more of my time and those that led nowhere received less or none of my time. I succeeded by building a brand in front of small communities made up of my target prospects.

Summary

Your first few clients will be the hardest to get. Always be working to improve your craft and your business. Listen to what people are saying in order to find the intersection between your skills and their wants. Tailor your services to meet the needs of the market.

Understand the basic ideas behind marketing. Identify likely places where potential clients might be, build a presence and brand yourself in as many of those places as possible. Divert time and effort from avenues that aren’t working well to those that are.

Be patient. You won’t build a business in a day or a week. Persistence is key. I can’t guarantee you’ll get a client tomorrow by trying any of the above, but I can guarantee you won’t land one if you give up.

In fairness if you read enough blogs you’re going to see the same topics covered again and again and we know those sensationalized titles do work to get clicks. But after awhile what you get from reading seo blogs isn’t quite worth the effort involved reading them. There’s a saturation point where you aren’t learning, but you wish there was a place where you could.

The good news is that place exists.

The SEO Dojo

A few months back I made the announcement that my gypsy friend Dave was working on the SEO Dojo, a place where people could talk and learn SEO in a private community. At the time it was still a work in progress, but no more. Today the dojo goes public and is opening it’s doors to all.

Let me share a little of what’s inside and then why I think the SEO Dojo is a great place to learn and network. First in Dave’s own words:

The Dojo started out as a little hide-away for a band of weary SEO warriors who wanted a private playground to store resources and discuss the the daily grind. Over time, the resources and membership grew into something that is now a prized resource for many. Now it’s YOUR chance to join this fast growing community!

What’s Inside the Dojo?

Along with the usual profile set up familiar to forum hounds and social networkers, there are two main sections in the dojo

1. Study Hall
2. Dojo Training

Study Hall

Inisde the study hall are courses to increase your seo knowledge. Each course consists of an ever growing series of articles on different aspects of SEO At the moment there are 4 courses with more planned for the future.

• SEO for beginners
• Your Guide to Search Ranking Factors
• Link Builders Handbook
• SEO Site Audit Framework

Future planned courses will be on keyword research, advanced link building, and content creation

photo credit: stefanravn

Dojo Training

To me this is where the meat of the SEO Dojo is located. Inside there’s an active forum, links and reviews for a host of seo tools, a weekly live chat, a selection of videos and a library of downloadable material including worksheets and both of Dave’s seo handbooks.

Everything you need to take you beyond the basics is here. It’s real tools and info from real practicing SEOs with ideas on how to best use them. This is where the member forum is located, which I’ll touch on more in a moment.

This area of the dojo is a great way to gain the knowledge that’s absent on the usual blogging trail and to really meet and get to know many in the SEO community. You’ll find people who’s names you know as well as people who’s names might be unfamiliar.

Why I Like the SEO Dojo

My favorite part of the dojo is the community. There’s a spirit here of cooperation and communication. This isn’t a forum with people arguing with each other over nothing while you have to sift through page upon page of nonsense to find the one nugget of useful information.

The dojo forum is a community of people who genuinely want to help each other and learn from each. Dave has modeled the places after a martial arts dojo where teacher is student and student is teacher. Check your ego at the door and understand we all have valuable information to share.

It’s that spirit of community I find most useful and that spirit which all too often I find missing when traveling through the seo blogosphere. Joining the dojo is worth it to me if just to get to know some of the people in the industry for the people they really are. You can make friends here and build a network of allies to help with future promotions.

Still Not Convinced?

Don’t take my word for it. Visit Dave’s site and read more about the SEO Dojo, who it’s been created for and who it’s not for. Once again in Dave’s own words

Or check out the testimonials of some of the early members including yours truly.

At the end of the day, the preservation of the learning spirit behind the gates is key. If you’re here to exchange knowledge, seek out opportunities and further your abilities, the SEO Training Dojo is where you belong.

The cost to join is minimal, especially when compared with some other seo communities and Dave is running a special promotion on the pricing and is even giving special discount to Van SEO Design readers.

Just the the coupon code VanSEOrocks when you sign up to receive 25% off the price. The coupon is only good for the first 25 readers who use it.

Don’t miss out on a great place to meet and learn from the community.

And don’t forget to sign up for the free SEO Dojo Newsletter It’s a great way to keep up with the latest news and teaching from the dojo for free.

And best of all floats really aren’t that hard to work with once you understand a few key points.

photo credit: ♥ellie♥

What is a Float?

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).
— w3.org

The float property has 3 values; none, which is the default, left, and right. As much as you might wish it so there is no center value. Horizontal centering in css is accomplished through margins.

Floats sit as far left or as far right as possible within the immediate containing div. Depending upon the available width where a float is declared, other elements can sit next to a floated element or flow around it.

The Difference Between Floats and Positioning

In css there are 3 types of positioning schemes. From w3.org

1. Normal flow – In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.
2. Floats – In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning – In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Relative positioning shifts elements relative to their position in the normal document flow. Other elements are not affected and lay where they would had no positioning been applied. This leads to the possibility that elements with relative positioning may overlap surrounding elements on the page.

Note that floats are taken out of the normal document flow, but floats do affect the position of elements around them.

How to Effectively Use Floats

There are two main ways floats are used.

Text Flowing Around An Image

Images are the most common, but you can substitute a different element. The idea is that text will wrap around some element.

This was the original intention of the floated element. You float an element left or right and allow other elements, usually text to flow or wrap around the element. When using floats in this fashion you want to have both the floated element and the wrapping text inside the same containing element.

<p>
<img class="alignleft" src="" alt="" width="" height="" />
Lots of text here. Enough to wrap around the image.
</p>

img.alignleft {float: left; margin: 0 10px 10px 0}

In the above code both the floated element and the wrapping text are contained within the same paragraph.

Notice that in the css I’ve added a right and bottom margin. It’s good practice when floating an image to add a little space between it and the wrapping text. Left floated images get a right margin and right floated images get a left margin. Both have a margin added to the bottom. 10px is arbitrary and you could use padding instead of margins if you choose.

Column Layouts

Because floats allow two block level elements (such as divs) to sit up against each other, it’s easy to use them to create columns.

<div id="wrapper">
	<div id="left-column"></div>
	<div id="right-column"></div>
</div>

#left-column {float: left}
#right-column {float: left}

Float both column divs above to the left and you have two columns. You would also need to make sure the combined widths of the two column divs can fit inside the width of the wrapper div. Alternately you can float the right column to the right, but I usually prefer floating both in the same direction.

Add a header div above the two columns and a footer (with the clear property applied) below and you have a nice and simple 2 column css layout.

One last tip when floating an element. Always set a width on the floated element. Not setting one could have unintended consequences.

Clearing Floats

Often with floats you’ll want to ensure an element that follows one or more floated elements sits below those floated elements. The solution is the css clear property.

Clear takes the values left, right, both, none (default), and inherit. In practice you’ll only use the first 3 and most of the time you’ll use clear: both.

Perhaps the most common use is to clear your footer div so it sits below your 2 or 3 floated columns.

Containing Floats

The first thing to consider when containing floats is to make sure the containing element is wide enough to hold the floated elements you want to sit next to each other. If you float two elements left in order to create a two column layout and the combined with of the floats is greater than the width of the containing element, one of the floated elements will drop to the next line.

I mentioned above that floated elements are taken out of the normal document flow. This leads to an interesting and confusing issue when all the elements inside a containing element are floated.

A common place you might see this is when you have a header div and the only elements inside is a logo image which you float left. You also apply a css background-image to the header, but it doesn’t show up.

The issue is that the header div contains the single floated image and and because that image is no longer in the normal document flow, the header div considers itself to be empty and has no height. The containing div has essentially collapsed on itself. There are a few ways to deal with this problem.

You could explicitly set a height on the container div. This would work fine in the header example above, but may not be feasible in all cases of collapsed containers. Sometimes you’ll want to add an empty div that you clear below the floated elements.

<div class="clear"></div>

This works well if it’s ok to have a little extra space below the floated elements. Some browsers may apply a default height, margin, padding, etc. to the empty div.

The last method is to use the overflow property on the containing element. You’ll generally use overflow: hidden, but depending on your situation you may prefer to use overflow: auto or use overflow-y instead of using it in both directions. Overflow prevents the containing element from collapsing.

Issues With Floats

In addition to collapsing containers there are a few issues with floats to be aware of.

Older versions of IE have a double margin bug. If you float an element in one direction and also add a margin on the element in the same direction (left/left or right/right), IE doubles the margin.

A simple solution is to set display: inline on the floated element. Alternatively you can use conditional comments to set a different margin for IE or for a specific version of IE.

Another common issue is adding elements inside a floated element whose width is wider than the width of the floated element. You might for example add an image inside a floated div and the image is wider than the div itself.

Depending on the browser this could lead to your floated element being wider than you intended or it could lead to content overlapping your image. Make sure elements inside a floated element aren’t wider than the floated element.

One last issue to look out for is that of the disappearing bottom margin. The bottom margin of a floated element inside another floated elements might be ignored. The simple solution is to use padding instead of margin when that happens.

Summary

When people first learn css they tend to gravitate toward absolute and relative positioning for layouts, since both seem simpler on the surface. It’s generally better practice to use floats and if you remember a few key points you should be able to understand and to control floated elements in your layout.

• Floats are laid out in normal document flow and then shifted as far left or right within containing elements and removed from normal document flow.
• Elements can flow around floated elements as long as there is enough horizontal space to contain them. If there’s not enough space the elements will display below the floated element
• Floats and positioned elements are different and behave in different ways. You can’t apply both to the same element.
• Use floats when you want text to flow around an element or to create columns in a layout
• Remember to clear elements that you want to fall below floated elements and to keep containing element from collapsing
• Find solutions you’re comfortable with to a few common float issues in Internet Explorer

I hope the above helps clear up some of the confusion you might have using css floats. If you have more questions about them please ask and I’ll do my best to answer. Here are a few other good posts about floats that you may find helpful.

• CSS Float Theory: Things You Should Know
• All About Floats
• Floatorial

Price = Rate x Time
Rate = Price / Time

Reduce your time while holding your price constant and your rate goes up. It’s in your best interest to work more efficiently and without too much effort you can get more done in less time.


photo credit: romana klee

Identify Repetition in your Work

Sure design is a creative process and every design is unique. Still there are plenty of things you do from one site to the next that are very much the same. Why reinvent the wheel?

The next site you design and develop is going to have some kind of navigation. How many different navigational systems do you use? Odds are your next navigational system will fall into one of the following three categories:

• horizontal navigation bar
• vertical menu system
• tag based navigational links

You’ll likely use one of the first two. Your next navigation bar won’t look exactly like your last one, but it will (or should) be built from an html list and styled with similar css. Your navigation bars will inevitably have many repeating elements that don’t need to be recreated from scratch with each new site.

Pay attention and start to identify where you repeat work from one project to the next.

Build a Library of Reusable Code and Graphic Elements

As you identify repeating elements, start saving them and building a library for reuse. Take that code for your menu and save it. When it’s time to code a menu in your next website grab that code as a starting point.

photo credit: ilovememphis

Even better get a code editor that allows you to save code snippets or lets you use shortcuts to enter larger blocks of code.

I currently use Coda as my editor of choice and through it’s clips panel I can build the basic shell of a site in a few seconds. Many code editors offer similar functionality. It’s time to stop using Notepad and invest in something better.

Do you use buttons in your designs? How different are they really? Do you save PSD files for each type of button you use? Why not?

Saving graphic elements like buttons and icons or using those others create for you is a great way to save time on projects.

Take a few seconds to save code snippets from your current project. Make some time each week to write code you know you’ll use on future sites. Go through your existing library and improve it. Design a better button. Improve the code of your navigation bar.

Think Object Oriented

At least in terms of it’s benefits. Object oriented thinking leads to:

• Faster development
• Reuse of previous work
• Increased quality
• Modular architecture

By isolating work you’ve previously done for reuse, you can design and build new sites faster and work to improve those small blocks of code and graphic elements in between projects. Modular architecture allows you to drop in components into any project and again improve those modules in between projects.

Even something like css which might not obviously lend itself to objects can be written in a more object-oriented way.

Develop Processes for Everything

You likely have a similar workflow from site to site. That workflow is your design process. It may vary some from site to site, but by following the same general roadmap you give yourself direction and ultimately work faster and smarter.

Your processes don’t have to be limited to your design work however. Develop systems for everything you do in your business. Save email templates for common replies. Use a billing program to send and keep track of invoices. Automate repetitive tasks where possible.

Systems and processes keep you from reinventing the wheel over and over. When you find a process that works stick to it. Don’t solve the same problem again and again. Once you have systems in place you can improve them and make them more efficient, but get them in place.

Manage Your Time Better

We all procrastinate. We all let things distract us. We all know we shouldn’t do either. Time management is more than avoiding work. It’s about figuring out when you work best.

photo credit: Quinn Dombrowski

Are you most productive in the morning? The afternoon? Evenings? Late night? Are you able to work better at some things early in the day and others come better after lunch?

I find I’m most creative in the morning and late at night. In between creativity is a struggle for me. I no longer begin a new design in the afternoon. A blog post I can write in an hour in the morning will take me 2 – 3 hours in the afternoon and it won’t turn out as well. On the other hand I can be analytical at any time of day. Late afternoon I’m useless for most work so I run life’s errands instead.

Schedule different tasks at different times of day. Writing in the morning, coding in the afternoon, designing at night works for me. It helps me finish each faster and better. The tasks and times may be different for you, but chances are you do certain things more efficiently at different times throughout the day or week.

Speaking of schedules, learn to set one. Plan out your most important projects during the week and set aside time for them every day. You’ll be amazed at how much more you can get done when it’s set out in front of you on a calendar.

One day each week I map out what I want to get done and start blocking out times for each task on my calendar. I’ll adjust as the week progresses, but I always find I get more done when I fill in the calendar. When I don’t it’s much easier to let the procrastination and distractions creep back into my week.

Summary

Think again of the simple pricing formula at the start of this post.

Price = Rate x Time
Rate = Price / Time

You likely charge the same amount for the same kind of project. If you reduce the time it takes to complete a project then you earn a higher rate on that project. A higher rate means you can either work less or make more money. Either sounds good to me.

What tips do you have for working more efficiently?

Browser Rendering Engines

photo credit: Le Scribbler

Some browsers share rendering engines . Safari and Chrome both use the WebKit rendering engine for example, so if your site looks good in one, odds are it will look good in the other as well. The main rendering engines you’ll likely be concerned with are:

• Gecko – Firefox, Flock, Camino
• WebKit – Safari, Chrome
• Trident – Internet Explorer
• Presto – Opera
• KHTML – Knoqueror

Get a feel for how well a rendering engine adheres to css and realize that if your code works in Firefox it likely will work in Camino as well. Here are some charts that compare different browsers and their compliance with css. Be aware they may not be completely up to date.

• Comparison of web browsers
• CSS contents and browser compatibility
• CSS Browser Support (IPhone, IE8, IE7 Compliance Mode, FF 3.5 Beta & Safari 4 Beta Included)

Use a Reset So Everyone is on the Same Page

One of the main cross browser issues is that each browser or rendering engine uses different default values. For example when it comes to lists one browser might use padding to indent the list while another might use margin to set that same indent.

The easiest way to make sure all browsers are using the same defaults is to use a css reset file like Eric Meyer’s reset reloaded or Yahoo’s CSS reset.

If you look at the reset files you’ll notice they cover some elements you probably never use. If you’re up for it you can write your own reset file that includes only those html elements you’re likely to use. Developing your own reset can also be a good way to learn more about the default values different browsers use.

Choose Your Browser

A quick point to consider is which browsers and versions you’ll develop for. IE6 is notoriously bad at rendering quite a few things. Should you do the extra work to develop your site for it? That depends on the site and the expected audience.

photo credit: rcourtie

Remember you don’t have to develop your site for every browser that exists. Develop for the browsers that will realistically be used to view the site.

Develop to Web Standards and Your Own Standards

Because Internet Explorer is the most commonly used browser many think they should develop for it first. However, IE is also the browser that gets the most things wrong so this isn’t the best strategy. It’s generally best to develop to web standards and then tweak for IE.

By developing to standards you lay the groundwork for a good page and then you can tweak as appropriate where some browsers get it wrong. You’ll find you spend much less time on specific browser tweaks this way than if you develop first for IE.

In addition to web standards, develop to your own standards. As you build more websites you’ll naturally begin to reuse the same code. Every 2 column layout or 3 column layout I create starts with the same basic html and css. Over time I’ve learned where the potential problems might be and I’ve developed code that works well across browsers.

Build yourself a library of layouts that work cross browser and continue to use and improve them.

Tweak for Uncooperative Browsers (I mean you IE)

It’s inevitable that a few things won’t work quite as expected in every browser and usually that every browser will be Internet Explorer. IE isn’t nearly as bad as most people think when it comes to rendering css. Yes you’ll likely mutter “IE sucks” under your breath or scream it our loud at times, but it really isn’t as hard to deal with as you might think.

Many web developers, including myself consider conditional comments as the best way to deal with the quirks of IE. Only IE reads conditional comments. All other browsers ignore them so it’s a great way to send IE-specific code to IE. You add them to the head of your document like so:

<!--[if IE]>
IE specific code here
<![endif]-->

As your skills improve you’ll find you only need to adjust a few things for IE. Maybe one div is displaying further from the right edge than you intended due to the double float issue.

One solution is to reduce the left margin on the div. By using conditional comments you can tell IE to use the reduced margin, while all other browsers use the original margin.

You can create an IE specific stylesheet (style-ie.css?) and then load that css file for IE through conditional comments. Even better you can target specific versions of IE so you can have a style-ie.css and a style-ie6.css, etc.

photo credit: Stryker W@SP

Experiment and Play

In between projects create a file and just play. Experiment with css borders and see what happens when you set different properties. Build a house with css if you’re up for the challenge. The idea is to experiment and play with the goal of learning to better control your tools.

When I was first learning css I set myself a challenge to learn something new on every site. With each site my skillset grew and I had more tools at my command. On a slow day I would open a new file and just see what I could do with css and what I could create.

If you do the same your skills will improve and you’ll soon be developing sites quicker that require less browser specific code to display the same across different browsers. There’s no replacement for experience.

Conclusion

When you’re first starting out developing all css sites it can be frustrating at times and you might swear that your site will never work cross browser. Please believe me when I say that thought will only be temporary if you develop a good approach to building sites.

Understand the major differences in browsers, code to standards, and tweak. In between sites experiment and play to improve your skills.

Cross browser development is not as hard as it seems. The key is to understand how you develop and where the potential problems might be. As you understand the typical problems that arise in your particular layouts, work to find solutions for these problems and look to improve your basic layout code.

photo credit: mbowlersr

If you run any kind of service based business I’m sure you’ve encountered a similar situation.

What do you do when your client isn’t giving you the information you need to do their job?

Do you try harder to get the information or just do the best you can without it?

Tips for getting the information you need

Here are a few tips that have helped me gather information from clients who aren’t as forthcoming as I’d like. Hopefully they can help you too.

1. Ask direct questions – Seems obvious I know and you may not get all the answers you want, but you’ll likely get some. If you don’t ask questions don’t blame the client for not supplying answers. Before anything else ask your clients directly. Prepare a list of questions you typically ask for all projects and make sure to ask them.
2. Listen between the lines – Clients will often tell you what you need to know, though sometimes the information comes in answers to other questions or while you’re engaging in idle chit chat. Find a way to keep them talking and pay attention.
3. Get to know your clients better as people – This goes with the above. since answers may not come in direct questions. Get to know your clients better to understand them more. The better you know your clients the more you’ll understand what they mean when they tell you something.
4. Ask indirect questions – A client might not know what they want included in a sidebar, but they might be able to point you to three sites they like with similar sidebar content. Look for ways to rephrase questions or ask a completely different question that might still reveal the answer you seek.
5. Speak your client’s language – Don’t get lost in industry speak. Your clients shouldn’t be expected to know your jargon. You call it a navigation bar and your client calls it a menu. You want to know what the call-to-action on a page will be. Your clients says they want people to go to their contact page. The more you ask questions in their language, the more likely your clients will be able to answer those questions.
6. Give deadlines – Sometimes you need information from a client to move forward with a project. Let them know clearly when you need it and make them understand if they haven’t sent the information by your deadline you won’t be able to finish the project by their deadline.
7. Mention prices – Money talks. Require a non-refundable deposit before beginning work. If a client has money out there they’re more likely to work with you to complete their project. It’s amazing how much more responsive people can be when it’s costing them money by not being responsive.
8. Use your client’s preferred medium for communication – I prefer email, but not all of my clients do. Some will offer little information in writing, but will give you everything you need over the phone. You’ll get more info from them using their medium of choice.

photo credit: dno1967

It takes two to communicate

It can be easy to blame clients when they aren’t giving you the information you need, but it takes two to communicate. Instead of getting mad learn to communicate more effectively. If a client won’t send you sites they like, then send them three very different sites you’re thinking of using as inspiration. Odds are the client will let you know which sites they do and don’t like.

My client? I was able to get the information I needed for the project, by applying some of the tips above. In this case it also helped that I’ve worked with this client for awhile and can guestimate well based on past projects.

If you need information from your client always look for different ways to get that information. If you tried a color scheme on a design and it didn’t work, you’d look for another color scheme. Do the same thing with clients. If you don’t get the information you want with one question, ask another question.

The key is to keep asking in different ways and trying trying different things. If your client isn’t giving you the information you want then take responsibility and find a way to get that information.

Let me also say that if you prefer to develop sites with a table-based layout, good for you. I’m not going to tell you that you’re doing anything wrong or evil or that the world is going to come to an end. I do think css is the better option, but feel free to develop sites any way you want.

photo credit: Marjan Krebelj

What This Debate is Really About

Calling this debate css vs tables is actually inaccurate. You can use css with a table-based layout. One argument the css side always uses is that having your presentation in a separate file makes the site easy to maintain. That is true, but you can have all your presentation in a separate css file while having a table-based structure to your html.

If you originally decide all your h1 tags should be blue and later want them to be red it’s certainly easier to have your h1 style sitting in a single css file. You can do that regardless of how you structure your layout. That would be a debate between using css or html attributes for presentation. I don’t think anyone is arguing in favor of html attributes.

What the css vs tables debate is really about is whether or not to structure a web page with tables or divs. In its simplest form we’re comparing:

<table>
  <tr>
    <td>Some content here</td>
  </tr>
</table>

and

<div>Some content here</div>

The Problems with Tables

Even in the simplest case above you can see tables are already a more complex structure than divs. We needed three sets of tags to present some content as opposed to the one set of div tags. As we add more to the page’s design the table complexity continues to increase compared to divs.

In the best case scenario you’d be adding at least another table cell to get another block of information compared to adding another div for another block of information, which would grow our code equally. Most of the time though, that relationship won’t be 1:1. It will usually involve adding more tags on the table side as compared to the div side.

More code leads to more potential for errors. Software developers have known that for years and it’s equally true of the code used to develop a web page or site.

photo credit: angeloangelo

That brings us to the second problem with tables. They impose a more rigid structure than divs. Every table cell is dependent on the other table cells in its row to maintain the structure. Divs can work independently from each other. You can’t pluck a single cell out of a table and move it somewhere else in the layout. You can’t break out of the rigid grid easily. You can with a div.

Suppose you have a typical two column layout (content and sidebar) and you wanted to reverse the order. Maybe you want to move the sidebar from the left to the right of the content. With a table-based layout the only way this would be possible would be to go into every page of your site and change the underlying structure. With a div-based layout you could make this change in your stylesheet alone. Granted it’s not the kind of change you’re likely to make, but as an example it shows the greater flexibility and control you have in developing with divs.

The third problem with tables is in how browsers render them. In order for a browser to render a page built with tables it needs to read the code on the page twice. Once to understand the structure and another time to present it. That extra pass at the code makes table-based layouts take longer to display. With a simple table structure the extra time might not be noticeable, but as the structure becomes more complex with more and more tables nested inside each other it is noticeable.

If you ever visited a page that showed nothing for a few seconds before everything suddenly appeared, that time was likely your browser making it’s first pass over the table structure behind the page.

The Advantages of Divs

The advantages with using divs are essentially counter to the problems with tables described above. A div-based layout is:

• easier to maintain – less code and less complexity to the structure makes things easier to find and change.
• more flexible – since one div is not dependent on the other divs on the page it allows for more freedom in your design
• quicker to load – blocks of code can be presented right away instead of the browser requiring an extra pass

That might not seem like a lot, but just those three things are enough to make a div based approach better to a table based approach. Now let’s get to some of the myths on both sides that keep this debate going.

photo credit: Detlef Schobert

Myths About Divs and Tables

I mentioned at the start of this post that misinformation spreads on both sides of this debate. As people combat these myths the debate goes on and on combating misinformation while dancing around the central issue. Let’s see if we can dispel a few myths from each side

1. CSS (divs) are better for SEO – Search engines don’t care one bit if the code behind your page uses tables or divs. Search engines are interested in your content, not your code. It’s true that less code means less potential for show stopping errors, but those show stoppers can exist regardless of your site’s structure.

   Some might argue that the content search engines see on the page is more important and through divs it’s easier to present a different order of content to visitors and search engine spiders. It is easier with divs, but it can also be done with tables.

2. CSS (divs) are more accessible – Both tables and divs can be coded to be accessible or inaccessible. You’ll have more control over how your page displays with divs that can aid in how a screenreader sees your content, but again you can create equally accessible pages using either approach
3. CSS (divs) is hard to learn – Simply not true. CSS is not hard to learn.The argument is made by people comparing learning something new to learning something they already know well. That’s not an apples to apples comparison. Laying out a site with divs has a learning curve. So does laying out a site with tables. The problem most people have when learning to use divs is trying to force them to act like tables instead of allowing them to be what they are.

   Even if we accept the argument that learning to use divs is difficult that doesn’t make tables a better approach. The best things in life are not necessarily easy or easy to learn. Not doing something because it takes time to learn is laziness.

4. CSS (divs) requires too many hacks to work cross browser – Entirely false. Perhaps it’s a matter of experience, but if you know what you’re doing you never need to use any kind of hack. It’s been years since I wrote more than a few lines of code specifically for any one browser and none of that code is a hack.

   If you develop to standards at most you’ll need to tweak a few things for Internet Explorer and usually only older versions of IE. If you find yourself needing hacks then most likely you haven’t thought out your structure all that well.

5. It’s quicker to develop with tables – Nope. I guarantee I can develop a page with divs quicker than you can develop it with tables. This argument usually includes the time taken to learn to use divs, which isn’t a fair comparison. Take two developers, one who is fluent with tables and one who is fluent with divs, hand them a layered PSD file and ask them to code a web page to see who finishes first. My money will be on the person using divs.

Conclusion

This is one of those debates that never seems to go away and I guess I’m not exactly doing my part to make it go away with this post. I find it hard to believe that anyone who honestly knows how to develop a site well with both tables and divs would ever choose to use tables. Having used both it’s very obvious to me that the div based approach is the much better way to go.

There are a lot of myths propagated by both sides in this debate, but once you cut through most of them the argument really boils down to a few things.

Divs require less code and are less dependent on each other than tables. That leads to easier maintenance, more freedom in design, and quicker load times. Those arguments alone should be enough to tip the scales in the argument. Everything else is really irrelevant.

It’s been a long time coming. Teaching Sells is finally reopening it’s doors and will once again be sharing how to make money online.

The fall semester will officially begin in early September, but today Brian, Tony, and Sonia have released a video showing you what the program is all about. Watch the video and then get the freebies listed below.

• A Free report (22 page PDF and audio)
• 20 Step Process Map to build an online training business
• Instructional video on building traffic
• 3 case studies that demonstrate how 3 online entrepreneurs have used online training to build successful businesses online

Why I Recommend Teaching Sells

You don’t see me promoting many training courses. Teaching Sells is one I have and will continue to promote, because it’s taught me so much about running a business. While the basic idea behind the course is to teach you how to successfully create and run a membership site, I’ve learned things like:

• How to create more effective content
• What makes for a profitable business model
• How to effectively market ideas
• How to persuade instead of sell
• How to be an “entreproducer”

An additional benefit to the course is that after going through it, Brian Clark himself can serve as an ongoing case study. The course gives you a look into how Brian runs his very successful business and you can see how he profits with sites like CopyBlogger.

I’ve mentioned in the past how for me Teaching Sells was the final piece of the puzzle. I can’t promise it will be for you, but for me it filled in those last few gaps in my understanding about business online.

Shortly after entering the course my business improved dramatically and while some of that was due to things I had put in place prior to the course, I don’t see it as coincidence that I’ve been making much more money since taking the course than I did before taking it.

If you’re unsure if the course is for you watch the video and then sign up to receive the free report and case studies and other freebies. They should give you a great idea what the course is about and whether or not it’s right for you.

It certainly was right for me.