Website projekt 3, 2. semester. Lasse M. Bruun Overgaard www.lbodesign.dk Mark Halding www.markhalding.dk Peter Konrad http://cph54.webkn.dk/ Anders Rein www.andersrein.dk Responsive design Projekt: www.andersrein.dk/projekter/hjemmesider/responsiv
Problemformulering Med en hjemmeside allerede etableret er der kommet nye krav til funktionaliteten som vi skal designe. Der er et voksende marked for folk der surfer via mobile enheder som mobiler og Ipads, og denne markedsandel vil vi gerne kunne trække til via et brugervenligt design der ser godt ud i den håndholdte hardware. Derfor er vores mål at ombygge vores website til at få et responsivt design der fungere på både pc, mobil og tablets. Ud over dette er det pga. udeforstående kilder nu nødvendigt at have en form for brugerregistreringsmodul på vores website. Dette vil kræve noget omtænkning m.h.t. at få folk til at benytte denne via et tiltrækkende design der drager folk til at registrere sine private oplysninger.
Argumentation for valg og afgrænsning Vi har besluttet at prioritere det responsive design til så mange relevante brugerflader som muligt - dvs. smartphones og tablets - både stående og liggende versioner. Dette har vi valgt, fordi at vi mener at alle fra målgruppen har en smartphone og størstedelen samtidig ejer en tablet. Vi har lavet få afgrænsninger i skærmoptimering - vi har ikke prioriteret Samsung, Google og Kindle-tablets. Ikke mange danskere ejere disse tablets og det er klart størstedelen der har en ipad. Ønsker man at bestille bord hos Søren K vil man som regel navigere ind på sitet via sin computer. Vi har optimeret vores responsive design til 5 skærmstørrelser: Computer 800px+ Liggende Tablet (ipad) 801x Stående Tablet (ipad) 501-800px Liggende Smartphone 381-500px Stående Smartphone under 380px Vores mål med de 5 brugerflader er at vi vil give brugeren den bedst mulige oplevelse af Søren K s restaurants hjemmeside på flest mulige enheder, stående så vel som liggende. På stående tablets giver vi brugeren et statisk overblik over hjemmesiden, dvs ingen scrolling. Ved brug af ekstra store menupunkter sikre vi os at brugerens fingre kan navigere rundt uden problemer. På liggende og stående smartphones giver vi brugeren mulighed for at scrolle igennem menuen med tommelfingeren. Ved hjælp af piktogrammer giver vi brugeren en velkendt oplevelse af menupunkterne. Når man klikker på et menupunkt, udvider siden sig og undermenuen springer frem neden under overmenuen så man hele tiden kan scrolle op og danne overblik.
Vores Søren K site er blevet optimeret til flere forskellige skærmstørrelser. Sitet er blevet responsivt på tablets og smartphones, så det bliver nemmere for brugerne at navigere rundt på hjemmesiden, uden behov for nogensinde at zoome. Løsning til tablets Billedet viser et mockup om tankerne bag det responsive design på tablets - her vises et eksempel med en ipad. Menuen er noget af det der springer hurtigst i øjnene - den er markant større end i den originale computerversion. Dette er for at tilgodese brugeren - det er langt nemmere at ramme de store knapper, når det er touchskærm. Den lille øvre menu kan stadig tilgås fra tablets, men er ikke forstørret ligesom hovedmenuen. Vi har prioriteret de vigtige menupunkter, så de falder i øjnene som det første på sitet. Alt indhold er blevet komprimeret sammen, så der er plads på tablet-skærmen, dette betyder samtidig at de 3 opdelte billeder på forsiden, i stedet er blevet til et stort som udfylder hele skærmstørrelsen. Søgefunktionen er blevet nemmere at gå til i tabletversionen - man navigerer ikke nær så hurtigt på en tablet, som man gør på computer, derfor vil det være mere relevant at søge indhold på siden fra en tablet. Søgefunktionen er i samme grid som brødkrummestien og ødelægger dermed ikke designet og balancen på sitet. Selve designet på forsiden er tilpasset skærmstørrelsen fuldstændigt, forstået på den måde at alt indhold kan tilgås med det samme, uden at det er nødvendigt at scrolle i teksten. De responsive ændringer til tablets forekommer, når skærmstørrelsen er under 800 px, og navigerer man rundt på sitet vil man opdage at samtlige billeder er blevet optimeret skærmstørrelsen - de er blevet mindre. Logoet og de øverste små menuer er centreret - også for at skabe balance og undgå for meget spildplads. Samtidig kan logoet ikke placeres på samme niveau som menulinjen, da den fylder hele skærmstørrelsen. Billeder som kunne undværes på sitet, er blevet slettet for at få løsningen til at være så enkel som overhovedet muligt. Dog har det skabt enkelte huller, hvor der er meget bart. Et eksempel er det stykke tomplads der findes ved siden af menukortene. Ved liggende tablets, finder man det samme design som på computer, da det har samme skærmstørrelse. Det responsive design til tablets stopper og herfra tiltræder mobilløsningen.
Løsning til mobiltelefoner Designet til stående smartphones (skærmstørrelser under 380 pixels) er lavet markant om i forhold til computer - og tabletversionen. Designet tilgodeser brugeren på den bedst tænkelige måde - knapperne fylder hele skærmstørrelsen og det er derfor umuligt at ramme de forkerte menutaster. Navigationen er brugervenlig og der kan umuligt opstå misforståelser ved brug af sitet på smartphones. På hver enkelt menuknap ses et piktogram, som visuelt viser en enkel forklaring på menupunktets indhold. Indholdet af de forskellige sider er stort set det samme som på computer og tabletversionerne, men vi er blevet nødsaget til at slette flere billeder og erstatte det med en kort tekst i stedet. Der er f.eks på ingen måde plads til de billeder vi har af menukortene - i stedet er der et link til de forskellige pdf-filer. Et design der er tilpasset til mobilstørrelse som dette, giver en helt anden funktionalitet og brugeroplevelse og det er uhørt meget nemmere at navigere rundt på sitet. Havde sitet ikke været responsivt på mobiltelefoner ville man højst sandsynligt gå glip af store mængder indhold. Fra 500 pixels til 380 pixels finder man designet til liggende smartphone (bred version). Enkelte nyere smartphones har en skærmstørrelse over 380 pixels og kommer derfor med i den brede version på den vertikale led.
I den brede version har vi igen måtte slette enkelte billeder på undersiderne, men erstattet dem af links, så alle data stadig kan tilgås. Menuen på den liggende version er blevet endnu større end på den stående. Kasserne fylder stadig hele skærmstørrelsen og springer meget hurtigt i øjnene. Undersidenavigation i menuen er (som på vertikalt design) helt droppet, men kan ses på selve knappen - se eksempel om den røde ring på billedet nedenfor: Når man klikker på en menu-kasse scroller siden automatisk ned til det relevante indhold på siden, for at gøre løsningen så brugervenlig som muligt. Dette betyder at man ikke selv skal scrolle ned i bunden (forbi menupunkterne) for at tilgå indholdet. De øverste navigationslinks og search-baren er fjernet i mobilversionen og footeren viser kun 1 sektion, hvor der bliver vist 3 sektioner i de andre versioner. I de mindste mobilversioner ses samme indhold som i de større. Den eneste forskel er at teksten i menuknapperne hopper op i toppen for at gøre plads til piktogrammerne nedenunder. De få billeder der bruges samt alle bokse med indhold i versionen er scalet ned for at give en bedre oplevelse.
Andre responsive ændringer Ved skærmstørrelsen 870 pixels ses den første ændring af sitet - det iøjnefaldende tre-boks grid, som både ses på forsiden og i størstedelen af undermenuerne mister marginen i mellem de 3 billeder. Dette betyder at den samlede oplevelse af billederne bliver smallere og er dermed bedre tilpasset til skærmstørrelsen. Udover det giver det en meget sjov effekt, man måske ikke havde set komme. På billedet til venstre nedenfor ses et eksempel fra forsiden ved en skærmstørrelse på over 870 pixels - billedet er opdelt i 3 marginer. Billedet til højre viser hvordan billedet bliver komprimeret og altså ikke længere er opdelt - dette sker ved en skærmstørrelse på 870 pixels og under.
Brugertest Vi udførte 3 brugertests på 3 forskellige personer som skulle udfylde et skema der stillede spørgsmål til kvaliteten af siden. Testpersonerne tjekkede siden på en platform hver, så der blev en test til henholdsvis tablet, mobil og pc. Resultaterne var gode til at vise at vores mobil version var vellykket og godt designet, dog at vi stadig kunne arbejde på at forbedre den. Se bilag 1, 2 og 3.
FURPS tjekliste Functionality Vores site skal være multi-platforms baseret, med størst henblik på tablets og mobiler, hvilket skulle gøre den tilgængelig på de fleste i vores målgruppe. Efficient nyhedsbrevssystem der er designet til at være nemt og hurtigt for folk at tilmelde sig. Usability Mulighed for at benytte sig af sitet hvor som helst. Brugervenlig designflade. Piktogrammer kan gøre det nemmere for folk der ikke taler dansk eller med læseproblemer at navigere siden. Supportability Fremadrettet opsætning gør det nemt at bygge videre på sitet, skulle dette være nødvendigt. Offline-version til test af site før upload. Serviceability Sat effektivt op, minimale krav for at ændre ting som brødtekst for at lave opdateringer. Offline-version tilgængelig i tilfælde af crash. Reliability Site-downtime minimal ved ændringer i indhold. Opbevarelse af information opsat til at være pålideligt. Performance Site optimeret til web, minimal bandwidth allocation til loading af billeder, tekst, m.m. Site responsiveness er hurtig, og kan fungere på wi-fi uden problemer.
Sprintlog med prioriteter og tidsestimater Her er en graf udarbejdet fra vores sprintlog som viser vores forventede tidsforbrug pr. dag over 10 dage (rød), samt en graf som viser vores rigtige tidsforbrug igennem de 10 dage (blå). Ud fra spintloggen kan vi konstatere at på trods af en lidt langsom start og nogle problemer i midten, er vi endt med at komme forud i tidsplanen i slutningen af forløbet. Dette skyldes begrænset viden i starten af forløbet der gjorde det svært at gå i gang med en stor del af det påkrævede i projektet. Da vi så fik den nødvendige baggrundsviden kom vi ordentligt i gang, og endte op med at færdiggøre det i god tid. I midten løb vi ind i nogle problemer med koden, men da vi fik det under kontrol gik resten hurtigt.
Kildehenvisninger Hjemmesider: www.responsinator.com www.stackoverflow.com www.soerenk.dk www.validator.w3.org Programmer Dreamweaver Notepad++ Excel InDesign Testet i: Chrome Firefox Internet Explorer Safari Testet på: iphone 3GS Nokia Lumia 920 ipad 3 Standard PC-skærm