Digitala medier och 3D-animation och visualisering

Tag: Webb

Workflow – från skiss till webbsida

Hannah Pehrson

– Hur kan en skapa ett smidigt workflow vid design av webbsidor och applikationer?

I alla designsituationer där det finns en beställare/kund, en eller flera designers och ett förväntat slutresultat genomgår ni tillsammans ett antal steg. Låt oss smälta samman denna process och kalla designsituationens alla steg, inkl. metoder och verktyg, för workflow.

Hur ett workflow fungerar varierar väldigt, mycket beroende på vem du är och hur din arbetsplats ser ut. Är du en webbdesigner som skapar det visuella och sedan passar vidare programmeringen, eller är du en front en utvecklare som ansvarar över både det visuella och programmering? Rollerna och alternativen är många.

Modulära javascript-applikationer

Fram till för bara ett halvår sedan har jag inte haft en tanke på att skriva ”hållbar kod”. Jag placerade html i html-filerna, css i css-filen, javascript i javascriptfilen — och om jag kände för det skrev jag en liten kommentar någonstans. Det räcker väl? Fungerade det och såg bra ut i webbläsaren så har jag ju dragit mitt strå till stacken. Eller hur? Det var ju aldrig någon som skulle arbeta vidare på det jag gjort ändå — och om det nu var det, så var det ju deras problem om de inte var smarta nog att förstå min kod. 

Google Analytics

Susanna Bellak

En stor del av min praktik på Olimp Norden AB gick ut på att sköta deras marknadsföring, det vill säga komma på kampanjer, designa nyhetsbrev och sköta deras sociala medier (framförallt Facebook). Till dessa arbetsuppgifter hörde det även till att ta reda på vilka resultat kampanjerna och den övriga marknadsföringen fick, det vill säga till exempel vilka inlägg på Facebook som genererade många besök till vår hemsida och vilka kampanjer som genererade till avslut.

Verktyget som jag framförallt använde mig av för att få ut den datan var Google Analytics. Med Google Analytics kunde jag enkelt få ut statistik på bland annat besök, avslut, vilken tid på dygnet det var mest trafik å webbsidan och vart ifrån besöken kom.

Förhållningsregler i webbdesign

booombaclot

Av Niklas Sidhu Koskela

– INLEDNING –

Det gyllene snittet är en välkänd matematisk formel för harmoniska visuella uttryck.
I den här artikeln kommer jag att fokusera på dess påverkan inom webbdesign och hur man kan applicera den.
Jag kommer utöver detta också att titta närmare på grids och olika typer av layouter som kan påverka en hemsidas harmoni och användarens informationsintag.

 

– THE GOLDEN RATIO –

golden-ratio
(bild från: livescience.com)

Matematik ses ofta som något tråkigt, främst för oss som befinner oss i design-industrin eller andra kreativa områden. Vissa påstår dock att konst, arkitektur och design har mer matematik gemensamt än vad man skulle kunna tro och att detta undermedvetet påverkar vår känsla av harmoni och perfektion i ett visuellt uttryck.

Detta anses ha att göra med det gyllene snittet (också känt som the Golden Ratio eller the Divine Proportion) (Remick, 2008).

Man har dock inte kunnat reda ut vad det är i det gyllene snittet som tilltalar oss på det sättet som den påstås göra (Pentago, 2012). Detta har resulterat i att vissa ifrågasätter dess funktion och verkan och anser att den enbart är matematiskt elegant. Detta, tillsammans med det faktum att den återfinns i olika former i naturen anses av oppositionen vara anledningen till att människor ger den tilltro (Lieveld, 2012).

Det finns alltså inga konkreta bevis för gyllene snittets påverkan. Dock hindrar detta inte faktumet att det i stor mån är något av en standard och något man, som designer, kan ha stor nytta av.

Det hela bygger på att man har två delar, och b. Dessa två ska sedan förhålla sig till varandra genom att ta ytans bredd på det man önskar designa, dela det med numret 1,618 och på så vis får man ut a. Genom att sedan ta den totala ytans bredd minus får man fram storleken på b.

Förhållandet är a/b = a+b/a = 1.618, 1.618 representerar det gyllene snittet.

matematiskt

Hur man applicerar det gyllene snittet

Så för att skapa en harmonisk uppbyggnad på en hemsida där förhållandet mellan sektionerna följer det gyllene snittets formel tar man den totala ytan av sidan, t.ex. 900 pixlar, delar detta med 1,62 (eftersom webbläsare gillar jämna nummer är det inga problem att runda av siffor och resultat).
Detta ger oss 555.55 px ≈ 555 px vilket blir huvudinnehållets (main content) storlek i bredd. Genom att ta 900–555 får vi fram bredden på vår eventuella sidebar, 345 pixlar. (Remick, 2008).

För att sedan applicera det gyllene snittet på de olika sektionernas höjd tar man sidans bredd och delar det med 1.62. Exempelvis 760/1.62 = 469.135802 ≈ 470. Sektion blir alltså 555×470 pixlar.

