Today, 70% of all search queries are from mobile devices. And that number is growing. When your search result listing or an ad sends these mobile customers to your site, it’s crucial to your bottom line that they find a page that’s easy to read, navigate, and click.
What is a mobile-optimized website?
A mobile-optimized website is a simplified version of a desktop website specially designed to display on small screens such as smartphones. In this article, “mobile” refers to smartphones, although the principles here apply to tablets.
Why do you need a mobile-optimized website?
According to a study, only 36% of SMBs have a mobile-optimized site. But according to eMarketer, the number of smartphone users reached 365 million, or 82% of the U.S. population, at the end of 2014. Everyone everywhere is using their smartphones for everything all the time. If you’re not giving your site visitors a mobile-friendly experience, you risk losing valuable traffic and turning customers away. NetElixir reported that of the 180 million shopping sessions on 53 retail clients’ sites, the smartphone conversion rate was 33% for those not optimized for mobile and 60% for mobile-optimized sites.
What’s worse is that 57% of mobile users will abandon a website if it takes more than three seconds to load. In addition, 30% will leave a purchase transaction if the shopping cart is not optimized for mobile devices. The bottom line? Smartphone users don’t have the patience for a website that isn’t built for their phones. If your site isn’t optimized for mobile, you ultimately lose sales.
Why does mobile need its unique design?
In addition to the apparent difference in screen size, mobile and desktop user expectations and behavior differ significantly and demand a specific screen experience:
• Limited space on a small screen means the site content must be concise with minimal scrolling to get to what your customer is looking for.
• Layout and navigational design must encourage conversion and user engagement on a small screen. It must be easy for customers to locate the Call or Buy button and reduce the number of steps to complete a transaction for customers on a small device.
• Speed and bandwidth are concerns for mobile users, so images need to be compressed or resized to speed up site loading.
• User engagements should be easy to execute and designed for touch screens. Depending on what you are trying to accomplish on your website, it should be easy for customers to scroll, swipe, or select to make a phone call or click on a map to get driving directions.
• Optimizing for mobile allows you to be consistent with your brand across devices.
What are your options for building a mobile-optimized site?
Unless you’re a design pro, you should work with an experienced web designer or developer. Those people know what they’re doing and can keep you from making innocent mistakes, which can mean the difference between daily and zero conversions.
The speed and innovation of new devices gave a set of challenges to website designers. How can you generate and maintain updates of site designs that work for screen resolutions of iPad and iPhone, Microsoft Surface, Kindle, and Samsung Galaxy S5 (to name a few) while retaining the integrity of the content and brand?
Responsive Web Design (RWD) is aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices from desktops to mobile phones.
Getting the basics of responsive web design
It’s important to know that an RWD site is an all-in-one site, meaning there is no separate mobile website or URL because the RWD site is completely optimized for all screen sizes. How is this accomplished?
Responsive Web Design utilizes CSS (a programming language) media queries and multiple cascading style sheets to change the layout of the websites depending on the screen size it detects. A responsive design adapts to viewing conditions depending on screen size and device orientation, such as a tablet switching from portrait to landscape. Here are the best practices of well-thought-out responsive web designs.
Landing pages: How can I make the most of my mobile site?
Optimizing your mobile landing page can increase conversion and give your customers a better experience. Here are some tips:
1. Create a solid call to action. This may be a button to click to call, a form to open, a special offer, a “like,” or “more.” This button should be visible when the visitor lands on the page. Please don’t overdo it: limit the number of actions to three or less. The top mobile user action for SEO and paid search is making a phone call, so ensure your phone number is visible. Users should be able to tap/click a phone number to initiate a call (click-to-call functionality can be enabled in your website design process).
2. Make navigation easy. Given the limited screen size for smartphones, a single-column layout with the priority content at the top is preferred. Always put the call-to-action above the fold or without needing to scroll. Have a “Menu” button, a visual that’s hard to miss.
3. Build a clean, legible design with limited distractions. Headlines should be kept to one or a maximum of two lines in a clear font, preferably using the keywords you want to optimize for SEO. Less is more for the remaining content and context on the site. Bullet points are a good way of keeping content succinct and layout clean with a font large enough to see on a small device without zooming.
4. Optimize for speed. Mobile pages should be lightweight with a recommended page size of fewer than 20kb and load time preferably under five seconds. Things that may slow down page load include images and scripts. Consider consolidating or eliminating hands, resizing or using mobile-optimized images, using CSS text in place of ideas, and other mobile web performance optimization tips.
5. Only use content that is accessible via mobile. Not all content types are compatible with mobile devices. Adobe Flash, frames, PNG-24 images, and numerous plug-ins are not accessible for mobile. You may have these types of content on your desktop site. Ensure you update them with mobile-friendly alternatives like HTML5, JPG, GIF image formats, and jQuery.
6. Make it touch-friendly. Can users efficiently use their thumbs to navigate your site? Ensure your site design and buttons are optimized for touch and keep the number of clicks a visitor needs to make to find their way around to a minimum.
7. Design for local. Smartphones offer valuable location-based information that allows you to personalize content and serve up the most relevant page. A mobile user’s location can typically be determined by their IP address, GPS location, or Wi-Fi network (without the user explicitly disclosing their location). Leveraging location signals, website creators can design personalized site experiences based on where the user is. For example, a customized heading with a city or metro area name, a list of nearby store locations, re-center and zoom maps to the user’s location for ease of navigation, or a local phone number in place of a 1-800 number to make the service more local.
8. Simplify forms. The number one goal for a form is conversion. Mobile landing page forms should be short, only include required fields, and collect imperative data. Target seven or fewer fields. Designing an effective mobile website and landing pages should not be a set and forget task. Top-performing websites and practitioners use A/B testing to see which design users respond to better and which landing page converts better. A simple tweak like the location of a call-to-action button may significantly increase conversion.
When you mobilize your website, it will look good and work well on smartphones and tablets – and deliver up to twice the conversions compared to a less-than-optimal display.
Customers who search for you on their mobile devices expect a webpage designed specifically for smaller screens, like smartphones and tablets. Otherwise, it’s just too hard to use your website, and customers give up—the result: no conversion. Let’s avoid that at all costs!