Menu

Miniaturize or Mobilize – Fluid Design and ViewPort

Googlegeddon is here and people are worried about the impact that this change will have on their search engine ranking. Until recently, it was OK to design a site that ‘miniaturized’ because mobile devices are pretty sophisticated and can work it out. I am still hosting a fair number of sites that minaturize – here is an example: http://QuiltTallahassee.com. If you look at it on your mobile device, you will see it all shrinks down nicely and looks pretty decent but Google’s Mobile Friendly test has some issues with it:

  • Fonts are too small.
  • Navigation items are too close together.
  • The visitor has to ‘pinch and zoom’ to read the content.
  • There is no ‘viewport’ tag

Fonts should generally be 16px to be large enough to be easily read on a mobile device. For those of you who love your small fonts, sorry, they have to go. Readability on a small device is a big component in the overall mobile-friendly score. Fixing the navigation is a bigger problem and there are a number of ways to solve it. The most accepted way to present navigation on a mobile device is with a menu that collapses to ‘hamburger bars’ – the three bars at the upper left of the site that present the menu when tapped. I have found UberMenu to be the best WordPress plugin for adapting the menu so that it is responsive on mobile. You can get rid of ‘pinching and zooming’ the rest of your site by reworking the various elements so they are presented differently on mobile than on the desktop – this is called “responsive design”. Unlike the miniaturized site, a responsive, mobilized site is fluid and resizes based on the size of the viewing area of the device or ‘viewport’. The mobile browswer won’t know to do this without the presence of a ‘viewport’ tag in the head of the web page – this is how Google knows your site should be resized to fit the device asking for the page. Viewport tags can be configured many different ways but a basic viewport tag looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1;">

If you put a viewport tag in your website head without doing the responsive work to your site, you are going to get some really weird results as the browser attempts to figure out how to flow your content to the correct size for the device. There is no shortcut to reworking your website so it is fluid and adapts itself responsively to any screen size.

Many website owners worry that they will need to redesign their entire site in order to become mobile-friendly but that is not true. I create custom WordPress themes for my clients that preserve most of your current look/feel on the desktop saving you from a long and agonizing redesign process that is probably not necessary. Because your site will be fluid, the layout will be different on a phone or tablet but your look/feel will be retained insofar as possible. If you are worried about keeping your current look while still being mobile-friendly, schedule a Website Triage session with me and let’s talk about what can be done!

Previous post:

Next post: