Responsiv design og Bootstrap 3

Responsiv design,

og litt Bootstrap

Av Morten Bergset, Profundo AS

Morten Bergset• Jobbet med IT siden 1999

• Frontend Java (J2EE) og Perl

for Logit-Systems i Grimstad

• Frontend ASP.NET og ASP

for Current Software

• ASP.NET og ASP for Netlab

• PHP for Profundo

• Perl og PHP i 10 år i mitt

hobbyfirma, getOnWeb

ProFundo er en servicepartner som

leverer unike kombinasjoner av kompetanse,

tjenester og systemløsninger for innsamlings-

og medlemsorganisasjoner.

Database

PHP Flex Powerbuilder

Web-

serverCitrix

Internett

3 applikasjoner, 1 database

Kunder

Cut the crap!

Skapelsen• På den første dagen lagde Tim

Berners-Lee html. Alle kunne få

tilgang til informasjonen, og Tim

så det var godt...

• På den andre dagen kom

designerene og ville ha full pixel-

kontroll. Det måtte settes noen

rammer og begrensninger for at

de skulle få “full kontroll”.

• På den tredje dagen kom Steve

Jobs og fullførte korstoget Jeffrey

Zeldman hadde ledet i lang tid.

Responsiv Webdesign

(RWD) – definisjon:• websites og webapplikasjoner som er lagd for

optimal brukeropplevelse uten zooming og

scrolling både for små og store skjermer

• designet tilpasser seg skjermen med fluid

grids, fleksible bilder og CSS3 media queries

• det bør også optimalisere devicens muligheter

(f.eks. ringe-knapp, og geolocation på mobiler)

• lage fall-back løsninger (f.eks. en flash

illustrasjon for pc vises som et bilde på mobile

devicer)

Hva betyr det for

innholdet?• Stort sett så gjør man det slik at dersom

det er lite plass så plasseres elementer

under hverandre

• Man kan skjule og vise elementer

basert på skjermbredde, og man kan

flytte på de

• Man kan også justere font størrels,

margin, padding, width osv

Viewport metatag

For at gamle sider skulle se fungere, så antar iOS Safari at siden er 980px

bred, og zoomer ut for å vise alt, og da blir det smått på en telefon…

Noen varianter:

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1">

Denne bruker jeg:

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1" />

Utfordringer med RWD• page size

• brukere som legger inn store

tekster, lange ord, store bilder, iframes

osv

• eldre IE

• retina skjermer

• header og footer tar alltid ekstra tid

• meny/navigasjon må gjerne ha to

versjoner/visninger

Media queries

• Vi har brukt media queries i mange år

for å gi en utskriftsvennlig side uten å

laste en ny side (fjernet menyer osv,

satt bredden til 100% osv)

• Ny mulighet med media queries er å

styre styling basert på skjermbredde, og

det er her mye av hemligheten til

responsivt design ligger :-)

min-width / max-width?

• It depends…

• Media queries brukes for å gjøre justeringer

• Mobile-first design

• Tradisjonelt PC design

• Jatakk, begge deler, sa Ole Brumm…

Enkelt eksemple

• Standard/fallback:

h1 {font-size: 16px}

• Store skjermer:

@media (min-width: 1100px){

h1 {font-size: 18px}

}

• Små skjermer

@media (max-width: 650px){

h1 {font-size: 14px}

}

Flere eksempler• @media only screen and (max-width:

480px){...}

• @media screen and (orientation:landscape)

{...}

• @media screen and (min-device-width: 768px)

and (max-device-width: 1024px) and

(orientation: landscape) {... }

• osv. osv...

• KISS - Keep It Simple, Stupid

Utfordringer og løsninger

• Bilder som er for store:

image {max-width: 100%}

• Bredder generelt:

bruk relative verdier (%), men gjerne en

pixelbasert max-width på hele containeren

• For å gi retina skjermer fine ikoner: bruk vektor

grafikk (f.eks. fonter) istedet for bitmaps

• Logo i SVG, med PNG fallback for eldre IE

• Bilder kan være større enn visningen, da blir det

crispy på retina skjerm

Og skal du virkelig

imponere sjefen, så...Så slenge du på ett par ekstra linjer CSS for

animasjon av CSS endringer (tar seg godt ut på

demo)

#element {

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

Verktøyet er halve jobben...F.eks. cross-browser bookmarklets

• Vise andre

vindustørrelser i stort

vindu:

http://lab.maltewasserma

nn.com/viewport-resizer/

• Vise vindustørrelsen i

pixler:

http://izilla.com.au/git/izilla

.mq.debugger.bookmarkl

et.html

Noen scripts for eldre

IE<!--[if lt IE 9]>

<script

src="//html5shim.googlecode.com/svn/trunk/

html5.js"></script>

<script src="js/selectivizr-min.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

Flere scripts å

inkludere• http://fittextjs.com/

Optimalt stor tekst

• http://fitvidsjs.com/

Inkludere youtube etc iframes som

beholder størrelsesforholdet

• http://www.woothemes.com/flexslider/

En responsiv slider som støtter touch

og piltaster, kan brukes til så mangt...

• http://fooplugins.com/footable-demos/

Noen ganger må vi legge

på litt jQuery magi…

function resized(){

if($("body").width() < 768)

$("aside #bedrift").appendTo($("#bli"))

else

$("#bli #bedrift").appendTo($("aside"))

}

$(window).on("resize", function(){resized()});

resized();

Google Analytics

har tallene...

Gridd og rammeverk

• For oss utviklere så er det fantastisk å

forholde seg til et gridd/rammeverk

• 960.gs var lenge det foretrukne griddet

• Bootstrap er et rammverk som baserer

sitt gridd på 960.gs, men det har så mye

mer enn bare et gridd :-)

• Foundation er Bootstrap sitt beste

alternativ, det er langt på vei likt

Bootstrap• Det er CSS og JavaScript/jQuery for vanlige

elementer:

grid, tabell, tabs, buttons, meny, modale vinduer

osv.

• Normalizing og litt styling av basic html

elementer

• Elementer er basert på klasser, og fungerer

derfor fint til alle serverside løsninger :-)

• getbootstrap.com

bootstrapcdn.com

• Paul Irish gjorde en test og fant ut at siste

Bootstrap er dobbelt så rask å rendre!

Fordel med klassene

• Bootstrap sine klasser gir samme fordel

som namingconvensions ellers.

• Når man programmerer, så trenger man

ikke vite helt nøyaktig hvordan ting blir

seende ut, men Bootstrap sine klasser

gjør det lettere å se for seg hvordan

koden vil se ut i en browser fordi f.eks.

«well» har et definert uttrykk (selv om

kanskje et theme eller en designer har

gjort om litt på standard visningen

Moduler og gjenbruk

av kode

Med Bootstrap sine klasser og responsivt

design, så har vi et godt grunnlag for å

lage snippets/moduler som lett kan

kopieres/importeres inn i andre prosjekter

Dette er alt du trenger:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"

rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

( // er for at det skal virke med https - dersom det trengs, og ellers bruke raskere http )

wrapbootstrap.com

bootswatch.comHar veldig mange themes basert på Bootstrap til

en billig penge. Disse kan enten være et godt

utgangspunkt, eller ferdig arbeid :-)

Demo!!!