Web na dlani

Problémy

Nebo výzva?

Prostor

Garsonka vs hrad

@lukew / Mobile First

@lukew / Mobile First

@lukew / Mobile First

@lukew / Mobile First

Rozlišní

Tento web je optimalizovaný pro Internet Explorer 5.5

http://m.

Jak to dělat

jQuery / Mobile

Responsive design

Media Queries

• <link rel="stylesheet" href="print.css" media="print">

• @media screen and (min-width: 1100px) {...}• @media screen and (max-device-width: 480px) {}• -webkit-min-device-pixel-ratio: 2• orientation:portrait• orientation:landscape

Kola

• http://html5boilerplate.com/

• http://foundation.zurb.com/mobile.php

• http://lessframework.com/

• http://cssgrid.net/

• http://www.columnal.com/

• Twitter Bootstrap 2

Rychlost

Rychlost

• Soubory (requests + file size)– CSS sprites– 1 .css soubor 1 .js soubor– minimalizace

• „HTML5“– lazy loading– application cache

Bonus