Does your site require a mobile makeover? 8 mobile optimization ideas to enhance your site’s ux

The planet is quickly going mobile, and when you haven’t already built a mobile form of your site yet, your competition will happily take proper care of this part for you…if you take your mobile visitors from you.

Here’s an excellent illustration of the way a “mobile makeover” can drastically alter the experience for the mobile visitors. Just have a look:


Pre and post mobile optimization. The main difference is apparent.

Today we will review some simple guidelines to make sure your website’s mobile experience is made to please and convert!

Remember, mobile screens tend to be smaller sized to navigate than desktop and laptop screens so only give essential important information to help make the consumer experience enjoyable and obvious. An excessive amount of information could be distracting and frustrating to some viewer on this type of small screen. Here are a couple of items to bear in mind:

  • Keep the page from being content heavy with excessive information.
  • Prioritize the information that users need most.
  • Make certain the website landing page is clean, obvious and concise. Visitors can invariably click on buttons to gain access to a lot of another page.
  • Keep important features and structure consistent over the entire site (menu options, back-to-desltop, etc.)
  • Lead your possible client towards the heart from the information, creating a obvious road to the experience you would like people to complete (buy now, rsvp, download, submit, visit, etc.)
  • Make certain for couple of form fields as you possibly can (a maximum of 6) to help keep the page and also streamlined.
  • If your internet site is around the complex side, make certain to incorporate searching bar for simple navigation.


2. Offer an Easy Scroll Experience

Don’t setup your consumer experience to become a “pinch and zoom” situation. You’ll lose most customers with all the hassle this creates, particularly if you are asking to complete market research or extended form field.

Use checkable boxes and scrolling menu bars to simplify the information entry process. By reduction of the information in your page, you can result in the text size just a little bigger (i.e. legible on the small screen). This will make the fundamental info on the page available in one particular vertical scroll.

Also, make certain the experience buttons have a good size and also have enough space among each for simple navigation with fingers. Always bear in mind you’re making a webpage where visitors is going to be utilizing their fingers rather of the mouse arrow.


Sample screenshot from 1800 flowers’ mobile shopping experience. Spot the obvious organization of groups, consistent menu bar at the end from the page and generous space between buttons with bigger, legible font.

3. Keep your Font Size Legible and enormous

The aim ought to be to draw the typical viewer along with easily legible text, eliminating the necessity to focus on screen. You do not would like your viewer squinting to see text or not able to discern the letters therefore we suggest using a minimum of a 14 point font size. Keep your fonts structured and fewer stylized. Here are a few beautiful, more design savvy fonts which are legible and can look great.


4. Talk in Seem Bites

Keep the text short, sweet and to the stage. Allow it to be appealing. Create memorable phrases that the audience can certainly tweet out and repost. You may also incorporate a short testimonial from the satisfied customer. Your mobile website landing page is to should think about while using following:

  • Titles
  • Slogans
  • Mission Statements
  • Short Descriptive Phrases
  • Action Buttons
  • Scroll Menus (keep the content in lists)
  • Summary Sentences (rather of sentences)

Listed here are a couple of examples:

  • “Danny’s is the greatest pizza around!Inches – customer testimonial
  • Enter to win a year’s way to obtain our new items! – new store contest
  • Clients are what we should do – corporate slogan
  • Join neighborhood discounts today! -local company deals
  • Spend less in your next meal! -download coupon for any restaurant
  • “Keeping you a measure in front of the rest” – shoe company slogan
  • Want obvious and healthy skin? Get 25% off our most widely used package. -skincare company
  • Sleek and complicated. Perform every turn from the society pages. – luxury brand designer
  • “To bring inspiration and innovation to each athlete on the planet. For those who have an appearance, you’re an athlete.” – Nike’s mission statement


Spot the short and punchy description lines, obvious action buttons, clean backgrounds and complimentary photos and text color during these examples.

5. Allow the Imagery Speak

