Reagovat webové rozvržení pro mobilní obrazovky Úvod, tipy a příklady

Tento článek je součástí našeho "Řada návrhů webových odpovědí" - obsahuje nástroje, zdroje a návody, které vám pomohou vytvořit webové stránky pro uživatele všech platforem. Klikněte zde zobrazit více článků ze stejné série.

Designéři mají nyní tvrdší než dříve. Musíme nejen navrhovat stacionární zařízení, ale také mobilní zařízení, jako jsou tablety a smartphony, a protože zde hovoříme o spoustě různých velikostí obrazovek a rozlišeních, je to obrovský úkol. Ve světle událostí, citlivý web design by mohlo být nejlepším řešením. Nabízí více než jen jednoduchou mobilní šablonu; místo toho je celé rozvržení stránek navrženo tak, aby bylo dostatečně flexibilní, aby se vešly do všech možných rozlišení obrazovky.

S takovým schématem tekutinového designu jsou zřejmé výhody a nevýhody. Zvažte níže uvedené příklady toho, jak může reagovat web design na přechod do mobilních zařízení.

Jak reagovat Design Design

Když používám slovo “reagující” pokud jde o web design, myslím, že celé rozložení reaguje na základě rozlišení obrazovky uživatele. Představte si tento scénář: čtete webovou stránku na jednom tabletu a pak z jednoho důvodu přepnete na jiné zařízení. Okno prohlížeče je nyní znovu dimenzováno. Citlivé rozvržení webového designu bude obsahovat schémata a rozvržení, které se elegantně rozpadne a znovu se projeví. Z hlediska použitelnosti se jedná o skvělou techniku.

Citlivý design je o vytvoření homogenního zážitku bez ohledu na velikost obrazovky prohlížeče nebo zařízení. Našel jsem dokonalý příklad ze seznamu „A List Apart“ pro ilustraci mého bodu, který zahrnuje také dynamické obrazy. Šířka je nastavena v CSS s použitím procent pro většinu vnitřních prvků kontejneru. Větší webové stránky také dobře reagují na odstranění dynamického obsahu, jako je JavaScript, pokud není podporován.

Proč Design pro mobilní telefony?

Ukázalo se, že více uživatelů je mobilní, a to nejen pro on-the-go procházení webu jeden. Počítače Tablet PC se začaly měnit v kontextu, kdy jsou uživatelé ve třídě online. Projektování pro mobilní telefony je určitě požadavkem moderních webových standardů. Jediným problémem je výběr metody rozvoje a cílení na vaše publikum odpovídajícím způsobem.

Když začnete kódování pro konkrétní rozlišení obrazovky skončíte s příliš mnoho stylů řešit. Média dotazy v CSS3 lze použít k vytvoření iPhone specifické rozvržení pro portrét i na šířku. Vzhledem k tomu, že můžete předurčit hustotu pixelů, je snadné přepracovat jakoukoli šablonu HTML pro mobilní zařízení.

(Zdroj obrázku: bradfrostweb)

Ale když kód rozvržení pro citlivý design mobilní aspekty jsou postaráno ve výchozím nastavení. Podobným zkušenostem budou nabídnuti uživatelé stolních počítačů i mobilní uživatelé a nebudete se muset starat o externí vlastnosti CSS. Jediný výzkum, který musíte provést, je plánování nejmenší možné obrazovky. Provozní data služby Google Analytics mohou být velmi užitečná.

Pravděpodobně nebude vaše webové stránky pracovat na 100% na každém zařízení, na kterém běží každý prohlížeč. Většinu můžete zacílit na průměrnou šířku obrazovky. Starší modely iPhone používají rozlišení 320 × 480, které není tak neuvěřitelné. Já bych střílet na minimální šířku 240px, nebo dokonce menší, pokud se vám to vejde.

Odstranění výchozího zoomu

Pokud jste strávili nějaký čas procházením webu na smartphonu, všimnete si, jak jsou webové stránky zmenšeny, aby se plně zobrazily na obrazovce. To je pro uživatele pohodlí, protože většina webových stránek nemá mobilní protějšek, takže plné rozložení je nejbezpečnější sázka.

Ale když se dostanete do budování responzivního mobilního designu, auto-zoom může opravdu zmařit vaše prvky rozložení. Konkrétně se mohou obrázky a navigační obsah v rozvržení zobrazit jako malé nebo příliš velké. K dispozici je speciální meta tag, který můžete připojit do záhlaví dokumentu, který to obnovuje ve většině zařízení Android a iPhone.

