Google is about to change its search algorithm. The new algorithm will place a greater emphasis on mobile friendly sites. Sites that are not mobile friendly will drop down the list. This has been dubbed "mobilegeddon" by some.

This change will start rolling out from the 21st of April. Mobilegeddon implies some kind of browser apocalypse. Mobile unfriendly sites won't disappear from Google but mobile friendly sites will get priority.

How to tell if your site is mobile friendly?

How to fix the problem?

Don't use tables for layouts.

Tables are for tabulated data, not layout. Tables were the staple of web design in the 1990's and fell out of favour around 10 years ago. Most websites use div tags for layout these days. If your site still uses tables for layout, it is long overdue for an overhaul. Replace fixed width design.

Several years ago, fixed width design was all the rage. I did a number of sites using the BlueprintCSS framework. Blueprint was one of many frameworks based on 960px. 960 is a magic number. It is divisible by 2, 3, 4, 5, 6, 10,and 12. That makes setting out lined up grids a breeze. The problem is that 960 assumes that one size fits all. Early smart phones were based on a width of 240 or 320 pixels. The result is a 960 grid doesn't fit on all devices.

Use a responsive or adaptive grid.

Grid frameworks offer all you need to get started. They have a grid that is built as mobile first and use media queries to adapt to the size of the device. They also have typography set out to keep text in line and make sure test is readable on all devices.

There are plenty of these out there. Twitter's Bootstrap is the most popular. There is also Zurb Foundation. Both of these offer a grid and a library of numerous components like menu bars, prebuilt layouts, scaffolds for video and a whole lot more. Bootstrap has more components than Foundation. My preference has been to use Foundation over Bootstrap. Which is the better system has been up for debate. It is simply a matter of which system suits your needs the best. Bootstrap and Foundation have been criticised as bloated. Often you have to add extra div tags to get the look you want. This can get in the way of lean, semantic mark up.

There are other notable frameworks such as Getskeleton. It doesn't have the fancy component libraries of Bootstrap & Foundation. It is a lot smaller. Getskeleton was designed as small, lightweight framework to get you started. I've used it as a base for several projects and have been quite pleased with it.

Roll your own framework has become a lot easier since CSS preprocessors like SASS, LESS & Stylus have come on the scene.

I personally favour this approach. I tend to use SASS for my main CSS work. Mixing that with SASS libraries like Compass, Bourbon, Bitters, Neat and Susy Grids means I can make a flexible tailor made framework that is lightweight and minified.

Minimise HTTP requests

When you visit a website, your browser will request a number files. First off is the HTML that is rendered by the browser. It will also download stylesheets and javascript files. Each image is also a separate HTTP request.

It is not unusual for a web page to have half a dozen CSS files and several javascript files. There are a couple of strategies to deal with this. Combine all the CSS files into 1 file and minify them. Do the same with javascript.

The other option is to use CDN or content delivery network. A CDN is a large distributed system of servers in multiple locations across the Internet. Many websites use the jQuery library. Loading jQuery from a CDN means the user downloads jQuery from a server near them. If they have visited another site that uses jQuery, then chances are that jQuery is stored in the browser cache. The browser loads the local version which saves an HTTP request.

Reduce HTML bloat.

There are a lot of drag and drop applications that help people to build websites. Weebly, Wix and Squarespace spring to mind. There are drag and drop applications for Wordpress. They make it possible to put together a beautiful, functional website very easily. All this without having to roll your sleeves up and write code.

There is a downside. All this user friendliness is at the expense of optimised code. Often you will find extra html tags in the markup and large multiple javascript and CSS files.

Reduce image sizes

You should always optimise your images. This can be done with software such as Photoshop and Fireworks. I think FireWorks does a much better job at getting images to be web ready. There are also a number of online services that will shrink image files for you. Here are just 3. There are a whole lot more:

Posted in Technology on Apr 16, 2015