Five Drupal Modules That Will Save You from Mobilegeddon

Mobilegeddon has arrived. I hope your site was one of the survivors. In case you missed it, in April, Google changed their rankings algorithms to preference mobile sites. Their blog announced that any sites that did not pass a mobile-friendly test by April 21st would see their search rankings negatively affected.

I haven't seen major shakeups in the mobile search environment yet, but these things take time to work their way though every website on the planet. There's still time to make your site more mobile-friendly and prepare for the next round of changes that are inevitably on their way.

Here are my top 5 mobile-friendly modules pre-built in Drupal to help sites survive in this new mobile-first world.

1. Breakpoints – Google didn't say you had to go with responsive design. Their mobile design guide specifies responsive, dynamic serving, or separate URL's for now, but that could easily change with their next release. This module helps in the implementation of responsive design by setting standards for breakpoints in height, width, and resolution that match up with different device types. It's now in the Drupal 8 core along with its companion Picture module.
2. Picture Module – Not everyone is on 3G or 4G. You have to consider how images are going to be handled at low-bandwidth. Time to load is another area that Google is using to test mobile readiness. If it takes more than a second or two, not only will Google ding your rankings, but mobile customers are going to bounce. I rely on this module as one of the best ways to handle images quickly and simply. It turns any image you use into an adaptive one and you just have to set the breakpoints. 
3. FitVids – Another mobile-friendliness category that Google's bots are looking for is the effective use of video instead of text-heavy copy. You'll need a module like this to automatically resize embedded videos to any mobile screen or browser. This module is especially good at handling videos from the big sites that already come with specific sizing, like YouTube and Vimeo. It uses JavaScript to scale the video into the container that your specify.
4. Fences – Theming your site can be pretty code-intensive, but it doesn't have to be. I've found that this module saves me from having to re-configure an HTML element every time I want to display a field. It does away with all the heavy field markup you would expect. Whenever I want to edit a field, it gives me the option to choose the kind of markup I want to wrap field contents.
5. Bootstrap or Zurb Foundation - We know this isn't a module, but this is a great first step into transitioning to a mobile-first site. If you aren't a fan of either of these, there are plenty of other themes to choose from like Zen or Omega. A mobile-based theme would cover most of your woes caused by Mobilegeddon.

It's actually a good thing that Google is emphasizing  how important mobile has become. Believe it or not, many businesses still  don't have mobile-ready websites because they feel like they don't get  enough mobile traffic or that their business model is too complex for little  screens. Now everybody will have to have a mobile strategy before they  are left behind by the next wave of changes. If you want to learn more  on any of these topics, just drop us a line or plan on meeting up with  us during DrupalCon, May 11-15 at the Los Angeles Conventions Center.  We will be hosting three Birds of a Feather sessions on solving real-world  problems with Drupal.