Wednesday, February 29, 2012

Design & Layout

Design & Layout

Your web site design can (and should) be as unique as your company, we do not advocate cookie-cutter web designs. That does not mean, however, that your web site should not follow a set of design principles (similar to those of print design). In almost every case, a clean design with plenty of “white-space” is the best starting point. It is by no means enough, however.

Every element of a web site is a useful tool for relaying a message to the navigator about whom you are and why they should give you their hard-earned money (or why they should spend more time on your site). The color scheme affects their mood, the graphics and icons portray an image of who you are, the fonts and layout determine how easy on the eyes the site is — and therefore potentially how long they will stay, and the list goes on.

It is crucially important to get the right combination of these elements in order to build the perfect web site for your company. At Leone Image and Design, we are dedicated to working together with you and your company to come up with an overall design strategy for your web site that will allow it to do what every web site should: earn you money.

Search Engine Optimization (SEO)

For companies that rely on their web site to bring them new business, the visual design of the site can be secondary; what the visitor sees is less important to them than what the search engines see. The reason is simple: people searching for your product or service on the internet use search engines such as Google™, Yahoo™ and MSN Search™ to mention a few. The search engines “look” at every page on your web site and determine how high up the list you appear for a given search. What the search engines see can be quite different from what your visitor sees.

Let us say, for example that you have a hotel in Vancouver, BC. In order to maximize the number of visitors to your web site (and presumably the number of reservations), your ultimate goal would be to come up as the first result on all the major search engines when someone does a search for “vancouver hotel” or anything similar.

Getting your web site ranked higher in the search engines is the aim of search engine optimization (SEO, for short). The problem is three-fold:

  • the algorithms that search engines use are complicated mathematical formulas that are very difficult to understand,
  • the search engines keep their algorithm a very tight secret,
  • and they are constantly changing and fine-tuning this algorithm.

Nonetheless, it is possible to optimize a web site to get a better ranking for a given search, using the right tools and a well-executed and ongoing plan. That’s where Leone Image and Design comes in.

It should be noted that there are many companies out there that claim they will “register” your site with x number of search engines (usually in the hundreds) or that they can guarantee you a top ranking in the search engines. The former is useless because registering your site on the four or five top search engines (which cover over 90% of all searches) is either free or unnecessary and registering does not get you a better placement; the latter is almost always a scam; no one can guarantee you a top placement in any search engine unless you agree to pay the search engine for every time someone clicks on your link. This type of “pay-per-click” campaign can be effective in some cases, but is not the same thing as appearing at the top “naturally,” without paying. Visitors tend not to click on these pay-per-click results - which are clearly marked as ads — as often as the natural search results. If a pay-per-click campaign is right for you, you can save some money by going directly to the search engines. In summary, buyer beware: if it sounds too good to be true, it probably is.

Another path we at Leone Image and Design warn against is a web site made completely in Flash™. Flash is a wonderful program that (among other things) allows web designers to incorporate animation and motion into web sites. The header that loads at the top of every page on this web site is made in Flash. Because of its ability to create beautiful, fluid and interactive user interfaces, many web designers are designing web sites completely in Flash. The drawback to this is that sites designed completely in Flash are virtually invisible to search engines, which means you get a poor ranking and therefore few visitors and sales.

Leone Image and Design can create and execute a search engine optimization plan on your behalf to help drive the greatest number of visitors to your site. Please contact us to evaluate your current site, develop a SEO plan, and help you in deciding whether or not it would yield you net profits.

Content & Copy

When it comes to writing the content of your web site — the actual words your visitors will read — it is critical to get the visitor’s attention as quickly as possible and then to keep them reading. The longer a visitor spends on your site, the likelier she is to spend money and/or return to your site. This can be achieved on your site by using attention getting titles, headings and first sentences as well as strategically placed pull-out quotes, images, tables and bullet lists

Leone Image and Design can write copy for your site in any style that you would like (old-english, technical, witty, etc.) while keeping with your overall marketing strategy and getting as much attention as possible.


One of the greatest frustrations of web surfers is navigation (or lack of navigability). Your site may contain a wealth of resources that a visitor would like, but if they can’t easily find it, they will leave and likely never come back to your site. The experience is analogous to not being able to get help at a retail store even after asking for it several times. You may be losing money simply because your site is not arranged in a way that makes it easy to find the resources you provide.

Web Design Calgary

Web Design Calgary

