Making a site mobile-friendly often means making some cuts

Your site needs to be mobile-friendly. It’s 2016, everyone has a smart phone. In fact, some people have smart phones but don’t have a computer. (I know! It seems crazy to me too, but it’s true!) So it’s really important that your site be mobile-friendly.

In the world of responsive design, that usually means that as the device gets smaller, your content rearranges to fit within the viewport on the device. That makes sense. But have you considered how much content is often on a website page? Sometimes, there’s a lot. And often times, that’s way too much for your mobile viewer.

People who are using their phone to view your site aren’t usually as interested in your design, your pretty photos, or your giant infographics. Someone who lands on your site using their phone is more often than not looking for content. So it’s important when making decisions about what goes on the site for mobile users, that you understand that you may have to pare down your graphics, and even some of your content, to better present your site to those on phones.

For example, everyone likes a slider on their homepage. Even when I tell them that they are mostly ignored, people still want them. And they do look nice. But if you think a slider might get ignored on your desktop version, it is completely wasted space on the mobile view. Consider that the person reading your content is going to be scrolling with their finger. If you keep every graphic and item on your desktop version on your mobile version, then your user is going to scrolling and scrolling to find what they want.

When it comes to mobile, simple is best.

When making changes for your mobile viewers, here are some tips to help pare down your content:

  • Remove sliders. They are mostly useless on mobile viewports.
  • Adjust your font sizes. Make your heading sizes smaller and your paragraph sizes larger. People need to be able to read your content, and if your text is 12px then it’s hard to read on the phone. Having an h1 at size 40 can look great on the desktop view, but on a mobile it will take up the entire screen. Use appropriate text sizes.
  • Eliminate graphics that are just for appearance sake. For example, your about page may have four or five pictures of you and your team. How many do you really need to get your point across? Take it down to one for the mobile version.
  • Don’t use tables. Tables are a great way to present data, but they can only smush so much and when you try to view it on a phone, it’ll likely wind up going off the edge of the screen.
  • Cut down extra buttons and links. On your desktop view, you might be included to have extra buttons to different pages, with blurbs about what’s on them, or other call to actions. And don’t get me wrong, I love calls to action! But having a lot of that on a mobile view is too much to scroll through and is distracting from the content. Mobile users know how to use the menu.

The basic message here, when it comes to your website, eliminate the fluff and give them the content they are looking for. If your mobile users can’t find the content they want through all your pretty graphics and fancy design, they’ll leave your site, and that’s not what you want.

Share this post:

Amy Masson

Amy is the co-owner, developer, and website strategist for Sumy Designs. She's been making websites with WordPress since 2006 and is passionate about making sure websites are as functional as they are beautiful.

2 Comments

  1. Anton on February 17, 2016 at 3:57 am

    I was thinking the same thing couple of days ago! Great post

    • Amy on February 17, 2016 at 12:31 pm

      Thanks, Anton!

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Posted in

Join our list!

Our blog, delivered to your inbox. Never miss a post!