Web Design 101: Please Don't Squish the Type!

http://www.landaudesignreview.comOne of my favorite things about web design is the flexibility it offers in terms of how to lay out text. With the arrival of CSS several years back, suddenly web designers who came from a print design background (like myself) got the control they had been longing for. Not only could we control the typestyle and color, but now we could control line spacing and even letter spacing. Wow, what a wonderful thing.

And so I respectfully request, when designing your website: Please don't squish the type!

What does"squish the type" mean?
When you arrive on a web page you want to be able to read what is there. But users do not read online as they would a magazine or book, instead they skim. They need the text broken up into bits so they it is easier to skim, and faster to grasp the content on the page. When you squish the type, you mush all the information into long paragraphs without a lot of visual breaks between the information (see screen shot below). If you add white space between your lines, and vary type size and color, it gives breathing room for your eyes, which makes it more likely a user will skim a little slower.

Here's an example of a web page that needs help. They are really squishing the type. It's unlikely anybody will get beyond the second paragraph because that third paragraph looks intimidating!

How users read online
It has been conjectured that browsing a website is a cross between reading a book and watching TV. When somebody reads a book, their mind is engaged in actually comprehending the words through the act of reading. They usually don't have visuals (if it's a novel say), so their mind is also actively engaged in visualizing what they are reading about.

On the flip side, when somebody watches TV, they don't have to do anything mentally in order to take in the information. They just stare at this big box, and watch what is shown. Hence the term "couch potato".

Usability experts have shown through research that browsing the Internet is somewhere in between. Some users will be engaged mentally, while others want the website to do the work for them. You must plan for this when you design, because most people will not read the precious words you have written, so you must help them read it.

Lay out your type so people will read it

• Use bold headlines.
• Create a larger, introductory paragraph that summarizes the page.
• Don't have long paragraphs - break up the paragraphs into more bite-size pieces.
• Use line spacing to bring white space between the lines of text
• Do not make columns of text more than 550 pixels wide
  
• Use subheadlines as much as possible
  
• Use bulleted lists as much as possible
• Hyperlink keywords and important points so users can get more information, and so it makes the key concepts easier to skim.

Oftentime clients will have great concerns about not creating scrolling in an article, and they want to squash all the lines together to keep everything within one page length. The only trouble with this theory as while it might prevent scrolling, it also inhibits reading. So would you rather they read the first couple paragraphs and not scroll, or read nothing at all? Besides, current usability studies show that users will scroll if they are interested in the content.

What you SHOULD do
Here's an example of the same page shown above in a much more readable fashion (after Landau Design review and changed it). The user can now decide how much or how little to read.

Site referenced here: http://www.capdsupport.org

User behavior is part of the design process
We must remember how users read content, and only then commence with the creation of that content. How type is laid out should be considered when type is written. You put a lot of effort into creating your website, you certainly want to encourage everybody to enjoy your great work!

Landau Design is a web design and online marketing company specializing in small business services. Let Landau Design review your website and help you take it to the next level!

Browser Friendly Fonts Make Viewing Universal

We often get requests from clients to use particular fonts on their website. Recently the following email came into our inbox:

My question is about the fonts. When I used the WYSIWYG editor in Joomla, I was able to play with the fonts and get it to look like what I wanted. But then when I showed my friend on her computer, nothing looked the same. I wanted to use a script font for my menus, but on her computers it was all done in Arial. What did I do wrong?

The answer to this question relies on the need for universal fonts. Fonts on a web page are not stored within your code. Instead, they are called on by the code, but they must be present on the computer in order to display properly.

What fonts are universal on the web?
There are only so many fonts found in the world that typically exist on every computer platform. If you want your site to display consistently, you must choose your fonts from this list:

Arial	Arial Black	Comic Sans
Courier	Geneva	Georgia
Helvetica	Impact	Lucida
Lucida Sans	MS Sans Serif	MS Serif
Symbol	Tahoma	Times
Palatino	Verdana

