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. 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