Does Your Website Need a Mobile Makeover? 8 Mobile Optimization Tips To Improve Your Site’s UX

The world is rapidly going mobile, and if you haven’t already built a mobile version of your website yet, then your competition will gladly take care of this part for you…by taking your mobile visitors away from you.

Here’s a great example of how a “mobile makeover” can drastically change the experience for your mobile visitors. Just take a look:

asdf

Before and after mobile optimization. The difference is obvious.

Today we are going to go over some simple guidelines to ensure your website’s mobile experience is designed to please and convert!

1. Keep Your Mobile Site Simple, Consistent and Easily Navigable

Remember, mobile screens are much smaller to navigate than desktop and laptop screens so only give essential information you need to make the user experience pleasant and clear. Too much information can be distracting and frustrating to a viewer on such a small screen. Below are a few things to keep in mind:

  • Keep your page from being content heavy with excessive information.
  • Prioritize the content that users need most.
  • Make sure the landing page is clean, clear and concise. Visitors can always click through buttons to access more information on a secondary page.
  • Keep important features and structure consistent across the entire site (menu options, back-to-home screen, etc.)
  • Lead your potential customer to the heart of the information, making a clear path to the action you want visitors to complete (buy now, rsvp, download, submit, visit, etc.)
  • Make sure to use as few form fields as possible (no more than 6) to keep the page neat and streamlined.
  • If your site is on the complex side, make sure to include a search bar for easy navigation.

asdf

2. Provide an Easy Scroll Experience

Do not set up your user experience to be a “pinch and zoom” situation. You will lose most customers with all of the hassle this creates, especially if you are asking them to fill out a survey or extended form field.

Use checkable boxes and scrolling menu bars to simplify the data entry process. By reducing the content on your page, you have the option to make the text size a little bigger (i.e. legible on a small screen). This makes the essential information on the page accessible in one easy vertical scroll.

Also, make sure the action buttons are of a decent size and have enough space in between each for easy navigation with fingers. Always keep in mind you are making a page where visitors will be using their fingers instead of a mouse arrow.

asdf

Sample screenshot from 1800 flowers’ mobile shopping experience. Notice the clear organization of categories, consistent menu bar at the bottom of the page and generous space between buttons with larger, legible font.

3. Keep the Font Size Legible and Large

The goal should be to draw the average viewer in with easily legible text, eliminating the need to zoom in on the screen. You don’t want your viewer squinting to read text or unable to discern the letters so we suggest using at least a 14 point font size. Keep the fonts structured and less stylized. Here are some beautiful, more design savvy fonts that are legible and will look fantastic.

asdf

4. Talk in Sound Bites

Keep your text short, sweet and to the point. Make it catchy. Create memorable phrases that your audience can easily tweet out and repost. You can also include a short testimonial from a satisfied customer. Your mobile landing page is where you should consider using the following:

  • Titles
  • Slogans
  • Mission Statements
  • Short Descriptive Phrases
  • Action Buttons
  • Scroll Menus (keep your content in lists)
  • Bullet Points (instead of paragraphs)

Here are a few examples:

  • “Danny’s is the best pizza in town!” – customer testimonial
  • Enter to win a year’s supply of our new products! – new store contest
  • Business is what we do – corporate slogan
  • Sign up for neighborhood discounts today! -local business deals
  • Save big on your next meal! -download coupon for a restaurant
  • “Keeping you one step ahead of the rest” – shoe company slogan
  • Want clear and healthy skin? Get 25% off our most popular package. -skin care company
  • BUY NOW, REGISTER, RSVP, ENTER, DOWNLOAD, etc.
  • Sleek and Sophisticated. Be on every turn of the society pages. – luxury brand designer
  • “To bring inspiration and innovation to every athlete in the world. If you have a body, you are an athlete.” – Nike’s mission statement

asdf

Notice the short and punchy description lines, clear action buttons, clean backgrounds and complimentary photos and text color in these examples.

5. Let the Imagery Speak

In a visually tight space like mobile, image choice is a great way to quickly sum up your message. The right image can speak volumes evoking a visceral experience and connection from your viewer that might not be possible to do with only text on the smaller mobile screens. When choosing imagery, here are a few things to remember:

  • Choose an image that will draw your audience in and incorporate a matching seamless background.
  • Another option is to use a non-distracting photo or abstract image as the background of your page.
  • Avoid choosing harsh and clashing colors for your image or background. Neon yellow and other similar color are hard to look at on screen and do not make your page pleasant to view.
  • Do not let the background visually compete with the text, so make sure the text color is easily visible on the background and does not get lost in a pattern.
  • Always remember to size your photos for web and compress them so your viewers will enjoy faster image loading time on the site.
  • Keep a complimentary color palette in mind when creating your page. It is important to use colors that are complementary to the imagery you have chosen, creating a visual experience that is pleasing to the eye and not too distracting.

asdf

Here are a few more examples of complimentary photo, text and background usage. Choosing an image that picks up a color in the logo is always a nice touch.

6. Make Sure it Scales

It is a shame to have a beautiful page that does not scale to all of the different mobile devices out there. There are over 500 different screen sizes between Android, iPhone, windows, blackberry and tablets, making it a challenge to have a truly mobile optimized device ubiquitous landing page.

