Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design: How the mobile web has changed the way we think and work

3,350 views

Published on

An overview of how Responsive Web Design is shaping the way we approach web design and development.

Published in: Technology, Design
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company. Responsive Website Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Web Design: How the mobile web has changed the way we think and work

  1. 1. Madison Web design Meetup Responsive Web Design: How the mobile web haschanged the way we think and work Vidal Quevedo (@vq20) and Nick Weaver (@nickweaver) [ April 19, 2012 ]
  2. 2. Ethanmarcotte(@beep / @rwd)
  3. 3. Responsive Web Design Books
  4. 4. Who we are Nick Weaver Director of Web ServicesUniversity Communications, UW–Madison @nickweaver | jnweaver@wisc.edu Vidal Quevedo Web Communications StrategistUniversity Communications, UW–Madison @vq20 | quevedo@wisc.edu
  5. 5. Our toolkit• HTML, CSS, JavaScript• PHP, Ruby• MySQL, PostgreSQL• WordPress• Rails, Kohana• Git (and some lingering Subversion)• Textmate, Sublime Text, Vim, Coda, BBEdit
  6. 6. Overview• A brief history of mobile at UW-Madison • Challenges of native apps and mobile sites• The One-Web Ideal: Universality as a philosophy• Responsive Web Design • What is it? • The benefits of RWD • The challenges of RWD • Pragmatic RWD: Content, Context, Audiences • What’s next in RWD?
  7. 7. A brief history of mobile at UW-Madison
  8. 8. UW–Madison Native apps • Launched in Dec 2010 and Aug 2011 for iOS and Android, respectively • “Big Shiny Object Syndrome”
  9. 9. Challenges of native apps• More code to manage• Skills are harder to find• Infrequent updates• Limited features• Not everyone has an iPhone or Android
  10. 10. BrYan Rieger: Rethinking the Mobile Web• Not everyone has a smart phone to use your app• Web-based apps can be better suited to bridge the gap• Deliver a consistent experience across multiple platforms http://www.slideshare.net/bryanrieger/rethinking-the-mobile- web-by-yiibu
  11. 11. m.wisc.edu• Launched December 2011• Platform agnostic• Relies on User-Agent detection and delivers tailored experience based upon device classes
  12. 12. Challenges of m.wisc.edu• More code to manage (native + web)• m.wisc.edu is a completely different experience than www.wisc.edu ≠
  13. 13. The One-Web Ideal: Universality as a philosophy
  14. 14. An ideal world: one webA website should provide a useful userexperience no matter what device you’reusing to access it.~ Nick Weaver and Vidal Quevedo
  15. 15. So, what is the “web”?
  16. 16. This is not the webhttp://bradfrostweb.com/blog/notes/this-is-the-web/
  17. 17. This is the webhttp://bradfrostweb.com/blog/notes/this-is-the-web/
  18. 18. This will be the Webhttp://bradfrostweb.com/blog/notes/this-is-the-web/
  19. 19. Responsive Web Design
  20. 20. What is RWD?“The basic idea ofResponsive WebDesign is that awebsite should‘respond’ to thedevice its beingviewed on.”~ Matt Doylehttp://www.elated.com/articles/responsive-web-design-demystified/ - Image: http://instagr.am/p/H41MqlHI4Q/
  21. 21. Some examplesThe Boston Globe http://designmodo.com/responsive-design-examples/
  22. 22. Some examplesStephen Caver (personal website) http://designmodo.com/responsive-design-examples/
  23. 23. Some examplesThink Vitamin (design blog) http://designmodo.com/responsive-design-examples/
  24. 24. Basic rwd elements• Fluid-based layouts• Responsive images and media• Media queries
  25. 25. Fluid-based layouts• px vs. %• Benefit: Page layout and content that scales proportionally the screen real estate available.http://speakerdeck.com/u/lucasalvini/p/responsive-design-and-progressive-enhancements-for-the-web-workshop#fans
  26. 26. Responsive images and media• img {max-width: 100%;}• Benefit: Images (or embedded video e.g.) that can scale up or down to fill the width of their container elements.
  27. 27. Media queries @media screen and (max-width: 480px) { .sidebar { float: none; width: 98%; } }• Benefit: Define CSS rules that only apply to devices that meet the conditional tests of the device properties (“Break Points”)
  28. 28. RWD: Benefits• One code base!• Device-agnostic• Relatively easy (CSS)
  29. 29. RWD: Challenges• The main challenges of mobile-optimized sites are still ones of user-centered content and design• Browser support (and workarounds)• No perfect solution for delivering responsive images and assets• Managing CSS and media queries can get complex• Source code order can limit content/design choices• Testing requires more time (and money, i.e. devices)
  30. 30. To be or not to be responsive? • RWD isn’t only about CSS/HTML/JavaScript techniques: it is a different web development approach that requires a more focused mindset Specs Screen size Diversity Diversity CONTENTInterface CONTEXT ConnectivityDiversity Diversity http://speakerdeck.com/u/lucasalvini/p/responsive-design-and-progressive-enhancements-for-the-web-workshop#fans
  31. 31. To be or not to be responsive?• Mobile First • Design from a mobile perspective first and then up (and not the other way)• Content First • Be lean and mean: On mobile, real state is precious. What is the most important content you need to showcase? Use this as an evaluation of the overall content strategy of your site.• Content Strategy • What to deliver, and when: focus on audiences and activities (“Content like water”)
  32. 32. To be or not to be responsive?• Excellent article by Rudy Regot: “Responsive web design: a project-management perspective*”• Important questions to ask BEFORE starting the project: • Does this project need to be responsive? • Will all views have the same features? • Will you need to split views? (i.e. touch.facebook.com) http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/
  33. 33. To be or not to be responsive?• Where will the “break points be”? Will they be content-driven or device-driven?• Will it be fluid all the way?• To be or not to be mobile first?http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/
  34. 34. Case study: uw emergency http://emergency.wisc.edu
  35. 35. Case study: #uwrightnowhttp://uwrightnow.wisc.edu
  36. 36. RWD: Who to follow• For RWD, Twitter is the best way to get the latest as it happens. Follow these people: • Brad Frost - @brad_frost • Jason Grigsby - @grigs • Stephanie Rieger - @stephanierieger • Jeremy Kieth - @adactio • Luke Wrobelewski - @lukew
  37. 37. RWD: Who to follow (cont)• Here’s a still tiny but growing list on RWD we put together on Twitter:• https://twitter.com/#!/vq20/responsive-web-design
  38. 38. RWD: Books and articles• Books: RWD (Ethan Marcotte), Mobile First (Luke Wroblesky), Content Strategy (Kristina Halvorson)• Articles: We will share a list via email
  39. 39. Thanks! Nick Weaver Director of Web ServicesUniversity Communications, UW–Madison @nickweaver | jnweaver@wisc.edu Vidal Quevedo Web Communications StrategistUniversity Communications, UW–Madison @vq20 | quevedo@wisc.edu

×