TODAY S AGENDA. An introduction for Libraries UW-SLIS CES Webinar April 6, 2015 What is Responsive Web Design? Definition & History

Transcription

1 TODAY S AGENDA An introduction for Libraries UW-SLIS CES Webinar April 6, 2015 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 1 2

2 WHAT IS RESPONSIVE WEB DESIGN? 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] 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 3

3 WHAT IS RESPONSIVE WEB DESIGN? 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 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 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 flexible images CSS3 Media Queries <meta name= viewport" content="width=device-width"> 3

5 HOW WE GOT TO RESPONSIVE HOW WE GOT TO RESPONSIVE Choices: Mobile site App Responsive Choices: Mobile site App Responsive

6 HOW WE GOT TO RESPONSIVE HOW WE GOT TO RESPONSIVE Choices: Mobile site App Responsive Choices: Mobile site App Responsive

7 HOW WE GOT TO RESPONSIVE Choices: Mobile site App Responsive

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

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

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

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

12

13 SECRET OF COLUMNS 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 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

14 SECRET OF COLUMNS 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 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

15

16 CSS3 MEDIA QUERIES Used to mostly be screen or print Hide nav when 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

17

18

19

20

21

22 TOOLS Bootstrap Word Press Responsive themes All sorts of code generators & downloads Responsive Grid System GitHub - %93&q=responsive+web+design

23 TOOLS Bootstrap Word Press Responsive themes All sorts of code generators & downloads Responsive Grid System GitHub - %93&q=responsive+web+design

24

25

26

27 RESOURCES, BOOKS: RESOURCES, BOOKS:

28 RESOURCES, BOOKS: RESOURCES, BOOKS:

29 RESOURCES, WEBSITES W3Schools Responsive html/html_responsive.asp RESOURCES, WEBSITES W3Schools Responsive html/html_responsive.asp

30 RESOURCES, WEBSITES W3Schools Responsive html/html_responsive.asp EVEN MORE - A List Apart - Content Strategy for the Web 2 nd ed book, Kristina Halvorson usability.gov content-strategy.html CES web course "Designing Mobile & Responsive Experiences starts June 1 continueed-designmobile.htm

31 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 THANK YOU! QUESTIONS?