Mobile website optimization

Mobile website optimization
9 October 2012 | | Creative Design, Internet, Marketing, Search Engine Optimisation, Technology

When planning/designing your mobile website for your dental practice, it is very important to abide by the latest mobile website optimization guidelines and trends. The key point that I want to promote is that a mobile website should be very different to your desktop/main website. By this I mean that the page design and layout and key feature that you wish to promote should be positioned/structured in such a way that the user visiting your dental mobile website can instantly see important features, for example blod telephone numbers and clear offers and call-to-actions. Content should also be reduced to the minumum possible, and images should be of a small file size to ensure fast loading times.

Landing pages can be used for PPC ads, mobile app downloads, promotional campaigns and more. Optimization tactics are intended to boost conversion, improve PPC quality scores, and provide a better user experience.

Yet with so many companies “not ready to do mobile”, the mobile landing page experience has basically been ignored. With mobile web use dramatically on the rise, marketers can no longer ignore the impact. There are over 4 billion mobile phones on the planet, and Google estimates by 2014 more people will use mobile phones than PCs to go online.

How much of your web traffic is mobile? Ten percent? Twenty percent? Do you even know?

A Case for the Mobile Landing Page…

When it comes to landing page optimization, a simple A/B test may yield a 20-30 percent increase in conversion. Although this is positive, such small incremental improvements don’t make much sense if a significant number of mobile visits are being ignored.

For example, let’s say 1,000 users visit your landing page, and 2 percent (20) of them convert. You do an A/B test, which improves conversion by 25 percent (5) users. Meanwhile, the mobile 15 percent (150) of your traffic visitors are virtually ignored and presented with a far-less-than-optimal experience. It’s logical to recognize that focusing on the 150 makes more sense than the 5 new conversions, especially since mobile users are more likely to convert.

“88% of mobile searchers take action within 24 hours.
About 70% take action within 1 hour.”

~ Google Mobile Movement Study, 2011

10 Ways to Make Your Landing Page Mobile-Friendly

It’s time to adapt your strategy. Instead of just designing a traditional landing page, plan to uniquely consider landing page content and layout for various devices and screens of all sizes – desktops, tablets, smartphones and beyond. Here are some tips to assist with planning:

1. Be Accessible

Ensure your content is available and visible for mobile devices. Flash, frames, PNG-24 images, and numerous plug-ins are not accessible for mobile.

Update your site with mobile-friendly alternatives like HTML5, jQuery, and JPG or GIF image formats.

“40% turn to a competitor’s site after a bad mobile experience.”
~ Compuware, “What Users Want from Mobile”, 2011

2. Be Fast

Your mobile pages should be lightweight (less than 20 KB total) and minimally load in under 5 seconds.

The top slowdown factors for mobile pages are the number of requests (loaded images, scripts, etc.) followed the number of bytes (page size), so strategize accordingly.

Consolidate or eliminate scripts, resize and save mobile-optimized images, leverage image sprites to enable caching one image versus many, use CSS in place of images, and apply additional mobile web performance optimization tips to your code and content as needed.

Tools like W3C Mobile OK, mobiReady, or Mobitest can be used to determine the load time and size of your landing pages.

“43% are unlikely to return to a slow-loading mobile site.
74% of mobile users wait up to 5 seconds; 60% wait 3 seconds or less.”

~ Compuware, “What Users Want from Mobile”, 2011

3. Be Orderly

For smartphones, present a single-column layout with the priority content at the top. Mobile users are goal-oriented versus the more benefit-oriented desktop users, so always feature call-to-action task completion content (e.g., click-to-call, find a store) “above the fold” or within the top 100 pixels for smartphones.

If your call-to-action (CTA) is potentially lower on the screen, be sure to present a teaser like “scroll down for offer” to retain engagement.

4. Be Brief

Depending upon the verbosity of your traditional landing page, there’s a good chance you’ll need to cut copy in half for mobile optimization.

Screen size varies, so reduction may be about 65 percent for tablets and 35 percent for smartphones.

In other words, trim six-word headings to three or four, and trim five bullets to two or three.

Tip: Plan landing page content with mobile first to avoid the need for variations across screen sizes.

Mobile headings should ideally be only 3-4 words.

It’s still important to sell the content. Leverage creative copywriting and consider visualizing benefits as icons to replace or reduce the copy.

Every single word should add value or get cut.

5. Be Legible

Users should be able to read the page without zooming. The minimum font-size should ideally be about 16 pixels, the 100% default for browsers.

Google recommends an arm’s length as a legibility guide for mobile.

