Mobile Websites in eZ workshop @ eZ Summer Camp

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

Mobile phones allowed!

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

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

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

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

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

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

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

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

sport24.com

thebanker.com

wuv.de

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

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

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

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

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

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

Viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Modernizr <html class=”no-js”> <html class=”js boxshadow opacity cssanimations csscolumns cssgradients
csstransforms csstransitions fontface svg inlinesvg”>

CSS3 .button { border-radius:10px; box-shadow:0,2px,4px,rgba(0,0,0,.1); background-image: linear-gradient(bottom, #eee 0%, #ccc
100%); }

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?

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

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

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"]

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

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

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

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>

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

WebKit • Webkit != Browser • Don’t use WebKit-only prefixes!
• Lazy? Use CSS preprocessor (LESS/SASS) or tools like -prefix-free* * leaverou.github.com/prefixfree/

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

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

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

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

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

Mobile Websites in eZ workshop @ eZ Summer Camp

Mobile Websites in eZ workshop @ eZ Summer Camp

More Decks by Lucijan Blagonić

Other Decks in Design

Featured

Transcript