Let’s get straight to the point: Responsive design and having an app isn’t a solution to your mobile problem. It is not good enough and likely just plain wrong. To be truly mobile-friendly, you need to think mobile first from the ground up. Mobile-first doesn’t mean I figured out what to remove from the desktop design so that it fits. Mobile-first means thinking hard about how to present your brand and product on mobile screens. Then coming up with the absolutely best possible design for it.
The beauty and the challenge of mobile are that real estate is really small. It is beautiful, because less is more, and because it is finally liberating. It is challenging because we didn’t grow up with less is more, we came from Windows, from desktop and from larger screens that afforded bloatware.
Because there was a lot more space on the desktop, we thought about how we could add complex menus and a ton of information and graphics and text. Well, the problem is there is just no space on mobile for any of it.
If you take a standard desktop website and make it responsive, it will be useless — unless you remove 90 percent of it. Here in lies the secret to building a great mobile experience. Instead of figuring out what to remove from your desktop web site, just throw it away completely, and re-think the whole user experience from scratch.
Here are 5 important tips to make your mobile website awesome.
1. Brand
Even though mobile user experience is very compressed, start by thinking about how you communicate your brand on mobile. Your logo, colors, fonts — whatever it is, make sure to breathe your brand into the mobile experience so that your customers remember you.
2. Scroll
Make everything scroll-friendly. Organize information in a way where more important information is on top, and don’t be afraid to have stuff stacked on top of each other. On mobile, people are used to scrolling when they want more information.
3. Copy, fonts, images, and menu
Make your copy tight and shiny. Mobile affords the opportunity to make the copy really simple and crisp. Use branded fonts, and make the text larger to make sure people can read it. Useless text and more images.
Images are the killer app for mobile. People love them and love clicking on them, so make sure your images link to where you want users to go. Use a standard menu and place it on the top left, because most people are right handed so that they won’t hit it by accident.
4. Calls to action
Direct users to the action you want them to take. App download? Email signup? Or perhaps you want them to text you? Whatever it is, make it crystal clear what you want the user to do, and then drive them to do it. Use big buttons and sticky prompts to get the users to the next step in your conversion funnel.
5. Test, measure and optimize
To quickly test how your website would look on mobile, shrink your browser on the desktop. Then test it out on the latest iPhone and Android to make sure there are no bugs. Track the clicks using MixPanel or your favorite analytics software. Keep iterating on the mobile website until your conversion is healthy. The good news is that since mobile contains a lot less than desktop, you should be able to optimize it a lot faster.
