Zodpovedajúce webové rozloženia pre mobilné obrazovky - intro, tipy a príklady

Tento článok je súčasťou nášho "Web Responsive Design series" - ktoré obsahujú nástroje, zdroje a návody, ktoré vám pomôžu vytvoriť webové stránky pre používateľov všetkých platforiem. Kliknite tu zobraziť ďalšie články z rovnakej série.

Dizajnéri to dnes už ťažšie ako predtým. Musíme nielen navrhnúť pre stacionárne zariadenia, ale aj pre mobilné zariadenia, ako sú tablety a smartphony, a keďže tu hovoríme o množstve rozličných veľkostí a rozlíšení obrazovky, je to obrovská úloha na rameno. Vzhľadom na to, citlivý dizajn webu môže byť najlepším riešením. Ponúka viac než len jednoduchú mobilnú šablónu. Namiesto toho je celé rozloženie stránok navrhnuté tak, aby bolo dostatočne flexibilné, aby sa zmestili do akéhokoľvek možného rozlíšenia obrazovky.

Pri takejto schéme navrhovania kvapalín existujú zjavné výhody a nevýhody. Zoberme si do úvahy moje príklady nižšie, ako citlivá webová aplikácia môže urobiť prechod na mobilné zariadenia hladší.

Ako reaguje dizajn

Keď používam slovo “citlivý” z hľadiska webového dizajnu myslím, že celé usporiadanie reaguje na základe rozlíšenia obrazovky používateľa. Predstavte si tento scenár: čítate webové stránky na jednej tablete a potom z iného dôvodu prejdete na iné zariadenie. Okno prehliadača je teraz zmenené. Rozpoznateľné usporiadanie webového dizajnu bude obsahovať schémy a rozloženie, ktoré sa elegantne rozdelia a znovuobjavia. Z hľadiska použiteľnosti je to brilantná technika.

Zodpovedajúci dizajn má za cieľ vytvoriť homogénny zážitok bez ohľadu na veľkosť obrazovky prehliadača alebo zariadenia. Našiel som dokonalý príklad z "A List Apart" na ilustráciu môjho bodu, ktorý obsahuje aj dynamické obrazy. Šírka je nastavená v CSS pomocou percenta väčšinou všetkých vnútorných kontajnerových prvkov. Väčšie webové stránky taktiež dobre reagujú na odstránenie dynamického obsahu, ako je napríklad JavaScript, ak to nie je podporované.

Prečo návrh pre mobil?

Je zrejmé, že viac používateľov sa stáva mobilným, a to nielen pre prehliadanie internetu na cestách. Tabletové počítače sa začali meniť v kontexte, keď sú používatelia online v triede. Dizajn pre mobilné zariadenia je určite požiadavkou moderných webových štandardov. Jediným problémom je výber spôsobu vývoja a správne zacielenie na vaše publikum.

Keď spustíte kódovanie pre konkrétne rozlíšenie obrazovky, skončíte s príliš veľa štýlov na spracovanie. Mediálne dopyty v CSS3 sa dajú použiť na vytvorenie rozloženia pre iPhone na portrét aj na šírku. Keďže môžete predurčiť hustotu pixelov, je ľahké prepracovať ľubovoľnú šablónu HTML pre mobilné zariadenia.

(Image Source: bradfrostweb)

Keď však kódujete usporiadanie pre citlivý dizajn, mobilné aspekty sú štandardne staré. Pracovníkom z desktopov i mobilných používateľov sa ponúkne podobná skúsenosť a nemusíte sa obávať externých vlastností CSS. Jediný výskum, ktorý by ste mali vykonať, plánuje čo najmenšiu možnú zobrazovaciu obrazovku. Prevádzkové údaje služby Google Analytics môžu byť pre tento účel veľmi užitočné.

Pravdepodobne nebudete musieť vaše webové stránky pracovať 100% na každom zariadení bežiacom v každom prehliadači. Môžete však zacieliť väčšinu na základe priemernej šírky obrazovky. Staršie modely iPhone používajú rozlíšenie displeja 320 × 480, ktoré nie je tak neuveriteľné. Chcel by som strieľať na minimálnu šírku 240 pixelov, alebo dokonca menšie, ak sa vám to hodí.

Odstránenie predvoleného priblíženia

Ak ste strávili nejaký čas prehliadaním webu na smartphone, všimnete si, ako sa stránky zmenšili, aby sa zobrazili na obrazovke. Je to pre užívateľov pohodlie, pretože väčšina webových stránok nemá mobilný partner, takže úplné rozloženie je najbezpečnejšia stávka.

Ale keď sa dostanete do budovania citlivého mobilného dizajnu, auto-zoom môže naozaj narušiť vaše rozloženie prvky. Konkrétne sa obrázky a navigačný obsah môžu vo vašom rozložení zobraziť ako malé alebo príliš veľké. Existuje špeciálna metaznačka, ktorú môžete pridať do hlavičky dokumentu, ktorá ju obnoví vo väčšine zariadení so systémom Android a iPhone.

