Responsive Web Design (RWD)

Responsive Web Design (RWD)

• RWD je flexibilní nebo adaptivní řešení webů mající vizuální podobu pro většinu běžně používaných zařízení (PC, notebooky, tablety, mobily).
• Hlavní myšlenkou je správné stanovení BREAKPOINTS na základě četnosti stejného rozlišení ve webových prohlížečích na různých zařízeních, které určují základní mřížky - grids, dle kterých se mění částečně nebo zásadně uspořádání, stylizace prvků a obsahu nebo design stránek.
• Druhou možností je na základě vytvořeného grafického designu stránek a jeho rozpadu na bloky určovat BREAKPOINTS pro různá rozlišení tam, kde je to pohledově vhodné nebo kde úprava designu či úprava kódu má nejmenší dopad (např. na časovou náročnost).

 

Příklady a typy chování webů v RWD

Mostly Fluidy

• Vícesloupcový layout, který se při zužování rozlišení „přeskupuje skokově" s minimálními změnami ve formátování obsahu sloupců.

  Columm Drop

  • Vícesloupcový layout, který se rozšiřuje nebo zužuje plynule při změně rozlišení.

    Layout Shifter

    • Systém využívající odlišného layoutu pro různá rozlišení (pracnější).

      Tiny Tweaks

      • Nejméně využívaný, ale hodně jednoduchý systém řešení vhodný pro malé weby a microsite.

        Off Canvas

        • Navigační a ovládací prvky (např. menu, kontakty, sociální sítě, vyhledávání atd.) je možné „schovat" za jedno akční tlačítko, které zobrazí obsah nad zobrazenou stránkou nebo jej svou velikostí odsouvá.

          Základní mřížka - grid

          • Pro stolní počítače a notebooky při rozlišení 1024×768 px je rozšířené použití šíře základní mřížky - gridu 960 px.
          • Rozdělením základní mřížky - gridu 960 px (např. na 12 sloupců se šíří sloupce 60 px) dostaneme mřížku, která nám tak může sloužit především k jednoznačnému rozdělení stránky (a tedy i webu) na menší bloky vždy stejné šíře. Do té lze následně umístit celý obsah a design webu, který je pak správně prezentován např. na stolních počítačích.
          • Odvozené šíře mřížek - grids (dle četnosti rozlišní na různých zařízeních) jsou pak 1200 px, 960 px, 760 px, 580 px, 480 px a 320 px, kdy k jejich použití dochází skokově při změně rozlišení:

            Rozsah rozlišení	Volba GRID
            240 px až 319 px	240 GRID
            320 px až 479 px	320 GRID
            480 px až 579 px	480 GRID
            480 px až 579 px	580 GRID
            480 px až 579 px	760 GRID
            960 px až 1199 px	960 GRID
            1200 px až 2560 px	1200 GRID

            • Tam, kde je možné využít fluidní mřížky - gridu, lze vytvořit „natahovatelný" design stránek webu pro všechna rozlišení na všech zařízeních.

              Rozsah rozlišení	Volba GRID
              240 px až 320 px	320 GRID
              321 px až 480 px	480 GRID
              481px až 580 px	580 GRID
              581 px až 760 px	760 GRID
              761 px až 1199 px	960 GRID
              1200 px až 2560 px	1200 GRID

              • Pro maximální zjednodušení webu a náročnosti na RWD lze využít jednosloupcového řešení pro všechna rozlišení.

               

              V následujícím přehledu jsou uvedena všechna rozlišení a řešení grids/breakpoints v jedné tabulce - stav k 2012/2013:

              • Mřížky - grids jsou vhodným, rychlým a vizuálním vodítkem, jak web pro určitou šířku (např. 960 px, 580 px či 320 px) vizuálně a obsahově uspořádat. Jejich dodržování či stanovené šíře jsou však jen doporučené a jejich používání je vždy pouze na dohodě grafika, webaře a architekta, případně na základě vývoje technologií.

              Poznámka:
              Některá mobilní zařízení využívají záměrně menších šíří mřížky - gridu (např. 320 px) pro zobrazení obsahu webu, než by dovolilo jejich skutečné rozlišní displeje (týká se např. iPhone 4/4s, iPhone 5 nebo Android zařízení s rozlišením 1280×720 px a větším). V takovém případě je možné využít fyzicky 2× větších zdrojových obrázků pro jejich lepší vykreslování, bez rozdílu ppi.

            • Ztotožnění se s chováním uživatelů z mobilních zařízení na webu

              • Pravidlo jedné ruky, palce a oka znamená, že většina uživatelů drží mobilní zařízení jednou rukou, ovládá jej jen palcem a věnuje mu zhruba poloviční pozornost při chůzi městem, v metru, při koukání na TV atd.
              • 70 % až 90 % uživatelů mobilních zařízení jsou praváci, pro které je „přirozené" používat mobil držením v pravé ruce a ovládat jej palcem pravé ruky. Z toho plyne smysluplnější organizování obsahu webu tak, že důležitý obsah je v horní části a je mu vyčleněn největší prostor (na úkor navigace a menu), zatímco akční a ovládací prvky jsou umístěny vespod obrazovky (tmavězelená barva na následujícim obrázku).
                • ednoduchá grafika stránek postavená na CSS3 stylech (stín, border, kulaté rohy a minimum obrázků, případně grafické prvky v jednom sprites) přispívá k rychlému načítání obsahu, kratším odezvám od HTTP a celkově "lepší zkušenosti" uživatele s webem (lepší zkušenost s webem na mobilních zařízení mají uživatelé webů, které jsou jednoduché a rychle se „načítají" - uživatelé je častěji či opakovaně využívají).
                • Ke zjednodušení webu může přispět i intuitivní využívání gest prstů na mobilních zařízeních oproti složité navigaci nebo velkému množství ovládacích prvků (tlačítka pro prohlížení galerie obrázků, rolování obsahu, procházení map atd.).

                 

                Organizování / uspořádávání obsahu na mobilních zařízení

                • Důležité je ztotožnění se s tím, jak lidé své mobilní zařízení používají, PROČ nebo K JAKÉMU ÚČELU a jak se samotná mobilní zařízení chovají.
                • Maximální snaha by měla být věnována zdůraznění a vyzdvihnutí důležitého obsahu a udržování jeho přehlednosti a cílení (co uživatelé od stránek očekávají nebo co hledají a co je obchodním záměrem stránek), oproti např. navigačním prvkům, novinkám, footeru atd.
                • Poskytnout relevantní ovládací prvky pro „ovládání" a procházení obsahu webu (pravidlo 5-ti ovládacích prvků nebo méně).
                • Důležité informace a často využívané časti webu umístit na začátku webu.
                • Používání prázdných míst nebo větších mezer může v malých rozlišeních přispívat k lepší čitelnosti webu.
                • 44×44 bodů (pro iPhone) nebo 9 mm (pro Windows) je doporučenou minimální velikostí klikatelné plochy na mobilních zařízení bez rozdílu rozlišení (např. pro tlačítka). Doporučená mezera mezi dvěma sousedními tlačítky je 2 mm nebo 8 px. Skutečná velikost tlačítka pak může být v rozsahu 50 % až 100 %.
                
                • Stále větší význam má cílení obsahu nebo lokalizování pozice mobilních zařízení pro zobrazování relevantních kontaktů nebo poboček pro danou oblast na prvním místě (odpadá tak např. rozeskok s výběrem kraje a okresu).

                Menu, ovládací prky a akční tlačítka

                • Počet položek v menu by se měl pro všechna rozlišení udržovat co nejmenší, ideálně v rozsahu 5+2 (pro malá rozlišení, kde se menu již nevejde, je vhodné jej nahradit jen akčním tlačítkem nebo kotvou menu).
                • S menu lze zacházet jako s mapou stránek (umístěním nad footer), kdy v záhlaví webu je jen kotva a samotné menu je umístěno až na konci stránek (vhodné je také umístit tlačítko/kotvu k návratu zpět do záhlaví webu - u menu nad footerem).
                • Malé, ale důležité sekce a části webu (např. menu, kontakty, sociální sítě atd.) „schované" za jedno akční tlačítko lze zobrazit nad samotným obsahem stránek bez reloadu, nebo jej mohou svojí velikostí odsunout.
                • Logo/brand v záhlaví stránek na mobilních zařízeních může fungovat také jako akční tlačítko, které zpřístupní nebo zobrazí např. informace pro média, RSS kanály, přihlášení do webu, registraci, sociální sítě nebo kontakty (na desktopu je však logo/brand často spojeno s akcí k návratu na úvodní stránku).

                Pozor na univerzální funkci tlačítka/ikony „Zpět" v liště prohlížeče, které je „povinné" pro iPhone a iPad, ale Android a Windows Phone jej mají hardwarové (jeho použitím může dojít k dublování stejné funkce, proto v případě, že v obsahu stránek tlačítko/ikonu „Zpět" používáme, je vhodné jej pojmenovat odlišně a nebo použít jinou ikonu).

                 

                Content a obsahové sdělení

                • Nejdůležitější částí webu je samotný obsah - tedy obsahové sdělení webu.
                • Obsahovému sdělení webu, contentu je třeba vyčlenit co největší prostor a prezentovat jej „nejčtivější" formou (velikost titulků a textu, délka textů a formátování odstavců a bloků).
                • Doporučenou základní velikostí písma textu je 15 px napříč všemi rozlišeními.
                • Je-li „důležité" pro desktop verzi webu mít např. na úvodní stránce promítačku, je potřeba počítat s jejím zjednodušováním pro menší rozlišení („zakomentovávání" částí textu nebo obsahu) a zároveň zachováváním čitelnosti. Pokud není možné tohoto docílit (obrázková promítačka i s texty), je vhodnějším řešením takovou promítačku celou zakomentovat.
                • Pokud používáme v seznamu článků titulky s dlouhými perexy nebo všeobecně dlouhé popisné bloky textů, není vhodné v RWD se změnou na menší rozlišení měnit délku textů, krátit je a „vytečkovávat" či podstrkávat alternativní texty. I v tomto případě je lepším řešením části obsahu „zakomentovat".
                • Odkazy v textu je namísto podtrhávání vhodnější zvýraznit změnou barvy nebo stylem, případně nahrazením za button.

                 

                Reklama a bannerové pozice v RWD

                • Jedním z řešení je přejít z FLASH bannerů na HTML/CSS, kdy je zaručena podpora v různých prohlížečích.
                • Pro weby závislé na prodeji reklamy je vhodné toto řešení pro RWD nabízet jako „balíček" (pracnější na výrobu).
                  • Varianta A (728×90 px - stolní počítače a notebooky; 468×60 px - tablety; 300×50 px- mobilní zařízení).
                  • Varianta B (745×100 px - stolní počítače a notebooky; 300×300 px nebo 300×250 px - tablety; 230×42 px - mobilní zařízení).
                    • Sporná otázka je ohledně reloadu stránek při změně velikosti prohlížeče, kdy může dojít k načtení jiné reklamy (vhodné je vyřešit podstrkávání stejné reklamy/brandu pro různá rozlišení).
                    • Bannerové pozice leaderborderu v záhlaví webu 728×90 px lze vhodně umístit i pro rozlišení 768×1024px na iPadu a bannerové pozice MMU 300×250 px a 300×300 px v těle stránek pak i pro menší rozlišení.

                    Příprava designu stránek pro mobilní zařízení

                    • Správný postup, jak vytvořit „funkční" RWD NEJEN PRO MOBILNÍ ZAŘÍZENÍ, ALE I PRO STOLNÍ POČÍTAČE A NOTEBOOKY, je začít přípravou webu právě pro mobilní zařízení, a až poté pro stolní počítače a notebooky. Jednosloupcová forma stránek pro mobilní zařízení nám dá jasnou představu, jak správně chápat a uspořádat obsah webu a jak následně docílit lepší přehlednosti a použitelnosti webu pro stolní počítače a notebooky.
                    • Pro mobilní zařízení je základní a nejvíce rozšířené rozlišení 320×480 px, proto by se mělo začínat s vývojem od tohoto rozlišení.
                    • Při rozlišení 320×480 px na mobilních zařízeních musí být (oproti rozlišení 1024×768 px)odstraněno cca 80 % obsahu nebo zobrazitelné části stránek (navigace, reklama, interakce, obsah, nedůležité části webu, obrázky atd.).
                    • Web pro mobilní zařízení vyžaduje dobrou znalost  klienta a jeho potřeb, stejně jako potřeb uživatelů. Z toho vyplývá nutnost klást stejný důraz na obsah jak pro mobilní zařízení, tak i pro běžné stolní počítače nebo notebooky - dramaticky se tím zvýší jednoduchost a přehlednost stránek.
                    • Vytváření webu (minimálně na úrovni drátěných modelů) nejprve pro mobilní zařízení má význam i v případech, kdy RWD nebo web pro mobilní zařízení primárně nepotřebujeme nebo nevytváříme.
                    • Již při vytváření wireframes a grafického návrhu webu pro mobilní zařízení (a až poté pro stolní počítače a notebooky) by se mělo vyřešit nejvíce konfliktních „pohledových" vad a rozložení obsahu či webdeveloperských „úskalí". Ušetří se tak nejen čas, ale i vynaložená námaha při dodatečných úpravách, kdy jsou změny již složité ("v zadání se s tím nepočítalo").
                    • I webdeveloperské práce by měly začínat od webu pro mobilní zařízení, kdy se vytvoří jednoduchý design a kód stránek, na který lze navazovat další bloky pro stolní počítače a notebooky, než opačně ze složitého kódu něco odstraňovat (čistota a jednoduchost kódu pro mobilní zařízení mají vliv i na rychlost).

                     

                    ----------------------------------------

                    Tento článek vznikl na základě vědomostí čerpaných převážně z následujících zdrojů:

                    Online:

                    LukeW Ideation + Design

                    Smashing Magazine

                    The Personal Disquiet of Mark Boulton

                    Knihy:

                    Wroblewski, Luke: Mobile First (2011)

                    Ethan Marcotte: Responsive Web Design (2011)