web design calgaryView our recommended website
for Web Design Calgary
Web design in Calgary has taken off in the past couple of years.
There are approximately 300 legitimate web site design businesses in Calgary as of September 1, 2004. Not to mention countless individuals and sole
proprietors who have no measurable advertising efforts.
Which begs the question – how does one choose a Calgary based web
company? What should you look for when picking your web site designer?
Let us help you out by providing some insight on the topic.
As with any business project, you should consider your objectives before
you do anything. Why do you want a website? Or why do you think it
should be redesigned? Are you expanding your existing site? Perhaps you’re
your business by taking it online for the first time. Before you contact
any web design companies in Calgary you need to consider your objectives.
The answers to these questions will dictate what sort of Calgary
web design company
you’ll be looking for. If you are just wanting to
dip your toe
into the online waters, so to speak, then you may want to consider
a smaller web design company in Calgary. Typically a friend of a
friend or somebody’s
nephew/grandson will be up to the task. The obvious advantage with
choice is cost savings. But the benefits end there. There are definite
dangers associated with this route which we will address later.
If you have an existing site that is outdated and very unprofessional
in function and appearance, or if you are serious about putting
your new website
to work, then a smaller Calgary web design company is a logical
choice. These companies (of which there are about 300 presently) offer
distinct advantages. Typically, this smaller web design shop will
have the knowledge,
experience and expertise to build your website properly. You must,
of course, watch out for signs of danger. These include “package”
prices for web design.
It is logical to assume that your 10-page website may be completely
from that of a software company versus that of a flower shop. Offering
a fixed price or “package” price for web design is that Calgary web design company announcing to the world that is has no idea how to
properly handle
a web design project. Another pitfall of this type of company is
the home-based business. Now, there are certainly a number of reputable
and effective
Calgary web design companies that are operated from a den or a
basement. Unfortunately, major drawbacks of such an operation can include
  1. Reliance on residential services, which can be less reliable
    than corporate-level services (e.g. electricity, telephone,
    internet connection,
  2. Unprofessional attitude and environment. Typically
    you will meet with these web design businesses at a coffee shop or
    shopping mall
    food court,
    as they will be reluctant to have clients come to their homes.
  3. Occasionally
    these businesses will not be the proprietor’s full-time occupation.
    They may have a full-time job which
    would put a client’s
    web design project as secondary and not critical to their
    monetary survival.
Now, as with the first group of Calgary
web designers
we identified, there can be cost savings with the home-based
business sector.
The real gems in this field are the small web design companies
in Calgary that have really legitimized their businesses.
This includes
that have taken the step toward office space of their own
(or office space in a business centre). Typically these businesses
will offer
a higher level
of service than their home-based counterparts and will have
more perks to dealing with them. They have invested much more into
their Calgary
web design business
, so are more likely to have proven methodologies
in place,
and several employees or contractors available to help them
handle larger or more frequent projects.
The final group of web design companies in Calgary is the large “systems development” players. These
companies will typically
only deal with
big business themselves as their rates and overhead are
exorbitant. Clients
will reap the benefits of a much larger network of high-paid,
seasoned professionals, but will have to pay for all unnecessary
through the higher rates. These Calgary web design
have their place,
but it is typically with the big boys working on enterprise-level
web integration and intranet services.
The fundamental message here is twofold: Consider
your objectives before undertaking any web design project
and look closely
at the legitimate
Calgary web design small business players. They offer the
best cost to benefit
ratio by far.

Preparing For Web Design

Web Design Overview

Even if you have an experienced professional to design your web site based on your custom needs, it can still be a daunting and anxiety-causing experience. Trying to run your own business can be challenging enough without having to worry about a world of ever-changing technologies with cryptic acronyms such as JSP, PHP, SQL, and the hundreds of other unfamiliar terms out there. This article will help you prepare for having your website designed by a professional (hopefully us) and alleviate some of the worry around what you can expect.

Writing Content For Your Custom Website

Being professional web designers, our job is to worry about the ‘how’ of your website. How will it be coded, viewed, and accessed on the internet? We provide the actual implementation and create a pleasing visual design you and your users will like. What you need to think about is what you want people to know about your business and industry. What services does your company provide? What are your company goals, values, and policies? Why would I buy from you instead of your competitor? Divide these up into clear categories that will be ‘pages’.

Think In Search Keywords

Think of a good word that says what your company does. Then think of at least four more. Use these keywords repeatedly throughout your writing, also using good synonyms for these things when possible. What products or services do you want to be known for?

Surf the Web For Success

Spend time visiting your competitors’ websites. What do you like about their websites? What don’t you like? Your web designer will need to get a basic idea of this before they can begin on a graphic design proposal for you. Do you have company colors? A logo? Do you like websites better with navigation at the top or on the side? Many people having their first website designed really don’t know what they like because they’ve never taken the time to think about it. Visiting other websites will help you get a better idea of what you like and don’t like.

Make Your Website Helpful

The internet is saturated with websites and online companies. To stand out, you have to do more than everyone else. One of the easiest ways to do this is to provide helpful articles and resources pertaining to your industry. If you are a travel agent, provide articles on places you’ve been and good car rental agencies. If you are in real estate provide selling and home improvement tips. The possibilities are really endless if you give it thought. Every article you write could be one more customer who stopped to read and stayed to buy. In addition, it gives you the opportunity to demonstrate your knowledge and experience, and it makes consumers feel more confident in your product or service.

What Does My Website Do?

Many people online just want to provide information about their company and establish a web presence. There is absolutely nothing wrong with this. It is a necessary form of advertising in today’s world, and you may want to just leave it at that. However, there are things to consider besides content. For example, many people have contact forms or a guestbook for visitors to leave comments. Do you want to have people sign up for newsletters or provide discussion boards for your visitors? Do you want people to be able to actually purchase your product or service over the web? Do you need a secure login for your customers? These are all things to give serious thought.

My Custom Website is Done… Isn’t It?

Really, a website is never done. Even after your design is completed, and you have everything you thought you ever wanted, inevitably something happens. Things change. It may be your business or your competitors, but mark my words, things will change. You want your website to be able to reflect these changes as soon as possible, so it’s important that whoever you choose as a professional provides ongoing updates to your website. Also, the more often your content is updated and the more useful content you have, the better your website will be. So, keep it growing!

There’s no reason to worry as to how it’s done if you have a good professional helping you out. All you need is to spend some time deciding on your needs and preferences. The more planning you put into it, the easier the web design process will be. We wish you much prosperity and success.

Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for Commercial Websites

 Is Your Website Design Driving Away Your Customers? Some Basic   Usability Tips for Commercial Websites

Following my article on
Appearance, Usability and Search Engine Friendliness in Web Design
where I discussed the importance of looking at the usability and search engine visibility of a website, I have received countless messages
from visitors to asking me to review their website. While I do not have time to answer such requests individually, I decided that an
article outlining some glaring usability flaws that I have found in a number of websites in general would be helpful. This article thus deals with the
myths and fallacies commonly believed when designing a website to sell a product or a service.

Make It Easy for Visitor to Check Your Price List

Some websites try to hide the price list for their products. Some of these sites only display the price of the item after you hit the
"Buy" or "Order" button, or worse, only after you have created an account on their site. Others have a price list, but bury the link to the price list
somewhere deep in their site in a place not easily accessible from the main page or the products page.

I'm not exactly sure what the reason behind this is. Possibly, they think that if the customer does not see the price until they click the "Buy" or
"Order" button, they will be more likely to buy the item. This reasoning is fallacious.

There are many types of visitors arriving at your site. Let's take the case of the window shopper. If they see something noteworthy on your site,
they may make a note of the price so that they can return later if they want the item at some point in the future. If the price of the item cannot be easily
found on your site, do you seriously think that they will thoroughly search the site just to find that elusive price tag? Or do you suppose that such
a visitor will click the "Buy" button, just so that they can find the price tag at the end of the process somewhere? Or will they go through the bother of
creating an account, revealing their personal particulars, just to find the price of an item?

Like the serious shopper, if they cannot find the price, they will simply go to another site. Remember: this is not a brick and mortar store we're
talking about, where you need to take time and put in effort to travel to another store. On the Internet, your competitor is only a click away.
And the search engines are more than happy to yield thousands of other sites selling the same type of goods or services as you. I realise that
there are some brick and mortar stores (usually small concerns) who think that if they don't put a price tag, the customer has to find out the price
from a sales person, who will then have the opportunity to persuade him/her to buy that item. Whether or not that is a good idea for a
brick and mortar store (and I can think offhand of some types of customers that you will lose even there), it is a bad idea for a web store.

No matter how you look at it, every customer and potential customer will need to know the price of a product. Even the corporate customer buying for
his/her company works to a budget. Making it difficult for your visitor to find the price list is a quick way to drive a potential customer away.
As has been observed by many usability experts - the average Internet user has the attention span of a flea. If they can't find what they want within
the first few seconds of glancing at your page, they will leave. And your competitors will be more than happy to attend to them in your place.

Provide Descriptions and Pictures for Your Products

I realise that the new web designer is beset with contradictory advice about how best to design their site. One set of such conflicting advice is
the requirement to be brief and to-the-point so that you can catch that Internet visitor who will only give your web page a few seconds glance before
deciding whether to stay or go elsewhere. Contradicting that is the requirement that you describe your products in depth and place pictures of your product,
or screenshots if yours is a software product.

The best way to resolve this, I think, is to take a leaf from's book. For every item they list on their
search results for a query (they have too many products to have a straightforward "Products" page), they usually have a brief description,
a thumbnail picture, the price and a link to buy the item. If this brief description interests you, you can click the link and get a longer description and
more information about the product.

A product page for each product, with a long description and pictures of the product, is indispensible. This is particularly so if your product
is expensive, or has plenty of competition. Your long description and pictures of what you're selling is what cinches the sale. Potential customers
will use the information on that page to decide whether or not to buy the item. They look at the page and compare it with the what is said about your
competitor's product. It is thus in your interest to mention all the salient points about your product or service on that page.
Think of it as the web equivalent of a salesman promoting a product to a walk-in customer.

An informative and detailed product page is not all you need. You also need to place your "Buy" or "Order" buttons both at the top and the bottom of
the product page. If your product page is especially long, spanning many screenfuls, you may also want to consider placing additional buttons somewhere
in the middle of the page. Do not force your customers to scroll to the bottom of the page before they can buy the item. You may have suffered
countless hours drafting the description of the page. Do not pass the suffering to your customers by requiring them to read it all before they
can order your product. Some customers are easily convinced, or they come to your page having already decided to buy. Make it easy for them to get
to where they want to go within your site.

Allow Your Customers to Browse Your Site in Any Way They Choose

Have you ever encountered a "live" salesperson who drones on and on about a product, giving you little chance to jump in and tell him/her that
you have already decided to buy the product? "I'll buy already!" you want to shout, but the guy insists on finishing his tome on the product.

Such a person, in real life, is probably seldom found. However, I have visited many websites that practise this very sales tactic. One characteristic
of such websites is that the site has very poor navigational facilities. You cannot easily access other pages on the site except through a sequence of
choreographed steps that the author has planned. First you have to read his introduction about the product. Then after a very long exposition on the
first page, you are graced with a link at the bottom that takes you to a second page. Again, you have to endure the sermon on the second page before you
can find the link to move on. Even if you have already decided to buy the product, you're forced to go through the whole sequence of steps before you
can buy the product.

Such websites are reminiscent of the high-pressure sales tactics employed by some salesmen, and give visitors a bad taste.
The usability of such sites is low, and the design of the site discourages impulse purchases.

One of the basic rules in selling something on the web is that you should not force your customers to click through many pages before they
reach the "Buy" or "Download" button. It is never productive, leaves a bitter taste in some visitors' mouth, and drives off others. Sure, you may convince
some people to buy the product after they read it all, but you are also convincing others that you're the sort of person they don't want to do business with.
A website is different from a "live" salesman. People can leave any time during your sales pitch. And they do. Most people visiting a site to buy something
are not there to read a long exposition. They are there to get a product. Delaying that purchase can only hurt your business. When I say that you need to
give a product page with a detailed description about your product, I don't mean that you have to force everyone to read that detailed description before they
can buy. Always provide a shortcut to the order form for your visitors.

Mandatory Items on the Site Navigation Bar

For a commercial site, certain links should be accessible from every page of your website. The easiest way to do this is to place them on your
navigation bar. If you don't know what a navigation bar is, take a look at On the top left of every page is a series of buttons which
give you access to the main pages of the site. Your navigation bar need not be on the left side as mine is. You can put it at the top, the right or the
bottom as well. However, the following items should always be present:

  • Products: this is a link to a page listing all your products. If you have too many products to fit into one page, you may want to create
    category pages that are accessible through the main product page.
  • Order Form: this should point to your order form.
  • Price List: as mentioned earlier, a price list improves the usability of your site, and ultimately your bottom line.
  • Support: you should place a link to a page which provides ways that your customer can contact you.
  • About Us: since you are selling things, you should have an "About Us" page that tells your customer about you or your company.

Personality in Design

Personality in Design

Our lasting relationships center around the unique qualities and perspectives we all possess. We call it personality. Through our personalities, we express the entire gamut of human emotion. Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design.

Personality is the platform for emotion

Interface design lives in a broader category called Human-Computer Interaction, or HCI, sitting among computer science, behavioral science, and design. HCI specialists understand psychology, usability, interaction design, programming concepts, and basic visual design principles. Sound familiar? That’s an awful lot like what user experience designers wrangle every day.

I’ll let you in on a secret. I’m not a fan of the name “Human-Computer Interaction.” When I design, I work very hard to make the interface experience feel like there’s a human on the other end, not a computer. It might sound like I’m splitting hairs, but names are important. Names shape our perceptions, and cue us into the ideas that fit within a category.

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface. To achieve this goal, we must consider how we interact with one another in real life.

I’d like you to pause for a moment, and recall a person with whom you recently made a real connection. Maybe you met them while taking a walk, while at an event, or maybe a friend introduced you, and the ensuing conversation was engaging, interesting, and maybe even fun. What was it about that person that made your conversation so exhilarating? You probably had common interests that sparked discussion, but that wasn’t what made the encounter so memorable, was it? It was their personality that drew you to them, that guided the discussion and left you feeling excited. Your personalities intersected in shared jokes, tone of voice, and the cadence of the conversation. This dropped your guard and made you trust this new person. Personalities foster friendships and serve as the platform for emotional connections.

Hold on to that memory. Revisit it when you start a new design project. That feeling is what we’re trying to craft through emotional design. We’ll create that feeling of excitement and we’ll bond with our audience by designing a personality that our interface will embody.

Let’s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Products are people, too.

Once again, history can inform our work today. It turns out that designers have been experimenting with personality to craft a more human experience for centuries.

A Brief History of Personality in Design

We have a history of injecting personality into the things we make, in a bid to make mechanical things more human. When Johannes Gutenberg—goldsmith and father of the printing press—experimented with movable type in the mid-fifteenth century, the human hand inspired him. Before the printing press, scribes—usually monks—painstakingly penned each page of religious manuscripts by hand with quill and ink. Transcribing a bible was a sacred duty, as the scribe was thought to be channeling a divine message. For this reason, the hand’s presence in these manuscripts has great spiritual importance.

So when Gutenberg designed and cast the original typefaces he used to print hundreds of bibles, the letterforms mimicked the calligraphic style of scribes. Though he created machines to deliver the divine message, he worked hard to make the presentation human (Fig 3.1).

Fig 3.1: Gutenberg’s movable type mimicked the calligraphic hand of a scribe in an attempt to make his mechanically produced bibles feel more human. (source)

We can see the trend of distinctly human design in the twentieth century, when mass production permeated nearly every industry.

The Volkswagen Beetle, released in 1938 and produced until 2003, is the best selling design in automotive history. Its distinctly human design contributed to its success (Fig 3.2). Conceived as the “People’s Car,” the anthropomorphized design makes it more than a car for the people: it‘s a car that is a person. The round headlights denote eyes while its scoop-shaped hood smiles at us, personifying the baby-face bias. Though originally designed for aerodynamics not personality, the Beetle’s “face” conveys a perpetually hopeful and fun attitude that made it easy for generations to connect with, despite dramatic cultural changes over seven decades.

Fig 3.2: Personality is front and center in the Volkswagen Beetle’s design, which helped to make it a smashing success through generations. (source)

That smile that greets its driver reflects emotion and establishes a specific kind of relationship. It’s hard not to return a smile even if it’s coming from an object. Around that simple interaction we’ve constructed an emotional persona for this car, leading to games (“Slug bug red!”) and the Beetle as movie hero (Herbie in The Love Bug). We‘ve created memories around these experiences and they remind us of the positive emotions the Beetle inspires.

Though the Gutenberg bibles and the Volkswagen Beetle are interesting examples, there is no more concrete an example of personality in design than Apple‘s “Get a Mac” ad campaign. In the ads, Justin Long portrays a young hipster Mac who effortlessly tackles complex problems while his foil—John Hodgman’s dweeby, uncool PC—bungles every task. These ads convey a personality experience and help consumers compare the differing relationships they could have with their computer. They don’t talk about specs and features, they show how you will feel if you buy a Mac.
With a sense of the history of personality in design, let’s return to the present, where you and I are working hard to understand our audience and doing our best to craft engaging web experiences.


In modern web design, we research, plan, and create with our audience’s attitudes and motivations in mind. User experience designers interview their audience, then create personas—a dossier on an archetypal user who represents a larger group. Think of personas as the artifacts of user research. They help a web design team remain aware of their target audience and stay focused on their needs.

The persona example shown in Fig 3.3, created by Todd Zaki Warfel, principal designer at messagefirst, tells the story of Julia, a certain category of user. Through this document we learn about her demographics, her interests, her expertise in various subjects, and what influences her decisions on subjects germane to the project—we start to understand who Julia is. We get a glimpse of her personality, which helps us to understand her motivations and shapes the design decisions that follow.

Fig 3.3: Personas help guide the design process, keeping the focus on user needs.

Although Julia is not a real person, but an archetypal representative of a user group, she’s actually closely based on a person that the folks at messagefirst know. They create all of their personas this way, which is handy. When they encounter a tricky point in their design process where they’re unsure of which perceptions, values, and behaviors to expect of their audience in a specific interface, they can simply phone them and ask questions. Not only does this help them create better design solutions, it keeps them focused on real people who will use the things they make.

As we saw in the hierarchy of needs in Chapter 1, we know all users need our designs to be functional, reliable, and usable. By understanding our audience, we can better address their needs. This information also helps us address the top layer in that hierarchy—pleasure—by clueing us in to the design personality most likely to create an emotional connection.

Personas are a standard tool in the design process, but they only provide a partial picture of the relationship wersre building with our audience. We know who they are, but who are we? Earlier in the chapter I mentioned that products can be people too. Following that line of thinking, shouldn’t our design have a persona that serves as the foil for our user personas? Why, yes—yes it should.

Creating a Design Persona for Your Website

If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy and capable? Is it a wise-cracking buddy that makes even mundane tasks fun?

Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team to construct a unified and consistent result. The goal is to construct a personality portrait every bit as clear as those Justin Long and John Hodgman convey in the “Get a Mac” ads.

Before we take a look at a real design persona I created for MailChimp, let‘s examine the components of the document. Here’s what you‘ll include in your design persona:

Brand name: The name of your company or service.

Overview: A short overview of your brand‘s personality. What makes your brand personality unique?

Personality image: This is an actual image of a person that embodies the traits you wish to include in your brand. This makes the personality less abstract. Pick a famous person, or a person with whom your team is familiar. If your brand has a mascot or representative that already embodies the personality, use that instead. Describe the attributes of the mascot that communicate the brand’s personality.

Brand traits: List five to seven traits that best describe your brand along with a trait that you want to avoid. This helps those designing and writing for this design persona to create a consistent personality while avoiding the traits that would take your brand in the wrong direction.

Personality map: We can map personalities on an X / Y axis. The X axis represents the degree to which the personality is unfriendly or friendly; the Y axis shows the degree of submissiveness or dominance.

Voice: If your brand could talk, how would it speak? What would it say? Would it speak with a folksy vernacular or a refined, erudite clip? Describe the specific aspects of your brand’s voice and how it might change in various communication situations. People change their language and tone to fit the situation, and so should your brand’s voice.

Copy examples: Provide examples of copy that might be used in different situations in your interface. This helps writers understand how your design persona should communicate.

Visual lexicon: If you are a designer creating this document for yourself and/or a design team, you can create a visual lexicon in your design persona that includes an overview of the colors, typography, and visual style that conveys your brand‘s personality. You can be general about these concepts, or include a mood board.

Engagement methods: Describe the emotional engagement methods you might use in your interface to support the design persona and create a memorable experience. We‘ll learn more about these in the next chapter.

Now we‘ll take a look at a real-world example. As the user experience design lead at MailChimp, I created a design persona to guide the work we do. Following the same structure as we‘ve just seen, here’s a slightly abbreviated version of the document we use:

Brand name: MailChimp

Overview: Freddie Von Chimpenheimer IV is the face of MailChimp and the embodiment of the brand personality (Fig 3.4). Freddie’s stout frame communicates the power of the application, and his on-the-go posture lets people know this brand means business.
Freddie always has a kind smile that welcomes users and makes them feel at home. The cartoon style communicates that MailChimp offers a fun and informal experience. Yes, he’s a cartoon ape, but somehow Freddie can still be cool. He likes to crack witty jokes, but when the situation is serious, the funny business stops.
MailChimp often surprises users with a fun easter egg, or a link to a gut-busting YouTube video. Fun is around every corner, but never in the way of the workflow.

Fig 3.4: Freddie Von Chimpenheimer IV, Mailchimp’s mascot.

Personality image: Fig 3.4

Brand traits: Fun, but not childish. Funny, but not goofy. Powerful, but not complicated. Hip, but not alienating. Easy, but not simplistic. Trustworthy, but not stodgy. Informal, but not sloppy.

Personality map: Fig 3.5

Fig 3.5: MailChimp’s personality map.

Voice: MailChimp’s voice is familiar, friendly, and—above all—human. The personalities of the people behind the brand shine through honestly. The voice of MailChimp cracks jokes (ones you can share with your mama), tells stories, and communicates with the folksy tone that you might use with an old friend.
MailChimp uses contractions like “don’t” instead of “do not” because that’s how real humans speak to one another. MailChimp uses sound effects like, “hmmmmm...” to make it sound like you’re thinking hard, or “Blech, that’s awful!” to communicate empathy. Lowercase form and button text reinforce the brand’s informality.

Copy examples: Success message: “High fives! Your list has been imported.” Error message: “Oops, looks like you forgot to enter an email address.” Critical failure: “One of our servers is temporarily down. Our engineers are already on the case and will have it back online shortly. Thanks for your patience.”

Visual lexicon: Color: MailChimp’s bright yet slightly desaturated color palette conveys a sense of fun and humor. The colors feel refined—not romper room-y. MailChimp is fun, but it’s also powerful. Typography: MailChimp is easy-going, efficient, and easy to use, and its typography reflects it. Simple, sans-serif headings and body copy vary appropriately in scale, weight, and color to communicate information hierarchy, making MailChimp feel like a familiar, comfortable cardigan that is both functional and beloved. General style notes: Interface elements are flat and simple, keeping things easy to understand and unintimidating. Soft, subtle textures may appear in places to warm up the space and make it feel human. Freddie should be used sparingly, and only to interject a bit of humor. Freddie never gives application feedback, stats, or helps with a task.

Engagement methods: Surprise and delight: Themed login screens commemorate holidays, cultural events, or a beloved individual. Easter eggs create unexpected moments of humor that may convey nostalgia or reference kitschy pop culture. Anticipation: Freddie’s random funny greetings at the top of each main page create anticipation for the next page to load. These greetings never provide information or feedback. They are a fun layer that never interferes with functionality or usability.

Download a design persona template and the MailChimp example at Try it on your next project, or maybe even on a redesign.

Just as user experience designers post personas in a place where the design, development, and content strategy teams will see them throughout the project, your design persona should be visible to remind the team of the type of relationship you want to build with your audience. The design
persona should guide anyone that crafts a pixel, a paragraph, or a process on your website.

Many websites are already using personality to shape the user experience and power their commercial success. Though dissimilar in brand, business goals, and platform, Tapbots, Carbonmade, and Housing Works have discovered that personality is the key ingredient in the emotional connections they’re building with their audience and in their overwhelming success.

Tapbots: robot love

Tapbots, makers of handy little iPhone apps, have created a distinct personality in their interfaces, making otherwise nerdy tasks seem enjoyable (Fig 3.6).

Fig 3.6: The Tapbots apps feel like lovable little robots ready to do your number-crunching dirty work.

The Convertbot app, as its name foretells, simply converts between various units of measure. The Weightbot app helps users track fluctuations in body weight. Neither of these tasks is terribly enjoyable to perform, especially weight tracking, which can rattle your self-esteem. But the apps’ design has created a loyal following that’s made them a smashing success.

The apps seem to have faces through which all interaction takes place. The dark panels at the top resemble Kool Moe Dee-inspired sunglasses propped above a slight triangle nose and a broad mouth. If you must track your weight, a cyborg Kool Moe Dee is a good partner in crime.
Unlike other iPhone apps, the interfaces seem like little human robots. One robot in particular inspired Tapbots app designer Mark Jardine to design personality into the user interface:

The whole UI concept was really inspired by the movie, WALL•E. Our concept for the first two apps was to design them as if they were physical robots.
We want our apps to be used seriously, but also give the sense that they are more than just a piece of software. We want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do.

Users react with effusive emotion to these cartoony, yet seemingly tangible interfaces enhanced by robotic whirs, bleeps, and blips. You can certainly see the parallels with WALL•E, in physical and personality traits. Both are friendly, endearing, and reliable.

Technology blogger John Gruber sums up audience sentiment about Tapbots apps with this simple review:

I adore the way their apps look and sound.

Ironically, Gruber doesn’t even mention the apps’ functionality, though his appreciation of it is implied. He uses the word “adore.” Gruber doesn’t just like these apps; he loves them. These anthropomorphized interfaces give users the sense that they are interacting with another living being with a personality, making an emotional connection possible. Interfaces that can tap into emotion effectively not only create a broad fan base, they build an army of evangelists.

The brand personality train chugs on in the next example. Carbonmade manages to construct an effective brand personality that resonates with their audience while bathing in a sea of mustachioed wackiness.

Carbonmade: octopi, unicorns, and mustachios

Personality can forge relationships with an audience only to the extent that it’s unique and authentic. If it’s used as a gimmick, it can have the opposite effect. People will notice contrived, inauthentic personality in a design, which will send them packing and ensure that they’ll never trust your brand.

Carbonmade, a clever little web app that helps people design elegant portfolios, expresses their personality throughout their site, combining the earnestness of Jimmy Stewart with Eddie Izzard’s exploding, goofy charm. Octopi and unicorns frolic in their fantastical homepage landscape (Fig 3.7)—atypical for a conversion-focused site.

Fig 3.7: Carbonmade uses an over-the-top personality to woo new users to their service.

This quirky personality and tongue-in-cheek humor is conjured by their designer Dave Gorum, and as it turns out, it’s what encourages skeptical designers and artists to sign up. Gorum explains:

My rule was and is to add fun up to the point that it distracts from the message.
Keeping things informal and bonkers makes it all the easier to get folks to click that sign-up button. There’s a taper to the silliness though. We lay it on pretty thick in our marketing site, dial it back a bit in our admin tools, and remove it all together on the product. It’s like a giant, flashy, goofy piece of candy on the outside, with a Swiss-engineered, straight-laced nougaty center!

Carbonmade‘s humor and personality is like a reverse mullet: party up front, and business in the back. Dialing back the over-the-top personality in their application allows users to focus on workflow rather than getting lost in a sea of mustaches. The informal tone of the product site, however, creates a rapport that makes the audience feel comfortable with subscribing to the service, while misdirecting competitors who may believe that Carbonmade is all frivolity and no substance:

The informality makes it super easy to open a dialogue with our audience. We’re like their goofy friend who’s really easy to talk to and can make them a sweet portfolio.
If anything, the smirking goofiness lets our competitors feel comfortable about not taking us seriously. Which is juuuuust fine.

Carbonmade’s brand personality creates clear contrast for an audience that’s trying to compare them to the competition. That contrast is an essential part of the human decision making process.

While humor is in the wheelhouse of Carbonmade’s personality, it’s not always appropriate. It’s our desire to share a bit of our selves with others that shapes the personality in our designs, and helps us to connect with our audience. We’re all complex people with a broad range of emotions. When it comes to emotional design, we need to tailor the personality to the content and audience.
Few websites do this as well as Housing Works, which puts a human face on an important cause.

Housing Works: a name with a face

As is true in the real world, we can’t always punctuate site personalities with wit and humor. Certain situations call for a different tactic.
Housing Works is an inspiring non-profit dedicated to ending AIDS and homelessness. Housing Works changes lives every day. Their story is one of empathy, kindness, and hope for everyday people.
When Happy Cog redesigned Housing Works’ website in 2008 (Fig 3.8), the personalities of the organization and the people it serves were the muses of their design process.

Fig 3.8: Housing Works builds an emotional bond with its audience by sharing the stories of the amazing people it serves.

Dan Mall, the Housing Works design lead, explains:

It was very clear that the heart of Housing Works is the people that serve and people that it serves. It was overwhelmingly about warmth and care. Under that direction, it was easy to design the site you see today.

Large photographs and quotes about how Housing Works
has changed a life figure prominently on the homepage, communicating the organization’s personality while inspiring their audience. Smiling faces and personal stories cycle softly, helping the site to achieve real human-to-human communication.

Photo cropping shapes the audience’s emotional perspective. The face-ism ratio design principle states that photographs cropped tight to the subject’s face encourage an emotional response from the viewer, while emphasizing the personality of the subject. Wider subject cropping emphasizes the physical appearance of the subject. Photos on the Housing Works homepage are cropped perfectly to help us see the beautiful personalities of the people depicted, making us sympathetic to their cause.

The Power of Personality

Just as our personalities shift with the context of communication in real life, they must shift in the projects we design. There’s no one-size-fits-all solution. If we stop thinking of the interfaces we design as dumb control panels, and think of them as the people our target audience wants to interact with, we can craft emotionally engaging experiences that make a lasting impression.
Keep in mind that when you emphasize personality in the user experience, some people won’t like it. That’s okay, though. Personalities clash, and in the case of businesses, it can actually be a good thing. If people don’t understand your personality, chances are they’re not the right customer for you, and you’re actually saving yourself future customer-relations problems. Personality is a risk, but there are many real-world examples that suggest the rewards are worth it.

Dark Patterns: Deception vs. Honesty in UI Design

Dark Patterns: Deception vs. Honesty in UI Design
We might not like to admit it but deception is deeply entwined with life on this planet. Insects evolved to use it, animals employ it in their behavior, and of course, we humans use it to manipulate, control, and profit from each other. With this in mind it’s no surprise that deception appears in various guises in user interfaces on the web today. What is surprising, though, is that up until recently it was something web designers never talked about. There was no terminology, no design patterns, and no real recognition of it as a phenomenon at all. If it wasn’t a taboo it certainly felt like one.

To fill the gap, was created in August 2010: a pattern library with the specific goal of naming and shaming deceptive user interfaces (aka “dark patterns”) and the companies that use them. This article will provide you with a brief overview of the library and some specific examples of dark patterns in use today.

If we put aside our moral quibbles let’s put ourselves in the shoes of an evil web designer for a moment. How can we take advantage of our customers in the most effective manner? First off, subtlety is our friend. For example, if our site is going to hit users with hidden costs in the checkout process, we’ll be more effective if we add relatively small costs. If we add $100 to a $20 purchase, the customer will most likely notice and drop out. We’d be much better off adding just a few dollars as some sort of “order processing fee.” Even if customers notice this, they probably won’t bother dropping out as the cost is too small to justify going through the checkout process on another site. This is why deceptive user interfaces are so common on the web—in isolation they’re usually so small that each one is barely annoying enough for people to do anything about them.

Let’s continue a while as evil web designers: perhaps you’ve never thought about it before but all of the guidelines, principles, and methods that ethical designers use to design usable websites can be easily subverted to benefit business owners at the expense of users. It’s actually quite simple to take our understanding of human psychology and flip it over to the dark side. Let’s look at some examples:

Psychological Insight Applied Honestly (benefits users) Applied Deceptively (benefits business)
“We don’t read pages. We scan them” —Steve Krug Aid rapid comprehension: ensure key content is shown in headings, subheadings (etc), using a strong visual hierarchy. Hide key information:
Bury facts within paragraphs of text, so some users will proceed without fully understanding the transaction.
“People tend to stick to the defaults” —Jakob Nielsen Prevent mistakes:
Default to the option that’s safest for the user. In important contexts, don’t use defaults and require the user to make an explicit choice.
Benefit from mistakes:
Ensure default options benefit the business, even if this means some users convert without meaning to.
“People will do things that they see other people are doing” —Robert Cialdini Show unedited feedback:
Allow real customers to share their experiences, so they can make accurate pre-purchase evaluations.
Bury negative feedback:
Hand-pick positive feedback and display it prominently. Bury negative feedback so it is hard to find.

“But it tests well!”

Dark patterns tend to perform very well in A/B and multivariate tests simply because a design that tricks users into doing something is likely to achieve more conversions than one that allows users to make an informed decision. As an exercise, take a look at the three examples below. Each takes a different approach to eliciting users’ marketing preferences. Which do you think would win an A/B test by achieving the most marketing opt-ins? And which do you think is the most ethical from a user’s point of view?

Fig. 1
Fig. 1: Which example do you think might perform best in an A/B test?

Example A is basically honest. Checkboxes are opt-in with clear labels. If the user happens to ignore the area completely, they will not be signed up to any marketing messages. Although this is kind to users as it avoids accidental opt-ins, it is also bad for business as conversion rates will be relatively low. Example C is another honest interface: a user cannot submit the form without selecting an answer so they are forced to make an explicit decision.

On the other hand, Example B is quite devious, and because of this it is likely to win in A/B tests. Double negatives are used in the first checkbox label but not in the second, which will confuse some users. Those who ignore both the checkboxes will unknowingly give some marketing permissions, while those who zealously tick both checkboxes will also end up giving some marketing permissions. In other words, this kind of trick question is like a trammel net used in fishing, which uses different layers to entangle prey in different ways.

As you can see, blinkered and over-zealous A/B testing may actually be causing the web to evolve toward dark patterns. The lesson here is that you should never rely on a single method and a single metric to understand your customers. Their opinions, feelings, and trust in your company are far more broad ranging than their behavior in a single split-second on your website.

If used properly good old-fashioned face-to-face usability testing can provide a great antidote. A highlight video reel containing footage of customers swearing about your website can make even the most hard-headed CEO sit forward and listen. However, usability testing can be quite expensive and typically delivers qualitative data. A quant-centric company is unlikely to change its spots overnight. Let’s take a look at another example.

Forced Continuity: rolling over from free to paid plans

One of the biggest problems with the freemium business model is the low conversion rate from free to paying customers. Many businesses deal with this problem by offering free trials that require credit card details upfront, which automatically transition users to a paid plan after a set time. This forced continuity and can be applied both ethically and unethically, with many shades of gray.

At the most honest and user-centered end of the scale, we have Apple’s MobileMe. When signing up, the service makes it extremely clear what you are getting into as a customer (Fig. 2, below). It doesn’t hide anything in small print or complex wording. Then, when you’re seven days away from transitioning to the paid plan, they email you a reminder of what is about to happen. In other words, they couldn’t make it any clearer at any stage of the process.

Fig. 2
Fig. 2: The explanation at the top of the credit card form of is very prominent and clearly worded.

Let’s move down the scale to a slightly more questionable approach. One well known DVD rental company gives great upfront messaging about the rollover from a free to paid plan—just like Apple does with MobileMe—but they don’t send out reminder emails. This means that some customers will inevitably forget what they agreed to and find themselves charged monthly, only noticing when they check their credit card bill. Does omitting reminder emails make this UI less honest?

This isn’t an easy question to answer. The costs associated with mailing physical objects around the country are structured very differently to an online service. We know for a fact that reminder emails will reduce the conversion from a free to paid plan, and if their margins are thin, this could make the free trial model loss-making and therefore unviable.

Now, maybe you’re thinking that this kind of ethical hand-wringing is somewhat naive. Of course there will always be tension between businesses and their customers. Both have self-interests—a sustainable relationship is only created when a balance is achieved between the two. Classic economic theory says that market forces will provide a self-righting mechanism, and that customers will shop elsewhere if a business does not provide a compelling service. However, this theory also assumes people behave with a perfect knowledge of all economic opportunities and attributes (a.k.a “Homo Economicus”) a point of view that is widely refuted by behavioral economists. If a business is successful at deceiving some of its customers in a subtle manner, the majority of customers will not know or care, so they will have no reason to shop elsewhere.

Fig. 3
Fig. 3: The continuum from honest interfaces to dark patterns.

Now let’s look at the least honest end of the scale. One well known credit rating service uses forced continuity in a very deceptive manner. As well as not sending a reminder, they use some very cunningly written copy on the credit card form (Fig. 4, below). As we all know, people tend to start reading at the beginning of a piece of text and as they advance, an increasing percentage of people give up and do not read to the end. This common reading behavior is the reason why the inverted pyramid style was invented: to assist readers with a concise and accurate summary up front. As you can see below, the designers of this website have applied this understanding of human reading behavior to nefarious ends.

Fig. 4
Fig. 4: Black hat copywriting: this text has been purposefully crafted to mislead.

If you only read the question and the first line of the response the copy appears to be saying one thing—that the only reason you are being asked for your credit card details is to allow identity verification, as part of the credit checking process. But, if you read all of the text word for word, you will see it actually means the opposite—that your credit card details are being taken to bill you on a monthly basis.

What’s clever here is that the level of deception is very subtle. Although it’s likely to boost their conversion rates, it also steers clear of any legal issues.

Weaning a business from dark patterns

Profit is sweet, even if it comes from deception. —Sophocles

Some businesses implement dark patterns by mistake or misadventure. The tricky problem for them is that they can become accustomed to the resultant revenue, and unlikely to want to turn the tap off. Nobody wants to be the manager who caused profits to drop overnight because of the “improvements” they made to the website.

However it can be done. Until mid-2010, Expedia-owned travel site hid costs from the user until the last moment in the checkout process (e.g., “extra guest charges,” “taxes and fees,” etc.)—which made the site look like it was offering cheaper deals than it really was. In late 2010, they redesigned the site to use a more honest interface which clearly states full prices up front on search results pages. Since then, they have won numerous awards for customer service: including the TUV certificate in Germany for safer shopping, and the best online site in Denmark, and they were voted top in the ‘Service’ and ‘Customer Friendly Website’ categories by the German Institute of Service Quality in January 2011.

Removing dark patterns from any site involves a leap of faith. A company has to shift from a short-term quantitative measurement mindset to one that values relatively slow, steady growth of “warm fuzzy” qualitative things like brand image, credibility, and trust. This kind of cultural shift is hard to do, which partially explains the reason why dark patterns tend to stick around once deployed.

What next?

Some people have suggested that we need more regulation around dark patterns, but this would be tricky as there are so many potential work-arounds. For now seems to be making some progress. Just a few months ago, one community member called out for using forced continuity in their billing process. (Customers attempting to buy a single audio book were given a monthly billed membership without them knowing.) Within days, replied on the wiki, stating:

When we heard that some listeners have found our check-out process less than clear, we took it upon ourselves to refine the wording of our offers and clarify our recurring billing practices. [...] We invite the Dark Patterns review our changes.

Sure enough, the new version of their site did away with the offending dark patterns and has been well received. This is a great example of how a grass-roots wiki can have a positive effect.

The way a company reacts after being outed speaks volumes about its real intentions. At least now we have a precedent for exposing them and demanding change: companies determined to use dark patterns will have to factor in the cost of negative PR. With continued pressure from the design community we can make a

A Pixel Identity Crisis

A Pixel Identity Crisis

The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units to build websites.

Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. Browser zooming is one thing and has been covered on QuirksMode. But what is a pixel on high resolution devices today? Why does the 640px × 960px iPhone 4 claim to be 320px × 480px in the browser? The truth is that there are two different definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.”

The hardware pixel

Most of us are familiar with the hardware pixel. It’s the smallest point a screen can physically display and is usually comprised of red, green, and blue sub-pixels. Light from these three sub-pixels is mixed to create the colors we see. Because the hardware pixel relates to a physical element on a screen it cannot be stretched, skewed, or subdivided. These properties make the hardware pixel like the atom: the unit of design on which we build everything.

The reference pixel and splitting atoms

Things are changing for the pixel. The w3c currently defines the reference pixel as the standard for all pixel-based measurements. Now, instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. This new pixel should look exactly the same in all viewing situations. The beauty of using a reference pixel is that it takes proximity to a screen into account. When using a phone that you held close, a reference pixel will be smaller on the screen than a projection you view from a distance. If the viewer holds their phone up so it is side-by-side with the projection, the pixel sizes should look identical no matter the resolution or pixel density the devices have. When implemented properly, this new standard will provide unprecedented stability across all designs on all platforms no matter the pixel density or viewing distance.

Reference pixels are amazing, but now we have two conflicting definitions. Android devices have a new unit, called the “density independent pixel” or “dip,” which developers can use to distinguish the number of optical pixels an item spans. This allows developers to use hardware pixels for crisp graphics and patterns by using px or the new relative definition of a pixel for text sizing and consistent proportion across devices by using dip. Splitting the definition of a pixel into two units is great for Android but the web has to deal with years of pixel based designs across all kinds of devices. It would be wonderful if web developers had these units as well, but without shifting the current definition of a pixel entirely, the pixel-based web would break. Imagine if the iPhone 4 told a website it was actually 640px; text would render at half size, such that without zooming, that website would be nearly impossible to read. For all those mobile sites that disable zooming it would be impossible to use.

Img standard pixel sizes on the Galaxy Tab and Kindle Fire
Fig. 1: Standard pixel sizes on the Galaxy Tab and Kindle Fire.

We also don’t know what each device considers a pixel and this is a problem. For example, the original Galaxy Tab and the Kindle Fire have the exact same screen size and resolution; but pixels on the Tab, which adjust for the reference pixel, are measured at 1.5 times that of the Fire, which uses hardware pixels. It is impossible to develop for new devices without having one to test on because the only specs released speak in terms of hardware pixels. A developer might look up information on these two devices and think that if the screens are the same and they both use the Webkit rendering engine their website will look the same. Sadly this is not the case; as far as a website is concerned, the Galaxy Tab is 400px × 683px and the Kindle Fire is 600px × 1024px.

Identifying break points and moving forward

It’s safe to say there is a problem with pixels. But we can use media queries to identify the inconsistencies and adjust accordingly. We can use the device-pixel-ratio media query to identify devices with scaled pixels. We can combine that with dimensions to identify types of devices with some amount of accuracy. The iPhone 4 has a device-pixel-ratio of two, so it measures pixels as twice the size of a hardware pixel. Many Android devices have a device-pixel-ratio of 1.5, so things are scaled at one-and-a-half times larger than the hardware pixel. Currently this needs to be prefixed, but you can use this query to start identifying scaled devices.

Specificity is key when identifying classes of devices, but be careful: never be quite so specific as to single out a single device and attempt to target that in case other devices have the same problem. Taking a look at the original Galaxy Tab and devices like it, a device-pixel-ratio of 1.5 will only get us part-way there. Most Android phones today also have this device-pixel-ratio and conflicts there can lead to other problems. Querying the device-width at both orientations will tell us that this is larger than a phone, but not as large as other tablets that may come out in the future. We can use device-width to identify the screen, unlike width and height which only query the viewport. Using the device dimensions, we can gain much better insight into the hardware being used:

@media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)

