Today, 70% of all search queries are from mobile devices. And that number is growing.
When your 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 that is specially designed to display on small screens such as smartphones. In this article, "mobile" refers to smartphones, although the principles here apply to tablets as well.
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 abandon 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 are ultimately losing sales.
Why does mobile need its own special design?
In addition to the obvious difference in screen size, mobile and desktop user expectations and behavior differ greatly and demand a specific screen experience:
• Limited space on a small screen means the site content must be succinct with minimal scrolling to get to what your customer is looking for.
• Layout and navigational design need to 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 gives you the chance 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 really 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 conversions 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 ( just 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 desktop 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 and separate 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 layout 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 strong 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 clearly visible when the visitor lands on the page. 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 making use of the keywords that 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 needing to zoom.
4. Optimize for speed. Mobile pages should be lightweight with recommended page size less than 20kb and load time preferably under five seconds. Things that may slow down page load include images and scripts. Consider consolidating or eliminating scripts, resize or use mobile-optimized images, use CSS text in place of images, 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 that you update them with mobile-friendly alternatives like HTML5, JPG or GIF image formats and jQuery.
6. Make it touch-friendly. Can users easily use thumbs to navigate your site? Make sure your site design and buttons are optimized for touch and keep the number of clicks that 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 in some cases Wi-Fi network (without the user explicitly disclosing their location). Leveraging location signals, website creators can design personalized site experience based on where the user is. For example, a personalized heading with a city or metro area name, list 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 and only include required fields and collect data that are imperative. Target seven or fewer fields. Designing an effective mobile website and landing pages should not be a set and forget an onetime thing. 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 yield a big increase in 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.
That's because 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!