fragmented web design
DESCRIPTION
Think different - Build for all DevicesTRANSCRIPT
FRAGMENTEDweb design
THINK DIFFERENT - BUILD FOR ALL DEVICES
@MATTHIASLAUWeb Verbesserer
connected-health.euthe 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 Designyes 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 FRIENDLYi 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
972010
http://spyderweb.co/blog/2013/07/31/responsive-web-design-stats/2/
2322013
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
navigationand failed
this is different
totally different
<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 onewe use display:none a lot
for different devices some things on our websites need to be
differentembrace the difference
device specific websiteslet´s write redundant code
desktopMobile tablet320px width 768px width 1280px width
own code branches for every website type
device specific websiteslet´s write redundant code
desktopMobile tablet320px width 768px width 1280px width
own code branches for every website type
bad Idea
device specific websiteslet´s write redundant code
desktopMobile320px width >320px width
device specific websiteslet´s write redundant code
desktopMobile320px width >320px widthstill BAD
WE want on code branchbut of course device optimized
websiteevery width
think in fragmentsnot everything has to be different
we know this already from our partials
arrange fragments depending on the device
or viewport or whatever
Desk
top
Mob
ile
FRAGMENTSview partials
responsive Overwritable appendable
CODElet´s get dirty
<!-- nav -->!<%= render :partial => @nav %>!!
<!-- content -->!<%= render :partial => @content %>!!
<!-- footer -->!<%= render :partial => @footer %>
appl
icat
ion
.htm
l.er
b
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!!
endappl
icat
ion
_con
trol
ler
the badthis sucks
the goodthis is awesome about fragmented web design
use one Responsive code base for all devices and
overwrite/append fragments for device
optimizationfragmented web design
Isn´t this RESS?well… partially
THE FUTUREempower the browser
the browser knows best
we learned
srcset told us
Identify Fragmentsusing HTML5 attributes
<section id=„content“>
<HEADEr>
<nav fragment="nav" expires="3600"></nav>!!
<section fragment="content" expires="0"></section>!!
<footer fragment="footer" expires="86400"></footer>
<nav expires="3600"></nav>!!
<content expires="0"></section>!!
<footer expires="86400"></footer>
HTTP HEADERname the fragments you need
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
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 (Macintosh;…!!
Fragments:content
Fragmented Web Design is nothing new. Just use it!
it is not difficult
Questions ?Put your questions
Contact MEI’m nice
@matthiaslau
http://laumatthias.de
http://git.io/u6By6w
Thanks