Note that device-pixel-ratio needs to be vendor prefixed to work, so adding -webkit- and -o- will make it work in Webkit and Opera browsers.

Now let’s look at devices like the Kindle Fire, which has the exact same hardware resolution as the Tab, and uses hardware-based pixels. Dealing with devices like this are more difficult because they’re more likely to conflict with netbooks and other larger screens as well as the iPad with a similar resolution. Using the media queries orientation and max-device-height will highlight the devices we need. Devices usually give a height less than the actual device-height so to avoid 1024 x 768 tablets identifying those under 600 pixels tall will avoid those. Now we’re looking at tablet devices which have fairly consistent resolutions and sizes:

@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)

Img Normalized pixels on the Galaxy Tab and Kindle Fire
Fig. 2: Normalized pixels on the Galaxy Tab and Kindle Fire.

Using ems instead of pixels will give you a lot of control over how your site can scale—and not just on type—on everything that had a pixel-based value before. Now, all you need to do is change the font-size value on the html element. Switching the Kindle Fire to look like the Galaxy Tab is just a matter of multiplying the base size by 3/2 (1.5) on the Kindle Fire’s media query. If you wish to use hardware-based pixels on the Galaxy Tab, multiply its base size by 2/3 (.666667). Because everything is based on ems, your site will scale relative to base font-size. Check out the full example in this Gist. Changing it depending on the context can improve consistency across platforms.

