When it comes to mobile design, every pixel counts. After all, real estate is much more limited on a phone screen than a laptop or desktop computer.
Given that people are increasingly accessing the web through mobile devices, it’s critically important for every site to quickly and attractively communicate its purpose and offering.
Mobile design also requires thinking carefully about what you intend your audience to do when they visit your site. Those intentions will strongly influence both the content you offer, and the way you present it on phone screens.
Here are five examples of awesome mobile design to help you with your own mobile-friendly site.
1. Greatist: Clean Living with Simple Design
Healthy living blog, Greatist, is big, bright and clickable. The site greets visitors with a one-sentence description, letting them know what to expect. The article links are all buttons or large images, so readers can get to them without having to pinch and zoom. An email signup is featured at the top so visitors are prompted to action within seconds of arriving. Greatist keeps their design simple so that visitors can focus on their quality content.
Best Practices to Leverage: Large buttons, attractive visuals, and clear call to actions.
2. EyeBuy Direct: Making Shopping Clearer
What’s impressive about the EyeBuy Direct’s mobile site is its product browsing capabilities. After selecting from three broad categories of eyeglasses, visitors are able to view all products in that category. The product photos all have white backgrounds—keeping the images clean and crisp.
At the bottom of the product pages is a filter toolbar, where shoppers can refine their search. This reduces the number of photos the visitor needs to scroll through. There’s also a “back to top” button so it’s easy to start at the beginning again.
Best Practices to Leverage: Smart filtering capabilities, easy navigation, and attractive images.
3. Etsy: Let the Search Bar Be Your Guide
How does one find what they’re looking for in a warehouse? E-commerce website Etsy makes it easy with a simple-to-use search function. Etsy’s search bar uses auto-fill to guess what visitors are looking for. This way, Etsy ensures its visitors aren’t annoyed by having to type in long descriptions with a touchscreen. By paying attention to unique mobile behavior, Etsy helps visitors easily find the metaphorical needle in a haystack.
Best Practices to Leverage: Advanced search functionality and consumer learning.
4. Charity:Water: Prioritizing Calls-to-Action
There are times when a website has many objectives. When designing for mobile, prioritize or consolidate those objectives—the fewer you have, the more seamless the user experience. Non-profit organization Charity:Water is a great example of prioritizing one call to action. Upon arriving to the website, visitors are prompted to donate with just a few clicks.
While mobile transactions are on the rise, there are still consumers who like to be able to speak to a person. Having contact information accessible allows you to meet the needs of those consumers. Charity:Water does this by using a simplified feature for mobile devices—a clickable phone number.
The less clicks it takes to complete an action, the more chances the visitor is likely to complete it. Charity:Water demonstrates mobile design that follows this principle.
Best Practices to Leverage: Strong call to actions and streamlined checkout.
5. GrubHub: Nourishing an Optimum User Experience
Grubhub has one action that it would like its audience to take–ordering food. Upon entering the site, visitors are immediately prompted to find restaurants nearby. Rather than inputting an address, the site uses the phone’s GPS capabilities to target the visitor’s location.
Underneath the food finder, Grubhub graphically lays out the food ordering process. Their design ensures that the desired action is clearly defined for the visitor. Concerned with the action of ordering food, Grubhub’s mobile site focuses on making that as easy of a process as possible to complete through mobile.
Best Practices to Leverage: Compelling graphics, streamlined checkout, and geolocation.
Key Takeaways for Awesome Mobile Website Design
Mobile design should be simple and focused on the user. When designing for your mobile site, use functions that are unique to the mobile experience, such as easy navigation, compelling graphics and streamlined navigation. By leveraging these best practices, any business will be in a great position to turn mobile visitors into customers.
Your website share buttons should also be mobile-friendly! Check out the AddThis Floating Share Bar. It locks to the site of your page on desktop and to the bottom of your screen on mobile.