Try to follow these three guidelines for scalability:

  1. Make sure your page scales to both landscape and portrait views.
  2. Avoid coding your mobile site in Flash or using Flash video if you can because it does not load on all devices (mainly iPad and iPhone).
  3. It’s recommended to create your mobile site in HTML 5 because it solves many problems of flash on mobile.

Finally, Google announced last September that websites that are optimized for mobile will factor into ad quality. So if you want to keep your Quality Score up and continue to run a smooth Adwords campaign, you should probably start thinking about making some well designed mobile landing pages immediately!

7. Set Up Your Own Analytics

It is a good idea to set up a plan for tracking your analytics in advance. One stunning reason why is that two thirds of mobile traffic does not allow third party cookies. This can make it really difficult to track the effectiveness of your mobile advertisement performance.

For example, iPad and iPhone do not allow cookies unless you turn them on manually. And you can’t assume that consumers will turn them on.

The solution to this is to use analytics software that uses 1st party cookies to track visitors. Ultimately, you should track conversions and conduct A/B or multivariate testing to improve your site’s goal performance.

8. Make Interface Actions Easy

Remember, your visitors are viewing your page on a phone and there are plenty of easy action options to provide for them.

Consumers search locally all the time so make it easy for them to find you and connect. When using icons and action buttons, make sure to use universal symbols so your visitors can easily understand what to do and where to do it on your page.

Consider including:

  • Click to Call
  • Maps
  • Facebook
  • Twitter
  • Foursquare
  • Email
  • Linkedin
  • Tumblr
  • Form Field Submissions
  • 1 Stop Checkout
  • Visit a URL
  • Play a Video

asdf

This is a good example of mobile friendly, universal menu and content buttons.

Time To Get Moving!

The bottom line is advertisers and businesses must pay attention to consumer behavior because consumers will be expecting a consistent and dynamic presence on all mobile devices. Mobile is quickly becoming to consumers what web used to be – an intent driven space.

Any searches or ads clicked through on mobile will most likely be acted on within 24 hours, if not at the moment of engagement. Currently, mobile ad space is 10% cheaper than on web, so now is the time to buy into mobile before the prices rise with the standardization and optimization of mobile practices. With these standards in place, mobile is on course to become a 20.6 billion dollar market by 2015.

In order for businesses to achieve their highest potential and profit in mobile, they need a seamless mobile strategy that includes banner ad placement, a correlating mobile landing page and a mobile optimized site.

Many times a mobile landing page will route mobile viewers to the advertised business’s unoptimized website where the potential customer is lost (known as bounce rate) due to jumbled, small and confusing content. In some cases, the page might even appear blank if it was created on a platform that does not work well on mobile devices.

The message is clear: If your business does not have a mobile strategy in place, you need to stop what you are doing and optimize for mobile so you can drop in at full force and ride the mobile wave all the way in!

About the Author: Duffy-Marie Arnoult is the Director of New Media at PageWoo – Create dynamic mobile banner ads and landing pages that are optimized for tracking conversions and scaling to every screen resolution. Follow us on Twitter at @pagewoo.

  1. Ironically, this article looked terrible on iPad. (It opened using Onswipe reader).

    Text was overlaid on other text, and the example images were all over the place.

    However, the “desktop article” version was fine.

  2. The article looked great on the iPhone. Good article, compelling points made. Luke Wroblewski has some excellent articles about UX and the rise of mobile in e-commerce, worth looking at.

  3. Thank you for a great summary!

  4. Great summary for mobile content developer – this is worthy of bookmarking.

  5. Very few of your competitors are using the new mobile web technology. Get in now and start leading the pack. If your company does not have a mobile presence, you risk losing ground to your competition that do. You also risk failing to connect with users, and miss out on opportunities to extend and strengthen your brand.

    Here’s what you get with our Professional Mobile Marketing Services

    - We will register the .mobi domain of your choice and transfer ownership to you.

    - We will create a professionally designed mobile website that mobile phone surfers can easily navigate.

    - Professional hosting of your mobile website. You can optionally choose to have your mobile site hosted on your current web server.

    - Submit your mobile website to the top 10 mobile directories so mobile device users can find you.

    - Provide you with simple instructions for optimizing the marketing potential of your mobile website.

    Get your FREE copy of our Mobile Impact Report and Learn More About Why You Should Immediately Implement a Mobile Marketing Presence.

  6. Anchor text, lot’s of anchor text makes for easy navigation.

  7. Good informative post. Mobile sites are more user friendly, and easily accessible.

  8. Great Post! I also believe that mobile marketing will play a big part on business etc in year 2014. We are actually planning to do a free mobile web to small businesses in our areas. Thanks to this great review!

  9. This solution is good but when a website has a really heavy homepage like ours the result is not that attractive ( I tried to use the builder ). One important detail is that big brands can minimize information but some newer brands or services might look too simple on a mobile site and that can backfire too. Mobile sites do need strong branding in order to convert visitors, since most desktop sites work hard to present the product or service with as much information as possible.

  10. Great article. Just in time for websites to go mobile. Vuemobi.com

  11. Use checkable boxes and scrolling menu bars to simplify the data entry process. By reducing the content on your page, you have the option to make the text size a little bigger. This makes the essential information on the page accessible in one easy vertical scroll.

  12. There is surely an advantage if you have a website that is mobile friendly. A lot of people access the internet through their mobile gadgets, if you can make your website mobile-friendly there will be a huge difference in the speed loading time and visitors won’t need to wait long until your website loads.

Comments are closed.

← Previous ArticleNext Article →