Máte " odpovedajúcu webovú stránku "? Toto je web s rozložením, ktoré sa mení podľa zariadenia návštevníka a veľkosti obrazovky. Odpovedajúci dizajn webu je v súčasnosti najlepšou praxou v odvetví. Odporúča sa spoločnosť Google a nachádza sa na miliónoch webových stránok na celom webe. Existuje však veľký rozdiel medzi tým, že máte webové stránky, ktoré jednoducho "zapadajú" do rôznych veľkostí obrazoviek a majú stránky, ktoré skutočne reagujú.
Zvyčajne vidím spoločnosti prepracovať svoje webové stránky a vytlačiť tlačovú správu, ktorá vychováva cnosti svojho nového dizajnu priateľského k mobilným telefónom. Keď navštívim tieto stránky, to, čo som často zistil, je rozloženie, ktoré sa skutočne zmenšuje a mení, aby sa zmestili na rôzne obrazovky, ale to je až do tej miery, ak majú myšlienku reagovať. To nie je dosť. Naozaj citlivá webová stránka má viac ako len mierku, aby sa zmestili na menšiu alebo väčšiu obrazovku. Na týchto stránkach nájdete aj nasledujúce dôležité znaky.
1. Optimalizovaný výkon
Nikto nemá rád čakanie na načítanie webových stránok a keď niekto používa mobilné zariadenie s pripojením, ktoré môže byť menej ako ideálne, je ešte dôležitejšia potreba na rýchle načítanie stránok.
Takže ako optimalizujete výkonnosť svojich stránok? Ak začínate s novou webovou stránkou ako súčasť redizajnu, mali by ste vytvoriť rozpočet výkonnosti ako súčasť tohto projektu. Ak pracujete s existujúcou stránkou a nezačínate od začiatku, prvým krokom je otestovať výkonnosť vašej lokality a zistiť, kde ste dnes.
Akonáhle budete mať východiskový bod o tom, kde vaše stránky stojí výkon-múdry, môžete začať vykonávať potrebné zlepšenia na zvýšenie rýchlosti sťahovania. Skvelé miesto, kde môžete začať, je pravdepodobne s obrázkami vašich stránok. Príliš veľké snímky sú # 1 vinníkom, pokiaľ ide o stránky s pomalým načítaním, takže optimalizácia obrázkov na zobrazovanie na webe môže naozaj pomôcť vašej stránke z hľadiska výkonu.
Skutočnosťou je, že lepšie výkony webových stránok a rýchle rýchlosti sťahovania sú výhodou, ktorú ocenia všetci návštevníci. Koniec koncov, nikto si nikdy nesťažoval, že stránka bola naložená "príliš rýchlo", ale ak stránka trvá príliš dlho na načítanie, úplne odvráti ľudí, či sa na obrazovke "zapadne" alebo nie.
2. Inteligentná hierarchia obsahu
Keď je webová stránka zobrazená na veľkej obrazovke, ste schopní položiť obsah rôznymi spôsobmi z dôvodu podstatnej obrazovky nehnuteľností k dispozícii. Často môžete na obrazovke naraz pridať dôležité správy a obrázky, aktualizácie správ, informácie o udalostiach a navigáciu na webe. To umožňuje návštevníkovi ľahko a rýchlo skenovať obsah celej stránky a rozhodnúť sa, čo je pre ne dôležité.
Tento scenár sa dramaticky zmení, keď si vezmete tento dizajn stránok a premeníte ho na zariadenia s malou obrazovkou, napríklad mobilný telefón. Zrazu pracujete s zlomkom obrazovky nehnuteľností, ktoré ste mali predtým. To znamená, že sa musíte rozhodnúť, čo sa na stránke objaví ako prvé, čo bude nasledovať, atď. Namiesto toho, aby ste všetko mohli vidieť naraz, pravdepodobne máte len priestor na zobrazenie jednej alebo dvoch vecí (z ktorých jedna je pravdepodobná navigácia). To znamená, že je potrebné vykonať rozhodnutia o hierarchii. Bohužiaľ, to, čo často určuje, čo prichádza na prvú obrazovku, a potom druhé, atď., Je spôsob, akým je samotná stránka zakódovaná. Najjednoduchšie je pri vytváraní odpovedajúcej stránky zobrazenie toho, čo je prvé v kóde ako prvé na obrazovke, potom druhá položka v kóde a tak ďalej. Bohužiaľ, čo môže byť najdôležitejšie na jednom zariadení, nemusí byť na druhom rovnako kritické. Naozaj citlivá stránka chápe, že hierarchia obsahu by sa mala meniť v závislosti od rôznych situácií a mala by byť inteligentná o tom, čo zobrazuje kde.
Vylepšenia v technikách rozloženia CSS, vrátane CSS Grid Layout, Flexbox a ďalšie, umožňujú webovým dizajnérom a vývojárom viac možností, pokiaľ ide o inteligentný rozvrhnutie obsahu, namiesto toho, aby boli obmedzené presným poradím obsahových oblastí v HTML kóde. Využívanie týchto nových technik usporiadania sa stane ešte dôležitejšie, pretože krajina zariadenia a potreby používateľov našich stránok sa naďalej vyvíjajú.
3. Skúsenosti, ktoré zohľadňujú silné a slabé stránky zariadenia
Zostať na tému zariadení - každé zariadenie, ktoré môže niekto použiť na návštevu vašich stránok, má silné a slabé stránky, ktoré sú pre túto platformu neodmysliteľné. Skvelá odozva na stránkach chápe možnosti a obmedzenia rôznych zariadení a využíva ich na vytváranie prispôsobených zážitkov, ktoré najlepšie vyhovujú všetkým zariadeniam, ktoré návštevník v tom momente môže používať.
Napríklad mobilný telefón obsahuje množstvo funkcií, ktoré by ste nenašli v tradičnom stolnom počítači. GPS je jeden príklad funkcie zameranej na mobilné zariadenia (áno, môžete získať všeobecné informácie o polohe aj na stolných počítačoch, ale GPS zariadenia je oveľa presnejšie). Vaše stránky môžu používať informácie z GPS, aby inteligentne poslali osobe veľmi detailné a konkrétne podrobné informácie o smerovaní alebo špeciálne ponuky založené na tom, kde sa práve nachádzajú.
Ďalším príkladom tohto princípu v praxi by bol web, ktorý rozumie tomu, aký typ obrazovky používate, a posiela obrázky, ktoré najlepšie vyhovujú tomuto zobrazeniu. Ak máte obrazovku s vysokou hustotou pixelov, môžete sa rozhodnúť pre posielanie obrázkov vyššej kvality na túto obrazovku. Tieto rovnaké obrázky by boli zbytočné na obrazovke s menšou schopnosťou, a dodatočná kvalita by sa stratila, zatiaľ čo by sa extra veľkosť súboru stiahla bez skutočného dôvodu.
Naozaj skvelé stránky s citlivými odpoveďami uvažujú o celkovom zážitku používateľov a pracujú na prispôsobení skúseností založených nielen na type zariadenia alebo veľkosti obrazovky, ale aj na ďalších dôležitých aspektoch hardvéru.
4. Obsah s kontextom
Spočiatku reagoval dizajn webových stránok svojim názvom vďaka myšlienke, že rozloženie stránok reaguje na rôzne veľkosti obrazovky, ale môžete reagovať na oveľa viac ako len veľkosť obrazovky. Vychádzajúc z predchádzajúceho príkladu použitia silných a slabých stránok zariadenia, môžete ich použiť ako aj iné údaje, ako je dátum a čas, aby ste skutočne prispôsobili zážitok z webových stránok.
Predstavte si webovú stránku veľkej obchodnej udalosti. Zatiaľ čo citlivá webová lokalita zmení rozloženie stránok na webových stránkach na mierku s rôznymi obrazovkami, môžete tiež použiť dátum na určenie toho, ktorý obsah je najdôležitejší na zobrazenie. Ak ide o časový úsek pred udalosťou, pravdepodobne budete chcieť viditeľne zobraziť informácie o registrácii. Ak sa však udalosť skutočne deje, registrácia nemusí byť najdôležitejším obsahom. Namiesto toho môžete rozhodnúť, že rozvrh udalostí v dňoch je kritickejší, pretože je relevantnejší pre okamžité potreby daného používateľa.
Keď vezmete veci ďalej, môžete sa pokúsiť nájsť GPS zariadenia na určenie toho, kde sa skutočne nachádzajú na veľtrhu. Dalo by sa im dať interaktívny obsah na základe ich polohy, ukázať im neďaleké kabíny alebo zasadnutia o začať.
5. Dostupnosť
Posledným príkladom, ktorý sa bude zaoberať tým, ako môže stránka skutočne reagovať na potreby návštevníkov, je premýšľať o dostupnosti webových stránok . Webové stránky by mali byť schopné používať čo najviac ľudí vrátane osôb s postihnutím. Vaše webové stránky by mali byť schopné používať niekoho, kto potrebuje čítačku obrazovky alebo iný asistovaný softvér na prístup k svojmu obsahu. Týmto spôsobom vaša stránka reaguje na ich potreby, pretože ste zaistili, že táto skúsenosť, aj keď je pre návštevníkov so zdravotným postihnutím odlišná, je stále vhodná.
Odpovedaním na toľko dátových bodov, ako je to možné, a nielen veľkosťou obrazovky, webová stránka môže byť oveľa viac než len "priateľská k mobilným telefónom". Môže sa stať naozaj citlivým zážitkom v každom zmysle frázy.