Holger Bartel  @foobartelh@foobartel.com
Responsive Web Design &  Workflows for Todays          Web
What I’ll Talk About Today★   A Primer on RWD★   RWD IRL - A Case Study★   RWD Workflow★   Conclusions & Lessons Learned
Perception & Status Quo
“We don’t need a mobile site”
bradfrostweb.com
bradfrostweb.com
bradfrostweb.com
New Devices Since 09/124"-5" Smartphones                                    9"-10" TabletsApple iPhone 5 (4" Apple iOS 6.0...
“   It is the nature of the web to be    flexible, and it should be our role    as designers and developers to    embrace ...
What Is RWD?★   Fluid Grids★   Flexible Images★   Media Queries                      http://www.macrojuice.com/multimedia/...
bradfrostweb.com
CSS3 Media Queries
Media Queries in HTML
Breakpoints★   basic.css★   480.css★   600.css (Tablets Portrait)★   768.css★   992.css (Desktop)
Make It Work In Your HTML Code In Your CSS Code
Browser Support                  http://caniuse.com/#feat=css-mediaqueries
Resources            www.abookapart.com
“   Responsive design is not about    mobile. Its not about tablets. Its    not about desktops. Its about    The Web.     ...
http://www.flickr.com/photos/58534808@N00/323527111/
Concept★   Responsive Design or Website + App?★   Requirements★   Usability und Performance★   Project Start: October 2011
Experimental Client             +     Established Trust             =Happy Designer & Developer :)
“   By 2013, mobile phones will    overtake PCs as the most    common Web access device    worldwide.                     ...
Mobile Access★   2010: ~3.300 (ca. 2,5%)★   2011: ~8.800 (ca. 6%)★   2012: ??
Content Strategy★   Content First!★   Simplify Structure, What’s Needed?★   Design With Final Content
Designing In The Browser★   Quick results & real testing★   Use advantages of HTML5/CSS3★   Prototyping extremely fast★   ...
“   Using photoshop/fireworks for    responsive design is like bringing    a knife to a gunfight.                      – A...
The Common Workflow                                                                         Content                       ...
The RWD ProcessUser          Content                              Iterative Design & Development             Prototype Han...
Frameworks
Foundation★   Responsive Grid★   Navigation & Form Elements★   Tabs, Buttons, Alerts, Labels, Tooltips★   Since Foundation...
Prototypes & Design
The Waterfall Process                                                                         Content                     ...
The RWD ProcessUser          Content                              Iterative Design & Development             Prototype Han...
Frontend★   Rebuild Prototype?★   Produce valid & clean code★   Build Modules not pages★   Create re-usable Code
Into The Unknown★   Display Size & Resolution★   Different Browsers & -versions★   Different Device Capabilities★   Connec...
A Website doesn’t have to look exactly the same on different            devices!
Navigating The Site
Navigation for Mobile
Building Modules
www.flickr.com/photos/brad_frost/7387823392
Open Device Labs                   opendevicelab.com
Open Device Labs                   opendevicelab.hk
RWD Considerations
Responsive Images★   Avoid unnecessary data★   Same images for all devices★   When to use Retina images?★   <img> Tag isn’...
http://responsiveimagescg.github.com/picture-element/
http://responsiveimages.org/
The Picture Element
Server Side ImageProcessing - RESS
Alternatives           http://css-tricks.com/which-responsive-images-solution-should-you-use/
Conclusions
Lessons Learned★   Do not rush, set timing generously    (Content Strategy, RWD, Frontend, CMS)★   Mobile First - Content ...
Seperate Layout & Design                     http://styletil.es/
Lessons Learned★   Do not rush, set timing generously    (Content Strategy, RWD, Frontend, CMS)★   Mobile First - Content ...
Important to Remember★   Test early and often★   Put your JavaScript at the bottom
Cost & Benefits
The Last 3 Years  Year     2010     2011     2012 Mobile    3.300    9.000    20.400  (%)      (2,5%)   (6%)     (14%) Jul...
The fact is that responsive web designcosts more… than doing nothing. Sure, youcould continue building sites the oldfashio...
“   If you want to be relevant on the    web today, your website must    adapt and perform on all the    devices that use ...
Thank You. Holger Bartel  @foobartelh@foobartel.comCredits: @beckenhaub
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
Upcoming SlideShare
Loading in...5
×

Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)

