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

Mobile Websites in eZ workshop @ eZ Summer Camp

2eaa540dfe93c83d61a8fafedec664ff?s=47 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.

2eaa540dfe93c83d61a8fafedec664ff?s=128

Lucijan Blagonić

September 07, 2012
Tweet

Transcript

  1. Mobile Websites in eZ Lucijan Blagonić @lblagonic 2012 eZ Summer

    Camp
  2. Mobile phones allowed!

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

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

    functionality • Touchscreen specific functionality
  6. User is... • Microtasking • Local • Bored via Tapworthy

    – Designing Great iPhone Apps
  7. Touchscreen • “Imperfect controls” • No hover state • On

    screen controls
  8. Responsive... • Or dedicated mobile site? • Depends on content,

    budget, experience...
  9. Complexity New content Legacy content Cost Optimization Support Responsive vs.

    Mobile site
  10. eZ? • Learn best mobile practices • Not much resource

    on eZ • eZ is used for content-heavy sites • Educate your: • Clients • Designers • Developers
  11. sport24.com

  12. thebanker.com

  13. wuv.de

  14. Mobile 7+% August 2011 11+% August 2012 Source gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201108-201208

  15. Design • Content first • Presentation & interactive layer •

    Sketch your way
  16. Additional assets • Start in Photoshop but finish in browser

    • Rely on CSS
  17. Icons • Using images (pixel-perfect, but extra work) • Using

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

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

    • Not sure? caniuse.com & mobilehtml5.org
  20. Viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  21. Modernizr <html class=”no-js”> <html class=”js boxshadow opacity cssanimations csscolumns cssgradients

    csstransforms csstransitions fontface svg inlinesvg”>
  22. CSS3 .button { border-radius:10px; box-shadow:0,2px,4px,rgba(0,0,0,.1); background-image: linear-gradient(bottom, #eee 0%, #ccc

    100%); }
  23. 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?
  24. User content embed, video, object, img { max-width:100%; height:auto; }

  25. Override inline style .element[style] { width:100%; }

  26. 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"]
  27. None
  28. Form styling input, textarea, select { -webkit-appearance: none; /* Removes

    default browser styles */ }
  29. Text adjust element { -webkit-text-size-adjust:none; /* Use carefully */ }

  30. 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/ */
  31. 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>
  32. 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
  33. None
  34. WebKit • Webkit != Browser • Don’t use WebKit-only prefixes!

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

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

    & desktop) • Inspector • WebKit-only testing
  39. Install • http:/ /www.adobe.com/go/sd_ios_app • http:/ /www.adobe.com/go/sd_android_app

  40. None
  41. Thanks! Don’t stop here, let’s continue over coffee!