Mobile first, later : 10 Steps for retrospectively making your Drupal site responsive
On April 21st, Google updated their mobile search algorithms to boost the rankings of mobile-friendly web pages, whilst conversely decreasing rankings for pages that have been designed only for large screens. This change is likely to have a big impact on many Drupal sites, and ComputerMinds have seen a surge in requests for retrofitting responsive themes onto existing Drupal sites. More information about the change - which is commonly reffered to as ‘mobilegeddon’ can be found here http://googlewebmastercentral.blogspot.co.uk/2015/04/faqs-april-21st-mobile-friendly.html
Due to these new changes, we have recently completed a responsive upgrade to a clients website - https://apm.org.uk - which was previously unresponsive and only displayed well at a typical desktop browser resolution (960px).
Now post upgrade, the site is fully responsive, displays and functions well across mobile devices, tablets and desktop browsers. Crucially the site is now receiving a near perfect score from the google mobile friendly test tool.
We followed a 10 step process
3 - Change the grid system (if applicable) from a fixed grid system into a responsive one that will work well at all different resolutions. APM had previously followed a 960px fixed grid system, consisting of 16 grid columns used to form a typical “three column” layout. We switched the site base theme to Zen 5.x to give us a responsive layout with a fluid grid system to work with. For desktop we retain the same three column layout, for tablet we made both sidebars drop into one, and mobile causes the page to go into a single column layout. All the styling for this is now fully responsive so between the various resolutions the content re-sizes and scales appropriately.
5 - Redesign the site header, footer to improve the appearance and functionality for mobile and tablet devices. For the APM header we dropped the header background image for a solid colour, resized and centrally aligned the logo, moved the login block and menu offscreen with new buttons at the top to activate them. The footer changes consisted of resizing the images and tidying up the styling of text and links.
6 - Tidy up, optimise any legacy CSS and update any code that may be referencing fixed pixel values for font sizes, widths, etc. Previously the APM site had all of its CSS in one single style sheet that had accumulated a lot of code over the years, becoming unmanageable. Taking a SMACCS approach, we refactored the single style sheet into modular files, removed any duplicate css, fixed old rules, changed fixed pixel font-sizes to EM’s, and fixed pixel widths into percentages.
7 - Optimise any applicable site assets, including; reducing the size of images, minifying scripts, spriting images, reducing the number of http requests & more.
8 - Upgrade image site assets where possible from bitmap to vector, to cater for the ever expanding range of high resolution devices available today. We recreated some of the assets including; menu home icon, breadcrumb separator, menu separator in the SVG file format, a vector format that scales nicely for higher resolution devices.
9 - Cross device, cross browser, in-depth testing of the new responsive site to ensure we achieve high compatibility with as many different devices and modern browsers as possible.
10 - Analyse the site using the Google mobile test tool, make changes including adjusting tap target sizes accordingly to improve usability. For APM this included; increasing the size of the login button, mobile menu button, input buttons, select lists, menu links, made whole teaser articles linkable, and more to enhance the mobile browsing experience.