Mobile friendly website: What is it, and how do I do it?

What does “mobile friendly website” mean?

A mobile friendly website should:

1. Make information easy to find.
   Many mobile web users just want to look up information quickly on your website. Keep them coming back regularly by making your information front and center, easy to find as soon as they arrive.
2. Have text that is large enough to read on a small screen.
   Don’t force your mobile visitors to zoom in to read your text. Use an easy-to-read font and make the size large enough they can read it easily.
3. Be easy to navigate by scrolling vertically or using a menu.
   A mobile friendly website menu is often indicated by three stacked horizontal lines, sometimes called a “hamburger menu”, which looks like this image at right. This saves space and allows your visitor to know where to go to find your menu. The simpler you keep your mobile menu, the easier it will be for your visitor to navigate.
4. Have elements that may be placed differently than when you view the site on a computer.
   This is called “stacking.” This is a way to retain the important elements of your website, while changing the layout so the experience is user-friendly even on a smaller screen size. If your website doesn’t already do this, your website designer can help you.
5. Not require horizontal scrolling.
   While vertical scrolling is unavoidable unless you have a very small amount of content on each page, a mobile user shouldn’t have to scroll both vertically and horizontally to use your website. Make your website easy to view even at the smallest screen widths.
6. Have images that are an appropriate size for a small screen.
   Don’t make your images fall off the screen. Also, make sure they are retina-friendly for higher density screens. 
   
7. Be responsive: adjust to the size of the screen.
   As mentioned above, users shouldn’t have to scroll horizontally. Website elements should be “fluid” on the page, so content fits within well within any screen size. For example, “stack” sections so they show up one underneath the other instead of from side to side.
8. Be simple and unencumbered by excessive elements.
   Don’t overwhelm your mobile visitors with too much information and too many useless elements. Think about function and form when you create your mobile website. Consider hiding some elements of your site on the mobile version, or showing different or simplified versions of information to best fit your audience and their device.

How can I check whether my website is mobile friendly?

Well, method number one is of course checking it on your own smartphone, if you have one. But not everyone has the same phone, and some phones may display things differently.

So you can use different tools to check from your computer. Some options you might use to check your website’s mobile-friendliness are:

• A browser emulator like Browser Stack.
• Firefox’s developer tool: use “control-shift-M” to see a responsive design view.
• Chrome’s emulator tool: use “control-shift-M” to see a mobile emulator view.
• Edge’s emulator tool: use F12, and click on “Emulation,” then select your choice of desktop or mobile and the browser.
• Google’s “Mobile Friendly Test” tool.

My website is not mobile friendly, how do I fix it?

For a WordPress site, you can try using a plugin designed for this purpose, like WP Touch. Red Earth Design, Inc. can set this up for you and assist with selecting a theme that is close to your desktop website. The drawback of this type of solution is that it uses its own themes, so it won’t be an exact match for your website’s desktop theme.

For any type of site, you can enlist the help of your friendly web designer, who can make your site responsive and mobile friendly.