An Elegant Compromise: Responsive Retrofitting
Originally posted Feb 25th, 2014
The growth rate of mobile internet traffic over the past few years is staggering. More and more people are accessing the web with phones and tablets instead of (or in addition to) a desktop computer. This fact has led to some significant changes for web designers. Where once we asked clients if a new site should be targeted for desktop users or mobile users we now build sites to accommodate both audiences simultaneously. Not every project is made up of a new or completely redesigned site though. Sometimes a client’s budget or deadline restriction demands a compromise that improves an existing site’s mobile performance without a complete redesign. That’s where Responsive Retrofitting comes in.
A site featuring a responsive design is one that performs well in any size browser window. Whether stretched across a 21 inch cinema display or tucked compactly into a mobile device screen, the site’s text will stay legible and its photos will automatically expand or contract to fit the screen without any action on the part of the user. Retrofitting an existing site to be responsive is an elegant compromise that lets site owners address the needs of both desktop and mobile users without building a completely new site.
We put that elegant compromise into action recently on www.ddwcolor.com. D.D. Williamson came to us with an existing site that performed wonderfully for desktop users but less than ideally for mobile users. They tasked us with finding a solution to the problem without building a brand new site. Retrofitting the site to be responsive was the perfect solution.
Designer and Front End Developer Justin Toon led the project and shared a few thoughts on the work.
“Typically, the primary tasks for retrofitting are modifying existing HTML markup and CSS to accommodate responsive styling. Sometimes it’s also necessary to write additional JavaScript or build new site components to handle any new interactions introduced. For example, this site has a number of interactive elements in the header — navigation, social buttons, a language switcher and a search bar. These were moved off-screen and a new mobile-only menu bar was introduced with buttons to reveal these pieces individually; as a result, a significant amount of real estate was reclaimed with no loss of functionality.”
“For this site we also needed to address a large number of pages with styling and markup written directly into page content, making it difficult to make large-scale changes. For example many embedded YouTube videos were marked up with fixed widths, which worked great on desktop screens but broke the user experience on mobile devices. To correct for this, I wrote some custom JavaScript which automatically finds videos and adds new markup to them to give them fluid widths, which scale the videos to fit whichever screen they’re viewed on.”
Retrofitting an existing site is not the solution for every client but it can be for many. If your website needs to be made more mobile friendly without being completely rebuilt contact us to see if retrofitting with responsive design is right for you.
Have a web app, mobile app, or piece of custom software you need designed and developed? Drop us a line
