Designing For The Modern Day Mobile Market

Designing For The Modern Day Mobile Market

It’s estimated that in 2011 half of all cell phone subscribers will be using smartphone devices. That equals out to roughly 150 million people that could possibly be checking your website on their phone. What they might find could turn them into a frequent user or perhaps drive them away permanently.

Designing For The Modern Day Mobile Market
Image credit: Johan Larrson

The good news is, due to recent surges in browser technology, mobile specific sites are no longer needed for most websites. By following some basic design and layout guidelines, your phone could easily be accessible on a mobile platform with practically no extra development cost. This means a better user experience, more traffic, and a bullet proof website for the future.

State of Current Cell Phone Technologies

Right now the most popular / well known smartphone devices are the Droid, BlackBerry, and iPhone. Although these handle JavaScript, CSS, HTML, and some other recent technologies, there are some limitations that need to be considered. As always, the key to developing a widely accessible website begins in the planning stage.

Flash

Users trying to access your flash website will get a nice big blank box and have absolutely no clue what’s going on. The phone doesn’t say Fail to load flash so you need to be browser sniffing for flash support and providing alternative content when there’s been a load failure.

Flash
Image credit: George Kelly

Flash displays beautifully across a variety of browsers, but cell phone compatibility is like making Windows run on a Mac. As of right now flash cell phone support is practically obsolete. There have been some recent technological advancements to fix this, but don’t expect wide scale support anytime soon.

Silverlight

Windows Mobile 7 will be supporting Silverlight, which means that it will be the only browser supporting the technology. Don’t expect much development though due to Microsoft’s embrace of HTML 5. Although, huge demand for Netflix video capabilities could push development forward in the future. Bottom line is don’t rely on Silverlight for your mobile sites or applications. Remember, you want your website and/or application to be as accessible as possible across a variety of devices.

JavaScript

JavaScript support has exploded onto cell phone screens in the past five years. It looks and operates like it would normally on a desktop browser, except it can’t quite swallow extremely complex functions. As for what’s a safe feed for a smartphone, you’ll want to check out this case study. Cell phone JavaScript may need to be disabled depending on complexity. Older cell phones do support JavaScript, but most of them have it shut off due to a lack of support.

Javascript
Image credit: Matt Ephraim

Whenever possible you should be validating your JavaScript code due to the possibility of crashing someone’s browser with unintended loops or other coding mishaps. Also, please don’t forget to dump all of your JavaScript at the bottom. Last thing you want is your site crashing on cell phones before it even loads.

CSS 3 For Cell Phones?

Support for Cascading Style Sheets has come an amazingly long way on mobile devices. Not long ago most of these tiny screens displayed data without any CSS whatsoever. Because a chunk of the mobile market supports CSS 3 with the WebKit Open Source Project, you should be using this along with CSS 3 technology due to graceful degrading, decreased page load times, and better visual presentation. Just make sure that you downgrade CSS properly so older cell phone browsers ignore some of your declarations. Trying to significantly amplify your designs with robust graphics and heavy JavaScript functions is asking for dramatic load times.

Design Considerations and Usability Battles

Popular web technologies aren’t always the best options for building your site. Testing various data on sites proved that technologies like Lightbox, video, and hovers have some quirks that still need to be ironed out. Here we will try to cover several different design aspects that will keep your mobile friendly.

Design Considerations and Usability Battles
Image credit: nrkbeta

Why Doesn’t My Video Play?

As we mentioned earlier, Flash and Silverlight support on cell phones are practically nonexistent. If you need video support for your pages, use Vimeo or YouTube’s hosting service. It should be noted that several tests proved YouTube’s cell phone compatibility to be slightly better than Vimeo. On site embedded video support appears to be limited to Google’s Android phone at the moment.

Cell phone video support is being performed through HTML 5 video codecs. The subject of this new technology and licensing is a bit confusing right now, but Google has been really picking up the reins on it. Hopefully they’ll prevent it from turning into a crazy mess like DVD codec licensing did.

Text Resizing

Hopefully you use a lot of relative positioning with floats instead of absolute positioning. If you have a lot of absolute positioning with text, there is a good chance that particularly Android phones are going to garble text and throw it all over the page.

