Responsiv webbdesign + HTML5 + CSS5
-
Upload
martin-carlsson -
Category
Technology
-
view
169 -
download
5
description
Transcript of Responsiv webbdesign + HTML5 + CSS5
![Page 2: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/2.jpg)
Fakta om oss - PrecioPRECIO // OM OSS
Specialistkonsultföretag
Kontor i Stockholm, Eskilstuna, Örebro, Västerås, Borlänge, Göteborg & Vietnam
Ca 110 specialister
Listade på Nasdaq OMX First North Premier med över 1 600 aktieägare
Nära samarbete med Microsoft Sverige
![Page 3: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/3.jpg)
Application Management
SharePoint Business Intelligence Integration
Mobilitet Epi-Server Custom Development
![Page 4: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/4.jpg)
1. HTML52. CSS33. Introduktion till responsiv webbdesign4. Tekniska perspektivet – hur gör man?
5. Ska man använda ett ramverk eller inte?6. Lab 17. Hur genomför man en implementation av
responsiv design på bästa sätt?8. Tips & råd och goda exempel9. Ev. lab 210. Avslutning
![Page 5: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/5.jpg)
![Page 6: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/6.jpg)
Bakgrund till HTML 5
• Organisationen W3C• HTML 4-specifikation från 1997• XHTML från år 2000 – separat märkspråk för att
stödja XML• Buzzword• Ej färdigt• Aldrig färdigt! HTML5 – senaste tekniken i HTML
![Page 7: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/7.jpg)
Semantiska taggar
<nav>
<article>
<aside>
<header>
<footer>
<section>
<details>
<summary>
![Page 8: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/8.jpg)
Media-taggar
<video>
<audio>
<picture>
<canvas>
Ersätter Flash
![Page 9: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/9.jpg)
Input-fält
<input type=”text” />
• color• date• datetime• datetime-local• email• month• number
• range (slider)• search• tel• time• url• week
Attribut:• placeholder• required• pattern
type=
![Page 10: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/10.jpg)
Bort med taggar som
CSS hanterar bättre
<font><center>
![Page 11: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/11.jpg)
![Page 12: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/12.jpg)
html5shiv .js
![Page 13: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/13.jpg)
?
![Page 14: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/14.jpg)
![Page 15: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/15.jpg)
Inte färdigt, men det finns ganska bra stöd i moderna webbläsare
![Page 16: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/16.jpg)
Moduler i CSS3
• Selectors
• Box Model
• Backgrounds and borders
• Image values and replaced content
• Text effects
• 2D/3D-transformations
• Animations (transitions)
• Multiple Column Layout
• User Interface
![Page 17: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/17.jpg)
Selectors i CSS3
• p:first-of-type• li:last-child• a[href^=”http://example.com”]
![Page 19: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/19.jpg)
Modernizr
• JS-bibliotek för att veta vad användaren har
• Lägger till klasser i HTML-taggen
• Går att skräddarsy på modernizr.com
![Page 20: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/20.jpg)
Less och Sass
• Nästling, variabler, arv, operatorer och funktioner
• Kompileras till CSS
• i utvecklingsmiljö
• i projektet (runtime -> cache)
Less – något enklare
Sass – komplett och rekommenderas
![Page 21: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/21.jpg)
?
![Page 22: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/22.jpg)
Responsiv webbdesign
![Page 24: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/24.jpg)
Media queries
@media screen and (min-width: 900px) { .myclass {
background: #000;}
}
respond.js
![Page 25: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/25.jpg)
Fluid – steglöst
![Page 26: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/26.jpg)
Adaptive – fasta bredder
Förbestämda bredder på enheterStor, medel liten osv.
Mobile / Tablets / Desktop
![Page 27: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/27.jpg)
Adaptive – fasta bredder
![Page 28: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/28.jpg)
Grid
• Gutters – avstånd mellan kolumnerna
• CSS3 i framtiden (enbart IE10-11 just nu!)
.col-1-2 {width: 50%;
}.col-1-4 {
width: 25%;}.col-1-8 {
width: 12.5%;}
![Page 29: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/29.jpg)
Tre responsiva ingredienser
• CSS3 media queries• Grid-system• Flexibla bilder och annat innehåll
![Page 30: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/30.jpg)
Hur testar vi?
• Webbläsaren – dra i fönstret• Emulering i webbläsaren (Google Chrome)
• BrowserStack• Google PageSpeed
![Page 31: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/31.jpg)
?
![Page 32: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/32.jpg)
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-
width, initial-scale=1, maximum-scale=1, user-
scalable=no">
![Page 33: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/33.jpg)
Responsiva bilder
img { max-width:100%; }
img { max-width:100%; height:auto; }
![Page 34: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/34.jpg)
<picture>
http://googlechrome.github.io/samples/picture-element/
![Page 35: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/35.jpg)
PictureFill
• Retina-stöd• Nu i version 2 med stöd för <picture>
![Page 36: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/36.jpg)
![Page 37: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/37.jpg)
SVGScalable Vector Graphics
XML-baserat
![Page 38: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/38.jpg)
Exempel på SVG
• http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg
![Page 39: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/39.jpg)
Tabeller
• Jquery-plugins– Lås första kolumnen– stacktable.js – visa som lista istället– Plugin till de olika ramverken
@media screen and (max-width: 640px) {table {
overflow-x: auto;display: block;
}}
![Page 40: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/40.jpg)
Typografi
• @font-face
• TypeKit från Adobe
• Google Fonts
![Page 41: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/41.jpg)
1em = 12pt = 16px = 100%
![Page 42: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/42.jpg)
Navigation
• Hamburgermeny– Relativt nytt och obeprövat– Men extremt populärt– Meny som ord ger bättre resultat
enligt tester. Kombinera.
• Sticky• Sök-funktion
![Page 43: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/43.jpg)
Sammanfattning
• Viewport• Bilder
– PictureFill– SVG
• Tabeller• Typografi• Navigation
![Page 44: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/44.jpg)
?
![Page 45: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/45.jpg)
Ramverk för responsiv webbdesign
• Bootstrap ursprungligen från Twitter (fluid)
• Foundation från Zurb (fluid)
• Skeleton (adaptive)
• Compass + Susy grid (fluid, adaptive)
• Ca 18 423 andra alternativ…
![Page 46: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/46.jpg)
Bootstrap
• Väldigt etablerat
• Ursprungligen för admin-gränssnitt
• CSS
• Modulbaserat
– Ikonbibliotek
– Dropdowns
– Knappar
– Formulärfält
• Javascript
– Kräver jQuery
• Less, men finns portat till Sass
![Page 47: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/47.jpg)
Sass+Compass och Susy grid
• Kräver Ruby • “compass watch” i
kommandoprompten
@include border-radius(3px);
![Page 48: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/48.jpg)
?
![Page 50: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/50.jpg)
“When you ask a designer to design without the content that will be used for the final site you may as well be asking an architect to design a house without specifying the number of bedrooms, ensuites, kitchens and bathrooms.”
![Page 51: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/51.jpg)
Responsiv design som projekt
CONTENT FIRST
MOBILE FIRST
![Page 52: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/52.jpg)
Vilka skärmupplösning används idag?
Vad ska vi stödja?
Analysera med Google Analytics
![Page 53: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/53.jpg)
Prestanda
• Viktigt p.g.a mobila enheter
• Bandbredd och antal http-requests– Komprimera och minifiera scripts och CSS (ett måste!)– Komprimera bilder (redaktionellt eller automatiskt?)– Externa beroenden– CDN (Content Delivery Network)– Font-ikoner– Sprites
• Använd Google PageSpeed
![Page 54: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/54.jpg)
Responsiv designi EPiServer CMS 7
• Du får ingenting gratis i form av responsivitet av EPiServer CMS, oavsett vad deras produktblad och marknadsföring sager
• Förhandsgranskning i olika storlekar, kallas kanaler
• Block
• Fördelen med MVC är att du har total kontroll över HTML-koden
![Page 55: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/55.jpg)
Responsivt för redaktören
• Mindre text i.o.m mindre enheter.
• Skriv ner budskapet precis som det är tänkt. Korta sedan ner det med ca hälften.
• Undvik upprepningar.
• Undvik att “state the obvious”, samt att vara övertydlig. En text i stil med “klicka gärna på länken nedan för att läsa mer om våra erbjudanden” är svårare att ta till sig än en tydlig knapp som säger “aktuella erbjudanden”.
• Låt språkkunniga kollegor korrekturläsa.
• Läs budskap och texter högt för dig själv. Låter det naturligt och bra kommer dina besökare med stor sannolikhet också att tycka det.
![Page 56: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/56.jpg)
Prioritera viktigt innehåll på mobilt
• Anpassa innehåll bereoende på skärmstorlek
• T.ex. kontaktinformation kan vara viktigare för mobila besökare.
• Sökfält kanske inte får plats i sidhuvud och flyttas då ned till sidfot eller i meny.
• Exempel Donate: http://www.barackobama.com Exempel Kontakt: http://dinel.se
![Page 57: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/57.jpg)
Dölj aldrig innehåll.
![Page 58: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/58.jpg)
Tips & råd
1. Håll designen så enkel som möjligt
2. Följ grid-tänket helt och hållet i de olika enheterna
3. Back to basic• Se till att webbplatsen validerar• Inline-CSS är förbjudet• Ska webbplatsen fungera utan javascript?
4. Riktiga användare sitter inte och drar i webbläsarfönstret, ägna inte tid åt att göra beteendet vid resizing perfekt
![Page 59: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/59.jpg)
1. Glöm inte pröva & anpassa för riktigt höga upplösningar
2. Prestandaoptimering behöver inte vara tidskrävande, det är de små trixen som gör det. Ha rätt ambitionsnivå.
3. Lagom mycket nästling i Sass
4. Tänk igenom interaktionsdesign och design noga innan utveckling drar igång
5. Kom ihåg:Responsiv design är komplext och ett hårt jobb!
![Page 60: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/60.jpg)
?
![Page 61: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/61.jpg)
Användbara Javascript-bibliotek
html5shiv.js – HTML5 taggar i <IE9
respond.js –stöd för media queries i IE 8
retina.js - Retina-stöd
require.js
masonry.js
stellar.js - Parallax scrolling
![Page 62: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/62.jpg)
Responsiva sajter
• http://dinel.se• http://www.stockholm.se• http://www.svt.se• http://www.wired.co.uk • http://www.barackobama.com
• http://www.awwwards.com• http://www.30000sourires.com
![Page 63: Responsiv webbdesign + HTML5 + CSS5](https://reader035.fdocuments.net/reader035/viewer/2022070322/559352641a28abc61b8b45ac/html5/thumbnails/63.jpg)
Feedback