What you don’t know can hurt your website.
Mobile devices, such as iPhones, iPads, Android smartphones and Android tablets, have limitations that can turn visitors and loyal followers away from your website. When a customer gives up on your clunky, poorly rendered web pages, they are likely to visit the mobile-optimized website of a competitor. This, of course, leads to lost revenue and a poor reputation with consumers.
Here are five common mobile optimization mistakes your website may be guilty of. The solutions I offer are based off of my experience with clients. There may be better solutions out there that may work better for your project.
Endless scrolling is highly irritating for smartphone and tablet users. Also the screen pinch for zooming in and out can be quite disorienting at times. It is important to ensure that your website can be sufficiently viewed on most mobile devices without forcing your visitors to adjust their device. Try breaking up long and unwieldy text blocks and display them on separate web pages. You can also create alternate versions of your content that is abbreviated and optimized for mobile users.
Barely There CTAs
Your calls-to-action are the bread and butter of your online operation. They indicate the immediacy of buying your product, inquiring about your services, or signing up for your mailing list. The mobile version of your website must display your CTAs in a prominent area, much like they are displayed on the desktop version of your site. One good practice is to strategically place a few large clickable CTA buttons on each mobile web page.
Also, if you run an e-commerce website, make sure that your CTA buttons lead to a checkout process that is quick and easy to manage. Many sites have checkout pages that have not been optimized for mobile devices. This tendency leads to less conversions and lost sales.
Many website features that work beautifully on desktops and laptops simply don’t translate well when viewed through the small screen of a mobile device. A few of those helpful features include menu bar functionality and drop-down menus.
A menu bar is the SEO-friendly backbone to any good website. It stores imperative navigational data that, along with providing a friendly user experience, helps search engines properly index your website. They are extremely functional, usable, and contemporary. Special thought needs to be given to their implementation into your mobile optimization strategy. The combination of menu bars and the small screen size will disorient your visitors. Instead of having a menu bar, try an icon displaying three bars. This indicates that the menu is expandable. This is a common practice for proper websites that are optimized for mobile devices. There are plenty of options available to implement this adaptation, but I would recommend a free jQuery responsive menu plugin called MeanMenu.
Images Rendered by Pixels
When possible, use percentages instead of pixels when you declare sizes for your images. If you use pixel-based rendering, you will need to use a bunch of media queries to tweak the image sizes at different mobile resolutions. If you fail to assign proper revisions at resolution break points, you risk disrupting the responsive website design. A common trick that I use is to just declare one dimension of the image (for example, only declare width=”80%” in the HTML document). When doing so, the height value will automatically be adjusted proportionally to the width value.
Missing Critical Information
You want your customers to know what, when, where, and how to buy from you. These vital tidbits of information should be readily accessible and prominently displayed on the mobile version of your homepage. Promoting the history of your company is great, but should not take precedence over what your website visitors are looking for.
Imagine being a customer who only wants a phone number to call about a service, or an address they can visit your storefront. If this potential customer is viewing your website on their mobile device and it does not have a link to all your pertinent information, your lead is most likely lost. Always make it easy for customers to contact and buy from you, even on your traditional non-mobile website.