Mobile Web design 2009

Web designers know that the industry involves plenty of change, and
continuous adaption and development of skills is required in order to
stay up to date. In the past few years, one of the biggest areas of
change has been the amount of Internet users who are accessing websites via phones and mobile devices.
As a result, Web designers have a growing need to be educated in this
area and ready to design websites that accommodate this audience.

Because
designing websites for mobile devices brings some unique situations and
challenges into play, the subject requires a strategic approach from
the designer and developer. In this article, we’ll look at the subject
as a whole, including current trends, challenges, tips and a showcase
of mobile websites. Plenty of helpful resources and articles are also
linked to throughout the post, so if you’re interested in learning more
about designing for mobiles, you should have plenty of information at
your fingertips.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Mobile Web Design Trends for 2009

1. Simple options

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg,
for example, contains only 10 simple headlines and links, a log-in link
and a few very basic navigation options. When it comes to mobile
websites, simplicity is key. Because of the lack of
space on the screen and Internet connections that are often slower, it’s
important for visitors to have access to what is most crucial, and as little else as possible.

In
an age of crowded pages, the simplicity of mobile websites can be
refreshing. What’s important is there, and what is most likely excess
gets cut out. The simple options that a user has can make a mobile
website much more usable than it would be otherwise, as long as the
options allow for actions the visitor wants to take.

2. White space

White
space is an important part of any design, and it’s something that’s
usually a challenge in Web design because there is a desire to get as
much as possible in front of the visitor. White space becomes even more
of a necessity in mobile design because the typical screen size is so
much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As
you browse through the websites shown in the gallery further down in
this article or in real-world scenarios on your own mobile device,
you’ll find that many websites include ample white space, especially the
ones that are helpful and easy to use.

3. Lack of images

As
high-speed Internet connections have become more common in recent
years, designers have been able to take more liberties with things like
bandwidth-hogging video and images. The average visitor on a desktop or
laptop wants to see a visually engaging website, and, as a result,
images are heavily used. However, when it comes to mobile design,
excessive use of images often does more harm than good.

There is a
great variety of speeds of mobile Internet connections and of pricing
plans for access. Visitors are more likely to be slowed down
or concerned with use of their resources when they’re on a mobile.
Additionally, the size of the screens can make many images difficult to
see and content harder to read. For these reasons, it’s very common to
see minimal use of images in mobile Web design.

As
a growing number of mobile users move to smart phones with larger
screens and better connection speeds, more opportunity exists to use
images. However, because there is still a large percentage of users who
are not using these devices, many mobile websites still avoid images
when possible.

4. Sub-domains instead of .mobi or separate domains

When
the .mobi top-level domain (TLD) first became available, a lot of buzz
surrounded the news. While some websites use .mobi for mobile versions
of their websites, it is currently more common to see companies use a sub-domain
or a separate folder on their primary domain. There are multiple issues
a company must consider when making this decision, but one of the major
benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll
commonly see mobile versions of websites at such addresses as
mobile.example.com, m.example.com, example.com/mobile, example.com/m and
other ones along these lines. Some actual examples are m.twitter.com, mobile.washingtonpost.com and netflix.com/mobile/.
Of course, there are exceptions to this trend, but as you look at the
mobile versions of major websites, you will see more sub-domains than
.mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor.
Of course, all websites should be user-focused, but because most
websites are run commercially for business purposes, there are often
elements that aren’t necessarily important to visitors, such as banner
ads. While advertisements have largely become an accepted part of the
Internet, most mobile websites are ad-free. The content available on a
mobile website is typically of the highest priority to the average
mobile visitor, not the company, although in the end the company
benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion. Like most news websites, TheOnion.com does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website.
The only options here are for a product search and store locator (a
phone number is also listed to allow customers to place orders). The
logic here is that visitors who are accessing the website on a mobile
device are probably on the go and probably have something very specific
in mind. Maybe they’re looking for a store close to their current
location to buy a product. It’s less likely that a mobile visitor would
be interested in simply browsing the website, so the most important
options for this visitor are presented, with nothing else to get in the
way.

Common Challenges in Designing for Mobiles

