Retrofitting Amazon Web Services Blog in 17 minutes
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.
The Caveats
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
- 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
Where to from here?
Well if you’re looking for some more details then you should get in touch with your thoughts and ideas, or you can start learning the basics yourself now.
