Presentasjon vist for NNUG og JavaBin i Kristiansand 04.09.2013

1. Responsiv design,
og litt Bootstrap
Av Morten Bergset, Profundo AS

2. 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

3. ProFundo er en servicepartner som
leverer unike kombinasjoner av kompetanse,
tjenester og systemløsninger for innsamlings-
og medlemsorganisasjoner.

4. Database
PHP Flex Powerbuilder
Web-
server
Citrix
Internett
3 applikasjoner, 1 database

5. Kunder

6. Cut the crap!

7. 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.

8. 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)

9. 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

10. 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" />

11. 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

12. 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 :-)

13. 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…

14. 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}
}

15. 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

16. 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

17. 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;
}

18. 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

19. 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]-->

20. 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/

21. 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();

22. Google Analytics
har tallene...

24. 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

25. 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!

29. 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

30. 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

31. 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 )

32. wrapbootstrap.com
bootswatch.com
Har veldig mange themes basert på Bootstrap til
en billig penge. Disse kan enten være et godt
utgangspunkt, eller ferdig arbeid :-)

33. Demo!!!