Sektion b räknas ut på samma sätt och blir då 345×470 pixlar.

Tar man sedan bort 470 från 760 så får man 290, vilket då blir den nedre sektionen.

gd_yo

Samma ekvation fungerar även för procentbaserade layouter, byt bara ut 900 px till 100% (Kyrnin).

Dessa sektioner kallas för Golden Rectangles (Pentago, 2012).

För att kontinuerligt följa det gyllene snittet kan man skapa mindre golden rectangles inuti de större (Kyrnin).

Om man vill skapa andra element som följer gyllene snittet eller golden rectangles så kan man skapa ett så kallat Golden Rectangle Grid.

Detta gör man enligt Fibonaccis spiral som är den båge som man ser på bilden för det gyllene snittet. Bågen ökar i storlek med 1.618 per fjärdedel i sin rotation.

För att skapa detta gör man 2 rutor som är exempelvis 5×5 pixlar, en som är 10×10, en som är 15×15 och en som är 25×25 och ställer upp dem på följande vis:

fibonacci

Man baserar storleken på de olika rutorna enligt Fibonaccis sekvens där numren adderas med det föregående numret för att ge nästkommande nummer:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 osv

Alltså; 1×1, 1×1, 2×2, 3×3, 5×5

När man sedan skapar olika element för sin sida så kan man justera storleken efter de olika rutorna.

– GRIDS –

grid(bild från: tuts+)

Grids är, precis som i exempelvis Photoshop, ett rutnät som ligger ovanpå bilden.
Man kan säga att detta är ett enklare sätt att åstadkomma något som påminner om det gyllene snittet på så sätt att man placerar den information som man vill att användaren ska ta del av på rätt platser för att skapa en undermedveten känsla av struktur och harmoni.

Enligt ”tredjedelsregeln” (Rule of Thirds) ska man dela upp en yta i tre lika delar, både vertikalt och horisontellt, där linjerna korsar varandra är de ideala platserna för den ovannämnda typen av information.
Risken är större att användarna fokuserar på dessa punkter och de ska vara behagligare att titta på.

 

Genom att dela upp dessa tredjedelar i ytterligare tredjedelar kan man också utnyttja principen i mer komplexa gränssnitt.

Med hjälp av denna typ av layout kan hjärnan slappna av och ögonen dras automatiskt till den information som man vill ska framhävas.

Hur man applicerar grids

I sin artikel The Principles of Beautiful Web Design” skriver Jason Beaird om ett tillvägagångssätt för att skapa ett bra rutnätssystem:

  1. Börja med att dra upp en rektangel, i dator eller med papper och penna
  2. Dela upp rektangeln i tredjedelar, horisontellt och vertikalt.
  3. Dela upp den övre delen av din layout i ytterligare tre delar för din header.
  4. Dela samtliga av dina kolumner på mitten för att skapa ett mer detaljerat rutnät.

Placera sedan den information eller de element som du anser viktigast på de platser där linjerna korsar varandra.

Fördelar med grids

Om man har en väldigt innehållsrik hemsida så kan det vara till fördel att dra nytta av grids. Hemsidor som tillhandahåller mycket information kan framstå som mer iögonfallande.

Grids kan också underlätta skapandet av responsiva webbplatser.

Den mest avgörande punkten är att man till viss del kan styra användarens fokus, eller snarare öka synligheten hos de element som man vill framhäva genom att placera dem där användarens fokus kommer att vara.

(Jones, 2012)

Nackdelar med grids

Genom att använda sig av grids skulle man kunna säga att man begränsar kreativiteten. När man valt vart man vill placera viss information så kan designern eventuellt känna sig limiterad av de tydliga gränserna som grids medför.

Metoden har en relativt brant inlärningskurva. Det finns mycket information kring grids och en hel del kan vara missvisande.

Det funkar inte för alla typer av hemsidor utan ämnar sig bäst på sidor som har mycket information.

(Jones, 2012)

– Z-LAYOUT & F-LAYOUT –

Z-Layout

Z-layout är ett utmärkt sätt att skapa en hemsida på då man tar hänsyn till de huvudsakliga kraven på en effektiv sida; varumärket, hierarkin, strukturen och uppmaning till handling.
För att använda sig av z-layout drar man helt enkelt ett stort ”Z” över det dokument där man tänkt skapa en hemsida i.
De element som man vill att besökaren ska se först placerar man i den övre kanten av z:et.
Då ögonen naturligt följer mönstret av z:et vill man placera uppmaningen till handling i slutet, när användaren tagit del av den information som värmer upp för handlingen.

z(Bild från: tuts+)

Varför det fungerar:

Det fungerar bra för oss västerlänningar för att vi kan skumma igenom sidan på samma sätt som vi skummar igenom en bok, uppifrån och ned, från vänster till höger. Dessutom följer denna layout hierarkin kring prioriteten kring de olika beståndsdelarna på en sida:

  • Varumärket
  • Hierarkin
  • Strukturen
  • Uppmaning till handling

