Wednesday, July 23, 2014

Tuesday, July 22, 2014

10 Tips for Title Tag Optimization

What is a Title Tag?

A title tag is a meta HTML element that defines the title of a web page. It summarizes the contents of the page.

Why are Title Tags Important?

Title tags are very important for all aspects of SEO, usability and conversions. Let us jump right to the reasons why you must pay attention to your title tag content:
  • Web Browsers Show Your Site’s Title Tag:
Any popular web browser, such as Google Chrome, Mozilla Firefox, Internet Explorer, Safari or Opera has at least one thing in common – title tags are displayed on the tabs, as shown below:
WooRank.com's Title Tag Shown on a Google Chrome Browser Tab
WooRank.com’s Title Tag Shown on a Google Chrome Browser Tab
WooRank.com's Title Tag Shown on a Mozilla Firefox Browser Tab
WooRank.com’s Title Tag Shown on a Mozilla Firefox Browser Tab
WooRank.com's Title Tag Shown on a Safari Browser Tab
WooRank.com’s Title Tag Shown on a Safari Browser Tab
  • Search Engine Results Show Your Title Tag:
A targeted keyword search, branded keyword search or a brand search for your website returns search snippets of your website, as shown below. The first, highlighted line in a search snippet is the title tag of a page.
WooRank.com's Title Tag Displayed in Google Search Results
WooRank.com’s Title Tag Displayed in Google Search Results
  • Social Bookmarks Show Your Title Tag:
When you bookmark your site on online social bookmarking sites, the bold, highlighted title in the bookmark is taken from the title tag on your website. For example, take a look at the screenshot below of a bookmark of WooRank.com on Stumbleupon.com.
WooRank’s Title Tag Displayed in its Social Bookmark on Stumbleupon
WooRank’s Title Tag Displayed in its Social Bookmark on Stumbleupon
  • Filenames of Saved Web Pages Include Title Tags:
When you try to save a web page, the default name of the file appears in the form of its title tag, as shown below:
The Title Tag as Filename When Saving a Web Page
The Title Tag as the Filename when Saving a Web Page
  • Web Pages Shared on Social Networks show Title Tags:
When you share a web page on your social network, by default the title tag of the page is displayed in the title of the shared content, as shown in the example below:
Title Tag Used as a Default Title When Website is Shared on Social Networks
Title Tag Used as a Default Title When Website is Shared on Social Networks
These are some of the significant places where your title tag is shown by default to your online audience. Some of these displays can be controlled and some cannot. Thus it becomes increasingly important for you to display the best words to precisely describe your website in the title tag. Although there is no character limit for the title tag, best practice is to put the most relevant part in the first 60 to 70 characters. This way the most important content is visible in search results. The rest is invisible but represented with a ellipsis (…), as shown in the sample screenshot below:
A Long Title Tag Continuing With an Ellipsis in Search Results
A Long Title Tag Continued With an Ellipsis in Search Results

Tips for Title Tag Optimization:

Title tag optimization not only enhances your website’s SEO but also its usability and conversions. In a search result, the very first thing to meet the eye is the blue line (the title tag) with bolded keywords. Since your title tag is one option among many in search results, you need to put high priority on your title tag content so that it woos your audience to click through to your website.
The following are some tips to optimize your website’s title tag:
1. Brand Your Title Tag:
The title tag of your website’s home page must have your brand name at the beginning of it. On inner pages, however, you can use your brand name at the end with the most relevant and important information at the beginning.
Brand Name at the End of the Title Tag on a Sample Inner-Page Search Result
Brand Name at the End of the Title Tag on a Sample Inner-Page Search Result
2. Enter Keywords Toward the Beginning:
It is a good practice to enter your keywords at the beginning of title tags, with the exception of the title tag for your home page where instead you enter your brand name. The reasons for this are:
  • Search engines may more readily return title tags that contain keywords at the beginning. This is not always the case but it certainly helps.
  • Keywords placed at the beginning grab people’s attention easily. In order to attract web traffic it is essential to place the keywords prominently in the beginning of the title tag.
  • If your title tag grabs attention, the click-through rates of your site’s search snippets should increase. Click-through rates are a search engine ranking factor, thus this could help your website attain a higher place in the SERPs.
