Site   Web

August 8, 2014

Understanding Mobile Responsiveness for Non-Developers

Photo Credit: Responsive Web Design Process by Reinier Sierag Licensed under CC BY-NC-SA 2.0
Photo Credit: Responsive Web Design Process by Reinier Sierag Licensed under CC BY-NC-SA 2.0

Mobile responsive seems like such a simple concept. It isn’t. Mobile friendly, mobile ready, mobile optimized, mobile responsive are each different. While your site must be usable on mobile devices, how you make that happen requires understanding how they differ.

There is a huge debate still going on in the development world regarding whether mobile optimized, mobile responsive or adaptive design is superior. One thing they do all agree on is that a site must work on mobile devices. The disagreement is about how best to achieve that goal.

Not Mobile Ready or Friendly

Sites may fail to display properly on mobile devices. This can most easily be seen when headers, images and videos fail to resize. Instead of an entire image or video, you may see only see part of it.

Other issues include navigation that is difficult or impossible to use and social sharing buttons that fail to work. How critical these issues are will depend upon what you need your users to do (such as buy products) and what percentage of your traffic is currently coming from mobile. 15-16% is now common and expected to continue to rise quickly.

Defining Terminology

  • Mobile friendly:  sites look the same and are fully functional on mobile devices although users usually still need to zoom to read text; may not work perfectly on a touch screen
  • Mobile ready: a site is capable of working on mobiles although little work has been done to make it properly responsive
  • Mobile optimized: using a separate site specifically for mobile devices; some users object to seeing totally different content on mobile; some provide a button to get to the PC version
  • Mobile responsive: automatically resizes content for each device
  • Progressive enhancement through adaptive design: different versions for different target devices; using layers to add different functionality for various devices
  • Mobile first: mobile first means exactly that – it’s default styles are mobile and then if the screen size is larger than mobile size additional styles are applied that make it look good on desktop

This video shows the difference between one site whose adaptive mobile is a separate site and a mobile responsive site:

How Mobile is Different

While it is obvious that the screen size is smaller, there are other important factors every site owner and blogger need to know.

  • Mobile devices use mobile access which is slower and limits bandwidth
  • Flash only works with an add-on battery-hungry app which most won’t have
  • Typing is more challenging so input should be limited

Sites for mobile devices need to load faster and be easy to navigate – typically with both thumbs.

Testing Your Site for Mobile Responsiveness

Don’t be dismayed if your site fails badly using the W3C.org mobileOK Checker. Even Google.com only rates a 55% mobile responsiveness score. Developer Billy Patton of PattonWebz.com recommends using http://developers.google.com/speed/pagespeed/insights/ instead. His advice:

“Most sites I check score ~55 on the mobile tests – that includes WordPress sites. Those sites can usually make simple changes to improve their scores, but once you reach around 75-80 it gets much more difficult from a technical perspective to improve farther. At that point, for most people, a better use of their time would be to accept the score and focus on something else of benefit.”

Examples of Mobile Friendly Sites

How will you know if your site is working well enough for mobile? You could compare yours to eConsultancy’s Responsive design: 25 of the best sites from 2013 or SearchEngineJournal’s Top 10 Responsive Design Sites for Mobile 2014. But what really matters is that your site actually works when viewed on mobile devices.

How to Make Your Site Work on Mobile Devices

If you’re using WordPress, you will need a mobile responsive theme, possibly additional code to make images resize, and most likely a plugin to resize videos. Silly me, I thought having a mobile responsive theme would be all you need, didn’t you?

Early “mobile responsive” themes really weren’t. What they were is “mobile responsive ready” in that they would resize images and videos only if you had the code for the images in the theme or added manually and a plugin for the videos.

If you built your site in a website builder, check to ensure it works on mobile devices. Their site should indicate their mobile status. For example, IM Creator is mobile ready / mobile friendly, but not mobile responsive.  As long as the site does work on mobile that is sufficient for most sites.

Embedding Videos

Making videos resize properly is one of the more confusing aspects of getting your site to work on mobile devices. There are multiple ways to add videos to content:

  • Original YouTube embed code aka old embed code – DO NOT USE any more because it only works in Flash and mobile devices do not use Flash (unless they use an app which is a battery hog so unlikely to be popular)
  • iFrame code ~ visible in both html5 or Flash (can be centered and uses specific video sizes, complicating viewing them on mobile, but specifies the size of the video)
  • oEmbed enabled sites like YouTube will call the video using just the link (Drawback: the videos are usually too small and you can’t center them without causing the video to not display at all)

Some of these specify the size of the video which is why you need a plugin to change that size.

If you use a “mobile responsive” WordPress theme be sure to verify that it resizes images and videos. For example, StudioPress does not automatically resize videos in their mobile responsive themes. They recommend using the FitVids for WordPress plugin to make videos mobile responsive.

When writing for other blogs, be sure to ask what method they prefer and the optimum width for videos and images. (Often they won’t know, but at least you did ask.)

Summary

Hopefully now you understand what the various terminologies mean well enough to be able to participate in discussions regarding how best to ensure your sites work on all devices.


avatar

Gail Gardner provides small business marketing strategy at GrowMap.com and answers questions on live chat as the community manager at SocialImplications.com.

Submit a Comment

Your email address will not be published. Required fields are marked *






You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 5,181,045 bad guys.

css.php