Download code from GitHub
The Essentials of Responsive Web Design
By the end of this first chapter, we will have covered everything needed to author a fully responsive web page.
You might be wondering, why the other 10 chapters? By the end of this chapter, that should be apparent too.
When the first edition of this book came out in 2012, responsive web design was a new and exciting possibility to address the needs of the ever-growing list of devices that could access the internet. In 2020 it's simply the de facto standard. Unless you have a good reason, if you're building a website or web application and it isn't responsive, you're probably doing it wrong!
Perhaps you're reading this because you need to understand what makes a responsive web design, and get a better handle on the capabilities of HTML and CSS? Or perhaps you're already building websites responsively and need a steer on features and techniques you may have missed along the way...
The browser and device landscape
Less than 10 years ago, it was reasonable to build a website at a fixed width. The expectation was that all end users would get a fairly consistent experience. This fixed width (typically 960px wide or thereabouts) wasn't too wide for laptop screens, and users with large resolution monitors merely had an abundance of space on either side.
But in 2007, Apple's iPhone ushered in the first truly usable phone browsing experience, and the way people access and interact with the web changed forever.
In the first edition of this book, published in early 2012, the following was noted about the percentage of total browser usage by device type:
In the 12 months from July 2010 to July 2011, global mobile browser use had risen from 2.86 to 7.02 percent.
In the second edition of this book, I noted:
As these words are written, in mid 2014, the same statistics system gs.statcounter.com reports that figure...
Defining responsive web design
The term "responsive web design" was coined by Ethan Marcotte in 2010. In his seminal A List Apart article http://www.alistapart.com/articles/responsive-web-design, he consolidated three existing techniques (flexible grid layout, flexible images/media, and media queries) into one unified approach and named it responsive web design.
Responsive web design in a nutshell
To attempt to put the philosophy of responsive web design into a "nutshell," I would say it's the presentation of web content in the most relevant format for the viewport and device accessing it.
In its infancy, it was typical for responsive design to be implemented by starting with a fixed-width desktop design before trying to scale the design down as needed for smaller screens. However, processes evolved and it became apparent there was a better way. Namely, that everything from design to content management and development worked better when starting...
Our first responsive example
In the first paragraph, I promised that by the end of this chapter you would know all you needed to build a fully responsive web page. So far, I've just been talking around the issue at hand. It's time to walk the walk.
Code samples
You can download all the code samples from this book by visiting https://rwd.education/. It's worth knowing that where individual examples are built up throughout a chapter, only the final version of the example is provided in the code download. For example, if you download the code samples for Chapter 2, the examples will be in the state they are at by the end of that chapter. No intermediate states are provided other than in the text.
Our basic HTML file
We will start with a simple HTML5 structure. Don't worry at this point what each of the lines do, especially the content of <head>, as we will cover that in detail in Chapter 2, Writing HTML Markup.
For now, concentrate...
Summary
Well done—you now know and understand the essential elements needed to create a fully responsive web page. However, as we have just discovered, there are plenty of places where things could be improved.
But that's fine. We don't just want the ability to make competent responsive web designs, we want to be able to create "best of breed" experiences. And as you're here, investing your time in the betterment of websites everywhere, I know you're up to the challenge. So let's press on.
In the next chapter, Chapter 2, Writing HTML Markup, we are going to take a deep dive into HTML5 markup. HTML is the very skeleton of any web page or application, the bedrock on which to build anything meaningful, the oxygen a website breathes, the... OK, I'm out of analogies—suffice it to say, HTML is pretty important, so let's press on and get stuck in.
