StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Creating A Mobile Version of Your Site

Despite the obvious explosion of the mobile market some website owners feel like very few, if any users will decide to browse their site using a mobile device. Well it is time to wake up and realize that there never has been a better time to ensure your site is mobile friendly. A quick look at some stats will show you how important this has become.

  • According to Apple mobile web usage increased over 140% in 2009
  • Experts predict that there will be 1.1 Billion smart phones in use by 2013
  • New forms of mobile devices are entering the market every month (iPad, eBook readers, PDA’s, etc...)

Mobile Web Design

Designing for mobile devices is tricky. There are countless different devices capable of browsing the web, all with different technological capabilities, browser software, resolution and screen sizes. Because of this we have to give up some control and sophistication and accept that our primary goal is to make the sites simple and usable not pretty and exciting.

Screen Size & Resolution

Different phones and operating systems run at different resolutions. An article published by PhoneArea.com recorded that half of all the smartphone traffic worldwide was done on an iPhone. Android based phones had grown to 11%, Blackberry had a declining 7% and Symbian OS (Nokia) accounted for 25% but was also declining.

Much like in traditional web design you typically want to design for the most common denominator. These days on the web you are looking to design a site with in the 1024 x 768 window. When it comes to mobile over 75% of the phones display a screen resolution of 240x320 pixels or more.

Based on this you can take two approaches. One is to try and stay with in this window to ensure an optimal experience for the largest possible audience. Alternatively you could make your mobile site fluid (meaning that the design scales with the window) and let the browser figure out how wide it should be.

Browser Capabilities

Another common mobile design challenge is the differing technological support of phones. Currently very few devices support the flash platform and almost none of them do a great job working with javascript either. For these reasons it makes sense to try and keep your sites as simple as possible. Sticking to clean XHTML and CSS is the best way to go.

Even if the browsers don’t support CSS (which some don’t) they can still render HTML and the site will be usable.

Common Browsers

  • Mobile Safari (iPhone, iPad, iPod Touch)
  • Mobile Chrome / Android Browser (Android)
  • Opera Moble (Smartphone compatible)
  • Blackberry Browser (Blackberry’s with varying levels of support)

These browser behave a lot like full browsers, often only missing a few capabilities such as Flash or Javascript. However this doesn’t mean that you should be aware of the users experience if they are using them. Keep in mind that on mobile devices you are not going to be able to take advantage of OnClick or :hover capabilities, so even if the users is accessing your site on an iPad you will still want to make sure the site is usable.

  • Constrained Browsers
  • Opera Mini
  • Blackberry Browser (depending on the generation of the Blackberry)

These browsers try and simplify the website as much as possible automatically before displaying it to the user. This can be good and bad. It might mean that you have less to worry about when a user accesses your site, however it also means you have less control. Being that it is automated you can be sure that it is not going to present the perfect solution.

Text Browsers

Many mobile browsers are incapable of rendering graphics or complex layouts. Again there are varying levels of capabilities with text based browsers. Some of them have basic CSS support where others strip out all styling and can only render HTML or WAP-HTML.

Planning & Approach

There are many different ways you can go about making your site mobile friendly. Each of them can work perfectly well and which one you should use is entirely dependent on the situation. The best way to approach this is to understand the pros and cons of each technique and then develop a plan as to which avenue best fits your use case.

1.Altering the Design but Keeping the Content The Same

The first and most obvious method is to alter how the design looks to better fit a mobile browser while keeping the content and site structure entirely the same. Typically people will simplify the navigation, remove unnecessary design elements and shrink the overall design to better fit in a smaller window.

This not only will save the users bandwidth (which many pay for by the megabyte), but it will also make accessing the content much easier. This is of course what they are on your site for in the first place, not to see your cool looking design in super small scale.

Example Sites

2.Tweaking Both Design & Content

While altering the design will make your site mobile “friendly” it ignores a very important fact about mobile web users. Typically people accessing your site on a mobile device are doing so for very different reasons than they would if they were at a desktop.

Think of the common situation, a user needs to find some information, is unable to access a computer and doesn’t feel that it is worth waiting. While what type of information they are looking for is going to change depending on the situation it wouldn’t take too much insight to come up with a clear plan of how you can alter both the design and what content the site shows to better fit the users needs.