3. Use Key Phrases Wherever Possible:
If your niche is competitive, try using long-tail keywords that are specific to what your target users might type in search engines rather than more competitive keywords. Your site’s title tags are more likely to rank high in the SERPs for key phrases, rather than keywords. This also ensures that your site is shown to a target audience in the SERPs, thus hopefully increasing your click-through rate and possibly improving your site’s position in the SERPs. For instance, if your primary keyword is Condos for Sale, you could add a location to make it more specific for your local customers. For instance, Condos for Sale in Chicago orChicago Condos for Sale. You could get even more specific with longer key phrases, such as Foreclosed Condos Sale Chicago or Condos for Sale in Chicago Suburbs or Condos for Sale in Chicago Northwest. Target visitors using these key phrases are more likely to convert than those entering your site with a generic search, such as Condos for Sale.
4. Use Synonyms:
Use synonyms for your keywords that have lower competition rates. Search engines can easily identify associations and return them in search results, depending on other SEO factors. For instance, in a search for the keyword Signs for Diabetes, the following screenshot shows the first two search results on page one of Google search. The second search snippet has the keyword Diabetes Symptoms, which Google has identified as associated with the search phraseSigns of Diabetes. Interestingly, the first ad that shows also returns for the keyword Diabetes Symptoms.
Google Identifying Synonyms in Search Results
Google Identifying Synonyms in Search Results
5. Pipes:
You can use pipes (|) to separate terms in your titles to make them look clean in search results. It is easier for users to quickly scan your title tag for relevant information when the words in your title tag are separated into two or three different sections by a pipe symbol. This improves usability.
6. Use Numbers:
Name your blog posts using numbers at the beginning of the title. This improves usability. For example, a title like 10 Tips for Title Tag Optimization, encourages users to click through as they know exactly what to expect, as opposed to Tips for Title Tag Optimization which is more vague. It is important to place the number at the start (avoid a title such as Title Tag Optimization – 10 Useful Tips) since people read from left to right (in most languages) and the most important information should be featured first.
7. Use Unique Page Titles:
This point cannot be emphasized enough; having unique page titles is necessary for every web page on a site. If your website consists of over 1000 pages, you can programmatically generate titles, just ensure that they are not identical. Always provide handwritten meta title tag content for your home page and other popular pages on your website, just as you would do for your meta descriptions.
8. Include your Unique Selling Point in the Title:
It is difficult to include a lot of information within the 70 characters of a title tag that is visible to the search user.  You must try, however, to specify what is unique to your business as compared to your competitor’s businesses to attract your audience to click your search snippet rather than your competitor’s. For instance, the search results from page one of a Google search are shown in the screenshot below for the search term iPhone 5 Deals. From among these title tags, which tempts you to click the link? The person using this key phrase iPhone 5 Deals is looking to compare deals or to find the best price. In the screenshot below, the first two titles are rather generic, not giving exact details of what will be found on the page. The other two results have more precise descriptions of what can be found on the page. Even though the generic page titles rank higher, the click-through rate will probably be higher for the page titles below them. Thus, this factor contributes both to good usability and click-through rates.
Search Results with Unique Selling Points in the Titles
Search Results with Unique Selling Points in the Titles
9. Use No More than Two Keywords:
This tip concerns the readability of the page title and the relevance of the title to the content on the page, rather than the actual number of keywords. It is ideal to use one or two keywords in your page title for useability and SEO. Some title tags contain many keywords, causing them to look keyword-stuffed, which is a negative ranking signal for search engines. Moreover, navigating stuffed keywords in a page title does not make it easy for users to gain a correct picture of the page content, so they may skip it and move to the next search snippet. Keyword stuffing has been criticized so much that even innocently inserting more than two keywords could cause your site to be seen as one of low quality. Below is a screenshot of one such keyword-stuffed page title, found on the 54th page of Google search results for the keyword iPhone 5 deals.
A Search Snippet with a Keyword Stuffed Title Tag
A Search Snippet with a Keyword Stuffed Title Tag
10. Relevant Page Titles:
There is no point in creating awesome page titles if they are not relevant to the web page content. Users expect to see an extended version of the title tag on the web page. Thus it is essential to keep your page titles very specific and relevant to the content for that particular page. This will ensure that bounce rates are low, and low bounce rates are a search engine ranking factor.
While you keep these tips in mind to produce SEO-friendly and user-friendly title tags, you must also beware of practices that might restrict your title tags from ranking high in the SERPs. These are listed below:
  • Do not use a lot of commas; this gives search engine crawlers the impression that your title tag is stuffed with keywords.
  • Avoid stop words as much as you can. They waste space within the 70 character limit and are ignored by search engines.
  • Do not use special characters, like punctuation marks, unless absolutely necessary.
  • Check your spelling. Do not make spelling mistakes, you risk being represented as a low-quality site.

Web Usability Checklist

25‐point Website Usability Checklist

