Har du en "mottaglig webbplats"? Detta är en webbplats med en layout som ändras baserat på en besökares enhet och skärmstorlek. Responsiv webbdesign är nu en branschens bästa praxis. Det rekommenderas av Google och hittas på miljontals webbplatser över hela webben. Det finns emellertid en stor skillnad mellan att ha en webbplats som helt enkelt "passar" på olika skärmstorlekar och har en webbplats som är verkligen lyhörd.
Jag ser rutinmässigt att företag redesignar sin hemsida och skriver ut ett pressmeddelande som utmärker deras nya mobilvänliga design. När jag besöker de här sidorna är det som jag ofta hittar en layout som verkligen skala och ändra för att passa på olika skärmar, men det är så långt som de tar upp tanken på lyhördhet. Det här är inte tillräckligt. En verkligt mottaglig webbplats gör mer än bara skala för att passa en mindre eller större skärm. På dessa sidor hittar du också följande viktiga drag.
1. Optimerad prestanda
Ingen gillar att vänta på en webbplats att ladda, och när någon använder en mobilenhet med en anslutning som kan vara mindre än ideal, är behovet av en sida att ladda snabbt, ännu viktigare.
Så hur optimerar du webbplatsens prestanda? Om du börjar med en ny webbplats som en del av en omkonstruktion bör du göra det till en punkt att skapa en prestationsbudget som en del av projektet. Om du arbetar med en befintlig webbplats och inte börjar från början, är det första steget att testa din webbplats prestanda för att se var du står idag.
När du väl har en baslinje av var din webbplats står prestationsvis kan du börja göra nödvändiga förbättringar för att öka nedladdningshastigheten. Ett bra ställe att börja är troligen med webbplatsens bilder. För stora bilder är # 1-skyldige när det gäller långsamma lastningsplatser, så att optimera dina bilder för webbleverans kan verkligen hjälpa din webbplats från en prestationssynvinkel.
Verkligheten är att förbättrad webbplatsprestanda och snabba nedladdningshastigheter är en fördel som alla besökare kommer att uppskatta. Trots allt har ingen någonsin klagat över att en webbplats laddades "för fort", men om en webbplats tar för lång tid att ladda, blir det absolut folk borta om det passar "passar" på deras skärm eller inte.
2. Smart Content Hierarchy
När en webbplats visas på en stor skärm kan du lägga innehåll på flera olika sätt på grund av den stora skärmvärlden som finns tillgänglig. Du kan ofta passa viktiga meddelanden och bilder, nyhetsuppdateringar, händelsesinformation och sidnavigering på skärmen samtidigt. Detta gör att en besökare enkelt och snabbt kan skanna innehållet på hela sidan och bestämma vad som är viktigt för dem.
Detta scenario förändras ganska dramatiskt när du tar den här webbdesignen och omvandlar den till små skärm enheter, som en mobiltelefon. Plötsligt arbetar du med en bråkdel av fastighetsskärmen som du tidigare haft. Det betyder att du måste bestämma vad som kommer att visas först på webbplatsen, vad som kommer att följas, etc. I stället för att allt ses samtidigt måste du bara ha plats för att visa en eller två saker (varav en är sannolikt navigering). Det betyder att hierarkiska beslut måste fattas. Tyvärr bestämmer det ofta vad som kommer först på skärmen, och sedan andra osv är det sättet som själva sidan är kodad. Det är lättast att, när du bygger en lyhörd plats, visa vad som helst först i koden först på skärmen, följt av det andra objektet i kod och så vidare. Tyvärr kan det som är viktigast på en enhet kanske inte vara lika kritiskt på en annan. En verkligt mottaglig webbplats förstår att innehållshierarkin bör förändras beroende på olika situationer och det ska vara smart om vad det visar var.
Förbättringar av CSS-layouttekniker, inklusive CSS Grid Layout, Flexbox och mer, tillåter webdesigners och utvecklare fler alternativ när det gäller att lägga ut innehåll på ett intelligent sätt istället för att hamsträngas av exakt innehållsordning i HTML-koden. Att utnyttja dessa nya layouttekniker kommer att bli ännu viktigare eftersom enhetens landskap, och våra webbplatsers behov, fortsätter att utvecklas.
3. Erfarenheter som tar hänsyn till en enhets styrkor och svagheter
Att hålla sig på ämnet av enheter - varje enhet som någon kan använda för att besöka din webbplats har både styrkor och svagheter som är inneboende för den plattformen. En bra mottaglig webbplats förstår kapaciteter och begränsningar för olika enheter och använder dem för att skapa anpassade upplevelser som passar bäst på vilken enhet en besökare kan använda just nu.
En mobiltelefon innehåller till exempel ett antal funktioner som du inte skulle hitta på en vanlig stationär dator. GPS är ett exempel på en mobilcentrerad funktion (ja, du kan också få generell platsinformation på stationära datorer, men GPS-enheten är mycket mer exakt). Din webbplats kan använda GPS-information för att smidigt skicka en person mycket detaljerad och specifik steg-för-steg-riktningsinformation eller specialerbjudanden baserat på exakt var de är just nu.
Ett annat exempel på den här principen i praktiken skulle vara en webbplats som förstår vilken typ av skärmdisplay du använder och skickar bilder som passar bäst för den visningen. Om du har en skärm med en hög pixeldensitet kan du bestämma att skicka bilder av högre kvalitet till den skärmen. Dessa samma bilder skulle vara meningslösa på en mindre kapabel skärm, men den extra kvaliteten skulle gå vilse medan den extra filstorleken skulle hämtas utan någon verklig anledning.
Riktigt bra lyhörda webbplatser överväger hela användarupplevelsen och arbetar för att skräddarsy den erfarenheten baserad inte bara en enhetstyp eller skärmstorlek, men också andra viktiga aspekter av hårdvaran.
4. Innehåll med kontext
I början fick mottagen webbdesign sitt namn på grund av idén om en webbplatss layout som svarade på olika skärmstorlekar, men du kan svara så mycket mer än bara skärmstorleken. Med hjälp av det tidigare exemplet på att använda enhets styrkor och svagheter kan du använda dem, liksom andra data som datum och tid, för att verkligen anpassa en webbplatsupplevelse.
Föreställ dig en webbplats för en stor mässa händelse. Medan en mottaglig webbplats ändrar layouten på sidorna på webbplatsen till skalan med olika skärmar, kan du också använda datumet för att bestämma vilket innehåll som är viktigast att visa. Om det är tidsperioden före evenemanget, vill du helst visa upplysningsinformation på ett framträdande sätt. Om händelsen faktiskt händer i det ögonblicket, kan registrering inte vara det viktigaste innehållet. Istället kan du bestämma att dagens schema med händelser är mer kritiskt eftersom det är mer relevant för den användarens omedelbara behov.
Om du tar saker ytterligare, kan du knacka in i en enhetens GPS för att avgöra var de faktiskt är på mässan. Du kan ge dem interaktivt innehåll baserat på deras plats, och visa dem i närheten av booths eller sessioner för att komma igång.
5. Tillgänglighet
Det sista exemplet vi ska titta på för hur en webbplats verkligen kan svara på besökarens behov är att tänka på tillgängligheten på webbplatsen. Webbplatser ska kunna användas av så många människor som möjligt, inklusive personer med funktionsnedsättning. Din webbplats ska kunna användas av någon som behöver en skärmsläsare eller annan assisterad programvara för att komma åt innehållet. På så sätt svarar din webbplats på deras behov, eftersom du har säkerställt att erfarenheten, medan den är olika för funktionshindrade besökare, fortfarande är lämplig.
Genom att svara på så många datapunkter som möjligt, och inte bara skärmstorleken, kan en webbplats vara så mycket mer än bara "mobilvänlig". Det kan bli en verkligt lyhörd upplevelse i varje mening av frasen.
