Presentation at DrupalCamp Oslo

1. Responsivt design
(med Drupal)
lt.com
d@ramsa
vegar

2. Webteori
●Responsivt design, før og nå
● Tekniske bestanddeler i responsivt design
● Konseptuelle bestanddeler i responsivt design
Drupalpraksis
● Omega theme
● Responsive images

3. Responsivt design, bakgrunn
Webmediet har ikke én fast flate, da mottaker definerer flaten, ikke
avsender.
Forskjellig fra alle andre kjente designflater (maleri, en tomt, foto, betong).
Tradisjonelt design ofte definert av et medies / materiales begrensninger.

4. Responsivt design, bakgrunn
Tradisjonelt to leirer i webdesign
Fluid:
+ Tilpasser seg brukerens flate
+ Mer "riktig" i webmediet
- Kan få uheldige konsekvenser, som ekstremt lange tekstlinjer
- Vanskelig å implementere med faste bredder, som bilder og grafikk.
- Større problem jo større skjermer folk får
Fixed:
+ Lettere å implementere
+ Likt måten designere tradisjonelt jobber (begrensninger)
- Horisontal scrolling
- Ikke tilpasset mobile enheter

5. Responsivt design, bakgrunn
Fra fluid til fixed og tilbake til fluid?

6. Responsivt design, tekniske bestanddeler
1. Meta viewport
2. Fluid grids
3. Media queries
4. Fluid images

7. Responsivt design, tekniske bestanddeler
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

8. Responsivt design, tekniske bestanddeler

9. Responsivt design, tekniske bestanddeler
Mål / ramme = resultat
Fonter
body font size: 100% = 16px
12px i em er da: 12 / 16 = 0.75em
Grid
grid_3 = 220px. 220 / 960 x 100 = 22.91%

10. Responsivt design, tekniske bestanddeler

11. Responsivt design, tekniske bestanddeler
Media types
● all, braille, embossed, handheld, print, projection, screen, speech, tty,
tv
● Veldig ulik støtte i browsere
● Ikke presis nok
Media queries
● Media types + kontrolstrukturer
● width, height, device-width, device-height, orientation, aspect ratio ++
● Rimelig unison støtte i browsere
● Presis!

12. Responsivt design, tekniske bestanddeler

13. Responsivt design, tekniske bestanddeler
Fluid images, eller hvordan passe et 200px bilde inn i en 23% kolonne?

14. Responsivt design, tekniske bestanddeler

15. Responsivt design, tekniske bestanddeler
Men:
● Bildet er ikke faktisk mindre, i data
● Krever kraft å nedskalere det hos klienten
● Kan gi noen utilsiktede konsekvenser

16. Typiske oppløsninger
● iPhone portrett: 320 px
● iPhone landskap: 480 px
● iPad portrett: 768 px
● iPad landskap: 1024 px
● Galaxy tab portrett: 600 px
● Galaxy tab landskap: 1024 px
● Liten laptop: 980 px
● Stor skjerm: 1200 px +
+ forskjellige Android-telefoner, RIM, Nokia, spillkonsoller og enda ikke
lanserte flater.

17. Responsivt design, tekniske bestanddeler
Noen løsninger:
● Dynamisk importere / legge til innhold med js (!) for enheter større enn
mobil
● Responsive images: http://drupal.org/project/responsive_images -
krever klientsniffing på andre måter.

18. Responsivt design, tekniske bestanddeler
Andre utfordringer:
● Facebook-funksjonalitet, og andre embeddede iframes med
pixeldefinerte størrelser
● ..eksempelvis annonser

19. Responsivt design, konseptuelt
Mobile first!
Hva er det viktigste på nettstedet?
Er dette forskjellig i forskjellig kontekst?
Hva vet vi egentlig om konteksten? Mesteparten av mobil surfing kan virke til å komme fra
sofakroken. Kontekst = "tilbakelent" eller "travel, på farten og med i tiden"?
Bransjespesifikke ting: Hvordan bør aviser eksempelvis selge responsive
annonsepakker heller enn faste annonser basert på faste størrelser og
plasseringer?

20. Responsivt design, konseptuelt

21. Drupal: Omega theme
● Fantastisk starter-theme: bygg grid-baserte HTML5-sider på et blunk
● konfigurasjon foran kode
● Eksporterbare til kode, dog (omega tools module)
● Mobile first
● Flytende eller fleksibelt
● Inkludert meta viewport
● Inkluderte media queries

22. Drupal: Omega theme + Delta module
delta templates (heller enn node.tpl.php, node-article.tpl.php, page-front.
tpl.php etc)
● aktiveres vha. Context
gjør om elementer / theme-variabler til til blokker
● logo
● site name
● site slogan
● page title
● breadcrumbs
● messages
● tabs
● action links
● feed icons