Mobile Websites in eZ workshop @ eZ Summer Camp

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

Transcript

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

   View Slide

2. Mobile phones allowed!
   

   View Slide

3. Introduction
   • Why is mobile web important?
   • What is the difference between
   mobile and desktop?
   • What do our users expect?
   

   View Slide

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 :(
   

   View Slide

5. Mobile oriented design
   • Progressive enhancement
   • Native mobile phone functionality
   • Touchscreen specific functionality
   

   View Slide

6. User is...
   • Microtasking
   • Local
   • Bored
   via Tapworthy – Designing Great iPhone Apps
   

   View Slide

7. Touchscreen
   • “Imperfect controls”
   • No hover state
   • On screen controls
   

   View Slide

8. Responsive...
   • Or dedicated mobile site?
   • Depends on content, budget, experience...
   

   View Slide

9. Complexity
   New content
   Legacy content
   Cost
   Optimization
   Support
   Responsive vs. Mobile site
   

   View Slide

10. eZ?
    • Learn best mobile practices
    • Not much resource on eZ
    • eZ is used for content-heavy sites
    • Educate your:
    • Clients
    • Designers
    • Developers
    

    View Slide

11. sport24.com
    

    View Slide

12. thebanker.com
    

    View Slide

13. wuv.de
    

    View Slide

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

    View Slide

15. Design
    • Content first
    • Presentation & interactive layer
    • Sketch your way
    

    View Slide

16. Additional assets
    • Start in Photoshop but finish in browser
    • Rely on CSS
    

    View Slide

17. Icons
    • Using images (pixel-perfect, but extra work)
    • Using SVG, caniuse.com/#search=svg
    • Using fonts
    

    View Slide

18. HDPI
    • Think in advance for high density displays
    • @2x
    32x32px
    Original
    Resized from 16x16
    Bicubic Sharpen
    Resized from 16x16
    Bicubic Smoother
    16x16px
    Original
    

    View Slide

19. HTML/CSS
    • HTML5 ready
    • Use modernizr for feature detection
    • Not sure? caniuse.com & mobilehtml5.org
    

    View Slide

20. Viewport
    
    

    View Slide

21. Modernizr
    
    

    View Slide

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%);
    }
    

    View Slide

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?
    

    View Slide

24. User content
    embed, video, object, img {
    max-width:100%;
    height:auto;
    }
    

    View Slide

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

    View Slide

26. Forms
    
    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"]
    

    View Slide

27. View Slide

28. Form styling
    input, textarea, select {
    -webkit-appearance: none;
    /* Removes default browser styles */
    }
    

    View Slide

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

    View Slide

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/ */
    

    View Slide

31. Mobile environment
    
    Call +385 01 444 888
    
    
    Show directions
    
    

    View Slide

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
    

    View Slide

33. View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

37. Testing
    • Software testing
    • Simulators (iOS, WP7, Android, Opera...)
    • Device testing
    • Friends, Co-workers... :)
    

    View Slide

38. Adobe Shadow
    • Test simultaneously on different devices
    (iOS, Android & desktop)
    • Inspector
    • WebKit-only testing
    

    View Slide

39. Install
    • http:/
    /www.adobe.com/go/sd_ios_app
    • http:/
    /www.adobe.com/go/sd_android_app
    

    View Slide

40. View Slide

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

    View Slide