Fragmented Web Design

transcript

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 &

„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

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

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>

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

desktopMobile tablet320px width 768px width 1280px width

own code branches for every website type

bad Idea

desktopMobile320px width >320px width

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

FRAGMENTSview partials

responsive Overwritable appendable

CODElet´s get dirty

!<%= render :partial => @nav %>!!

!<%= render :partial => @content %>!!

!<%= render :partial => @footer %>

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

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

<nav fragment="nav" expires="3600"></nav>!!

<section fragment="content" expires="0"></section>!!

<nav expires="3600"></nav>!!

<content expires="0"></section>!!

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

lau.matthias@gmail.com

http://laumatthias.de

http://git.io/u6By6w

Thanks

Fragmented Web Design

Internet