Toto je známé jako tag metadat výřezu který nastavuje některé vlastní proměnné v obsahu. Apple má stránku s dokumentací týkající se několika dalších meta tagů, na které byste se měli podívat, i když jsou zaměřeny specificky na webové stránky na iOS. počáteční měřítko hodnota je důležitá, protože tato výchozí hodnota vaší webové stránky dosahuje 100% zoomu.

Poslední hodnota pro uživatelsky škálovatelný odstraní tuto funkci zoomu tak, aby uživatel nemohl změnit velikost rozvržení. Tím se návrh uzamkne do jedné velikosti na základě plné šířky zařízení. Všimněte si, že i když funkci zoomu deaktivujete, bude při přechodu z portrétu na šířku na jakékoli zařízení i nadále odpovídat dobrý design. Ale má smysl uzamknout citlivý design a odstranit obecné možnosti škálování.

Dynamické měřítko obrazu

Obrázky jsou dalším důležitým aspektem prakticky každé webové stránky. Mobilní uživatelé možná nehledají streamovaná videa, ale fotografie jsou úplně jiný. To jsou také největší pachatelé, pokud jde o rozvržení z krabice modelu.

img max-width: 100%;

Standardní pravidlo pro CSS je použít vlastnost max-width na všechny obrazy. Vzhledem k tomu, že budou vždy nastaveny na 100%, nikdy nezaznamenáte narušení. Když uživatel změní velikost svého okna prohlížeče menší, než je váš obrázek, zvládne jej automaticky znovu na 100% šířku zmenšenou. Problém je v tom, že Internet Explorer nemůže tuto vlastnost pochopit, takže je třeba sestavit styly specifických pro IE šířka: 100%;.

Flexibilní obrázky jsou také možné, pokud používáte JavaScript nebo jQuery pluginy. Tam jsou někteří opravdu inteligentní vývojáři venku, kteří dali do doby vybudovat neuvěřitelně citlivý obrazový obsah. Toto vlákno je jen jedním z mnoha v přetečení Stack Overflow, které obsahuje neštandardní, ale pohodlný přístup k řešení chyb IE6 / 7.

Já osobně doporučuji držet se přirozené CSS velikost obrazu. Pokud jsou vaše webové stránky spuštěny v mobilním prohlížeči s povoleným JavaScriptem, mohou s největší pravděpodobností podporovat i CSS. Pokud opravdu chcete kopat hlouběji, podívejte se na tento článek 24 Obrázky pro adaptivní návrhy ...

Dojemné vzory

Weboví vývojáři mohou zapomenout, že mobilní uživatelé již nejsou na telefonech s klávesnicí jako BlackBerry. Většina smartphonů dnes používá rozhraní dotykové obrazovky, což činí scénář odlišným od nastavení myši a klávesnice.

Jako takové budete muset zvážit alternativní řešení v mobilních prvcích. Rozbalovací nabídky mohou fungovat lépe, pokud jsou zobrazeny jako jediné menu na pravé straně. Většina uživatelů je schopna klepnout na odkazy na pravé straně jednodušší než vlevo, ale každý sloupec pracuje na zmírnění prostoru. Pomocí odsazení okrajů je jednoduché určit hierarchii propojení, aniž by byl vyžadován kód jQuery.

Je také dobré rozšířit velikost těchto navigačních odkazů. Mobilní uživatelé nemají luxus velkých obrazovek poskytovaných na stolních počítačích nebo dokonce na přenosných počítačích. Musíte udržet text velký, up-front, tap-can a čitelný za každou cenu. Můžete dokonce chtít změnit velikost, pokud uživatel přepíná mezi zobrazením na výšku a na šířku - poměrně častým opakováním při procházení webu pro mobily.

Vlastní rozložení CSS

Obecně je nejlepší přizpůsobit rozvržení a umožnit přirozené zhoršení obsahu. Máte-li postranní panel a oblast obsahu, měli byste je nastavit v šířkách procent nebo ems, cokoliv, co se bude měnit v okně prohlížeče. Pokud použijete a min-width to nakonec přeruší část rozložení; takže se obsah vašeho postranního panelu zobrazí nad obsahem stránky.

(Zdroj obrázku: Pepperson)

