Inkluder betinget lasting i designet ditt for en bedre UX

Flere nettsteder faller bak mobilbrukskurven ved å ikke inkludere Responsive Web Design (RWD), Progressive Enhancement (PE) og / eller Adaptive Web Design (AWD) elementer. Disse nettstedene gir dårlige brukeropplevelser (UX) og til slutt høyere avvisningsrate på nettstedet.
Hvis nettstedet ditt ikke inkluderer RWD-design ennå, bør du vurdere ideen om betinget lasting for responsive design, som Jeremy Keith først skrev om i desember 2011.

Hva er betinget lasting?

Betinget lasting er prosessen med å bryte ut relevante deler av innholdet i sine egne HTML-seksjoner, og deretter laste dem inn bare når brukeren blir bedt om det eller når visse nettlesingsbetingelser er oppfylt, for eksempel når en skjermdimensjon blir oppdaget på en mobil enhet.

Som del av et større mål om å gi responsive brukeropplevelser på tvers av alle enheter, kan betinget lasting organiseres sammen med et innholdshierarki-skjema i tillegg til en progressiv interaksjons-teknikk for avsløring, som har blitt brukt i applikasjonsutvikling i mange år. Du vil alltid prioritere innholdet ditt for å optimalisere form og funksjon; for eksempel er det ikke nødvendig å laste hele websider inn i nettleserskjermene når brukere bare ser etter en bestemt del av innholdet.

Når innholdet er prioritert, kombinerer neste trinn å lage innholdshierarkiet med hvordan den progressive avsløringen kontrolleres; til slutt vil disse beslutningene være opp til innholdseierne. Likevel vil du sørge for at det mest relevante materialet vises på alle enheter, følg det ved neste nivå av innholdsbelastning, og så videre for hele nettstedet ( figur A ).

Figur A

Dette bildet er en representasjon av hvordan nettstedets innhold skal / kunne organiseres når du bruker et betinget lastehierarki.

Det er ikke så vanskelig som du kan forestille deg å innlemme betinget lasting som en del av de samlede mobil- og enhetsagnostiske webdesignprosjektene. Mediesøk kan legges til i CSS som lar deg målrette stiler basert på en rekke enhetsegenskaper, for eksempel skjermbredde, retning og oppløsning.

Et eksempel på betinget lasting

Det er flere eksempler på best bruk av tilfeller av nettsteder som bruker betinget lasting i sine mobile skjermer; spesielt Wikipedia tilbyr en utmerket standard for presentasjon av det mobile innholdet. Wikipedia inkorporerer betinget lasting ved å presentere innholdet på toppnivå: tittel, en interaksjonsnavigasjon, underoverskriften, hovedsiden for sidelinjen (inkludert et bilde hvis det er gitt), relevant statistikk og introduksjonen. Figur B viser innholdet om slaget ved Goliat som vist på en iPhone ved hjelp av Chrome-nettleseren.

Figur B

Når du ruller forbi det innledende innholdet, får du den progressive avsløringen av artikkelens underoverskrifter ( figur C) . Underoverskriftene for Bakgrunn, Prelude osv. Gir brukeren muligheten til å lese mer med et enkelt trykk på berøringsskjermen for å åpne den aktuelle delen. Dette gjør at brukerne bare får tilgang til informasjonen de ønsker.

Figur C


Figur D viser en del av det som ble vist da jeg valgte Prelude.

Figur D

Tilleggsressurser

Lær mer om betinget lasting og gradvis avsløring ved å lese disse ekstra ressursene fra TechRepublic og andre kilder.

  • Hvordan komme i gang med Responsive Web Design - Jeg forklarer konseptet og metodene bak Responsive Web Design, sammen med noen enkle eksempler som hjelper deg å bli kjent med RWD.
  • Hvordan lage mediesøk i Responsive Web Design - Jeg viser deg hvordan du lager mediesøk som lar deg målrette stiler basert på en rekke enhetsegenskaper, for eksempel skjermbredde, retning og oppløsning.
  • Chrome add-on Responsive Inspector lar deg forhåndsvise mediesøk - Jeg demonstrerer det praktiske tillegget for Chrome som lar deg inspisere mediesøk på aktive nettadresser og forstå hvordan responsive nettsteder samhandler i forskjellige skjermstørrelser.
  • Responsive web design tool review: Embed Responsively - Dette verktøyet lar deg transformere innebygd medieinnhold med fast bredde til fleksible og flytende responsive objekter. Se hvordan verktøyet fungerer.
  • Progressiv avsløring - den beste interaksjonsdesignteknikken? - Frank Spillers fra nettstedet Demystifying Usability presenterer noen historikk og hensynet til programvaren og webutviklingen.
  • Progressiv avsløring i brukergrensesnitt - Alexander Dawson fra Six Revisions-nettstedet bryter ned det gode, det dårlige og det likegyldige når det gjelder progressiv avsløring.

© Copyright 2021 | pepebotifarra.com