Screen Contrast for Tiny Windows

When is the last time you looked at your website from the other end of the room? A lot of cell phone users view pages zoomed out like this unless they’re reading a particular block of text. Combine this with a very small screen size and most websites suddenly look like a mass of non-decipherable text. To keep users happy you should be using high amounts of contrast to indicated particularly important page elements.

Lightbox Technology

One of the most popular JavaScript technologies, Lightbox, is quite possibly the best way to frustrate cell phone users. Most versions of the technology are disastrous and throw pictures/information into a black abyss that exists somewhere beyond their browser’s view. Testing out every Lightbox version I could find, I decided to throw in the towel for finding a usable version. In a few instances activating lightbox crashed the entire page, making it impossible to access anything without hitting the back button.

Lightbox
Image credit: bcinarli

This doesn’t mean you shouldn’t ever use Lightbox, but using it for login pop-up screens might not be the best idea. You’re probably better off having a standard login built into the page. This way users won’t have to worry about their login screen running away every time it loads.

Browser Sniffing

Several years ago developers targeted specific browsers to make them render differently depending upon their version. Due to the massive increase in browsers and web standards, it’s no longer considered good practice to test for specific browser versions. Instead, people test for specific functionality.

Browser sniffing can be easily done with a JavaScript library like jQuery. There are also other libraries out there to sniff for flash and other complex functions. Truth is, you’ll rarely be using this unless you have a lot of flash. In the worst case scenario, you don’t sniff and a browser chokes on a piece of data. Luckily most mobile devices these days will quietly die instead of ceasing to load the page, unlike IE 6 which loves to throw up errors all over the place.

Hover Attributes and States

Support for JavaScript and CSS hovers are kind of like Mickey Mouse, he exists on pen and paper, but in real life he doesn’t. Various cell phones do allow for the CSS hover attribute, but functionality is nowhere near that of a desktop computer. You have to frustratingly hold down links to activate the hover attribute on an element. Avoid putting vital information into hovers, if you can’t, just make sure to include the information in a non hover state somewhere easily accessible. This is particularly important when it comes to choosing good navigation titles since users probably won’t be able check out your dropdown titles.

Navigation Dropdowns

One of the cons for using dropdown navigation is the cell phone’s lack of the hover attribute leaves your users locked out if implemented incorrectly. You should be including a clickable first item in your navigation bar. Link it to the first page after it or create a splash page if you’d like. In addition to this, you really need to include sub navigation on the sidebar of your pages. This should be part of your navigation practices regardless of whether you’re developing for the mobile market or not.

Sencha

Counteracting Slow Load Times

Mobile devices load content slower than my grandma takes to get from one end of the house to the other. To make sure users don’t feel like they’ve been plunged into browser loading purgatory, you need to compress your data. In larger data situations you might even want a content delivery network. Minifying and packaging all of your data for quick delivery is very simple if you use a CMS software like WordPress. To check your website to see if it’s been successfully compressed, you’ll need to check out a website like this. For those of you not using a CMS with compression capabilities, check out Minify.

Let Them Know You Are Loading

Whenever sites are grabbing data on the fly, you should be displaying a load icon to notify users. This is particularly important for supporting extremely unstable internet connections. Slow load times make AJAX a recipe for disaster since users will either assume your website is broken or click on other links to force a response.

Loading
Image credit: Lachy

Remember Their Data

The less a user has to type to get what they want, the happier they’re going to be. Using cookies to remember login and password inputs is a simple way to make them much happier. Although you should be cautious with potential security risks here in case someone’s phone were to be stolen.

Sidebar Location

People used to say that whatever side you put your sidebar on is a design preference. While that used to be the case, it should now be on the right hand side. This is due to the fact that mobile device users will scroll straight down from the top of the page. Do you really want them to have to scroll horizontally every time they want to read something? This is particularly important for blogs and pages that have a large quantity of text based material.

Tiny View

Everyone wants to complain when they’re stuck with developing for the old screen size 800 x 600. Those days are long gone, but phones now may have a screen size as small as 100 to 200 pixels. This is truly a nightmare for any designer who hears these words. About all you can do here is make sure that you don’t have a gigantinormous header or logo. Keep it slim and tidy.

