Ovomjesečna tema je responzivnost web stranica pa smo odlučili detaljnije progovoriti o tome što je responzivni web dizajn, zašto je potreban te koji su osnovni principi responzivnog web dizajna.
Adaptivni web dizajn prilično je novi smjer u dizajnu web resursa, ali sada je jedan od glavnih pokazatelja kvalitete web stranice. U ovom ćemo članku govoriti o tome što je responzivni web dizajn i što on može biti.
Što je responzivni web dizajn
Adaptivni web dizajn (na engleskom “responsive web design”) je dizajn web stranica koje pružaju izvrsno iskustvo na različitim uređajima spojenim na internet.
To znači da se ista stranica može gledati na različitim uređajima, bez obzira na rezoluciju i format ekrana – pametni telefoni, tableti, prijenosna računala itd. Istodobno, gledanje će biti jednako prikladno za sve formate - korisnici mobilnih uređaja, na primjer, neće morati proširivati pojedina područja web mjesta kako ne bi propustili željenu vezu.
Responzivni dizajn ima za cilj učiniti web stranice i prikaz njihovog sadržaja primjerenim uređaju na kojem se pregledavaju.
Zašto vam je potreban responzivni web dizajn?
1) Veliki izbor uređaja s kojih možete pristupiti internetu. Trenutno postoji mnogo uređaja koje ljudi koriste, uključujući i za pristup internetu. Svi ti uređaji razlikuju se po veličini zaslona, razlučivosti, a time i načinu na koji se na njima može prikazati web stranica. Stoga je važno da vaša stranica izgleda dobro i da se ispravno prikazuje svakom korisniku, bez obzira koji uređaj koristi.
2) Popularnost mobilnih uređaja s pristupom internetu i povećanje mobilnog internet prometa. Uz sve veću popularnost mobilnih uređaja, osjetno je porastao broj korisnika koji s njih pristupaju web stranicama, pa ih više ne možete jednostavno ignorirati – to nije jedna ili dvije osobe svakih šest mjeseci, to je značajan dio vaše publike, i trebalo bi im biti ugodno koristiti vašu web stranicu (inače to neće činiti).
3) Hitne informacije. Ako vaš resurs sadrži vijesti/hitne informacije, a postoji velika vjerojatnost da će korisnik morati pročitati te informacije s telefona (jer nema drugih uređaja pri ruci) u određenom trenutku, morate se uvjeriti da ima priliku za ovo učiniti.
Razlika između responzivne web stranice i mobilne verzije (aplikacije) web stranice
Mobilne verzije web stranica i mobilnih aplikacija, posebno dizajniranih za različite mobilne uređaje, također rješavaju problem jednostavnosti pregledavanja web stranica, ali imaju i neke nedostatke.
1) Svaka vrsta operativnog sustava zahtijeva vlastitu verziju aplikacije/web stranice. To zahtijeva dodatne resurse, kako vrijeme tako i novac.
2) Potreba za preuzimanjem aplikacije. Kako bi koristili vašu aplikaciju, korisnici je moraju preuzeti. To od korisnika zahtijeva dodatne napore, a mnogi to neće učiniti osim ako nisu potpuno sigurni da im je aplikacija stvarno potrebna i planiraju je redovito koristiti.
3) Odvajanje prometa. Sa stajališta promocije web stranice, mobilna aplikacija nije zgodna jer sav promet resursa dijeli na promet web stranice i promet aplikacije, što će izgledati kao manji promet web stranice.
4) Potreba za integracijom materijala stranice. U slučaju mobilne aplikacije, potrebno je ili sinkronizirati stranicu s aplikacijom (dodatni resursi) ili napraviti dupli posao za popunjavanje stranice i aplikacije materijalima.
Za razliku od mobilnih aplikacija, responzivni dizajn je jedna adresa stranice, jedan dizajn, jedan sustav upravljanja i sadržaj stranice.
Naravno, adaptivni dizajn ima i svoje nedostatke, od kojih je glavni relativna novost tehnologije i, kao posljedica toga, nedostatak dobrih stručnjaka i znanja o dizajniranju adaptivnih web stranica.
Načela responzivnog dizajna
Dizajn počinje s responzivnom verzijom web stranice za mobilne uređaje. U ovoj fazi dizajneri nastoje ispravno prenijeti značenje i glavne ideje koristeći mali ekran i samo jedan stupac. Sadržaj se po potrebi reducira, uklanjaju se blokovi nevažnih informacija i ostavljaju najvažniji.
- Dizajniranje za mobilne uređaje od najranijih faza (“mobile first”);
- Korištenje fleksibilnog rasporeda temeljenog na mreži;
- Korištenje fleksibilnih slika;
- Rad s medijskim upitima;
- Primjena inkrementalnog poboljšanja.
Vrste responzivnih izgleda
Članak na Habrahabru predstavlja glavne vrste adaptivnih izgleda koji trenutno postoje.
1) Guma
Jednostavan za implementaciju i korisniku očigledan tip prezentacije stranice. Glavni blokovi komprimirani su na širinu zaslona mobilnog uređaja, gdje je to nemoguće - preuređeni su u jednu dugačku traku.
2) Prijenos blokova
Očit način za web mjesto s više stupaca: kada se širina zaslona smanji, dodatni blokovi (bočne trake) pomiču se na dno izgleda.
3) Promjena izgleda
Ova je metoda najprikladnija kada čitate web mjesto s različitih uređaja: za svaku razlučivost zaslona razvija se zaseban izgled. Metoda je radno intenzivna, stoga manje popularna od prethodne dvije.
Promjena izgleda. Fragment web stranice LukeW Ideation + Design
4) Prilagodljivost “uz malo krvi”
Vrlo jednostavna metoda koja je prikladna za jednostavne stranice. Postiže se jednostavnim skaliranjem slika i tipografije. Nije baš popularno, jer... nedostaje fleksibilnosti.
Prilagodljivost s malo krvi. Fragment web stranice LukeW Ideation + Design
5) Paneli
Metoda koja dolazi iz mobilnih aplikacija, gdje se dodatni izbornik može pojaviti vodoravnim ili okomitim dodirom. Glavni je nedostatak to što radnje nisu očite korisniku: vrlo je neobično vidjeti mobilnu navigaciju na web stranici. Ali s vremenom bi metoda mogla postati vrlo popularna.
Mora se imati na umu da gore prikazani izgledi nisu univerzalna rješenja - za svaki projekt potrebno je odabrati metodu koja je najprikladnija za potrebe i mogućnosti.
Prisutnost prilagodljivog dizajna je nužna - život je to dokazao svojim rakeom; nijedna mobilna Joomla ne daje takav učinak kao izravna prilagodba stranice. Danas ću vam reći kako napraviti responzivni dizajn uređivanjem CSS stilova koristeći glavu i prste. Neće biti moguće sve opisati u detalje, jer svaki predložak ima svoje nijanse, ali dat ću poticaj da se počne prilagođavati.
Adaptacija za desktop
Prvo ga prilagođavamo za radnu površinu. To je osnovna pozornica, od koje počinje ples uz tamburu. Mnogi ljudi pogrešno percipiraju svijet, misleći da nemaju problema s prikazivanjem stranice na običnim računalima, jer je netko postavio predložak i izgleda glatko u normalnoj razlučivosti. S rezolucijom vašeg monitora da, ali što je s većim ekranom, kako izgledate s apsolutnom i pikselima na ekranu rezolucije 1920x1080? Svrha prilagodbe dizajna je normalan prikaz stranice na mobilnim uređajima i izbjegavanje problema na velikim ekranima.
Što radimo? Glavna stvar je pretvoriti sve velike vrijednosti u CSS predlošku iz piksela (px) u postotke (%). Ovdje postoji nekoliko pravila:
- - Mijenjamo px za % samo za velike vrijednosti, nema potrebe mijenjati 5 px za 1% (na primjer),
- - Obavite sav posao kroz Firebug, a zatim prenesite vrijednosti u stvarni život.
Malo za opće razumijevanje. Imate web stranicu na kojoj je širina stranice 1000 px, ima tri bloka - središnji od 800 px i dva bočna sitebara od 100 px. To znači da će nakon zamjene s postocima veličina stranice postati 100%, središnji spremnik će biti 80%, a bočni blokovi će biti 10%. Grubo, ali razumljivo. Sada malo detaljnije.
Prije adaptacije (spremio sam staru CSS datoteku za povijest), glavni spremnik bio je napisan u stilovima poput ovog:
#container(margin:0 auto;width:1100px; …
Nakon adaptacije je postalo ovako:
#container(margin:0 auto;width:77%;overflow: hidden !important; …
Glavni izbornik je promijenjen iz:
Top-menu>ul>li ul(width:155px; …
Gornji izbornik>ul>li ul(width:90%; …
A pomak bloka sadržaja implementiran je s:
#content(margin:0 220px; …
#sadržaj(margina:0 20% …
Obratite pozornost na kod:
overflow: skriveno !važno;
Koristimo ga za onemogućavanje vodoravnog pomicanja, ovo je korisno za mobilnu prilagodbu; ponekad ima smisla samo označiti zabranu vodoravnog pomicanja pomoću:
overflow-x: skriveno !važno;
Obavite sve radove putem Firebuga ili Google inspektora, provjerite svojim očima - stranica bi trebala izgledati isto nakon pretvaranja px u %. Još ne morate smanjivati zaslon; još nismo stigli do prilagodbe za mobilne uređaje, ali obavili smo osnovni posao za velike zaslone.
CSS za mobilne uređaje
Usput, baza je napravljena, ovo je najteža faza, sada moramo osigurati da se stranica ispravno prikazuje na svim mobilnim uređajima. Malo je prethodnih manipulacija, jer neće biti moguće sve sabiti u postotak za mali ekran. Slažete se, nemoguće je vidjeti 10% široku web traku na pametnom telefonu s rezolucijom od 320 px.
Morat ćemo koristiti @media screen i koji mijenjaju stil za uređaje na određenoj razlučivosti. Najprije sam smanjivanjem zaslona preglednika utvrdio na kojoj razlučivosti imam problema s prikazom. Sužavanjem zaslona pronašao sam svoju točku "zakrivljenosti", počinje na širini od 1000px, što znači da odavde trebate napisati glavne mobilne stilove - sve što će se više prikazati u stilovima obične radne površine i manje u zasebnim stilovima.
Primjer zaslona @media i
Napisao sam CSS za mobilne uređaje na predlošku Joomla 1.5 ovako:
@media screen and (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)
@medijski zaslon i (max-width:400px)(td(word-break:break-all;)
@media screen and (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important) ;) #sadržaj (položaj: auto; širina: 80%;margin-bottom: 0;margin-left: 10%;margin-desno: 20%;) #container (širina: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (veličina fonta: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)
Neke specifičnosti koda.
Kada je širina zaslona manja od 1000 px, bočne trake web-mjesta, zaglavlje, označavanje stranica i podnožje prestaju se prikazivati. Po mom mišljenju, nisu potrebni u mobilnoj verziji. Evo što kod radi:
Brojevi stranica, #footer, #navigation, #header,.logo,.nav-box (prikaz: ništa !važno;).
Prema zadanim postavkama, u mobilnoj Joomli 3 i novijim, bočni blokovi se spuštaju, rastežući stranicu do točke sramote, tako da čak i na novim motorima možete ispraviti neke stvari ručno.
Ostale vrijednosti također su naznačene za blokove glavnog spremnika i prozora sadržaja, a izlaz H1-H4 pretvara se u postotke (pikseli mi odgovaraju za radnu površinu). Ispravci su također napravljeni na izlazu gornjeg izbornika (srećom, potrebno ga je minimizirati, ali to nije kritično i to ću učiniti kasnije) i promijenjen je prikaz slika:
img(max-width:96% !važno;visina:automatski !važno;).
Za njih je naznačeno da je maksimalna veličina slike u širini 96% (s lijepim uvlakama), a visina se postavlja automatski.
Završeno je sa specifičnostima, opet u općem smislu prilagodbe web stranice (dizajna) putem CSS-a.
- - Promijenite velike px vrijednosti u %,
- - Prijavljujemo se zasebno @media screen i za mobilne uređaje.
Preko @media zaslona i obavezno zatvorite blokove prikaza koji su nepotrebni za mobitel, ali pretvorite u % one vrijednosti koje se netočno prikazuju, jer su ostale u pikselima u desktop verziji CSS-a.
Kao rezultat toga, korisničko iskustvo pri radu s Joomla Mobile bilo je 65-70%, s responzivnim dizajnom pomoću CSS-a postalo je 99%. Zaključci su očiti: Yandex i Goole nisu testirani na prilagodljivost, ali sada prolaze s praskom.
Prijevod iznimno vrijednog članka “Responsive Web Design Techniques, Tools and Design Strategies” iz popularne online publikacije za programere Smashing Magazine.
U siječnju smo objavili članak o responzivnom dizajnu, “Responzivni web dizajn: što je to i kako ga koristiti.” Responzivni web dizajn i dalje privlači veliku pozornost, ali s obzirom na to koliko se razlikuje od tradicionalnih metoda razvoja web stranica, može se činiti pretjerano složenim za one dizajnere i programere koji ga nisu isprobali.
Iz tog smo razloga sastavili pregled resursa korisnih pri izradi responzivnih web stranica. Pregled uključuje detaljne vodiče, pristupe, alate i članke koji sadrže praktične savjete potrebne za izradu vlastite responzivne web stranice.
Tehnike responzivnog web dizajna
1. CSS prijelazi i medijski upitiCSS prijelazi i medijski upiti
Elliot Jay Stocks ulazi u detalje o metodi kombiniranja CSS medijskih upita i CSS prijelaza. Osnovna ideja je sljedeća: kada dizajnirate responzivnu web stranicu koristeći Media Queries, stalno mijenjate širinu svog preglednika da vidite kako se web stranica ponaša. Ali svaki put kada se obradi jedan od vaših medijskih upita, vidljiv je kruti prijelaz između stilova (prvi, na primjer, za stolna računala, drugi za tablete). Zašto ne biste upotrijebili CSS prijelaze da izgladite te teške prijelaze animacijom?
Responzivne slike i videozapisi
5. Fluidne slikeGumene slike (skaliranje preglednika)
Gumene slike jedna su od središnjih tema responzivnog web dizajna. Članak Ethana Marcottea daje detaljan pregled njihovog stvaranja pomoću klasičnog isječka koda img (maksimalna širina: 100%; ), kao i sve potrebne dijelove potrebne za početak.
Responzivna e-pošta
14. Optimiziranje vaše e-pošte za mobilne uređaje s medijskim upitomOptimizirajte e-poštu za mobilne uređaje s medijskim upitima
Velike e-poruke često zahtijevaju horizontalno pomicanje za pregled, posebno kada e-pošta ima veliku sliku u prilogu. U ovoj studiji Campaign Monitor objašnjava kako se e-pošta može optimizirati za mobilnu upotrebu Medijski upiti i predložio nekoliko korisnih metoda i isječaka koda za praktičnu upotrebu.
Alati za responzivni web dizajn
Možete dizajnirati adaptivni dizajn od nule ili upotrijebite dolje navedene alate kako biste ubrzali i pojednostavili proces stvaranja.Ovo je brz i lagan Polyfill (dio koda koji dodaje funkcionalnost koju preglednik ne podržava) koji je stvorio Scott Jehl za podršku svojstava min-width i max-width iz CSS3 Media Queries u IE6-IE8 i novijim verzijama.
Upotrijebite informacije iz ovog malog alata za izradu responzivne web stranice.
Alat za brzu izradu prototipova responzivnog dizajna. Možete dizajnirati CSS za razne popularne veličine zaslona, orijentacije i preglednike, bilo da se radi o telefonima (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tabletima (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitorima ili TV prijemnici (720p, 1080p).
Rezultate dizajna možete vidjeti izravno u svom pregledniku i koristiti svoje omiljene razvojne alate, kao što je Firebug. Isprobajte i alternativni alat ScreenFly.
Alat 320 and Up temelji se na principu mobilni prvi(mobile first), gdje je dizajn prvo kreiran za zaslone mobilnih uređaja, a zatim proširen za tablete, stolna računala i veće zaslone. Dobro radi i kao dodatak HTML5 predlošku i samostalno.
Ovo su prilagodljivi predlošci za stvaranje mobilnih web aplikacija bogatih značajkama, visokih performansi. Dobit ćete kompatibilnost s više preglednika za pametne telefone klase A i dobru podršku za starije BlackBerry, Symbian i IE Mobile. Kao i veliki broj različitih optimizacija za mobilne preglednike.
Okviri za responzivni dizajn
33. 1140 CSS mreža1140 CSS Grid je optimiziran za rad na zaslonima u rasponu od veličina mobilnih uređaja do 1280px širokih monitora. To je jednostavna i fleksibilna mreža koja koristi Medijski upiti.
Ovaj CSS okvir dobar je temelj za razvoj na malenim zaslonima (kao što su telefoni) i malim zaslonima (kao što su tableti) uz minimalan napor. Osim toga, postoji generator za stvaranje fleksibilnog CSS okvira za sebe.
Flurid je gumena mrežica sa 6, 7, 8, 9, 10, 12 i 16 kolona.
FluidGrids je modularni generator rešetki koji stvara rasporede od 6, 7, 8, 9, 10, 12 ili 16 stupaca.
CSS okvir za izradu responzivnih izgleda. Sadrži 4 osnovna izgleda i tri seta tipografije.
Fluidan okvir s fokusom na tipografiju.
Tiny Fluid Grid pomoći će vam stvoriti vlastitu fluidnu mrežu od 12, 16 ili 24 stupca, postaviti njihovu maksimalnu i minimalnu širinu i postotak ispune.
Strategije responzivnog dizajna
40. Tijek rada responzivnog dizajneraTijek rada programera responzivnog web dizajna
Luke Wroblewski vodio je bilješke o prezentaciji Ethana Marcottea o primjeni načela responzivnog web dizajna za modernizaciju web stranice jedne od vodećih novina. Između ostalog, Ethan objašnjava kako pristupa metodologiji dizajna responzivnog web dizajna i što je proces izrade prototipa u kontekstu responzivnog web dizajna.
Luke Wroblewski vodio je bilješke na konferenciji Breaking Development Conference tijekom govora Stephena Haya o realnosti dizajna za različite uređaje.
Rasprave i različita gledišta o responzivnom web dizajnu
Ovi članci, iako nisu vodiči, mogu vam dati vrijedne informacije o tome zašto biste trebali koristiti tehnike responzivnog web dizajna (i kada ne).Izvrstan uvod u responzivni dizajn kao način razmišljanja, a ne kao alat ili tehniku. Jeremy Keith tvrdi da se responzivni web dizajn ne može jednostavno dodati kao korak postojećem tijeku rada. Umjesto da težimo savršenstvu piksela, trebali bismo težiti proporcionalnom savršenstvu.
Publikacija je spoj filozofije i strategije prikupljanja najboljih praksi u području responzivnog dizajna.
Redovito ažurirana zbirka web stranica koje koriste medijske upite.
U epizodi 9 Big Web Showa, Jeffrey Zeldman i Dan Benjamin pozvali su Ethana Marcottea da razgovaraju o responzivnom dizajnu.
Izvrstan dodatak članku bio bi blog o responzivnom dizajnu, u kojem programeri dijele svoja iskustva i pišu recenzije responzivnih alata.
Danas većina ljudi pristupa Internetu putem mobilnih gadgeta – tableta, telefona, a po tom pitanju i optimizacija web stranica dolazi na novu razinu. Ako korisnik uđe i vidi da stranica nije optimizirana za mobilne uređaje: slika se ne vidi, gumbi su se pomaknuli, fontovi su mali i nečitljivi, dizajn je iskrivljen - 99 od 100%, da će otići i početi tražiti drugu zgodniju. I označit će okvir da je resurs nevažan, odnosno da ne odgovara upitu za pretraživanje. Stoga je dizajn stranice potrebno prilagoditi različitim mobilnim uređajima. Što je mobilna verzija web stranice, kako je napraviti i koji je način najbolje koristiti? Pročitajte više u ovom članku.
Dakle, četiri su ključna načina za prilagodbu vaše stranice mobilnoj verziji.
Prva metoda - responzivni dizajn
Adaptivni predlošci uključuju promjenu slike web stranice ovisno o veličini zaslona. U pravilu su postavljeni na standardne 1600, 1500, 1280, 1100, 1024 i 980 piksela. Za implementaciju se koriste upiti. Ne mijenja se sam po sebi.
Prednosti ove metode uključuju:
- prikladan razvoj, budući da se sama struktura prilagođava parametrima zaslona, a bilo koje ažuriranje ne zahtijeva razvoj dizajna od nule, dovoljno je ispraviti CSS i HTML;
- jedna URL adresa - korisnik ne treba pamtiti nekoliko naziva, nema potrebe za redirectom (preusmjeravanjem s jedne adrese na drugu), što može zakomplicirati posao webmasteru, a tražilici je lakše sortirati i rangirati resurs s jednom adresom.
Naravno, adaptivni predlošci imaju i svoje nedostatke koji, usput rečeno, nadmašuju njihove prednosti. Ipak, mnogi programeri pridržavaju se ovog koncepta, na primjer, Google Corporation, čija mobilna verzija stranice ima responzivan dizajn. Dakle, nedostaci:
- Responzivni dizajn ne podržava iste zadatke na mobilnom uređaju kao na stolnom računalu. Ako se radi, primjerice, o mobilnoj verziji web stranice banke, gdje će korisnik najvjerojatnije trebati informacije o tečaju ili bankomatima u blizini, onda je ovakav dizajn sasvim dovoljan. Ali ako se radi o složeno strukturiranom resursu s mnogo odjeljaka i pododjeljaka, malo je vjerojatno da će se svidjeti posjetiteljima.
- Sporo učitavanje vašu omiljenu stranicu pretvara u omraženu. To posebno vrijedi za resurse u kojima postoji obilje animacija, videa, skočnih prozora i drugih aktivnih elemenata. Zbog velike težine, stranica će jednostavno "usporiti", korisnik će se naljutiti i otići, a pozicije stranice u pretraživanju će pasti.
- Nemogućnost onemogućavanja mobilne verzije još je jedan značajan nedostatak. Ako je element skriven takvim izgledom, ne možete učiniti ništa da ga otvorite, za razliku od stranica gdje ga možete onemogućiti i prebaciti se na običnu domenu.
Ipak, takva mobilna verzija web mjesta brzo, bez posebnih vještina i troškova, omogućuje vam da prilagodite resurs bilo kojem gadgetu. No, s obzirom na navedene nedostatke, pogodan je za male, jednostavne resurse s minimumom informacija i multimedije, bez složene navigacije i animacije. Za složeno mjesto prikladne su 2 druge metode.
Druga metoda - zasebna verzija stranice
Ova je metoda vrlo uobičajena i često uspješno čini web mjesto lakšim za korištenje na mobilnom uređaju. Njegova je bit stvoriti zasebnu verziju stranice, dizajniranu za aplikaciju i smještenu na zasebnom URL-u ili poddomeni, na primjer, m.vk.com. U isto vrijeme, glavna funkcionalnost je sačuvana, dizajn stranice samo izgleda drugačije. Prednosti ove metode su očite:
- prikladno korisničko sučelje;
- lako se mijenja i uređuje jer verzija postoji odvojeno od glavnog izvora;
- zbog male težine, zasebna verzija stranice radi mnogo brže od adaptivnog predloška;
- Najčešće je moguće prijeći na glavnu verziju stranice s mobilne.
Ali i ovdje postoje neki nedostaci:
- Nekoliko adresa - desktop i mobilne verzije stranice. Kako natjerati korisnika da zapamti dvije opcije? Web majstori često prelaze iz desktop verzije u mobilnu verziju, ali ako ova stranica ne postoji u mobilnoj verziji, korisnik će dobiti grešku. Ovdje nastaju poteškoće s tražilicama, kojima je teško rangirati 2 identična resursa, a to izravno utječe na promociju.
- Mobilna verzija stranice s računala, ako joj korisnik greškom pristupi, izgledat će smiješno, što također može utjecati na promet.
- Ova verzija je često vrlo ogoljena, desktop, tako da će korisnik dobiti vrlo ograničenu funkcionalnost. Ali u isto vrijeme, ako nešto nedostaje, posjetitelj može otići na punu verziju stranice.
Općenito, zasebna mobilna stranica opravdava se i najčešći je način prilagodbe resursa za mobilne uređaje. Popularan je među velikim internetskim trgovinama poput Amazona.
Treći način je RESS dizajn
Google tražilica aktivno podržava ovaj smjer mobilnog dizajna. Ovo je najteža, najskuplja, ali učinkovita metoda prilagodbe web stranice za telefon ili tablet. Zove se RESS. Ovo je ciljanje resursa u mobilnu aplikaciju koja se može preuzeti za svaki uređaj zasebno. Za Android - s GooglePlaya, a za Apple - s iTunesa.
Takve aplikacije su brze, besplatne, praktične i imaju mogućnost smještaja raznih vrsta informacija, a pritom se memorija telefona i internetski promet ne troše toliko kao kod posjete web stranici putem preglednika. Lako im je pristupiti jer će veza uvijek biti na ekranu pri ruci i nema potrebe za unosom složenog naziva u adresnu traku preglednika.
Naravno, tu postoje i nedostaci, kao što su složenost u razvoju, visoki troškovi rada za veliki broj programera i potreba za izradom nekoliko opcija izgleda. Ponekad aplikacija ne prepoznaje mobilni uređaj. Potrebna je redovita tehnička podrška i ispravci grešaka. Ipak, ova se opcija smatra najboljom od tri predložene zbog produktivnog, neprekidnog rada.
Najjeftiniji način za izradu mobilne web stranice
Sve gore navedene metode zahtijevaju, iako ne uvijek dugotrajan i složen, ali ipak plaćeni posao za webmastera. Ako ne vidite hitnu potrebu za takvim razvojem, odgovarat će vam jednostavna i besplatna mobilna verzija stranice. Kako je to najlakše učiniti?
Preuzmite posebne predloške (dodatke) za responzivni dizajn. Na primjer, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i drugi. Oni će vam pomoći da ispravnije prikažete stranicu na svom telefonu, a dobit ćete i nekoliko savjeta što bi trebalo ispraviti kako bi se stranica što bolje prilagodila mobilnoj verziji.
Naravno, ova metoda vjerojatno neće biti prikladna za ozbiljne resurse. Umjesto toga, ova je besplatna značajka namijenjena malim i jednostavnim stranicama, blogovima i izvorima vijesti. Također ne treba zaboraviti da Google tražilica, poput Yandexa, danas postavlja ozbiljne zahtjeve za mobilne verzije, tako da postoji velika šansa da snizite svoje rangiranje ovom metodom.
Ovom metodom najvjerojatnije će oglašavanje i skočni banneri biti odsječeni, ali će se stranica učitavati brzo i bez zastoja.
Principi izrade mobilnih verzija
Nije važno je li mobilna verzija stranice izrađena besplatno ili uz pomoć webmastera, je li izrađena pomoću sustava RESS ili pomoću adaptivnog predloška. Najvažnije je da je za njegovo učinkovito djelovanje potrebno pridržavati se nekoliko iznimno važnih načela. Dakle, kakva bi trebala biti mobilna verzija stranice? Kako ga učiniti produktivnim, učinkovitim i produktivnim?
Uklanjamo sve nepotrebno
Minimalizam je ono čemu bi programer mobilne verzije web stranice trebao težiti. Zamislite koliko je teško uočiti informacije koje su prepune boja, gumba, bannera i koje morate beskonačno listati u potrazi za pravim materijalom. Mobilni dizajn treba biti jednostavan i čist. Odaberite 2-3 boje za podjelu prostora (na primjer, brendirane). Bolje je da je jedan od njih bijeli. Podijelite prostor malog zaslona na jasna i čitljiva područja. Virtualne tipke moraju biti vidljive kako bi korisnik jasno znao gdje treba pritisnuti i vidio – ovdje je proizvod, ovdje je obrazac za popunjavanje podataka, ovdje su podaci o dostavi i plaćanju.
Sve dodatne opcije koje bi bile korisne u desktop verziji i olakšale život korisniku ovdje će donijeti samo komplikacije. Ostavite samo najvažnije elemente. Animacija, reklamni banneri i multimedija najvjerojatnije će samo usporiti rad web stranice ili aplikacije i odvratiti pozornost od glavne stvari.
Poravnanje
Pitanje usklađivanja nije ništa manje hitno, jer ako se ne izvrši ispravno, korisnik će dobiti samo završetke važnih riječi. Općenito je prihvaćeno poravnanje lijevo i okomito. Zamislite da listate kroz feed vijesti na svom telefonu. To radite odozgo prema dolje, ali ne lijevo ili desno.
Udruga
Kada ne postoji mogućnost dugog lanca prijelaza, pokušajte kombinirati nekoliko koraka u jedan. Na primjer, stranica zahtijeva unos podataka u nekoliko faza - ime, zatim adresa, gdje se u svakoj pojedinačnoj ćeliji nalazi zasebna kuća, ulica, stan itd. Kako ne bi prisilili korisnika da pokuša ući u mnoge male ćelije, zamolite ga da ispuni samo 2 - ime i adresu.
I prekid veze
Ponekad je, naprotiv, potrebno odvojiti previše informacija. Na primjer, u padajućem izborniku imate popis više od 80 gradova u kojima se vrši dostava. Grupirajte ih po regijama tako da korisnik ne mora listati kroz ovaj ogroman popis. Kada kursor pomakne preko regionalnog središta ili regije, pojavit će se drugi popis gradova.
Popisi
Usput, o listama. Postoje dva od njih - fiksirana abecednim ili drugim redom i sa zamjenom. Njihov izbor ovisi o tome što će biti navedeno.
Fiksno je zgodno ako korisnik točno zna što traži. Na primjer, grad, broj ili datum. Druga je opcija prikladna za dugačka, složena imena ili za slučajeve kada postoji mnogo varijacija istog imena, a svaka dovodi korisnika korak bliže cilju. Opcija automatske zamjene najčešće se koristi kada je posjetitelju potrebna pomoć. Na primjer, web stranica za pletenje nudi kupnju igala za pletenje. Korisnik unese upit za pretraživanje "Metalne igle za pletenje", au savjetu vidi "Igle za pletenje 5 mm", "Igle za pletenje 4,5 mm" itd.
Automatsko dovršavanje
Ovo se posebno odnosi na stranice na kojima se nešto prodaje na internetu, a vi morate ispuniti standardne obrasce za plaćanje, dostavu itd. Ako osoba kupuje sa svog telefona, najvjerojatnije nema vremena doći do računala , što znači da proces kupnje treba biti što brži i praktičniji.
Da biste to učinili, obrasci mogu sadržavati već popunjene podatke; možete pribjeći najpopularnijim odgovorima. Na primjer, unesite današnji datum, način plaćanja gotovinom, grad, ako radite u istoj regiji. Mogu se mijenjati, ali ako pogodite metu, korisnikovo vrijeme će biti spremljeno.
Sve se čita, sve se gleda
Prilikom izrade dizajna mobilne verzije stranice, imajte na umu da je svačiji telefon drugačiji, pa tako i vizija. Vaša web stranica može se gledati na malom ekranu, stoga bi fontovi trebali biti jednostavni i čitljivi, gumbi bi trebali biti dovoljno veliki da se na njih klikne bez preusmjeravanja na drugu stranicu, a slike bi se trebale otvarati zasebno i velike, posebno kada je u pitanju Internet. trgovina.
Malo statistike
Kada govorimo o prilagodbi web stranice mobilnim uređajima, ne možemo ne posegnuti za statistikom kako bismo shvatili koliko je to važan proces za online promociju.
Brojke su sljedeće. Danas 87% stanovništva koristi gadgete, osim najmlađe djece i nekih starijih osoba. Ekonomisti predviđaju da će mobilna trgovina porasti 100 puta u sljedećih 5 godina. Međutim, samo 21% stranica je prilagođeno za rad s mobilnim uređajima. To znači da internetski promet i tržište e-trgovine zauzimaju tek mali 5. dio.
Razmislite o ovim brojevima. Ima li smisla prilagoditi svoj resurs? Naravno da. Štoviše, iako na ovom tržištu ima toliko slobodnog prostora, na njemu možete izdvojiti vlastiti segment.
Gdje je potrebna mobilna verzija?
Korištenje mobilne verzije preporučljivo je za svaku platformu koja želi dobiti visoku ocjenu. Uostalom, ovo je izravan utjecaj na korisnika, stvarajući mu ugodne uvjete da ostane na vašoj web stranici.
Sljedeće ne može postojati bez mobilne verzije:
- portali s vijestima, budući da su to ono što većina ljudi gleda sa svojih telefona na putu do posla ili škole;
- društvene mreže - iz istog razloga, plus postoji faktor online komunikacije, što znači da se za to mora stvoriti prikladan, razumljiv chat;
- referentne knjige, stranice s navigacijom itd., gdje se ljudi okreću kada nešto traže;
- Internetske trgovine prilika su za privlačenje kupaca koji ne gube vrijeme na kupovinu, već sve kupuju putem mobilnog interneta.
Umjesto zaključka
Danas su mobilne tehnologije u fazi aktivnog rasta i razvoja, stoga, težeći tržišnom vodstvu, svaka tvrtka mora osigurati da njezin internetski resurs ispunjava zahtjeve. Zbog sve većih zahtjeva korisnika stranice je potrebno stalno modernizirati i prilagođavati različitim uređajima. Jasno je da ako je osobi nezgodno biti na određenom resursu, on tamo ne može dobiti informacije o proizvodu ili cijeni, naručiti, saznati o isporuci, tada će pronaći mjesto na kojem će sve to postati moguće. Stoga je za pobjedu u konkurenciji važno imati fleksibilan, prikladan, funkcionalan i zanimljiv resurs.
U tome će vam pomoći mobilna verzija stranice Android ili iOS. Da biste to učinili, potrebno je odabrati jedan od gore navedenih načina redizajna - adaptivni predložak, stvaranje nove stranice na poddomeni i prelazak na nju preusmjeravanjem, korištenje besplatnih predložaka ili izrada mobilne aplikacije pomoću koje korisnik može praktičnije ući i ostati na stranici.
Bok svima! Nedavno sam, nakon što sam pogledao statistiku jednog svog projekta, shvatio da je vrijeme da naučim kako napraviti responzivni dizajn web stranice, odnosno dizajn koji će izgledati dobro kako na stolnim računalima i prijenosnim računalima, tako i na mobilnim uređajima. Pogledajte i sami, nagovještava Metrica.
Kako vam se sviđa ova slika? Možda će u nekim temama postotak mobilnog prometa biti manji, u drugima veći, ali u svakom slučaju više ne možete ignorirati posjetitelje koji vas čitaju sa pametnog telefona ili tableta.
Znate li kako korisnici mobilnih uređaja vide vašu stranicu? Srećom, postoji odličan servis za provjeru - responsinator.com
Ovdje je sve bezobrazno jednostavno - unesete adresu stranice i vidite kako to izgleda na mobilnim uređajima. Uzmimo primjer bloga koji je vjerojatno svima poznat.
Alexander Borisov ima prekrasan predložak, odmah se vidi da je puno novca uloženo u dizajn i izgled. Međutim, čitanje bloga s telefona vrlo je nezgodno i ne bi me iznenadilo da je postotak neuspjeha među korisnicima mobilnih uređaja puno veći nego među onima koji stranici pristupaju s računala.
Što uraditi? Postoje dva izlaza: ostavite sve kako jest i gledajte kako drugi projekti zaobilaze vaš u rezultatima tražilice ili učinite dizajn svoje web stranice prilagodljivim.
Što je responzivni dizajn
U početku nisam vidio razliku između prilagodljivog i "fluidnog" izgleda, kada se veličine blokova mijenjaju ovisno o širini zaslona. Međutim, postoji razlika.
Responzivni dizajn ne samo da se rasteže ili skuplja u širinu, on se prilagođava veličini zaslona, ponekad potpuno mijenjajući stil blokova.
Najjednostavniji primjer: područje sadržaja rastegnuto je preko cijele širine zaslona, a bočna traka je ili pomaknuta prema dolje ili potpuno nestaje sa stranice. Ili se izbornik pretvara iz običnog horizontalnog u padajući popis.
Kako napraviti responzivni dizajn za svoju web stranicu
Ovisno o vašem proračunu i poznavanju CSS/HTML-a, može postojati nekoliko opcija.
Naručite prilagodljivi izgled od freelancera
Najispravnija opcija, po mom mišljenju, ujedno je i najnepopularnija. Jer zadovoljstvo nije jeftino. Pa ipak, ako sredstva dopuštaju, a nema želje za razumijevanjem zamršenosti izgleda, bolje je pronaći studio ili freelancera koji će vaš predložak prilagoditi mobilnim uređajima ili napraviti novi. A već znate kako provjeriti njegov rad na uređajima s različitim rezolucijama - responsinator.com vam može pomoći.
Pronađite gotov dizajn
Nedavno, gotovo svi dizajneri pokušavaju prilagoditi svoje predloške za mobilne uređaje. Možete potražiti gotov dizajn, na primjer, ovdje:
- www.templatemonster.com jedna je od najpopularnijih kolekcija plaćenih predložaka za razne CMS i samo HTML stranice.
- www.templatemo.com - mnoge besplatne mogućnosti modernog dizajna.
Ova je opcija prikladna za one koji ne jure za ekskluzivnim dizajnom ili su u mogućnosti napraviti vlastite izmjene u kodu kako bi predložak bio jedinstven.
Koristite okvire
Okvir - moglo bi se reći okvir predloška, njegovih glavnih datoteka i mreže blokova. Dizajneri ih vole zbog njihove jednostavne upotrebe i uštede vremena, jer vam gotov predložak "riba" omogućuje da ne gubite vrijeme na rutinu. Ako znate raditi s okvirima, njihovo korištenje za izradu responzivnog dizajna izvrsno je rješenje.
Na Habréu ćete pronaći ogroman popis prilagodljivih okvira za svačiji ukus. Ali većina ih je prilično teška za korištenje i teška su. Stoga, za one koji vole minimalizam, preporučujem još jedan popis laganih prilagodljivih okvira s Beloweb.ru. U isto vrijeme, bolje pogledajte blog, ima puno korisnih "dobrina" za dizajnere i dizajnere izgleda.
Napravite raspored sami
Ova metoda je za one koji ne traže jednostavne načine i žele sve sami shvatiti. U biti, da bi vaš predložak bio responzivan, trebate koristiti dvije stvari:
Meta oznaka vidnog polja
Koji određuje vrstu uređaja s kojeg je posjetitelj pristupio stranici i postavlja točnu širinu zaslona. Samo kopirajte ovaj kod u glavu svoje stranice.
@medijsko pravilo
Zahvaljujući tome možemo pisati različite stilove za iste blokove u našoj css datoteci. Izgleda otprilike ovako:
#left( širina: 600px; float: lijevo; margin-desno: 10px; ) #desno( širina: 400px; float: desno; ) @medijski samo zaslon i (maks. širina: 1010px)( #lijevo, #desno( širina : 98%; margina: 10px auto;
U ovom primjeru blok #lijevo ima širinu od 600 piksela i nalazit će se lijevo od bloka #pravo 400 piksela širine. Ali ako je razlučivost monitora manja od 1010 piksela, uklanjamo omot s oba bloka i rastežemo ih na 98% širine zaslona.
I ovako trebate napisati pravila za sljedeće veličine zaslona:
- 320px za iPhone 3-5 u okomitom položaju
- 480px za iPhone 3-4 u vodoravnom položaju
- 568px za iPhone 5 vodoravno
- 384px za pametni telefon u okomitom položaju
- 600px za pametni telefon u vodoravnom položaju
- 768px za iPad pejzaž
- 1024px za iPad u okomitom položaju
Potpuni popis rješenja može se pronaći na responsinator.com ili u izvješću Yandex.Metrica za vašu stranicu (odjeljak Tehnologije/Rezolucije zaslona). Jednom riječju, onima koji su upoznati s izgledom web stranice neće biti teško razumjeti ovo pitanje.
Znate, rijetko dajem poveznice na plaćene tečajeve (jer nikad ne preporučujem nešto što sam nikada nisam koristio), ali ovo je doista najbolji materijal za obuku o izgledu koji sam ikada gledao. Zahvaljujući Mikhailu moj predložak bloga sada nije samo prilagođen različitim razlučivostima zaslona, postao je lakši od prethodne verzije i bolje je optimiziran za tražilice.
Usput, ako čitate članak s mobilnog telefona, napišite je li sve na mjestu, je li sve zgodno? To je sve za danas. Ako imate bilo kakvih pitanja ili dodataka, dobrodošli u komentare; kao i uvijek, otvoreni su za sve.
