Mobile Web Design Trends For 2009

Advertisement

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.

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 Digg1, 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.

Digg2

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.

Netflix3

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.com4, mobile.washingtonpost.com5 and netflix.com/mobile/6. 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 Onion7. Like most news websites, TheOnion.com8 does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

The Onion9

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website10. 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.

Best Buy11

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 Trends9612 and More on Mobile Screen Size Trends13. 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.

Mobile Web Trends14

For more interesting details on the study and other helpful charts and graphs, please see both15 articles16 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 Toolbar17 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 browser18. 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 Toolbar19 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 Magazine unstyled and small

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 Web20, 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 Awesomeness21, a gallery of mobile websites. Those that are from Mobile Awesomeness are linked to the relevant pages there, many of which contain additional images.

New York Times22

New York Times23

Twitter24

Twitter25

CNN26

CNN27

popurls28

popurls29

Bank of America30

Bank of America31

Wal-Mart32

Wal-Mart33

LinkedIn34

LinkedIn35

Digg36

Digg37

Washington Post38

Washington Post39

Weather.com40

Weather.com41

MySpace42

MySpace43

Meebo44

Meebo45

Circuit City46

Circuit City47

Flickr48

Flickr49

Google50

Google51

Fandango52

Fandango53

Food Network54

Food Network55

The Onion56

The Onion57

BBC58

BBC59

deviantART60

deviantART61

MSN62

MSN63

Best Buy64

Best Buy65

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 66

W3C mobileOK67

Ready.mobi68

Ready.mobi69

Emulator70

Emulator71

Openwave Phone Simulator72

Openwave Phone Simulator73

Opera Mini Simulator74

Opera Mini Demo75

iPhoney76

iPhoney77

Blackberry Simulators78

Blackberry Simulators79

BrowserCam80

BrowserCam81

Related Resources and Articles

For more information on mobile Web design, please see the articles listed below. We’ve also listed some additional helpful resources.

References:

(al)

