responsiv webbdesign + html5 + css5
DESCRIPTION
Presentation om HTML5, CSS5 och responsiv webbdesign från både ett övergripande, tekniskt och implementationsperspektiv.TRANSCRIPT
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
Application Management
SharePoint Business Intelligence Integration
Mobilitet Epi-Server Custom Development
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
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
Semantiska taggar
<nav>
<article>
<aside>
<header>
<footer>
<section>
<details>
<summary>
Media-taggar
<video>
<audio>
<picture>
<canvas>
Ersätter Flash
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=
Bort med taggar som
CSS hanterar bättre
<font><center>
html5shiv .js
?
Inte färdigt, men det finns ganska bra stöd i moderna webbläsare
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
Selectors i CSS3
• p:first-of-type• li:last-child• a[href^=”http://example.com”]
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
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
?
Responsiv webbdesign
Media queries
@media screen and (min-width: 900px) { .myclass {
background: #000;}
}
respond.js
Fluid – steglöst
Adaptive – fasta bredder
Förbestämda bredder på enheterStor, medel liten osv.
Mobile / Tablets / Desktop
Adaptive – fasta bredder
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%;}
Tre responsiva ingredienser
• CSS3 media queries• Grid-system• Flexibla bilder och annat innehåll
Hur testar vi?
• Webbläsaren – dra i fönstret• Emulering i webbläsaren (Google Chrome)
• BrowserStack• Google PageSpeed
?
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">
Responsiva bilder
img { max-width:100%; }
img { max-width:100%; height:auto; }
<picture>
http://googlechrome.github.io/samples/picture-element/
PictureFill
• Retina-stöd• Nu i version 2 med stöd för <picture>
SVGScalable Vector Graphics
XML-baserat
Exempel på SVG
• http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg
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;
}}
Typografi
• @font-face
• TypeKit från Adobe
• Google Fonts
1em = 12pt = 16px = 100%
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
Sammanfattning
• Viewport• Bilder
– PictureFill– SVG
• Tabeller• Typografi• Navigation
?
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…
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
Sass+Compass och Susy grid
• Kräver Ruby • “compass watch” i
kommandoprompten
@include border-radius(3px);
?
“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.”
Responsiv design som projekt
CONTENT FIRST
MOBILE FIRST
Vilka skärmupplösning används idag?
Vad ska vi stödja?
Analysera med Google Analytics
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
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
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.
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
Dölj aldrig innehåll.
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
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!
?
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
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
Feedback
