March 4, 2016 · design html5 css

Responsive Design

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.

Be concerned.

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.
  • Mozilla Developer Network - general website covering tonnes of html, css, and javascript reference information. Held in high regard.
  • 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.
  • W3Schools has a lot of information on css, html, and javascript and will often come up high on your search results. Be warned though, it is often not seen as very accurate or up to date. (see W3Fools)
  • Move the Web Forward has a neat list of other resources as well.

Responsive design references

  1. Brad Frost 2012, Creating a Mobile-First Responsive Web Design, HTML5 ROCKS, accessed 29 February 2016, <http://www.html5rocks.com/en/mobile/responsivedesign/>.
  2. Cameron Soojian 2015, A Brief History of Responsive Web Design, SyneCore Tech, accessed 29 February 2016, <http://exsite.ie/history-of-responsive-web-design/>.
  3. Google Developers 2015, Responsive Layouts, Google, accessed 29 February 2016, <https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=en>.
  4. 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/>.
  5. W3C 2012, Media Queries, accessed 29 February 2016, <http://www.w3.org/TR/css3-mediaqueries/>.
  6. 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.