As more and more users are navigating the Internet on mobile devices, it’s more critical than ever that every aspect of a site plays well with mobile technology. What makes a standout website on a desktop doesn’t necessarily translate to mobile. Every aspect of the site, from the transitions to the copy, needs to be worked out differently for mobile. Smaller screens require more streamlined layouts and different platforms need to be accounted for. What works great on an Android may not work as well on iOS system. Here are six things to keep in mind when designing for mobile.
1. KISS
Keep it simple, smarty. Mobile browsers still haven’t caught up to their desktop counterparts in terms of speed. Everything takes longer to load. So, sites need to be stripped of any non-essentials that would slow down browsing. Flash and 3D elements need to be carefully curated. If you feel that you need to have a video on the site, go ahead, but try to keep other heavy graphics off the page.
2. Make Text Legible
Different devices have substantially different screen resolutions, so you need to make sure copy is easy to read no matter what device a user has. Opt for straightforward fonts and keep the contrast between text and background high. Avoid fonts that are too small. Avoiding long blocks of copy can also help.
3. Scroll Vertically
Not all mobile devices automatically go to landscape orientation. It’s easier for users to scroll only in one direction—up and down. Wrap text and create a layout that fits onto a mobile screen. A single-column layout looks clean and allows for larger buttons. You can use more than that, but keep the page from getting cluttered.
4. Make Clicking Through Easy
Not all phones have a world-class zoom function, so clicking on links that are small or placed too close together can feel like finger acrobatics for users. Keep link text—especially important ones—large and use white space to help it stand out on the page.
5. Simplify Navigation
The navigation bar should be obvious. The top or left of the page is a great place to put it. Make sure it’s clearly labeled and the text is, again, legible. Resist the temptation to get fancy with menu items. A simple drop-down is just fine on a mobile browser. It can also help just to simplify the site, period. Avoiding unnecessary numbers of pages cuts down on loading time and data usage. In fact, many small sites can be effective as a single page.
6. Minimize Typing
However fast it seems like users can text, typing is still a lot more challenging on mobile devices than on a desktop. Wherever possible, try to avoid forcing users to type a lot. Keep URLs short and any form entries to a minimum. Email and password should be enough for most sites.
Remember, mobile UX puts the “experience†front and center. Lush graphics and stylized logos have their place, but not on a phone. What’s important here is building a site that works flawlessly. Think of it as being like a little black dress. It might not be the flashiest thing out there, but it’s right for every occasion. The same goes for great mobile web design. The standouts are the sites that work well for users, regardless of what device they are browsing on.
What Else?
Now that you’ve read our tips, leave a comment below and let us know what steps you take to ensure your mobile users have an awesome experience.
Header image created using iPhone in a workplace
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Making beautiful design simple & accessible to all.
View More Posts
