Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fragmented Web Design #bonded2015

Fragmented Web Design #bonded2015

Think different - Build for all Devices

Ee7858da539f69023efc718a93679eb4?s=128

Matthias Lau

June 15, 2015
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. None
  5. „We had a lot of expectations regarding Responsive Webdesign, let´s

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

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

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

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

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

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

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

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

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

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

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

  21. we tried device-independency for navigation and failed

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

  25. <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
  26. for different devices some things on our websites need to

    be different embrace the difference
  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
  28. 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
  29. device specific websites let´s write redundant code desktop Mobile 320px

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

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

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

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

  39. Desktop

  40. Mobile

  41. FRAGMENTS view partials responsive Overwritable appendable

  42. CODE let´s get dirty

  43. <!-- header --> <%= render :partial => @head %> <!--

    nav --> <%= render :partial => @nav %> <!-- content --> <%= render :partial => @content %> <!-- footer --> <%= render :partial => @footer %> application.html.erb
  44. 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
  45. the bad this sucks

  46. the good this is awesome about fragmented web design

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

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

  49. THE FUTURE empower the browser

  50. the browser knows best we learned srcset told us

  51. Identify Fragments using HTML5 attributes

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

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

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

  56. HTTP HEADER name the fragments you need

  57. 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

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

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

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

    is not difficult
  61. Questions ? Put your questions

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

  63. Thanks