Budući da broj korisnika koji pretražuju web stranice na svojim mobilnim uređajima nadmašuje broj surfača internetom na stolnim računalima, nije ni čudo da vlasnici tvrtki žele (kao što bi i trebali) prilagoditi vlastite web stranice mobilnom pregledavanju. Današnji programeri web stranica grade responzivna web mjesta od samog početka.
Što je točno "Responzivna stranica"?
Responzivno web mjesto je web mjesto koje reagira i dinamički se prilagođava različitim rezolucijama monitora računala i zaslona mobilnih uređaja. Ako smanjite veličinu prozora vašeg web preglednika, vidjet ćete kako naš blog mijenja oblik zajedno sa smanjenjem ili proširenjem dimenzija preglednika. Ove automatske prilagodbe moguće su pomoću tehnologije CSS3 koja omogućuje web preglednicima da identificiraju s kojeg uređaja korisnik pregledava i da automatski mijenjaju trenutno pregledavanu web stranicu prema proporcijama i razlučivosti uređaja.
Što je s web-lokacijama ili aplikacijama spremnim za mobilne uređaje?
Krenimo od kraja – aplikacija nije održiva alternativa responzivnom web-mjestu, dok web-mjesto spremno za mobilne uređaje može biti prikladna zamjena za responzivno web-mjesto u slučajevima tehničke složenosti ili zamršenog korisničkog iskustva.
Izrada mobilne aplikacije je obično skup pothvat koji si ne može priuštiti svaka tvrtka. Aplikacija se neće pojaviti u rezultatima pretraživanja Googlea ili drugih tražilica, a šanse su obično prilično male da će posjetitelj vaše web stranice preuzeti aplikaciju (i vratiti se koristiti je kasnije).
Web-mjesta spremna za mobilne uređaje relevantna su za komplicirana web-mjesta čija se navigacija i upotreba na radnoj površini uvelike razlikuju od načina na koji se web-mjesto koristi na mobilnim uređajima. Na primjer, web-mjesta za usporedbu cijena s mnogo kategorija i filtara obično će korisnicima mobilnih uređaja ponuditi različite, kraće i jednostavnije verzije svojih web-mjesta.
Razgovarajmo o pikselima
Kada izrada odredišne stranice ili web stranice, moramo uzeti u obzir ove dimenzije u našem kodu, ali dizajn treba biti napravljen na temelju okvira za prikaz:
Mobilni: 320 px do 480 px
Tableti: 481 px do 980 px
Radna površina: 801 px do 1200 px
Cijeli zaslon radne površine: 1201 px do 1920 px
Osim toga, također moramo zapamtiti da su na mobilnim uređajima određeni dijelovi zaslona često skriveni iza alatne trake preglednika ili gumba na dnu preglednika.
Kliknite ovdje kako biste saznali više o ispravnoj izradi responzivnih stranica pomoću okvira za prikaz.
kredit: developers.google.com
6 najboljih primjera iz prakse za izradu uspješne web-lokacije prilagođene korisnicima
Uzimajući u obzir perspektivu korisnika
Za početak, bilo bi dobro da u središtu pozornosti imamo činjenicu da su korisnici mobilnih uređaja u drugačijem "modu" od ljudi koji surfaju internetom na računalu. Osim naše pozornosti koja, za sve nas, s vremenom opada, ljudi se obično bave mobilnim surfanjem u prilično stresnim uvjetima: dok su na poslu / dok hodaju / dok vode telefonski razgovor / dok se voze autobusom itd. Raspoloživo vrijeme na takve korisnike je ograničeno i oni će stoga nastojati brzo dobiti odgovore. Danas, kada velik broj korisnika interneta počinje tražiti proizvode ili usluge koje trebaju na mobilnim uređajima, od vitalne je važnosti prilagoditi svoju web stranicu njihovim potrebama i ponašanju tako da informacije koje traže budu brzo i lako dostupne. U nastavku ćete pronaći infografiku koja sažima najnovije trendove u mcommerceu (mobilna trgovina) i također daje predviđanja za budućnost.
Infografika autora- Invesp
Slike
Neće svaka slika koja dobro izgleda na radnoj površini izgledati dobro i na mobilnom telefonu. Pobrinite se da su slike skalabilne i da se ne izrezuju na mobilnim uređajima. Ako želite zadržati različit dizajn između stolnog računala i mobilnog uređaja, ali vaša je slika previše detaljna, razmislite o zamjeni slike.
Tekst
Mobilni posjetitelji vaše web stranice nemaju isto strpljenje ili vrijeme za čitanje velikih blokova teksta, kao što biste mogli očekivati od njih kada pregledavate svoju web stranicu u pregledniku stolnog računala. Tekstovi za mobitel moraju biti sažeti, a poruke skraćene. Ako vaša standardna početna stranica sadrži opis vaše tvrtke ili proizvoda u tri rečenice, pokušajte ga skratiti na jednu i pol rečenicu za mobilne uređaje. Štoviše, osim nastojanja da pažnja korisnika ne odluta, uzrokujući zatvaranje vaše stranice, važno je da vaša web stranica izgleda dobro. S obzirom na to da je zaslon mobilnog telefona znatno manji, nemojte preopteretiti posjetitelje svoje stranice nepotrebnim tekstovima.
navigacija
Napravite jasnu i jednostavnu navigacijsku traku. Ako vaše web mjesto za stolno računalo ima mnogo stranica na svom izborniku, vrlo je vjerojatno da nećete htjeti prikazati sve te stranice na svom mobilnom navigacijskom izborniku. U slučaju velike web stranice s desecima ili stotinama stranica i proizvoda, preporučujemo dodavanje opcije pretraživanja jednostavne za korištenje.
Je li vaša stranica predugačka? Možete ga skratiti i odvojiti od brojnih odjeljaka na svojoj mobilnoj stranici, a možete i napraviti svoju navigaciju. traka "ljepljiva" tako da se pomiče gore-dolje sa stranicom (uvijek vidljiva).
Poziv na akciju
U mobilnim okruženjima trebali biste se pokušati držati jednog poziva na radnju za koji želite da ga izvrši "vaš korisnik". Izbjegavajte pokušaje navesti korisnika da se prijavi za newsletter, kupi proizvod, ostavi povratnu informaciju i podijeli vaš proizvod na Facebooku, sve odjednom. Odredite koja je glavna radnja koju želite da vaši korisnici izvrše i usredotočite se samo na tu radnju. Na primjer, na mobilnoj web stranici MailChimpa ta je radnja besplatna registracija na njihovu uslugu. Ovo je jedini gumb koji se prikazuje korisnicima, zajedno s kratkim i jezgrovitim tekstovima.
Dodaci za mobilne stranice
Jedna od prednosti mobilne mreže je ta što vam omogućuje dodavanje značajki koje će posjetiteljima vaše web stranice pomoći da vas kontaktiraju ili da jednostavno dođu do vaše trgovine ili ureda.
Dodavanjem oznake "tel:" na bilo koji telefonski broj na vašoj web stranici, korisnici će moći nazvati vašu tvrtku jednostavnim pritiskom na gumb. Osim toga, možete dodati lebdeću ikonu telefona koja će služiti i kao opcija brzog biranja.
Drugi primjer je dobivanje telefonskih uputa do vašeg poslovnog mjesta. Dodavanje Waze ikone na vašu stranicu će, nakon klika, otvoriti Waze aplikaciju s vašim poslom kao odredištem.
Treći primjer je dodavanje ikone za dijeljenje (uključujući dijeljenje na Whatsappu) na kraj svakog članka ili objave na vašoj web stranici.
Ukratko, svaki razvojni projekt web-mjesta mora uzeti u obzir brzinu reakcije i način na koji će web-mjesto izgledati na računalima (s različitim veličinama računalnih monitora), mobilnim telefonima (iPhone i Android uređaji s različitim mobilnim preglednicima) i raznim (stolnim) web-preglednicima . Osim responzivnog dizajna web stranice, morate unaprijed planirati što će se pojaviti na mobilnoj verziji vaše stranice, optimizacije teksta, slike i pozive na akciju.
