Triggerfish har idag haft ett frukostseminarium om webbtrender 2013 under ledning av Jakob, Per och Christian. Bland besökarna fanns partners och byråer inom reklam och webb.

För två år sedan hade vi en liknande presentation och mycket av det vi pratade om då är fortfarande aktuellt. Utöver nedanstående webbtrender gav vi under seminariet tips på bra sidor som vi gillar, berättade mer om hur vi på Triggerfish arbetar samt diskuterade olika frågor. Se hela presentationen med exempel på webbtrender 2013.

Responsive web design (RWD)

En adaptiv, följsam design som anpassas efter mobiltelefoner, iPads och andra enheter. Syftet med responsiv design är att webbplatsen hela tiden anpassar sig efter storleken på skärmen vilket innebär att man skapar en mer lättnavigerad och användarvänlig webbplats som alltid ser bra ut, oavsett vilken enhet du använder för att surfa.

Denna trend har förändrat vårt arbete mest i år och vi lägger lika mycket jobb med att göra webbplatsen responsiv som vi lägger på den vanliga uppbyggnaden av webbplatsen. En responsiv design tycker vi är ett måste idag.

Parallax scrolling

Denna trend härstammar från en gammal teknik i gamla tv-spel och datorer där t.ex. bakgrunder med platt grafik görs med 3D-effekt.

Med parallax scrolling kan man med olika element i olika hastigheter skapa djup på webbplatsen. Utmaningen med detta är att komma fram till vad som ska hända med grafiken, hur den ska röra sig och i vilken hastighet.

Fixed navigering

Används för att sätta en fast positionering av navigeringen, oftast menyn i sidhuvudet. Detta innebär att när du scrollar kommer t.ex. huvudmenyn att följa med vilket minskar överdrivet scrollande upp och ner när man vill förflytta sig på olika sidor.

Fixed navigering är bra att använda när man har mycket innehåll och när det finns ett behov av att användaren lätt ska hitta och kunna navigera sig vidare.

Megamenyer

Stora menyer som tar upp hela bredden på webbplatsen. Detta är användbart på webbshopar där man ofta har många kategorier och sidor som annars ger onödigt många klick.

Megamenyer kan dock vara ett problem vid en liten skärm i de fall där man har många menyalternativ. E-handelssystem är i regel knepiga att tillämpa responsiv design på, i dessa fall rekommenderas ofta en separat mobil webbplats.

One/single page layout

På webbplatser med single page layout har man allt innehåll samlat på en sida. Detta innebär att sidan saknar ”vanliga” sidladdningar och får på så vis en mer appliknande upplevelse.

Webbplatsen är indelad i olika sektioner som man hoppar till när man klickar runt och man hamnar på så vis aldrig på en ny sida. Denna layout fungerar bra med parallax scrolling.

En utmaning för denna typ av layout är främst SEO i och med att allt innehåll är samlat på en sida. Detta går dock att jobba sig runt genom att låta sidans URL ändras för varje sektion.

En annan utmaning är då kunden vill lägga till nytt innehåll och växa med webbplatsen.

Stora bakgrundsbilder

Att använda en stor bakgrundsbild har blivit en trend som man ser allt oftare. Dessa används ofta för att skapa en känsla av att man är på plats, t.ex. hur det känns när man sitter i restaurangen, hur det är att jobba på företaget osv.

En fördel med den här typen av sidor är att bilderna gör det stora jobbet och det behövs på så vis lite eller ingen grafik.

En utmaning för dessa webbplatser är att använda sig av bilder som inte tar lång tid att ladda. Detta löser man ofta genom att skapa laddningsikoner.

Infinite scroll

Sidor med oändlig scroll där nytt innehåll laddas när man kommer längst ner på sidan. Detta är bra på innehållstunga platser med t.ex. mycket bilder eftersom man slipper dela in sidorna i olika avsnitt, det blir mindre klick och man får mer känsla medans man scrollar ner.

Typografier

Idag finns allt fler typsnittstjänster med bra typsnitt anpassade för webben, t.ex. Google fonts, fonts.com osv. Dessa typsnitt fungerar i alla webbläsare och på alla datorer, man bör dock se upp med typsnitt där svenska Å, Ä, Ö inte fungerar. Man bör även kontrollera att typsnittet ser bra ut i alla storlekar.

Platt design

En stilren, tydlig och enkel design utan djup och toningar.

Sociala medier

Sociala medier används idag allt mer, bland annat för att visa olika feeds som events från Facebook, bildgalleri från Instagram osv. Fördelarna är många – man hittas av fler människor, har lättare att indexeras av Google och man behöver inte bygga något själv.

Integration mot sociala medier finns med i de flesta av våra projekt. En utmaning är att få dessa att bli en del av designen på ett snyggt sätt.