Smashing Magazine did a great post called A Small Design Study Of Big Blogs.
They compare the top 50 blogs’ layout and typography using about a dozen different criteria. Here’s their summary in bullet points:
- large blogs require a multi-column layout solution (usually 3 columns suffice) (58%);
- layouts are usually centered (94%),
- layouts usually have a fixed width (px-based) (92%),
- the width of the fixed layout varies between 951 and 1000px (56%),
- 58% of the overall site layout is used to display the main content,
- CSS-layouts are used (90%),
- the background is light, the body text is dark (98%),
- the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters,
- Verdana, Lucida Grande, Arial and Georgia are used for body text (90%),
- the font size of body text varies between 12 and 14px (78%),
- Arial and Georgia are used for headlines (52%),
- headlines have the font size between 17 and 25px.
Silverback – Simple Usability Testing Software
July 25, 2008
Clearleft has officially released Silverback.
Silverback is a Mac desktop application designed to make website and application usability testing easy to manage. It captures everything that is happening on the screen and uses your web cam and microphone to record users’ reactions and comments. Usability test can be very expensive and time consuming, but now designers can conduct tons of casual, quick tests with out having to hire an outside firm. I can’t wait to start playing with it
…And it’s only $49.95.
Check out this video for a demonstration:
Design Coding by Poetic Prophet (AKA The SEO Rapper)
March 28, 2008
Leon Atkinson sent me a link to the video for the song Design Coding by Poetic Prophet (AKA The SEO Rapper AKA Chuck from Pop Labs). It’s an awesome rap song explaining how to code your web pages to obey web standards and increase search engine optimization.
I loved the lyrics:
…Your Photoshop functions then slice that design
Do your layout with divs make sure that it’s aligned
Please don’t use tables even though they work fine
When it come to indexing they give searches a hard time…
Poetic Prophet has a bunch of other videos including Conversion Closing Rap, Paid Search 101 Rap, Social Media Addiction Rap and Link Building 101 Rap. It’s entertaining stuff with solid explanations of online media concepts.
Web Design and “Above the Fold”
February 25, 2008
I’ve had a several clients over the years who were obsessed with having everything “above the fold” on their web pages. The practice of trying to cram all the calls to action, links and advertisements in the top 400 pixels of a page not only can result in a cluttered page designs but it also doesn’t take into consideration visitors natural reading patterns. When a user hits a page, the first thing they usually do is scan down (past blinking banner ads) to find where the content starts and then they quickly decide if they are on the right page. If they aren’t then it’s usually POW! they hit the back button. If you’re lucky they continue to read down the page. The ads, navigation bar and all the other clutter at the top of the page are completely ignored. Web browsers tend not to read everything on a web page from left to right starting at the top left corner and clicking on the first thing they see. This might have been the case back in the 14.4 dial-up modem days, but today pages load up a lot faster and users are a lot more savvy and economical with their web surfing time.
This morning Guy Kawasaki wrote a post linking to an article titled “Demystifying ‘Above the Fold’”. In it the author talks about placing links and advertisements at action points instead of jamming them all at the top of the page. If you think about your web visitor’s behavior patterns, there are a few key points where they pause to decide what to do next. This is where you need to offer calls to action. For the common scenarios above you might have success offering links to related content immediately to the right of the content’s starting point. That way if the user felt that they hadn’t gotten to the correct page, you have an opportunity to offer them something different before they hit the back button. You also have an opportunity to continue the story with engaged users by offering them calls to action at… GASP! the bottom of the page or part of the way through the content for when they’ve gotten the basic idea and are ready yo move on.
For a rude awakening about how people really read web pages, watch this eye-tracking video that Seth Godin put in a blog post about two years ago:
Wild stuff!