A common example might be IMDB.com (internet movie database), if someone is looking up the site on their mobile device chances are they really want to look up some important details. The chance that they care about the news desk, what is coming out on DVD etc... is pretty slim.

IMDB.com would benefit from a “search centric” mobile version of their homepage.

3.Completely Different Mobile Site

Sometimes users will be accessing your site from a mobile device so much, or their needs will be so different than a traditional site that it makes sense to develop a completely new version of your site for mobile users. This frees you from all constraints and allows you to create the most optimal mobile experience possible.

Sites such as Twitter and Facebook are both good examples. Both sites have a high frequency of mobile users and the goals and actions of the mobile users are going to be significantly different than computer users.

This approach isn’t limited to large scale social networks either. Even small businesses can benefit from this approach. Consider any local service provider, if someone is looking at their site from a mobile phone chances are they are looking for contact information. To provide them with a mobile specific site that has phone, fax and directions would greatly increase a users experience. You can always give them the option to navigate to the full site afterward.

Now it is important that if you do have a mobile specific version of your site, you want to give users the option to switch back to a standard version of the sit. Especially if you are automatically redirecting mobile browsers to said version.

Mobile Usability

Even “usable” version of mobile browsers such as Safari can be tricky and difficult to use. Let’s face it, there is a lot working against a mobile web user. The screen is small, the keys are small, the software is still in it’s infancy...

Doing everything you can to make your mobile site as usable as possible is what is going to really bring a notable return on your investment. There are some key ways to make your mobile site usable and the most effective ones are:

  1. Simplifying your site
  2. Have a high quality search function
  3. Make the navigation extremely accessible

1. Simplify

The first step to any mobile site should be simplifying. I recommend a simple audit of the entire site, using the following method:

  1. Determine which user tasks are likely to apply to mobile
  2. Remove any content that doesn’t apply to your list of tasks
  3. Remove any graphics or styling that doesn’t assist in the tasks or branding
  4. Turn complex multi-column layouts into one simple column

2. Search

Having a high quality search function is another great way to maximize usability. It is difficult to click, and navigate through multiple pages. Rather than making a user hunt around, you can simply let them search for what they are looking for.

3. Navigation

Many mobile web designers will place the navigation as the very first thing on the top of the page. This way it can’t be missed and is one of the easiest elements to access. Remember unless you have a one page mobile specific site chances are the user is not going to find what they are looking for on the first page.

Methods of Making Mobile Specific Sites

Anyone can build a mobile version of their site, but unless you find some way to get mobile users to it you really haven’t accomplished much. Not unlike everything else in web design there is more than one way to skin a cat.

1. Mobile Specific Styling

If you are simply changing the design and hiding unnecessary content then a mobile style sheet might be the best approach. A mobile style sheet is like any other style sheet, only it is only activated when a browser acknowledges that it is a mobile device.

The sheet can then completely change the layout, hide unnecessary elements (through display:none) and improve the overall experience for the user.

There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.

Creating a Handheld Media Stylesheets

The first technique simply requires you add a media=”handheld” attribute to your stylesheet mark-up, for example:

You can then add any amount of simplification or mobile styling into that mobile.css stylesheet, perhaps changing the width, hiding a third column or moving the navigation to the top of the page.


    #pageWidth { width: auto; }
    #columnThree { display: none; }
    #mainNavigation { position: absolute; top: 0; left: 0; }

The @media Include

If you are including a mobile specific styling through an existing stylesheet you would use the following code:


     @media handheld { /* rules for handheld devices */ }

OR


     @import "handheld.css" handheld;

When to Use Which Method

It seems like one could use either technique depending on their personal preference. However you should know that some mobile devices will not load a stylesheet that is defined as media=”handheld” but will still pay attention to the @media handheld { } styling.

These are often fully capable browsers such as Opera Mobile / Mini, Safari, etc... So if you are looking to optimize for these devices through a stylesheet it is important to know that doing a media=”handheld” HTML link will not work.

2. Mobile Device Detection

A more sophisticated method would be to detect the user agent of the browser and decide send mobile users to a specific version of the site that is better suited towards their set of tasks and specific design needs.

The user agent in reference to the web is simply the software that someone is using to browse the site. So you can use a script that identifies mobile user agents and forward them to a new address accordingly.

