T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

Internetne strani so trenutno večinoma prilagojene za ekrane velikosti od 1024px dalje ter klikanju z miško. S prihodom najprej iPhona, kasneje pa še ostalih podobnih mobilnih telefonov nove generacije, pa se je uporabniški vmesnik in način uporabe telefona in brskanja po internetnih stran in trgovina spremenil. Na kaj moramo biti pozorni?

Kaj je drugače

Najprej seveda na velikost ekrana. Po večini imajo ekrane v velikosti okoli 480×800px in pa upravljanje s prsti namesto miške.

Glava internetne strani oz header

Logo, prijave, sitemap in podobni linki v glavi običajne spletne strani pri mobilni verziji nimajo več  svojega rednega prostora. Zavedati se moramo, da je ekran na mobilcu neprimerno manjši in zato moramo s prostorom varčevati kjer se le da. Obiskovalcu moramo takoj ponuditi jedro strani, torej tisto informacijo, zaradi katere spletna stran sploh je.

Navigacija po strani

Manjši ekran nam onemogoča oz otežuje postavljanje klasičnih vodoravnih ali navpičnih menijev, še manj pa velikih “spustnih” oz “dropdown” menijev. Meni mora biti majhen, pregleden in na vrhu zaslona mobilca. Lahko se tudi po kliku skrije, da ne zakriva oz zaseda preveč dragocenega prostora. Vsekakor moramo paziti, da se po navigaciji brez težav premikamo s prsti, ter da je lepo vidna na ekranu mobilca.

Gumbi

Kot prvo mora vedeti, da je način upravljanja drugačen. Ni več miške in natančnega nazdora temveč so v uporabi prsti, ki imajo nekajkrat večjo površino od miškinega kazalca. Torej morajo biti gumbi prilagojeni večji porvšini. S tem v mislih načrtujte gumbe.

Vsebina internetne strani

Pri vsebini je pomembno, da se lepo prilagaja ekranu (text-align: justify), slike pa ne smejo biti prevelike. Če se le da moramo div-e uporabljati z mislijo na možnost povečave s 2x pristikom prsta.

Novičke

morajo biti kratke in jasne, da ne vzamejo preveč prostora, oblika pa mora biti prilagojena drsenju ekrana. Torej linki ne smejo biti nametani skozi celotni tekst, saj se lahko zgodi, da uporabnik ne bo mogel lepo s prstom drseti preko ekrana v želji po premikanju po strani.

Oglasi

Google svoje oglase že prilagaja različnim napravam kot tudi medijem (video), zato bomo verjetno imeli na mobilni verziji internetne strani ali trgovine drugačno obliko oglasov kot na klasični strani. Konktaktirajte svojega ponudnika oglasov in povprašajte po dimenzijah. Vsekakor morajo biti oglasi še bolj diskretni, saj je prostora zelo malo in hitro obiskovalec dobi občutek, da je stran “spamerska”.

Galerije slik

Zopet moramo imeti v mislih manjšo velikost ekrana in temu primerno prilagoditi velikost thumb-ov oz manjši slikic. Če se le da lahko sprogramiramo uporabniški vmesnik enako, kot ima privzeto iPhone. Torej da slike pregledujemo s potegom prsta levo ali desno in ne klasično na klik “naprej”.

Levi oz desni stolpec

Zaradi ozkega ekrana boste težko uporabljali klasični layout s levim oz desnim stolpcem s pomožno navigacijo in dodatno vsebino. Pomembna vsebine iz tega področja lahko preselite v nogo oz footer, saj bo obiskovalce po kliku na glavni gumb na hitro preletel vsebino in bo na dnu našel dodatne povezave. Dodatno vsebino lahko skrijete v majhen gumb pri strani, kjer se po pritisku nanj s prstom pokaže ta dodatna vsebina. Izvedb je lahko še več, važno je, da je uporabno.

Povzetek

To je samo grobi pregled glavne vsebine, ki je na internetnih straneh in trgovinah, prilagojenih za mobilne telefone, drugačna kot na klasičnih ekranih oz napravah. Vsak projekt seveda zahteva svoj pristop in pa prilagoditev posameznih vsebin, zato nas pokličite in pomagali vam bomo pri načrtovanju in izvedbi internetnih strani in internetnih strani za mobilne telefone ter ostale novejše naprave.

Podobni članki:

1. Oblikovanje spletni strani in internetnih trgovin
2. Izdelava internetne strani za mobilne telefone? Smiselno?
3. Zakaj je potrebno internetno stran izdelati tudi za mobilne telefone?
4. Prihodnost oblikovanja internetnih aplikacij
5. Prihodnost nakupovanja preko internetnih trgovin
6. Katero kodiranje uporabiti pri izdelavi internetnih strani?
7. Internetne strani in trgovine za novi iPhone
8. Prilagajanje internetne strani glede na širino ekrana
9. Izdelava spletnih strani – 5 najpomembnejših stvari
10. T&R splet od marca 2010 ignorira IE6 pri izdelavi internet strani

Antony || Monday, May 3rd, 2010 ob 7:00 am || Splet || RSS 2.0 | Dodaj komentar || Trackback