A simple color palette, strong contrast between text and backgrounds, and adequate negative space between elements also play a large part in legibility.

6. Be Call-Friendly

The top mobile user action for both SEO and PPC is making a phone call, so ensure your full phone number is visible at the top of the page.

“61% of mobile users call after a local business search.”
~ Google Mobile Movement Study, 2011

Users should be able to tap/click the phone number to initiate a call, so enable click-to-call functionality by making the number a hyperlink with the tel: protocol. (See RFC 3966 for tel URI specifications.)

Example hyperlink value:  “tel:+16515551212”

Example HTML:
Call Now! (651) 555-1212

Click to Call (CTC) Tips:

  • Always include the international prefix (a leading “+” character followed by the country code) to ensure it works for users outside the home country
  • Include a phone icon for quick visual association
  • Include a call-to-action in the link text
    (e.g., Call Now, Contact Support, Tap to Call, etc.)
  • Keep the phone # in the link text for transparency and easy verbal sharing
  • Display office hours as nearby (It’s extremely frustrating to make a call only to find out a place is closed!)
  • Include useful and/or enticing context (e.g., guarantee, promotion, testimony, etc.)
  • Style the link as a button in a complementary color so it stands out (Use CSS3 buttons that don’t require images for lightweight responsive design)

All of these CTC tips are good factors to consider for A/B testing!

7. Be Thumb-Friendly

Small, compact content is challenging to click for mobile. Don’t give users a fat-finger weight complex! All actionable targets should be clickable without zooming.

Design your clickable targets (links, buttons, icons, form fields, etc.) to be touch-friendly – fully and easily operable by fingers and thumbs.

Minimum target area suggestions:
Microsoft: 38×38 pixels (0.25″), Apple: 44×44 pixels (0.30″)

Note: Pixel resolution varies across handsets, so buffer and test accordingly.

  • Add padding to links (e.g., 0.85em or 85% for text)
  • Ensure clickable images (e.g., social icons) are sized near the minimum target area
  • Use margin (negative space) between clickable areas to avoid a misclick
  • Pad fields and check boxes to make selection easier
  • Leverage JavaScript (jQuery) plug-ins with touch swipe gestures (e.g., Flexslider, Photoswipe)

8. Be Local

A mobile user’s geolocation can typically be determined within 5 to 20 miles based on their IP address without the user explicitly disclosing their location. Based on an IP address (a.k.a. geoIP), several details of a web user’s location can be calculated – country, region (state/province), ZIP code, metro area (e.g., Twin Cities), city, latitude, longitude, area code, weather station, and more. Yup. This is a gold mine for personalizing content to convert!

The MaxMind GeoIP City Database accuracy in the US is 99.8 percent for country, 90 percent for state, and 81 percent for city. Although not perfect, this data is awesome for dynamic suggestions and defaulting contact fields.

Leverage geoIP data to provide faster, locally relevant, and personalized landing page experiences.

  • Personalize headings with city or metro area names
  • List a nearby representatives or locations (e.g., “Stores near Minneapolis”)
  • Regionalize “voice” to use local terms or slang (e.g., y’all, coke/soda/pop)
  • Re-center and zoom maps to the user’s location
  • Pre-populate location fields on web forms
    (Tip: Default ZIP code from geoIP and then compute HIDDEN city, state, and country field values from the ZIP!)

9. Be Form-Simple

Mobile landing page forms should be extremely short. Target seven or less fields (one to three is ideal) anticipating each additional field to potentially reduce conversion by 50 percent. Never include non-required fields.

Only show fields imperative for urgent data collection, and evaluate options to otherwise capture or compute data at a later time. The key is to get users to submit the minimum lead data (like name and email) necessary for you to respond.

If you must have several fields, consider a two-step form process (see pictured example) since it appears like fewer steps. It also comes in handy for segmenting content specific to step-one selections.

HTML5 Input Types

To aid usability, leverage HTML5 input types – number, telephone, URL, and email – for their unique data input keyboards. These render as basic input text for older systems. View this HTML5 input types test page from your mobile device to see it in action. (Scan the provided QR code or visit as a mobile shortcut!)

10. Be Action-Compelling

The purpose of the page should be obvious, compelling and readily visible as an action.

To optimize landing page conversion, limit the number of “actions” to three or less for mobile. An “action” constitutes any task the user could do on the page – a link, a like, a share, a video view, a form submission, a menu expand, or any other tap/click/swipe gesture.

More posts from our team

Previous Post:
Next Post:

Back to all news

Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents