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

3,285 views

Published on

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

Published in: Technology, Design
2 Comments
1 Like
Statistics
Notes
  • 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
No Downloads
Views
Total views
3,285
On SlideShare
0
From Embeds
0
Number of Embeds
348
Actions
Shares
0
Downloads
49
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide
  • Opening screen that will be up before talk begins, while people are eating, mingling
  • Ask audience: “So who knows who this is?” ..answer: Ethan Marcotte alter ego on Twitter. Who is Ethan …
  • EM literally wrote the book on RWD… was supposed to be talking in Madison this Thursday at Design Madison but cancelled. So instead of EM you get the next best thing: two guys who have read the book on RWD. (ha ha) … then jump into introductions
  • Introduce ourselves and talk about what we do at UW-Madison. Emphasize that we are communicators first and responsible for how UW-Madison is presented online. We strive to design beautifully engineered websites and applications that advance the university ’s communication and marketing goals. Etc. etc.
  • A brief geek-out inventory of the tools and technologies we use in UComm to establish our developer creds
  • Just a preview of what we ’ll be covering our talk. ----- Meeting Notes (4/16/12 14:01) ----- Vidal talks
  • Talk about starting with native app development in 2010. Big Shiny Object Syndrome slide? Native apps as cultural phenomena – it was cool to have an app and university leadership wanted to “keep up wit the Joneses” — Clarify difference between Native apps and the web (i.e. apps are standalone software that is downloaded and installed on devices; can leverage full features of the device) — Timeline: Mobile UW for iPhone launched Dec 2010; Android Aug 2011; currently on version 1.2; still in active development)
  • More code to manage (code base for iOS and Android) — Skills are harder to find (Objective C and Java) — Infrequent updates (three versions in 15 months) — Limited features (compared to the university ’s overall web presence) — Not everyone has an iPhone or Android
  • Brian Rieger ’s presentation, “Rethinking the Mobile Web” — acknowledge Ben Seigel sharing this with the Meetup email list a few weeks back. This presentation changed my thinking a year ago about mobile and access. Not everyone has the latest smart phone. We’re a public university and our goal has always been to prevent barriers to accessing our resources (See: web accessibility) Mobile UW has been great but not everyone can use it. (Other parts of the world: many people using feature phones to access the Internet etc.) Be sure to balance this against pragmatism though. This is an ideal that guides are work though we need to balance this against reality etc. etc.
  • Conclusion: We need to reach people no matter what their device — December 2011: m.wisc.edu launched — Content and features b ased on native apps — Built with Kurogo (open source PHP framework)
  • More code to manage(based on Kurogo open-source framework) – Main issue though is that it ’s a totally different experience than www.wisc.edu — And we auto-redirect people here (useful for a majority of user but not all) — Share user stats showing many users still going back to www.wisc.edu to get to WiscMail, MyUW etc. – sites not optimized at all for mobile. (Conclusion: people use their mobile devices to do many of the same things they always have done on the web.) So what is the Mobile web?
  • We shouldn ’t have to funnel users down altogether different experiences based on their device. We shouldn’t have to hide content or features for mobile phone users. But before we get there …
  • So what is the mobile web? Or: Is there even such a thing as the mobile web? Show Brad Frost ’s three screen sequence here, giving him full credit of course.
  • So what is the mobile web? Or: Is there even such a thing as the mobile web? Show Brad Frost ’s three screen sequence here, giving him full credit of course.
  • ----- Meeting Notes (4/16/12 14:01) ----- Vidal starts - starting last fall
  • This is a description given by Matt Doyle in his article “Responsive Web Design Demysitified”. The image was taken by Bryan Frost while trying out Adobe Shadow.
  • This is a description given by Matt Doyle in his article “Responsive Web Design Demysitified”. The image was taken by Bryan Frost while trying out Adobe Shadow.
  • This is a description given by Matt Doyle in his article “Responsive Web Design Demysitified”. The image was taken by Bryan Frost while trying out Adobe Shadow.
  • This is a description given by Matt Doyle in his article “Responsive Web Design Demysitified”. The image was taken by Bryan Frost while trying out Adobe Shadow.
  • ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • Of course, you ideally don ’t want to deliver that 960px-wide, 200K image to someone’s smart phone when they’ll only see it at 320px wide. You’d prefer to just give them a 30K image instead and save the bandwidth. ----- Meeting Notes (4/16/12 14:01) ----- Vidal
  • At this point, we should jump out of PowerPoint and show some sample code and demo how it works. ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • ----- Meeting Notes (4/16/12 14:01) ----- Vidal
  • ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • Need to think more about what to say here and how much. Need to be a high-level overview, emphasizing how critical content and purpose and audience are to the development process. In addition to content, we also need to …. ----- Meeting Notes (4/16/12 14:01) ----- Vidal
  • Need to think more about what to say here and how much. Need to be a high-level overview, emphasizing how critical content and purpose and audience are to the development process. In addition to content, we also need to ….
  • Need to think more about what to say here and how much. Need to be a high-level overview, emphasizing how critical content and purpose and audience are to the development process. In addition to content, we also need to ….
  • Need to think more about what to say here and how much. Need to be a high-level overview, emphasizing how critical content and purpose and audience are to the development process. In addition to content, we also need to ….
  • Jump to web here to show these two sites. Explain the rationale for choosing RWD for the. Show them in different devices (desktop, iPhone simulator, iPad simulator or we could get screen captures?) ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • Jump to web here to show these two sites. Explain the rationale for choosing RWD for the. Show them in different devices (desktop, iPhone simulator, iPad simulator or we could get screen captures?) ----- Meeting Notes (4/16/12 14:01) ----- Vidal
  • ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • ----- Meeting Notes (4/16/12 14:01) ----- Nick
  • Introduce ourselves and talk about what we do at UW-Madison. Emphasize that we are communicators first and responsible for how UW-Madison is presented online. We strive to design beautifully engineered websites and applications that advance the university ’s communication and marketing goals. Etc. etc.
  • 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

    ×