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.
Holger Bartel
  @foobartel
h@foobartel.com
Responsive Web Design &
  Workflows for Today's
          Web
What I’ll Talk About Today
★   A Primer on RWD
★   RWD IRL - A Case Study
★   RWD Workflow
★   Conclusions & Lessons Learn...
Perception & Status Quo
“We don’t need a mobile site”
bradfrostweb.com
bradfrostweb.com
bradfrostweb.com
New Devices Since 09/12
4"-5" Smartphones                                    9"-10" Tablets
Apple iPhone 5 (4" Apple iOS 6...
“   It is the nature of the web to be
    flexible, and it should be our role
    as designers and developers to
    embra...
What Is RWD?
★   Fluid Grids
★   Flexible Images
★   Media Queries




                      http://www.macrojuice.com/mul...
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. It's not about tablets. It's
    not about desktops. It's about
    The Web...
http://www.flickr.com/photos/58534808@N00/323527111/
Concept
★   Responsive Design or Website + App?
★   Requirements
★   Usability und Performance
★   Project Start: October ...
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.

                     ...
The Common Workflow
                                                                         Content
                     ...
The RWD Process
User          Content                              Iterative Design & Development             Prototype Ha...
Frameworks
Foundation
★   Responsive Grid
★   Navigation & Form Elements
★   Tabs, Buttons, Alerts, Labels, Tooltips
★   Since Founda...
Prototypes & Design
The Waterfall Process
                                                                         Content
                   ...
The RWD Process
User          Content                              Iterative Design & Development             Prototype Ha...
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
★   Co...
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 ...
http://responsiveimagescg.github.com/picture-element/
http://responsiveimages.org/
The Picture Element
Server Side Image
Processing - 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 - Conte...
Seperate Layout & Design




                     http://styletil.es/
Lessons Learned
★   Do not rush, set timing generously
    (Content Strategy, RWD, Frontend, CMS)
★   Mobile First - Conte...
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%)     (1...
The fact is that responsive web design
costs more… than doing nothing. Sure, you
could continue building sites the old
fas...
“   If you want to be relevant on the
    web today, your website must
    adapt and perform on all the
    devices that u...
Thank You.


 Holger Bartel
  @foobartel
h@foobartel.com

Credits: @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
×

of

Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 1 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 2 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 3 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 4 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 5 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 6 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 7 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 8 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 9 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 10 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 11 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 12 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 13 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 14 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 15 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 16 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 17 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 18 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 19 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 20 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 21 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 22 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 23 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 24 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 25 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 26 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 27 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 28 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 29 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 30 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 31 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 32 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 33 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 34 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 35 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 36 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 37 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 38 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 39 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 40 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 41 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 42 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 43 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 44 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 45 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 46 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 47 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 48 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 49 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 50 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 51 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 52 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 53 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 54 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 55 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 56 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 57 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 58 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 59 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 60 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 61 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 62 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 63 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 64 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 65 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 66 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 67 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 68 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 69 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 70 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 71 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 72 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 73 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 74 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 75 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 76 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 77 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 78 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 79 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 80 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 81 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 82 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 83 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 84 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 85 Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Slide 86
Upcoming SlideShare
Neuro Web Design: What makes them click
Next

23 Likes

Share

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

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. Holger Bartel @foobartel h@foobartel.com
  2. Responsive Web Design & Workflows for Today's Web
  3. What I’ll Talk About Today ★ A Primer on RWD ★ RWD IRL - A Case Study ★ RWD Workflow ★ Conclusions & Lessons Learned
  4. Perception & Status Quo
  5. “We don’t need a mobile site”
  6. bradfrostweb.com
  7. bradfrostweb.com
  8. bradfrostweb.com
  9. New Devices Since 09/12 4"-5" Smartphones 9"-10" Tablets Apple 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. “ 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. What Is RWD? ★ Fluid Grids ★ Flexible Images ★ Media Queries http://www.macrojuice.com/multimedia/responsive-web-design/
  12. bradfrostweb.com
  13. CSS3 Media Queries
  14. Media Queries in HTML
  15. Breakpoints ★ basic.css ★ 480.css ★ 600.css (Tablets Portrait) ★ 768.css ★ 992.css (Desktop)
  16. Make It Work In Your HTML Code In Your CSS Code
  17. Browser Support http://caniuse.com/#feat=css-mediaqueries
  18. Resources www.abookapart.com
  19. “ Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web. – Jeremy Keith (@adactio)
  20. http://www.flickr.com/photos/58534808@N00/323527111/
  21. Concept ★ Responsive Design or Website + App? ★ Requirements ★ Usability und Performance ★ Project Start: October 2011
  22. Experimental Client + Established Trust = Happy Designer & Developer :)
  23. “ By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. – Gartner (13.01.2010)
  24. Mobile Access ★ 2010: ~3.300 (ca. 2,5%) ★ 2011: ~8.800 (ca. 6%) ★ 2012: ??
  25. Content Strategy ★ Content First! ★ Simplify Structure, What’s Needed? ★ Design With Final Content
  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. “ Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight. – Andy Clarke (@malarkey)
  28. The Common Workflow Content Strategy Planning And Strategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  29. The RWD Process User Content Iterative Design & Development Prototype Handover Planner, 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. Frameworks
  31. Foundation ★ Responsive Grid ★ Navigation & Form Elements ★ Tabs, Buttons, Alerts, Labels, Tooltips ★ Since Foundation 3: Sass/Compass
  32. Prototypes & Design
  33. The Waterfall Process Content Strategy Planning And Strategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
  34. The RWD Process User Content Iterative Design & Development Prototype Handover Planner, 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. Frontend ★ Rebuild Prototype? ★ Produce valid & clean code ★ Build Modules not pages ★ Create re-usable Code
  36. Into The Unknown ★ Display Size & Resolution ★ Different Browsers & -versions ★ Different Device Capabilities ★ Connection Speed, Bandwidth
  37. A Website doesn’t have to look exactly the same on different devices!
  38. Navigating The Site
  39. Navigation for Mobile
  40. Building Modules
  41. www.flickr.com/photos/brad_frost/7387823392
  42. Open Device Labs opendevicelab.com
  43. Open Device Labs opendevicelab.hk
  44. RWD Considerations
  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. http://responsiveimagescg.github.com/picture-element/
  47. http://responsiveimages.org/
  48. The Picture Element
  49. Server Side Image Processing - RESS
  50. Alternatives http://css-tricks.com/which-responsive-images-solution-should-you-use/
  51. Conclusions
  52. Lessons Learned ★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS) ★ Mobile First - Content First Design
  53. Seperate Layout & Design http://styletil.es/
  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. Important to Remember ★ Test early and often ★ Put your JavaScript at the bottom
  56. Cost & Benefits
  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. The fact is that responsive web design costs more… than doing nothing. Sure, you could continue building sites the old fashioned way and ignore the multitude of web-enabled devices accessing the web now and in the future. But this is 2012. At the very least a web experience should have 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. “ 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. Thank You. Holger Bartel @foobartel h@foobartel.com Credits: @beckenhaub
  • vinipant

    Jan. 20, 2020
  • GattigagaHayyutaDewa

    May. 17, 2017
  • JoostMaes

    Jan. 25, 2015
  • annasorbian

    Nov. 17, 2014
  • littlemgh

    Dec. 24, 2013
  • invasoria

    Oct. 4, 2013
  • theorm

    Oct. 3, 2013
  • Ateneae

    Sep. 24, 2013
  • MixkySWU

    Sep. 12, 2013
  • rcmorris

    Sep. 8, 2013
  • irodap

    Jun. 10, 2013
  • warriersrinath1

    Mar. 23, 2013
  • rahulbalu

    Feb. 27, 2013
  • HiroyukiOgawa

    Feb. 20, 2013
  • ishenliu

    Jan. 29, 2013
  • DianaYazidjian

    Jan. 8, 2013
  • dennissfwu

    Jan. 2, 2013
  • cleitonfco

    Dec. 26, 2012
  • jd91hwacuk

    Dec. 20, 2012
  • wprasit

    Dec. 19, 2012

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.

Views

Total views

30,435

On Slideshare

0

From embeds

0

Number of embeds

3,537

Actions

Downloads

0

Shares

0

Comments

0

Likes

23

×