Three Things You Can Do Now to Make Your Site Mobile-Friendly

Mobile BrowsingHow 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.
    Ex. 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.

Keep reading snack o’clock for more in-depth posts on mobile development and marketing in the future.

What kinds of tips and tricks do you have for optimizing websites for mobile, and what are you doing?

Categories: Design and Information Architecture | Tags: , | Bookmark the permalink.
Joeleen Kennedy

About Joeleen Kennedy

Joeleen Kennedy connects the technical and the beautiful as Matrix’s User Experience Lead, helping our designers and front-end developers create stunning, forward-thinking projects. Joeleen has a background in both web design and development, and loves the challenges of learning new tools and technology. When not in the office, you’ll find Joeleen knitting cool hats (sometimes for the Matrix staff!) and playing with her dogs, Charlie and Nemo.

1 thought on “Three Things You Can Do Now to Make Your Site Mobile-Friendly

  1. Yes! Thanks for mentioning the importance of crisp content! I am struck by how much easier it is to make a site mobile-friendly when good web writing is already in place. For those of us who may have been clinging to all our blahblahblah (unnecessary) text on our desktop sites, we now have to FINALLY clean up. And then clean up some more for mobile.

    p.s. We’re glad we have the Matrix Group team to take care of those geeky 2nd two bullet points for us.

Comments are closed.