Prilagodljivi web-izgledi za mobilne zaslone uvod, savjeti i primjeri

Ovaj članak je dio našeg "Serija web-prilagodljivih dizajna" - koji se sastoji od alata, resursa i tutorijala koji će vam pomoći izraditi web-mjesta za korisnike svih platformi. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Dizajneri su sada teže nego prije. Ne samo da moramo dizajnirati stacionarne uređaje, nego i mobilne uređaje poput tableta i pametnih telefona, a budući da ovdje govorimo o mnogo različitih veličina zaslona i rezolucija, to je veliki zadatak. U svjetlu ovoga, odgovarajući web dizajn može biti najbolje rješenje. Nudi više od jednostavnog mobilnog predloška; umjesto toga, cijeli izgled web-lokacije dizajniran je tako da bude dovoljno fleksibilan da se uklopi u svaku moguću razlučivost zaslona.

S takvom shemom dizajna tekućine postoje očite prednosti i nedostaci. Razmotrite moje primjere u nastavku za način na koji web-dizajn koji reagira može učiniti prijelaz u mobilne uređaje jednostavnijim.

Kako djeluje odgovarajući dizajn

Kad koristim riječ “uzvratni” u smislu web dizajna mislim da cijeli izgled odgovara na temelju razlučivosti korisnika. Zamislite ovaj scenarij: čitate web-lokaciju na jednom tabletu, a zatim se prebacite na drugi uređaj iz nekog razloga. Prozor preglednika sada je promijenjen. Odgovarajući izgled web-dizajna sadržavat će sheme i raspored koji će se graciozno raspasti i ponovno izumiti. Iz perspektive iskoristivosti ovo je sjajna tehnika.

Osjetljiv dizajn je sve o stvaranju homogenog iskustva bez obzira na veličinu zaslona preglednika ili uređaja. Pronašao sam savršen primjer iz 'A List Apart' kako bih ilustrirao svoju točku, koja također uključuje dinamičke slike. Širina se postavlja u CSS-u pomoću postotaka za većinu svih internih elemenata spremnika. Veća web-mjesta također dobro reagiraju na uklanjanje dinamičkog sadržaja kao što je JavaScript kada nije podržan.

Zašto dizajn za mobitel?

Postalo je očito da se više korisnika kreće mobitelom, a ne samo za pregledavanje weba u pokretu. Tablet računala su se počela mijenjati u kontekstu kada su korisnici online u učionici. Projektiranje za mobitele svakako je zahtjev u modernim web standardima. Jedini problem je odabir načina razvoja i odgovarajuće ciljanje publike.

Kada započnete kodiranje za određene razlučivosti zaslona, završite s previše stilskih listova za rješavanje. Medijski upiti u CSS3 mogu se upotrijebiti za izradu izgleda specifičnih za iPhone za portretni i pejzažni prikaz. Budući da možete unaprijed odrediti gustoću piksela, lako je obnoviti bilo koji HTML predložak za mobitel.

(Izvor slike: bradfrostweb)

Ali kada kodirate izgled za odgovarajući dizajn, mobilni se aspekti podrazumijevaju. I desktop i mobilnim korisnicima bit će ponuđeno slično iskustvo i nećete morati brinuti o vanjskim CSS svojstvima. Jedino istraživanje koje je potrebno izvršiti je planiranje za najmanji mogući zaslon. Podaci o prometu usluge Google Analytics mogu biti vrlo korisni za to.

Vjerojatno nećete postići da vaša web-lokacija radi 100% na svakom uređaju na kojem se pokreće svaki preglednik. Ali možete ciljati većinu na temelju prosječne širine zaslona. Stariji iPhone modeli koriste 320 × 480 razlučivost zaslona koja nije tako nevjerojatna. Ja bih pucao za minimalnu širinu od 240 piksela, ili čak i manju ako je možete smjestiti.

Uklanjanje zadanog zuma

Ako ste u bilo koje vrijeme pregledavali web na pametnom telefonu, primijetit ćete kako su web-mjesta skalirana kako bi se u potpunosti prikazali na zaslonu. Ovo je za korisnikovu pogodnost jer većina web-mjesta nema mobilnu kopiju, tako da je puni izgled najsigurnija oklada.

Ali kada uđete u izgradnju prilagodljivog mobilnog dizajna, automatsko zumiranje može zbuniti vaše elemente izgleda. Konkretno, slike i sadržaj za navigaciju mogu izgledati mali ili preveliki u vašem izgledu. Postoji posebna meta oznaka koju možete dodati u zaglavlje dokumenta koji ovo poništava u većini Android i iPhone uređaja.

