What is Responsive Website Design?
There is no telling what kind of device a user will access your site or product on. Once upon a time, the choice we all had either a laptop or a desktop. Now, between smartphones, tablets, gaming systems, watches, and more, the internet is on everything, and screen sizes range from a square inch to super-sized. [bctt tweet="What is #Responsive Design? ft @l_mosele @delmarsenties @amelielamont @marcotuts @scottohara" via="no"]
Responsive design is is the craft of designing websites to provide an optimal user experience and interface across a range of devices. In 2016, the technique has developed to the point that most designers no longer say, “responsive web design,” as all good web design is assumed to be responsive. Apple watch, of course, has brought it a set of new challenges for designers who aim to bring an experience to any screen size, but as far as large format screen and mobile goes, if your work isn't responsive, many of your customers will be getting a less-than-ideal experience. As web design course alumnus and instructor Lucas Mosele of Maxwell Health states,
Responsive design is important for the same reason stores having glass windows is important. I want to be able to see what I'm getting without effort. If your site doesn't load on my phone, I'll quickly turn to find the next best option or the option I'm comfortable with.
[bctt tweet="#ResponsiveDesign is important for the same reason stores have windows—@l_mosele"]
Founder of Resilient Coders David Delmar adds that a failure to build for a modern multi-device web experience creates much deeper problems than those of pure functionality and accessibility:
The designer exists to help communicate a brand's values. If your work is not responsive, what the brand is communicating is this: "We believe all digital content is consumed on desktop computers." Not the message most brands want to send.
[bctt tweet="The #designer exists to help communicate a brand's values, says @delmarsenties"]
We asked three of the best instructors from our top-ranked web design course to share how they incorporate responsive design into their front-end development. Here’s what they had to say:
Marco Morales, Product Designer at edX
I've used tools such as Thoughtbot's Bourbon / Neat SASS libraries to support responsive grids and layout. More recently we've started using Susy for the work we do at edX.
Scott O’Hara, UX Developer at Fresh Tilled Soil; scottohara.me
I just assume everything is meant to be responsive now, so there's no special track I go just for building responsive sites. No hard pixel widths or heights, pester designers to think about how their 1300px wide design will break once a window is set to 1200px, making sure we only load the necessary assets at various screen sizes/devices rather than all things all the time.
Amélie Lamont, Head of Design & UX at VenueBook; amelielamont.com
This is hotly contested for a variety of reasons, but I often use responsive design when I know that my clients (or a project) will be frequented by mobile devices. I tend to take a mobile-first approach (also hotly contested) where I focus on creating the styles for the smallest mobile devices and add breakpoints for larger devices.
I'm currently really digging Susy, Sass, Breakpoint, and Compass for my responsive design workflow.
Interested in learning more about web design? Download your free course guide or check out some of our related articles and resources, below.