Managing multiple pixel definitions can be tricky. The pixel is the most basic unit and this shift to the optical pixel will cause some strange things to happen. Device makers are doing a fairly good job at identifying these issues and solving them so we don't have to, but something is always going to slip through the cracks or contain inconsistencies. Fortunately we have tools to identify and overcome these obstacles as long as we remain aware of this shift.

Editor's note: this article was augmented post production to vendor prefix information to cover Webkit-based and Opera browsers.

Photo Optimization

Photo Optimization

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization.

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.

Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back.

Computer monitors can only display images at 72dpi (dots per inch). So the first step in photo optimization is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load.

Most graphic files contain information about the color palette of the image. This information is usually unnecessary for displaying on the web. Many graphic programs included the ability to “Save for the web”. This option discards all of the unnecessary information in the file without any loss of picture quality.

Another method that appears to speed up load time is to use either the GIF or PNG interlaced or the JPEG progressive property. Both of these properties allow the picture to load gradually as first a blurry image that becomes sharper and clearer. In reality the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster the site visitor.

Width and Height IMG Attributes

The HTML <IMG> tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. If you don’t put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page.

How Many Images should you use?

Some web designers use images for everything. While it may look good, it will definitely slow down the speed of the page loading. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50% of the download time.

Using fewer images will speed download time and just may keep a visitor from bailing through impatience.