Viktigt att tänka på när man använder sig av denna typen av layout är att om man vill att besökaren ska följa z:et så som man tänkt sig så ska man undvika att placera objekt som t.ex. är stora och färgglada på platser utanför z-formen.

(Jones, 2010a)

F-layout

Den här metoden försöker inte dra besökarens uppmärksamhet och få denne att följa en viss form utan fungerar genom att man, likt grids, med största sannolikhet följer besökarens naturliga sätt att bemöta en hemsida. Detta backas dessutom upp av vetenskapliga undersökningar.

Dessa vetenskapliga undersökningar har gjorts kring människor som surfar på internet och deras ögonrörelser där det kommit fram att de flesta tar in en hemsida i en F-formad ögonrörelse.

Undersökningarna påvisar med detta att sidans viktigaste element bör placeras på vänster sida.

heatmap

 

(Bild från: tuts+)

Precis som i Z-layouten börjar användaren i det övre vänstra hörnet och skannar av hela övre delen (navigationen, logo osv).
Sedan kollar de på innehållet nedanför och skannar av ända fram till sidans sidebar.
Efter detta går de över innehållet på ett snabbare och kortare sätt.

Liksom Z-layouten så baseras detta på hur man läser en bok; vänster till höger, uppifrån och ned. Sidebars avfärdas mer eller mindre.

F-layouten fungerar eftersom den låter besökarna läsa av innehållet på ett naturligt sätt.

Fördelar och nackdelar

Fördelen med båda dessa typer av layouter är att man lägger fokus på innehållet ”content is king”.

Man kan dock se att de båda är mest relevanta i marknadsföring då de har en uppmaning till handling. Denna uppmaning till handling kan vara att skriva upp sig för ett nyhetsbrev, köpa något eller anmäla sig.

(Jones, 2010b)

– SLUTSATS –

Oavsett vilken av de förhållningsregler som jag presenterat ovan man väljer att använda sig av så är det viktigt att tänka på i vilket avseende man skapar en sida. Man ska heller inte låta sig begränsas av de olika metoderna, de är endast riktlinjer som har olika effekter på besökarens/användarens upplevelse och/eller informationsintag.
Genom att använda sig av detta kan man uppnå försäljning, känslan av harmoni och struktur, en fördelaktig informationsarkitektur men man kan också hämma sin kreativitet och gå miste om viktiga lärdomar som kan medföras av att man provar sig fram, utanför lådan.
Jag tror att det är viktigt att vara medveten om dessa olika riktlinjer och när de passar att användas då vissa av dem har bevisat positiva resultat.
Med en kunskap kring detta, balanserad med kreativitet tror jag att man kommit en bra bit på vägen till att bli en duktig UX/UI/Webb/Interaktions-designer.

 

– KÄLLFÖRTECKNING –

Beaird, Jason (2007) The Principles of Beautiful Web Design [Elektronisk] Sitepoint, 2 apr.
Tillgänglig: http://www.sitepoint.com/principles-beautiful-web-design/3/
[12-02-2014].

Jones, Maria (2012) Pros and Cons of Using Grids in Web Design [Elektronisk] Bloom Web Design, 29 nov. Tillgänglig: http://bloomwebdesign.net/2012/11/pros-and-cons-of-using-grids-in-web-design/ [12-02-2014].

Jones, Brandon (2010a) Understanding the Z-Layout in Web Design [Elektronisk] Tuts+,
19 okt. Tillgänglig: http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28 [12-02-2014].

Jones, Brandon (2010b) Understanding the F-Layout in Web Design [Elektronisk] Tuts+,
19 okt. Tillgänglig: http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design–webdesign-687 [12-02-2014].

Kyrnin, Jennifer Mathematcis, Seashells and Web Design [Elektronisk] About.com
Tillgänglig: http://webdesign.about.com/od/webdesignbasics/a/aa071607.htm
[12-02-2014].

Lieveld, Jerry (2012) Forget the Golden Ratio [Elektronisk] lieveld.com, 13 sep.
Tillgänglig: http://www.lieveld.com/forget-the-golden-ratio/ [12-02-2014].

Pentago, Chris (2012) Applying the Golden Ratio in Modern Designs
[Elektronisk] Hongkiat.com
Tillgänglig: http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/
[12-02-2014].

Remick, Jarel (2008) The Golden Ratio in Web Design [Elektronisk] Tuts+, 29 dec.
Tillgänglig: http://code.tutsplus.com/tutorials/the-golden-ratio-in-web-design–net-2272 [12-02-2014].

 

 

 

 

 

Webbdesign – Trender (vfu2)

Trender att hålla koll på under 2014.

av: Matilda B

Webbdesign är ett område som ständigt förändras. Nya krav från användarna tillsammans med den snabba tekniska utvecklingen gör att trender inom detta området sällan är permanenta. Det som upplevdes som nytänkande och inspirerande för två år sen behöver inte vara det idag. Även om trender inom webbdesign (precis som trender inom andra områden) inte är något man måste/bör följa slaviskt, kan det ändå vara bra att vara insatt i vilken riktning webben är påväg för att på så vis kunna skapa moderna, konkurrenskraftiga hemsidor som optimerats för såväl användare som ny teknik.

