Or “why doesn’t my website fit my screen?”
A common questions web developers and designers get asked is “why doesn’t my website fill my browser window?” or (in the last few years) “why doesn’t my website fit on an iPhone?”. Until recently there were a vast number of technical and design reasons this was extremely time consuming (and hence costly) or even impossible to accomplish.
Think about this very simple example, a photo you have printed out and placed in a frame. Now double the size of the frame, what happens to the photo? Nothing, it is simply surrounded by more frame. The same theory applies to websites viewed on different size monitors, the frame (in this case the monitor) gets bigger but the photo inside it stays the same. Websites experience the same limitation, we can’t just enlarge the “photo” to fit the “frame” – at least not without degrading the quality of your photos.
As we are dealing with websites and not pieces of paper and wood, things are a little more complicated. Text can change width based on the size of the placeholder it is put into, some simple shapes (such as boxes) can do the same but everything else that makes up your beautifully designed website is an image (or, to stick to the analogy, a photo) that will only fit in a frame the photo was designed for.
Harmonic New Media recently trialed responsive web design techniques to create the Architecture Collective website that addresses this issue. To see how we adjusted the website’s design to adapt to different screen sizes simply click on the link and resize your browser by slowly dragging in the bottom right corner to change the width of the window. See how the boxes on the home page close as you get to about the 950 pixel mark to make more room for the design? Now reduce the width further to about the size of a mobile phone, we move all the content into a single column layout and re-open all the boxes. This is what would be seen by a user visiting on their mobile phone.
But wait a second, doesn’t this break our frame/photo analogy? Re-size your browser window again and watch the size of the Architecture Collective logo, it’s clearly changing size and we established we couldn’t do that to an image or photo! What responsive web design let’s us do is have the browser generate these images (or print new photos) that do fit (as well as further modify the text and shape elements to help them fit too). The advantage of this technique is that is uses the same base (content, code, design) no matter what platform the visitor is using rather than having to create and deploy completely different versions for different devices. Think of this as printing multiple copies of your photo to fit different size frames; larger for bigger displays, smaller ones for mobile devices. The result is a website that fits to the user’s display size, no matter what device they are viewing the website on.
Although the process is still more complicated (and hence more costly) than designing a one-size-fits-all solution, responsive web design techniques make a dynamically sized website a lot more efficient and cost effective to create and deliver.
If you would like to discuss the possibility of using responsive web design for your new or existing website, please contact Harmonic New Media and we would be happy to assist.
For further reading on responsive web design: