Three things you can do now to make your site mobile-friendly

How often do you find yourself looking up information on your phone? Your answer is most probably, “a lot.”

Whether you are in a coffee shop, restaurant or on public transportation, you will notice people constantly texting, accessing music or reading the news from their phones, iPad or Tablet.

Mobile web browsing is on the rise, and could potentially replace desktop browsing one day. According to the Pew Internet Project, 44% of Americans access the internet through their phones. The numbers will only get bigger as technology advances. So what can you do now to spruce up your existing site to make it more mobile?

Here are five things you or your organization can do now:

  • Focus on writing concise and compelling content. Eye tracking tests show that users generally read web pages in an “F” shape, focusing primarily on headlines and images, and only read the first few lines of content before moving on or skimming over the rest. A little extra attention to your content strategy can increase your readership and improve your SEO.
  • Keep it simple. Make your HTML structure and design as clean as possible to reduce the time a page takes to load.
    • Semantic code is important – remove unnecessary HTML elements and CSS styles that aren’t being used and condense what you are using
    • If your CMS allows, prevent areas that aren’t visible in the mobile view from being loaded instead of hiding them with CSS.
    • Optimize images for the web using Photoshop’s “Save for web and devices…” option – adjust the settings to reduce file size without losing visible image quality.
    • If possible, use a different, smaller image file on mobile, instead of loading the full size image and scaling it.
  • Use CSS media queries to prevent desktop styles from loading on mobile. For example, without media queries, if you use background images for the regular site and then override that style to use a replacement background image for mobile, the mobile device will still download the larger image, and then replace it with the mobile image.