1. Mobile web development...
...without developing a mobile site
Daniel Davis, Opera Software (@ourmaninjapan)

3. Arguments against mobile sites
Difficult to create & maintain
Too many devices to support
Mobile browsers are good enough

6. Mobile Web Best Practices
www.w3.org/TR/mobile-bp

7. 1. Overall Behavior
“There are some general principles that underlie
delivery to mobile devices.”

8. Consistency across devices
Test on actual devices

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

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

11. 3. Page Layout and Content
“…design, the language used […] and the spatial
relationship between constituent components.”

12. Clear & simple language
Show what the user requests
Control page size
Most relevant info first
Use graphics sensibly
Use sufficient contrast

13. 4. Page definition

14. No frames
Use valid, efficient markup
Avoid tables unless necessary
Include text alternatives
Don't embed objects
Use relative measures (%, em)
Informative error messages

15. 5. User input
“…mobile devices may
lack pointing devices
and often do not have a
standard keyboard for
text entry.”

16. Keep keystrokes to a minimum
Avoid free text input
Pre-selected defaults
Logical tab order
Use form labels

17. CSS3
www.w3.org/TR/css3-roadmap

18. border-radius: 30px;

19. box-shadow: 0 10px 20px black;

21. transform: rotate(315deg);

22. img {
transition-duration: 0.5s;
}
img:hover {
transform: rotate(315deg);
}

23. CSS3 advantages

24. 1. Reduces need for
JavaScript:
lighter pages

25. 2. If supported, less load on device

26. 3. If unsupported, no error message

27. CSS3 Media Queries
www.w3.org/TR/css3-mediaqueries

28. Tried and tested:
screen, print, handheld
New hotness:
resolution, density, orientation

29. Media Queries = if statements for CSS
@media screen and (max-width: 480px) {
/* regular CSS goes here */
#unimportant-box {
display:none;
}
}

30. bit.ly/mqexample

32. Takeaway
Use Mobile Web Best Practices for guidance
Use CSS3 for styling
Use Media Queries for flexibility

33. Thank you
bit.ly/operadaniel
www.opera.com/developer/tools

34. Credits
No mobile phones: http://www.openclipart.org/detail/15417
Van: http://www.publicdomainpictures.net/view-image.php?image=2811
Lotus Elise: http://www.flickr.com/photos/36824782@N00/162517249
Mitsubishi Evolution: http://www.flickr.com/photos/jason_burmeister/2350518471
Mobile phone: http://www.publicdomainpictures.net/view-image.php?image=692
Signpost: http://www.publicdomainpictures.net/view-image.php?image=1666
Page design: http://www.openclipart.org/detail/3245
Keypad: http://commons.wikimedia.org/wiki/File:Telephone-keypad.png
Spacewalk:
http://commons.wikimedia.org/wiki/File:Michael_Gernhardt_in_space_during_STS-69_in_1995.jpg
Guitar: http://www.openclipart.org/detail/23984
Checkmark: http://www.openclipart.org/detail/19804
Hot 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.jpg
Warning notification: http://www.openclipart.org/detail/3743
Vintlys Hand font: http://www.dafont.com/vintlys-hand.font
Neuropol font: http://www.dafont.com/neuropol.font
Remaining images by me.