Inside a visually tight space like mobile, image option is a terrific way to rapidly summarize your message. The best image can speak volumes evoking a visceral experience and connection out of your viewer that may not be possible related to only text around the smaller sized mobile screens. When selecting imagery, listed here are a couple of thing to remember:

  • Choose a picture which will draw your audience in and add a matching seamless background.
  • An alternative choice is by using a non-distracting photo or abstract image because the background of the page.
  • Avoid selecting harsh and clashing colors for the image or background. Neon yellow along with other similar color are difficult to check out on the watch’s screen and don’t help make your page enjoyable to see.
  • Don’t let the backdrop visually contend with the written text, so make certain the written text color is definitely visible around the background and doesn’t explore a design.
  • Remember to size your photos for web and compress them so that your viewers will love faster image load time on the website. ImageOptim and TinyPNG are great tools to lessen image size without having to sacrifice quality.
  • Have a complimentary color scheme in your mind when designing your page. You should use colors which are complementary towards the imagery you’ve selected, developing a visual experience that’s pleasing towards the eye and never too distracting.


Listed here are a couple of more types of complimentary photo, text and background usage. Selecting a picture that accumulates one within the emblem is definitely a pleasant touch.

6. Make Certain it Scales

It’s a shame to possess a beautiful page that doesn’t scale to all the various cellular devices available. You will find over 500 different screen sizes between Android, iPhone, home windows, blackberry and tablets, which makes it challenging to possess a truly mobile enhanced device ubiquitous website landing page.

Attempt to follow these 3 guidelines for scalability:
  1. Make certain your page scales to both landscape and portrait views.
  2. Avoid coding your mobile site in Flash or using Flash video if you’re able to because it doesn’t strain on all devices (mainly iPad and iPhone).
  3. It’s suggested to produce your mobile site in HTML 5 since it solves many problems of flash on mobile.

Finally, Google announced last September that websites which are enhanced for mobile will factor into ad quality. So if you wish to keep the Quality Score up and then operate a smooth Adwords campaign, you need to most likely start considering making some smartly designed mobile squeeze pages immediately!

7. Setup Your Personal Analytics

It may be beneficial to setup an agenda for tracking your analytics ahead of time. One stunning reason can you explain that sixty-six per cent of mobile traffic doesn’t allow 3rd party cookies. This makes it very hard to trace the potency of your mobile advertisement performance.

For instance, iPad and iPhone do not let cookies unless of course you switch them on by hand. And also you can’t think that consumers will turn them on.

The reply to this is by using analytics software that utilizes first party cookies to trace visitors. Ultimately, you need to track conversions and conduct A/B or multivariate testing to enhance your site’s goal performance.

8. Make Interface Actions Easy

Remember, these potential customers are viewing your page on the phone and there are many easy action options to maintain them.

Consumers search in your area constantly so allow these to help you find and fasten. When utilizing icons and action buttons, make certain to make use of universal symbols so that your visitors can certainly understand how to proceed where to get it done in your page.

Consider including:

  • Click to
  • Maps
  • Facebook
  • Twitter
  • Foursquare
  • Email
  • Linkedin
  • Tumblr
  • Form Field Submissions
  • 1 Stop Checkout
  • Go to a URL
  • Play a relevant video


This is an excellent illustration of mobile friendly, universal menu and content buttons.

Time For You To Get Going!

The end result is advertisers and companies must focus on consumer behavior because consumers is going to be expecting a regular and dynamic presence on all cellular devices. Mobile is rapidly becoming to consumers what web was once – an intent driven space.

Any searches or ads clicked through on mobile will likely be acted on within 24 hrs, otherwise right now of engagement. Presently, mobile ad’ space is 10% less expensive than on web, so this is the time to purchase into mobile prior to the prices rise using the standardization and optimization of mobile practices. Using these standards in position, mobile is on target to become 20.6 big market by 2015.

To ensure that companies to attain their greatest potential and profit in mobile, they require a seamless mobile strategy which includes advertising placement, a correlating mobile website landing page along with a mobile enhanced site.

Many occasions a mobile website landing page will route mobile viewers towards the marketed business’s unoptimized website in which the possible client sheds (referred to as bounce rate) because of jumbled, small , confusing content. In some instances, the page could even appear blank whether it was produced on the platform that doesn’t work nicely on cellular devices.

The content is obvious: In case your business doesn’t have a mobile strategy in position, you have to stop your work and optimize for mobile so that you can stop by at full pressure and ride the mobile wave completely in!

About the writer: Duffy-Marie Arnoult may be the Director of recent Media at PageWoo – Create dynamic mobile banner advertising and squeeze pages which are enhanced for tracking conversions and scaling to each screen resolution. Follow us on Twitter at @pagewoo.