Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Websites in eZ workshop @ eZ Summer Camp

Lucijan Blagonić
September 07, 2012

Mobile Websites in eZ workshop @ eZ Summer Camp

Slides from "Mobile Websites in eZ" workshop and best practices in eZ @ eZ Summer Camp 2012.

Lucijan Blagonić

September 07, 2012
Tweet

More Decks by Lucijan Blagonić

Other Decks in Design

Transcript

  1. Introduction • Why is mobile web important? • What is

    the difference between mobile and desktop? • What do our users expect?
  2. 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 :(
  3. Mobile oriented design • Progressive enhancement • Native mobile phone

    functionality • Touchscreen specific functionality
  4. eZ? • Learn best mobile practices • Not much resource

    on eZ • eZ is used for content-heavy sites • Educate your: • Clients • Designers • Developers
  5. Icons • Using images (pixel-perfect, but extra work) • Using

    SVG, caniuse.com/#search=svg • Using fonts
  6. HDPI • Think in advance for high density displays •

    @2x 32x32px Original Resized from 16x16 Bicubic Sharpen Resized from 16x16 Bicubic Smoother 16x16px Original
  7. HTML/CSS • HTML5 ready • Use modernizr for feature detection

    • Not sure? caniuse.com & mobilehtml5.org
  8. 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?
  9. Forms <input type="tel" required name=”Phone”> input[type="text"] input[type="password"] input[type="datetime"] input[type="datetime-local"] input[type="date"]

    input[type="month"] input[type="time"] input[type="week"] input[type="number"] input[type="email"] input[type="url"] input[type="search"] input[type="tel"] input[type="color"]
  10. Long URL’s element { -ms-word-break: break-all; word-break: break-all; } /*

    blog.kenneth.io/blog/2012/03/04/word-wrapping- hypernation-using-css/ */
  11. Mobile environment <a href="tel:+38501444888" class=”button”> Call +385 01 444 888

    </a> <a href="http://maps.google.com/maps? daddr=43.508132,16.440193" class=”button”> Show directions </a>
  12. 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
  13. WebKit • Webkit != Browser • Don’t use WebKit-only prefixes!

    • Lazy? Use CSS preprocessor (LESS/SASS) or tools like -prefix-free* * leaverou.github.com/prefixfree/
  14. 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
  15. 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
  16. Testing • Software testing • Simulators (iOS, WP7, Android, Opera...)

    • Device testing • Friends, Co-workers... :)
  17. Adobe Shadow • Test simultaneously on different devices (iOS, Android

    & desktop) • Inspector • WebKit-only testing