Här har jag sammanställt en lista över de trender som av flera tidningar och bloggar anses vara som kommer att slå störst under 2014 och som jag tänkte skriva lite mer om.

1. Flat Design

en-EMEA_L_Win_8_3ZR-00005_RM1_mnco

Flat design var en av de största trenderna under 2013 och förutspås vara en fortsatt stark trend under 2014. Det påbörjades med Microsoft produkter och framför allt Windows 8. Flat design innebär till största delen att man undviker att använda överflödig dekoration som exempelvis skuggor, texturer, överdrivna färgövergångar och 3D-effekter. Man fokuserar istället på typografi, layout samt användning av form och färger. Tanken är att skapa en design i två dimensioner, utan att förlora den funktionalitet som ett “vanligt” gränssnitt innebär (Pratas, 2013). Trenden baseras på minimalism och funktionell design och en av anledningarna till att den är så populär är att den fungerar väldigt bra på alla plattformar och hemsidor som är gjorda med flat design behöver därför inte designas om för specifika plattformar som mobiltelefoner eller läsplattor.

Flat design – An in-depth look
http://www.awwwards.com/flat-design-an-in-depth-look.html
Antonio Pratas beskriver i denna artikel vad flat design är för något och hur det blev så stort på webben. Han går även igenom hur man som designer kan komma igång med flat design.

Fltdsgn
http://fltdsgn.com/
Inspirationssida där mängder av hemsidor skapade med flat design finns att hitta.

2. Nya och annorlunda typsnitt

wwwminoncomtren-full

Då vi inte längre är begränsade till ett fåtal typsnitt som fungerar i de olika webbläsarna har mängder av nya fonter och tjänster där du kan ta del av dom kommit. Numera kan man använda i princip vilket typsnitt som helst på webbplatser utan att de moderna webbläsare får problem. 2014 tros bli ett spännande år när det gäller nya kommande typsnitt. Man ser även oftare att designers använder sig av “personliga typsnitt” för att uttrycka sin egen stil (Turner, 2013:2).

Webfonts Gallery
http://www.webfontsgallery.com/
På webfonts gallery har man samlat massor av webbsidor som använder sig av typografi på ett extra kreativt sätt. Perfekt för inspiration!

Font Squirrel
http://www.fontsquirrel.com/
Här finns en mängd fonter samlade, samtliga är gratis och fria att använda både privat och kommersiellt.

Google Fonts
http://www.google.com/fonts
Om någon mot förmodan skulle ha missat Google fonts vill jag tipsa om denna sida som ger tillgång till hundratas olika typsnitt som är optimerade för webben och dessutom är supersmidiga att använda.

3. Långa, scrollbara sidor

scroll17

Vi har blivit allt bekvämare med att scrolla genom webbsidor för att ta del av mer information vilket flera webbdesigners har lärt sig att dra nytta av. Långa scrollbara sidor i sig är inget nytt fenomen men till skillnad från förr då man ofta stötte på långa sidor fullspäckade med innehåll går trenden nu snarare åt att lämna mycket luft kring elementen på en sida och på så vis presentera innehållet på ett mer organiserat, enklare sätt (Asgerally, 2012)

Trends in webdesign: Long scrolling pages and sticky navigation
http://www.usability101.net/2012/06/trends-long-scrolling-pages-and-sticky-navigation/
Yusuf Asgerally tar i denna artikel kortfattat upp hur man kan tänka kring en lång, scrollbar sida. Bland annat skriver han om vikten av en fungerande navigation och om hur man på ett lättförståeligt sätt presenterar innehållet.

18 websites that take scrolling to the next level http://webdesignledger.com/inspiration/18-websites-that-take-scrolling-to-the-next-level
Här presenteras 18 sidor som tagit scrollfunktionen ytterligare ett steg.

 4. Enkla färgscheman

Screen-Shot-2013-12-16-at-6.17.39-PM

Under 2014 kommer det bli allt vanligare att använda sig av ett enkelt färgschema, där man håller sig till endast en eller två olika färger. En ny trend är att använda en ljus och ren bakgrundsfärg och sedan endast svarta och vita element ovanpå. Effekten är minimalistisk och användarvänlig och gör sig dessutom bra på mindre skärmar (Taheri, 2014). Pantone har utsett orkidélila till årets färg, men åsikterna bland webbdesigners när det gäller hur välanvänd den kommer att vara verkar vara delade.

Här kan du se årets färg:
http://www.pantone.com/pages/index.aspx?pg=21133&from=hpbanner

5. Att utnyttja sin “Hero Area”

Screen-Shot-2013-12-16-at-5.37.42-PM-520x330