Toto je známe ako metaznačka zobrazenia ktorý nastavuje niektoré vlastné premenné v rámci obsahu. Spoločnosť Apple má dokumentačnú stránku týkajúcu sa niekoľkých ďalších metaznačiek, na ktoré by ste sa mali pozrieť, hoci sú zamerané konkrétne na webové stránky v systéme iOS. počiatočné meradle hodnota je dôležitá, pretože predvolené nastavenie vašej webovej stránky na 100% priblíženie.

Posledná hodnota pre užívateľskú škálovateľný odstráni túto funkciu zväčšenia, takže používateľ nemôže zmeniť rozloženie. Tým sa návrh uzamkne do jednej veľkosti založenej na celkovej šírke zariadenia. Upozorňujeme, že aj keď vypnete funkciu transfokácie, dobrý prispôsobivý dizajn sa bude stále prispôsobovať pri prechode z portrétu na krajinu na ľubovoľnom zariadení! Má však zmysel uzamknúť dizajn s odozvou a odstrániť všeobecné možnosti škálovania.

Dynamické prispôsobenie obrazu

Obrázky sú ďalším dôležitým aspektom prakticky každej webovej stránky. Používatelia mobilných zariadení sa nemusia snažiť streamovať videá, ale fotografie sú úplne iný príbeh. Sú to aj najväčší vinníci, pokiaľ ide o rozloženie modelu.

img max-šírka: 100%;

Štandardným pravidlom pre službu CSS je použitie vlastnosti maximálnej šírky pre všetky obrázky. Keďže budú vždy nastavené na 100%, nikdy nezaznamenáte deformácie. Keď používateľ zmenil veľkosť svojho okna prehliadača, ktorý je menší ako obrázok, ktorý ho zvládne, automaticky sa upraví na 100% šírku. Problém je v tom, že program Internet Explorer nerozumie tejto vlastnosti, takže budete musieť dať dohromady šablónu štýlov pre IE šírka: 100%;.

Flexibilné obrázky sú tiež možné, ak používate pluginy JavaScriptu alebo jQuery. Existujú nejakí naozaj inteligentní vývojári, ktorí dali v čase vytvoriť neuveriteľne citlivý obrazový obsah. Táto podprocess je len jedným z mnohých v pretečení stackov, ktorý obsahuje výnimočný, ale pohodlný prístup k riešeniu chýb IE6 / 7.

Ja osobne odporúčam prilepiť prirodzené zmenu veľkosti obrazu CSS. Ak je vaša webová stránka spustená v mobilnom prehliadači s povoleným jazykom JavaScript, pravdepodobne bude podporovať aj CSS. Ak naozaj chcete kopať hlbšie, pozrite sa na tento článok 24 spôsobov obrázkov pre adaptívne vzory ...

Dotykové vzory

Weboví vývojári môžu zabudnúť, že mobilní používatelia už nie sú na telefónoch na klávesniciach, ako je BlackBerrys. Väčšina smartfónov dnes používa dotykové rozhrania, ktoré robia scenár iný ako nastavenia myši a klávesnice.

Ako taký budete musieť zvážiť alternatívne riešenia v mobilných prvkoch. Rozbaľovacie ponuky môžu fungovať lepšie, ak sa zobrazia ako jedno menu na pravej strane. Väčšina používateľov je schopná poklepávať na odkazy na pravej strane ľahšie ako na ľavej strane, ale každý stĺpec pracuje na zmiernenie priestoru. Pomocou odsadenia okrajov je jednoduché určiť hierarchiu odkazov bez potreby kódu jQuery.

Je tiež dobrou praxou zvýšiť veľkosť týchto navigačných odkazov. Používatelia mobilných zariadení nemajú luxus veľkých obrazoviek poskytovaných na stolných počítačoch alebo dokonca na prenosných počítačoch. Je potrebné, aby ste si text ponechali veľký, vpredu, čitateľný a čitateľný za každú cenu. Môžete dokonca chcieť zmeniť veľkosť, ak používateľ prepína medzi zobrazením na výšku a na šírku - pomerne bežná recurrence pri prehliadaní mobilného webu.

Vlastné rozloženie CSS

Vo všeobecnosti je najlepšie upraviť rozloženie a umožniť prirodzenú degradáciu vášho obsahu. Ak máte bočný panel a oblasť obsahu, mali by ste ich nastaviť v šírkach percent alebo ems, čokoľvek, čo bude zmenené v okne prehliadača. Ak použijete a min šírkou toto nakoniec preruší časť rozloženia; takže sa teraz zobrazí obsah vášho bočného panela nad obsahom stránky.

