Mobilen er det nye designdogme.
De dage, hvor man kunne fyre Photoshop op, sætte sidevidden til 960px og så bare designe løs, er ved at være over. Farvel InDesign, Illustrator og min kæreste ven Flash*. Ikke flere wireframes og pixelperfekte designudkast. Mobilen er ankommet! Det var sjovt, så længe det varede; men skal jeg være ærlig, er jeg glad for, at vi nu går nye og bedre tider i møde.
For det var som om pointen med hjemmesiderne druknede i prangende grafik, roterende bannere og spalte op og ned med irrelevant information. Formen havde spist indholdet.
Udfordringen med mobilerne er naturligvis, at den lille skærm ikke levner megen plads til information. Hvad skal man så gøre? Typisk må man starte forfra og spørge sig selv, hvad der egentlig er vigtigst: Hvad har brugeren mest brug for? Og så må man fjerne alt det overflødige.
Og det kræver, at vi tænker os om. For det handler ikke nødvendigvis om at fjerne information, vi skal bare organisere det sådan, at det er nemt at finde på en lille skærm.
Et eksempel: En restaurants hjemmeside til mobil bliver typisk til en enkel side med restaurantens adresse, menu, åbningstider og en mulighed for at booke online. Mere er det ikke behov for. Ingen roterende bannere, mundheld fra Thailand eller piger, der smiler ved salaten.
Men så har man pludselig to hjemmesider, der skal opdateres. Og for at gøre det hele lidt mere spændende, smider Apple iPaden på gaden, og, voila, nu er det brug for tre versioner. Og, hey, hvad sker der med fladskærme og Playstation? Skal vi nu til at lave fem forskellige hjemmesider?!
Svaret er naturligvis nej, og løsningen er responsive design. Ved hjælp af media queries, CSS og lidt JavaScript kan man lave en hjemmeside, der selv finder ud af at ændre design afhængig af skærmstørrelse. Indholdet er det samme, men præsentationen skaleres efter hvilken enhed, den skal vises på.
Eftersom mobilversionen faktisk er en meget effektiv løsning, hvorfor så ikke bare skalere den op? Lad os droppe de store armbevægelser og give brugerne det, de egentlig er interesserede i. For bør indholdet ikke komme først? Jeg siger ”absolut!” og udnævner hermed mobilen til at være det nye designdogme.
Og så er det, at Photoshop ikke længere kan følge med. For hvad skal designeren gøre? Designe syv udkast til hver enkelt underside? Indtil videre er der ikke nogen oplagt alternativ metode til det grafiske (men det skal nok komme), så de fleste laver i dag responsive design direkte i HTML, for det er simpelthen hurtigere at prototype designet her.
Tirsdag den 12. juli klokken 15 holder jeg et gå-hjem-seminar om ”Dogme:Mobil” og viser i den forbindelse nogle teknikker, man kan bruge til at lave responive design. Seminaret er gratis og åbent for alle interesserede. Det finder sted hos IT-Kompetence, Hejrevej 28, 4., København NV.
Artikler:
http://www.alistapart.com/articles/responsive-web-design/
http://line25.com/articles/responsive-web-design-articles-tutorials-guides
http://adactio.com/journal/4523/
Værktøjer:
http://lessframework.com/
http://cssgrid.net/
God bog:
http://www.abookapart.com/products/responsive-web-design
Bare rolig man må stadig godt bruge Photoshop til at redigere billeder, tegne søde tegninger i Illustrator og animere i Flash. Man skal bare ikke bruge det som et designværktøj til hjemmesider. Brug det til dét, det er bedst til.
Slides> https://docs.google.com/present/edit?id=0Acc6JRq-_yhNZGRocHhneHpfMTgwem4...