Hero Area kallas den sektion av hemsidan som är den första som man som besökare stöter på. Tidigare har det varit vanligt att utnyttja detta utrymme med någon typ av bildspel som ofta presenterar andra delar av sidan som man vill lyfta fram. Nu ser man allt oftare sidor som istället med hjälp av några få, stora element använder detta uttrymme för att ge en stilren och tydlig introduktion till vad deras verksamhet ägnar sig åt (Hoag, 2013).

6. Video istället för text

video-instead-of-text1-1024x774

Att byta ut en del av textinnehållet på en sida mot en video blir allt mer populärt på webben, särskilt på sidans “Hero Area”. Videos blir allt enklare att producera och gör ofta en hemsida mer dynamisk (Hoag, 2013). Många gånger underlättar det också för besökaren att förstå någonting som annars skulle behöva skrivas ut i långa textstycken (Turner, 2013). Viktigt att tänka på är att man inte använder för tunga filer, då detta kan göra att sidan tar för lång tid att ladda.

7. Responsiv webbdesign

fd884e2753b0e64260ddc485b32925e2(1)

Responsiv webbdesign är vid det här laget inget nytt koncept, däremot bör det inte längre ses som ett valbart alternativ som vissa hemsidor har utan snarare som en standard (Bacic, 2014). Flera av de trender som jag redan tagit upp, som exempelvis flat design och långa, scrollbara sidor är optimerade för att passa på mindre enheter. Det blir allt populärare att designa med ett s.k. “mobile-first”-tänk, det vill säga att man istället för att utgå ifrån en datorskärm när man skapar sin design istället börjar med att göra en design som anpassats för en mobil och sen succesivt utökar denna till större plattformar (Johnson, 2013). Man bör inte vara rädd för att plocka bort och/eller lägga till element på sidan baserat skärmstorlek och enhetstyp. Det handlar inte bara om att ändra bredden och storleken på layouten, utan snarare om att optimera sidan på alla tänkbara sätt för olika enheter och skärmstorlekar för att förbättra användarupplevelsen så mycket som möjlig (Bacic, 2014).

Mitt arbete om responsiv webbutveckling:
http://media.hv.se/kurser/vfu1/responsiv-webbutveckling/

 Källförteckning:

Bacic, Haris (2014). 3 Major Web Design Trends For 2014. [Elektronisk] Tillgänglig: http://www.forbes.com/sites/allbusiness/2014/01/14/3-major-web-design-trends-for-2014/2/ [2014-01-23]

Hoag, Steven (2013). 2014 – Three web design trends to watch. [Elektronisk] Tillgänglig: http://www.fasttrackteam.com/2014-three-web-design-trends-to-watch.aspx [2014-01-23]

Johnson, Joshua (2013). Mobile First Design: Why It’s Great and Why It Sucks. [Elektronisk]. Tillgänlig: http://designshack.net/articles/css/mobilefirst/  [2014-01-21]

Pratas, Antonio (2013). Flat Design – An in-depth look [Elektronisk]. Tillgänglig: http://www.awwwards.com/flat-design-an-in-depth-look.html [2014-01-20]

Taheri, Maryam (2014). Web design trends for 2014 [Elektronisk]. Tillgänlig: http://webdesignledger.com/trends-2/web-design-trends-for-2014 [2014-01-22]

Turner, Amber (2013). 10 web design trends you can expect to see in 2014. [Elektronisk] Tillgänglig:http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/1/ [2014-01-21]

 

Responsiv webbutveckling

– Hur man kan effektivisera sitt arbete med responsiv webbutveckling.

Av Matilda B, Dig11

Nya tekniker och standarder dyker ständigt upp i vår vardag. Webbläsare blir allt snabbare och dagligen dyker nya enheter upp i olika sorters storlekar och med olika kapacitet när det kommer till åtkomlighet för webben.  Men samtidigt som marknaden för nya enheter expanderar återstår även användningen av äldre enheter och webbläsare. Detta gör webben till en väldigt ostabil och universal miljö (Kadlec, 2013:2).

I början av 2000-talet var det endast några få mobiltelefoner som klarade av att erbjuda användaren tillgång till internetsidor. Användningen blev väldigt begränsad och det var inte fören 2007 då Apple släppte sin originalversion av iPhone som användare verkligen fick tillgång till den ”fulla webben” i en mobil enhet (Kadlec, 2013:4-5).  Sedan dess har användningen av mobila enheter på webben mer eller mindre exploderat och i augusti 2013 hade 17,4% av den totala webbtraffiken under året skett via en mobiltelefon (Fox, 2013:1).

Mobiltelefoner är dock inte den enda typ av enhet som har tagit över marknaden. Tablets och surfplattor blir allt vanligare och det finns beräkningar om att försäljningen av tablets under 2015 kommer att vara i närheten av 49 miljarder dollar, vilket också gör dessa till en viktig marknadsgrupp vid webbdesign (Kadlec, 2013:5).

