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.
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
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.
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.
Image credit: Matt Ephraim
CSS 3 For Cell Phones?
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.
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.
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.
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.
Hover Attributes and States
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.
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.
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.
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.
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.
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.
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.