The Creative Librarian website at multiple screen-sizes.
Responsive design is a method of web design that has been developed in response to the almost infinite number of screen sizes designers are faced with today. Rather than create multiple websites or relying on browser-sniffing, it uses fluid design and a CSS3 feature called Media Queries to adapt the website design depending on the size of the browser window.
Media Queries have been used for years to specify print stylesheets. They are fairly sophisticated, accepting both a range of widths and arguments such as media (screen, print, aural), orientation (portrait, landscape), and color. They are commonly used to adjust the layout, typography and size of images and icons down for mobile devices, however, I used the “Mobile First” technique of using the mobile design as the default and making modifications as the window gets larger.
One of the additional problems with mobile devices (and one of the pillars of Responsive Design) is page load time. They often don’t have the processing power to load pages as quickly as desktops and often have data limits that make the large images of desktop websites prohibitive. A number of methods of changing images based on screen size and device are being worked on but there is no easy answer yet.
I discussed the responsive icons used on this site in an earlier article. In short, I chose an icon font for the limited impact on page-weight, the ease of resizing, resolution-independence, and the ability to style them with CSS. It was easy to implement using CSS :before and :after selectors and adds to the visual appeal and usability without adding noticeably to the download time.
Mobile Navigation in Responsive Design
Mobile navigation demo from Navigataur
How to deal with the menu is a common problem with websites on small screens. There have been a number of solutions offered, most using javascript. I used a pure CSS method from Navigataur to switch from a menu bar to a drop down menu toggled with the “hamburger” icon of three horizontal lines. It was a little tricky to set up but since I got it working I haven’t had any more problems.
Design for Internet Explorer
So Responsive Design is a great idea and media queries are supported in all modern browsers… (Say it with me) except Internet Explorer. Until version 9. Unfortunately, there are people who are still stuck with earlier versions of IE for one reason or another and others who simply don’t bother to upgrade.
Respond.min.js adds basic media query support for IE versions 6-8, which combined with conditional comments allows them to get essentially the same experience as those with more advanced browsers. All you have to do is call the script.
There are a couple of more workarounds in this design for IE. For convenience, I’ve combined them all into one code block. Part of this design relies on RGBa transparency in the CSS which, again, is not supported by older versions of IE. I used a conditional comment to reset the content background to the opaque color. It’s not as pretty but it’s functional and the transparency wasn’t worth a more elaborate workaround that would increase page load time to me. I had enough javascript weighing down the page already.
The last workaround for IE was a little script to add HTML5 support for older versions. I like HTML5 for its increased semantics and accessibility as well as how easy it makes to use common techniques like form validation. This script makes versions on IE that don’t support HTML5 recognize the elements for styling.
<!--[if lt IE 9 ]>
<script src="<?php bloginfo('template_directory'); ?>/_/js/respond.min.js"></script>
<style type="text/css">#page-wrap { background:<?php echo($cbgcolor);?>; } </style>
<script type="text/javascript"> //Make IE 7 & 8 recognize html5 elements for styling (function(){ var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption| footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|'); for(var i = 0; i < html5elmeents.length; i++){ document.createElement(html5elmeents[i]); }} )(); </script> <![endif]-->
Those are the highlights of the issues that popped up in the design. As we can forget the older versions of Internet Explorer, it becomes much easier over time.