responsiv design og bootstrap 3
DESCRIPTION
Presentasjon vist for NNUG og JavaBin i Kristiansand 04.09.2013TRANSCRIPT
![Page 1: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/1.jpg)
Responsiv design,
og litt Bootstrap
Av Morten Bergset, Profundo AS
![Page 2: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/2.jpg)
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
![Page 3: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/3.jpg)
ProFundo er en servicepartner som
leverer unike kombinasjoner av kompetanse,
tjenester og systemløsninger for innsamlings-
og medlemsorganisasjoner.
![Page 4: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/4.jpg)
Database
PHP Flex Powerbuilder
Web-
serverCitrix
Internett
3 applikasjoner, 1 database
![Page 5: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/5.jpg)
Kunder
![Page 6: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/6.jpg)
Cut the crap!
![Page 7: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/7.jpg)
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.
![Page 8: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/8.jpg)
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)
![Page 9: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/9.jpg)
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
![Page 10: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/10.jpg)
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" />
![Page 11: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/11.jpg)
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
![Page 12: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/12.jpg)
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 :-)
![Page 13: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/13.jpg)
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…
![Page 14: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/14.jpg)
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}
}
![Page 15: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/15.jpg)
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
![Page 16: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/16.jpg)
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
![Page 17: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/17.jpg)
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;
}
![Page 18: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/18.jpg)
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
![Page 19: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/19.jpg)
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]-->
![Page 20: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/20.jpg)
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/
![Page 21: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/21.jpg)
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();
![Page 22: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/22.jpg)
Google Analytics
har tallene...
![Page 23: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/23.jpg)
![Page 24: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/24.jpg)
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
![Page 25: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/25.jpg)
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!
![Page 26: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/26.jpg)
![Page 27: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/27.jpg)
![Page 28: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/28.jpg)
![Page 29: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/29.jpg)
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
![Page 30: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/30.jpg)
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
![Page 31: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/31.jpg)
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 )
![Page 32: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/32.jpg)
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 :-)
![Page 33: Responsiv design og Bootstrap 3](https://reader034.vdocuments.net/reader034/viewer/2022052601/559493e61a28aba93e8b46e9/html5/thumbnails/33.jpg)
Demo!!!