Mobile Web Mastery: 25 Tips on Designing for Mobile Devices
I recently read that it’s expected that by 2013 there will be more users viewing the Internet through a mobile device versus a desktop or laptop computer. That’s pretty amazing, and it means that more so now than ever before, we as designers, should consider designing and developing for mobile users. It’s become a necessity that will continue to grow. So lets take a look at some tips on designing for mobile devices.
Website or App?
That is the question. An app has its advantages mainly in user experience, potential off-line usage, and customer retention. But considering more in-depth design and development for apps across mobile platforms, we’ll focus this article on mobile websites.
Mobile websites are most likely what you’ll be developing for your client base, unless they have customers highly invested in their brand that would likely justify downloading and installing an app. Mobile websites are easier and faster to develop and deploy. They are also accessible by any device with web browsing capability.
Designing for a Smaller Screen Size
When designing for mobile device screens, you must take into considerations the smaller size of the screen. This will be difficult for those among us who are used to designing for large HD monitors with capability to display graphics at 1920X1200 or higher.
Today’s iPhone 4 has a resolution of 640 x 960, with the iPad a bit higher at 1024 x 768. But those resolutions are high in comparison to other devices. Some of the Android and Blackberry phones feature a screen size at 320×240. That’s considerably smaller than what we’re used to designing for, but it’s crucial to keep in mind as you set out to design your mobile website.
Consider Poor Connectivity
Remember a few years back before broadband internet was available in every corner coffee shop, and web designers had to consider the users connection a little closer when optimizing images and video for faster load time. You’ll need to do the same when designing for your mobile site.
Service providers are rolling out faster speeds all the time, but coverage still remains spotty at best in some areas. Plus some users, who do not have unlimited data plans, pay for data downloads. So as developers we must think back to those early modem days. You’ll need reduce code, and remove unnecessary tags and comments. Keep images small, and compressed for lighter download times.
Choose a Separate URL for Your Mobile Site
If you’re building a completely separate site for mobile devices, consider choosing a URL for the new site. For example, http://www.yoursite.com/mobile or if you can add custom sub domains to your exiting domain try something like http://mobile.yoursite.com.
Keeping a simple structure like the above for your URL helps make the user experience easier to follow and remember.
Detect And Redirect Users
Detecting if a user is mobile or not and sending them to the correct site is important to keep the experience seamless.
One good way to detect a device is to make use of the WURFL database. WURFL is a database available on the web that collects information about all the mobile devices out there. The WURFL project has APIs for several programming languages. Yelitza Jaramillo has written a great article on using the PHP API Package for WURFL.
If you have your own method for device detection, please feel free to share in the comments below.
Consider a Mobile Friendly 1 Column Page Structure
When a page loads on a phone it is typically zoomed all the way out so that it all fits onto the screen. The screens on most all phones are so small that the page can not be read until it is zoomed in. This isn’t ideal because it creates more steps for the user while reading your content. Typically they will have to scroll both vertical and horizontal while reading.
Instead try implementing a one column layout that fits within a mobile screen. The user will still likely have to scroll, but it will only be vertical.
Simplify and Optimize Your Content
Again, think light and simple. Keep a less is more mentality when organizing your content and page structure. Consider removing extra links and content that are not within the main content area. Items typically found in the sidebar or footer of traditional sites can often be removed so that the focus is streamlined and simplified.
By removing this type of content you are also reducing the page size and load time, which is an important aspect of mobile page design.
Reduce Your Navigation and User Input
User input can be difficult on some phones. It’s not as fast as a traditional keyboard, and users are more likely to make mistakes. Given that, we can make a few adjustments to reduce the amount of input needed from the user. For example, information can be pulled from a user’s existing account during a checkout process. Navigation can be reduced to a drop down menu. We can also take advantage of a phone’s built in functionality, see more below on this.
Avoid Absolute Sizes
When designing for smaller screens avoid defining dimensions in absolute pixels. For example if you define a width of 200px, that may be the majority of the screen on some phones. Try using relative sizes like ems and percentages, so that the size will auto-adjust.
Avoid Scrolling… Really?
In my opinion you simply can’t avoid all scrolling in most instances, given the smaller screen size of mobile devices, but you can make some adjustments to reduce the scrolling. Creating a 1 column layout as mentioned above to keep scrolling vertical is ideal. Reducing the amount of images and extra content on the page is another good suggestion. Also consider extra content in the header, such as logos and navigation, these can push content further down the page causing unnecessary scroll.
Designing for Touch Screen
Touch screens on smartphone help improve the user experience, except when it comes tapping very small buttons and text links. Fingers are typically too wide to accurately tap a small text link. For important links and navigation consider using large buttons that span the width of the screen.
Choosing the Right Font for Your Content
With the ability to embed fonts into our webpages, it is essential to choose a font that is readable on a small screen. Avoid script and handwritten fonts, even for titles or text that is intended to be larger. Even larger text appears small on a phone.
Also consider the appropriate amount of letter spacing and line spacing to keep your content as readable as possible.
Flash, Java, Frames and Pop Ups are Out the Window
Most mobile devices do not support, Flash, Java Applets, frames and pop ups. Avoid these technologies when developing your mobile site. If you’re married to Flash now may be the time to cut the cord. With Adobe’s recent announcement that it has ceased the development ofFlash Player for browsers on mobile devices.
More than 1 Mobile Site?
With the ability to detect device types it raises the question on whether or not to develop more than one mobile site. For example you may want to create a site for more modern smartphone such as the iPhone and Android, and an even more reduced site for older, less capable phones. By doing so you’ve created an experience tailored to the users device.
Use the Phones Built in Functionality to Your Advantage
This is where you can take advantage of viewing your site from a mobile phone. Phones can do things that PCs can’t, so use them whenever possible to improve your user’s experience.
For example:
- Make phone numbers clickable to place a call.
- Give the user the ability to find you on a map, or find the nearest place to locate your product, etc…
- Use special features such as QR or bar code scanning.
A Look at Mobile CSS
Below are some general tips for CSS considerations when designing for mobile.
- Set your wrapper widths to percentages versus fixed widths so that your page will wrap to various screen sizes.
- Set paragraphs, headings and navigation to display block to fill the screen.
- Mobile Safari doesn’t fully support @font-face.
- Take a look at CSS3 Media Queries for creating a mobile version of your site.
- Remember to keep things simple and streamlined.
Designing for iPhone
The iPhone has a significantly large portion of the market share when it comes to mobile devices.
When building sites specfically For iPhone you’ll need to target their screen size. The screen size is set to 320px by 480px for older iPhones and 640px by 960px for iPhone 4 and iPhone 4S.
Using CSS3 media queries you can add styles to your site’s main stylesheet that will only effect iPhone.
Consider the Device Orientation
With iPhones and other modern smart phones you can change the screen orientation from portrait to landscape by tilting the phone on its side. This is one more reason to keep your site layout fluid so that it will fill the space no mater what the screens orientation is.
Mobile jQuery
If you’re a front end developer than you’re already familiar with the power of jQuery, and it’s write less do more mentality. The same goes for the new jQuery Mobile.
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
This framework is worth a serious look if your planning to develop a robust user experience within your mobile site.
Mobile UI Kits and Icons
If your brain leans a little more to the development side of things versus the world of design, fear not. There are plenty of stock UI kits available for mobile web.
Dark Mobile User Interface Kit
Tools for Mobile Development
PhoneGap
Their platform lets you easily construct HTML5-based apps as native applications on 6 different platforms.
RhoMobile
The tagline “one codebase, every smartphone” pretty much says it all.
WordPress Mobile Edition for WP Users
If you’re a fan of WordPress there are several mobile friendly plugins available. One in particular stands out. WordPress Mobile Edition is a plugin that shows an interface designed for a mobile device when visitors come to your site on a mobile device. Mobile browsers are automatically detected, the list of mobile browsers can be customized on the settings page.
How to Test Your Mobile Website
Testing on mobile devices can be a huge task. Especially since it is unlikely that you own dozens of different mobile phones to test with. Enter Opera Mobile Emulator. The Emulator supports around 20 different platforms.
Incredible Examples of Mobile Websites
Looking for inspiration? Look no further. Below are some awesome examples of mobile websites.
Related Posts
-
A step to be ahead: start designing for mobile devices
-
The Blank Slate: Where is Design Going?
-
The Blank Slate: Designing for a Niche Market
2500+ premium design resources for only $7!
We do the best to provide high-quality products that you can use in your commercial projects.
You bet!
Very thorough and useful! Will keep me busy over the weekend :) thanks
Too useful
Thanx a lot
Great post.. very useful article..
Quite a list of tips. In the section “Detect And Redirect Users”, you recommend to use WURFL. It’s a choice which seems to be easy but which is in fact hard to maintain. There is a corollary of devices databases (any of them): It will break in the future.
The reason is quite simple, it’s a hard coded database of values. Browsers implementer not only evolve their browser engines but there are ported on more and more type of devices. One day or the other, you meet something which is not in the database and the site falls apart. Basically it is very fragile and not future friendly. People behind WURFL and other dbs make a tremendous and laudable work to maintain these lists, until the day they do not. For example, one of the major issues, Opera browser has right now is because of a library which is not maintained anymore and which was used in many ASP.net powered Web sites.
So as a strategy, it is a lot better to use feature detections. Through JS APIs the Web developers can detect what is supported by the Web browser and then you send the appropriate interactions. This with a combination of mediaqueries will be a lot better.
Another point is the fallback. When developing the site, people should really have a readable fallback. Basically I encourage people to create a dumb user agent in their favorite browser and if the site fails with this dumb user agent, then there is an issue. Because it means one day or the other it will happen for a browser which was not planned.
Web sites are deployed put in production and sometimes never touched again. That would be bad to have them break because there were not planned for being future friendly.
Great post, very useful, thanks!
I just wonder how this separate url will affect rankings is search engines? Is’n it a bit tricky to maintain good positions with separate url?
Some great points! I think keeping it simple and lightweight is a mobile designers best bet. I design my sites in HTML/CSS so they load super fast. I feel like I’m going back 10 years by just using HTML but it works.
CSS can be fun if you have a creative mind. :)
grt post!!.. had a question, I have a website where registration form is very important. How should I place this form on the mobile website. Should it be a button where the user’s clicks and then take to the form/// OR should I place the form as soon as the user lands on the page..
Thanks,
You can just add link or call to action on you welcome page many to open form page.
That should do the job.
Management-Ware Solutions just release a new software to create Mobile Website.
The software name is Management-Ware Webelement. Webelement is an easy to use mobile Website builder software.
With Webelement anyone can create a Mobile Website without writing a single Html code line. Mobile Website created with Webelement will work on most mobile devices like the IPhone, Google Android, Windows Phone, Blackberry and much more. The software use JqueryMobile Framework engine.
With Webelement, it’s possible to create a Mobile Website on less than 2 hours and there is no need to worry about compatibility.
I really like that software :-)
With Webelement there is many page type including Google map direction, contact us form, photo gallery and ofcourse standard page.
http://www.management-ware.com/en/mobile-website-builder-software-webelement-overview
These are excellent tips that focus on technical aspects. When creating a mobile interface, though, there are aspects of ethos and usability that can really only be discovered through user interviews, testing and focus groups (the more, the merrier). We’ve written up at least one case study… http://interpixdesign.com/clients/telus
Excellent, excellent, excellent!! Not only did you provide some amazing informative content you gave me some very useful tools.
Nice tips, however i would like to add
Use built in GPS for driving directions and detecting user locale. You can also serve nearby services on the basis of user location. There are endless opportunities.
Use link to call and display icon on each page.
Nice Site, Very informative Article!. I also believe that mobile marketing will play a big part on business etc in year 2014. We are actually planning to do a free mobile web to small businesses in our areas. Thanks to this great review!
Its not my first time to pay a visit this web page, i am browsing this web page dailly and
get pleasant facts from here all the time.
You have really made some great points here! I think keeping your application’s design simple and clear is best thing for mobile designers. I design my sites in HTML/CSS/jQuery Mobile so they load super fast. I try to use CSS instead of pure javascript where possible.
I would like to hear what you think about JQuery Mobile in terms of speed. I’ve found it to be frustrating at times in the way it performs on life websites.
I’m using a mobile framework called LungoJS right now. It’s new but it’s so far the best I’ve used.
JQuery mobile can be heavy to download before the page activates but there can be an advantage if you link to it from one of the online CDN such as Google’s. Mobile visitors may have already downloaded it from that source before visiting your site and hence the download size is near to nil.
Have not noticed speed as a major issue but I am aware that the cpu power of phones varies greatly, more so than for desktops. Hence keep computing requirements low on a mobile.
Very used Good Post
Nice article, It would be good to hear about responsive web design as I am thinking of using this in my website.
I you are going to go with a width of 320 pixels, make sure you add the following meta tag to your page to ensure the fonts are readable:
I you are going to go with a width of 320 pixels, make sure you add the following meta tag to your page to ensure the fonts are readable:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
I wanted to create you that very small note to be able to thank you again about the extraordinary pointers you’ve featured on this website. This is really remarkably generous with you to deliver easily exactly what many people could have advertised as an e book in making some cash for their own end, most notably given that you could possibly have tried it in the event you decided. Those tips also acted to become a great way to fully grasp someone else have similar dreams like my very own to realize a good deal more in terms of this condition. I’m certain
there are several more pleasant periods up front for individuals
that examine your blog post.
I want to show my thanks to you just for bailing me out
of this type of condition. After searching through the search engines and seeing
things which were not helpful, I believed my life was over.
Living devoid of the strategies to the issues you’ve sorted out all through your entire guide is a serious case, and the kind that might have in a wrong way affected my career if I hadn’t come across your web blog.
Your primary training and kindness in handling all
the details was precious. I don’t know what I would’ve done
if I had not discovered such a step like this. I can also now relish my
future. Thanks a lot so much for this skilled and sensible guide.
I will not be reluctant to endorse your blog post to
any individual who ought to have support about this area.
I usually do not drop a leave a response, however after browsing some of the comments on this page Mobile Web Mastery:
25 Tips on Designing for Mobile Devices. I do have a couple of
questions for you if you tend not to mind. Is it only me or does it
give the impression like some of these remarks come
across like they are coming from brain dead
folks? :-P And, if you are posting on additional online social
sites, I would like to follow you. Would you post a list of all of all your social sites like
your twitter feed, Facebook page or linkedin profile?
My relatives all the time say that I am wasting my time here at net, however I know I am getting knowledge every day by reading such nice content.
A really good blog regarding mobile website development, soon we need every website on mobile. Thank you for sharing your wonderful thoughts with us. You’ve made some really helpful statements and I appreciate the time you’ve taken within your producing.
I needed to thank you for this very good read!! I absolutely loved every bit of it.
I have you book-marked to check out new stuff you
post…
This is a great share! Be careful to design only mobile websites for iPhone. Looking at the world they do have a large share, yes. However, there are a lot of countries (especially developing countries) where they have a very very low share. Take South Africa for example, did you know they are the smallest player there? So keep in mind that you also need to take your target country into account when designing a mobile website. The guys from http://www.BuildMeMobileSite.com helped me with this, because I initially made the same mistake and they pointed out that this wasn’t a smart move because my website is targeted at the south african audience.
The SMS advertising plan is called white label mobile marketing.
Viral marketing can drive massive traffic to any site depending on how far it spreads.
When you have a client, don’t just think about the money, but about who they are and if building a long-term relationship with them could be beneficial to your business.
Pretty great post. I simply stumbled upon your weblog and wished to say that I have really loved surfing around your weblog posts.
After all I’ll be subscribing to your rss feed and I am hoping you write once more very soon!
I am curious to find out what blog platform you have been working with?
I’m having some small security issues with my latest blog and I would like to find something more secure. Do you have any solutions?