Responzivní webdesign

Pro rychlé vytvoření responzivního rozvržení je možné použít generátory nebo využít některého z frameworků např.:

responsify.it (grid – pružná šířka sloupce, less, scss)
getbootstrap.com (grid)
foundation.zurb.com (grid)

Mé požadavky:

samostatné sekce (hlavička, obsah, patička atd.) – zrychlení počátku vykreslování webu (Start Render)
(možnost fixní šířky sloupců – např. pro reklamní bloky)
- v takto definovaných "úzkých" šířkách není vhodné uživateli povolovat zvětšování písma
HTML5
responzivní design

Zajímavé zdroje informací:

Responsive web design
responsivedesign.is
html5please.com
css3please.com
Responsive Webfont Icons
- icoMoon.io
- edutopia.org/blog/design-101-icons-jason-cranford-teague (včetně seznamu zdrojů ikon zdarma)

Techniky vytváření vzhledu:

Mobile first – vzhled se začíná tvořit od mobilního, přes tablet, notebook, desktop až k TV
Desktop first – většinou při nedostatku času nebo při nutnosti podpory starších prohlížečů

CSS:

Nejdříve pište "obyčejné" selektory – vzhled načtou i prohlížeče nepodporující Media Query
Teprve poté pište selektory v Media Queries podmínkách – upřesňují vzhled pro moderní prohlížeče

Optimalizace:

pro cílové zařízení používejte konkrétní kvalitu médií (vzhled, obrázky, videa atd.)
využívejte asynchronní verze skriptů

Jak vytvořit responzivní webdesign?

Pro sjednocení vzhledu (vykreslení) všech prvků napříč moderními prohlížeči je vhodné použít normalize.css (pro zastaralé prohlížeče je nutné použít dnes již "zavržený" reset.css).

Normalize.css:

zachovává užitečné výchozí nastavení prvků
opravuje některé běžné chyby (HTML5 elementy, dědičnost písma ve formulářových prvcích, korekce velikosti písma, SVG přetečení v IE9, vzhled tlačítek v iOS atd.)
neznehodnocuje práci ve vývojových nástrojích a při ladění CSS atd.

Většina mobilní prohlížečů přizpůsobí stránku (pomocí změny měřítka "scale") tak, aby se celá vešla na obrazovku (=>téměř nečitelný text). Pro zamezení tohoto chování je tedy třeba do hlavičky vložit níže uvedený meta tag (umožňuje změnu šířky při natočení):

<meta name="viewport" content="width=device-width, initial-scale=1">

Více viz např. developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Tip: Alternativou k výše uvedeném tagu muže být CSS @viewport

Pružné (flexibilní) obrázky a multimédia:

img,
embed,
object,
video {
  display: block; /* IE (display: block; | width: auto; | width: 100%;) */
  max-width: 100%;
  height: auto;
  vertical-align: top; /* optional */
  -ms-interpolation-mode: bicubic;
}

Tip: Responsive images – how to prevent reflow

Responzivní tabulky

FooTable

Nastavení vlastních beakpointů

<script>
  $(function () {
    $('.footable').footable({
      breakpoints: {
        phone: 749,
        tablet: 969
      }
    });
  });
</script>

Nastavení + výpis beakpointů do logů (např. Chrome/Console)

<script>
  $(function () {
    $('.footable').footable({
      breakpoints: {
        phone: 749,
        tablet: 969
      }
    }).bind({
      'footable_breakpoint' : function(e) {
        console.log(e.breakpoint);     
      }
    });
  });
</script>

Simple Responsive Table – CSS
(Responsive Tables - CSS/JS)
(Responsive Data Tables - CSS)

U mobilních telefonů je možné zakázat funkci automatického zvětšení písma, ovšem sníží se tím čitelnost textu:

html {
  /*-webkit-text-size-adjust: none;*/
}

Dostatečná velikost aktivního prvku (položka navigace, tlačítko, formulářový prvek atd.):

průměr dotykové plošky prstu je přibližně 10 mm
doporučení: min. 7 x 7 mm (48 x 48 px) + min. 5 mm (32 px) rozestup mezi aktivními prvky

Základní HTML5 struktura (layout) stránky:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <header id="header">
      <p>Site Name</p>
    </header>
    <nav>
      <ul id="main-nav">
        <li><a href="#">Home</a></li>
      </ul>
    </nav>
    <main>
      <h1>Page Title</h1>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
    </main>
    <aside id="sidebar">
      <section class="block">
        ...
      </section>   
    </aside>
    <footer id="footer">
      ...
    </footer>
  </body>
<html>

Element main byl přidán až v HTML5.1:

prvek main nesmí být potomkem prvků header, nav, article, aside, footer
u IE9+ je zatím nutné definovat main jako blokový prvek
- ```
main {display: block;}
```
u IE8- je navíc kromě CSS ještě nutné prvek v head skriptem definovat (případně použít html5shiv.js knihovnu)
- ```
<script>document.createElement('main');</script>
```

V HTML5 je možné vynechat atribut type:

místo <style type="text/css"> je tedy možné psát jen <style>
místo <script type="text/javascript"> je tedy možné psát jen <script>

Tipy: Vyhněte se nejobvyklejším chybám v HTML5

Internet Explorer 8 a starší verze

Využijte výhod validních podmíněných komentářů (IE Conditional Stylesheets vs CSS Hacks) přímo pro element <html>:

<!--[if IEMobile 7]><html class="ie iem7"><![endif]-->
<!--[if lte IE 6]><html class="ie lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="ie lt-ie9"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><html class="ie"><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

IE8- můžete nechat v jednosloupcovém "mobilním" vzhledu viz Leaving Old Internet Explorer Behind nebo podporu Media Queries zpřístupníte pomocí JavaScriptu.

X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód:

meta tag "X-UA-Compatible" by měl být vložen přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář )
- nejvhodnějším řešením by bylo např. detekovat hodnotu HTTP_USER_AGENT (viz např. Drupal modul Browser class) a na základě ní hlavičku dokumentu o níže uvedený meta tag automaticky doplnit
hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
- podpora jen do ledna 2014 !!!
- ```
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
```

<!--[if lte IE 9]>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
<![endif]-->

Pro podporu media queries v IE8- je třeba použít media-queries.js (nabízí více možností ovšem na úkor výkonu) nebo respond.js:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Pro podporu nových HTML5 prvků (header, nav, article, aside, section, footer atd.) v IE8- je nutné k dokumentu připojit html5shiv (pouze pro IE8-) nebo Modernizr (nabízí více možností):

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

Tipy:

Responsive Web Design
Mobile First
Sass
Compass
Singularity Grid System
Breakpoint
Base Theme
Drush

Verze pro tisk
Pro psaní komentářů se přihlašte
3225x přečteno

Tomáš Daněk