"Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come." - Jeffrey Veen
This free, online course consists of 12 video lessons aimed at teaching you best practices for building responsive websites, sites that adapt to different devices and user behaviors.
The essential elements of responsive design to be covered include:
- Designing with ﬂexible grids
- Deploying responsive images
- Using CSS media queries
- Responsive web typography
- The "Mobile First" approach
- Reducing page size in order to improve performance
This course is specifically intended for front-end web developers who want to learn how to build responsive sites.
Nevertheless, while the curriculum assumes a proficiency at hand coding HTML and CSS, anyone working on the future of the web needs to understand the methodologies and frameworks presented here.
Thus, even designers with light coding skills could benefit from working through the lessons. (If you are a designer looking for an introduction to HTML/CSS, you may want to enroll first in our other free course, "Coding for Designers.")
What's the Big Deal about Responsive Web Design Anyway?
Responsive web design is important because, many believe, it represents the future of web design.
The main reason for this belief stems from the undeniable fact that we no longer live in a one screen world. Between desktops, laptops, smartphones and tablets, users now access the web via an amazing array of devices that come in a variety of sizes and boast an alarming range of screen resolutions.
Faced with this proliferation of screens, in the world before responsive web design (a term coined by Ethan Marcotte), site designers and developers really only had two options: Build one site and let mobile users manipulate the touchscreen in order to read the tiny text and view images, or build two sites—a mobile and a desktop version (some have even gone so far as to develop a third "tablet optimized" site).
The problem with the former solution was that it annoyed users. The problem with the latter solution was that it annoyed site owners who had to continually maintain and update two versions of the same site.
An Elegant Solution
Which brings us to the third increasingly popular option, responsive web design.
The elegance of this solution rests on two key elements, as I see it. On the one hand, you have the Jobs-ian belief that "performance is design." In other words, the way something works, not just the way it looks, are design elements. Following this logic, for a site to be well-designed it has to work wherever it is called upon to work.
On the other hand, you have the "mobile first" rallying cry, which isn't so much about device-centrism as it is about completely rethinking our approach to content and, by extension, page layout.
Rather than taking the desktop site and subtracting elements stepwise until you have a minimal site you can live with on smaller screens, you actually start with this small screen version and build from there.
This requires an extraordinary, albeit healthy, discipline that forces stakeholders to decide what is essential to the site, both in terms of the basic information that mobile visitors should see, but also in terms of the information that will most likely be important in the context of mobile usage.
The beauty is that responsive web design not only allows you build various versions of a site, versions that can take advantage of successively larger screen space, but that it does so by allowing you to build one site that will adapt to different devices.
This means that a site can accommodate a diverse range of devices and user behaviors and nevertheless remain a single site from a development and maintenance perspective.
Ready to Get Started?
Long story short, if you are a front-end developer who has been hearing about this responsive web design thing but are not yet familiar with the actual techniques that will enable you to build responsive sites, then we offer you this course.
As I said above, it's free. More importantly, however, our instructor, Jeremy Osborn, developed the course with an eye to practical application. By the end, you will not only have built a responsive portfolio site, but you will also be able to apply what you've learned to your current and future projects.
So, what are you waiting for? Be our guest and learn how to design responsively!