Med en ständigt expanderande marknad för enheter och skärmstorlekar finns det ett växande behov av att anpassa sin design efter dessa. Detta kan göras genom responsiv webbdesign, som handlar om att anpassa en webbplats utseende efter storleken på användarens skärm. På en mindre skärm, till exempel på en mobiltelefon eller surfplatta blir bilderna mindre och webbplatsen smalare medan den på en stor skärm visar större bilder och i full bredd. Det bygger på en mer flexibel strategi vid designen av en sida som ska fungera på olika enheter och med olika operativsystem. Detta tankesätt är alltså inte begränsat till mobila enheter utan handlar mer om en förnyad inriktning på innehåll och dess presentation.

Viewport meta tagg och CSS3 media queries

Responsiv webbdesign tillåter en webbsida att anpassa sig till olika skärmupplösningar och enheter utan att man behöver använda sig av en egen domän eller underdomän för exempelvis mobiler. Detta är möjligt tack vare viewport meta taggar och CSS3 media queries.

Viewport

Smartphone webbläsare försöker som standard att låtsas vara högupplösta skärmwebbläsare och visar således en sida på samma sätt som om användaren hade öppnat den på en större skärm. Detta ger en så kallad överblicksbild av sidan och resulterar i små texter som användaren sedan får zooma in på för att läsa.

Detta är något man med responsiv design vill undvika och då behöver man lägga in en så kallad viewport meta tagg i sin <head>-taggen för att få mobila webbläsare att förstå att de ska skala om sidan så att den bättre passar för aktuell skärm (Firdaus, 2013:8).

Så här ser en viewport meta tagg ut:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Att värdet på initial- och maixmumskalan är satt till 1 kommer att resultera i att webbläsare tillåts skala upp sidan 100% större. Att bredden är satt till ”device-width” kommer att göra att skalan uppdateras när användaren vänder på enheten och får en ny bredd.

För den som vill veta mer om viewport meta taggar så finns det en tutorial av Ian Yates om detta på TutsPlus:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

CSS3 media queries

För att sidan ska anpassas efter olika skärmstorlekar använder man sig av media queries som läggs in i css-koden med en särskild tagg kallad ”@media” som läser av skärmens bredd och sedan talar om hur css-koden ska förändras i förhållande till den bredden. Det fungerar alltså som brytpunkter och ger en möjlighet att exempelvis flytta eller förminska ett element på sidan på alla skärmar som är mindre än en viss storlek.

Här är ett exempel på hur det ser ut när jag använder mig av media queries:

mediaq

De brytpunker jag använder är <1199px, <979 och <767 vilket gör att sidan kommer att anpassas specifikt efter både stående och liggande läsplattor samt mobiltelefoner.  Media queries placeras längst ner i css-koden och sedan är det bara att skriva i de element som ska förändras i en viss storlek. För egen del brukar jag spara media queries tills jag är klar med resten av koden. Det är först när jag sätter igång att testa hur de olika elementen ser ut på mindre skärmar som jag ser vilka eventuella ändringar som behöver göras i media queries.

Ramverk för responsiv design

Även om det är möjligt att skapa en responsiv design själv från grunden är detta väldigt tidskrävande och många gånger inte lika effektivt som att använda ett färdigt ramverk (Firdaus, 2013:15).

Under min praktik har jag arbetat med Twitter Bootstrap som är ett intuitivt och kraftfullt front-end ramverk som innehåller ett flertal verktyg för att förenkla och standardisera strukturen och uppbyggnaden av en sida. Bootstrap grundades av Mark Otto och Jacob Thornton 2010 som då arbetade som utvecklare på Twitter och släpptes som open source under 2011. Det innehåller ett flertal fördefinierade element som ofta används som bland annat knappar, formulär, diagram, navigation, typografi och ikoner som man sedan kan styla om efter eget val samt ett antal jQuery-plugins (Firdaus, 2013:15).

Bootstraps struktur bygger på ett 12-kolumnigt gridsystem, vilket leder till en 940px bred container. Med en responsiv css-fil till anpassas kolomnerna så att de är från 724px och 1170px bred beroende på användarens skärmstorlek. För skärmar som är mindre än 767px blir kolumnerna ”flytande” och staplas istället vertikalt (Bootstrap, 2013). Man kan om man vill välja att kolumnerna är flytande även i de högre upplösningarna, skillnaden blir då att kolumnerna räknas om till procent istället för pixlar. Det går även att ändra max-bredden på kolumnerna till mer än 1170px manuellt samt att låta ett element täcka hela skärmen ända ut till kanterna.

För mer information om hur man använder Bootstrap kan jag rekommendera deras hemsida: http://getbootstrap.com/ där man också kan hämta Bootstrap kostnadsfritt.

För en mer utförlig introduktion till hur man kommer igång och använder Bootstrap finns även en tutorial på TutsPlus som är skapad av David Cochran: http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/

En sak som kan vara bra att tänka på redan när man börjar skissa på sin sida och framförallt när man skapar designen i Photoshop är att ladda ner en bild på deras 12 kolumner och placera överst i sin PSD-fil då man på så sätt förenklar arbetet med koden genom att man direkt ser hur många kolumner ett visst element behöver sträcka sig över.  En annan sak som jag lärt mig under praktiken är att man helt ska försöka undvika att specificera bredd i pixlar på element inom kolumnerna. Detta kommer att ställa till det då man vid mindre upplösningar har flytande kolumner eftersom de specificerade elementet inte kan tvingas ner och bli mindre. Vill man ha en viss bredd är det istället bättre att försöka uppnå denna genom att använda sig av paddings.