You'll notice that there is no script font on this list. That doesn't mean you cannot specify a script font when laying out your pages. It simply means if you do specify a script font, there is a good chance other people's computers won't have the font, in which case the browser will substitute Arial for any missing fonts.

Using a graphic instead of text
If it's really necessary to use a specific font, you might consider displaying it as an image rather than as text. If the image is too large this may slow the download speed of your web page, so take this into consideration. If you do use an image, be sure to use an ALT tag to let search engines know the description of the text in the image.

More on universal web fonts:

• Core Fonts for the Web
  
• Common fonts to all versions of Windows & Mac equivalents
• 16 Gorgeous Web Safe Fonts to Use With CSS  
• Web Safe Fonts Preview
  

Who the Heck Cares About Usability?

Designing a website is not all about appearance, and this often comes as a shock to new clients who think color, design and personal preference are the most important pieces of the puzzle. It is often in that first design discussion that we find ourselves in the middle of a usability lesson, explaining to our client how people who visit their site are truly viewing it.

Your Users Care the Most
You have only seconds to capture the attention of your users, which means you only have seconds to lose them. If your site is a challenge for them, they aren't going to stick around and muck their way through it. Usability is all about making your site simple, clear and even fun to use. Poor usability is the #1 reason you will lose eyeballs.

How Usable is Your Site?
To determine if your site is usable, you need to do some research. You can do some preliminary analysis of your site by reviewing some of the following usability checklists:

• Would Your Site Pass a Usability Assessment?
• 25-Point Website Usability Checklist 
• 15 Essential Checks Before Launching Your Site
  

Users know best
To do some truly effective research, ask some of your current users if they would provide some input. We highly recommend that you collect a half dozen or so clients and ask them to answer some of the questions from the usability assessments presented above. This will give you a real picture of how those outside your organization see your site.

Don't just listen, fix it
If your users come back with critique, listen closely. Then do something about it. Don't just say thank you and continue to let your site stand as it is. Consult with a web designer or usability expert, then make the appropriate changes to bring your site in line with effective usability. Not only will this help with new customers, but it will let your current customers know that you take your comments to heart.

Design Your Navigation From The Outside In

One of the biggest mistakes companies make when designing a website is labeling and organizing the information with the terms the internal company uses. It is very important when organizing your content to look at it from the user's perspective, not the company's.

How Do I Organize From the User's Perspective?

1) Who are your visitors?
The first thing you do when creating your website is ask yourself who is coming to this site and why are they coming. What are their ages, computer experience, knowledge? What need do they have that you are going to fulfill? This gives you a picture of the user-types who will be accessing the information. Any time during the following process if you are unsure of how to organize your information, go back to this first question to get the answer.

2) How do we currently interact with these users?
What questions do they ask us to elicit information, and what information do we give in response? This is the beginning of understanding the labels your customers use in relation to your business. The receptionist in a company is often the best person to answer this question.

3) How do our users see our organization?
Now looking at the information that your users are seeking, consider how this information would be logically organized. Consciously put aside the method your company uses to organize this information. This is generally the most challenging part of the process since you are used to looking at your information in a particular way, and you must move back and take another perspective.

For example, if you were a physical therapist, you might not organize your information with the therapies you provide. Instead you may organize it by the physical challenges the users face, and within those pages talk about the therapies that apply to those challenges. In this way you've related the information to your users rather than how you related to the types of therapies.

4) Create an outline of how users would see the information organized.
Consider the categories and subcategories of information. Do not forget to include site basics such as how to contact your organization and brief description of your company's purpose (even if you feel your clients know this already).

5) Label your categories.
This part is often tricky as different people within the company will have different opinions about which labels to use. Cutesy labels are definitely poor usability and should be avoided. Labels should describe the information that page contains, or at the very least be a branded term that your clients know the meaning of. Labels should always be the same part of a sentence (noun, adjective, verb) or similar phrase structures. Consistency in labeling makes your site predictable.

