This document provides an overview of responsive web design. It defines responsive web design as an approach that aims to provide optimal viewing experiences across different devices. It discusses the history and alternatives to responsive design. The key aspects of responsive design are then explained, including fluid grids, flexible images, CSS media queries, and using the viewport meta tag. Tools for responsive design like Bootstrap and techniques like fluid layouts are also covered. Finally, resources for further learning about responsive web design are provided.

1. 1
An introduction for Libraries
UW-SLIS CES Webinar April 6, 2015

2. TODAY’S AGENDA
• What is Responsive Web Design?
• Definition & History
• How do I DO Responsive Web Design?
• Tips & Tricks & Jargon
• Where do I go to learn more about Responsive Web
Design?
• Resources, Bibliography, SLIS/CES web course
2

3. WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
3

4. WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
“adapts the layout to the viewing environment by using fluid,
proportion-based grids”
3

5. WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
“adapts the layout to the viewing environment by using fluid,
proportion-based grids”
“flexible images”
3

6. WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
“adapts the layout to the viewing environment by using fluid,
proportion-based grids”
“flexible images”
“CSS3 Media Queries”
3

7. WHAT IS RESPONSIVE WEB
DESIGN?
• Responsive web design (RWD) is an approach to web design aimed at
crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
[Wikipedia, the free encyclopedia]
“adapts the layout to the viewing environment by using fluid,
proportion-based grids”
“flexible images”
“CSS3 Media Queries”
<meta name=“viewport" content="width=device-width">
3

8. http://alistapart.com/article/responsive-web-design

9. HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

10. HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

11. HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

12. HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

13. HOW WE GOT TO RESPONSIVE
• Choices:
• Mobile site
• App
• Responsive

16. VIEWPORT META
TAG
• Magic! Sort of
• Tells browser to adjust to
size of device
<meta name="viewport"
content="width=device width”
/>

17. VIEWPORT META
TAG
• Magic! Sort of
• Tells browser to adjust to
size of device
<meta name="viewport"
content="width=device width”
/>

18. VIEWPORT META
TAG
• Magic! Sort of
• Tells browser to adjust to
size of device
<meta name="viewport"
content="width=device width”
/>

19. VIEWPORT META
TAG
• Magic! Sort of
• Tells browser to adjust to
size of device
<meta name="viewport"
content="width=device width”
/>

22. FLUID LAYOUTS
• Escaping the CSS box model!
<div id=”outerwrap">
<div id="header">
<div id=“bodycontent”>
<div id="footer">
• Grid
• Makes content columns swing below each other to fit on
smaller, narrower, screen

23. http://www.responsivegridsystem.com/

24. http://www.responsivegridsystem.com/

25. SECRET OF COLUMNS
• New HTML5 element <section> Defines a section in
the document
• Sizing done in CSS
• Col and span aren’t only for tables anymore
• Table is a display property in CSS3 that says, “Let
the element behave like a <table> element”

26. SECRET OF COLUMNS
• New HTML5 element <section> Defines a section in
the document
• Sizing done in CSS
• Col and span aren’t only for tables anymore
• Table is a display property in CSS3 that says, “Let
the element behave like a <table> element”

27. SECRET OF COLUMNS
• New HTML5 element <section> Defines a section in
the document
• Sizing done in CSS
• Col and span aren’t only for tables anymore
• Table is a display property in CSS3 that says, “Let
the element behave like a <table> element”

28. SECRET OF COLUMNS
• New HTML5 element <section> Defines a section in
the document
• Sizing done in CSS
• Col and span aren’t only for tables anymore
• Table is a display property in CSS3 that says, “Let
the element behave like a <table> element”

32. CSS3 MEDIA QUERIES
• Used to mostly be screen or print
• Hide nav when printing
@media print { #navigation { display: none; } }.
• [W3Schools] Media queries look at the capability of the device, and
can be used to check many things, such as:
• width and height of the browser window
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• Resolution
• You can also have different stylesheets for different media

44. TOOLS
• Bootstrap
• Word Press Responsive themes
• All sorts of code generators & downloads –
• Responsive Grid System
http://www.responsivegridsystem.com/
• GitHub - https://github.com/search?utf8=%E2%9C
%93&q=responsive+web+design

45. TOOLS
• Bootstrap
• Word Press Responsive themes
• All sorts of code generators & downloads –
• Responsive Grid System
http://www.responsivegridsystem.com/
• GitHub - https://github.com/search?utf8=%E2%9C
%93&q=responsive+web+design

49. http://designinstruct.com/roundups/html5-frameworks/

53. RESOURCES,
BOOKS:

54. RESOURCES,
BOOKS:

55. RESOURCES,
BOOKS:

56. RESOURCES,
BOOKS:

57. RESOURCES, WEBSITES
• W3Schools Responsive
http://www.w3schools.com/
html/html_responsive.asp

58. RESOURCES, WEBSITES
• W3Schools Responsive
http://www.w3schools.com/
html/html_responsive.asp

59. RESOURCES, WEBSITES
• W3Schools Responsive
http://www.w3schools.com/
html/html_responsive.asp

60. EVEN MORE -
• A List Apart - http://alistapart.com/
• Content Strategy for the Web – 2nd ed. 2012 book,
Kristina Halvorson http://contentstrategy.com/
• usability.gov http://www.usability.gov/what-and-why/
content-strategy.html
• CES web course "Designing Mobile & Responsive
Experiences” starts June 1 http://www.slis.wisc.edu/
continueed-DesignMobile.htm

61. THANK YOU! QUESTIONS?
“But that kind of design thinking
doesn’t need to be our default.
Now more than ever, we’re
designing work meant to be viewed
along a gradient of different
experiences. Responsive web
design offers us a way forward,
finally allowing us to “design for the
ebb and flow of things.” Ethan
Marcotte