Think different - Build for all Devices

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/
2322013

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
desktopMobile tablet
320px width 768px width 1280px width
own code branches for
every website type

27. device specific websites
let´s write redundant code
desktopMobile 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
desktopMobile
320px width >320px width

29. device specific websites
let´s write redundant code
desktopMobile
320px width >320px widthstill 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