Considerations when mobilizing a legacy website (Mobilizing websites with responsive design and HTML5 part 3)

Posted on by

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

As mentioned in the introduction, this tutorial is based on an consulting job to mobilize a centralized user authentication system. To be exact, the system is Shibboleth federation login used by various public sector institutions. The authentication system allows users to cross-authenticate themselves across organizational borders: erg. students from a university can join to wi-fi in another universities using their existing home university logins and so on.

Since the federation login component is very central for many public sector organizations and the mobile uptake has been high during the recent years, there was pressure to get the federation login to run well on mobile devices too.

This is how the landing page looked on mobile devices before any mobilization work:

1. Applying a hint of responsiveness on an existing layout

Responsive design (a.k.a reactive layout) is a technique where the same HTML payload is adapted to different screen sizes using CSS3 media queries and optionally client side Javascripting. It is an alternative for building a separate mobile site or page.

To have the basic mobile functionality, a responsive design layout needs to have at least two distinct layout steps. The steps could be:

  • desktop: 1024 pixels and wider screens
  • small screen (mobile): 1024 pixels or smaller, possibly including tablet devices

The site we mobilized in the tutorial project was a landing page with few form elements. The design was simple: applying layout changes to achieve responsive layout was possible. However, usually migrating to responsive design techniques require designing the site layout and theme from the grounds up using mobile first approach. This is because legacy designs seldom have respected HTML philosophy and they take it granted that there is only one screen size and only one way of displaying information. Converting this kind of legacy layout to be responsive is challenging.

More info about responsive layouts

Minizing code changes and risks associated with legacy systems

When dealing with legacy codebases running in production “minimal changes” principle applies; If a system has been in production use several years, not actively maintained, every change in the codebase comes with a risk of potentially breaking something. Thus, when mobilizing a legacy website you may try to leave the existing HTML and CSS  mostly untouched using the following strategy

  • Edit HTML <head> section to support mobile devices and CSS3 media queries
  • Don’t alter the existing desktop CSS (main.css), but instead load a separate mobile specific CSS (mobile.css) and override the main CSS styles for mobile devices using the CSS overriding mechanisms (this is what Plone CMS can do with but currently sans media queries)
  • In HTML, add some missing CSS classes and wrapping <div> elements when needed, but do avoid touching functional parts

Naturally, this all apply only when you are mobilizing using responsive layout. There exist other mobilizing strategies too.

f you are re-designing the site theme from grounds up a better strategy is

  • Having a shared base.css, of which styles are applied regardless of the screen size
  • Desktop specific styles go to desktop.css which is loaded only for desktop browsers
  • Mobile specific styles go to mobile.css which is loaded only for mobile browsers

This will decrease the amount of unnecessary code loaded on mobile devices making the pages load faster.

 

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Leave a Reply

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