Když se zamyslíte nad tím, jak to ovlivňuje celkový design, je mnohem snazší vyvíjet externí styly. Pravděpodobně však spouštíte rozlišení obrazovky, která jsou příliš malá pro rozložení vykreslení. Toto je ideální scénář pro přidávání vlastních vlastností CSS k odstranění částí stránky nebo jejich přeformátování.

Zapnout / vypnout doplňkový obsah

Mezi příklady velkých bloků obsahu patří webové formuláře, dynamické nabídky, posuvníky obrázků a další podobné nápady. Namísto úplného odstranění těchto prvků, protože rozložení se zmenšuje, proč je jednoduše neskrýt “minimalizováno” obsah div? K úpravám můžete použít buď CSS nebo JavaScript, ale nakonec budete pravděpodobně potřebovat nějaký JS kód pro vytvoření přepínacího tlačítka.

Tato alternativa je ideální pro udržení dynamiky vaší domovské stránky a plné bohatých webových médií. Namísto úplného odstranění rozevíracího rozevíracího seznamu nebo přeskupení struktury stránek jej můžete skrýt v rámci obsahu div. Pokud chce uživatel zobrazit vaše odkazy, poklepáním na přepínací tlačítko otevřete / zavřete nabídku.

Toto formátování je jednoduché, intuitivní a snadno se s ním pracuje na dotykových zařízeních. Uvnitř div můžete umístit každou z rozbalovacích nabídek vedle sebe ve formátu sloupců. Vzhledem k tomu, že se velikost okna zmenšuje, budou přirozeně klesat pod sebe a zvětšovat výšku stránky. Možnost sbalit celé menu je však snadno dosažitelná a stačí jen jeden kohoutek. Tento přepínač div je také ideální pro posuvníky obrázků ve spolupráci s dynamickou změnou velikosti fotografií.

Použití mediálních dotazů

Pokud by mobilní obrazovka porušila rozložení 2 nebo 3 sloupců, skončíte s každou z oblastí obsahu naskládaných nad sebou. Celé místo se zdá být krváceno a může vypadat velmi matoucí bez rozlišujících blokových oblastí. Lepším nápadem je přidat do každého sloupce dolní okraj, pouze pro mobilní zařízení, a to pomocí externí šablony stylů mobile.css.

S těmito novými styly je váš obsah rozdělen do dělitelných částí. Výše uvedený atribut médií je speciálně navržen tak, aby cílil na starší zařízení iPhone v zobrazení na šířku. Platí to však i pro zařízení s obrazovkami menšími než 480 pixelů. Použijte to ve svůj prospěch, abyste mohli určit, v jakém okamžiku rozložení “se rozpadne”.

Existuje několik dalších možností, které můžete použít pro detekci orientace zařízení. Tento fantastický průvodce na CSS médií vám může dát pár nápadů. Nový mobilní projekt 320 a vyšší navíc nabízí desku pro mobilní CSS @media styly. Ty mohou být zahrnuty přímo do stejného souboru mobile.css a aplikovat pravidla pro mnoho různých zařízení.

 / * Smartphone (na výšku a na šířku) ----------- * / @ Pouze obrazovka a (min-device-width: 320px) a (max-device-width: 480px) / * Styly * / / * Smartphone (na šířku) ----------- * / @ Pouze obrazovka a (min-width: 321px) / * Styly * / / * Smartphone (portrét) ---- ------- * / @media only screen a (max-width: 320px) / * Styly * / / * iPady (na výšku a na šířku) ----------- * / @ obrazovka pouze pro média a (min-device-width: 768px) a (max-device-width: 1024px) / * Styly * /

(Zdroj: Hardboiled CSS3 Media Queries)

Užitečné nástroje

Skeleton - krásná varná deska pro citlivý mobilní design
Přechod z adaptivního na plně reagující

Showcase: Krásné citlivé vzory

Doufám, že tyto tipy a designové techniky vás povzbudí k posunu směrem k budování vzrušujících rozvržení nejen pro mobilní obrazovky, ale i pro jakékoli běžné zařízení s procházením webu. Chcete-li udržet kreativní šťávy tekoucí jsem dal dohromady malou přehlídku citlivé mobilní webové návrhy. Nezapomeňte se podívat na některé z unikátnějších funkcí a podělit se o své myšlenky o designu nebo tématu v diskusní oblasti.

visí měsíc