Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FRAGMENTED
web design
THINK DIFFERENT - BUILD FOR ALL DEVICES
@MATTHIASLAU
Web Verbesserer
connected-health.eu
the patient centered integrated health ecosystem
„We had a lot of expectations
regarding Responsive Webdesign,
let´s make them real!“
- Matthias Lau
WHAT IS
RESPONSIVE
DESIGN?
let´s have a look
THIS IS Responsive Design
yes it is
FLUID / Liquid
ADAPTIVE /
Layout States
Responsive
Media
TOUCH
&
Click
„Most importantly, responsive web
design isn’t intended to serve as a
replacement for mobile web sites"
- Ethan Marcotte
FUTURE FRIENDLY
i don´t want an iPhone6 website
excursion: Natural
Breakpoints
Website-States instead of Device-States
Sources:
http://opensignal.com/reports/fragmentation.php
Average Number of
Unique Screen Resolutions
97
2010
http://spyderweb.co/blog/2013/07/31/responsive-web-design-stats/2/
232...
Brad Frost, https://flic.kr/p/aoKPDT
Optimized for
320px - 1280px
Future Friendly?
is your website usable on
the apple watch?
or on the google glass?
one website for
everyone
we wanted
we tried
device-independency for
navigation
and failed
this is
different
totally different
<div class="navbar-header">!
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target=".na...
for different devices
some things on our
websites need to be
different
embrace the difference
device specific websites
let´s write redundant code
desktopMobile tablet
320px width 768px width 1280px width
own code bra...
device specific websites
let´s write redundant code
desktopMobile tablet
320px width 768px width 1280px width
own code bra...
device specific websites
let´s write redundant code
desktopMobile
320px width >320px width
device specific websites
let´s write redundant code
desktopMobile
320px width >320px widthstill BAD
WE want on code branch
but of course device optimized
website
every width
think in fragments
not everything has to be different
we know this already
from our partials
arrange fragments
depending on the device
or viewport or whatever
Desktop
Mobile
FRAGMENTS
view partials
responsive Overwritable appendable
CODE
let´s get dirty
<!-- nav -->!
<%= render :partial => @nav %>!
!
<!-- content -->!
<%= render :partial => @content %>!
!
<!-- footer -->!
<...
before_action :fragmentSelection!
!
private!
!
def fragmentSelection!
!
# default fragments!
@head = 'layouts/head'!
@nav ...
the bad
this sucks
the good
this is awesome about fragmented web design
use one Responsive code
base for all devices and
overwrite/append
fragments for device
optimization
fragmented web design
Isn´t this RESS?
well… partially
THE FUTURE
empower the browser
the browser
knows best
we learned
srcset told us
Identify Fragments
using HTML5 attributes
<section id=„content“>
<HEADEr>
<nav fragment="nav" expires="3600"></nav>!
!
<section fragment="content" expires="0"></section>!
!
<footer fragment="foote...
<nav expires="3600"></nav>!
!
<content expires="0"></section>!
!
<footer expires="86400"></footer>
HTTP HEADER
name the fragments you need
Status Code:200 OK!
Accept:text/html,application/xhtml+xml,…!
Accept-Encoding:gzip,deflate,sdch!
User-Agent:Mozilla/5.0 (M...
Only request necessary
Fragments
just because it´s faster
Status Code:200 OK!
Accept:text/html,application/xhtml+xml,…!
Accept-Encoding:gzip,deflate,sdch!
User-Agent:Mozilla/5.0 (M...
Fragmented Web
Design is nothing
new. Just use it!
it is not difficult
Questions ?
Put your questions
Contact ME
I’m nice
@matthiaslau
lau.matthias@gmail.com
http://laumatthias.de
http://git.io/u6By6w
Thanks
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Fragmented Web Design
Upcoming SlideShare
Loading in …5
×

Fragmented Web Design

1,138 views

Published on

Think different - Build for all Devices

Published in: Internet

Fragmented Web Design

  1. 1. FRAGMENTED web design THINK DIFFERENT - BUILD FOR ALL DEVICES
  2. 2. @MATTHIASLAU Web Verbesserer
  3. 3. connected-health.eu the patient centered integrated health ecosystem
  4. 4. „We had a lot of expectations regarding Responsive Webdesign, let´s make them real!“ - Matthias Lau
  5. 5. WHAT IS RESPONSIVE DESIGN? let´s have a look
  6. 6. THIS IS Responsive Design yes it is FLUID / Liquid ADAPTIVE / Layout States Responsive Media TOUCH & Click
  7. 7. „Most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites" - Ethan Marcotte
  8. 8. FUTURE FRIENDLY i don´t want an iPhone6 website
  9. 9. excursion: Natural Breakpoints Website-States instead of Device-States
  10. 10. Sources: http://opensignal.com/reports/fragmentation.php
  11. 11. Average Number of Unique Screen Resolutions 97 2010 http://spyderweb.co/blog/2013/07/31/responsive-web-design-stats/2/ 2322013
  12. 12. Brad Frost, https://flic.kr/p/aoKPDT
  13. 13. Optimized for 320px - 1280px Future Friendly?
  14. 14. is your website usable on the apple watch? or on the google glass?
  15. 15. one website for everyone we wanted
  16. 16. we tried device-independency for navigation and failed
  17. 17. this is different totally different
  18. 18. <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
  19. 19. for different devices some things on our websites need to be different embrace the difference
  20. 20. device specific websites let´s write redundant code desktopMobile tablet 320px width 768px width 1280px width own code branches for every website type
  21. 21. 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
  22. 22. device specific websites let´s write redundant code desktopMobile 320px width >320px width
  23. 23. device specific websites let´s write redundant code desktopMobile 320px width >320px widthstill BAD
  24. 24. WE want on code branch but of course device optimized website every width
  25. 25. think in fragments not everything has to be different we know this already from our partials
  26. 26. arrange fragments depending on the device or viewport or whatever
  27. 27. Desktop
  28. 28. Mobile
  29. 29. FRAGMENTS view partials responsive Overwritable appendable
  30. 30. CODE let´s get dirty
  31. 31. <!-- nav -->! <%= render :partial => @nav %>! ! <!-- content -->! <%= render :partial => @content %>! ! <!-- footer -->! <%= render :partial => @footer %> application.html.erb
  32. 32. 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
  33. 33. the bad this sucks
  34. 34. the good this is awesome about fragmented web design
  35. 35. use one Responsive code base for all devices and overwrite/append fragments for device optimization fragmented web design
  36. 36. Isn´t this RESS? well… partially
  37. 37. THE FUTURE empower the browser
  38. 38. the browser knows best we learned srcset told us
  39. 39. Identify Fragments using HTML5 attributes
  40. 40. <section id=„content“> <HEADEr>
  41. 41. <nav fragment="nav" expires="3600"></nav>! ! <section fragment="content" expires="0"></section>! ! <footer fragment="footer" expires="86400"></footer>
  42. 42. <nav expires="3600"></nav>! ! <content expires="0"></section>! ! <footer expires="86400"></footer>
  43. 43. HTTP HEADER name the fragments you need
  44. 44. 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
  45. 45. Only request necessary Fragments just because it´s faster
  46. 46. Status Code:200 OK! Accept:text/html,application/xhtml+xml,…! Accept-Encoding:gzip,deflate,sdch! User-Agent:Mozilla/5.0 (Macintosh;…! ! Fragments:content
  47. 47. Fragmented Web Design is nothing new. Just use it! it is not difficult
  48. 48. Questions ? Put your questions
  49. 49. Contact ME I’m nice @matthiaslau lau.matthias@gmail.com http://laumatthias.de http://git.io/u6By6w
  50. 50. Thanks

×