Lesson 1 | Responsive Design Fundamentals

The first lesson for Responsive Design Fundamentals was more or less a introduction less for the course to explain what is responsive design and why it’s important.

So, beginning with what is responsive design, one of the biggest challenges face by web designers is the lack of control that they have over their medium. Take print design for example. If we’re designing a magazine layout, we’ll need to deal with variables such as paper stock, what type of press it’s printed on, and which inks we’ll use. While these choices may influence the design decisions, we’re still designing for fixed dimensions. We’re largely in control o fate entire process, and the people that consume the content will experience it in exactly the same way.

Now, when creating content for the web, there are a numerous set of variables in how that content will be consumed. For example, We have to consider the wide variety of browsers and operating systems that people might be using, whether the content is accessible to screen readers or other accessibility-enabled devices, how the content will look if and when it’s printed, or whether they’re attempting to access the content on any one of the growing number of diverse web-capable devices that don’t really resemble the traditional screen and browser configuration.

Screen Shot 2017-03-31 at 3.24.02 PMScreen Shot 2017-04-05 at 1.26.53 PM

Of course, the change that’s been getting the most attention recently is mobile. The recent explosion of client accessing the web on mobile devices has made designing for the mobile screens a requirement.

Screen Shot 2017-03-31 at 3.24.40 PM

But even with desktop monitors, you’ll notice that screen sizes are not only getting smaller, but bigger as well. Because of this, trying to design separately for each context that your content might be encountered in is almost impossible.

This is where responsive design comes in. Responsive design is a design strategy that is centered on designing your content so that it responds to the environment it’s encountered in. The term was first coined by Ethan Marcotte who identifies three fundamental techniques for responsive design:

Screen Shot 2017-03-31 at 3.25.38 PMScreen Shot 2017-03-31 at 3.25.54 PM

Marcotte sticks to these three techniques to define what responsive design is, but like most new terms, its meaning is still evolving. Many people are using it to refer to any techniques or strategies that allow design to respond to different environments. Some may feel it’s a very broad term and one that can encompass almost anything that frees your content from the restrictions of a single context. Learning and understanding responsive design is less about learning specific techniques and more about changing the way we think about designing for the web.

As with all web design, a responsive design starts with HTML. Clean, well-structured HTML helps create content that is meaningful and easier to manipulate based on context. Likewise, the care the designer gives when planning the site’s semantics in uses of ID and class attributes can go a long way towards making the site more responsive.

HTML5 also includes a few features that helps sites be more functional across multiple devices. The new form elements, for example, allow designers to create forms that take advantage of mobile device interfaces and facilitate making phone calls and sending text without requiring extra markup or scripting.

Screen Shot 2017-04-05 at 1.00.42 PM

CSS also plays a major role in creating responsive design. CSS media queries allow us to apply different sets of styles based on factors such as screen size, orientation, or resolution. This allows to change layout and typography to a design that’s more suited to the context in which it’s viewed. Responsive layouts are typically fluid in nature so that they can flex to fit the screen on which they’re viewed. Newer CSS features, such as transitions and transforms, allow designers to change how content displays and interacts with the user without requiring additional scripting. CSS-based graphics can also help reduce the amount of resources requested by the page by replacing icons or other images.

Screen Shot 2017-04-05 at 1.01.48 PM

JavaScript is also used in varying degrees by different responsive designs. It’s primarily used to control resource loading, supply the correct images and media based on the needs of different devices, and to add device-specific functionality like geolocation and touch events to sites.

Screen Shot 2017-04-05 at 1.02.30 PM

Essentially, these three technologies – HTML, CSS, and JavaScript – form the backbone of most responsive designs.