Site Update
Responsive design is one of the talking points amongst the web design community at the moment. I have been reading about it and discussing it with my colleges, I also attended the Glasgow tech meet up to hear a presentation on the subject.
I decided to use the redesign of this web site as an opportunity to familiarize myself with the responsive design process. I didn't want to constrain the look and feel of the site because of this. As a basis I opted to use the fluid 960 grid systems with a defined max-width. I then added custom media queries to control the layout as browser dimensions change. As with any new process, there were a few lessons to be learned.
- I used flex slider for the banner on the home page; it proved to be an easy to use responsive slider, although, it does not work for ie6.
- Because I have text and a button in the Slider, there were problems when the browser decreased in width. To fix this I added a background color underneath the text when the browser width decreased to 780px or less.
- At widths of 580px or less I chose to hide the slider, not an ideal solution, but the site still functions as it should and all pages are accessible.
- One problem I did have was making the blue horizontal background responsive. I achieved this by setting the width of the containing div to 100% and not specifying the height of the container. The padding round the slider gives the height.
- The footer links on the right hand side went under the main footer when the browser with contracted to the smaller sizes. I fixed this by increasing the height of the footer and by giving the ul a background color the same as the color of the footer.