Photo Quality

Photo quality is determined by the clarity, color purity and detail of a photo. Use a graphic editor to remove noise and other unwanted features. Most editors allow you to correct red-eye and sharpen edges to improve clarity.

Professional editors like Fireworks or Photoshop will let you change the background, adjust the color levels and do almost anything else you want to do to the photo.

You can also use a thumbnail on the webpage that links to a larger and higher resolution version of the image so that people who want to can view it.

Photo Optimization Guidelines

The following suggestions will allow you to optimize your photos for fast download times without sacrificing picture quality:
  • Change the resolution of all images to 72dpi.
  • Convert graphic text into stylized text.
  • Crop the images to the actual size needed.
  • Minimize color depth when it’s not necessary for quality.
  • Specify the actual width and height of all images.
  • Use thumbnails where appropriate.

Bottom Line – Graphics should enhance the content of a web page except in that rare occurrence where the images are the content. In either case, you need to optimize photos and other graphic files to allow for the fastest downloading time possible for the web page otherwise you risk losing the visitor forever.

Design Guidelines

Web Design Guidelines

The goal of most web designers is to create an attractive, easily accessible and functional website that will convince the visitor to do something. Creating such a website requires good graphic design, easy and intuitive site navigation, logical site layout and good web copy. The following suggestions are general web design guidelines.