6) Ask some users for feedback.
Share what you have organized with typical users from your client base. Ask them for feedback. Be open to their responses, and allow them to assist you in creating a logical and easy-to-use organization of your information.

Aren't Pre-Designed Templates Ugly?

Clients come to me for graphic design services because they need to market their business. Some clients want a customized design that is totally unique and created just for them. But other clients may crinkle their noses at the custom design fees that are part of their web quote.

Design snobs won't design for these clients because everything must a unique design or else it's not "quality" design. I love to design, but it's more important that my clients get what they need, not what I want to give them. So if budget is a big factor in their project, I offer them the option of a modified template.

But then clients ask me, "Aren't templates ugly?" I want to debunk this myth! While it's true that the majority of templates designed would not be considered very attractive, the truth is there are designers out there who are putting out beautiful templates for HTML and CMS websites. With a modicum of modifications, these templates can give the impression of custom design without a price tag. Here are some examples from our own projects:

This is the template: i-Lunar
This is the site we’ve built with it: Possibilities Unlimited

This is the template: JSN Epic
This is the site we’ve built with it: Sheasby, Cho & Middleton, attorneys at law

This is the template: JC-Perth
This is what we built with it: The April Center for Anxiety Attack Management

While it's fun to do a custom design and see it get built and shared, many of our clients who do not have unlimited web budgets. It's critical for them to have a web presence that is usable, attractive and effective. We want our clients to have the tools they need to succeed in business, and sometimes template design offers a workaround that facilitates a successful, attractive site within the budget the client can afford.

Why I Always Tell Clients to Add a Resource Page

Often when discussing initial information architecture with clients, I bring up the subject of a resource page. Sometimes it's followed by a scrunched brow from the client. I can hear them thinking, "But that's more work in research time..." Yes it is, but the purpose is to provide a resource for your clientele.

I recently read an article in SmallBizTrends.com about how small businesses can utilize the web to provide customer service that goes a long way in growing your company. Providing information in one location that clients can use over and over is an ideal way to get them to bookmark your site and come back for repeat visits. Even if they aren't using your services now, each visit reminds them that you are there to help.

A resource page does not have to be complicated. It can include:

• Links to industry websites organized by topics
• RSS feeds from newsworthy sites that are related to your industry
• Document library with pertinent forms downloadable in PDF format
• Links to regulating agencies or associations in your industry
• Links to useful articles
• A community forum where people can post questions and get answers from colleagues
• An FAQ library where you answer questions about your company and industry

A resource page creates a connection between you and your clients that can easily be grown by asking your users for suggestions and input. It's a small time investment compared to the positive impact it has on your service image.

Why Does a Website Cost So Much?

Early on in 1996, when I learned how to build websites, I realized an interesting phenomena with the web -- people were reluctant to pay to have a website built. My theory was that it was really hard for them to pay for something they could not touch and feel in their hands. In their minds, it was air, and how expensive could that be? I recently read an article about hidden costs on website development. I believe many clients are not aware of the time involved in the creation of a website.

We work with mostly small to medium-sized businesses, and at least 1/3 of our companies are sole proprietors with only 1-2 employees. Their budget for a website is usually "we just want to spend a few hundred dollars." They often gasp when they see the simple little website they want is in the few thousand dollar arena. Why would this be so? They only have 15 or so pages. How could it possibly cost so much? Here's a list of the steps required to build such a simple site:

Steps involved in building a website in Joomla:

1. Create information architecture and develop quote for client: 1-2 hours
2. Select a couple templates for the client to choose from (selecting a template saves $1500-$2000 in design fees): 1.5 hour
3. Purchase selected template: $25-$45
4. Customize the template with client's logo, color scheme and possible modify module positions to work with content: 3-4 hours
5. Gather content from existing site and create content outline for client in Word: 1 hour
6. Set up hosting, Install Joomla, create section/category, menu and article structure: 3 hours
7. Input client's content (all static content): 3-4 hours
8. Optimize graphic layout of content to it abides by usability standards: 2 hours
   
9. Search for stock photos for the site: 1-2 hours
10. Pay for stock photos: $25-$50
    
