Odzivne spletne postavitve za mobilne zaslone Uvod, nasveti in primeri

Ta članek je del našega »Serija spletnih oblikovalskih rešitev« - sestavljena iz orodij, virov in vadnic, ki vam bodo pomagala ustvariti spletne strani za uporabnike vseh platform. Klikni tukaj da si ogledate več člankov iz iste serije.

Oblikovalci imajo zdaj težje kot prej. Ne samo, da moramo oblikovati stacionarne naprave, ampak tudi mobilne naprave, kot so tablični in pametni telefoni, in ker govorimo o veliko različnih velikostih zaslona in resolucijah, je to velika naloga. V luči tega, odzivno spletno oblikovanje najboljša rešitev. Ponuja več kot le preprosto mobilno predlogo; Namesto tega je celotna postavitev mesta zasnovana tako, da je dovolj prilagodljiva, da se prilega vsaki možni ločljivosti zaslona.

Pri takšni shemi oblikovanja tekočin obstajajo očitne prednosti in slabosti. Razmislite o mojih primerih spodaj za to, kako lahko odziven spletni dizajn omogoči lažji prehod v mobilne naprave.

Kako deluje odzivno oblikovanje

Ko uporabim besedo “odzivno” v smislu spletnega oblikovanja mislim, da se celotna postavitev odziva na podlagi uporabnikove ločljivosti zaslona. Predstavljajte si ta scenarij: berete spletno mesto na eni tablici, nato pa prek enega ali drugega razloga preklopite na drugo napravo. Okno brskalnika je zdaj spremenjeno. Odzivna postavitev spletnega oblikovanja bo vključevala sheme in postavitev, ki se elegantno razčleni in izumlja. Z vidika uporabnosti je to odlična tehnika.

Odzivno oblikovanje je namenjeno ustvarjanju homogene izkušnje, ne glede na velikost zaslona brskalnika ali naprave. Za ilustracijo moje točke, ki vključuje tudi dinamične podobe, sem našel odličen primer iz 'A list Apart'. Širina je nastavljena v CSS z uporabo odstotkov za večino vseh notranjih elementov vsebnika. Večja spletna mesta se dobro odzivajo tudi na odstranjevanje dinamične vsebine, kot je JavaScript, ko ni podprta.

Zakaj načrtovati za mobilne naprave?

Postalo je očitno, da je več uporabnikov mobilnih in ne samo za brskanje po spletu. Tablični računalniki so se začeli spreminjati v kontekstu, ko so uporabniki v razredu na spletu. Oblikovanje za mobilne naprave je vsekakor zahteva sodobnih spletnih standardov. Edini problem je, da izberete način razvoja in ustrezno ciljate na vaše občinstvo.

Ko začnete kodirati za določene ločljivosti zaslona, končate s preveč stili za obravnavo. Poizvedbe medijev v CSS3 se lahko uporabijo za izdelavo postavitev, specifičnih za iPhone, tako za portretni kot za ležeči pogled. Ker lahko določite gostoto slikovnih pik, je preprosto preoblikovati katerokoli HTML predlogo za mobilne naprave.

(Vir slike: bradfrostweb)

Toda, ko kodirate postavitev za odziven dizajn, se za mobilne vidike poskrbi privzeto. Oba namizja in mobilnih uporabnikov bodo imeli podobne izkušnje in vam ne bo treba skrbeti za zunanje lastnosti CSS. Edina raziskava, ki bi jo potrebovali, je načrtovanje za najmanjši možni zaslon. Za to so lahko zelo koristni podatki o prometu v storitvi Google Analytics.

Vaša spletna stran verjetno ne bo delovala 100% na vsaki napravi, v kateri je nameščen vsak brskalnik. Lahko pa ciljate na večino na podlagi povprečne širine zaslona. Starejši modeli iPhone uporabljajo ločljivost zaslona 320 × 480, ki ni tako neverjetna. Streljam najmanjšo širino 240 px ali celo manjšo, če jo lahko namestite.

Odstranjevanje privzetega povečave

Če ste brskali po spletu na pametnem telefonu, boste opazili, kako so spletna mesta razširjena, da se v celoti prikažejo na zaslonu. To je za uporabnika udobje, saj je večina spletnih strani nimajo mobilnega kolega, zato je celotna postavitev najvarnejša stava.

