Is your Website Mobile Friendly? 

We live in a mobile world and it’s critical that your website is mobile-friendly. I am going to provide you steps on how to do this.

Mobile Optimization

First and foremost, let’s define what we mean by mobile optimize. Mobile Optimization simply means that your website provides a compelling user experience for whatever device and network your site visitors and or a machine, like a search engine, may be using to view your site. It could be coming from a feature phone, thousands of different kinds of SmartPhones, hundreds of different types of browsers, tablets, a television, and in the near future, smart watches, connected cars, heads-up displays like Google Glass, flexible display papers, or any number of different screens.

However, I don’t want us to get too far ahead. There are a number of things you need to consider such as device attributes, the design of your site, the content for your site, and then the development. Device Attibutes. When you’re designing your site, you want to remember that the medium is the message.

Moreover, the message will affect the experience the consumer has with the medium. Devices, just like people, come in all shapes and sizes. There are thousands of devices, each with hundreds of attributes that you should be aware of and take into consideration when developing your site. The key attributes that you should be considering are device type, operating system, browser, and screen resolution. The device type attribute can be broken down to a few attributes, including the type of device the consumer has such as a tablet, SmartPhone, as well as their operating system … … is it running Apple iOS or Android? Or the browser that’s on the device, the type of browser being used like Safari or Chrome, Firefox.

Screen resolution

You also want to take into consideration the screen resolution that the device has. High resolution screens demand that you create higher resolution images. Everything from 42 pixels width to 12 pixels high, all the way up to 2040 pixels wide and 1530 pixels high. To put this pixel concept in perspective, Desktop and laptop computers are often 1024 x 768.

iPhones are at 1136 x 640, iPads in the 1st and 2nd Generations fall in that 1024 x 768 whereas the 3rd Generation is in the 24 x 1536. This is the high resolution retina displays. Android devices cover a wide spectrum of device types and screen resolutions as well. Again, this is just a few of the parameters that developers in leading mobile platforms take into account when rendering mobile sites on a phone. One solution provider, Medialex, their system considers over 260,000 different parameters when considering how to render advertising and sites on a phone. Your developers and or the platforms you use will dynamically handle this for you.

Design

For basic mobile web development, the most important attribute to consider is the screen size. Since this will be the attribute that most affects the overall design, navigation, and experience the consumer will have with your site. When designing your site, keep it simple. That is, you need to limit your text and images, keep forms limited to as few fields as possible, make sure your contact information is easily accessed, and that the users can always get back to the home page with one click.

Think in terms of collapsible columns and layouts with each column being the size of a standard SmartPhone. This way, the site should render clearly across all of the various devices that might try to access it. It will limit the scrolling and panning that the consumer may need to do with their thumbs or fingers. Think tapping, not clicking. This means your links and buttons needs to easily be tapped with a finger as opposed to with a click of a mouse. That means your images need to be a little bit bigger than what you might expect.

Expanding menus

Include menus that expand rather than taking up real estate on a page. Keep titles short and easily readable. Add a search bar. Put a search bar at the top of the page or main menu. This will allow people to easily dig in and gain access to the content within your site without having to browse around too much.

Content

Make sure your content is relevant and snackable. Content relevance means that you’ve done your homework, that you reviewed your web logs, and talked to a number of your customers and found out exactly what kind of content they want and where they want it. You’ll put the most important content near the top of your pages, and the least important content on the bottom of your pages or in secondary pages.

It also means that you don’t overload the site with unnecessary images or videos. Keep your site snackable means that your headlines and text are concise, to the point. If people want more detail, they’ll tap on the links or they’ll just give you a call. Also, when it comes to your content, it’s a good idea to include sharing and “read it later” links.

Call to action

You need to make sure your call to actions are front and center and clear. Don’t make people guess what you want them to do. Be clear.

For example, fill out this form, register for this webinar, buy this product, redeem your coupon. If they’re interested, they’ll tap. If they’re not, they won’t.

Development

Mobile websites are just like desktop sites in that they’re written in html and display them on the device that’s accessing them. If your site does not take into account the design recommendations above, you’ll leave your consumer with poor experience. If it does, you have a good chance of getting it right.

Leave your comments below! We would love to read them 🙂