UI/UX 101: 8 easy tips for mobile web design
Some people think that a mobile website is just a smaller version of their standard PC website. That's not quite the case. While the two sites should have approximately the same feature set, there are several basic design notes that need to be taken into consideration when developing specifically for mobile web.
1. Make sure your mobile web navigation is both easy to read AND easy to tap
When someone is accessing your website on their mobile device, screen space comes at a serious premium. You need to be sure to provide big, bold buttons that your viewer cannot miss - either with their eyes or with a tap of the finger. Extra padding and spacing are a must. Nothing is more irritating that trying to tap one thing and ending up in an entirely different place.
2. Make sure you take note of vertical space on mobile web
Super long pages are just not a good option on mobile web. Think about using stacked tabs (accordians) that expand when tapped to view content or open content in a new page, instead of forcing your users to scroll down (and down and down) to find what they're looking for.
3. Limit large images in your mobile web design
Icons are fine, even encouraged, but large images that look great on a standard PC website just don't work on mobile devices. They're too big and bulky, and your users will need to scroll around them to view the content.
4. Use the power of the device in your content
If you're serving directions to your restaurant or hotel, don't use your mobile website to open a link to a bulky static image of a map! Just use the device's default navigation. Likewise, if you want your viewers to call you, add a "call us" button that automatically opens up the user's telephone. Why not make life easier for your consumers?
5. Test your work on both smartphones and tablets
First, decide whether or not you want tablet users to view your standard website or the mobile optimized website. (We recommend optimizing, always!) Be sure that your content looks great for all users. A great free way to test your website is the W3C mobileOK Checker. After the checker gives you a passing grade, you should also visually test on any mobile device you can get your hands on - iPad, Nexus7, iPhone, iPod, as many variations of Android, and even that old Blackberry Pearl you have lying around somewhere. The more you test, the more bugs you can fix, and the better your website works for your entire audience.
6. Know your mobile web audience
Before you even start designing and implementing, it's wise to look at your web traffic to see what devices are currently being used to view the website. When in doubt (or need to get your content live quickly), be sure to serve an excellent experience to your majority. Over time, as your website becomes more mobile-optimized, these figures may change, so be sure to check periodically to make sure you're still on the right path.
7. Serve relevant, mobile-optimized engagement ads
You already know how important engagement ads are. Don't forget that mobile users are critically important today and their numbers are increasing. By not serving mobile-ready ads to your audience, you could be hurting your earnings potential.
8. Let the user opt-out of the mobile experience
Some users simply prefer viewing a standard PC website on their mobile device. Therefore, it's very kind of you as a web designer to provide the user with an option to view as a standard webpage. (Whether it's a good idea for the user to actually view the real page is an entirely different story!)
What other tips can you add for designing for the mobile web? Leave your thoughts in the comments!
