2. Who the heck are you?
Mario Noble ● web designer
● front end developer
"integrator"
● over ten years of
experience
● freelance/ company /
small and enterprise
● principal at Context
Multimedia and Mario
Noble Design
● organizer SCWDD
3. What this is and isn't
This is a medium dive
into "HTML 5"
practices for mobile.
This isn't
comprehensive guide
to everything
mobile/HTML5 nor a
guide on native mobile
app development. HTML5 = new Web 2.0?
4. Goals
● Give a mental model and
context
● Show/tour a basic
version in action
● Act as a guide to starting
points for research
● Inspire people to get
going or to be advocates
for a Universal approach
12. We're all now disabled
sometimes
● need scalable text ● unclear interfaces
● low bandwidth ● difficult data entry
● contrast problems ● cognitive overload
● video captioning ● coordination issues
13. Warning: Cliches ahead!
● Less is More.
● Form follows Function.
● In Crisis, Opportunity.
● KISS
21. Some context...
General Elements Tech Specifics
Structure HTML
Adaptation JS
Capability CSS
Polyfilling/ Fallbacks Frameworks
Performance Plugins
Testing Server side
22. Shared approaches
● Progressive enhancement
● Scaling content
● "Fat finger design"
● Contextual Adaptation (geo, time, offline
access, web workers)
● Gestures
● PNGs
● Utilizing CSS3 and HTML 5 over JavaScript
● Image sprites
23. Differing approaches
● Desktop polyfill support
● HTML5 / CSS 3 support
● Explicit permissions
● App store limits
● Vectors (SVG and Canvas)
● Webfonts
● Splash screens
● Security
● Form elements
34. Viewport meta tag
Include in your HEAD
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-
scale=1, maximum-scale=1">
used for iOS landscape/portrait fix - prevents
user zoom though
good reference on Mozilla Dev Network
35. @media breakpoints and
ranges
@media (min-width: 800px) { ... }
@media tv (min-width: 800px) { ... }
@media all and (max-width: 599px) {...}
@media (min-width: 800px) and (orientation: landscape) {
... }
@media all and (min-width: 481px) and (max-width: 799px)
{...}
A "mobile first" /LCD approach helps a lot!
Other parameters sometimes supported: aspect ratio,
resolution, monochrome
See MDN
36. Flip it good
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
Can be used to target iOS devices along with
their width as well.
37. @media queries
Bringing them in
Individual stylesheets:
<link rel='stylesheet' media='screen and (min-width: 801px)
and (max-width: 961px)' href='css/medium.css' />
Or embed inline
Or @import into parent stylesheet
example: @import url(red.css) (min-width:400px);
Best method: use @media in main stylesheets and/or
bring in during compile with preprocessors. Centralizes
styles and reduces http requests
38. HTML5 tags and ARIA roles
<HEAD> role="banner"
<NAV> role="navigation"
<SECTION> role="main" (new!)
<ARTICLE> role="complementary"
<ASIDE> role="search"
<FOOTER> role="contentinfo"
<HGROUP> use instead of a class
header[role="banner"]
Needs Shiv for IE < 9 {}
40. HTML Video
Too complex to go over here.
Use something like fitvids.js for scaling third
party embedded videos.
Useful resources if you want to roll your own:
https://developer.mozilla.org/en-
US/docs/HTML/Element/video
http://diveintohtml5.info/video.html
44. Pixels and rems
Font-size can be pixels for IE < 9 and rems
(root em) for everyone else
Root base size 14px
example:
.main-navigation {
font-size: 11px;
font-size: 0.785714286rem; /* 11/14 */
}
45. Beware of display:none
Many people think if they use display:none on
an element in css, the background won't load.
This is often wrong.
Great breakdown on timkadlec.com
There are ways:
1. display:none on the parent element
2. display:none within media queries
Not absolutely consistent in Fennec browser.
49. Grids
You can still use the 960 grid. However, you
may want to consider designing in 300px
"chunks" for easy linearization on small
screens.
320andup can use a 4 column layout which
covers many situations.
50. Rounded corners and
shadows!
#somediv {
-moz-border-radius: 18px;
border-radius: 18px;
box-shadow: 20px 20px 10px #CCC;
text-shadow: 1px 1px 1px #000;
}
52. CSS Gradients Cont.
Make your life easier. Use Colorzilla's gradient
generator, a preprocessor mixin or another tool:
http://www.colorzilla.com/gradient-editor/
53. Getting your percentage
Try to use percentages on columns for better scalability.
For Example:
@media tv (min-width: 1024px) {
#container {width:960;}
}
#mainContent {width: 60%;}
#sidebar{width: 40%;}
54. Transitions, Transforms
and Animation
Use them instead of JavaScript animations when possible
for better performance on mobile devices. Provide fallback
for older desktop environments when necessary.
Good resource: http://www.css3maker.com/
Example Transform:
#footer h1:focus { transform: translate(45px, -45px); }
works for scale, skew, rotate
Transitions properties over time:
#footer h1:focus { transition: color 0.2s ease-out;}
55. Transitions, Transforms
and Animation cont.
Animate over keyframes:
@webkit-keyframes 'appear' {
0% { opacity : 0; }
100% {opacity: 1;}
}
.someAnimTarget { -webkit-animation: 'appear' 300ms
ease-in 1 alternate 5s forwards}
As usual, keep in mind browser prefixs -web, -o, -moz
56. Floats and fixed
Complex floating doesn't always play well with
mobile/UD and smooth fixed positioning of
items is spotty in older versions of Android.
58. Navigation
Many different patterns
One of the most prominent is by the Filament
Group
Good rundown of current patterns
Brad Frost's Basic Patterns , Complex
I use a Return to Top in the footer and Sitemap
59. "Easy" Validation
If creating a mobile only site/app, HTML5 has
some great new form attributes for validation
and finer control.
Examples: required, pattern, autocomplete,
placeholder
See MDN for more examples
60. Modal hell
If you're using modals don't rely on the
close button. Enable close outside modal.
62. Reduce, reduce, reduce
Do all the things you should normally do to
optimize but actually do them.
Remember to minify code, gzip files, cache,
CDNs, image sprites and dynamic server side
image resizing where possible on
production/live sites.
63. Geolocation
Involves some javascript and the user's explicit
permission to allow you to use their location.
This also depends on their GPS and network
capabilities to determine where they are.
Fist detect for support using something like
modernizr.js then run a query against the
device.
You may need a fallback
64. Geolocation Cont.
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// this device isn't supporting it
}
}
Try geolocation.js for fallback alternative.
65. Caching
<html manifest="/yourcache. On Apaches set .
manifest"> htaccess file
AddType text/cache-
In that file:
manifest .manifest
ExpiresActive On
CACHE MANIFEST ExpiresDefault
# rev 54 "access"
myscript.js
css/mycss.css
only updated when rev# changes
66. Other great stuff to look
into.
Local Storage
Icon fonts
Canvas and SVG for scalable graphics
73. Herding Browser Cats
Modernizr
Feature Detection and basic html tag
fixes
along with Respond.js
Selectivzr
More comprehensive CSS3 support
CSS3 PIE for CSS3-like effects on IE
6-8
81. Skill set takeaway
● HTML5
● CSS3
● Preprocessors
● Content/Context User
Centered approach
● Progressive
enhancement attitude
● Fallback planning
● Willingness to Prioritize
and Test
● Get in deep with a
framework
82. To sum up
Mobile design and development can be both
challenging and rewarding.
Reach more people than ever before in more
contexts than ever.
The field is in flux but the reality is clear.
Something needs to be done.