8,164

Published on

A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.

Published in: Design
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,164
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)"

  1. 1. Holger Bartel @foobartelh@foobartel.com
  2. 2. Responsive Web Design & Workflows for Todays Web
  3. 3. What I’ll Talk About Today★ A Primer on RWD★ RWD IRL - A Case Study★ RWD Workflow★ Conclusions & Lessons Learned
  4. 4. Perception & Status Quo
  5. 5. “We don’t need a mobile site”
  6. 6. bradfrostweb.com
  7. 7. bradfrostweb.com
  8. 8. bradfrostweb.com
  9. 9. New Devices Since 09/124"-5" Smartphones 9"-10" TabletsApple iPhone 5 (4" Apple iOS 6.0) iPad Gen 4 (9.7" Apple iOS 6.0)Nokia Lumia 920 (4.5" Microsoft Windows 8) Microsoft Surface Tablet (10.6" Microsoft Windows 8)HTC Windows Phone 8X (4.3" Microsoft Windows 8) Kindle Fire HD (8.9" Google Android 4.0 modified)HTC Windows Phone 8S (4.0" Microsoft Windows 8) Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8)Motorola Droid RAZR HD (4.7" Google Android 4.0) Acer Iconia Tab W510 (10.1" Microsoft Windows 8)Motorola Droid RAZR M (4.3" Google Android 4.0) Dell Latitude 10 (10.1" Microsoft Windows 8)Google/LG Nexus 4 (4.7" Google Android 4.2) Dell XPS 10 (10.1" Microsoft Windows 8) Asus Vivo Tab RT (10.1" Microsoft Windows 8)5"-6" Phone/Tablet Hybrids Google/LG Nexus 10 (10.055” Google Android 4.2)Samsung Galaxy Note II (5.5" Google Android 4.0) 11"-17" Laptops & Convertibles (Tablet/Laptop)7"-8" Tablets 13" MacBook Pro with Retina (13" Apple OSX 10.8)iPad Mini (7.9" Apple iOS 6.0) Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8)Kindle Fire HD (7" Google Android 4.0 modified) Lenovo ThinkPad Twist (12.5" Microsoft Windows 8)Kindle Fire (7" Google Android 4.0 modified) Toshiba Satellite U925T (12.5" Microsoft Windows 8)Google/LG Nexus 7 (7" Google Android 4.2) Dell XPS 12 (12.5" Microsoft Windows 8) Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8)20"-30" Desktops Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8)Sony Tap 20 (20" touch screen Microsoft Windows 8) Acer Iconia W700 (11.6" Microsoft Windows 8)21.5-inch iMac (21.5" Apple OSX 10.8) Sony Vaio Duo 11 (11.6" Microsoft Windows 8)27-inch iMac (27" Apple OSX 10.8) Samsung Chromebook (11.6" Google Chrome OS) http://www.lukew.com/ff/entry.asp?1646
  10. 10. “ It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this. – John Allsopp http://www.alistapart.com/articles/dao/
  11. 11. What Is RWD?★ Fluid Grids★ Flexible Images★ Media Queries http://www.macrojuice.com/multimedia/responsive-web-design/
  12. 12. bradfrostweb.com
  13. 13. CSS3 Media Queries
  14. 14. Media Queries in HTML
  15. 15. Breakpoints★ basic.css★ 480.css★ 600.css (Tablets Portrait)★ 768.css★ 992.css (Desktop)
  16. 16. Make It Work In Your HTML Code In Your CSS Code
  17. 17. Browser Support http://caniuse.com/#feat=css-mediaqueries
  18. 18. Resources www.abookapart.com
  19. 19. “ Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web. – Jeremy Keith (@adactio)
  20. 20. http://www.flickr.com/photos/58534808@N00/323527111/
  21. 21. Concept★ Responsive Design or Website + App?★ Requirements★ Usability und Performance★ Project Start: October 2011
  22. 22. Experimental Client + Established Trust =Happy Designer & Developer :)
  23. 23. “ By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. – Gartner (13.01.2010)
  24. 24. Mobile Access★ 2010: ~3.300 (ca. 2,5%)★ 2011: ~8.800 (ca. 6%)★ 2012: ??
  25. 25. Content Strategy★ Content First!★ Simplify Structure, What’s Needed?★ Design With Final Content
  26. 26. Designing In The Browser★ Quick results & real testing★ Use advantages of HTML5/CSS3★ Prototyping extremely fast★ Easy Changes (Colors, Fontsize, etc.)★ Decide right in the browser
  27. 27. “ Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight. – Andy Clarke (@malarkey)
  28. 28. The Common Workflow Content StrategyPlanning AndStrategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  29. 29. The RWD ProcessUser Content Iterative Design & Development Prototype HandoverPlanner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
  30. 30. Frameworks
  31. 31. Foundation★ Responsive Grid★ Navigation & Form Elements★ Tabs, Buttons, Alerts, Labels, Tooltips★ Since Foundation 3: Sass/Compass
  32. 32. Prototypes & Design
  33. 33. The Waterfall Process Content StrategyPlanning AndStrategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  34. 34. The RWD ProcessUser Content Iterative Design & Development Prototype HandoverPlanner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
  35. 35. Frontend★ Rebuild Prototype?★ Produce valid & clean code★ Build Modules not pages★ Create re-usable Code
  36. 36. Into The Unknown★ Display Size & Resolution★ Different Browsers & -versions★ Different Device Capabilities★ Connection Speed, Bandwidth
  37. 37. A Website doesn’t have to look exactly the same on different devices!
  38. 38. Navigating The Site
  39. 39. Navigation for Mobile
  40. 40. Building Modules
  41. 41. www.flickr.com/photos/brad_frost/7387823392
  42. 42. Open Device Labs opendevicelab.com
  43. 43. Open Device Labs opendevicelab.hk
  44. 44. RWD Considerations
  45. 45. Responsive Images★ Avoid unnecessary data★ Same images for all devices★ When to use Retina images?★ <img> Tag isn’t ready yet★ Polyfills = Just a workaround
  46. 46. http://responsiveimagescg.github.com/picture-element/
  47. 47. http://responsiveimages.org/
  48. 48. The Picture Element
  49. 49. Server Side ImageProcessing - RESS
  50. 50. Alternatives http://css-tricks.com/which-responsive-images-solution-should-you-use/
  51. 51. Conclusions
  52. 52. Lessons Learned★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS)★ Mobile First - Content First Design
  53. 53. Seperate Layout & Design http://styletil.es/
  54. 54. Lessons Learned★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS)★ Mobile First - Content First Design★ Separate Layout & Design★ Use LESS/Sass & Compass
  55. 55. Important to Remember★ Test early and often★ Put your JavaScript at the bottom
  56. 56. Cost & Benefits
  57. 57. The Last 3 Years Year 2010 2011 2012 Mobile 3.300 9.000 20.400 (%) (2,5%) (6%) (14%) Jul-Aug 1.900 4.500 12.500 (%) (3,5%) (7.5%) (18%)
  58. 58. The fact is that responsive web designcosts more… than doing nothing. Sure, youcould continue building sites the oldfashioned way and ignore the multitude ofweb-enabled devices accessing the webnow and in the future. But this is 2012. Atthe very least a web experience shouldhave at least some mobile consideration,and at the very most a site should be full-on mobile optimized. http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
  59. 59. “ If you want to be relevant on the web today, your website must adapt and perform on all the devices that use the web. – Mobify
  60. 60. Thank You. Holger Bartel @foobartelh@foobartel.comCredits: @beckenhaub

×