10 Tips for Creating & Designing a Mobile-Friendly Website

Tech Tips

10 Tips for Creating & Designing a Mobile-Friendly Website

You may have noticed that some websites just look awful on your smartphone. It’s not your phone’s fault — many site owners haven’t done what they need to do to make their info friendly for your device.

And for a while now, search engines have actually given preference to sites with mobile-friendly design. That makes sense, considering that mobile browsers made up 1/3 of all web traffic in 2015, a percentage that’s grown quickly each year in the past few years. If you’re responsible for a website, make sure you’ve thought about the factors that make it mobile-friendly (without making the desktop experience a drag, either).

  1. Do not create a separate mobile site. When smartphones first came about, many web publishers designed a separate mobile site designed just for phones. This is now frowned on by many search engines, and it can drive your users crazy when you don’t keep your sites in sync, anyway.
  2. Use responsive design. Whether you’re choosing from a template library or designing your own site, make sure you use responsive design. This lets your website adapt to the window size of your user’s screen. (If you’re wondering whether a site you visit on your laptop or desktop is responsive, just resize the browser window to a tablet or smartphone size. If it’s responsive, it will adjust on the fly as you move the window.)
  3. Provide a link to the full site, if you limit the information for a phone’s view. There’s nothing worse than being stuck with only a phone and you can’t get past a mobile gate to pay a bill or find the info you need on the full website.
  4. Design each page for optimal load speeds.  It’s a bad idea to make visitors and customers of your site wait too long for pages to load in their browser. Use a tool like PageSpeed Insights to make sure each page is “rendering” as fast as they should be, according to your industry or competitors.
  5. Check your site design on a variety of mobile screens. Some designers keep a full library of common phone and tablet models just for this purpose! You don’t have to buy all the common devices to check your site, though. You can start with the mobile-friendly tests from Google and Bing. And mobile template company Studiopress offers a mobile site simulator for a variety of screen widths.
  6. Use YouTube or another mobile-friendly video service. They’ve already done the hard work to make your video mobile-friendly — so just upload your video, embed it, and you’re done!
  7. Check your forms. Lots of otherwise-good sites fail the mobile form test miserably. If your site has any forms, try filling them out on a smartphone.
  8. Use large enough font sizes. Remember, the smaller the font, the harder people viewing your site on their phone will have reading through it.  You should avoid forcing visitors to use pinch to zoom as much as possible.
  9. Space ‘touch’ elements far enough apart. Buttons and links placed too close to one another can cause visitors to tap in error.
  10. Think both small AND bigAlthough optimizing websites for small screens is extremely important, creating a responsive design goes beyond mobile devices.  Make sure the experience is good for both big and small layouts, because about 42% of online traffic still comes from desktop visitors. One key example: Ensure all images don’t lose their quality as they scale up for bigger screens.

For more tips and quick fixes on optimizing your website for mobile devices, watch the video below:

Above all, keep an ear to the ground. Make sure the mobile site works by testing the site (and several common tasks) with a few real-life customers too.