Of
course, Web design for mobile devices brings its own unique set of
challenges that designers must overcome to create a successful mobile
website. If you’ve attempted to design for mobiles, these were probably
some of your most significant challenges.

1. Variety of screen sizes

Although
Web designers are used to dealing with varying screen sizes and the
resulting issues, mobile design presents this challenge in a bit of a
different way than dealing with different-sized desktop monitors. Most
designers are comfortable with the challenges that arise from various
screen resolutions on desktop monitors, but if you haven’t worked with
mobile design before, it can be something yet more complicated that you
need to overcome.

Because mobile technology is always changing, screen sizes are changing,
too. Fortunately for designers, modern mobile devices typically have
bigger screens and higher resolutions than those of a few years ago, but
of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. The results of the study behind these articles show that 240 x 320
(a.k.a. QVGA) should be the standard for mobile development. Many newer
mobiles and smart phones have larger screens, but smaller ones are
largely a thing of the past.

The graph below shows the findings of
the report, which is close to a year old at this point. With the rise
in popularity of the iPhone and its competitors, the most recent numbers
most likely favor larger screens even more.

For more interesting details on the study and other helpful charts and graphs, please see both articles at Sender 11.

2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation
of dealing with a new aspect of design. If you haven’t considered
mobile browsers and visitors in your previous design work, it’s most
likely not something you feel comfortable doing without some research.
Because mobile browsers behave somewhat differently than desktop
browsers and because the environment of its users is not the same, the
designer needs to gain some understanding and familiarity. Through the
information and resources presented in this article, you can easily get
started with a general understanding of the mobile Web, if you don’t
already have experience.

3. Rapid change

Like any other
technology, rapid change is a constant. Of course, Web designers need to
stay on top of the industry in general, and the mobile Web is no
different. As technology and trends continue to change, the mobile Web
will evolve accordingly. The challenge of change isn’t really anything
new to designers; the mobile Web just presents another area in which
designers need to stay up to date.

4. Testing challenges

One
of the most significant challenges in designing for mobiles is the wide
variety of phones in use. While designing for desktops brings its own
testing challenges, with its various browsers and screen resolutions,
there are more dependable ways of testing these items at the moment. On
the mobile Web, however, many of your visitors will likely be accessing
your website in an environment that you were not specifically able to test.

There
are, of course, some things you can do so that a mobile website is
tested as well as possible. To start with, the simplicity of mobile
websites in a way makes the testing process easier because there is less
that can go wrong. With a careful design and some well-planned testing,
it’s possible to be fairly certain that a website will be displayed
properly and, more importantly, usable on the vast majority of mobile
devices.

At the end of this article, you’ll find links to a number
of helpful resources for testing, but we’d like to point out a few here
as well. First, the Web Developer Toolbar
has some very useful features for testing a website for mobile users.
Because CSS and images may not be enabled when a mobile visitor is on
your website, you can use the toolbar to disable both and see how the
website will appear. While this does not exactly replicate the
experience of visiting the website in a mobile browser, it can help
identify potential problems in the way content and navigation is
displayed.

Another helpful testing resource is the Opera browser.
In the Opera toolbar, go to “View” and select “Small Screen.” This will
display the website in a very narrow window, similar to what would be
used on a mobile device. Additionally, you can use the Opera WebDev Toolbar
to view an unstyled page by clicking on “Display.” By viewing the page
in the small screen with CSS turned off, you can get an idea of how
mobile visitors may experience the website. The screenshot below shows
the Smashing Magazine front page unstyled in the small window.

Smashing in Mobile Web Design Trends For 2009

5. Deciding on what is essential

If
websites are to contain only what is most essential, the website owner
or designer will have to determine accurately what content is most important.
This may seem pretty simple, but taking a website that’s loaded with
content, images and maybe even video, and weeding it down to just the
essentials can be quite a challenge. Another aspect to this issue that
must be considered is the status of the average mobile visitor.
What are they doing? Why are they accessing the website at that time?
What are they likely and unlikely to have any interest in? Keep in mind
that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now
that we’ve looked at some of the current trends and challenges in
designing for mobiles, let’s examine some specific issues that should be
considered by designers during the process.

