$30 off During Our Annual Pro Sale. View Details »

Fragmented Web Design

Fragmented Web Design

Think different - Build for all Devices

Matthias Lau

October 09, 2014
Tweet

More Decks by Matthias Lau

Other Decks in Programming

Transcript

  1. FRAGMENTED web design THINK DIFFERENT - BUILD FOR ALL DEVICES

  2. @MATTHIASLAU Web Verbesserer

  3. connected-health.eu the patient centered integrated health ecosystem

  4. „We had a lot of expectations regarding Responsive Webdesign, let´s

    make them real!“ - Matthias Lau
  5. WHAT IS RESPONSIVE DESIGN? let´s have a look

  6. None
  7. THIS IS Responsive Design yes it is FLUID / Liquid

    ADAPTIVE / Layout States Responsive Media TOUCH & Click
  8. „Most importantly, responsive web design isn’t intended to serve as

    a replacement for mobile web sites" - Ethan Marcotte
  9. FUTURE FRIENDLY i don´t want an iPhone6 website

  10. None
  11. excursion: Natural Breakpoints Website-States instead of Device-States

  12. Sources: http://opensignal.com/reports/fragmentation.php

  13. Average Number of Unique Screen Resolutions 97 2010 http://spyderweb.co/blog/2013/07/31/responsive-web-design-stats/2/ 232

    2013
  14. Brad Frost, https://flic.kr/p/aoKPDT

  15. Optimized for 320px - 1280px Future Friendly?

  16. is your website usable on the apple watch? or on

    the google glass?
  17. None
  18. None
  19. one website for everyone we wanted

  20. we tried device-independency for navigation and failed

  21. None
  22. None
  23. this is different totally different

  24. <div class="navbar-header">! <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">! <span class="sr-only">Toggle

    navigation</span>! <span class="icon-bar"></span>! <span class="icon-bar"></span>! <span class="icon-bar"></span>! </button>! </div>! <div class="navbar-collapse collapse">! <ul class="nav navbar-nav">! <li class="active"><a href="#">Link</a></li>! <li><a href="#">Link</a></li>! <li><a href="#">Link</a></li>! </ul>! </div><!--/.nav-collapse --> different NAVS in one we use display:none a lot
  25. for different devices some things on our websites need to

    be different embrace the difference
  26. device specific websites let´s write redundant code desktop Mobile tablet

    320px width 768px width 1280px width own code branches for every website type
  27. device specific websites let´s write redundant code desktop Mobile tablet

    320px width 768px width 1280px width own code branches for every website type bad Idea
  28. device specific websites let´s write redundant code desktop Mobile 320px

    width >320px width
  29. device specific websites let´s write redundant code desktop Mobile 320px

    width >320px width still BAD
  30. WE want on code branch but of course device optimized

    website every width
  31. think in fragments not everything has to be different we

    know this already from our partials
  32. None
  33. None
  34. None
  35. None
  36. None
  37. arrange fragments depending on the device or viewport or whatever

  38. Desktop

  39. Mobile

  40. FRAGMENTS view partials responsive Overwritable appendable

  41. CODE let´s get dirty

  42. <!-- nav -->! <%= render :partial => @nav %>! !

    <!-- content -->! <%= render :partial => @content %>! ! <!-- footer -->! <%= render :partial => @footer %> application.html.erb
  43. before_action :fragmentSelection! ! private! ! def fragmentSelection! ! # default

    fragments! @head = 'layouts/head'! @nav = 'layouts/nav'! @content = 'layouts/content'! @footer = 'layouts/footer'! ! # mobile fragments! if browser.mobile?! @nav = 'layouts/mobile/nav'! end! ! end application_controller
  44. the bad this sucks

  45. the good this is awesome about fragmented web design

  46. use one Responsive code base for all devices and overwrite/append

    fragments for device optimization fragmented web design
  47. Isn´t this RESS? well… partially

  48. THE FUTURE empower the browser

  49. the browser knows best we learned srcset told us

  50. Identify Fragments using HTML5 attributes

  51. None
  52. <section id=„content“> <HEADEr>

  53. <nav fragment="nav" expires="3600"></nav>! ! <section fragment="content" expires="0"></section>! ! <footer fragment="footer"

    expires="86400"></footer>
  54. <nav expires="3600"></nav>! ! <content expires="0"></section>! ! <footer expires="86400"></footer>

  55. HTTP HEADER name the fragments you need

  56. Status Code:200 OK! Accept:text/html,application/xhtml+xml,…! Accept-Encoding:gzip,deflate,sdch! User-Agent:Mozilla/5.0 (Macintosh;…! ! Fragments:nav-mobile,content,footer

  57. Only request necessary Fragments just because it´s faster

  58. Status Code:200 OK! Accept:text/html,application/xhtml+xml,…! Accept-Encoding:gzip,deflate,sdch! User-Agent:Mozilla/5.0 (Macintosh;…! ! Fragments:content

  59. Fragmented Web Design is nothing new. Just use it! it

    is not difficult
  60. Questions ? Put your questions

  61. Contact ME I’m nice @matthiaslau lau.matthias@gmail.com http://laumatthias.de http://git.io/u6By6w

  62. Thanks