The benefit here is that you can completely customize the user experience for mobile specific situations. Not only in layout (which can be done through a stylesheet) but also in content and information architecture.

The trick is that you need to ensure that your method of detecting and redirecting different user agents is up to date, if a new browser enters the market it might be ignored by your out dated script all together.

Luckily there are some great plug-ins and existing scripts available to do this for you. If you are interested in taking this approach I recommend you look into one of the following resources:

Mobile Detection Scripts

3. Mobile Specific URLS

For heavy trafficked mobile sites it can make sense to build a site specifically around mobile use. While you may also want to employ the user agent detection method above, it often makes sense to promote the mobile site separately to encourage more mobile users to try accessing the site.

Common examples of this would be Facebook, Twitter and Bank of America. All three sites actively promoted their mobile specific site as a way to encourage users to try using the site through their mobile device. All three sites also employe the detect and forward concept illustrated earlier.

The Bottom Line

There are so many different variables in mobile web design that you are unlikely to find a perfect solution for everyone. Because of this you will end up making the best design choices by really understanding your target audience.

The better you understand what technology they are using, what content they want and when they are trying to access it you can tailor the mobile experience to that situation. If you don’t understand these key points you are just guessing and could even be making the experience worse.

Ultimately the growth of the mobile market is so dramatic that you should be thinking about (if not implementing) a mobile web strategy right now.

Leave a comment on Stylized Web Have some feedback? Leave a comment