bootstrap

Less

Bootstrap använder sig av LESS, som är en CSS-kompilator. Enkelt uttryckt kan LESS komponera CSS på ett kraftfullare sätt. LESS gör det bland annat möjligt att använda variabler och funktioner, precis som i olika programmeringsspråk såsom JavaScript och PHP, som man sedan kan anropa för att använda. Jag tänkte beskriva några av de funktioner LESS erbjuder och hur de används:

Variables
Variabler tillåter dig att ange värden som ofta används på ett och samma ställe. Du kan sedan anropa dessa värden i resten av stilmallen och skulle du i ett senare skede vilja ändra på alla dessa värden behöver du alltså endast byta ut en rad med kod. Bilden nedan visar ett exempel på variabler. Har jag en specifik färg som jag vill använda ofta på sidan skulle jag kunna lägga in den på @main-color och sedan längre ner i koden använda den som exempelvis bakgrundsfärg endast genom att skriva:

background-color: @main-color;

lessvar

Mixins
Mixins påminner om variabler, men gäller istället för enskilda värden hela klasser. Skulle jag vilja använda mig av rundade hörn i till exempel min header skulle koden se ut så här:

header {.round}

lessmixins

Jag får alltså samtliga värden som är utskrivna i klassen .round att anropas till min header.

Nested Rules
LESS tillåter dig att nästla taggar i varandra. Istället för att skriva långa rader med kod för att exempelvis få en p-tagg som ligger i headern att få en viss stil kan man istället nästla in dessa. Bilden nedan visar exempel på hur en enklare nästning kan se ut.

lessnest

 

Detta är alltså bara några få av de fördelar som LESS erbjuder. På deras hemsida, http://lesscss.org/ finns en guide över samtliga funktioner och efter att ha arbetat i LESS under min praktik är min personliga åsikt att det är en otroligt lättarbetad och tidseffektivt kompilator.

Eftersom webbläsarna inte kan läsa in LESS-filer behöver dessa konverteras till CSS-filer. Det finns flera program som klarar av detta, jag använder WinLess som är ett av flera kostnadsfria alternativ http://winless.org/. Genom att skapa en LESS-fil och en CSS-fil med likadana namn och sedan placera dem i en gemensam mapp som man laddar upp i WinLess konverterar programmet automatiskt om LESS-filen och skriver ut den korrekt i CSS-filen.

Design

Att göra en responsiv hemsida handlar inte bara om att krympa innehållet så att det passar olika skärmar utan gränssnittet behöver designas om för de olika plattformarna. Många gånger fungerar sidan efter att man har använt sig av ett ramverk bra på läsplattor utan att man behöver göra några större förändringar manuellt, men när det är dags att se över mobilversionen av sidan är det ofta ett par saker som behöver justeras. Sabina Idler (2013) har listat några viktiga punkter som man som designer bör tänka på när man skapar en responsiv sida.

Prioritera innehållet
Det första man bör göra när det är dags att göra sin hemsida responsiv är att prioritera sidans innehåll. Man bör försöka sätta sig in i vad för typ av situation användaren befinner sig i när denne besöker sidan ifrån en viss typ av plattform och organisera innehållet därefter. Eftersom den sida som kommer att visas på mobiltelefoner är betydligt smalare än sidan som visas på en datorskärm blir den också längre då innehållet staplas för att inte behöva krympa för mycket. För att inte användaren kan ska behöva scrolla allt för länge kan man därför i vissa fall plocka bort delar av sidans innehåll för att inte riskera att de delar av sidan som man prioriterar missas av användaren som i värsta fall inte tittar igenom hela sidan. Detta är dock inte alltid ett alternativ och då kan man istället arbeta med att placera om innehållet för att förenkla för mobilanvändare. Detta är något vi på min praktikplats ofta arbetar med. Exempelvis brukar vi placera ut kontaktuppgifter till företaget högt upp då detta är något som vi vill att användaren snabbt ska få tillgång till utan att behöva scrolla igenom en hel sida och även för att man som mobilanvändare på en sida inte får samma överblick av en sida som en datoranvändare och därför inte redan innan man har scrollat igenom hela sidan vet om kontaktuppgifterna finns med i exempelvis footern på varje sida.

Hantera ett begränsat utrymme kreativt
Då det finns mindre utrymme på en mobilskärm än på datorn är det givetvis viktigt att man som designer reorganiserar allt relevant innehåll så att det passar efter vad utrymmet tillåtet. Samtidigt är det viktigt att sidan följer en tydlig grafisk linje oavsett skärmstorlek för att försäkra besökarna om att de befinner sig på samma sida trots att de andra besöket valt en annan plattform.