To je poznato kao meta oznaka vidnog okvira koja postavlja neke prilagođene varijable unutar sadržaja. Apple ima stranicu s dokumentacijom koja se odnosi na nekoliko drugih meta oznaka koje biste trebali pogledati, iako su oni posebno prilagođeni web-lokacijama na iOS-u. Početni razmjera Vrijednost je važna jer to postavku web-lokacije postavlja na 100% zumiranje.

Zadnja vrijednost za korisnički skalabilan uklonit će ovu funkcionalnost zumiranja, tako da korisnik ne može promijeniti veličinu izgleda. To će zaključati dizajn u jednu veličinu na temelju pune širine uređaja. Imajte na umu da čak i ako onemogućite funkciju zumiranja, dobar odaziv dizajna i dalje će se prilagoditi pri prelasku s portreta na krajolik na bilo kojem uređaju! Ali ima smisla zaključati odgovarajući dizajn i ukloniti općenite opcije skaliranja.

Skaliranje dinamičke slike

Slike su još jedan važan aspekt praktički svake web stranice. Korisnici mobilnih uređaja možda ne žele emitirati videozapise, ali fotografije su potpuno druga priča. To su ujedno i najveći krivci kada su u pitanju modeli koji izbijaju iz modela.

img max-width: 100%;

Standardno pravilo za CSS je primijeniti svojstvo max-width na sve slike. Budući da će uvijek biti postavljeni na 100%, nikada nećete primijetiti iskrivljenja. Kada korisnik promijeni veličinu prozora preglednika manju od slike koju može podnijeti, ona će se automatski ponovno podesiti na 100% širinu. Problem je u tome što Internet Explorer ne razumije ovo svojstvo, pa ćete morati upotrijebiti tablicu stilova za IE širina: 100%;.

Fleksibilne slike su također moguće ako koristite JavaScript ili jQuery dodatke. Postoje neki stvarno pametni razvojni inženjeri koji su uložili vrijeme u izgradnju nevjerojatno kvalitetnog slikovnog sadržaja. Ova je nit samo jedna od mnogih u Stack Overflowu koja ima čudan, ali prikladan pristup rješavanju bugova IE6 / 7.

Ja osobno bih preporučio držanje prirodne CSS slike. Ako se vaša web-lokacija izvodi u mobilnom pregledniku s omogućenim JavaScriptom, najvjerojatnije može podržavati i CSS. Ako doista želite kopati dublje, pogledajte ove 24-članske slike za Adaptive Designs ...

Touching dizajni

Web programeri mogu zaboraviti da mobilni korisnici više nisu na telefonima s tipkovnicom kao što je BlackBerrys. Većina pametnih telefona danas koristi sučelja osjetljiva na dodir, koja prikazuju scenarij koji se razlikuje od postavki miša i tipkovnice.

Kao takav morat ćete razmotriti alternativna rješenja u mobilnim elementima. Padajući izbornici mogu bolje funkcionirati kada se prikazuju kao jedan izbornik na desnoj strani. Većina korisnika može dodirnuti veze na desnoj strani lakše nego lijevo, ali oba stupca rade kako bi ublažila prostor. Pomoću alineja za margine jednostavno je identificirati hijerarhiju veza bez potrebe za bilo kakvim jQuery kodom.

Također je dobra praksa povećati veličinu tih navigacijskih veza. Korisnici mobilnih uređaja nemaju luksuz velikog zaslona na stolnim računalima ili čak prijenosnim računalima. Morate zadržati tekst velik, unaprijed, brzo i lako čitati po svaku cijenu. Možda čak želite promijeniti veličinu ako korisnik prebacuje između prikaza portreta i pejzaža - prilično uobičajeno ponavljanje prilikom pregledavanja mobilnog weba.

Prilagođeni CSS izgledi

Općenito je najbolje prilagoditi izgled i omogućiti prirodnu degradaciju sadržaja. Ako imate bočnu traku i područje sadržaja, trebali biste ih postaviti u širinu postotaka ili ems, sve što će se promijeniti u prozoru preglednika. Ako primijenite a min širine to će na kraju prekinuti dio rasporeda; tako da sad sadrľaj bočne trake prikazuje iznad sadržaja stranice.

(Izvor slike: Pepperson)