11. Size and optimize 15-20 photos for the site: 2 hours
12. Input images and edits to content: 1-2 hours
13. Create online contact form: 1 hour
14. Install and configure FAQ component with 20 questions: 1.5 hours
15. Test and optimize template for popular browsers: 2 hours
16. Apply SEO to page titles, links, content: 2-3 hours
17. 1 year hosting at Rochen: $95
18. Talking to the client and calling/emailing asking for content or clarifying issues: 3-4 hours
    

Total hours: 28-33 hours
Out of pocket expenses: $145-$190

And what about nifty extras?
This time estimate is for a site that is basically text with very little extended functionality. We often add the following to our client's sites, which can vary in time required depending on the complexity of the pieces:

• Google Analytics
• Backup System
  
• Search Engine Submission
• Keyword analysis and SEO implementation
• Blog setup and integration with the site
  
• Photo Gallery
• Flash slide show on home page
• Event Calendar
  
• Newsflash module for marketing taglines on home page or customer testimonials
  
• Modification of custom components to match site
• Purchase of commercial components to optimize performance
• Etc...

So you can see how quickly the hours add up, and that's if the project goes perfectly without delays or technical glitches, which isn't always the case.

The time has come where a website is an essential part of doing business. It is a critical expense to include in your budget, and because of its importance, its creation should be carefully considered. It's okay to have a budget, but talk to your designer and understand what you're really getting for your money. Sometimes that $500 saved means you're getting a less-than-optimum product.

More information:

• How Much Should Your Website Cost?
• What Does a Website Cost (talks about what features should be included at different price levels)
• How Much Does a Website Cost Anyway?
  

What is Information Architecture?

When talking to clients I will often mention working on their information architecture. Their face kind of scrunches up and I know they're thinking, "She is talking about website construction, not building construction, right?" Information architecture (also called IA) is how the information on your site is categorized and organized. I find the best way to explain IA is by example:

You come to a website and sit staring at the page wondering what link you must click to find the information you seek. You might even click one, find it wasn't accurate, and try another link. This site has very poor information architecture because the information cannot be accessed intuitively.

Conversely, you come to another site, click away and within seconds find what you were looking for. You didn't give much thought to your navigation journey as it was a cinch to follow the trail of links right to the answer. This site has very good information architecture since it was so intuitive you didn't even think about it.

An effective information architect will always strive for the second scenario, but also accept that there is no perfection when it comes to information architecture. A site is a fluid entity which is always changing, which means the information architecture needs to be revisited on a regular basis. At least once a year a site review for IA revisions should be formally completed to make certain your site retains the best possible organization for user navigation.

So how do you know when you get it right? A formal usability study is really the best way to make certain you've created a successful IA for your site. But if a formal study isn't in the cards, do an informal study by asking some regular users if they will surf your site and provide feedback to specific questions. In the end it's the users who will know if the IA is optimum, so it's important to go outside your company to confirm that your IA is a success.

12 Questions to Ask When Hiring a Web Developer

Besides the typical “What is your experience?” and “Can I have some references”, the following questions will assist you in finding a Web development company that will provide service with integrity.

1. Who registers and owns my URL (web site address)?
Whoever owns the URL, controls what server it points to. Many design companies will register the URL in your name, but not give you access to the registrar account. Others will register it in their own name, which means you DON’T own it. Register your own URL before you begin working on the site to avoid this common pitfall.

2. Where is the site hosted?
Whoever hosts your site, controls if it’s live or down. Many development companies insist you host with them, but if you want to change developers, you need to find a different hosting company as well. Make a point of understanding the host/developer relationship so you can make a choice that gives you the most flexibility down the line.

4. What sort of contract do I need to sign?
Many development companies commence business on a handshake. A contract protects you as well as the developer. It lays out the path for the project, and makes each step predicable and understandable. No contract means the developer can change their mind about price, file ownership or even completing the job.

