Difference from desktop • Touchscreen user interface • Various browsers and devices • WebKit based browsers • Different OS (iOS, Android, WP7) • Technologies • HTML5, CSS3, JS • Less content than desktop site :(
HDPI • Think in advance for high density displays • @2x 32x32px Original Resized from 16x16 Bicubic Sharpen Resized from 16x16 Bicubic Smoother 16x16px Original
Box model /* apply a natural box layout model to all elements */ /* paulirish.com/2012/box-sizing-border-box-ftw/ */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Remember IE6?
Media Queries for HDPI @media only screen and (min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { .icon { background-image:url(ui_2x.png); background-size:1000px 1000px; } } via gist.github.com/3446599
Webfonts • Font licenses • Web service • Paid (e.g. Typekit) • Free (e.g. Google Web Fonts) • Hosting on your server (Font Squirrel) • WebFont Loader, developers.google.com/ webfonts/docs/webfont_loader
Sliders • Touch friendly (change slides with swipe) • Build from scratch and test across browsers • Use available solutions like FlexSlider* (jQuery) or SwipeJS** (library agnostic) • Don’t forget, it’s a mobile site! * flexslider.woothemes.com ** swipejs.com