Download to read offline
![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]-->](https://image.slidesharecdn.com/responsivdesign-130904141105-/75/Responsiv-design-og-Bootstrap-3-19-2048.jpg)
Uploaded byMorten Bergset
Responsiv design og Bootstrap 3
Presentasjon vist for NNUG og JavaBin i Kristiansand 04.09.2013
Responsiv design og Bootstrap 3
- 1. Responsiv design, og littBootstrap Av Morten Bergset, Profundo AS
- 2. Morten Bergset • Jobbetmed 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 enservicepartner som leverer unike kombinasjoner av kompetanse, tjenester og systemløsninger for innsamlings- og medlemsorganisasjoner.
- 4. Database PHP Flex Powerbuilder Web- server Citrix Internett 3applikasjoner, 1 database
- 5.
- 6.
- 7. Skapelsen • På denfø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 detfor 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 atgamle 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 • Vihar 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 • @mediaonly 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 duvirkelig 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 halvejobben... 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 foreldre 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.
- 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 erCSS 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 avkode 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 altdu 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 mangethemes basert på Bootstrap til en billig penge. Disse kan enten være et godt utgangspunkt, eller ferdig arbeid :-)
- 33.