Moving from a fixed width website to a responsive design can be, depending on your requirements and content, a timely and costly exercise. A recent article by Karen McGrane highlighted that responsive design will not fix your content problems, but sometimes your content might just be ready for a responsive site but you may not have the time/budget for a complete responsive redesign.
Introducing the retrofit.
I first became familiar with responsively retrofitting websites when Ben Callahan from See Spark Box introduced a bookmarklet to help you test out responsive designs on fixed width websites. They didn’t even have to be your own website!
I was looking to trial this out locally using Chrome and the Dev Tools when I came across an article on responsive design on the AWS website during my weekly curation for the newsletter. I was disappointed to see that the site itself wasn’t responsive, so I wanted to see if I could retrofit the site to be easier to read on mobile devices.
Below is the video of my attempt.
Much better! Since this experiment and screencast I’ve done this a few more times and emailed the screencasts to the website owners to demonstrate to them the possibilities.
Everyone has come back with “How can I do this on my own site, and how much will it cost?”, and someone cheekily came back with “we’ll you’ve done it now so can I just have it?”.
Although this particular retrofit process took only 17 minutes to do it’s still a LONG way off what an actual retrofit or a responsive redesign will require. Here are a few things to consider if you’re thinking about a retrofit.
A single page, not a full website
- Doesn’t account for home or landing pages
- No consideration for tables/data
- No consideration for form layout
- No consideration for search pages
- No consideration for carousels, popups, modal windows etc etc
Only mobile first, no breakpoint considerations
- The idea is that it looks good on a mobile (biggest issue for static sites)
- Can not include breakpoints in this demonstration so no in between fixes
- Each breakpoint will have it’s own set of CSS
Responsive Image Solution not included
- This demonstrates making your images/media flexible, not optimised.
- All your images will be desktop size
- No consideration for retina screens
- Optimised mobile first images need to be created
- Icons/Logos should be SVG where possible
No consideration for browser support or testing
- This is done as a demonstration focussing on the latest chrome build.
- If you’re supporting older versions of IE other factors come into play
- Testing on real devices based on your analytics is crucial.
- Performance is a massive part of a mobile first responsive design
- Existing content and implementation is focussed on the desktop, so likely to be slower than a refactored responsive design.
- No thought given to progressive enhancement