Ko pa se lotite gradnje odzivnega mobilnega dizajna, lahko samodejno povečanje resnično uniči vaše elemente postavitve. Slike in navigacijska vsebina se lahko v vaši postavitvi zdijo majhne ali prevelike. Obstaja posebna meta oznaka, ki jo lahko dodate v glavo dokumenta, ki jo ponastavite v večini naprav Android in iPhone.

To je znano kot metaoznaka za prikazni prikaz ki določa nekatere spremenljivke po meri v vsebini. Apple ima dokumentacijsko stran v zvezi z nekaterimi drugimi meta oznakami, ki bi jih morali preučiti, čeprav so ti posebej prilagojeni spletnim mestom v sistemu iOS. The začetno merilo Vrednost je pomembna, ker to privzeto poveča vašo spletno stran na 100% povečavo.

Zadnja vrednost za uporabniško prilagodljiva ta funkcija povečanja bo popolnoma odstranila, tako da uporabnik ne more spremeniti velikosti postavitve. To bo zaklenilo zasnovo v eno velikost glede na celotno širino naprave. Upoštevajte, da tudi če onemogočite funkcijo povečave, se bo odzivni dizajn še vedno prilagajal pri prehodu iz portretne v pokrajino na kateri koli napravi! Toda smiselno je zakleniti odzivno zasnovo in odstraniti splošne možnosti skaliranja.

Skaliranje dinamične slike

Slike so še en pomemben vidik praktično vsake spletne strani. Uporabniki mobilnih naprav morda ne želijo pretakati videoposnetkov, vendar so fotografije povsem drugačna. To so tudi največji krivci, ko gre za postavitve, ki izbruhnejo iz modela.

img max-width: 100%;

Standardno pravilo za CSS je, da za vse slike uporabite lastnost max-width. Ker bodo vedno nastavljeni na 100%, nikoli ne boste opazili izkrivljanj. Ko uporabnik spremeni velikost svojega okna brskalnika, ki je manjši od slike, se bo samodejno ponovno prilagodila na 100% širino. Težava je v tem, da Internet Explorer ne razume te lastnosti, zato boste morali sestaviti poseben slog slogov IE širina: 100%;.

Prilagodljive slike so možne tudi, če uporabljate vtičnike JavaScript ali jQuery. Obstaja nekaj resnično pametnih razvijalcev, ki so postavili čas za izgradnjo izjemno odzivne slikovne vsebine. Ta nit je samo eden od mnogih v Stack Overflow, ki ima čudovit, a priročen pristop k reševanju bugov IE6 / 7.

Jaz bi osebno priporočam, da se držijo naravnega spreminjanja slike CSS. Če se vaše spletno mesto izvaja v mobilnem brskalniku, ki ima omogočen JavaScript, najverjetneje podpira tudi CSS. Če res želite kopati globlje, si oglejte ta članek 24 člankov Slike za prilagodljive oblike…

Dotaknjeni modeli

Spletni razvijalci lahko pozabijo, da mobilni uporabniki niso več na telefonih s tipkovnico, kot je BlackBerrys. Večina pametnih telefonov danes uporablja vmesnike z zaslonom na dotik, zaradi česar je scenarij drugačen od nastavitev miške in tipkovnice.

Kot take boste morali razmisliti o alternativnih rešitvah v mobilnih elementih. Spustni meniji lahko delujejo bolje, če so prikazani kot en sam meni na desni strani. Večina uporabnikov lahko hitreje prikliče povezave na desni strani kot levo, vendar pa je v obeh stolpcih olajšan prostor. Z uporabo zamikov robov je preprosto identificirati hierarhijo povezav, ne da bi potrebovali kodo jQuery.

Prav tako je dobra praksa, da povečate velikost teh navigacijskih povezav. Mobilni uporabniki nimajo razkošja velikih zaslonov na namiznih računalnikih ali celo prenosnih računalnikih. Besedilo mora biti veliko, vnaprej, zlahka in zlahka berljivo. Morda boste celo želeli spremeniti velikost, če uporabnik preklopi med pokončnim in ležečim pogledom - kar je precej pogosta ponovitev med brskanjem po mobilnem spletu..

Postavitve CSS po meri

Na splošno je najbolje prilagoditi svojo postavitev in omogočiti naravno poslabšanje vaše vsebine. Če imate stransko vrstico in področje vsebine, ju morate nastaviti v širini odstotkov ali ems, vse, kar se bo spremenilo z oknom brskalnika. Če uporabite a min-width to bo sčasoma prekinilo del postavitve; zdaj se vsebina stranske vrstice prikaže nad vsebino strani.

(Vir slike: Pepperson)

