Tweet
Tweet

Slide 1

Slide 1 text

FRAGMENTED web design THINK DIFFERENT - BUILD FOR ALL DEVICES

Slide 2

Slide 2 text

@MATTHIASLAU Web Verbesserer

Slide 3

Slide 3 text

connected-health.eu the patient centered integrated health ecosystem

Slide 4

Slide 4 text

„We had a lot of expectations regarding Responsive Webdesign, let´s make them real!“ - Matthias Lau

Slide 5

Slide 5 text

WHAT IS RESPONSIVE DESIGN? let´s have a look

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

THIS IS Responsive Design yes it is FLUID / Liquid ADAPTIVE / Layout States Responsive Media TOUCH & Click

Slide 8

Slide 8 text

„Most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites" - Ethan Marcotte

Slide 9

Slide 9 text

FUTURE FRIENDLY i don´t want an iPhone6 website

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

excursion: Natural Breakpoints Website-States instead of Device-States

Slide 12

Slide 12 text

Sources: http://opensignal.com/reports/fragmentation.php

Slide 13

Slide 13 text

Average Number of Unique Screen Resolutions 97 2010 http://spyderweb.co/blog/2013/07/31/responsive-web-design-stats/2/ 232 2013

Slide 14

Slide 14 text

Brad Frost, https://flic.kr/p/aoKPDT

Slide 15

Slide 15 text

Optimized for 320px - 1280px Future Friendly?

Slide 16

Slide 16 text

is your website usable on the apple watch? or on the google glass?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

one website for everyone we wanted

Slide 20

Slide 20 text

we tried device-independency for navigation and failed

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

this is different totally different

Slide 24

Slide 24 text

! ! Toggle navigation! ! ! ! !
!
!
    !
  • Link
    • !
  • Link
    • !
  • Link
    • !
!
different NAVS in one we use display:none a lot

Slide 25

Slide 25 text

for different devices some things on our websites need to be different embrace the difference

Slide 26

Slide 26 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 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 bad Idea

Slide 28

Slide 28 text

device specific websites let´s write redundant code desktop Mobile 320px width >320px width

Slide 29

Slide 29 text

device specific websites let´s write redundant code desktop Mobile 320px width >320px width still BAD

Slide 30

Slide 30 text

WE want on code branch but of course device optimized website every width

Slide 31

Slide 31 text

think in fragments not everything has to be different we know this already from our partials

Slide 32

Slide 32 text

No content

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

arrange fragments depending on the device or viewport or whatever

Slide 38

Slide 38 text

Desktop

Slide 39

Slide 39 text

Mobile

Slide 40

Slide 40 text

FRAGMENTS view partials responsive Overwritable appendable

Slide 41

Slide 41 text

CODE let´s get dirty

Slide 42

Slide 42 text

! <%= render :partial => @nav %>! ! ! <%= render :partial => @content %>! ! ! <%= render :partial => @footer %> application.html.erb

Slide 43

Slide 43 text

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 44

Slide 44 text

the bad this sucks

Slide 45

Slide 45 text

the good this is awesome about fragmented web design

Slide 46

Slide 46 text

use one Responsive code base for all devices and overwrite/append fragments for device optimization fragmented web design

Slide 47

Slide 47 text

Isn´t this RESS? well… partially

Slide 48

Slide 48 text

THE FUTURE empower the browser

Slide 49

Slide 49 text

the browser knows best we learned srcset told us

Slide 50

Slide 50 text

Identify Fragments using HTML5 attributes

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Slide 53

Slide 53 text

! ! ! !

Slide 54

Slide 54 text

! ! ! !

Slide 55

Slide 55 text

HTTP HEADER name the fragments you need

Slide 56

Slide 56 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 57

Slide 57 text

Only request necessary Fragments just because it´s faster

Slide 58

Slide 58 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 59

Slide 59 text

Fragmented Web Design is nothing new. Just use it! it is not difficult

Slide 60

Slide 60 text

Questions ? Put your questions

Slide 61

Slide 61 text

Contact ME I’m nice @matthiaslau [email protected] http://laumatthias.de http://git.io/u6By6w

Slide 62

Slide 62 text

Thanks