Mobile web development without developing a mobile site

Mobile web development...

...without developing a mobile site

Daniel Davis, Opera Software (@ourmaninjapan)

Difficult to create & maintain

Too many devices to support

Mobile browsers are good enough

Arguments against mobile sites

Mobile Web Best Practices

www.w3.org/TR/mobile-bp

1. Overall Behavior1. Overall Behavior

““There are some general principles that underlie There are some general principles that underlie delivery to mobile devices.”delivery to mobile devices.”

Consistency across devices

Test on actual devices

2. Navigation and Links

“...care should be exercised in defining the structure and the navigation model of a Web site.”

Keep URLs short

Minimal navigation at top of page

Balance number of links and clicks

Access keys for links

Descriptive link text

No pop-ups or JavaScript redirects

Reduce linked resources

3. Page Layout and Content

“…design, the language used […] and the spatial relationship between constituent components.”

Clear & simple language

Show what the user requests

Control page size

Most relevant info first

Use graphics sensibly

Use sufficient contrast

4. Page definition4. Page definition

No frames

Use valid, efficient markup

Avoid tables unless necessary

Include text alternatives

Don't embed objects

Use relative measures (%, em)

Informative error messages

5. User input

“…mobile devices may lack pointing devices

and often do not have a standard keyboard for

text entry.”

Keep keystrokes to a minimum

Avoid free text input

Pre-selected defaults

Logical tab order

Use form labels

CSS3

www.w3.org/TR/css3-roadmap

border-radius: 30px;

box-shadow: 0 10px 20px black;

transform: rotate(315deg);

img {transition-duration: 0.5s;

}

img:hover {transform: rotate(315deg);

}

CSS3 advantages

1. Reduces need for JavaScript:

lighter pages

2. If supported, less load on device

3. If unsupported, no error message

CSS3 Media Queries

www.w3.org/TR/css3-mediaqueries

Tried and tested:

screen, print, handheld

New hotness:

resolution, density, orientation

Media Queries = if statements for CSS

@media screen and (max-width: 480px) { /* regular CSS goes here */#unimportant-box {

display:none;}

}

bit.ly/mqexample

Takeaway

Use Mobile Web Best Practices for guidance

Use CSS3 for styling

Use Media Queries for flexibility

Thank you

bit.ly/operadaniel

www.opera.com/developer/tools

Credits

No mobile phones: http://www.openclipart.org/detail/15417Van: http://www.publicdomainpictures.net/view-image.php?image=2811Lotus Elise: http://www.flickr.com/photos/36824782@N00/162517249

Mitsubishi Evolution: http://www.flickr.com/photos/jason_burmeister/2350518471Mobile phone: http://www.publicdomainpictures.net/view-image.php?image=692

Signpost: http://www.publicdomainpictures.net/view-image.php?image=1666Page design: http://www.openclipart.org/detail/3245

Keypad: http://commons.wikimedia.org/wiki/File:Telephone-keypad.pngSpacewalk:

http://commons.wikimedia.org/wiki/File:Michael_Gernhardt_in_space_during_STS-69_in_1995.jpgGuitar: http://www.openclipart.org/detail/23984

Checkmark: http://www.openclipart.org/detail/19804Hot air balloon: http://commons.wikimedia.org/wiki/File:Hotair.balloon.1.750pix.jpg

Pulling an elephant: http://commons.wikimedia.org/wiki/File:Pulling_an_elephant.jpgWarning notification: http://www.openclipart.org/detail/3743Vintlys Hand font: http://www.dafont.com/vintlys-hand.font

Neuropol font: http://www.dafont.com/neuropol.fontRemaining images by me.