Is a Mobile Site the Best Option For You?

A lot of websites these days are pouring significant amounts of money into mobile site development. Truth is, not every website actually needs this, and not every company has the finances to hire a mobile developer. If you sell a specific product or have accessibility issues on mobile devices, it may be time to develop a mobile specific site or start to create mobile website.

Single Column Layouts

If you’re going to make your site mobile, you might as well throw out your sidebar since they’re a nuisance for mobile users. Popular sites like Facebook and Amazon use this format to simplify and magnify their users’ experience.

Single Column

Image Resizing

I’m a huge fan of websites like 9Gag that specialize in spreading pointless, but hysterical information. Thankfully many blog based websites have mobile versions that make navigation simple. Problem is, many of these websites also resize their images with text, making it impossible to read the image’s information. To make matters worse, there is no way to increase the image’s size. Give users on mobile devices the ability to look at an enlarged version of the image. This can be done by making the image a clickable link that takes them to the original image or using AJAX to increase the image size.

Navigation Simplification

Despite hopes that people want to visit all of your navigation items on a cell phone, you’re better off stripping it down to the bare essentials. This prevents users from squinting their eyes and zooming in every time they want to go to another section of the site. YouTube does a fantastic job at this with their mobile site. The nice big buttons are clean, simple, and easy to use at the top of the page.

Simple Navigation

Advertising

With the elimination of a side column, so goes most of your advertising opportunities. A good option to reformat your advertising is to include it at the bottom of your page as most RSS feeds do.

Full Site Link at Footer

Just because you have an amazing custom catered mobile version of your site doesn’t mean that people will want to use it. Many of your returning visitors might not be looking for the exclusively data presented on your mobile version. Just to be safe, do what most mobile sites do and include a link to the full site in your footer.

Conclusion

Above we have covered most of the areas about designing for the modern day mobile market. To help you further, below are some of the tools you can use to assist you when you are building a mobile version for your website.

Tools

Ashton (Ash) Blue is the main writer and founder of Ash Blue Web Design. As a web designer in Chicago Illinois he engages in helping its citizens, design meetings, fighting the occasional nemesis, and public speaking. He also has a noteworthy obsession with coffee.

Comments

    • div,
    • June 29, 2010
    / Reply

    Very Very detailed explanation. Thanks for the useful post.

    1. / Reply

      No problem, thought it would be useful for everyone due to the increasing demand for mobile websites.

    • Clipping Service,
    • July 2, 2010
    / Reply

    It was really awesome post!
    Thanks for sharing..
    Always love to read your blog post!

    • Grayson,
    • July 5, 2010
    / Reply

    Fantastic article! I believed that mobile browsing industry will be the next hit thing and we should really venture into this field.

    • jazzi,
    • July 8, 2010
    / Reply

    @Ash
    One question, in the post you said there is no need of browser sniffing and better get rid of javascript and flash, so

    How to show different content in different browser? how facebook and CNN makes it?

    Thanks.
    jazzi

    1. / Reply

      Just because they are showing different content on different browsers doesn’t mean they are browser sniffing. I’m not too sure whats going on under the hood, but I would guess they are testing if the user’s browser supports various properties. Also, just because something is a recommended practice doesn’t mean everyone practices it. For instance, not everyone validates their CSS and HTML, although almost all major web designers would recommend it.

    • jazzi,
    • July 8, 2010
    / Reply

    another question:
    Does wordpress do anything for this subject? Does WordPress suit for mobile?

    1. / Reply

      WordPress is suited for mobile websites with a plugin. You’ll need to browse around the WordPress plugin repository for something that suits your website’s needs.

  1. / Reply

    I have an unusually great opportunity for a mobile phone application developer in SF. If you know of anyone, please point them to the description here: http://blockchalk.com/jobs

    This person has the potential to be employee #1 at a newly funded startup!

    1. / Reply

      Hello Grant, thanks for posting the job offer here. I’m not too sure if you’ve seen in the sidebar, but we’re part of the Smashing Network. Have you tried posting on the job board there?

    • jazzi,
    • July 22, 2010
    / Reply

    I found a post to my question: How to detect mobile device?
    http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

Leave a Reply

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

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c