What is responsive design?
Responsive design is about designing a webpage (or any interface really) so that it looks good and is usable on a range of devices with varying screen sizes and types. A responsively designed website will look good on everything from smartphones with touch screens, to large desktop monitors.
Why should I be concerned about responsive design?
Years ago, no-one cared about responsive design, because if someone had a computer, they had a desktop with a standard 4:3 monitor. Webpages featured hard coded styles (font sizes, width, etc.), and it was all okay.
Now, we access webpages on everything: 4” smartphones, 7” ereaders, 10” tablets, 14” notebooks, 17” laptops, 27” desktops, and 40” TVs, sometimes with a mouse, other times with a touchscreen. In this age, responsive design is paramount. An impressive three column layout looks great on a desktop, but awful on a smartphone. Large font and iconic buttons make it easy for small touch screen navigation, but sub-optimal on a large screen. Your users will want to access their site from every device they own and expect to be actually able to use it.
My list of responsive design tips
- Make sure navbars are accessible for touch screens and are responsive to screen size.
- Design for mobile first. (a site that works nicely on your powerful desktop might struggle on a slow, small phone. This means responsive design as well as thinking about optimizing for less powerful devices and slow network connections)
- Test it on as many browsers and devices as possible.
- Some browsers (at least Chrome and Firefox) have a responsive design testing mode - really useful!
- Set the viewport. (otherwise bad things happen on mobiles…)
- Design the html structure first, then use CSS to style and make it responsive.
- CSS media queries are essential.
My list of useful responsive design websites
- Responsive Layouts | Web Fundamentals on Google Developers has a nice collection of tips and basics of responsive design.
- Responsive Web Design posts on Smashing Magazine are often interesting to read (along with other posts there).
- Google Fonts makes it really easy to get the fonts to want on your website. (not exactly responsive design, but definitely related: who wants ugly fonts?)
- Some CSS tips and trickson w3.org (see especially the info on units of length: useful to think about for responsive designs) - you can find css tips everywhere; this is just one of thousands.
- Media queries, also on w3.org, and Using Media Queries on MDN. As I mentioned before, media queries are really helpful.
- Web Platform Docs - newish and promising documentation on css + more. (designed to be as accurate as possible)
- W3C Tools is a great collection of tools for checking and validating your webpages online.
- Move the Web Forward has a neat list of other resources as well.
Responsive design references
- Brad Frost 2012, Creating a Mobile-First Responsive Web Design, HTML5 ROCKS, accessed 29 February 2016, <http://www.html5rocks.com/en/mobile/responsivedesign/>.
- Cameron Soojian 2015, A Brief History of Responsive Web Design, SyneCore Tech, accessed 29 February 2016, <http://exsite.ie/history-of-responsive-web-design/>.
- Google Developers 2015, Responsive Layouts, Google, accessed 29 February 2016, <https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=en>.
- techdigging 2015, How to Test Responsive Design in Chrome and Firefox, Tech Digging, accessed 29 February 2016, <http://www.techdigging.com/test-responsive-design-chrome-firefox/>.
- W3C 2012, Media Queries, accessed 29 February 2016, <http://www.w3.org/TR/css3-mediaqueries/>.
- W3Fools n.d., accessed 29 February 2016, <http://www.w3fools.com/>.
This article originally written as a task for a uni subject on responsive design.