Responsive design is a web design approach that aims to create an optimal viewing experience across a range of devices — from large desktop screens and smaller laptops, to tablets and smartphones. Responsive design uses CSS media queries to craft web pages that will respond to a browser’s size, or viewport. Whereas previous web development strategies focused on creating separate desktop and mobile sites — often with redundant content and separate sets of code — in responsive design, the end product is one website that is device-independent, ensuring the best user experience for all users.
Here at CUL, all new websites are being developed responsively, typically using the Bootstrap framework. Most of our recent redesigns have been responsive as well. Responsive sites that are currently in production at CUL include:
Using a framework like Bootstrap has allowed us to speed up the process for developing responsive sites, although it is worth mentioning that the time it takes to design and develop even a small web site has markedly increased now that we are designing for different devices. Gone are the days where you created one design at a standard screen resolution of 800x600px, tested it in IE and Firefox, and called it a day.
Check out the following websites for more information about responsive design, and to see many examples of responsive websites:
- Responsive Web Design
- Responsive Web Design Guidelines and Tutorials
- How to use CSS3 to create a mobile version of your web site
- Media Queries (a showcase of responsive sites)
- Responsive Design Sites: Higher Ed, Libraries, Notables
- Edustyle: sites tagged ‘responsive’