Kada uzmete u obzir kako to utječe na cjelokupni dizajn, mnogo je lakše razviti vanjske stilske listove. Međutim, vjerojatno ćete naići na razlučivosti zaslona koje su premale za prikaz. Ovo je savršen scenarij za dodavanje prilagođenih svojstava CSS-a za uklanjanje dijelova stranice ili potpuno ponovno formatiranje sadržaja.

Uključivanje / isključivanje dodatnog sadržaja

Primjeri velikih blokova sadržaja uključuju web-obrasce, dinamičke izbornike, slikovne klizače i druge slične ideje. Umjesto potpunog uklanjanja tih elemenata jer se raspored smanjuje, zašto ih jednostavno ne možete sakriti u a “svesti na minimum” sadržaj div? Za izvođenje uređivanja možete koristiti CSS ili JavaScript, ali ćete u konačnici vjerojatno trebati neki JS kod za izradu prekidačkog gumba.

Ova alternativa je savršena za održavanje dinamične i početne stranice bogate web-medije. Umjesto potpunog uklanjanja padajuće navigacije ili preuređivanja strukture stranice, možete je sakriti unutar sadržaja div. Ako korisnik želi prikazati svoje veze, dodirnu prekidač za otvaranje / zatvaranje izbornika.

Ovo oblikovanje jednostavno je, intuitivno i jednostavno za korištenje na uređajima osjetljivim na dodir. Unutar odjeljka div možete smjestiti svaki od padajućih izbornika rame uz rame u formatu stupca. Kao što je prozor mijenja još manji oni će prirodno padati jedan ispod drugog i povećati visinu stranice. Ipak, mogućnost kolapsa cijelog izbornika je lako dostupna i samo jednim dodirom. Ovaj preklopnik div je također savršen za slikovne klizače u suradnji s dinamičkom promjenom veličine fotografije.

Upotreba upita za medije

Ako bi zaslon s mobilnim uređajem prekinuo prikaz 2 ili 3 stupca, završit ćete tako da se svaka od područja sadržaja međusobno slaže jedna iznad druge. Čini se da cijela lokacija krvari i može biti vrlo zbunjujuća bez istaknutih blokova. Bolja ideja je dodati donju granicu na svaki stupac, samo za mobilne uređaje, koristeći vanjsku stilsku ploču mobile.css.

S tim novim stilovima vaš sadržaj je podijeljen u djeljive dijelove. Gore navedeni medijski atribut posebno je dizajniran za ciljanje starijih uređaja iPhone u pejzažnom pogledu. Ali to će se također primijeniti na uređaje s ekranima manjim od 480 piksela. Koristite ovo u svoju korist tako da možete odrediti u kojem trenutku izgleda “raspada”.

Postoji još nekoliko opcija koje možete koristiti za otkrivanje orijentacije uređaja. Ovaj fantastičan vodič za CSS medije može vam dati nekoliko ideja. Osim toga, novi mobilni projekt 320 i gore nudi predložak za mobilni CSS @media stilova. Oni se mogu izravno uključiti u istu datoteku mobile.css i primijeniti pravila za mnoge različite uređaje.

 / * Smartphone (portret i pejzaž) ----------- * / @media samo zaslon i (min-device-width: 320px) i (max-device-width: 480px) / * Stilovi * / / * Smartphone (pejzažni) ----------- * / @media samo zaslon i (min-width: 321px) / * Styles * / / * Smartphone (portret) ---- ------- * / @media samo zaslon i (max-width: 320px) / * Stilovi * / / * iPads (portret i pejzaž) ----------- * / @ zaslon samo za medije i (min-device-width: 768px) i (max-device-width: 1024px) / * Styles * /

(Izvor: Hardboiled CSS3 Media Queries)

Korisni alati

Skeleton - Prekrasna podloga za prilagodljiv mobilni dizajn
Prelazak iz prilagodljivog u potpuno odgovarajući

Showcase: Lijepi prilagodljivi dizajni

Nadam se da će vas ovi savjeti i dizajnerske tehnike potaknuti na izgradnju uzbudljivih odgovarajućih izgleda ne samo za mobilne zaslone, već i za sve uobičajene uređaje s pregledavanjem weba. Da bi kreativni sokovi ostali u tijeku, sastavio sam mali izlog odgovornih mobilnih web dizajna. Svakako provjerite neke od jedinstvenih značajki i podijelite svoja razmišljanja o dizajnu ili temi u području za raspravu.

objesiti mjesec