Fragmented Web Design #bonded2015

Think different - Build for all Devices

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
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
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
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?
20. one website for everyone we wanted
21. we tried device-independency for navigation and failed
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
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
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