Ko razmišljate, kako to vpliva na celotno obliko, je veliko lažje razviti zunanje slogovne sloge. Vendar boste verjetno naleteli na ločljivosti zaslona, ki so le premajhne, da bi se vaša postavitev prikazala. To je popoln scenarij za dodajanje lastnosti CSS po meri za odstranitev delov strani ali za ponovno formatiranje vsebine v celoti.

Vklop / izklop dodatne vsebine

Primeri velikih vsebinskih blokov so spletne oblike, dinamični meniji, slikovni drsniki in druge podobne zamisli. Namesto popolnega odstranjevanja teh elementov, ker postavitev postane manjša, zakaj jih preprosto ne skrijete v a “zmanjšali” vsebina div? Za izvajanje sprememb lahko uporabite CSS ali JavaScript, vendar boste na koncu verjetno potrebovali kodo JS, da ustvarite gumb za preklop.

Ta alternativa je kot nalašč za vzdrževanje vaše domače strani dinamično in polno bogatih spletnih medijev. Namesto popolnega odstranjevanja padajoče navigacije ali preurejanja strukture strani, jo lahko skrijete v razdelku vsebine. Če želi uporabnik prikazati vaše povezave, se dotakne preklopnega gumba, da odpre / zapre meni.

To oblikovanje je preprosto, intuitivno in preprosto za uporabo na napravah z zaslonom na dotik. Znotraj razdelka lahko vsak od spustnih menijev postavite vzporedno v obliki stolpca. Ker se okno spremeni še manjše, se spusti pod drugo in poveča višino strani. Vendar pa je možnost, da bi celoten meni zrušil, enostavno dosegljiva in samo en dotik stran. Ta preklopni div je tudi idealen za slikovne drsnike v sodelovanju z dinamičnim spreminjanjem velikosti fotografij.

Uporaba poizvedb za medije

Če bi zaslon mobilnega telefona prekinil vašo postavitev v dveh ali treh stolpcih, boste na koncu naleteli na vsako od področij vsebine. Celotno območje bi se zdelo, da bi se krvavilo in bi lahko postalo zelo zmedeno brez razpoznavnih blokov. Boljša ideja je dodati spodnjo mejo na vsak stolpec, samo za mobilne naprave, z uporabo zunanjega sloga mobile.css.

S temi novimi stili se vaša vsebina razdeli na deljive dele. Zgoraj navedeni atribut medija je posebej zasnovan za ciljanje starejših naprav iPhone v ležečem pogledu. Velja pa tudi za naprave z zasloni, manjšimi od 480 slikovnih pik. Uporabite to v svojo korist, tako da lahko določite, v kateri točki postavitve “prekine”.

Za odkrivanje usmerjenosti naprave lahko uporabite še nekaj možnosti. Ta fantastični vodnik o CSS medijih vam lahko ponudi nekaj idej. Poleg tega novi mobilni projekt 320 in up ponuja predlogo za mobilni CSS @media stilov. Te lahko vključite neposredno v isto datoteko mobile.css in uporabite pravila za veliko različnih naprav.

 / * Pametni telefoni (pokončno in ležeče) ----------- * / @media samo zaslon in (min-device-width: 320px) in (max-device-width: 480px) / * Styles * / / * Pametni telefoni (pokrajina) ----------- * / @media samo zaslon in (min-width: 321px) / * Slogi * / / * pametni telefoni (portret) ---- ------- * / @media samo zaslon in (max-width: 320px) / * Slogi * / / * iPads (pokončno in ležeče) ----------- * / @ zaslon samo za medije in (min-device-width: 768px) in (max-device-width: 1024px) / * Styles * /

(Vir: Poizvedbe v trdem mediju CSS3)

Koristna orodja

Skeleton - lepa predpogoj za odzivno mobilno oblikovanje
Prehod iz prilagodljivega v popolno odzivnost

Predstavitev: lepe odzivne oblike

Upam, da vam bodo ti nasveti in tehnike oblikovanja spodbudili, da se premaknete v smeri ustvarjanja vznemirljivih odzivnih postavitev ne le za mobilne zaslone, temveč za vsako skupno napravo s spletnim brskanjem. Da bi ustvarjalni sokovi ostali tekoči, sem sestavil majhno predstavitev odzivnih mobilnih spletnih modelov. Bodite prepričani, da preverite nekaj bolj edinstvenih funkcij in delite svoje misli o oblikovanju ali temi v območju za razprave.

obešanje lune