for different devices
some things on our
websites need to be
different
embrace the difference
Slide 27
Slide 27 text
device specific websites
let´s write redundant code
desktop
Mobile tablet
320px width 768px width 1280px width
own code branches for
every website type
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
device specific websites
let´s write redundant code
desktop
Mobile
320px width >320px width
Slide 30
Slide 30 text
device specific websites
let´s write redundant code
desktop
Mobile
320px width >320px width
still BAD
Slide 31
Slide 31 text
WE want on code branch
but of course device optimized
website
every width
Slide 32
Slide 32 text
think in fragments
not everything has to be different
we know this already
from our partials
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
arrange fragments
depending on the device
or viewport or whatever
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
Slide 45
Slide 45 text
the bad
this sucks
Slide 46
Slide 46 text
the good
this is awesome about fragmented web design
Slide 47
Slide 47 text
use one Responsive code
base for all devices and
overwrite/append
fragments for device
optimization
fragmented web design
Slide 48
Slide 48 text
Isn´t this RESS?
well… partially
Slide 49
Slide 49 text
THE FUTURE
empower the browser
Slide 50
Slide 50 text
the browser
knows best
we learned
srcset told us
Slide 51
Slide 51 text
Identify Fragments
using HTML5 attributes
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Slide 54
Slide 54 text
Slide 55
Slide 55 text
Slide 56
Slide 56 text
HTTP HEADER
name the fragments you need
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
Only request necessary
Fragments
just because it´s faster
Slide 59
Slide 59 text
Status Code:200 OK
Accept:text/html,application/xhtml+xml,…
Accept-Encoding:gzip,deflate,sdch
User-Agent:Mozilla/5.0 (Macintosh;…
Fragments:content
Slide 60
Slide 60 text
Fragmented Web
Design is nothing
new. Just use it!
it is not difficult
Slide 61
Slide 61 text
Questions ?
Put your questions
Slide 62
Slide 62 text
Contact ME
I’m nice
@matthiaslau
[email protected]
http://laumatthias.de
http://git.io/u6By6w