responsiv webbdesign + html5 + css5

Martin Carlsson

martin.carlsson@precio.se0702-63 32 53

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”]

http://caniuse.com

Vad kan jag använda?

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

Först: Ett klassiskt exempel

www.foodsense.is

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);

?

Labb 1

http://www.initializr.com

“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

Tack!martin.carlsson@precio.se

0702-63 32 53