Accessibility Rating    Comments

  1. 1. Site load‐time is reasonable 

  1. 2. Adequate text‐to‐background contrast 

  1. 3. Font size/spacing is easy to read 

  1. 4. Flash & add‐ons are used sparingly 

  1. 5. Images have appropriate ALT tags 

  1. 6. Site has custom not‐found/404 page 

Identity

  1. 7. Company logo is prominently placed 

  1. 8. Tagline makes company’s purpose clear 

  1. 9. Home‐page is digestible in 5 seconds 

  1. 10. Clear path to company information 

  1. 11. Clear path to contact information 

Navigation

  1. 12. Main navigation is easily identifiable 

  1. 13. Navigation labels are clear & concise 

  1. 14. Number of buttons/links is reasonable 

  1. 15. Company logo is linked to home‐page 

  1. 16. Links are consistent & easy to identify 

  1. 17. Site search is easy to access 

Content

  1. 18. Major headings are clear & descriptive 

  1. 19. Critical content is above the “fold” 

  1. 20. Styles & colors are consistent 

  1. 21. Emphasis (bold, etc.) is used sparingly 

  1. 22. Ads & pop‐ups are unobtrusive 

  1. 23. Main copy is concise & explanatory 

  1. 24. URLs are meaningful & user‐friendly 


  1. 25. HTML page titles are explanatory 

15 Valuable Usability

Research-Based Web Design & Usability Guidelines by the U.S. Department of Health and Human Services (2006)
Usability.gov should be in any usability fan’s list. This is actually not one PDF, but 18 that cover the entire process of researching, designing and usability testing a web site. Written in plain English, and being user-friendly itself, this is an excellent resource for anyone dealing with web sites or usability.
A Comparison of Questionnaires for Assessing Website Usability
Assessing Website Usability by Tullis and Stetson, from the UPA 2004 Conference (2004)
How well do web site usability questionnaires apply to the assessment of websites? Can a web site questionnaire work well as an adjunct to a usability test, with a relatively small number of users? This is a handy reference I use from time to time when putting together new usability questionnaires. It contains good reminders of best practices.
25 Point Usability Checklist
The User Effect 2009 25-point Website Usability Checklist (2009)
Nice one-page checklist of usability (and non-usability) items to look for when designing. I’m not sure I would classify all of them strictly with the label “usability” but it’s a handy list of reminders of what to look for from a heuristic standpoint.
Usability Issues in Web Site Design by Bevan, from the UPA 1998 Conference (1998)
Excellent brief overview of usability issues to consider in designing web sites. Don’t let the age of this document throw you, all of these items are just as pertinent to web site usability today as they were in 1998.
Remote Web Site Usability Testing by Gardner, from the International Journal of Public Information Systems (2007)
Very nice summary and how-to of remote testing the UNECE Statistical Division’s web site. Remote usability testing, if conducted properly and with an understanding of the trade-offs vs in-person testing, is an excellent way to gather useful usability feedback with reduced cost and maximum geographic reach.
Examining the Usability of Web Site Search by English, Hearst, Sinha, Swearington, and Yee, School of Information Management & Systems University of California, Berkeley (2002)
We all know that Metadata is important for search (or we should!). This paper clearly defines Metadata’s appliction in a search context and provides results from a test of three search interfaces. By the way, one of the authors, Rashmi Sinha is the creator of one of my favorite remote usability / survey tools: The Mind Canvas
Guidelines for Usability Testing with Children by Hanna, Risden & Alexander, Microsoft (1997)
As more and more teens and children use the internet and web-based applications, it becomes necessary to consider usability testing with children. There are differences to conducting usability testing with children versus adults. A smart usability practitioner will consider the special requirements needed to conduct usability testing with children. This article is a good introduction, with excellent how-to tips to conduct usability testing with children.
WordPress Usability Testing Report by Ball State University’s Center for Media Design (2008)
Very interesting usability study of one of the most popular blog authoring tools in the world. Provides detailed description of the usability testing method and results, including the use of eye-tracking. Provides a wealth of ideas for those designers who develop publishing platforms.
Net Rage A Study of Blogs and Usability by Catalyst Design Group (2005)
Blogging and social media have mass attention these days, but what makes for a good blog consumer experience? This is a good example of a usability test of a blog, in this case the WellSpent blog from Businessweek.com. Included are the findings, which can be applied equally well today against any blog. If you own or manage a blog, or need to usability test one, this is a great primer.
Key Questions to Ask Your Usability Testing Supplier by UK Usability Professionals Association (2003)
If you are not experienced in usability and are seeking a vendor to assist you with usability testing, this is a nice, simple checklist to use to ensure your vendor actually knows what they are talking about, and will provide you with a professional usability study. If you are a usability practitioner, you may wish to consult with this guide, and make sure you include these items in any response you provide to a prospective client.
Designing for Usability: Key Principles and What Designers Think by Gould and Lewis, IBM, from Communications of the ACM (1985)
One of the Grand-daddys of usability articles, this article proposed the Three Principles of Design: 1. Early Focus on Users and Tasks, 2. Empirical Measurement and 3. Iterative Design. The discussion in this article is ageless and still holds true today as it did in the 1970s and 1980s.
Usability Testing of Mobile Applications: A Comparison between Laboratory and Field Testing by Kaikkonen, Kallio, Keklinen, Kankainen, Cankar, Journal of Usability Studies (2005)
Usage of mobile applications has exploded in the past few years, so conducting usability testing of the holistic user experience of a mobile hardware/software application is important. But how do you do it? If you test in a controlled lab environment, you have a more precise test, but miss the other environmental variables that might have a dramatic impact on the user experience. If you test in the field, you have less control and thus a less precise test, but can include those all-important environmental variables. This article explores the issues, and presents some findings and suggestions on the best way to conduct mobile application usability testing.
Why Johnny Can’t Encrypt by Whitten and Tygar (1999)
Another oldie but goodie. Good explanation of how usability testing of security encryption software was developed and conducted, along with the findings. Don’t laugh at the screen-shots of the user interface, we all thought those gray square buttons were cool in 1999.
A Study of Vote Verification Technology Conducted for the Maryland State Board of Elections, Part II: Usability Study by The Center for American Politics and Citizenship and The Human-Computer Interaction Lab University of Maryland (2006)
For those of you in the United States, do you remember that whole “hanging-chad” issue of vote counting in Florida? A flurry of proposed electronic and other more user-friendly (and accurate) voting systems were proposed, and all of a sudden the study of voting usability took off. This is a good summary of the usability testing portion of a study conducted for the State of Maryland to recommend a better voting system.
Making Usability Recommendations Useful and Usable by Molich, Jeffries and Dumas, Journal of Usability Studies (2007)
As it turns out, even usability practitioners can sometimes produce work that is not very user-friendly. This article is based on the results from the Comparative Usability Evaluation 4 (CUE-4) study, in which 17 professional usability teams separately diagnosed and made improvement recommendations on a hotel web site. The teams’ recommendations were evaluated and the results… Well, I won’t spoil the ending for you, but let’s just say there’s plenty of room for improvement in how to make useful and usable usability recommendations. This is a very helpful best-practices document to review prior to putting together a recommendations document based on usability testing results.