83 Comments So Far

  1. its nice thx

  2. Someone necessarily help to make seriously posts I would state. This is the first time I frequented your website page and thus far? I surprised with the analysis you made to create this particular submit extraordinary. Great activity!

  3. Hello, I would be very thankful for a few advice. Here is my question about “2. Mobile Device Detection”:
    - you said:”script that identifies mobile user agents and forward them to a new address accordingly”
    Can you please tell me does that mean I have to make a new URL – new mobi domain with it’s wordpress theme?
    Can I redirect users inside the same “domain and current wordpress theme” just another template page?
    The one that has it’s stylesheet designed for mobile users.
    For example, I have an old wordpress site, and when users come to homepage from mobile device and script detect them, they simply go to homepage.com/mobile-homepage for example…
    I don’t have much experience with mobile optimization so any help would be appreciated.
    This site is not new, it was made a bit messy from a start(not by me :-)). I made redesign changes they asked for in their current theme, and now they would like to make a mobile version.
    Is it possible to do the redirection in the way not to duplicate wordpress installation, and not to have another domain – to keep the current url-s?

  4. Hi, great explanation but I have a question you use Facebook and witter as good examples as they most certainly are but I also have a social network of my own which is similar to the Facebook design and I want to make a mobile version of my site that would also be similar to that of Facebook, my question is can it be done and how and can you guide me somehow to get that accomplished?

  5. I have to say this post was certainly informative and contains useful content for enthusiastic visitors. I have certainly picked up anything new from right here.

  6. I just working on the mobile version of site that I designed, some of the information are really helpful. Thank you!

  7. aSiii.. I frequented your website page and thus far? like chat rooms. Dentris gel gör..

  8. I personally Believe that blog post, “Creating A Mobile Version of Your Site | StylizedWeb.
    com” was indeed good! I actuallycouldn’t see eye to eye with you more! At last appears like I reallylocated a blogging site truly worth browsing. Regards, Virgil

  9. Pingback: Risorse, tutorial, tool, framework e Wordpress per Mobile | Flashmotus

  10. Golden, this is just the ticket. Thanks for posting this. I am currently working on a project where I need to create a mobile friendly version of the site.

  11. By Michel Mohaupt posted on April 8, 2013 at 6:05 pm

    The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you’re reading is “thesitewizard.com”. To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It’s just a name. It’s sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name.*

    Remember to go look at our favorite online site
    <",http://www.caramoan.co/caramoan-tour-package/

  12. By Octavia Weimann posted on April 12, 2013 at 6:18 am

    building websites is easy if you have access to HTML WYSIWIG editors.-

    My own blog site
    <="http://www.caramoan.ph/caramoan-beach-resort/

  13. You can certainly see your expertise in the work you write. The sector hopes for more passionate writers such as you who are not afraid to say how they believe. All the time follow your heart.

  14. You’re is a excellent web marketer. Your website loading swiftness is actually remarkable. It seems that you’re undertaking almost any unique key. In addition, The belongings are generally masterwork. you may have completed an excellent job on this topic!

  15. We stumbled over here coming from a different page and
    thought I might check things out. I like what I see so now i am following you.
    Look forward to checking out your web page repeatedly.

  16. For example, in some countries, Ukash card can be used as a credit card number in our country consists of only the card. Therefore, Ukash is used by many countries vary in terms of usage. As used in our country, which is much more secure Ukash card is a card security, and facilitate the use of the biggest advantage.
    http://ucuzukash.haberegel.info/

  17. canlı bedava ligtv, canli mac izle, canli yayin mac, d-smart izle, justin tv, justin tv izle, lig tv 2, ligtv, ligtv canli, ligtv izle, mac izle, p2p, trt spor izle, freedocast, eurosport izle bedava
    http://canlimacizlelinkler.blogspot.com/

  18. My brother recommended I might like this website. He was totally right.
    This post actually made my day. You cann’t
    imagine simply how much time I had spent for this info!
    Thanks!

  19. Hello There. I discovered your blog the usage of msn.
    This is an extremely smartly written article. I will
    be sure to bookmark it and return to learn extra of your helpful information.
    Thank you for the post. I will definitely return.

  20. Greate article. Keep writing such kind of info on your blog.
    Im really impressed by it.
    Hey there, You have done a great job. I’ll definitely digg
    it and in my view suggest to my friends. I’m sure they’ll be benefited from this site.

  21. Pleаze let me know if you’re looking for a writer foг your sіte.
    You have some really gοod aгticles anԁ I think I would be
    a good asset. If you eveг want tо take some of the
    load off, I’d absolutely love too write soje content for yоuг blog
    in exchange fοr a link back to mine. Please send mee an emаil if inteгested.
    Thank you!

    my web-site Pure Yacon Syrup Ρlus (pureyaconsyrupplus.info)

  22. Excellent website уou have listed here, a whole lot of info.
    Make sure you preserve posting.

  23. foarte interesant, chiar a meritat timpul

  24. I like the helpful information you provide in your articles.
    I will bookmark your weblog and check once more here frequently.
    I am relatively sure I’ll be told a lot of new stuff proper
    right here! Best of luck for the following!

  25. Make improving your posture a little gift you
    give to yourself to make you happy. They do not think
    that people can become acidic, or if they do, they say it is due to
    a problem with the body’s ability to regulate and that it has nothing to do with
    the foods the person eats. Weigh Yourself- Now when I say weigh yourself I only mean at the
    end of each 11 day cycle.

    Here is my webpage – buy yacon syrup (Virgie)

  26. Hi there friends, its wonderful post regarding teachingand completely
    defined, keep itt up all the time.

  27. Oh my goodness! Incredible article dude! Thanks, However I am experiencing problems with your RSS.
    I don’t understand the reason why I can’t subscribe to it.
    Is there anybody getting identical RSS problems? Anybody who knows the answer can you kindly respond?

    Thanks!!

  28. You could repair your credit score on your own and that there’s nothing any credit repair group can do for you that, given experience and research, you could not do for yourself. By all means, the same could be reflected to many of the benefit people already purchase for on a daily basis. If you are looking for a credit repair company check the highly suitable credit repair companies on our website.

  29. Hi there, I enjoy reading through your post. I wanted to write a little
    comment to support you.

  30. I am really enjoying the theme/design of your site.
    Do you ever run into any browser compatibility issues? A small number of my blog audience have
    complained about my website not operating correctly
    in Explorer but looks great in Safari. Do you have any ideas to
    help fix this problem?

  31. The particular i – Phone applications will be able to be ported from i
    - Pod Touch and as well , i – Pad as in reality. Is the bible the Infallibly Inspired Word of God—II Timothy 3:16—II Peter 1:20-21.
    Those bride arrives at the altar, and her parent gives her away
    coupled with sits down.

  32. I tend not to leave many responses, however i did some searching and wound up here StylizedWeb.com

  33. Hi there mates, its fantastic paragraph regarding teachingand entirely
    explained, keep it up all the time.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>