Å takle skjermoppløsningsutfordringen på mobile enheter

I mitt siste blogginnlegg om å bygge et mobilgrensesnitt nevnte jeg noen av utfordringene jeg hadde møtt mens jeg prøvde å designe mobilvennlige websider. Verst av disse er utfordringen som det faktum at det ikke er noen standard skjermstørrelse eller oppløsning du kan ta for gitt. Nettleserfunksjonalitetene på forskjellige telefoner skiller seg også mye ut. Nedenfor er noen av gjør og ikke gjør som teamet mitt har lært over en periode å takle dette problemet.

DO (og jeg anbefaler dette på det sterkeste) få kunden din til å logge seg på en liste over enheter du vil vurdere i designarbeidet. Mange klienter vil legge til listen du allerede har foreslått og drive en hard handel. Men stol på meg, du vil innse på slutten av prosjektet at hvor mye tid og krefter du investerte i å overbevise klienten om å melde deg ut på en endelig liste over enheter, var vel verdt innsatsen. Markedet for mobilenheter blomstrer, og mange av de kommende mobile enhetene er ganske forskjellige fra de eksisterende. Og Gud vil hjelpe deg hvis du er catering til markeder utenfor USA. Spesielt India eller Kina, der det er en ny modell som blir lansert annenhver dag. IKKE bruk omfattende tabeller og nestede tabeller på websidene dine. De fleste mobile nettlesere der ute er ikke veldig vennlige mot komplekst hekkende bord. Den beste måten å lage en portal for den mobile verdenen er ved å stable seksjoner under hverandre. Jeg foretrekker å designe en enkel hjemmeside, slik at du kan prøve hvert av seksjonene i portalen. Hvert av disse høydepunktene er arrangert under hverandre, som vist i figur A. Hvis du klikker på "Mer ..." -knappen, kommer du til respektive seksjonsside. Hvis du klikker på en av lenkene, vil du ta deg direkte til detaljene for det valgte elementet.

Figur A

Sørg for at de nyeste, mest relevante, mest iøynefallende og mest etterspurte innholdsfunksjonene i delen fremhever. Brukerprofilering og implisitt personalisering har stor betydning her. Hvis portalen selger elektroniske varer, kan du slå opp brukerens kjøpshistorikk mens du bestemmer hva som vises i høydepunktene i seksjonen. Vi omorganiserer også seksjonene, slik at hvis en bruker har kjøpt en bærbar PC fra oss, så skyver vi Tilbehør-delen til toppen og har bærbar tilbehør der. Husk at hvor fort hastigheten er, opplevelsen av å surfe på en liten håndholdt enhet fremdeles er relativt tungvint og brukeren foretrekker å komme til det han vil med minimumsklikk. IKKE bruk javascript på websidene dine, selv om de nye avanserte enhetene støtter det. Forsikre deg om at for high-end touch-telefoner blir siden din litt annerledes. Det er ikke lett å klikke på små lenker med fingrene. Bruk enten en litt større skriftstørrelse, eller sørg for at koblingene vises i en blokkkode og at hele koden blir lagt inn i hyperkoblingen. Dette vil gjøre det lettere for berøringstelefonbrukere å klikke på lenken med fingrene. Vi går ut på å opprettholde flere versjoner av hvert miniatyrbilde og servere den aktuelle avhengig av enhetens UA-profiler. Vi vedlikeholder et annet sett med XSL-er for forskjellige typer enheter (Touch, Non-Touch, 240x320 osv.) Og bruker den aktuelle for XSL Transformation. IKKE bruk musevirkningseffekter i menyen eller websidene. De fleste berøringstelefoner støtter enten ikke denne funksjonen eller støtter den på en eller annen merkelig måte. Sørg for at du bruker en enkel og grunnleggende fargepalett for å unngå rare effekter på visse telefoner. IKKE bruk bakgrunnsbilder i tabellene og avsnittene. Mange nettlesere har standard nettleserinnstillinger som ignorerer bakgrunnsbildene. Sørg for (hvis du bruker brukergrensesnittet som jeg har foreslått i diagrammet) at overskriftene på hver seksjon blir lagret som bilder. Vi lager bildene i åtte forskjellige størrelser og oppbevarer dem i en database. Avhengig av UA Profs på den anropende enheten, betjener vi deretter riktig overskriftsbilde. Dette sikrer at vi utnytter skjermens eiendommer optimalt. Vi fant denne tilnærmingen bedre enn å bruke tabellbreddeattributtet til HTML for å angi bredden. Dette er fordi noen gamle telefonlesere ikke kjenner igjen breddeattributtet. Bildet av overskriftsdelen setter automatisk bredden på skjermen / tabellen som inneholder seksjonen. Vi lager topptekstbildene i standard 8 størrelser som de fleste av telefonskjermene (mer eller mindre) har. IKKE bruk rammesett, iframes etc.

Dette er selvfølgelig på ingen måte en uttømmende liste. Jeg vil dekke noen flere punkter i de kommende blogginnleggene mine. I mellomtiden kan du dele dine erfaringer med å designe nettsider for mobiler i kommentarene.

© Copyright 2020 | mobilegn.com