ptg16476052444 LESSON 16: Using Responsive Web Design
What Is Responsive Web Design?
RWD is an approach to web design that attempts to adapt a site’s design to look as good
as possible on whatever device is displaying it. The ultimate goal of a responsive site is
that it has one codebase of HTML, CSS, and JavaScript that can then be displayed on any
device that wants to view it. This means that the same HTML document could be viewed
on a small cell phone and then a large 5K monitor, and while it might not look identical,
it would be functional in both places.History of Responsive Web Design
In the 1990s, when web pages were first starting to be built, programmers built them
rather than designers. Those builders cared a lot less about how the pages looked and
more about whether they displayed at all. This may be dating myself, but I remember
when images first got added to web pages. Everyone in my office gathered around the
desk of a co-worker who had just found this wonderful browser, NCSA Mosaic, that
could display images. Up until that point, we’d been using Lynx, which was a text-only
web browser. Along with images came color, and along with those features came design-
ers and their desire to change how a site looks.
Then CSS came around giving designers more and more control over the pages. At first
there was a lot of difference in how a page looked when it came to different browsers.
And the smartphone was still a few years off. So it was more convenient to write a web
page that looked great in the browser that you preferred (or your boss preferred) and just
tell others to go download that one. More progressive designers would attempt to write
hacks to make their pages look the same on different browsers. But that was difficult too,
as there were a lot of browsers.
But once mobile devices grew in popularity, that became more and more difficult.
Netscape Navigator might be available for Windows and Macintosh, but it wouldn’t run
on cell phones. And while cell phones quickly gave rise to smartphones and tablets, by
that time there were so many different devices and browsers that it was impossible to
design for every possible combination, and you couldn’t tell people what browser to get
because it probably wouldn’t run on their phone anyway.
The other thing that was different with smartphone and tablet devices was that they were
not as big as the desktop computers that most designers worked on. A page that would
look great on a browser maximized on a 5K screen would be completely unusable on a
small phone screen. Ethan Marcotte coined the term responsive web design as a way to
design pages and sites that responded to the device viewing it and changed to meet the
needs of that device.