10 Useful Usability Findings and Guidelines

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

1. Form Labels Work Best Above The Field

study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.
Tumblr
Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.
Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

2. Users Focus On Faces

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.
eye tracking
Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.
eye tracking
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.
Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.



3. Quality Of Design Is An Indicator Of Credibility

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:
Fever
We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.
One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.
Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.


4. Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.
This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.
Basecamp
Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.
This is most important for the home page, where most new visitors will land. So provide the core essentials there:
  1. Name of the website,
  2. Value proposition of the website (i.e. what benefit users will get from using it),
  3. Navigation for the main sections of the website that are relevant to the user.
However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.
For further information please take a look at the articles Unfolding the fold(Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).


5. Blue Is The Best Color For Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known asusage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
Google
Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.
What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

6. The Ideal Search Box Is 27-Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.
The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.
Google search
Google‘s search box is wide enough to accommodate long sentences.
Apple search
Apple‘s search box is a little too short, cutting off the query, “Microsoft Office 2008.”
In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

7. White Space Improves Comprehension

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.
The Netsetter
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.
White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.


8. Effective User Testing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.
The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

9. Informative Product Pages Help You Stand Out

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).
iPod marketing page
Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.
Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.

10. Most Users Are Blind To Advertising

Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.
The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.
FlashDen
The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.
That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.


Bonus: Findings From Our Case-Studies

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.
Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.
According to our typography study:
  • Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
    1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
  • Line length (pixels) ÷ line height (pixels) = 27.8
    The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
    It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
  • Optimal number of characters per line is 55 to 75
    According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.
According to our blog design study:
  • Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
  • The home page shows excerpts of 10 to 20 posts (62%).
  • 58% of a website’s overall layout is used to display the main content.
According to our Web form design study:
  • The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
  • Sign-up forms have simple layouts, to avoid distracting users (61%).
  • Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
  • Designers tend to include few mandatory fields and few optional fields.
  • Email confirmation is not given (82%), but password confirmation is (72%).
  • The “Submit” button is either left-aligned (56%) or centered (26%).
According to our portfolio design study:
  • 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
  • 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
  • 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
  • Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,