Understanding Responsive Web Design
1 like1,293 views
Responsive web design allows websites to automatically adjust their layout and content presentation based on the screen size of the device used to access the site. It began as a way to create flexible and adaptive designs for different devices without needing separate mobile sites. Key techniques include flexible grids, flexible images, and media queries. Separating content from design and functionality leads to more flexible and innovative solutions that can be delivered across different technologies and devices through responsive techniques and APIs.
![Why am I talking about RWD? [1/2]
DESIGNER
DEVELOPER
+
#RWD, Recurring problem with many sides](https://image.slidesharecdn.com/understandingresponsivewebdesign-141222105557-conversion-gate02/85/Understanding-Responsive-Web-Design-5-320.jpg)
![Obligatory 際際滷 with Statistics [1/2]
http://www.dotcominfoway.com/blog/responsive-web-design-infographic](https://image.slidesharecdn.com/understandingresponsivewebdesign-141222105557-conversion-gate02/85/Understanding-Responsive-Web-Design-9-320.jpg)
![Obligatory 際際滷 with Statistics [2/2]
http://www.splio.com/responsive/](https://image.slidesharecdn.com/understandingresponsivewebdesign-141222105557-conversion-gate02/85/Understanding-Responsive-Web-Design-10-320.jpg)
![Why am I talking about RWD? [2/2]
ITS HAPPENING
USERS DEMAND IT
WE MUST ADVOCATE](https://image.slidesharecdn.com/understandingresponsivewebdesign-141222105557-conversion-gate02/85/Understanding-Responsive-Web-Design-11-320.jpg)
More Related Content
Similar to Understanding Responsive Web Design (20)
Recently uploaded (20)
![[NYC Scrum] 4 bad ideas about productivity... and what Agilists should do ins...](https://cdn.slidesharecdn.com/ss_thumbnails/nycscrum4badideasaboutproductivity-250320014757-d85c2fbe-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25-250317080651-1a2cccb1-thumbnail.jpg?width=560&fit=bounds)
Understanding Responsive Web Design
- 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
- 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 際際滷 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
- 9. Obligatory 際際滷 with Statistics [1/2] http://www.dotcominfoway.com/blog/responsive-web-design-infographic
- 10. Obligatory 際際滷 with Statistics [2/2] http://www.splio.com/responsive/
- 11. Why am I talking about RWD? [2/2] ITS HAPPENING USERS DEMAND IT WE MUST ADVOCATE
- 12. Todays 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
- 14. HOW DO YOU THINK ABOUT THE INTERNET? Users and 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 Its easy to think everyone knows the internet like you do
- 22. Users and the Internet The Elderly?
- 23. Users and the Internet Kid with tablet?
- 24. Users and the Internet Teenagers on Cellphones?
- 25. Users and the Internet Someone whos lost and driving?
- 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
- 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 Whats 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
- 40. History of Responsive Web Design We cant 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 Whats 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 Whats 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 Whats 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 Whats Next? HOW DOES THIS LOOK?
- 50. Separating Ideas From Technology Functionality Delivered Via API
- 51. Separating Ideas From Technology
- 52. Separating Ideas From Technology New wave of API driven companies
- 53. Separating Ideas From Technology Whats 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
- 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 FoundationDevelopers All the Basics Full of Best Practices Solid Community Great Starting Point Open Source
- 61. Getting Responsive Style Tiles or Element CollagesDesigners Define a Visual Language Think Outside of Pixels Flexible Deliverables Iteration
- 62. Getting Responsive Not One Right Way REVISING PROCESSES
- 64. Getting Responsive There Will Always Be Changes FOCUS ON USERS
- 65. Getting Responsive It doesnt matter where you are in the process DONT GIVE UP
- 66. THANKS!