Upload
ourmaninjapan
View
219
Download
5
Tags:
Embed Size (px)
Citation preview
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.