Förenkla navigationen med en responsiv meny.
Eftersom skärmutrymmet på en mobiltelefon är begränsad och det dessutom inte går att utnyttja hovereffekter för att förenkla för användaren behöver ofta sidans meny designas om. En populär lösning som vi nästan uteslutande använder på min praktik är så kallade ”drop-down menyer”. Denna typ av meny ger möjlighet att dölja ett komplext innehåll i olika lager så att det inte tar upp för mycket utrymme när man kommer in på sidan. Menyn ska precis som högt prioriterat innehåll placeras därefter, alltså ofta med fördel i toppen av sidan. Tänk även på att länkar och andra klickbara element ska anpassas efter att det är ett finger som ska komma åt att trycka. För den som vill läsa mer om responsiv navigation kan jag rekommendera http://designmodo.com/ux-responsive-design-navigation/ där Marcin Treder (2013) ger flera tips på hur man kan tänka kring responsiv navigation samt beskriver hur man praktiskt skapar en.

Mobile First

Joshua Johnson beskriver en ny trend inom webbdesign som kallas för ”mobile first” och går ut på att man istället för att som man traditionellt brukar göra utgår ifrån skärmen i första hand när man skapar en design istället börjar med att göra en design för mobilen och sedan succesivt utökar denna till större plattformar.

Begreppet skapades av Luke Wroblewski som själv beskriver varför man bör följa denna strategi:

Mobiltelefoner ökar ständigt i både antalet mängd och i antalet användare för att få tillgång till internet.

Mobilen tvingar utvecklingsteamet att endast fokusera på det allra viktigaste innehållet på en webbsida.

Genom att bygga hemsidor från ett mobile-first tänk gör man det möjligt för utvecklingsteamet att utnyttja smartphones inbyggda funktioner som en webbläsare inte har tillgång till som exempelvis geolocation (ett API som möjliggör för applikationer att identifiera användarens geografiska position och överföra koordinaterna till en karta), att byta layout beroende på hur enheten hålls samt ett multi-touch användargränssnitt (obegränsat antal samtidiga beröringar på en skärm) (Kadlec, 2013:160).

Även Johnson (2013:1) framhåller flera fördelar med ett mobile-first tänk men lyfter samtidigt fram att man i sin design blir betydligt mer begränsad jämfört med om man designar för en större skärm vilket han anser är den största nackdelen.

På min praktikplats är detta inget vi använder oss av trots att samtliga webbplatser som vi producerar är responsiva. En av de främsta anledningarna till detta tror jag är att det är svårt för kunden att godkänna en design enbart utifrån hur den kommer att visas på en telefon. Ett annat problem är att vi när vi skapar designen inte har full kontroll över innehållet då det kan tillkomma texter eller bilder i efterhand och designen därför måste anpassas efter detta. En bra kompromiss för min egen del är att hela tiden ha med i tanken att sidan senare ska gå att anpassa för mindre skärmar, även om jag ändå gör designen för skärmen först.

Slutsats

Jag ser det som en självklarhet att de sidor som skapas idag bör vara responsiva och efter att ha arbetat med responsiv webbdesign under praktiken är min personliga åsikt att det med rätt verktyg inte är svårt att skapa en responsiv sida rent tekniskt. Tvärtom underlättar de verktyg jag nämnt arbetet med kodningen av sidan även i större upplösningar och när jag själv väl hade fått in till exempel tänket med att arbeta i kolumner är det svårt att gå tillbaka till att göra det utan.

Svårigheten enligt mig ligger snarare i att skapa en användarvänlig design. Då det fortfarande är ett väldigt nytt område finns det inte många klara riktlinjer för hur man bör tänka kring gränssnittet vilket ställer högre krav på designern.  När fokus inte längre behöver ligga på den tekniska biten tror jag istället att detta ämne kommer att diskuteras i större utsträckning framöver, vilket jag även tycker att trenden ”mobile first” är ett tydligt tecken på.

Källförteckning

Bootstrap (2013). Bootstrap – Getting started. [Elektronisk]. Tillgänglig: http://getbootstrap.com/getting-started/ [2013-10-14]

Firdaus, Thoriq (2013). Responsive web design by example – beginners guide. Birmingham: Packt Publishing Ltd. E-bok.

Fox, Zoe (2013).  Mashable – 17.4% of Global Web Traffic Comes Through Mobil. [Elektronisk] Tillgänglig: http://mashable.com/2013/08/20/mobile-web-traffic/ [2013-10-10]

Idler, Sabina (2013). 10 Tips How To Handle Responsive Navigation Menus Successfully. [Elektronisk] Tillgänglig: http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/ [2013-11-18]

Johnson, Joshua (2013). Mobile First Design: Why It’s Great and Why It Sucks. [Elektronisk]. Tillgänlig: http://designshack.net/articles/css/mobilefirst/ [2013-11-14]

Kadlec, Tim (2013). Implementing Responsive Design – Building Sites for an Anywhere, Everywhere Web. Berkeley: New Riders Publishing.

Page 2 of 2

Powered by WordPress & Theme by Anders Norén