1. Clean, semantic markup
The best thing you can do to lay a solid foundation
for a usable mobile website is to incorporate clean and semantic
markup. What you may be able to get away with on a traditional website
may cause significant problems on a mobile website. Clean markup will
help ensure that the browser is capable of properly displaying the
website, and it will help give visitors a pleasant experience, with no
unnecessary difficulties.

2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of
content and presentation. Mobile visitors are much more likely than
desktop visitors to see a website with images and CSS disabled. The most
important thing for these visitors is to be able to access the content
and links: presentation is secondary. A website that
uses clean, valid markup, with CSS to separate the presentation from the
content, is off to a great start as a mobile website.

3. Alt tags
Because it’s likely that some visitors will not be able to see images
on the website (or will choose to disable them), alt tags are extremely
important for usability purposes. Of course, alt tags should be used
anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields
Like alt tags, form field labels help make a website much more usable
for mobile visitors. Imagine trying to use a form without knowing what
is supposed to go where. Simple details like alt tags and form field
labels can make a big difference this way.

5. Use of headings
With inconsistent and often limited styling of text on mobile browsers,
headings become more significant. Mobile browsers are less likely to
style text exactly how you would like it to be, but h1, h2, h3 and other
such tags generally help make certain text stand out and build the
structure of the page from a visitor’s perspective.

6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats
for layout, it’s unlikely the website will look good on a small screen.
Usually the website will be more usable and look less awkward without
floats altogether and with content simply stacked up.

7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and
padding than your main website has for traditional visitors. Of course,
this depends partly on how much of a margin and padding your website
currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page.
This is helpful on mobile websites as well, but generally, mobile
navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or
laptop monitors, make sure the background and text colors provide
adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web,
by Brian Suda, that provides an excellent point of reference on the
subject. In the article, Brian breaks down the process of designing for
mobiles in seven understandable and digestible steps. The article is
useful enough to restate the main points here.

1. Don’t Mix Up Your Markup

For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones

We
must cater not only to different screen sizes and resolutions, but to
different shapes. From short and long rectangles to tall and skinny ones
to perfect squares, the mobile world contains a rich tapestry of
variation that almost makes you want to pull your hair out!

3. Target the Right Customers

Traditional
website customers are most likely sitting at a desk facing a large
monitor that has a decent resolution. Visitors who are browsing your
mobile website are unlikely to be in the same circumstances. They may be
waiting in line, riding on the train or bus, running to the departure
gate or lost in an unfamiliar town late at night and trying to get
somewhere.

4. Publish the Bare Minimum

While
the concept of having only one website, and simply styling it
differently depending on the medium the visitor is using, is popular
with many standardistas, a separate mobile website is required to
deliver an optimized experience for mobile users.

5. Choose a Great Domain Name

When
deciding on a domain name for a mobile website, the colleagues and
companies I’ve worked with have always used a sub-domain. Creating a
sub-domain is the easiest of the options to set up (you already own the
domain), it’s the cheapest option (there’s no need to register the
.mobi), and it means you avoid having to spend hours tweaking the
server (and potentially messing up normal traffic).

6. Validate Your Markup

Mobile
browsers are much less forgiving than desktop browsers. A browser
running on a mobile device generally doesn’t have the luxury of a 2 GHz
processor and 100 MB of disk space. Therefore, you must check, validate
and recheck your markup, time and time again.

7. Test, Test, TEST!

Testing
your website with a Web browser on a desktop computer can get you only
so far in terms of simulating the mobile experience. There are many
elements of mobile device usage that can’t be replicated accurately in
this way.

Brian’s article is an excellent starting
point for those who are new to designing for mobile devices, and it’s
also a great resource to have handy down the road when you want to check
your work to make sure you’re doing things the right way.

Mobile Gallery

After all this talk of mobile websites, let’s take a look at some screenshots of examples. Many of these screenshots are from Mobile Awesomeness,
a gallery of mobile websites. Those that are from Mobile Awesomeness
are linked to the relevant pages there, many of which contain additional
images.

Testing Tools for Mobile Web Design

As
with any other type of Web design, testing is a big part of the
process. However, testing websites for mobile devices brings additional
challenges, and fortunately, there are some tools available that were
created especially for these purposes.

W3C mobileOK Checker