Recently a client of mine, who I designed a website back when responsive design was a low priority, asked if this could now be rectified.
My client’s potential customer base, like that of most people now, was seeing a steady increase in mobile browsing, so having a responsive site was becoming increasingly important.
The site as it stood, used a wide layout, with an image poking out of the main content area into a white background. On a small screen, such as on a mobile, this made for poor design, and difficult for users to navigate without zooming in and having to push the screen around in all directions.
So I went back into the style sheet for the website, and started making some changes. Firstly changing the main content width from a set “width” style to “max-width”, which meant when the screen width was below this figure, the width would fit automatically to the screen size. But this is also when you can see all the potential problems, such as elements being cut-off, sitting on top of one another, ugly alignments etc. I also found that the main image on the home page didn’t just need the styles changing, but the entire image changing altogether, as the large screen image is just too “landscape” for a small screen.
This image was one of the most problematic, and getting it to swap using media queries on smaller screen widths meant using a large div with a background image instead. There are other ways to do this, and I’m still looking into these, but the new site is certainly an improvement, and you can see from the images here.