Fixed Width to Responsive Web Design

Converting an old web design, be it in XHTML or standard HTML can be a small nightmare, there are a variety of elements that have to be considered when starting out.

With this post we hope to elaborate on some of the problems and solutions that are apparent when you intend on updating / converting an old web design to a new responsive web design.

When approaching this situation the first and foremost question you should be asking yourself is "Do I Really Need To Convert It", why, simple, there are numerous sites that actually have an extra bespoke solution for mobile devices.

Possible Solutions:

  1. Mobile Only Site
  2. Reverse Engineering
  3. Complete Re-Build

Please Note: The terminology "Reverse Engineering" is used in our context to Assess, re-structure, re-manufacture and or to clean. It is not used for any SEO or SEM techniques.

Mobile Only Site:

This solution would mean that a secondary site needs to be created which has modified code and lower quality images - the problem with images in responsive web design will be discussed in a further post.

What has to be considered in the mobile version is what needs to be in it. what content is important and has to be displayed to the end-user.

If your site is already using templates, it is possible to create a bespoke set of templates specifically for mobile devices / smartphones, instead of going the whole hog and starting from scratch.

If your website is dynamically structured, it is possible with the addition of a plugin / module to create a mobile only version on the fly.

There are programmers out there creating responsive plugins for Blog and CMS systems such as WordPress

Reverse Engineering:

This is probably the most time consuming and hardest method out there to convert a fixed width layout into a fully responsive web design.

In-depth experience of the HTML code and CSS is a must have when reverse engineering old code. If you are not the original developer of the site and its has gone through various hands you will probably have a load of redundant code.

Finding out what code is required for the current web design and what can be deleted is the longest process, once the code has been cleaned, it can be converted into a responsive web design.

Stepping up the code a notch or two is probably the best way to go here, updating the code to cater for modern technology, such as HTML5 and CSS3 is a way to also future-proof the web design.

Complete Re-Build:

When is a complete re-build of a fixed width web design the easiest most cost effective method to go with ? A question that probably a lot of web designers and developers have to ask themselves.

Convincing a client to go the whole hog and have a re-build can be a battle that is easily lost if you don't have the knowledge to convince them why it's a good thing to go ahead with such a large change.

When should this radical step be taken ? Probably when the code is so bad, deprecated or no-longer supported by modern browsers, and the design is so out-of-date, and a new look could be accomplished at the same time.

This is probably the easiest solution, as the new web design will be created specifically as a responsive web design and not as a fixed width layout.

Conclusion

Converting any static / fixed width web design into a responsive web design doesn't have to mean re-inventing the way everything needs to look or work.

Removing old redundant code and converting it into a responsive solution isn't that hard when you know what you are doing, you need in-depth knowledge, otherwise the way forward will be filled with hurdles.