Att kravställa webbplatser är inte så enkelt som man lätt kan tro. Det vet alla som någonsin varit involverad i ett webbprojekt. Har du tidigare kravställt en webb i EPiServer 6 är det nu ett helt annat tänk i EPiServer 7.

Hur gör du i tidigare EPiServer ?

I EPiServer 6 är vi vana vid att vi tar fram skisser för de olika sidor som vi vill ha på vår webb. Dessa har vi som underlag när vi pratar om vad vi vill bygga. Det är allt från Startsida, Understartsida, Vanlig webbsida, Sök m.m. I dessa sidor placerar vi olika element som en utvecklare sedan skapar sidtyper för, så att redaktörer kan lägga in innehåll i sidan. De leder ofta till att en webbplats i tidigare versioner av EPiServer har väldigt många sidtyper som förvirrar redaktörerna mer än vad de gör nytta. (Med lite mer tankearbete och fokus på redaktören kan detta ofta undvikas, men det görs/gjordes sällan.)

alloy-mockup_2  -sidtyp

Hur gör du i EPiServer 7?

I EPiServer 7 ska vi inte tänka på samma sätt. Vi ska inte skapa en sidtyp för varje typ av sida som vi vill ha på webbplatsen. Vi ska istället börja med att fundera på vilka ytor vi vill göra flexibla och vad vi ska kunna placera i dessa ytor. I dessa ytor ska vi kunna placera olika block. Läs gärna ett tidigare inlägg om block om det är okänt för dig.

I kravställningen ska vi fundera på vilka block vi ska ha och hur de ska se ut när vi placerar dem i olika ytor. Hur ska blocket se ut när det placeras på full bredd i förhållande när det placeras på halva bredden osv. I en “normal” webbplats, bör det kanske finnas max 4-5 sidtyper. Resten bör vara block som gör att makten för interaktionen istället ligger hos redaktören. Det ger en enorm skillnad eftersom vi nu väldigt enkelt kan göra olika varianter av sidor och med hjälp av A/B tester i CMO kan mäta vilken som ger bäst resultat. Kravställer vi rätt från början har vi långsiktigt mycket mindre behov av en utvecklare för minsta ändring.

 

mockup

En skiss som den ovan kan när redaktören får göra sitt jobb resultera i olika saker.

-mockup_5_2   mockup_2_2

 

Mobile first

Oavsett om du ska bygga i en äldre version av EPiServer eller i version 7 och planerar att bygga med responsiv design, ska du kravställa för mobilen först. Börja med att fundera på hur interaktionen ska ske i mobil. Vilka element ska finnas och hur ska det fungera att navigera med hjälp av mobilen? Hur ska blocken se ut och bete sig i mobilen? De olika delarna placerar ni sedan ut på en platta och skärm och där kan ni sedan lägga till fler block som kanske inte alls syns i mobilen.

Anledningen till att vi tänker mobilen först är för att det är så mycket enklare att lägga till i förhållande till att ta bort. Om vi börjar med en begränsad yta och tänker ut en bra interaktion där, så är arbetet ganska enkelt att göra interaktionen ännu bättre på plattan/skärmen. Det är däremot enormt svårt att ta bort information från plattan/skärmen om vi gör arbetet i den omvända ordningen.

mockup_6_2

Vad innebär detta?

I praktiken innebär det framförallt att vi inte längre behöver spendera mycket tid på att komma fram till exakt vilken funktion vi vill ha, i vilket område, i förarbetet. Det innebär också att vi inte behöver skapa 100-tals olika designskisser som vi ska fatta beslut om. Vi gör istället ramverket och sedan kan vi designa de olika blocken så vi kan testa och lägga på och av dem i olika ytor. Mycket av själva interaktionsarbetet gör vi när webbplatsen är på platsen, med hjälp av A/B tester istället för att vi gissar på papper.

I interaktions och designarbetet är det enormt viktigt att man tänker igenom sina bildformat genom hela webbplatsen. Eftersom en bild kan finnas i ett block som i sin tur kan placera på olika platser och i olika mängd så förändras bildernas storlek automatiskt hela tiden. Om vi har olika proportioner på våra bilder kommer det inte se så bra ut. Vi måste därför ha väl genomtänkta bildproportioner genom hela webbplatsen.

Man ska också komma ihåg att man inte måste jobba med block på det här sättet och det ska inte heller göras till absurdum. Det är en enormt fin linje mellan vad som är flexibelt på utsidan och vad som gör arbetet krångligt för redaktörerna. Var noga med fundera igenom arbetssättet för redaktörerna när ni tittar på hur ni ska bygga upp webbplatsen.

I nästa version av EPiServer (7.5) har jag förstått att vi dessutom kommer ha möjlighet dela upp en blockyta i fler ytor direkt från redigeraläge, vilket är riktigt trevligt för oss redaktörer. Men tänk på att det kräver ännu mer jobb i kravställningen, eftersom vi måste föreställa oss fler olika varianter som vi inte kan styra.