Introduction to Responsive Web Design (RWD)

What is responsive web design?

w3schools says it very well:

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

It encompasses a few critical ideas;

  1. A web page should look good, and be easy to use, regardless of the device!
  2. It is a design strategy that emphasizes “mobile first, with unobtrusive javascript, and progressive enhancement”. Especially as the amount of mobile traffic now accounts for more than half of total internet traffic.

There are many (MANY) ways of developing a responsive site. There is not necessarily a “correct” solution.


Examples of a Responsive Sites

{ TODO: }

Go to sites that you frequent often and change the size of the screens width.

  • Do these sites adapt as you shrink the screen?
  • Do you like how these sites look at different sizes?

Pan, Zoom, Touch, Ick

Emulators, Simulators And Real Devices

End of Introduction


Previous section:
Next section: