Arkiv for ‘Responsive’ Kategori

Har du disse symptomene?

Når du går til dokteren, så lister du opp dine symptomer, og hvis du er heldig, så vi dokteren gi deg et lite ark med foreskrevet medisin som skal ta knekken på problemene dine. Vi som jobber med design vil at du kommer til oss med dine symtomer heller enn hvilken medisin du tror du trenger. Men nå har vi jo denne kjekke lommelegen, hvor enkelte bruker mer tid enn på facebook (de som har barnehage-barn). Hvor er designsymptomenes versjon av lommelegen? Her er mitt bidrag til designkundenes lommelege. Har du disse symptomene?

Symptomer: mye dobbeltarbeid og inkonsekvent design

Bortgjemt CSS, duplikatkode, uklar visjon og inkonsekvent design

  • CSS kode gjemmer seg i ulike hjørner av systemene
  • Unødvendig duplikat kode gjør sidene tregere
  • Tidkrevende grafisk design prosesser for hver eneste grafiske detalj
  • Utydelige designprinsipper
  • Ingen tydelig designvisjon for den helhetlige UX på tvers av prosjekter og enheter
  • Inkonsekvent design på tvers av ulike skjermoppløsninger, enheter og papirutgaver

Medisin: en levende digital stilguide

En levende og digital stilguide kan bestå av gjenbrukbare kodebiter:

  • Side layouts
  • Box layouts
  • design stiler
  • Arkiv (logo, vektorgrafikk ol.)
  • UX prinsipper
  • Front-end kode standarder

Hver bit burde inneholde:

  • Tingens navn med en unik url
  • Rationale for hvorfor tingen er som den er, og hvordan den er ment å brukes
  • Et eksempel på selve tingen
  • Og kodesnutten som genererer tingen

Stilguiden er løpende arbeid, det er ikke bare å lage stilguiden, den må også implementeres og revideres løpende i takt med løpende prosjekter. En stilguide skal være et kommunikasjons-verktøy, ikke en tvangstrøye.

Designerne bruker stilguiden til å:

  • Dele designelementer
  • Referere til designbiter som allerede har rasjonale beskrevet, istedenfor å forklare hver detalj i hver eneste prototype
  • Finne filer og kodesnutter

Front-end utviklere bruker stilguiden:

  • Som et hjelpemiddel for å skrive gjenbrukbar kode og bygge gjennomgående grensesnitt
  • Hjelper med å forstå designvisjonen
  • Live eksempler speeder opp utviklingsprosessen og testing

Ledere og nettredaktører bruker stilguiden til:

  • Hjelper nyansatte og vikarer med å forstå systemene og formidlingsmulighetene
  • Forstå hvordan de kan tilpasse sidene til sine behov
  • Et kommunikasjons-hjelpemiddel

 

Et sunt digitalt design består av gjenbrukbare deler, organiserte biter, en tydelig visjon og et fleksibelt og gjennomgående design

  • Gjenbrukbare deler som er lett å finne og gjenbruke
  • Organiserte biter, arrangert så du kan scanne, velge og bruke hver del raskt
  • Mindre duplikatkode som gjør sidene raskere
  • LO-FI prototyper kan tas rett til produksjon raskt
  • Fleksibelt og gjennomgående design på tvers av ulike skjermoppløsninger, enheter og papirutgaver
  • Tydelig designvisjon på tvers av mennesker og prosjekter
  • Det kunne vert enklere å teste
  • Dere kunne hatt et felles vokabulær
  • En nyttig referansebase
  • Og ikke minst, en mer effektiv arbeidsflyt

 

Resirkulering av designbiter gjør tjenesten mer intuitiv for de som bruker tjenesten

Når de interaktive bitene har et gjennomgående designspråk og adferd på tvers av skjermer, er det lettere å bruke, fordi det er mer lærbart og forutsigbart for de som skal bruke tjenesten. Dersom en funksjon oppfører seg på en måte på mobil, er det veldig kjekt for brukeren å kjenne igjen denne triggeren på en annen skjerm, og allerede vite hva den gjør.

 

Riv ned veggen

Siden CSS og HTML er kode, blir front-end utviklere ofte puttet i den samme boksen som Java/PHP/Ruby/back-end utviklere, heller enn hos resten av designteamet. Dette er et problem. Html og CSS er design.

Ettersom vi må være tigjengelig på alle de enhetene våre kunder/lesere/seere/brukere lever livene sine på, blir det viktigere og viktigere å jobbe i dynamiske miljøer for å artikulere hvordan designet skal oppføre deg på tvers av alle de ulike enhetene våre brukere sitter med. Sist jeg sjekket statistikken var det over 700 ulike skjermoppløsninger som besøkte våre tjenester.

For å kunne jobbe effektivt med design for dagens og fremtidens nettsider, må vi erstatte utdaterte designmetoder med ekte samarbeid og kommunikasjon. Ettersom multi-device web blir normen, vil kaste-over-veggen metoden bli mer og mer utfordende. Den moderne designprosessen krever intenst samarbeid mellom designere og front-end utviklere.

 

Hvis du ignorerer symptomene…

Dersom dere ikke tar denne medisinen, risikerer dere å ikke ha en klar designvisjon, dere designer flere versjoner for hvert designelement, en økende mengde duplikat kode som gjør sidene tregere og tregere, og en inkonsekvent brukeropplevese som leder til frustrerte kunder og lesere.

 

Gjenbrukbart = konsekvent design = lett å bruke

Design stilguiden gir mulighet for å lage et mer gjennomgående, konsekvent, forutsigbart og lærbart grensesnitt og brukeropplevelse.

Standard biter og designstiler hjelper dere med å gjenbruke løste, effektive design løsninger igjen og igjen. Resultatet av dette blir at konsekvens og brukervennlighet øker.

Til slutt, er det de aller viktigste menneskene  – de som bruker tjenestene – som drar mest nytte av det når dere har en velfungerende stilguide.

Responsivt design for betalingsløsning

Sjekk ut vårt nylanserte responsive design: tb.no

tb+ er en ny betalingstjeneste laget for Edda media sine nettaviser med betaling via mobiltelefon.

Artiklene som ligger på forsiden er også tilgjengelige på touch utgaven. Det er selve produktsidene og skjemasidene som benytter seg av responsivt design. Med andre ord bruker vi både versjoner og responsive design. Produkt- og skjemasidene er 100% responsive for mobil, brett og desktop.

Vi har lagt vekt på at det skal være så enkelt som mulig for leserne å gjennomføre en prøveperiode eller kjøp.

  • Det skal være raskt og effektivt å gjennomføre et kjøp (kun mobilnummer og kode)
  • Leseren skal føle seg sikker ved bruk av tjenesten (hva skjer nå, hvordan skjer betalingen, ha kontroll på abonnementet..)
  • Leseren skal ha nok informasjon om produktet til å kunne ta et valg (motivert/konvertert for kjøp)

 

 

Mobil brukertest: Videokamerastativ i ‘mcGyver-stil’

Den største utfordringen i designprosessen var å få incentivsiden på artikkel til å fungere optimalt, og svare på de spørsmålene som leserne har i hodet på riktig tidspunkt i kjøpsprosessen. Vi redesignet incentivsiden to ganger etter at vi haddde hatt brukbarhetstester. Vi kjørte 3 runder med tester, først en tidlig-test på en klikkbar prototype laget i Axure. Senere i prosessen, etter å ha gjort noen endringer, testet vi på en mer reell prototype på testserver hos avishusene på reelle lesere av avisen. Vi testet også på mobil med eksternt web-kamera og quicktime player.

Touch vennlige aviser

I går lanserte vi nytt touchvennlig rammeverk for lokalavisene. Android og iphone sendes nå til touch.xx.no. Vi venter med windows telefoner siden disse ikke er veldig utbredt enda. Se eksempelvis touch.dittoslo.no, touch.f-b.no og touch.lierposten.no.

Leserne har touch telefoner 

Vi ser en eksplosiv vekst på bruken av mobil og forventer at denne trenden fortsetter.

  • Den gamle mobilversjonen (m.dt.no, m.tb.no osv) var optimalisert for Symbian telefoner, ikke touch. I dag har majoriteten av leserne touch telefoner.
  • Den gamle var ikke designet for touch. Eksempelvis var det svært vanskelig å treffe en lenke i en liste med fingeren.
  • Den gamle var i overkant strippet for innhold. Veldig mange velger å gå til desktop versjonen for å se mer innhold. Den nye er riktignok også ganske strippet ved første lansering, men har et bedre utgangspunkt for videreutvikling.
  • Den gamle hadde veldig få nyheter på forsiden for å spare lastetid. I dag tåler mobilleserne mer datatyngde.
  • Den var dårlig skalerbar til dagens skiftende mobiltrender.

Den nye mobilversjonen er designet for touch

Fokuset i første runde har vert å tilpasse til smartphones fremfor å utvikle ny funksjonalitet. Vi gjorde en Kano undersøkelse som viste at nyheter helt klart er det leserne våre bryr seg om, naturlig nok.

  • Den nye mobilversjonen er tilpasset til touch skjermer. Knapper med store gode trykkflater som gjør det lett å treffe riktig.
  • Nytt menykonsept med en kollapset meny som er samlet under en enkelt meny knapp.
  • Rikere meny
  • Forbedret brukeropplevelse i bildegallerier med visning i fullskjerm og bedre posisjonerte bla-knapper.
  • Flere nyheter på forsiden og et mer representativt nyhetsbilde
  • Topplister med mest lest og siste nytt
  • Video-oversikt
  • Mulighet for å justere tekststørrelsen på artikler for mer behagelig lesing.
  • Svg logoer og ikoner som skalerer veldig fint for høyoppløselige skjermer.
  • Veier videre fra artikkel. Eksempelvis mest kommentert og siste nytt fra forsiden.

Hybridløsning 

Der er både fordeler og ulemper med responsive design. Denne gangen veide ulempene mer enn fordelene. Man valgte å gå for en hybridløsning, som kan videreutvikles kontinuerlig.

  • Mobilversjon.
  • Hybridløsning som er responsive i den forstand at den tilpasser seg ulike touch telefoners bredde, horisontal og vertikal.
  • Bare iphone og android sendes til touch
  • Mobilversjonen skal kunne videreutvikles til å skalere opp til brett med responsive design og media queries.

Bærekraftig design

Nettavisene må evne å hele tiden tilpasse seg til det utstyret som leserne sitter på. Den nye versjonen er laget etter prinsipper for bærekraftig design, noe som betyr at den lett skal kunne justeres ettersom markedet snur seg. Hastigheten på utskiftning av mobiltelefoner er mye raskere enn på desktop. Dette fordrer at en henger med i svingene og utvikler mobil kontinuerlig.

Nyheter om nylanseringen:

http://tb.no/nyheter/sjekk-avisen-pa-mobilen-na-1.7160263
http://www.moss-avis.no/nyheter/ny-mobilutgave-av-moss-avis-no-1.7160377
http://www.f-b.no/nyheter/f-b-no-pa-mobil-enklere-og-bedre-1.7158758
http://www.varden.no/nyheter/varden-med-enklere-og-bedre-mobilutgave-1.7159519
http://kv.no/nyheter/kvs-mobilversjon-med-nytt-utseende-1.7160349

 

 

 

Responsive design – begreper

Skal du gå fra å designe desktop til å designe for mobil web med responsive design, så er det noen nye begreper som du trenger å bli kjent med. Å respondere til ulike enheter kan bety mangt. Eksempelvis:

  • Tilpasse layout til ulike skjermstørrelser
  • Nedskalere bilder
  • Hente mindre bilder for mindre skjermer (laste ned mindre filer)
  • Forenkle elementer for mobil
  • Gjemme elementer som ikke er blant de viktigste c2a
  • Større, touch-vennlige linker og knapper for mobilbrukere
  • Detektere og respondere til mobile funksjoner som gps og enhetens liggende eller stående format

Hvordan vet vi hvilke egenskaper enheten som besøker siden vår har? Jo, med:

Media queries

Dette bør ikke være helt ukjent for deg, du har sikkert designet utskriftsvennligevennlige sider før?

Med media queries kan vi levere ulik layout, ulike bildestørrelser, vise/skjule innhold ol. Vi kan tilpasse designet til ulike enheter, orienteringer, skjermstørrelser osv.

Dagens desktop enheter har ulik skjermstørrelse og omtrentlig samme dpi verdier, derfor designes desktop versjoner typisk i pixel størrelser. Dagens mobile enheter derimot kommer i mange ulike dpi verdier.

Density

En pixel er ikke en pixel. Når vi designer for mobil kan vi ikke bare forholde oss til hver enhets skjermoppløsning. Vi må også se på pixeltettheten, hva enheten rapporterer og hva dette betyr i praksis.

Dette betyr i praksis at et bilde med samme pixelstørrelse kan se veldig liten ut på en 326 dpi skjerm, og veldig stor ut på en 170 dpi skjerm med lavere pixeltetthet dersom en ikke tar hensyn til dpi. Du kan også risikere at fonter blir for små, eller trykkflater for små og vanskelige å treffe med fingeren.
Safari på IOS lyger!
En pixel er IKKE en pixel

Viewport

Refererer til størrelsen på browservinduet minus rammer. På mobil kan denne være større enn mobilskjermen. Default bredde på ios er 980 pixler.
Dersom du designer for bare iphone, sett viewport til skjermstørrelsen.
Dersom siden du designer er mindre enn 980 pixler, sett viewport til bredden på designet ditt.
Eller du kan bestemme at viewport skal være det samme som den fysiske størrelsen:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Virtual viewport

Vi var inne på at viewport på en nettleser på mobil kan være større enn den fysiske skjermen. Dette er det som kalles for “virtual viewport”.

Orientation

På mobil kan man se websiden både i stående og i liggende format. Der er ulike skjermbredder på samme enhet. Dersom vi ikke gjør noe med dette, kan brukeren få to ulike layouts og to ulike bannerpakker på samme side samtidig bare ved å tilte på enheten.

  1. media all and (orientation: portrait) {  
  2.  body div { width: 10%; }  
  3. }  
  4. @media all and (orientation: landscape) {  
  5.  body div { width: 15%; }  
  6. }

Resolution

Levetiden til mobile enheter er typisk mye kortere enn desktop. Kortere levetid og stadige nylaseringer gjør at bildet på populære oppløsninger er i stadig endring. En pixel er ikke en pixel. Selv om en nyere iphone med retina skjerm har en pixeloppløsning på 640 bredde så vil denne bruke samme layout som en 320 pixel skjerm.

@media only screen and (min-width: 321px) and (max-width: 479px) {}

Pølsefinger

For all del, glem ikke touch! Design for tjukk og feit pølsefinger, her er ingen mus med presis navigering.

Design for touch. Det vil si at ingen linker eller knapper eller andre interaktive elementer skal ha mindre enn minimum 44 px trykkflate. Noe mindre blir veldig vanskelig å treffe med fingeren. Det betyr at linklister eller linker som ligger ved siden av hverandre må være store nok, ha stor nok trykkflate og ha tilstrekkelig luft rundt seg til at det ikke blir lett å bomme.  Og nå: les avsnittet om dencity en gang til.

Du kan også legge på skjulte touch interface elementer, eksempelvis To-finger tap.

Fordeler og ulemper med responsiv design

Publisert: 1 Comment

Fordeler og ulemper med å designe etter responsive design prinsippet.

Responsive design er ikke det samme som en «mobil-versjon» av nettsiden din. Responsive design er en fullverdig visning av nettsiden som er tilpasset det miljøet du ser den i.

Istedenfor å lage en layout som skal passe for alle skjermer, lages layouter som tilpasser seg det utstyret hver enkelt bruker sitter med.

Mobildesign handler ikke nødvendigvis om å lage en helt ny brukeropplevelse, men om å levere den samme opplevelsen fintunet for håndholdte enheter. Spørreundersøkelser viser at brukerne slett ikke alltid er på farten når de surfer med håndholdte enheter, majoriteten sitter faktisk mest hjemme og surfer med brett eller mobil, i sofa, på senga, på do.. kjenner du deg igjen? Du begynner kanskje å lese en fagartikkel på desktop, fortsetter å lese neste artikkel på mobilen på toget, og leser ferdig på brettet hjemme i sofan?

Fordeler med responsive design

  • inkluderende
  • en versjon for alle enheter – lettere å vedlikeholde en versjon enn mange versjoner
  • samme brukeropplevelse uanhengig av device
  • selv om browservinduet er nedskalert vil designet fungere
  • mobil først – når en designer for mobil først blir en mer bevist på å fjerne innhold som virkelig ikke trenger å være der. Da blir heller ikke desktop versjonen overfyllt med unødvendig innhold
  • brukerne blir ikke utestengt fra fullversjonens innhold. Mobilversjonen er typisk veldig strippet for innhold.
  • vi velger ikke bort innhold for leseren
  • deling av linker: url er det samme uansett. Du vet ikke hvilken device den du deler linken med er på, deler du m.dt/artikkel med en venn som er på en desktop utgave, vil det se ganske merkelig ut.
  • samme innhold tilpasset devicen. Det lar brukeren fullføre oppgaven. Vi velger ikke bort 90% av brukeroppgavene. Kommer du til dt.no for å gjøre en spesiell oppgave kan det være veldig irriterende om akkurat den oppgaven er valgt bort for deg på mobil.
  • fungerer spesielt bra i nyere browsere
  • samme opplevelsen på tvers av devicer. Mer gjennomgående brukeropplevelse.
  • bærekraftig design – imøtekommer dagens brukerbehov uten å redusere mulighetene for å dekke fremtidens brukerbehov.

Ulemper med å bruke responsive design

  • krever at utviklerne har kunnskap og erfaring med responsive design
  • det er ikke lett! Er teamene klare? Hvor lenge er det til de er klare? Hvor mye prøving og feiling må til.
  • vedlikehold mer komplisert
  • utviklingstid og ressurser – har vi tid til å gjøre det grundig? Responsivt design er komplisert å utvikle.
  • browser kompabilitet – html5 og css3 er gode verktøy for å bygge responsive nettsteder, men det er fortsatt mange issues med disse.
  • vi må ha annonser som kan skalere
  • ytelse/lastetid – Flere kall på grunn av kross browser og kross plattform kompabilitet issues. (IE..) Mer css å laste ol.
  • ulike devicer kan ha behov for å støtte noe ulike brukeroppgaver. Innhold/touch grensesnitt/ mobil har ulike muligheter som gps/ringe/mobilverifisering mobil/desktop ol. Behov for nedkortet innhold på mobil, ikke vise like mye på en gang.
  • må laste ned like mye på mobil som på pc. Kan være en utfordring på avisenes meget innholdstunge forsider. (Kan være ulike tekniske løsninger på dette)