Web Content

You want the visitor to see you as a knowledgeable information source and/or a reputable business. Poor grammar and spelling will immediately reduce your credibility. Remember that people use the internet to find information. Whether you are selling your own product or recommending someone else’s products, you must first provide valuable information to the visitor or they will click away and find a website that gives them what they what they want.

Cross Browser Compatibility

There are at least a hundred different browsers in use. You must design your website to work properly in the most widely used browsers. To do that you may not be able to use all of the really great special effects that are available because they may not be supported in most browsers.

Even though most web browsers are free, people do not necessary bother to upgrade to the latest versions. The average surfer may not know how to upgrade their browser or have the attitude, “If it works, don’t fix it.” Remember your visitor may have a PC, a MAC, a Linux box, a PDA or a cell phone and they all use different browsers.

Good web design requires your web pages to work in Microsoft Internet Explorer, Netscape, Firefox, Opera and Safari at a minimum. Validating your HTML code will help but the final test is to view your website in different browsers running on different platforms.

Graphics and Photos

Web surfers are impatient and studies show that most people will click away if a webpage takes longer than 10 seconds to load. Always optimize your photos and other graphic files to have as small a size as possible without sacrificing picture quality.

Always use the height and width attributes on the picture so the rest of the page can load while the graphic files is downloading. Use the ALT HTML tag so people with graphics turned off and those using hand held devices know what the picture is supposed to be.

