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