(Zdroj obrázku: Pepperson)

Keď uvažujete o tom, ako to ovplyvňuje celkový dizajn, je oveľa jednoduchšie vytvárať externé štýly. Je však pravdepodobné, že narazíte na rozlíšenie obrazovky, ktoré je príliš malé na to, aby sa rozloženie zobrazilo. Ide o dokonalý scenár na pridávanie vlastných vlastností CSS na odstránenie častí stránky alebo na úplné preformátovanie obsahu.

Prepnúť ďalší obsah Zap / Vyp

Medzi príklady veľkých obsahových blokov patria webové formuláre, dynamické ponuky, posúvače obrázkov a ďalšie podobné nápady. Namiesto úplného odstránenia týchto prvkov, pretože rozloženie je menšie, prečo nie jednoducho skryť v a “minimalizovať” obsah div? Môžete použiť CSS alebo JavaScript na vykonanie úprav, ale nakoniec budete pravdepodobne potrebovať nejaký kód JS na vytvorenie prepínacieho tlačidla.

Táto alternatíva je ideálna na udržanie vašej domovskej stránky dynamickej a plnej bohatých webových médií. Namiesto úplného odstránenia rozbaľovacej navigácie alebo preskupenia štruktúry stránky ju môžete skryť v rozmedzí obsahu. Ak chce používateľ zobraziť vaše odkazy, klepnutím na prepínacie tlačidlo otvoríte / zatvoríte ponuku.

Toto formátovanie je jednoduché, intuitívne a ľahko pracuje s dotykovými zariadeniami. Vo vnútri div môžete umiestniť jednotlivé rozbaľovacie ponuky vedľa seba do formátu stĺpcov. Vzhľadom k tomu, že okno zmenší veľkosť ešte menšie, prirodzene klesnú pod seba a zvýšia výšku stránky. Napriek tomu je možnosť zbalenia celej ponuky ľahko dosiahnuť a len jediným klepnutím preč. Tento prepínač div je ideálny aj pre posúvače obrázkov v spolupráci s dynamickým zmenou veľkosti fotografií.

Použitie mediálnych dopytov

Ak by obrazovka mobilného telefónu narušila rozloženie 2 alebo 3 stĺpce, skončíte s každou oblasťou s obsahom nad sebou. Celé miesto by sa mohlo zdať krvácať a mohlo by dôjsť k veľmi mätúcemu rozlíšeniu. Lepším nápadom je pridať dolný okraj do každého stĺpca iba pre mobilné zariadenia pomocou externého štýlu šablón mobile.css.

Pomocou týchto nových štýlov je váš obsah rozdelený na deliteľné sekcie. Nadradený atribút médií je špeciálne navrhnutý tak, aby zacielil staršie zariadenia iPhone v zobrazení na šírku. Platí to aj pre zariadenia s obrazovkami menšou ako 480 pixelov. Použite to vo svoj prospech, aby ste mohli určiť, v ktorom bode rozloženie “rozchody”.

Existuje niekoľko ďalších možností, ktoré môžete použiť na detekciu orientácie zariadenia. Tento fantastický sprievodca médiami CSS vám prináša niekoľko nápadov. Navyše nový mobilný projekt 320 a vyšší ponúka boilerplate pre mobilné CSS @media štýly. Tie môžu byť zahrnuté priamo do rovnakého mobilného.css súboru a uplatňovať pravidlá pre mnoho rôznych zariadení.

 / * Smartphony (na výšku a na šírku) ----------- * / @media len obrazovka a (šírka min-zariadenia: 320px) a (max-šírka zariadenia: 480px) / / * Inteligentné telefóny (na šírku) ----------- * / @media iba obrazovka a (min-šírka: 321px) / * Štýly * / / * ------- * / @media len obrazovka a (max-šírka: 320px) / * Štýly * / / * iPady (portrét a krajina) ----------- * / @ (šírka min-zariadenia: 768px) a (max-device-width: 1024px) / * Štýly * /

(Zdroj: Hardboiled CSS3 Media Queries)

Užitočné nástroje

Skeleton - Krásna štvorcová doska pre citlivý mobilný dizajn
Prechod od adaptívneho k plne citlivému

Ukážka: Krásne citlivé vzory

Dúfam, že tieto tipy a dizajnové techniky vás povzbudia k tomu, aby ste sa dostali k vzrušujúcemu prispôsobivému rozloženiu nielen pre mobilné obrazovky, ale aj pre bežné zariadenia s prehliadaním webu. Aby som zachoval tok tvorivých džús, zostavil som malú vitrínu citlivých dizajnov mobilných webov. Nezabudnite sa pozrieť na niektoré z jedinečných funkcií a zdieľajte svoje myšlienky na dizajn alebo na tému v diskusnej oblasti.

zavesenie mesiaca