5. How much input do I have in the process of creating my site?
Many developers take your deposit check, and the next time you hear from them your site is built. No questions, no feedback requested; they’ve built your site blindly and without your input. YOU are the business owner. If the developer says you don’t need to be involved, it’s time to look elsewhere.

6. How long does it take to build the site?
Many developers are excited to tell you that they can whip your site out in no time – a week or two tops. But what they neglect to tell you is the most challenging part of building a site is getting the content – and this is up to you! The developer can estimate the build time after they know what they are building, but remember that their build time is also dependent upon your timely delivery of content.

7. How much does it cost to build the site?
This question is like asking how much a car is without knowing the make and model. Expect surprises from a developer who gives you a price without knowing what you want. Also be wary of a developer who gives you a price that is too low. With a clear understanding of what is to be built, the developer can give you a fixed-price bid for construction. A developer should give you a written estimate that specifies the number of pages included as well as any complex functionality that is required.

8. Who owns my finished site?
It is very common for developers to neglect to mention that by law they have ownership of all files related to your site. Unless a work-for-hire statement is incorporated into your contract, they maintain the copyright on the design and assets for your site. They are not obligated to release these files to you. Make certain language is in your contract that states that you have ownership of the work that is done.

9. What technology is used to build the site?
There are many excellent technical solutions for creating sites today, but what is more important in this question is how the developer answers it. Do they explain the technology in a way that it is clear so you understand? Effective communication is critical for accomplishing a Web project. Make certain the developer communicates in a way that you understand.

10. How is the site maintained once it is built?
It’s an easy thing to get involved in the creation of your site and not consider how it is maintained once it is built. It is important to discuss this with the developer as you don’t want to launch your site and then be hit with surprise bills or no means of managing it yourself. You need to find out if software is required to maintain the site, and if the developer offers training for it. Maintenance fees can be as much if not more than build fees, so consider self-management options if budget is a concern. If the design firm insists on being in control of maintenance, get a copy of the fee schedule before signing your contract.

11. Are they using any proprietary software to build the site?
Many development companies create their own software for building Web sites. They license it to customers for use on the site. The main issue with this is if you want to move the site, you can never really own it, even with a work-for-hire. Also, you can never choose to use a different developer, so you are locked into the same company regardless of how the relationship is working out. Avoid proprietary software sites. Make sure it’s built in such a way that you can change your mind and switch companies down the line.

12. Do you have any questions for me?
A developer cannot give you an honest assessment of your project without having an understanding of what is to be built. This question gives the opportunity to see how the developer would approach the project. You can observe the developer’s listening skills as you explain your project, as well as their ability to gain better understanding by asking clarifying questions. It’s important the developer include questions regarding who the site users will be and what the business goals are.

Should I Spend More Money on My Website?

The Internet is part of our society now (thank you Al Gore) so this is a question that should be asked continuously. How do you decide what to do online?

Define Expectations
Know what your audience is looking for. I always say the receptionist is the first person to ask what people need from your company. This individual is the one who receives the harried phone calls from your customers.

Take Usability to Heart
If your site confuses people well… that’s not what anyone expects. Usability studies have shown that there are uniform expectations about how to find information. Readers look at the web differently from other media. If your information architecture is poorly designed, they won't stay long. Utilize proper technology. I just went to look for a replacement car manual on http://www.gm.com/. The main page has a Flash component…. if I haven’t updated my Flash recently, I will be distracted and perhaps get frustrated enough to leave without getting my needs met. If I am selling GM and want to sell a car, this is not a good thing.

Don't Shortchange Information
If people need to review your products, technical specs or other information before making a purchase decision, it's best ot have that information online. If you lead a user to information, but don't deliver it, there is an annoyance factor that is raised in the user. "Under Construction" pages are big no-no. If you don't have the content, either create it or don't put up the page.

Bling When Necessary
If your company is an industry where “bling” is status quo e.g. entertainment, your customers expect to see a cool website. It is very important that they still can find the some basic information, but also pizzazz. Just for fun, search for your favorite movie star and look at their home page. Does the “smoke and mirrors” effect still allow you find what you want?

