Har du en "lydhør hjemmeside"? Dette er et websted med et layout, der ændres baseret på en besøgendes enhed og skærmstørrelse. Responsive webdesign er nu en industriens bedste praksis. Det anbefales af Google og findes på millioner af websteder på tværs af internettet. Der er dog en stor forskel på at have en hjemmeside, der simpelthen "passer" på forskellige skærmstørrelser og har et websted, der er virkelig lydhør.
Jeg rutinemæssigt ser, at virksomhederne redesigner deres hjemmeside og uddyber en pressemeddelelse, der uddyber dyderne i deres nye mobilvenlige design. Når jeg besøger disse websteder, finder jeg ofte et layout, der faktisk skalerer og ændres for at passe på forskellige skærme, men det er så vidt de tager tanken om lydhørhed. Dette er ikke nok. En virkelig lydhør hjemmeside gør mere end bare skala for at passe til en mindre eller større skærm. På disse websteder finder du også følgende vigtige træk.
1. Optimeret ydeevne
Ingen kan lide at vente på en hjemmeside, der skal indlæses, og når nogen bruger en mobilenhed med en forbindelse, der måske er mindre end ideel, er behovet for et websted til at indlæse hurtigt endnu vigtigere.
Så hvordan optimerer du dit websteds ydeevne? Hvis du starter med et nyt websted som en del af et redesign, bør du gøre det til et point for at oprette et præstationsbudget som led i projektet. Hvis du arbejder med et eksisterende websted og ikke starter fra bunden, er det første skridt at teste dit websteds ydeevne for at se, hvor du står i dag.
Når du først har en basislinje for hvor dit websted står performance-wise, kan du begynde at foretage de nødvendige forbedringer for at øge downloadhastigheden. Et godt sted at starte er sandsynligvis med dit websteds billeder. For store billeder er # 1 synderen, når det kommer til langsom indlæsning, så optimering af dine billeder til weblevering kan virkelig hjælpe dit websted fra et præstationssynspunkt.
Virkeligheden er, at forbedret websiteydelse og hurtige downloadhastigheder er en fordel, som alle besøgende vil sætte pris på. Trods alt har ingen nogensinde klaget over, at et websted er lastet "for hurtigt", men hvis et websted tager for lang tid at indlæse, vil det helt sikkert vende folk væk, om det svarer "passende" på deres skærm eller ej.
2. Smart Content Hierarchy
Når et websted vises på en stor skærm, er du i stand til at lægge indhold på en række måder på grund af den betydelige skærmfast ejendom, der er til rådighed. Du kan ofte tilpasse vigtige meddelelser og billeder, nyhedsopdateringer, hændelsesoplysninger og navigation på stedet på skærmen med det samme. Dette giver en besøgende mulighed for nemt og hurtigt at scanne indholdet på hele siden og bestemme, hvad der er vigtigt for dem.
Dette scenario ændrer sig temmelig dramatisk, når du tager det pågældende website design og transformerer det til små skærm enheder, som en mobiltelefon. Pludselig arbejder du med en brøkdel af skærmens fast ejendom, du havde før. Det betyder, at du skal bestemme, hvad der vises først på webstedet, hvad der følger det osv. I stedet for at alt ses på én gang, har du sandsynligvis kun plads til at vise en eller to ting (hvoraf den ene er sandsynlig navigation). Det betyder, at der skal træffes beslutninger om hierarki. Desværre bestemmer det ofte, hvad der kommer først på skærmen, og derefter andet osv. Er måden selve siden er kodet på. Det er nemmest at vise, hvad der er først i koden først på skærmen, efterfulgt af det andet element i kode og så videre, når du bygger et lydhørt websted. Desværre kan det, der er mest vigtigt på en enhed, ikke være så kritisk for en anden. Et virkelig lydhørt websted forstår, at indholdets hierarki bør ændres afhængigt af forskellige situationer, og det bør være smart om, hvad det viser, hvor.
Forbedringer i CSS-layoutteknikker, herunder CSS Grid Layout, Flexbox og mere, giver webdesignere og udviklere flere muligheder, når det kommer til intelligent at lægge indhold i stedet for at blive hæmmet af den nøjagtige rækkefølge af indholdsområder i HTML-koden. At drage fordel af disse nye layoutteknikker bliver endnu vigtigere, da enhedens landskab, og brugernes behov hos vores brugere fortsætter med at udvikle sig.
3. Erfaringer, der tager højde for en enheds styrker og svagheder
Opholder sig på emnet for enheder - hver enhed, som nogen kan bruge til at besøge dit websted, har både styrker og svagheder, der er forbundet med den platform. Et godt lydhurtigt websted forstår kapaciteter og begrænsninger af forskellige enheder og bruger dem til at oprette tilpassede oplevelser, der passer bedst til den enhed, som en besøgende måske bruger i øjeblikket.
For eksempel indeholder en mobiltelefon en række funktioner, som du ikke ville finde på en traditionel stationær computer. GPS er et eksempel på en mobilcentrisk funktion (ja, du kan også få generelle placeringsoplysninger på desktops, men enhedens GPS er meget mere præcis). Dit websted kan bruge GPS-oplysninger til at sende en person meget detaljerede og specifikke trinvise retningsoplysninger eller tilbud baseret på præcis, hvor de er i øjeblikket.
Et andet eksempel på denne rektor i praksis ville være et websted, der forstår, hvilken slags skærmbillede du bruger og sender billeder, der passer bedst til det display. Hvis du har en skærm med en høj pixeldensitet, kan du beslutte at sende billeder af højere kvalitet til skærmen. Disse samme billeder ville være meningsløse på en mindre klar skærm, men den ekstra kvalitet ville gå tabt, mens den ekstra filstørrelse ville blive downloadet uden nogen egentlig grund.
Virkelig store lydhøre websteder overvejer hele brugeroplevelsen og arbejder for at skræddersy den erfaring, der ikke kun er baseret på en enhedstype eller en størrelse på skærmen, men også andre vigtige aspekter af hardwareen.
4. Indhold med kontekst
I starten fik modtagende webdesign sit navn på grund af ideen om et websteds layout svarende til forskellige skærmstørrelser, men du kan reagere så meget mere end bare skærmstørrelse. Baseret på det foregående eksempel på at bruge en enheds styrker og svagheder, kan du bruge dem såvel som andre data som dato og klokkeslæt for virkelig at tilpasse en webstedsoplevelse.
Forestil dig en hjemmeside til et stort messearrangement. Mens et lydhurtigt websted ændrer layoutet på siderne på webstedet til skalering med forskellige skærmbilleder, kan du også bruge datoen til at bestemme hvilket indhold der er vigtigst at vise. Hvis det er tidsrummet før arrangementet, vil du sandsynligvis fremhæve registreringsoplysninger fremtrædende. Hvis begivenheden rent faktisk sker i øjeblikket, er registreringen muligvis ikke det vigtigste indhold. I stedet kan du bestemme, at dagens tidsplan for begivenheder er mere kritisk, da det er mere relevant for brugerens umiddelbare behov.
Hvis du tager tingene lidt længere, kan du få fat i en enheds GPS for at bestemme, hvor de rent faktisk er på messen. Du kan give dem interaktivt indhold baseret på deres placering, og vise dem i nærheden booths eller sessioner om at komme i gang.
5. Tilgængelighed
Det endelige eksempel, vi vil se på, hvordan et websted virkelig kan reagere på en besøgendes behov, er at tænke på tilgængelighed på hjemmesiden. Websites skal kunne bruges af så mange mennesker som muligt, herunder handicappede. Dit websted skal kunne bruges af en person, der har brug for en skærmlæser eller anden assisteret software til at få adgang til indholdet. På denne måde svarer dit websted til deres behov, fordi du har sikret, at oplevelsen, mens den er forskellig for handicappede besøgende, stadig er relevant.
Ved at reagere på så mange datapunkter som muligt, og ikke kun skærmstørrelse, kan et websted være så meget mere end blot "mobilvenligt." Det kan blive en virkelig lydhør oplevelse i enhver forstand.
