- Do I really need a mobile site?
- What should I know when I’m using a designer or agency?
- How can I improve my mobile site design?
Imagine a group of friends is at lunch. One of them raves about Kitsch Kettle, the quirky kitchenware store.
Everyone immediately pulls out their mobile phones and checks out the company’s website.
A mobile-friendly site design offers a clean, simple shopping experience that doesn’t overwhelm or confuse people. We’ll show you how it’s done.
Mobile site design does not come “one size fits all.” you can approach your design in different ways. Some people don’t use a mobile site and instead create an app, customers need to download and install. Some go “mobile-first”, doing their mobile site before designing for desktop. Others keep their existing desktop site as-is and create a completely new, separate mobile site.
We’re going to focus on responsive design, which is what most businesses end up using. It’s a good way to create a flexible website layout that adapts to different screen sizes, resolutions and devices.
The responsive design caters to your customer. No matter what screen size or the device they’re using, your website will look great and work well.
Customers familiar with your desktop site can easily navigate your mobile one, too. That makes it easier for them to browse and buy, which mean you’re making more conversions and revenue from mobile.
Responsive design can actually help search engine optimization. Mobile-friendly sites show up higher in search results – especially if the person is looking for a local service.
Whether you’re judging your work or the work people do for you, you should know some mobile site design best practices:
- Make sure your call-to-action button is right where your mobile customer can see it.
- Promotions shouldn’t overshadow navigation, important content, and the call to action. Guide your customers through your site instead of distracting and confusing them.
- Mobile customers like short, simple menus. A single option called “Women” works better than a bunch listing every type of women’s clothing. Bonus: use vertical instead of horizontal menu navigation.
- Most people will automatically assume that clicking your logo will return them to your homepage.
Those were some solid mobile site design basics. But you can always focus on specific goals to improve your design and make it easier to navigate your site and faster to buy your products.
Help people search your site easily. Make it simple for people to find what they’re looking for and they’re more likely to buy it.
Put your search box at the top of the page so it’s easy for people to search your site.
Add features like auto-complete and auto-correct. They help your customers deal with tiny search boxes on their tiny mobile screen.
Let customers narrow down their search (if your product allows it). For example, instead of only allowing them to search an item like “shirt” let them choose the size, colour, style, etc.
Make the purchase process quick. Don’t give your customers a chance to get cold feet. Help their path from browsing to buying be effortless.
Let customers date you before they marry you. That is, let them explore your site without having to register for an account first.
Speed your customers through the purchase process by giving them the option to check out as a guest.
Pre-fill returning customers’ preferences during checkout. Let new customers use their third-party checkout service.
Help people enter their info on your site. If customers can’t fill in their information correctly on your site, they can’t complete their purchase.
Have a numeric pad pop up if customers need to enter numbers and give them visual calendar to choose dates from. Auto-advance them to the next field when they’re done.
Use a drop-down menu when you’re giving customers a lot of options.
Check for errors as the customers fill in info so they’ll know if they have to correct something before they hit “submit”.
Try evaluating your mobile site or a competitor’s:
- When you land on the site, is there a clear call to action? Yes/No/I don’t know
- Is there a search box at the top of the page? Yes/No/I don’t know
- Do promotions compete for attention with the navigation or call to action? Yes/No/I don’t know
- Does clicking the logo return you to the homepage?Yes/No/I don’t know
- You’re ready to buy. Can you check out as a guest? Yes/No/I don’t know
- Does the site let you know if you forgot to enter your zip code while checking out? Yes/No/I don’t know
If you were evaluating your own site, use the questions you just answered as a starting point to talk to your designer about how you can improve your mobile site design.
References: Google Webmasters, Think With Google, Google Primer
