Design og tekniske utfordringer for mobilt nettstedinnhold - dummies

Problemet med mobil tilgjengelighet fremkommer i alle områder av å lage et nettsted som påvirker størrelsen og typen bilder du legger inn, fargeskjemaet du bruker på nettstedet ditt, og hvilken type navigasjonsstruktur du velger.

Poenget her er ikke å påpeke alle de forskjellige utfordringene som er forbundet med størrelsen på mobilenheter. Her er to mulige løsninger for å gi webvennlig innhold:

• Medieforespørsler: Du kan presentere det samme innholdet i fullstendige og mobile nettlesere, men vise innholdet forskjellig ved hjelp av forskjellige CSS-stilark. For eksempel kan innhold presentert i tre kolonner i en full størrelse skjerm presenteres i en kolonne i en (smalere) mobil visningsport (skjerm).

  Flere medieforespørsler kan konfigureres for et nettsted. De er definert av størrelsen på en brukers visningsport. Så, for eksempel, kan du opprette et stilark som viser innholdet på nettstedet ditt i tabletter, en annen som viser nettstedet i en mobiltelefon i liggende (horisontal) modus, og enda en for en mobiltelefon i stående (vertikal) modus.

  Du er usannsynlig å opprette mer enn to eller tre versjoner av nettstedet ditt først, men antall stiler du kan definere for et enkelt nettsted, er ubegrenset.

• jQuery Mobile: Du kan bygge et helt annet nettsted for mobilbrukere. Alternativet jQuery Mobile innebærer å skape eget innhold for et mobilnettsted enn det som presenteres for fullskjerm-skjermbesøke.

Medieforespørsler og jQuery Mobile er innen rekkevidde. Ingen av dem krever å ansette programmerere eller avansert kunnskap om webdesign. Når det er sagt, når du bestemmer deg for å ta sjansen og opprette en mobilversjon av nettstedet ditt (ved hjelp av medieforespørsler eller jQuery Mobile), må du sette litt tid og energi til å finne en (eller begge) av disse tilnærmingene.

Poenget her er å øke bevisstheten om hvordan størrelsesforskjellen mellom en full størrelse og mobil visningsport påvirker alle aspekter av sidedesign og teknologi, inkludert disse problemene:

• Små visningsportaler: Den mest umiddelbare og åpenbare forskjellen mellom desktop / laptop surfing og mobil surfing er at mobile visningsportene (visningsskjermene) er mindre. Størrelsesforskjellen mellom full størrelse media og mobile enheter har radikale implikasjoner for nettsteddesign:

  • Mobilsider generelt unngå å bruke kolonner. Byggesidesdesign med en kolonneformet "understruktur" er ofte viktig for å gjøre innhold tilgjengelig og innbydende i fullstendige sider.

  • Lenker må ofte være større på mobilenheter for å være tilgjengelig. Små koblinger er vanskelig for store fingre å trykke, og dermed brukes ulike koblingsteknikker (for eksempel store klikkbare knapper i stedet for smale linjer av typen) ofte i mobildesign.

  • Bilder må være mye mindre i mobile enheter. Det er en kvalitativ dimensjon når det gjelder å velge og beskjære versjoner av bilder som vises på et mobilnettsted. Designere er ofte godt betjent for å beskjære bilder tettere for en mobil enhet. For eksempel kan et bilde av person fra hode til tå som fungerer bra på en fullskjermskjár, være bedre hvis det blir beskåret til bare et headshot for mobile enheter.

  • Skjemaer er konfigurert annerledes på mobilenheter. Noen formularfelt som virker i orden på en bærbar PC (for eksempel radioknapper og boksene) er vanskelig å bruke på en liten berøringsskjerm. I stedet gjør glidebrytere (barer med en glidbar glidebryter) og flipswitches (med ja / nei sett med alternativer) formen enklere å fylle ut på en mobil enhet.

    

• Belysning og fargeproblemer: Mobile enheter er mye mer sannsynlig å bli brukt utendørs enn stasjonære datamaskiner eller til og med bærbare datamaskiner. Og lysintensiteten på mobile enheter er lavere enn for større skjermdatorer. Dette gir spesielle utfordringer for å skape mobilvennlige nettsteder.

  Fargevalg som fungerer godt på fullskjerm-skjermer - i relativt mørke innemiljøer - kan vise seg frustrerende eller ubrukelig på en mobil enhet i sterkt sollys. Unngå fargeskjemaer som nyanser av grå (eller subtile nyanser av hvilken som helst farge) på mobile enheter.

• Last ned hastigheter: Du har hørt annonsene: "Vår 4G er så fort! "Blah, bla, bla. Her er den tynne: Mobil enheter, hvis de ikke kjører på et Wi-Fi-nettverk, laster sider mye langsommere enn skrivebord og bærbare datamaskiner, uansett om de større enhetene er koblet til en Internett-tilkobling eller koblet til via Wi-Fi.

  Og som du har gjettet nå, har dette strategiske implikasjoner for å presentere innhold for mobile besøkende. Fordi mobile sider tar lengre tid å laste, vil du unngå å gjøre det mulig for brukere å navigere fra en side til en annen.

• Mobile plug-ins (og mangel på det): Kanskje den mest kjente forskjellen mellom mobil og laptop / desktop visning er at iPhones og iPads ikke støtter Flash-video. Ja, Flash-videofiler (FLV) er mye brukt til å distribuere video på nettet, men disse filene er ikke tilgjengelig for Mac-mobilenheter. Disse brukerne vil se en melding som den fra Hulu her.