Understanding Responsive Web Design

What is it? Why it's important? And how to get into it.

Transcript

1. Understanding Responsive Web Design Ryan LaBouve
2. Ryan LaBouve @RyanLaBouve | ryanlabouve.com WHO AM I?
3. University of Oklahoma College of Arts & Sciences WHERE I WORK Advise ® The University of Oklahoma
4. HolyArchers holyarchers.com
5. Why am I talking about RWD? [1/2] DESIGNER DEVELOPER + #RWD, Recurring problem with many sides
6. As much as “Internet” is a buzzword IS THIS JUST ANOTHER BUZZWORD? #RWD
7. Buzzword Slide 1 SOCIAL MEDIA SEAMLESSLY POWERING GAME CHANGING GLOBAL EVENTS CAUSI TRENDING TWITTER PARADIGMS MOBILI CLOUD TECHNOLOGIES TO FROM WIN-WI ROCK STAR RESPONSIVE WEB DESIGN AT SERVICE LEVEL DELIVERABLES FOR MULT BLEEDING EDGE START UP CULTURE FOR LOW HANGING FRUIT AS THE MISSION ST CREATIVE AND COLLABORATIVE SOLUTIO BIG DATA LEVERAGING ANALYTIC FOUND MOBILE WEB VIRTULIZATIONS DE DUPING JSON REST API THAT OAUTH WILL AUTHO
8. Buzzword Slide 2
9. Obligatory Slide with Statistics [1/2] http://www.dotcominfoway.com/blog/responsive-web-design-infographic
10. Obligatory Slide with Statistics [2/2] http://www.splio.com/responsive/
11. Why am I talking about RWD? [2/2] IT’S HAPPENING USERS DEMAND IT WE MUST ADVOCATE
12. Today’s Agenda • Users and the Internet • History of Responsive Web Design • Separating Ideas from Technology • Getting Responsive Understanding Responsive Web Design Why? What? How Pt. I How Pt. II
13. Users and The Internet
14. HOW DO YOU THINK ABOUT THE INTERNET? Users and the Internet
15. http://www.opte.org/
16. http://www.telegeography.com/assets/website/images/maps/submarine-cable-map-2014/submarine-cable-map-2014-l.png
17. http://idsgn.org/posts/mapping-the-internet/
18. Integration and Abstraction Users and the Internet HOW DO YOU SEE THE INTERNET?
19. How I See The Internet Users and the Internet
20. This is a lot of us Users and the Internet SOUND FAMILIAR?
21. WHAT ABOUT YOUR USERS? Users and the Internet It’s easy to think everyone knows the internet like you do…
22. Users and the Internet The Elderly? http://farm1.staticflickr.com/23/33966345_f29a800861_o.jpg
23. Users and the Internet Kid with tablet? http://farm8.static.flickr.com/7161/6659996469_f521a61694.jpg
24. Users and the Internet Teenagers on Cellphones? http://upload.wikimedia.org/wikipedia/commons/a/af/20081114_Justine_Ezarik_and_iPhone.jpg
25. Users and the Internet Someone who’s lost and driving? http://farm3.staticflickr.com/2493/4154700552_8bd3ffd6ca_o.jpg
26. Users and the Internet Extreme Vision Impairment?
27. SAME STORY ! DIFFERENT WAYS TO TELL IT Users and the Internet Getting your site to all these people in a way they get it?
28. Users and the Internet Same Story, told different ways. vs
29. History of Responsive Web Design
30. My Vastly Oversimplified History of the Computer, Internet, and Possible the World History of Responsive Web Design First…
31. History of Responsive Web Design Tower PC Era 800x600
32. History of Responsive Web Design Rise of Laptops 1024x768… mostly
33. History of Responsive Web Design Mobile Age … now what?
34. History of Responsive Web Design Common Resolutions
35. History of Responsive Web Design Responsive Web Design Flexible Grid Flexible Images Media Queries
36. History of Responsive Web Design Responsive Web Design
37. History of Responsive Web Design What’s Next? A Few Techniques A New Web
38. History of Responsive Web Design Whole New Challenges Native VS Web Android VS iPhone Mobile Version VS Multiple Sites
39. Separating Ideas from Technology
40. History of Responsive Web Design We can’t hire specialists for everything… • Web Sites • App • iPhone App • Android App • Mobile Web Site • XBox Integration • Apple TV, Roku, etc. • AT Compatible • etc… WHERE DO WE FOCUS?
41. Separating Ideas From Technology What’s Next? START WITH CONTENT
43. Separating Ideas From Technology Focusing on Content is the Key http://dribbble.com/shots/978690-Content-is-like-water
44. Separating Ideas From Technology Starts with Separating Content from Design from Functionality
45. Separating Ideas From Technology What’s Next? THIS LEADS TO FLEXIBILITY
46. Separating Ideas From Technology http://trentwalton.com/2011/07/14/content-choreography/ Trent Walton
47. Separating Ideas From Technology What’s Next? WHICH LEADS TO INNOVATION
48. Separating Ideas From Technology http://bradfrostweb.com/blog/post/atomic-web-design/ Brad Frost
49. Separating Ideas From Technology What’s Next? HOW DOES THIS LOOK?
50. Separating Ideas From Technology Functionality Delivered Via API
51. Separating Ideas From Technology http://3.bp.blogspot.com/-ljYR5yd04BY/T_TZ47FlnxI/ AAAAAAAAADg/zGitjj4iLCQ/s1600/Slide01.jpg
52. Separating Ideas From Technology New wave of API driven companies
53. Separating Ideas From Technology What’s Next? WHERE DOES THIS LEAD?
54. Separating Ideas From Technology Next Wave Responsive Touch Voice Auxiliary Smart Watches, Google Glass Siri XBox Kinect
55. Separating Ideas From Technology A New Frontier Internet of Things Everything can get on the internet New Data Sources Bio Feedback * Home Integration * Location Awareness Super-connected Users Always on. Never off. More and more integration
56. Getting Responsive
57. Getting Responsive Not One Right Way SOME CONSISTENT WINS
58. Getting Responsive Learning the Basics Flexible Grid Flexible Images Media Queries
59. Getting Responsive Using the Right Tools Designers Developers Style Tiles Element Collages Learning a little code Bootstrap Foundation jQuery Plugins -FlexVid.js -Fittext.js @beep @brad_frost @samkap @davatron5000 @chriscoyier @trentwalton @leaverou Many others… Other People
60. Getting Responsive Bootstrap or Foundation Developers All the Basics Full of Best Practices Solid Community Great Starting Point Open Source
61. Getting Responsive Style Tiles or Element Collages Designers Define a Visual Language Think Outside of Pixels Flexible Deliverables Iteration
62. Getting Responsive Not One Right Way REVISING PROCESSES
63. VS Waterfall Iteration http://readwrite.com/2012/05/10/bye-bye-waterfall-5-steps-to-implement-responsive-web-design#awesm=%7EoAQFLcHaqt6hKX
64. Getting Responsive There Will Always Be Changes FOCUS ON USERS
65. Getting Responsive It doesn’t matter where you are in the process DON’T GIVE UP
66. THANKS!