Background Colors

If you use anything other than white behind text, be sure to specify link colors otherwise the user’s browser defaults will determine what color the links are which can make them unreadable.


Multimedia is composed of flash movies, video clips, audio clips and background music. Always use streaming media because it reduces download time. Make sure the visitor can stop and start multimedia files or in the case of flash introductions, skip them if they want. That way people with slow connections or devices that don’t support multimedia can ignore them.

Also, put any important information presented in multimedia in text as well so the visitor has access to that information without using multimedia. If a plug-in is needed to use the multimedia, always provide a link to it so the user can install it. Finally, always remember the 10-second rule for site loading when deciding to use multimedia.

Site Navigation

Site navigation should be simple and intuitive. Studies have shown if a visitor cannot access the information they want within three clicks, they will leave the site. This is called the 3-click rule. Every area of your website should be reachable within three clicks from anywhere else on the site. If you use anything other than simple text links, make sure to test your navigation in all the major browsers.


Periodically test all site links to be certain that they are valid. Nothing chases a visitor off faster than broken links. There are several free online services that will periodically check your links.


Avoid using frames, since they make it difficult to bookmark individual pages on your web site and you want people to bookmark pages so they can come back.


Good Web design is a combination of common sense and good planning. Your site should be attractive and easy to use and most importantly provide the user with the information or services they want.

