Näytön resoluutiohaasteeseen vastaaminen mobiililaitteilla

Viimeisessä matkaviestinrajapinnan rakentamista koskevassa blogiviestissäni mainitsin joitain haasteista, joita olin törmännyt yrittäessään suunnitella mobiiliystävällisiä verkkosivuja. Pahinta näistä on haaste, jonka asettaa se, ettei ole olemassa normaalia näytön kokoa tai tarkkuutta, jota voit pitää itsestäänselvyytenä. Myös selainten ominaisuudet eri puhelimissa eroavat paljon. Seuraavassa on joitain tekemistä ja kieltäytymistä, jotka ryhmäni on oppinut tietyn ajan kuluessa käsittelemään tätä asiaa.

DO (ja suosittelen tätä voimakkaasti) saada asiakkaasi kirjautumaan sisään laitteiden luetteloon, jota aiot harkita suunnittelupyrkimyksissäsi. Monet asiakkaat lisäävät jo ehdottamaasi luetteloa ja ajavat kovaa kauppaa. Mutta luota minuun, huomaat projektin lopussa, että panostasi paljon aikaa ja vaivaa vakuuttaaksesi asiakkaasi kirjautumaan äärelliseen laitteiden luetteloon oli vaivan arvoinen. Mobiililaitteiden markkinat kukoistavat ja monet tulevista mobiililaitteista eroavat huomattavasti nykyisistä. Ja Jumala auttaa sinua, jos aterioit markkinoilla Yhdysvaltojen ulkopuolella. Erityisesti Intiassa tai Kiinassa, jossa on uusi malli, joka tuodaan markkinoille joka toinen päivä. ÄLÄ käytä laajasti taulukoita ja sisäkkäisiä taulukoita verkkosivuillasi. Useimmat siellä olevat mobiiliselaimet eivät ole kovin ystävällisiä taulukkojen monimutkaiseen pesemiseen. Paras tapa luoda portaali mobiilimaailmalle on pinoamalla osiot peräkkäin. Pidän parempana suunnitella yksinkertainen kotisivu, jonka avulla voit ottaa näytteitä jokaisesta osiosta portaalin sisällä. Jokainen näistä leikkauksen kohokohdista on järjestetty toisensa alapuolelle kuvan A mukaisesti . Napsauttamalla "Lisää ..." -painiketta pääset kyseiselle osiosivulle. Napsauttamalla yhtä linkkejä pääset suoraan valitun kohteen yksityiskohtiin.

Kuvio A

VARAA, että osion uusimmat, osuvimmat, kiinnostavimmat ja kysynnällisimmät sisältöominaisuudet korostavat. Käyttäjien profiloinnilla ja implisiittisellä personalisoinnilla on tässä suuri merkitys. Jos portaalisi myy elektroniikkatuotteita, etsi käyttäjän ostohistoriaa päättäessäsi, mitä osion kohokohtia näytetään. Tilaamme myös osiot uudelleen siten, että jos käyttäjä on ostanut meiltä kannettavan, työnnämme Lisälaitteet-osan ylöspäin ja esittelemme siellä kannettavan tietokoneen lisävarusteita. Muista, että nopeaa nopeutta ajatellen, kokemus pienellä kämmentietokoneella selaamisesta on edelleen suhteellisen vaivalloista ja käyttäjä haluaisi päästä haluamaansa vähimmäisellä napsautuksella. ÄLÄ käytä javascriptiä verkkosivuillasi, vaikka uudet edistyneet laitteet tukevat sitä. Älä varmista, että huippuluokan kosketuspuhelimien sivusi näyttää hieman eri tavalla. Ei ole helppoa napsauttaa pieniä linkkejä sormilla. Käytä joko hiukan suurempaa kirjasinkokoa tai varmista, että linkit näkyvät jossain lohkotunnisteessa ja että koko tunniste on laitettu hyperlinkin sisään. Tämän avulla kosketuspuhelimen käyttäjien on helpompaa napsauttaa linkkiä sormillaan. Ylläpidämme siinä määrin, että ylläpidämme kunkin pikkukuvan useita versioita ja tarjoamme sopivaa versiota laitteen UA-arvoista riippuen. Ylläpidämme erilaisia ​​XSL-sarjoja erityyppisille laitteille (Touch, Non-Touch, 240x320 jne.) Ja sovellamme sopivaa XSL-muunnokseen. ÄLÄ käytä hiiren siirtämisen vaikutuksia valikossa tai verkkosivuilla. Suurin osa kosketuspuhelimista joko ei tue tätä ominaisuutta tai tue sitä jollain tavalla outolla tavalla. Älä varmista, että käytät yksinkertaista ja perusvärivalikoimaa, jotta vältetään omituisia vaikutuksia tietyissä puhelimissa. ÄLÄ käytä taustakuvia taulukoihisi ja kappaleisiin. Monissa puhelimen selaimissa on oletusselainasetukset, jotka ohittavat taustakuvan. VARAA (jos käytät kaavion ehdottamaa käyttöliittymää), että kunkin osion otsikot on tallennettu kuvina. Teemme kuvia kahdeksassa eri koossa ja säilytämme ne tietokannassa. Sitten, kutsuvan laitteen UA-profiileista riippuen, tarjoamme asianmukaisen otsikkokuvan. Tämä varmistaa, että käytämme näytön kiinteistöjä optimaalisesti. Löysimme tämän lähestymistavan paremmin kuin käyttämällä HTML: n taulukon leveysominaisuutta leveyden asettamiseen. Tämä johtuu siitä, että jotkut vanhat puhelimen selaimet eivät tunnista leveysominaisuutta. Otsikkoosan kuva asettaa automaattisesti sen osan sisältävän ruudun / taulukon leveyden. Valmistamme otsikkokuvia 8 vakiokoossa, joita suurimmalla osalla (enemmän tai vähemmän) puhelimen näytöistä on. ÄLÄ käytä kehysjoukkoja, iframe-kehyksiä jne.

Tämä ei tietenkään ole tyhjentävä luettelo. Aion kattaa vielä joitain kohtia tulevissa blogiviestissäni. Sillä välin jaa kommentteissasi kokemuksiasi matkapuhelinten verkkosivujen suunnittelusta.

© Copyright 2020 | mobilegn.com