Odpovědný webdesign se stal celosvětovým termínem pro to, aby vaše webové stránky fungovaly dobře při nízkých rozlišeních.
Smartphony způsobily revoluci mobilního webu a tablety s rostoucí popularitou vrhnou další klíč do zarízení. Se všemi věcmi, které se dnes otevírají, může být web na dnešních dnech přítomen na smartphonu s nízkým rozlišením, na tabletu se středním rozlišením nebo na stolním nebo přenosném počítači s vysokým rozlišením. Když hodíte sítnice do mixu, počet potenciálních velikostí obrazovky je závratný. V ideálním případě bude vaše webové stránky vypadat a fungovat elegantně na všech výše uvedených, při každém řešení.
Odpovědný webdesign sám o sobě představuje proces vytváření webových stránek na velmi malých obrazovkách, velmi velkých obrazovkách a při každém řešení mezi nimi.
Během několika posledních let průmyslově vyvíjelo kolektivní seznam osvědčených postupů. Mnohé z těchto postupů se zaměřují na dodatečné vybavení webových stránek určených pro vysoké rozlišení až do nižších velikostí. Ostatní začínají v mobilních zařízeních a pracují na větších výřezech a optimalizují podle potřeby. Všechny tyto praktiky lze obecně považovat za reaktivní nebo adaptivní uspořádání.
Odpovědná uspořádání obecně funguje lépe než adaptivní uspořádání, avšak v některých případech (např. Složité webové aplikace) by adaptivní přístup mohl uživatelům lépe sloužit. Ať tak či onak, cílem je, aby vaše webové stránky vždy vypadají nejlepší na požadované rozlišení.
Většina lidí se rozhodla pro tento účel použít mediální dotazy jsou skalní pevné pokud nepotřebujete podporu pro IE8 nebo nižší. Pro ty z nás, kteří stále mají publikum v IE6 - 8, Scott Jehl vytvořil a JavaScript polyfill nazvaný Respond.js to bude dělat věci fungovat.
Předtím mnoho webdesignerů mělo minimální komunikaci s vývojáři až do doby předání. Nyní však návrháři a vývojáři musí spolupracovat prostřednictvím procesu návrhu i vývoje, aby bylo vše hladké. Z uživatelské analýzy na to, co může nebo nemusí být změněno při změně výřezů - návrháři a vývojáři jsou blíže než kdy jindy, ne-li stejná osoba. Pokud hledáte inspiraci, jak vypadají citlivé nebo adaptivní rozvržení, MediaQueri.es je oblíbená galerie webových stránek, která zobrazuje čtyři výřezy webových stránek.
Když myšlenka reagujícího webdesignu poprvé začala získávat půdu, na chvíli dominovaly adaptivní techniky. Je snadnější přejít do návrhu a vývoje pro tyto rozvržení, i když vyžadují více práce než jejich citlivé kontraparts. To je také cesta, kterou mnozí lidé berou, když dodatečně instalují existující webové stránky, aby byli přátelští k mobilním telefonům. Vzhledem k povaze přizpůsobivých rozvržení poskytují mnohem větší kontrolu nad tvorbou webových stránek. Pro konkrétní výhledy potřebujete pouze design a prohlížeče zobrazují pouze ten nejvyšší, který se vejde do jeho šířky. Tyto rozvržení jsou ty, které se při úpravě "přizpůsobují" při změně velikosti okna prohlížeče. Ve skutečnosti, pokud změníte velikost okna o méně než 1024 pixelů, uvidíte tuto náhlou změnu, o které mluvím, protože rozložení této webové stránky se přizpůsobuje soustředění na výřez středního rozlišení.
Při navrhování přístupu adaptivního vývoje je práce poměrně snadná. Než se reaktivní webdesign stane věcí, prostě jste navrhli jedno rozložení a pak je rozvinuli. Nyní budete navrhovat pro více výřezů a vyvíjet je. Obecně je snadnější začít s výřezy s nízkým rozlišením a pracovat nahoru. Pokud začnete s výřezy s vysokým rozlišením a jdete dolů, věci by mohly skončit trochu ... kompaktní. A v době, kdy se dostanete na mobilní telefon, je přeplněná.
Počet výřezů, které navrhujete, závisí výhradně na vás a vývojáři, vypracujte bitový plán založený na vašich uživatelích. Pokud aktuální analýzy webu ukazují, že uživatelé většinou používají výhledy s nízkým a středním rozlišením, naplánujte je. Chcete alespoň tři: jeden pro výřezy s nízkou rozlišovací schopností (smartphony), výřezy pro střední rozlišení (tablety) a jeden pro výřezy s vysokým rozlišením (stolní počítače a notebooky). V ideálním případě je plánování pro šest standard, které má rozložení s vysokým a nízkým rozlišením pro každý z výše uvedených výřezů. Nicméně s tím, že příliš mnoho, než bude dělat vývoj a údržbu příliš mnoho zvládnout, tak buďte opatrní.
Rozvíjení adaptivního uspořádání je vlastně poměrně jednoduché. Za předpokladu, že jste pracovali s designérem (nebo jste designér) z get-go, je to jako vyvíjení tradiční webové stránky. Začnete tím, že vyvíjíte web na mobilním výřezu s malým rozlišením. Jakmile to uděláte, použijeme mediální dotazy k rozbalení rozvržení výřezů pro vyšší rozlišení. Níže jsou uvedeny dotazy médií v prohlížečích s malým, středním a vysokým rozlišením:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Toto je místo, kde "adaptace" vychází z adaptivního přístupu. Vzhledem k tomu, že se zaměřujeme na několik běžných rozměrů pohledu, při změně velikosti okna může dojít k přeskakování rozvržení. Jak jsem již zmínil, adaptivní design a vývoj jsou velmi užitečné pouze pro dodatečné vybavení nebo pro komplexní webové aplikace. Navrhování a rozvíjení tohoto množství rozvržení pro nezávislé výřezy je mnohem více než hádka, pokud to není potřeba.
K dnešnímu dni je vnímavý návrh a vývoj de facto přístup k použití. Zatímco v porovnání s adaptivním přístupem nabízí menší kontrolu nad uspořádáním, je mnohem méně práce při implementaci a údržbě, protože technicky máte pouze jedno rozvržení. Je to také přizpůsobené pro webové stránky také, a to je klíčový prodejní bod. Budete moci vytvářet vlastní hraniční body založené na tom, kdy se váš design rozpadne nebo nevypadá tak, jak je zamýšleno.
Odpovědné rozvržení také zahrnuje rozložení tekutin. Předtím, než se objevil citlivý webdesign, byly tekuté systémy oblíbené - rozvržení s použitím procenta pro šířky. Zatímco ve většině případů to fungovalo dobře, to bylo předtím, než jsme měli smartphony a tablety. Většina rozložení tekutin je nyní rozšířena mediálními dotazy při velmi nízkém a velmi vysokém rozlišení. Jinak byste mohli skončit s velmi kompaktními nebo nesmírně velkými rozloženími.
Zatímco máte velmi jednoduchý návod, který můžete sledovat s adaptivním designem, reagující design není tak jasný. Existuje rozpačitá diskuse, že navrhování v prohlížeči je nejlepším způsobem, jak to udělat - navrhnout a vyvíjet současně. Vzhledem k tomu, že vezměte v úvahu v podstatě všechny výřezy při navrhování, je zde více práce na straně designu. V ideálním případě bychom chtěli mít na paměti výhledy, ale nikoli navrhnout pro konkrétní. Pokud je to možné, snažte se setkat na střední úrovni; Zaměřte se na výřezy ve středním rozlišení, ale nemáte-li na paměti rozložení, budete muset později nastavit nižší a vyšší rozlišení.
Je nesmírně důležité používat existující uživatelskou analýzu, pokud je máte. Pokud vaše stránky již obsahují analytické nástroje, které prokazují, že vaše publikum přečte převážně z výřezů s nízkým rozlišením, navrhněte s důrazem na tyto. Zaměřte své publikum , i když to znamená ignorovat některé z nejlepších postupů. Nakonec vaše webové stránky budou sloužit jim, ne lidé agregovat tyto "nejlepší" praxe.
Jakmile je fáze návrhu dokončena, vývoj začíná skutečnou zábavou. Jak již bylo zmíněno dříve, pokud máte analytické údaje o vašem typickém publiku, začněte tam. Jakmile vytvoříte rozložení, použijete mediální dotazy, abyste byli schopni reagovat. Namísto definování nastavených výřezů však místo toho ručně změníte velikost prohlížeče, dokud se rozvržení rozvržení nevyřeší. Když k tomu dojde, je to vaše šířka zarážky - přidejte mediální dotaz k opravě zlomu návrhu a pokračujte v změně velikosti. V ideálním případě to uděláte z přístroje s vysokým rozlišením, abyste mohli vidět všechny výřezy. Jakmile se ujistíte, že máte podporu pro výřezy s nízkým a vysokým rozlišením, přesuňte se na testování.
Zřídka se můžete setkat s webovými stránkami, které používají vlastní řešení, například {$lang_domain} . Obecně řečeno, většina webu spadá buď do citlivých nebo adaptivních skupin, jak je uvedeno výše, ale někdy se lidé učiní kreativní a vyvíjejí vlastní řešení. {$lang_domain} dělá to tak, že začíná standardními nízkými, středními a vysokými hraničními hodnotami, a poté podle potřeby doplní mezi sebou, když se rozvržení rozpadne. Kromě toho má rozložení také tekutinu v přírodě až po nastavené maximální rozlišení. S tímto vědomím, buďte kreativní a postavte něco, co porušuje normu!
Bohužel skutečně neexistuje žádné dobré řešení prohlížeče testování těchto rozložení dosud. Nejlepší způsob testování je ruční: načtení stránky do telefonu, tabletu, notebooku a všeho jiného. V případě, že podporuje takové rozšíření, můžete použít také prohlížeč prohlížečů prohlížeče prohlížeče. Ripple Emulator je rozšíření, které používám v technologii Chrome pro testování některých výřezů s nízkým rozlišením. Přestože je to nepohodlné ručně testovat zařízení, poskytuje přesnější dojem o funkčnosti vašeho webu. Uživatelské rozhraní, které vypadá v pořádku na emulátoru, může skutečně fungovat poměrně špatně na skutečném zařízení.
Stejně rozsáhlý jako tento článek, je to prostě základna na téma rozložení. Existuje mnoho informací o metodách webového designu, které nejsou zahrnuty v tomto článku; Optimalizace prvků a typografie UI, citlivé obrázky a média, poměry pixelů zařízení a mnoho dalšího zde není vysvětleno. Existuje však spousta zdrojů pro takové znalosti, v mnohem více informací husté formy. Od té doby, co se objevila myšlenka na citlivý webdesign, přispěli jsme k nesmírnému množství znalostí v této oblasti. Doufám, že tím, že vysvětlíte rozdíly mezi typy rozložení, budete lépe schopni zpracovat myšlenku reagujícího webu ... aniž byste ztratili králičí díru.
Komunita neustále vytváří nové techniky a vytváří kreativní řešení problémů, se kterými se právě začínáme setkávat. Takže i když je k dispozici obrovské množství informací o citlivém webdesignu, je to pojem ještě v dětství. Zatímco osvědčené postupy a běžné případy použití jsou snadno přizpůsobitelné, je kreativní a dláždění vlastní řešení je vždy podporováno. Pokud máte nějaké tipy nebo návrhy pro ty z nás, kteří se právě dostanou, nebo rozšiřují naše znalosti o citlivém webdesignu a vývoji, vyvoláme diskusi níže!