↑ Back to topShare on Twitter

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    Great Post. :)

    Hard to find info about this type of content.

    0
  2. 2

    Joe Taylor (JMT3)

    January 13, 2009 8:31 pm

    Nice Article. This will be more and more necessary to keep in mind as technology progresses.

    -Joe

    0
  3. 3

    Great post! Thanks

    0
  4. 4

    mobi will only grow larger as such devices as the iPhone, Android, etc gain in popularity … great info and write-up – thank you!

    0
  5. 6

    Great resource. Some of these mobile versions of sites look really good.

    0
  6. 7

    Wow! Very thorough. Thanks.

    0
  7. 8

    nice article

    thanks
    csshook.com

    0
  8. 9

    Great post once again. We have been brainstorming ideas and looking into building our first mobile website. This article will help greatly!

    0
  9. 10

    I gotta be honest, this is something I’m dreading, like a necessary evil, like IE6 has been!! But thanks for the great article to boost the positives and give me some encouragement.

    0
  10. 11

    Great thing in Latvia is 1188.lv info page (works when you browse it from iPhone)

    And another is Gadget portal http://www.boot.lv/iphone

    0
  11. 12

    Wow. Thanx a lot for this awesome article. I’m pretty interessted in designing for mobile deviced but didn’t do it so far. This article is gonna help me for sure.

    0
  12. 13

    Great resources and info! Hard to find it all together.

    0
  13. 14

    Gabriel Svennerberg

    January 14, 2009 12:01 am

    Impressive article indeed. Thanks for all references and examples!

    0
  14. 15

    The speed at which phone manufacturers are telecoms suppliers are pushing things, I believe that mobile-specific website will be a thing of the past within a few years. Full-featured mobile browsing that involves large screens or small screens with cunning user interface controls will spell an end to the need to create “versions” of your site to support mobile browsing.

    Of course, if you want to engage the mobile audience in the meantime, you’ll have to follow advice such as that contained above, which is excellent advice.

    0
  15. 16

    Another great resource for testing is the demo of Opera Mini, a java-based mobile browser, that I used to have installed on my cellphones: http://www.opera.com/mini/demo/

    0
  16. 17

    Thanks! Great article!

    0
  17. 18

    Adobe Dreamwaver (starting at CS2) also has an Mobile emulator support.

    0
  18. 19

    Reall great article! Good to see a focus on mobile web design. Check out wapple.net, they have a mobile site builder and the ability to mobilize your existing sites/apps and optimize to any phone. Check them out!

    0
  19. 20

    It’s the future! ;)

    0
  20. 21

    Great article. But i think sohnee is right. Seperate design for mobile phones is only temporary. So what i’m missing – as an iPhone user – is a button or link to switch to standard view. A ‘must have’ in my opinion.

    0
  21. 22

    This is perfect for a project I have coming up soon. Thanks for the info.

    0
  22. 23

    Smash on a mobile phone… But this is going to change soon I guess. For the better.

    0
  23. 24

    wow, superb article. you could have split this up into seperate articles for an increidble series on mobile web design. The examples are great.

    now how about a great dev article on stylesheet switching so WP sites can be mobilized.

    0
  24. 25

    Thanks! I’ve been looking for a resource like this for quite sometime now and you just gave it to us in one biggg package. You’re very generous, keep it up!

    0
  25. 26

    Great information. Thanks.

    Have you heard of the WPtouch WordPress plugin? It format’s your WordPress blog so it looks great on the iPhone. Here’s a post I wrote up on it:
    http://www.smartproductivity.com/iphone-enable-your-wordpress-blog

    0
  26. 27

    The iPhone rules this format. So develope for the i iPhone and don´t mind the rest. The rest don´t have a working browser technology.

    0
  27. 28

    Well… this is really amazing!! One of the best articles here in smashing magazine!

    0
  28. 29

    as usual, an amazing article !!

    0
  29. 30

    great overview of resources and approaches!

    0
  30. 31

    Great post. I didn’t see Apple’s Developing for the iPhone documentation. They break down developing for mobile users nicely too.

    The .mobi thing doesn’t surprise me. Usually (with a good hosting company) sub-domains are free. Why pay for a new domain extension?

    0
  31. 32

    Fantastic Post with some much needed info. Will be sharing this link with just about everyone I work with. Great work SM!

    0
  32. 33

    Thank you for an excellent post. I’ve been doing research on this topic, and this is – by far – the best compendium of current advice I’ve seen.

    0
  33. 34

    Wow, Stephen, that was like 6 posts in one. Lots of good content there.

    0
  34. 35

    You’re forgetting the new Geek Squad iphone/mobile site that was recently launched – http://m.geeksquad.com/. One of the best iphone sites I’ve seen so far.

    0
  35. 36

    Great post! I heard that Opera is the best browser for mobile testing. I’m still looking for some posts on new app development, let me know if you run into any.

    0
  36. 37

    Nice to see the attention focussed on mobile content; this really is the next big growth phase of the internet in my opinion. I’m concerned at the apparent bias away from dotmobi because I believe that this is harmful to many decision makers out there… as in ‘misleading’.
    I have developed a number of mobile sites now & used dotmobi for each of them.. there are some awesome names available at little cost (so far)… it’s all well & good to say ‘use m.site.com or site.com/mobile but the reality is that dotmobi offers NEW players to acquire killer domain names when there isn’t a really decent dotcom domain name to be had under $5,000 these days… if you have an existing site on an established domain name – use your existing domain name… but consider using the dotmobi (if you can still acquire it?) as a redirect to your mobile content, many companies are doing this now, in fact the last time I checked there were more companies using their dotmobi domain name as a redirect than as the host url… what matters is that typing in yoursite.mobi finds your mobile content and not someone elses!

    Apart from that, great article, lots of useful stuff… but don’t forget about the NEW generation of sites.. in some ways they are more important than todays existing sites as they are younger, fresher, newer! (& google loves to find dotmobi when mobile search is conducted! – Google is hungry, hungry, hungry for indexable mobile content!)

    If you want to hear about weather channel (mobile) you can’t do worse than watch the Weather channel mobile VP Louis Gump video (on YouTube)…. straight from the horses mouth.. it may surprise you! http://uk.youtube.com/watch?v=RxplyIDK6Wk

    0
  37. 38

    Wow this is a really really good guide. Thanks a bunch!

    0
  38. 39

    Art Studios Sri lanka

    January 14, 2009 9:44 am

    Wow Great content you really made my day

    0
  39. 40

    Just in time! My technical communication senior thesis is on how to design content for mobile computing devices. Sadly there has not be a lot of peer-reviewed work in TC journals recently concerning content delivered to mobile computing devices – I’ve had to depend on more mass market media, such as this article, for information.

    0
  40. 41

    This is the best article on mobile design I have ever seen. Fantastic article! You can tell A LOT of time and effort when into this. Really, wow great job! And it couldn’t have come at a better time!

    0
  41. 42

    Actually, many phone browsers don’t support external or even internal css that well. The unfortunate recommendation from many providers is use inline css and table layouts.

    0
  42. 43

    Good article that seems to bring together many of the major factors of designing for Mobile.

    I’ve found iphonetester.com to be a useful resource if you’re not willing to download the source code for the tester mentioned above.

    0
  43. 44

    The interesting thing I see from the examples given is that with only a couple exceptions, all of these mobile sites look like mid to late ’90s style websites. The Bank of America and Walmart mobile sites stand out from the others, with the consequence that they may sacrifice load time. From a purely design standpoint, I’d say at least in 2009, mobile = retro, stripped down, graphically light websites.

    0
  44. 45

    I’m so glad I’m a Smashing subscriber – great information!!

    0
  45. 46

    Amy Mischler, VP Identity & Brand Services dotMobi

    January 14, 2009 11:45 am

    Thanks for the article! However, I would like to challenge your point on how to choose the best domain name. It’s not in fact correct that .mobi is shrinking in popularity. On the contrary, we’ve had more than 1 million .mobi registrations since our launch just a bit more than 2 years ago. An increasing number of brands are choosing to use their .mobi as an important way to access their mobile content. And this is for a good reason – it improves discoverability of their mobile content. Having your .mobi activated means you’re more readily indexed by the search engines (all .mobi domains are in the zone file and your .com only gets one entry and has likely already been indexed for your desktop site). Furthermore, a .mobi name is concise and memorable and conveys to the user that it’s intended for mobile use. So for roughly $10 a year, why wouldn’t you want to maximize your chances of being found on the mobile web AND have a great domain name to use for your promotions (you don’t want a cumbersome url in your ads afterall)?!

    And just to further demonstrate the relevance of .mobi, I reviewed the sites you’ve spotlighted in your gallery. All of the following sites you mentioned currently have their .mobi activated:

    PopUrls.mobi
    Bank of America (BofA.mobi)
    Google.mobi
    CircuitCity.mobi
    BestBuy.mobi
    Weather.mobi
    Fandango.mobi
    FoodNetwork.mobi
    BBC.mobi
    FoxSports.mobi
    Netflix.mobi
    MSN.mobi
    That’s more than half of the sites you selected (and just a small sample of the big brands using their .mobi today). While some of them maybe redirected to other conventions (likely to be streamlined with their internal reporting), they know using their .mobi helps users find their content and further strengthens their brand with their mobile audience.

    We love seeing more mobile best practices so thanks for the great round up. We just thought some clarification on the domain name would be relevant for the discussion.
    Many thanks.
    Amy Mischler

    0
  46. 47

    Another great post Steven.

    0
  47. 48

    Great article guys! And i can’t wait to see more industry standards on mobile devices. At least on how they read XHTML.

    Please take a look at our work on mobile projects: http://www.webdesignformobiledevices.com

    Cheers,

    M

    0
  48. 49

    This is GREAT! :3

    0
  49. 50

    This article must have taken a long time for you to write. There is a lot of great information here, and the screen shots are helpful to illustrate your points. I will definitely be recommending your article to other mobile site owners and developers.

    I do, however, believe that you are doing your readers a disservice by steering them away from .mobi names. While it is true that many companies would like to keep their sites streamlined and use just their .com, when you add a subdomain to the front of it like m. or mobile. it will take search engines much longer to find the name, and it will also make it more difficult for mobile web surfers to type the names on their phone keyboards. Many companies are using .mobi in order to redirect traffic to their sites as a convenience to their customers. I’ve given several examples of how this works at http://mobienthusiast.mobi for major brands.

    Other than that, your article is spot on and will help your readers create sites that can be seen on smartphones and non-smartphones alike. Excellent job!

    0
  50. 51

    http://www.csshook.com

    January 14, 2009 9:52 pm

    Inspiring post with some great advice and ideas. Many thanks for posting.

    thanks
    csshook.com web2.0 designs gallery

    0
  51. 52

    Great article. Exactly what I was looking for whilst researching Mobile Web and design.

    0
  52. 53

    Fantastic article. I have passed it round my software development team as we don’t even consider this sort of thing for our external business applications..yet..

    – Lee

    0
  53. 54

    Good post – good way to start off the year thinking about mobile content, which should be on every web designer’s mind this year.

    A few days ago, I made a post with screen captures of 52 different retail/e-commerce websites to show how their homepage renders on the iPhone. Thought it may be a good companion to this article.

    0
  54. 55

    Great Article! It´s the Future!
    Good to see a focus on mobile web design and domain. Brazil are emerging in various initiatives of mobile sites, because the development of 3G network and the phenomenon Iphone. Here is the moment for mobile content related to relevance, search, maps and news

    0
  55. 56

    Nice article, and good to see Opera mentioned (I work for them). You missed one debugging tool; Opera Dragonfly, which allows you to remotely debug your phone from your desktop over a network or via USB http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/

    To the commentator who said “mobile development is a necessary evil like IE 6″ can have both. Microsoft is launching IE 6 for mobile in China this year. It’s based on IE 6 desktop (I ran some compatibility tests: http://www.brucelawson.co.uk/2008/ie-6-mobile-standards-compliance-tests/

    0
  56. 57

    Thanks! Great resource…Think I’m going to play around with mobile design.

    0
  57. 58

    Abdulsalam Alasaadi

    January 17, 2009 10:56 pm

    THIS IS GREAT. THANK YOU.

    0
  58. 59

    Hey there,
    nice in depth writ about my favoured technology!
    fantastic resource in terms of guidelines and best practices.
    Cheers
    Peter

    0
  59. 60

    I’m amazed no-one has mentioned the Modify Headers plug-in for Firefox as a way of emulating the headers sent by the mobile device. Some web sites/services (e.g. GMail) use this header information to determine whether to serve a full web page or small mobile page to the requesting device.
    For example, once Modify Headers is installed, create a new header of User-agent with a value of NokiaN95 and browse to http://www.gmail.com: It redirects you to the mobile version.

    0
  60. 61

    Hi all,

    Very nice article, and great ressources found. But one is still missing and I want to share it with you. Just heard about Netbiscuits a free web plattform for creating and publishing mobile content easily. Here the link

    Ciao, Martin

    0
  61. 62

    Hi Steven,
    Great article, indeed. I’d like to add some comments, especially regarding screen sizes, mobile Web design and testing.
    We all see that the mobile Web is happening today. There is no time to wait for soft- or hardware standards to establish. Even with the iPhone and Android in place, this won’t happen just because there are too many players in the game.
    Obviously, mobile developers can’t take all the different device form factors, operating systems, browsers, and additional network requirements into account on their own. But they could use a mobile Web development platform that does the job for them.
    This platform ideally should be aware of all device form factors, operating systems, browsers, and additional network requirements worldwide. It should allow the use of CSS for Website display on iPhone style devices and be capable to deliver the same website – degraded but still specifically optimized – also to low end phones. It should provide automatic rich media conversion and delivery to all phones enabled for video or audio. It would necessarily give you code access, SDKs and APIs, but also would provide plug & play tools to set up mobile websites easily…
    I hate to do a sales pitch here, but a platform like this is out there. And it provides a free of charge developer account for everyone who wants to use it for non-commercial purpose. Just go for a free trial and register for the Developer Edition afterwards.
    Well known brands like Yahoo! or eBay are running their mobile websites on this platform. And you can use the same technology to enable your own mobile Web projects, too.
    Give it a try, I’m looking forward to your feedback!
    Lars Hartkopf, Netbiscuits

    0
  62. 63

    Excelent article, but the term “semantic markup” is not correct. There aren’t “semantic markup” only “structural markup”. h1, h2,… are estructural tags.

    0
  63. 64

    This is really a great article!. The testing tools are awesome!.

    Thanks!

    0
  64. 65

    Really great article! Can I recommend that people also get accurate data and analytics such as http://www.bango.com/analytics

    You can also try their identifier services to enable much better targeting and improved site optimization.

    Adam

    0
  65. 66

    I have to admit, we have been more mobile-aware since the iPhone was launched.
    Prior to that, this type of article wouldn’t have existed!

    Oh, trends for cards and decks… ooh.. exciting… :)
    Nice article, thanks!

    0
  66. 67

    Great post and great job!!

    0
  67. 68

    Very good article for new web designers, it has lot of new points related to websites for mobile.

    0
  68. 69

    Interesting trend to follow as a print and web designer – many changes coming at us fast that require constant attention to keep abreast of the competition! Mobile media can be pitched to clients as an additional billable service that will a) make the agency money and b) brand the client as tech-savvy and hope to also grow THEIR business.

    0
  69. 70

    You can also mobify your site if you would like to automate many of these techniques. http://mobify.me/screencasts/

    0
  70. 71

    Hi, we (aktiq.fr) developped a PLUxml mobile plugin for website propulsed by Pluxml (pluxml.org). Every pluxml website with our plugin is mobile (android, iphone and soon palm pré) compliant by nature. You can theme the mobile version. Demo on aktiq.fr (try with an iPhone). Pluxml will let you develop blog, cms and classic website.

    0
  71. 72

    Hey this resource is really good…thanks a lot

    0
  72. 73

    it’s very interesting article, a lot of mobile info on one site!
    MiniWP

    0
  73. 74

    The best article i have seen so far on mobile *design and *development. [Both which i feel go hand in hand on any website or mobile site]

    These are challenges we need to face to better ourselves and increase our knowledge in this ever-changing environment! Not to mention use those skills as an advantage in this current market recession.

    Sir, one word which i felt you could have mentioned is “penetration”. Fact is that mobile penetration from around the world is higher than that of the web. Everyone has a mobile phone, in third world countries as well as first and second world nations.

    Thanks for a truly well thought out article. It has the potential to act as a “reference” to anyone interested in starting out with a new skill (and i urge them too!)

    0
  74. 75

    Thanks. This is the best intro site for mobile web development~

    0
  75. 76

    Hi all,

    This is a great resource for mobile development. The best I have seen for 2009 so far. I have been working on the development of mobile sites which also serve the desktop as well. Sometimes called the “one web”. Browser variations and lack of standards are definitely a problem. I have posted my latest code to the Google Code Project for anyone wishing to see what I have done so far. Please see Link for details. Any thoughts or recommendations as to project direction would be appreciated. To date, I have added WURFL device detection and Google Checkout code (JavaScript API) with a fallback to Google “BuyButtons” for mobile devices.

    0
  76. 77

    may be this mobile web can be include there, this mobile web was very similar like facebook mobile version, check this out

    0
  77. 78

    Great article.
    A lot of UK mobile site in one place – Mobi Links UK

    0
  78. 79

    Great article. Very timely, except the fact that Circuit City is closed and the URL doesn’t even work.

    0
  79. 80

    Nice useful Article….. Thx For Share…

    0
  80. 81

    Hi,
    Great article – so informative. I was wondering if you could point me to some resources. I work for a pharma ad agency and so fda & legal teams are not taking seo into consideration or the user experience. Most of the clients want a folder set up (domain.com/m ) needless to say the content is very similar to the desktop version – I was wondering about using css to deliver the rich media, bells and whistles ect to the desktop version and a stripped down version to the mobile user. My only obsticle is that if i use css to hide the elements that don’t load well – it still will load when a mobile device calls except it won’t display ….anyway to get around that? I am obviously new to this space but looking for any help I can get. – of course asap

    0
  81. 82

    Great website! I am thinking about adding a mobile version of mobielwedden.nl. Thanks!

    0
  82. 83

    Just stumbled upon this article, as I was doing some research on mobi site design. Thanks for the tips.

    I have not registered a .mobi before, but for me the problem is that your options are very limiting. As a South African user, my chances of getting a .co.za for my company domain is much better than getting the .com counterpart. Here, mobi sites are just catching on… ;) and seeing that we’re late to the party, the chance of getting your desired .mobi domain is very slim. If .mobi would later expand to include your country, for instance .mobi.za, I think it would become more popular. But for now I would have to agree that mobile sites on sub-domains are the better choice.

    0
  83. 84

    If contents is the king, than this article is the king of the useful content on UX issues in mobile phone design. I am a usability analyst, not too familiar with WAP design, and I needed to find very quickly information about designing for mobile devices. Thank you for this extremely informative article!

    0
  84. 85

    Great post, tips and info even 9 months later. I just touched on some main points from your post on mobile web design, Mobile Web Design: Clean & Mean . Thanks!

    0
  85. 86

    Very informative and thought provoking !!! Thanks for sharing this information.

    0
  86. 87

    I am web design student and wanted thanks for the great article. I hope you don’t mind me using your article as one of the 3 i have to us for my blog. Great Stuff Thanks !

    0
  87. 88

    Great article, very helpful for those wanting to put together a mobile website. One question I do have from a previous mobile development. Is there good mobile practice on the robots.txt file? Off hand, I wouldn’t want the mobile version of my website to be indexed. Any thoughts?

    0
  88. 89

    Nice article and links! I’ve found it hard to find mobile design articles and resources that don’t mostly feature application development. Thanks so much!

    0
  89. 90

    Awesome article! Just got my Moto Droid and I’m loving browsing the web on it. Its great to see so many websites starting to really pay attention to their mobile visitors (and also a bummer when mobile viewing isn’t considered). Keep up the good work Smashing!

    0
  90. 91

    Very useful tips for mobile web designers.

    0
  91. 92

    well article is well written. I am a web developer for mobile application platform.
    It really help me in development.
    Even i saw a article in wikipedia about the challenges for mobile apps developer if any body interested please follow the link.
    http://en.wikipedia.org/wiki/Mitr_-_mobile_application_platform#Challenges_for_Mobile_application_developers

    0
  92. 93

    Is there a compilation for Mobile Web Trends for 2010? This article really helped! Thank you!

    0
  93. 94

    This article is filled with useful information. However, I would like some info concerning the trends of touchscreen phones vs scroll wheel phones. None of this is addressed in this article.

    Additionally, when a mobile site is created for both a touchscreen phone and scroll wheel phone, do designers typically create one version of the website that encompasses the interface challenges of both types of phones or are two separate mobile websites created. In other words, should I design a mobile website for both an iphone and a blackberry that is non-touch screen? What are the best practices here supposing your target audience uses both types of devices fairly equally?

    0
  94. 95

    Roughly how much should a (simple) mobile web page cost? I’m thinking of 2 pages, a home page and a registration page to capture user data. Everytime I ask a design firm they want to prepare a fully blown proposal and pitch me on all kinds of services. I’m just curious how affordable – or not – mobile sites are. Thanks!

    0
  95. 96

    This is a really interesting post. Thanks for the job, and thank to Smahmagazine stuff for having so much passion to share their knowladgement. It has been very useful!

    Thanks for all!

    0
  96. 97

    Christopher G.S. Johnson

    March 25, 2010 9:55 am

    Great article! Thanks for all of the information.

    0
  97. 98

    Nice Article,

    Good for newly started developers/designers.

    0
  98. 99

    Nice article. Would like to add some reference to todaypda.com and molymobile.com
    I think these kinda website will be big in the year 2010 because streaming is getting bigger and bigger.

    0
  99. 100

    Great article, Thank you!

    You might also be interested in source of inspiration I found recently http://www.mobilewebshowcase.com

    0
    • 101

      Mobile Website Builder

      June 5, 2010 8:35 am

      Tom,

      You’re the 3rd or 4th guy I’ve seen that has mentioned this show case of .mobi sites. The M&S sites is by far, one of the better sites and very robust. By chance do you know what tools-set they used to build this site?

      0
  100. 102

    Mobile Website Builder

    June 5, 2010 8:32 am

    One of the more important aspects of “going mobile” is to make sure your mobile site is found, crawled and indexed by Google, Bing and Yahoo! Small Business Owners will want to work with Mobile Website Builders who build mobile websites using best-of-class mobile development platform to ensure their mobile site gets a good Google ranking and helps them get found locally by the fast growing mobile audience.

    0
  101. 103

    hi, thank for saving of our lives.

    mobile

    0
  102. 104

    Is there a 2010 article yet?

    0
  103. 105

    Thanks for the information shared here. that was an interesting and informative. I had a good experience by participating in the Adobe Summit in 2009 which features the latest developments on the Adobe Flash Platform that is of utmost importance to both developers, as well as designers.. I learnt lot of new technologies in Adobe. And I am planning to attend 2010 edition as well. I found the information about the conference from adobesummit.com

    0
  104. 106

    Great Article… Can anyone tell me more organizations like Netbiscuits which provide a platform for mobile website creation. Please email me at batraankur46 @yahoo.com

    Thanks

    0
  105. 107

    Great article. Thank you for sharing.

    I just wanted to share our latest beta release: Our Automated Web-to-Mobile Technology allows you to convert your blog to a mobile compatible version “on-the-fly”. Your converted blog will reflect any changes made to your website or blog instantly with our continuous synchronization technology on WebtoSmartphone.com.

    0
  106. 108

    A-1 Mobile Web Design

    September 20, 2010 7:39 pm

    This article is an answer to prayer. I’ve been trying to succinctly explain this to my clients, so I will share this article with them. Thanks!

    0
  107. 109

    I rate this article a 10 (out of 10) because it is more of a reference resource than a plain article. Truly excellent job!

    I’d like to add this iPhone simulator resource to the mix, I use it at A-1 Mobile Web Design, it can be found at Testiphone iPhone Simulator.

    I hope this contribution will be accepted. Thanks.

    0
  108. 110

    The biggest challange on mobile web design is testing. Definitely.

    Thanks,

    Manuel

    0
  109. 111

    Pablo Echeverri - Graphic Design

    October 28, 2010 11:35 am

    Very complete post.

    I know of a page with some more designs:

    http://www.mobilizeme.com/gallery

    There is also a company called cantoni that has a sort of directory.
    Envato also launched a mobile tuts website. Very helpful for designers and programmers.

    0
  110. 112

    Several of the points related with this blog post are generally beneficial nonetheless had me personally wanting to know, did they critically imply that? 1 point I have acquired to say is your writing experience are excellent and I will be returning back for any brand-new blog publish you arrive up with, you may probably possess a brand-new supporter. I book marked your blog for reference.

    0
  111. 113

    Very good post-
    With lots of information and links. I got a real good idea just what works (and looks) best on cell phones. The “examples” really helped me.

    I’m just leaning about the mobile market and wondered about my own sites and what I should do to them. I had heard that a simple WP plugin was all that’s needed, and was looking for info on that, but didn’t seem to find that here. Maybe a future post???

    0
  112. 114

    Great article, I like the screenshots of the sites.

    If you are looking for a list of high quality websites that are optimized for mobile devices (Iphone, Ipod touch, Blackberry, etc) please take a look at my new mobile sites directory.

    0
  113. 115

    Helpful article, but I could’ve done without the nasty stuff from “the Onion”

    0
  114. 116

    Out of my examination, shopping for electronic products online may be easily expensive, although there are some tips that you can use to acquire the best discounts. There are continually ways to locate discount promotions that could help make one to buy the best consumer electronics products at the smallest prices. Good blog post.

    0
  115. 117

    It’s true that the simplicity of these mobile 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 some web developers who personally create mobile atom sites for their websites to make it more compatible for mobile visitors.

    Post Graduate Diploma in Education

    0
  116. 118

    Straightforward and well crafted, ty for the post.

    0
  117. 119

    Thanks for the excellent article..

    I got a site which contains more of mobile designs collection and gallery..

    http://www.mobilewebsitesubmit.com

    Contains design and mobile screenshots

    -sara

    0
  118. 120

    Great resource for mobile designers, thank you for the information. Being cyber Monday, it will be interesting to see how mobile devices are used today.

    Paul -

    0
  119. 121

    Simplicity and white background really attract me to a certain website. Lack of images could turn me off except if it will make the download of the website faster then I would not mind visiting that kind of website. I am glad that Walmart was included in the list of websites that you have indicated. Digg is also improved their website design but I hope more features will be accessible in the near future.

    0
  120. 122

    A phone is now the best way to reach customers and businesses. In this world of fast, fast and faster, the economy can only react to what’s put before it. Most business are closed minded to only having a adnormal website (laptop and desk top) they are not made for the flexible life of smart devices…Now instead of spending $30-150,000 just to convert your business to a Mobile Website, InnovativePlatforms.net does it for just a low fee, while other businesses are closing or crashed before they can get started this company is giving away Business Opportunities.

    0
  121. 123

    Nice article. Pleasure reading it.
    blustandard.com/

    0

↑ Back to top