Upoređivanje dva različita pristupa Web dizajnu sa više uređaja
Odgovarajući i adaptivni web dizajn predstavljaju metode za kreiranje prijateljskih web lokacija sa više uređaja koje dobro funkcionišu na različitim veličinama ekrana. Dok Google preporučuje odgovarajući web dizajn i što je popularniji od dva pristupa, oba ova metoda za web dizajn multi-uređaja imaju svoje prednosti i njihove slabosti.
Hajde da pogledamo razlike između adekvatnog i prilagodljivog web dizajna, posebno fokusirajući se na ove ključne oblasti:
- Jednostavnost razvoja
- Nivo kontrole koju imate nad dizajnom
- Širina uređaja / ekrana
- Kako je buduće prijateljsko rješenje
- Ukupna brzina prenosa i performanse sajta
Neke definicije
Pre nego što uđemo u paralelno upoređivanje adekvatnog i prilagodljivog web dizajna, uzmimo trenutak da pogledamo definiciju na dva nivoa.
Odgovarajuće web stranice imaju raspored tekućine koji se menja i prilagođava bez obzira na veličinu ekrana koja se koristi. Medijski upiti dozvoljavaju odgovarajućim mestima da se čak menjaju "na putu" ako se pretraživač promeni veličinom.
Adaptivni dizajn koristi fiksne veličine zasnovane na unapred određenim tačkama prekida da isporuči najprikladnije verzije rasporeda za veličinu ekrana koja se detektuje kada se stranica prvo učita.
Sa ovim širokim definicijama, pređimo na ključne oblasti fokusa.
Jednostavnost razvoja
Najznačajnija razlika između adekvatnog i prilagodljivog web dizajna je na način na koji se ova rješenja primjenjuju na web stranicu. Budući da fleksibilan dizajn stvara potpuno raspored tekućine, najbolje se koristi na projektima u kojima redizajniraš stranicu odozdo . Pokušaj da ponovite kod postojećeg web sajta da postane odgovoran je često naporna afera jer jednostavno nemate nivo kontrole koje biste imali ako ste razvili taj kod iz nule i uzimajući odgovarajući dizajn u obzir za najranije faze tog procesa . To znači da kada nadogradite sajt kako biste bili odgovorni, prisiljeni ste da napravite kompromise kako biste ostali u okviru postojeće kodne baze.
Ako radite na postojećoj web lokaciji sa fiksnom širinom, adaptivni pristup znači da možete ostaviti veličinu da je stranica dizajnirana za netaknute i dodati na dodatne adaptivne prekidne tačke po potrebi. U nekim slučajevima, ukoliko je budžet projekta mali, a ako će primiti samo mali broj razvojnih radova, možete odabrati da dodate samo nove adaptivne tačke prepreka za manje veličine zaslona / mobilnih centričnih. To znači da ćete dozvoliti većim ekranima da svi koriste isti izgled - možda verzija 960 za prekidanje, za koju je ta lokacija verovatno bila prvobitno namenjena.
Napredak prema adaptivnom pristupu je taj što možete bolje iskoristiti kod postojećeg sajta, ali je jedna od nedostataka da kreirate različite predložene postavke za svaku tačku prekida koju izaberete da podržite. Ovo će imati uticaj na radni teret potreban za razvoj i održavanje ovog rješenja na dugoročnom planu.
Kontrola dizajna
Jedna od prednosti web lokacija jeste da njihova fluidity dozvoljava da prilagode i podržavaju sve veličine ekrana, a ne samo unapred postavljene tačke prekida određene u adaptivnom pristupu. Realnost je, međutim, da se odzivne stranice mogu dobro videti na određenim veličinama ekrana (obično veličine koje odgovaraju popularnim uređajima dostupnim na tržištu), ali se vizuelni dizajn često razbija između tih popularnih rezolucija.
Na primer, lokacija može izgledati sjajno na rasporedu širokog ekrana od 1400 piksela, veličini srednjeg ekrana od 960 piksela, a na malom ekranu 480 piksela, ali šta je sa međusobnim statusima ovih veličina? Kao dizajner, vi nemate nikakvu kontrolu nad ovim među-veličinama, a vizuelni izgled stranice u tim veličinama je često manje od idealnog.
Sa prilagodljivom vebsajnom, imate mnogo više kontrole dizajna u odnosu na različite rasporede, jer su fiksne veličine zasnovane na vašim utvrđenim prekidačima. Te nervozne države u medjuvanju više nisu problem jer ste pažljivo dizajnirali svaki "izgled" (što znači svaki prikaz breakpoint-a) koji će biti isporučen posetiocima.
Pošto je ovaj nivo kontrole dizajna možda atraktivan, morate biti svjesni da dolazi po cijeni. Da, imate potpunu kontrolu nad izgledom svih tačaka prekida, ali to znači da morate uložiti vreme dizajna koje je potrebno za dizajn za svaki od tih jedinstvenih rasporeda. Što više tačaka za koje se odlučite da dizajnirate, to će vam više vremena biti potrebno za taj proces.
Širina podrške
Reagujući i adaptivni veb dizajn uživa veoma dobru podršku, posebno u modernim pretraživačima.
Adaptivne web lokacije zahtevaju ili komponente komponente servera ili Javascript za detekciju veličine ekrana. Očigledno je da ako je za adaptivni sajt potreban Javascript, to znači da ga treba omogućiti pregledaču da bi ta stranica ispravno funkcionisala. To možda nije bitna briga za vas jer će većina ljudi imati Javascript u svojim pregledačima, ali u bilo koje vreme sajt ima kritičnu zavisnost od bilo čega, treba istaći.
Odgovarajuće web stranice i medijski upiti koji će ih moći dobro će raditi u svim modernim pretraživačima. Jedini problemi koje ćete imati su sa najstarijim verzijama Internet Explorera jer verzije 8 i ispod ne podržavaju medijske upite . Da bi se ovako okončalo, često se koristi javascript polifil , što znači da postoji i zavisnost od Javascript-a, bar za one zastarjele verzije IE-a. Opet, to možda nije baš zabrinjavajuće za vas, posebno ako analiza sajta pokazuje da ne primate mnoge posetioce koristeći stare verzije pregledača.
Buduća prijatnost
Prirodna priroda odgovarajućih sajtova daje im prednost nad adaptivnim sajtovima kada je u pitanju budućnost. Ovo je zbog toga što ta odzivna stranica nisu izgrađena da bi mogla da primi samo ranije uspostavljeni skup prekida. Oni se prilagođavaju da odgovaraju svim ekranima , uključujući i one koje možda i danas nisu na tržištu. To znači da odzivne stranice neće morati biti "fiksne" ako nova rezolucija ekrana odjednom postane popularna.
Gledajući u neverovatnu raznovrsnost uređaja (od avgusta 2015. godine bilo je više od 24.000 različitih Android uređaja na tržištu), a sajt koji se trudi da primi širok spektar ekrana je kritičan za budućnost. Ovo je zbog toga što taj pejzaž verovatno neće postati manje raznolik u budućnosti, što znači da će dizajniranje za određene ekrane ili veličine postati nemoguće, ako još nismo dostigli tu stvarnost.
Sa druge strane ovog scenarija upoređivanja, ako je web lokacija prilagodljiva i ne odgovara novim rezolucijama koje mogu postati važne na tržištu, onda ćete možda morati da dodate tu tačku prekida na stranice koje ste kreirali. Time se dodaje vreme dizajna i razvoja na projekte i to znači da se ta adaptivna mjesta moraju dosledno pratiti kako bi se osiguralo da na tržište ne budu uvedene nove tačke prekida koji se moraju dodati na lokaciju. Opet, sa raznolikošću uređaja koji je ono što jeste, stalno provjeravanje novih dimenzija i mogućnost prilagođavanja novim tačkama prekida je tekući izazov koji će imati utjecaja na rad koji morate poduprijeti lokaciji i trošak tog održavanja za kompaniju ili organizaciju za koju je sajt namenjen.
Performanse
Odgovarajući web dizajn je dugo optužen (nepravedno u mnogim slučajevima) što je loše rješenje sa stanovišta brzine prenosa / učinka. Ovo je uglavnom zbog činjenice da su u ranim danima ovog pristupa mnogi web dizajneri jednostavno prebacivali medijske upite na mali ekran na postojeće CSS-ove stranice. Ovo je prisililo da se slike i resursi namenjeni za veće ekrane isporučuju na sve uređaje, čak i ako ti mali ekrani nisu koristili u finalnim rasporedima. Odgovarajući dizajn je prošao dug put od tih dana, a realnost je da kvalitetna odzivna mesta danas ne trpe probleme sa performansama.
Spora brzina prenosa i naduvavanje web stranica nije odgovarajući problem na webu - to je problem koji se može naći na svim web stranicama. Slike koje su suviše teške, hranjene su iz društvenih medija, prekomerne skripte i još mnogo toga, a težište dolaze, ali se mogu postaviti i odzivne i prilagodljive web stranice koje se brzo učitavaju. Naravno , oni se takođe mogu konstruisati na način koji ne čini učinak prioritetom, ali to nije osobina samog rješenja, već odraz tima koji je bio uključen u razvoj same lokacije.
Beyond Layout
Jedan od najznačajnijih aspekata adaptivnog web dizajna je da ne posedujete samo kontrolu nad dizajnom sajta za postavljene tačke prekida, već i resurse koji se isporučuju za te verzije sajta. Na primer, to znači da se retina slike mogu poslati samo na mrežnjače, dok ekrani bez retina dobijaju odgovarajuće slike koje su manje u veličini datoteke. Ostali sajtovi (datoteke Javascript, CSS stilovi itd.) Mogu se pametno isporučivati samo kada su oni potrebni i biće korišćeni.
Ova upotreba adaptivnog web dizajna ide dalje od jednostavne jednačine "ako nadograđujete web stranicu, prilagodljivi mogu biti lakši pristup za korištenje." Sve stranice, uključujući i kompletne redizajn, mogu imati koristi od pametnijeg pristupa boljim prilagođenim iskustvima.
Ovaj scenario pokazuje nijansiranu prirodu ove "odzivne i prilagođene" debate. Iako je tačno da adaptivni pristup može biti bolji od odgovara za retrofitne lokacije, to može biti i odlično rješenje za potpunu redizajn. Slično tome, u nekim slučajevima pristupni pristup se može dodati na bazu kodova postojećeg sajta, dajući tu lokaciju sve prednosti potpuno pristupljivog pristupa.
Koji je pristup bolji?
Kada je reč o prilagodljivom prilagođenom web dizajnu, ne postoji jasan "dobitnik", iako je odziv svakako popularniji pristup. Zapravo, "bolji" pristup zavisi od potreba određenog projekta. Štaviše, to ne mora biti "ili / ili" situacija. Postoji veliki broj web profesionalaca koji grade sajtove koji kombinuju najbolje odzivan web dizajn (širinu tekućine, buduću podršku) sa snagama adaptivnog dizajna (bolja kontrola dizajna, pametno učitavanje sajtskih resursa).
Obično poznat kao RESS (Responsive Web Design with Side Side Components), ovaj pristup pokazuje da stvarno nema "jedne veličine koja odgovara svim rješenjima". Oba odziva web dizajna i prilagodljivost imaju svoje snage i njihove izazove, tako da morate odrediti koji najbolje će raditi za vaš specifičan projekat, ili ako vam hibridno rešenje ustvari odgovara.