Fragmented Web Design

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