Imate li " responzivnu web stranicu "? Ovo je web mjesto s izgledom koji se mijenja na temelju uređaja posjetitelja i veličine zaslona. Odgovarajući web dizajn sada je najbolja praksa u industriji. Google preporučuje i nalazi se na milijunima web mjesta diljem weba. Postoji, međutim, velika razlika između web stranice koja se jednostavno "uklapa" na različite veličine zaslona i vlasništvo stranice koja je uistinu osjetljiva.
Redovito vidim kako tvrtke preoblikuju svoje web stranice i guraju press release koji veliča vrline svojeg novog mobilnog dizajna. Kad posjetim te web stranice, ono što često nalazim jest izgled koji se doista mijenja i mijenja kako bi odgovarao različitim zaslonima, ali to je daleko koliko oni uzimaju ideju odgovora. To nije dovoljno. Doista reagirajuća web stranica čini više nego samo ljestvica kako bi odgovarao manjem ili većem zaslonu. Na ovim stranicama pronaći ćete i sljedeće važne osobine.
1. Optimizirana izvedba
Nitko ne želi čekati web stranicu za učitavanje, a kada netko upotrebljava mobilni uređaj s vezom koja može biti manja od idealne, potreba za brzo učitavanje web stranice još je važnija.
Pa kako optimizirate izvedbu svoje web stranice? Ako počnete s novom web-lokacijom kao dio redizajna, trebali biste to učiniti za stvaranje proračuna izvedbe kao dijela tog projekta. Ako radite s postojećom web lokacijom i ne počnete od nule, prvi je korak testiranje izvedbe vaše web lokacije da biste vidjeli gdje se danas nalazite.
Nakon što dobijete osnovnu liniju mjesta na kojem se web-lokacija prikazuje, učinit ćete potrebna poboljšanja kako biste povećali brzinu preuzimanja. Odlično mjesto za početak je vjerojatno sa slikama vaše web-lokacije. Prevelike slike su # 1 krivac kada je riječ o sporim web mjestima za učitavanje, tako da optimiziranje slika za web isporuku može stvarno pomoći vašoj web stranici s gledišta izvedbe.
Stvarnost je u tome što poboljšana izvedba web stranica i brze brzine preuzimanja predstavljaju prednost koju će svi posjetitelji cijeniti. Uostalom, nitko se nikad nije žalio da je web mjesto učitano "prebrzo", ali ako web mjesto traje predugo za učitavanje, to će apsolutno odbiti ljude da li se na zaslon odgovarajući "uklapaju" ili ne.
2. Hijerarhija pametnog sadržaja
Kada se web stranica prikazuje na velikom zaslonu, možete položiti sadržaj na različite načine zbog velike količine dostupnih nekretnina na zaslonu. Obično možete odjednom odgovarati važnim porukama i slikama, ažuriranjima vijesti, informacijama o događaju i navigaciji na webu. To omogućuje posjetitelju da lako i brzo skenira sadržaj cijele stranice i odredi ono što im je važno.
Ovaj se scenarij prilično dramatično mijenja kada preuzmete tu web-lokaciju i preoblikujete ga za uređaje male zaslona, poput mobitela. Odjednom radite s djelićem zaslona nekretnine koju ste imali prije. To znači da morate odlučiti što će se prvo pojaviti na web mjestu, što će ga slijediti, itd. Umjesto da se sve vidi odjednom, vjerojatno imate samo prostor za prikaz jedne ili dvije stvari (od kojih je jedna vjerojatno navigacija). To znači da treba donijeti odluke hijerarhije. Nažalost, ono što često određuje što se prvo pojavljuje na zaslonu, a zatim drugo, itd. Je način na koji je stranica kodirana. Najlakše je prilikom izrade responzivnog web mjesta prikazati ono što je prvo kod prvog koda na ekranu, nakon čega slijedi druga stavka u kodu i tako dalje. Nažalost, ono što može biti najvažnije na jednom uređaju možda neće biti tako kritično. Stvarno osjetljivo web mjesto razumije da hijerarhija sadržaja treba promijeniti ovisno o različitim situacijama i trebala bi biti pametna o tome što prikazuje gdje.
Poboljšanja u tehnikama postavljanja CSS-a, uključujući CSS Grid Layout, Flexbox i drugo, omogućuju web dizajnera i programerima više mogućnosti kada je u pitanju inteligentno postavljanje sadržaja, umjesto da budu oštećeni točnim redoslijedom sadržaja u HTML kodu. Iskorištavanje tih novih tehnika izgleda postat će još važnije jer se krajolik uređaja i potrebe korisnika web-lokacije i dalje razvijaju.
3. Iskustva koja vode računa o snagama i slabostima uređaja
Ostanite na temi uređaja - svaki uređaj koji netko može upotrijebiti da posjeti vašu web-lokaciju ima i prednosti i nedostatke koji su inherentni toj platformi. Velika web-lokacija s odzivom razumije mogućnosti i ograničenja različitih uređaja te ih upotrebljava za stvaranje prilagođenih iskustava koja su najprikladnija za sve uređaje koje posjetitelj može upotrebljavati u tom trenutku.
Na primjer, mobitel sadrži niz značajki koje ne biste pronašli na tradicionalnom stolnom računalu. GPS je jedan primjer značajke mobilnog usmjerenja (da, možete dobiti opće informacije o lokaciji i na stolnim računalima, ali GPS uređaj je puno precizniji). Vaša web-lokacija može koristiti podatke o GPS-u da pametno pošalje osobu vrlo detaljnu i specifičnu detaljnu informaciju o smjeru ili posebne ponude na temelju točno tamo gdje su u tom trenutku.
Drugi primjer takve prakse u praksi bi bio web mjesto koje razumije kakav je zaslon koji koristite i šalje slike koje su najprikladnije za taj prikaz. Ako imate zaslon s visokom gustoćom piksela, možete odlučiti poslati kvalitetnije slike na taj zaslon. Te iste slike bile bi besmislene na slabijem zaslonu, a dodatna kvaliteta bi bila izgubljena, a dodatna veličina datoteke će se preuzeti bez stvarnog razloga.
Stvarno sjajne web-lokacije s odzivom uzimaju u obzir cjelokupno korisničko iskustvo i rade za prilagodbu tog iskustva ne samo zbog vrste ili veličine zaslona uređaja, već i drugih važnih aspekata hardvera.
4. Sadržaj s kontekstom
U početku, odgovarajući web dizajn dobio je svoje ime zbog ideje izgleda web lokacije koja reagira na različite veličine zaslona, ali možete odgovoriti na mnogo više od veličine zaslona. Na temelju prethodnog primjera upotrebe prednosti i slabosti uređaja, možete upotrijebiti one, kao i druge podatke kao što su datum i vrijeme, kako biste doista prilagodili iskustvo web mjesta.
Zamislite web mjesto za veliki događaj sajmova. Iako će odgovarajući web-lokacija promijeniti izgled web stranica na skali s različitim zaslonima, možete upotrijebiti i datum kako biste utvrdili koji je sadržaj najvažniji za prikaz. Ako je razdoblje prije događaja, vjerojatno želite jasno prikazati podatke o registraciji. Ako se događaj zapravo događa u tom trenutku, registracija možda nije najvažniji sadržaj. Umjesto toga, možete odrediti da je raspored događaja dan kritičniji jer je relevantniji za neposredne potrebe tog korisnika.
Uzimajući korake dalje, mogli biste dodirnuti GPS uređaja kako biste utvrdili gdje su zapravo na sajmu. Možete im pružiti interaktivni sadržaj na temelju njihove lokacije, pokazujući im obližnje govornice ili sesije o početku rada.
5. Pristupačnost
Konačni primjer koji ćemo pogledati kako web mjesto zaista odgovara potrebama posjetitelja jest razmišljati o dostupnosti web stranice . Web stranice bi trebale biti u mogućnosti koristiti što je moguće više ljudi, uključujući one s invaliditetom. Vaša web stranica bi trebala biti u mogućnosti koristiti nekoga tko treba čitač zaslona ili neki drugi pomoćni softver za pristup njegovom sadržaju. Na taj način vaša web stranica reagira na njihove potrebe jer ste osigurali da je iskustvo, iako različito za posjetitelje s invaliditetom, još uvijek prikladno.
Odgovarajući na što više podatkovnih točaka, a ne samo veličine zaslona, web stranica može biti toliko više nego samo "mobilno prijateljski". To može postati doista osjetljivo iskustvo u svakom smislu fraze.