Responsive Web Design

Introduction to Responsive Web Design.

Transcript

1. RESPONSIVE WEB DESIGN TERRANCE PITRE Friday, May 31, 13
2. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” “ - JOHN ALLSOPP ” author of “A Dao of Web Design” Friday, May 31, 13
3. Friday, May 31, 13
4. Desktop Friday, May 31, 13
5. Laptops Desktop Friday, May 31, 13
6. iPhones Laptops Desktop Friday, May 31, 13
7. iPhones iPads Laptops Desktop Friday, May 31, 13
8. iPhones iPads Laptops Desktop Netbooks Friday, May 31, 13
9. iPhones iPads TV’s Laptops Desktop Netbooks Friday, May 31, 13
10. iPhones iPads Tablets TV’s Laptops Desktop Netbooks Friday, May 31, 13
11. THE PROBLEM • Many websites are created as one fixed size. • People are accessing web from more places than a standard computer monitor. • The user experience diminishes when they access these sites from modern viewing devices. Friday, May 31, 13
12. THE SOLUTION Friday, May 31, 13
13. THE SOLUTION RESPONSIVE WEB DESIGN Friday, May 31, 13
14. THE SOLUTION RESPONSIVE WEB DESIGN ? Friday, May 31, 13
15. WHAT IS RESPONSIVE WEB DESIGN? Friday, May 31, 13
16. WHAT IS RESPONSIVE? Friday, May 31, 13
17. WHAT IS RESPONSIVE? 2 : quick to respond or react appropriately or sympathetically re·spon·sive http://www.merriam-webster.com/dictionary/responsive Friday, May 31, 13
18. A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout. “ - ETHAN MARCOTTE ” author of “Responsive Web Design” WHAT IS RESPONSIVE WEB DESIGN? Friday, May 31, 13
19. WHAT IS RESPONSIVE WEB DESIGN? Building beautiful websites that are smart enough to respond to the device you’re viewing them on... “ - TERRANCE PITRE ” author of nothing by using a flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout. :) Friday, May 31, 13
20. WANNA SNEAK PEEK? Friday, May 31, 13
21. RESPONSIVE WEB DESIGN IN THE WILD http://2012.newadventuresconf.com/ Friday, May 31, 13
22. RESPONSIVE WEB DESIGN IN THE WILD http://forefathersgroup.com/ Friday, May 31, 13
23. RESPONSIVE WEB DESIGN IN THE WILD http://stunningcss3.com/code/bakery/index.html Friday, May 31, 13
24. LET’S MAKE SOME RESPONSIVE WEB DESIGN! Friday, May 31, 13
25. KEY INGREDIENTS! • A Flexible, grid-based layout • Flexible images & media • Media queries! Friday, May 31, 13
26. FLEXIBLE GRID Friday, May 31, 13
27. • Based on columns with content that nests in those columns • But unlike fixed grids, the columns are measured in percent, not fixed pixels • Size everything in ems and percentages KEY INGREDIENTS : FLEXIBLE GRID Friday, May 31, 13
28. KEY INGREDIENTS : FLEXIBLE GRID Friday, May 31, 13
29. KEY INGREDIENTS : FLEXIBLE GRID BUT I WANNA SEE IT FOR REAL! Friday, May 31, 13
30. FLEXIBLE IMAGES Friday, May 31, 13
31. • Images are displayed at max dimensions within an element in the grid • Viewed image size is based upon the percentage given to the element • 2 types of flexible images - background images (CSS) and embedded images KEY INGREDIENTS : FLEXIBLE IMAGES Friday, May 31, 13
32. KEY INGREDIENTS : FLEXIBLE IMAGES Friday, May 31, 13
33. KEY INGREDIENTS : FLEXIBLE IMAGES BUT I WANNA SEE IT FOR REAL! Friday, May 31, 13
34. MEDIA QUERIES! Friday, May 31, 13
35. • Uses the CSS 'media' type to target and inspect the physical characteristics of the device viewing a website • Media queries can go in the html or in the stylesheet KEY INGREDIENTS : MEDIA QUERIES! IN HTML IN STYLESHEET Friday, May 31, 13
36. KEY INGREDIENTS : MEDIA QUERIES! WIDE MONITOR SMALL MONITOR iPad? iPhone? Friday, May 31, 13
37. KEY INGREDIENTS : MEDIA QUERIES! BUT I WANNA SEE IT FOR REAL! Friday, May 31, 13
38. KEY INGREDIENTS : IN SUMMARY... 1. FLEXIBLE GRIDS 2. FLEXIBLE IMAGES 3. MEDIA QUERIES! Friday, May 31, 13
39. SO WHEN CAN WE START USING THIS? Friday, May 31, 13
40. SO WHEN CAN WE START USING THIS? TODAY, YAAAAY! Friday, May 31, 13
41. QUESTIONS? Friday, May 31, 13
42. THANK YOU! Friday, May 31, 13