Let Them Know You Mean Business
If people need reassurance about doing business with you, they will want to see testimonials, case studies or perhaps a portfolio. This is especially important for demonstrating good customer service. Users need to believe you care about them, and they will want to know how you work through warm fuzzy examples.

Back Up Your Facts
If people see you as an expert in your field, they will want that validated. If you are a contractor or attorney, this means more than giving your license or your JD credentials. They will want a demonstration of your wisdom. What about tips from the master plumber? What about published articles from the expert in landlord law? A calendar of speaking engagements?

Keep It Current
If you have a calendar or dated information, people expect it to be current. Don't post on your blog or calendar once every month or so. If you make a commitment to calendared content, be committed to keeping it up to date.

If you are missing on one of these points, you website is not representing you well. There are many other ways to please users, but these are the key points that are often overlooked. Always keep thinking: is there a way our online strategy could do better? That’s where you have to put on your thinking cap and determine if you need to invest more in your online presence.

Do People Actually Read Your Website Content?

I recently had a client tell me that his web page looked too messy because there were too many font sizes. I tried to explain to him that people skim on the web, they don’t read, and varying the font sizes helps to highlight critical content. He didn’t really buy it, but grudgingly agreed to leave it as designed.

Research has shown over and over that people don’t read on computers – they skim. Jakob Nielsen, the godfather of usability, recently did a study on About Us pages where he said “Task success for finding out what the company or organization does actually dropped, from 90% to 81%. In place of a frank summary of the business, marketese and blah-blah text ruled the day on many sites." In other words, shorter, more concise verbage proved to provide better usability than the marketing jargon that was too verbose.

Why is this? Some of the research gathered has shown:

• It takes 25% longer for a person to read on the computer as it takes to read something on paper, so it feels harder.
• People would prefer to interact with the page rather than stare at it, so they are anxious to click away.
• People feel like if they don’t move on to the next link, they’ll be missing some other great page to look at, so they’re quick to move on.
• In an eye tracking study, only 1 in 6 people actually read copy line by line.
• People are too busy

Research has also shown what is effective in helping people read your content more efficiently:

• Chunking type into bulleted lists, bolded sentences and differentiated headlines Concise, to-the-point writing
• Links leading to more information rather than having information all on one page.
• Put important details first as you generally lose a reader as they near the bottom.

Websites are not print brochures, so they should not follow the same design guidelines. A page that is chunked up into different sizes and colors of type has been done for your benefit. It is following usability standards to help deliver the information in the most common pattern for online reading.

More on the subject:

• How Users Read on the Web
• 23 Actionable Lessons from Eye-Tracking Studies
• How Little Do Users Read?

Creating an Online Brand That Gets Noticed

Sometimes clients are really anxious to get their site up and running. It’s crucial to them that the elements be there, but not so crucial how specific these elements are. The Internet has reached a point that a business without a website lacks a certain legitimacy. Investing energy in developing your online brand is a crucial step towards creating your company persona. Here are some strategies to get you started:

Be patient: The hardest part in this process is the time it takes to create that brand. As Matt Siltala says in Create a Brand From Scratch, most people give up too soon.

Be creative: If you’re selling what somebody else is selling, find a different way to sell it. Create a different angle, use different graphics, avoid the same-old-same-old. Remember to sell what you do, not who you are. What you do makes a difference in the lives of your customers; who you are does not.

Be willing: Take the time, money and resources required to create a definitive web presence. Simply having a website is not enough. Considering the marketing message, the language, the graphics… everything that rolls together to create the image you want to portray. Skimping on your image shows up when your customers browse your site.

Rushing through your project will get you a website, but consider if it’s a website that really represents a unique angle for what you’re selling. While clients often concentrate on each and every word that is written, the fact is the overall image is what makes a greater impression.

Here is some more information on how to develop an online brand:

• Why Trust Matters and How to Earn It
• Top 10 Tips for Green Hat SEM (search engine marketing) in 2009