Máte " citlivé webové stránky "? Toto je stránka s rozvržením, které se mění podle zařízení návštěvníka a velikosti obrazovky. Odpovědný návrh webových stránek je nyní nejlepší praxí v oboru. Doporučuje se na Googlu a nachází se na milionech webových stránek na webu. Existuje však velký rozdíl mezi tím, že máte webové stránky, které jednoduše "zapadají" na různé velikosti obrazovky a mají stránky, které skutečně reagují.
Já běžně vidím společnosti přepracovat své webové stránky a vytlačit tiskové zprávy vychvalovat ctnosti jejich nové mobilní-přátelský design. Když jsem tyto stránky navštívil, to, co jsem často našel, je rozvržení, které se skutečně změní a změní tak, aby se vešly na různé obrazovky, ale to je až do té míry, ve které přijmou myšlenku reakce. To nestačí. Webová stránka opravdu citlivá dělá více než jen měřítko, aby se vešla na menší nebo větší obrazovku. Na těchto stránkách najdete také důležité důležité vlastnosti.
1. Optimalizovaný výkon
Nikdo nechce čekat na načtení webových stránek a když někdo používá mobilní zařízení s připojením, které může být méně než ideální, je ještě důležitější potřeba rychle načíst stránky.
Tak jak optimalizujete výkon vašeho webu? Pokud začínáte s novým webem jako součást redesignu, měli byste vytvořit bod pro vytvoření rozpočtu výkonnosti jako součást projektu. Pokud pracujete s existujícími stránkami a nezačínáte od začátku, je prvním krokem testování výkonu vašeho webu a zjistíte, kde stojíte dnes.
Jakmile budete mít výchozí stav, kde vaše stránky stojí výkonnostně, můžete začít provádět nezbytné vylepšení ke zvýšení rychlosti stahování. Skvělé místo, kde můžete začít, je pravděpodobně s obrázky vašeho webu. Příliš velké snímky jsou # 1 vinníkem, pokud jde o stránky s pomalým načítáním, takže optimalizace obrázků pro webovou dodávku může skutečně pomoci vašemu webu z hlediska výkonu.
Skutečnost je, že lepší výkon stránek a rychlé stahování rychlostí jsou přínosem, který ocení všichni návštěvníci. Koneckonců, nikdo si nikdy nestěžoval, že stránky jsou načtené "příliš rychle", ale pokud se místo trvá příliš dlouho na načtení, bude to úplně odvrátit lidi, ať už reagují "na" obrazovce, nebo ne.
2. Inteligentní hierarchie obsahu
Když je webová stránka zobrazena na velké obrazovce, můžete obsahovat různými způsoby, protože je k dispozici značná obrazovka nemovitostí. Většinou můžete na obrazovce najednou zasadit důležité zprávy a obrázky, aktualizace zpráv, informace o událostech a navigaci na webu. To umožňuje návštěvníkovi snadno a rychle prohledávat obsah celé stránky a rozhodovat o tom, co je pro ně důležité.
Tento scénář se dramaticky změní, když vezmete design webu a přeměňuje ho na zařízení s malou obrazovkou, jako je mobilní telefon. Najednou pracujete s zlomkem obrazovky nemovitostí, které jste předtím měli. To znamená, že se musíte rozhodnout, co se na webu objeví nejdříve, co bude následovat, atd. Namísto toho, aby bylo vše vidět najednou, máte pravděpodobně jen prostor pro ukázání jedné nebo dvou věcí (z nichž jedna je pravděpodobně navigace). To znamená, že musí být učiněna hierarchická rozhodnutí. Bohužel, to, co často určuje, co je na obrazovce nejprve, pak druhé, atd. Je způsob, jakým je samotná stránka kódována. Nejjednodušší je při vytváření citlivějšího webu zobrazit vše, co je na prvním místě v kódu, poté druhá položka v kódu a tak dále. Bohužel, to, co může být nejdůležitější na jednom zařízení, nemusí být na druhém stejně kritické. Reagovat na skutečně citlivý web chápe, že hierarchie obsahu by se měla měnit v závislosti na různých situacích a měla by být inteligentní o tom, co zobrazuje kde.
Vylepšení technik rozvržení CSS, včetně CSS Grid Layout, Flexbox a dalších, umožňují webovým návrhářům a vývojářům více možností, pokud jde o inteligentní vytyčování obsahu, namísto toho, aby byly omezeny přesným pořadím oblastí obsahu v kódu HTML. Využití těchto nových technik rozvržení se stane ještě důležitější, protože se situace zařízení a potřeby uživatelů našeho webu nadále vyvíjejí.
3. Zkušenosti, které berou v úvahu silné a slabé stránky zařízení
Pobyt na téma zařízení - každé zařízení, které může někdo využít k návštěvě vašeho webu, má jak silné stránky, tak slabé stránky, které jsou pro tuto platformu vlastní. Skvěle reagující stránka chápe schopnosti a omezení různých zařízení a používá je k vytváření přizpůsobených zkušeností, které jsou nejvhodnější pro jakékoli zařízení, které může návštěvník v tuto chvíli používat.
Například mobilní telefon obsahuje řadu funkcí, které byste nenašli v tradičním stolním počítači. GPS je jedním příkladem funkce zaměřené na mobilní zařízení (ano, můžete získat obecné informace o poloze také na stolních počítačích, ale GPS zařízení je mnohem přesnější). Váš web může používat informace z GPS, aby inteligentně odeslal osobě velmi detailní a konkrétní podrobné informace o směru nebo speciální nabídky založené na tom, kde přesně jsou v daném okamžiku.
Dalším příkladem tohoto principu v praxi by bylo místo, které rozumí, jaký typ obrazovky používáte, a posílá obrazy, které jsou pro tento displej nejvhodnější. Pokud máte obrazovku s vysokou hustotou pixelů, můžete se rozhodnout odeslat na tuto obrazovku obrazy s vyšší kvalitou. Stejné snímky by však nebyly použitelné na obrazovce, která by byla méně schopná a zvýšená kvalita by byla ztracena, zatímco další velikost souboru by byla stažena bez skutečného důvodu.
Skvělé stránky s citlivostí reagují na celkovou zkušenost uživatelů a pracují na přizpůsobení této zkušenosti nejen na typu zařízení nebo velikosti obrazovky, ale i na dalších důležitých aspektech hardwaru.
4. Obsah s kontextem
Zpočátku reagoval webový design citlivě na svůj název, protože myšlenka rozvržení stránky odpovídala různým velikostem obrazovky, ale můžete reagovat na mnohem více než jen velikost obrazovky. Vycházíme z předchozího příkladu využití silných a slabých stránek zařízení a můžete je využít i pro další data, jako je datum a čas, abychom skutečně přizpůsobili zážitek z webu.
Představte si webové stránky pro velkou událost veletrhu. Zatímco citlivá stránka změní rozložení stránek na měřítku s různými obrazovkami, můžete také určit datum, abyste zjistili, jaký obsah je nejdůležitější pro zobrazení. Pokud se jedná o období před událostí, pravděpodobně budete chtít prominentně zobrazovat registrační informace. Pokud se však událost skutečně děje v tomto okamžiku, registrace nemusí být nejdůležitějším obsahem. Místo toho můžete rozhodnout, že denní plán událostí je důležitější, protože je relevantnější pro okamžité potřeby tohoto uživatele.
Vezmeme-li věci dále, mohli byste využít GPS zařízení, abyste zjistili, kde jsou skutečně na veletrhu. Mohli byste jim dát interaktivní obsah založený na jejich umístění, ukázat jim blízké kabiny nebo zasedání asi začít.
5. Dostupnost
Konečným příkladem, který budeme zkoumat, jak může stránka skutečně reagovat na potřeby návštěvníka, je přemýšlet o dostupnosti webových stránek . Webové stránky by měly být využity co nejvíce lidí, včetně osob se zdravotním postižením. Vaše webové stránky by měly být použity někým, kdo potřebuje čtečku obrazovky nebo jiný asistovaný software pro přístup k jeho obsahu. Tímto způsobem vaše stránky reagují na jejich potřeby, protože jste se ujistili, že tato zkušenost, i když je pro návštěvníky s postižením odlišná, je stále vhodná.
Odpovědí na co nejvíce datových bodů, a nikoliv jen na velikosti obrazovky, může být webová stránka mnohem více než jen "přátelská k mobilu". Může se stát skutečně citlivým zážitkem v každém smyslu fráze.