Web Page Optimization

Web Page Optimization

We all want to have the most attractive website that leaves a visitor wide-eyed and completely dazzled. Usually an extremely attractive website design involves lots of graphical elements, increasing the overall page size which causes the page to download slowly to the browser. This article will provide some useful tips on how to keep your website design attractive but still downloads quickly.

As the average internet bandwidth rate per computer is raising, more and more webmasters allow themselves to develop complex websites laden with heavy graphic elements. In extreme cases you can find websites that take as much as a few minutes to load their content in your browser. Of course the user will never wait that long for a website to load, and will move on to the next website in his search results.

So why are webmasters still developing slow loading bloated websites? Primarily due to a lack of knowledge of simple graphic optimization techniques that will allow them to maintain an attractive website while keeping the page size smaller.

How many of you are aware of the fact that a box with rounded corners can be achieved using CSS code only, without the need for any graphic image. Well it is possible! Before those of you familiar with CSS say that it cannot be done for every type of browser and a relatively high level of programming is required, I say that dealing with the most common mistakes web designers make regarding optimization can have simple solutions.

Never limit the web designer by placing any restrictions that impact the final outcome. You might make the claim that what a web designer can do with graphic software is impossible to implement by code. I disagree. When the design is finished and you are ready to slice it into small images to be used in the html code, your creativity is been tested. Everything you do at this stage will affect the total page size. If your design contains rounded shapes that overlap each other or areas with color gradients, then you must slice it carefully so the outcome is a small file size.

Let’s look at what efficient slicing means:
Do not make large slices that contain lots of different colors. Use a small number of slices where each slice contains a limited number of colors.
Do not make a large slice that contains the same graphic structure. Slice a small portion of it and duplicate it in your code. This is a very common mistake that webmasters/programmers make when dealing with gradient color background.
Do not use JPEG file format all the time. In some cases a GIF format will be much smaller in size. A rule of thumb – a slice with high number of colors will be smaller in size using the JPEG format rather than the GIF format, and the opposite is also true. Check each option separately. Every 1KB that you reduce from the image file size will eventually add up to a significant reduction in page size.
If you have text on a solid color background, do not slice it at all. Use code to create the background instead. Remember that you can define both the font style and background color of the area using CSS.

Advanced Techniques

Graphically optimizing a website is more than just knowing how to do image optimizations. There are some advanced techniques that required a high level of programming. CSS2 has much more to offer then CSS does. Although not all browsers have adopted this standard yet you should be ready for when they do. JavaScript also gives you a set of options to create some cool effects without needing to overload the page with Flash. Using limited tools like JavaScript compared to an advanced application like Flash to create the desired effects can be difficult. However think about the outcome. For a onetime effort you can differentiate your website from others. You will have an attractive professional looking website that loads quickly.

Back to the Future

As PDAs, smart mobile phones and mini laptops are used with wireless internet connections for internet browsing, publishing fast loading web pages will enhance the browsing experience not only for those using wide bandwidth connections but also will make the browsing experience user friendly (or may I say, bandwidth friendly) to the wireless clients.

For those who insist that web design optimization is not necessary because everyone will have high bandwidth connections eventually, I agree up to a point. However, the software companies are creating applications that use more bandwidth because they know it is available for them to use. Get used to writing well optimized web pages because this cat and mouse game will never end, and it is better to learn the rules of the game then it is to be bitten.