Presentation om HTML5, CSS5 och responsiv webbdesign från både ett övergripande, tekniskt och implementationsperspektiv.

1. Martin Carlsson
martin.carlsson@precio.se
0702-63 32 53

2. PRECIO // OM OSS
Fakta om oss - Precio
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

3. SharePoint Business Intelligence Integration
Mobilitet Epi-Server Custom Development
Application Management

4. 1. HTML5
2. CSS3
3. Introduktion till responsiv webbdesign
4. Tekniska perspektivet – hur gör man?
5. Ska man använda ett ramverk eller inte?
6. Lab 1
7. Hur genomför man en implementation av
responsiv design på bästa sätt?
8. Tips & råd och goda exempel
9. Ev. lab 2
10. Avslutning

6. 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

7. Semantiska taggar
<nav>
<article>
<aside>
<header>
<footer>
<section>
<details>
<summary>

8. Media-taggar
<video>
<audio>
<picture>
<canvas>
Ersätter Flash

9. 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=

10. Bort med taggar som
CSS hanterar bättre
<font>
<center>

12. html5shiv .js

13. ?

15. Inte färdigt, men det finns ganska
bra stöd i moderna webbläsare

16. 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

17. Selectors i CSS3
• p:first-of-type
• li:last-child
• a[href^=”http://example.com”]

18. Vad kan jag använda?
http://caniuse.com

19. 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

20. 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

21. ?

22. Responsiv webbdesign

23. Först: Ett klassiskt exempel
www.foodsense.is

24. Media queries
@media screen and (min-width: 900px) {
.myclass {
background: #000;
}
}
respond.js

25. Fluid – steglöst

26. Adaptive – fasta bredder
Förbestämda bredder på enheter
Stor, medel liten osv.
Mobile / Tablets / Desktop

27. Adaptive – fasta bredder

28. 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%;
}

29. Tre responsiva ingredienser
• CSS3 media queries
• Grid-system
• Flexibla bilder och annat innehåll

30. Hur testar vi?
• Webbläsaren – dra i fönstret
• Emulering i webbläsaren (Google Chrome)
• BrowserStack
• Google PageSpeed

31. ?

32. 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">

33. Responsiva bilder
img { max-width:100%; }
img { max-width:100%; height:auto; }

34. <picture>
http://googlechrome.github.io/sam
ples/picture-element/

35. PictureFill
• Retina-stöd
• Nu i version 2 med stöd för <picture>

37. SVG
Scalable Vector Graphics
XML-baserat

38. Exempel på SVG
• http://www.svgopen.org/2007/papers/SLOGO_A
bstract/SLogo_Fig9_Goldberg_Machine.svg

39. Tabeller
@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
• Jquery-plugins
– Lås första kolumnen
– stacktable.js – visa som lista istället
– Plugin till de olika ramverken
}

40. Typografi
• @font-face
• TypeKit från Adobe
• Google Fonts

41. 1em = 12pt = 16px = 100%

42. 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

43. Sammanfattning
• Viewport
• Bilder
– PictureFill
– SVG
• Tabeller
• Typografi
• Navigation

44. ?

45. 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…

46. 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

47. Sass+Compass och Susy grid
• Kräver Ruby
• “compass watch” i
kommandoprompten
@include border-radius(3px);

48. ?

49. Labb 1
http://www.initializr.com

50. “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.”

51. Responsiv design som projekt
CONTENT FIRST
MOBILE FIRST

52. Vilka skärmupplösning används idag?
Vad ska vi stödja?
Analysera med Google Analytics

53. 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

54. Responsiv design
i 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

55. 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.

56. 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

57. Dölj aldrig innehåll.

58. 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

59. 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!

60. ?

61. 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

62. 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

63. Feedback

64. Tack!
martin.carlsson@precio.se
0702-63 32 53