Responsive omegadrupalcamposlo19.11.2011

Responsivt design (med Drupal)

vegard@ramsalt.com

Webteori

● Responsivt design, før og nå● Tekniske bestanddeler i responsivt design● Konseptuelle bestanddeler i responsivt design

Drupalpraksis ● Omega theme ● Responsive images

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.

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

Responsivt design, bakgrunn

Fra fluid til fixed og tilbake til fluid?

Responsivt design, tekniske bestanddeler

1. Meta viewport 2. Fluid grids 3. Media queries4. Fluid images

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

Responsivt design, tekniske bestanddeler

Responsivt design, tekniske bestanddeler Mål / ramme = resultat Fonterbody font size: 100% = 16px12px i em er da: 12 / 16 = 0.75em Gridgrid_3 = 220px. 220 / 960 x 100 = 22.91%

Responsivt design, tekniske bestanddeler

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!

Responsivt design, tekniske bestanddeler

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

Responsivt design, tekniske bestanddeler

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

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.

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.

Responsivt design, tekniske bestanddeler Andre utfordringer: ● Facebook-funksjonalitet, og andre embeddede iframes med

pixeldefinerte størrelser● ..eksempelvis annonser

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?

Responsivt design, konseptuelt

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

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