HTML 5 Mobile Nitty-Gritty
Who the heck are you?Mario Noble   ● web designer              ● front end developer                "integrator"          ...
What this is and isntThis is a medium diveinto "HTML 5"practices for mobile.This isntcomprehensive guideto everythingmobil...
Goals● Give a mental model and  context● Show/tour a basic  version in action● Act as a guide to starting  points for rese...
A start to getting it done.
Agenda●   Overview - General tour of a typical page●   Gritty Tips and Tricks.●   Some useful tools and plugins●   Summary...
High level overview
Why are we doing it?Usability, Usefulness and Relevancy
Its not just aboutmobileIts about Universal Design
Design for all         Even this guy.
Dovetailswith Accessibility Not just political correctness
Were all now disabledsometimes●   need scalable text   ●   unclear interfaces●   low bandwidth        ●   difficult data e...
Warning: Cliches ahead! ●   Less is More. ●   Form follows Function. ●   In Crisis, Opportunity. ●   KISS
PrioritiesLimitations, Constraints and Boundaries...ohmy!
Lamp versus Laser focus
When one door closes, a window opens.UD is both a narrowing and broadening opportunity
Beware of one size fits all.
The difference between asite and an appgeneral orientation   task oriented
Sometimes these blur...
A little nitty grittyShared approaches and differences
Some context...General Elements         Tech SpecificsStructure                HTMLAdaptation               JSCapability  ...
Shared approaches●   Progressive enhancement●   Scaling content●   "Fat finger design"●   Contextual Adaptation (geo, time...
Differing approaches●   Desktop polyfill support●   HTML5 / CSS 3 support●   Explicit permissions●   App store limits●   V...
Various custom methodsMobile      Responsive   JavaScriptTemplates   Design       Tweaks
MobileTemplatesMay be user agent sniffing dependent
JavaScriptTweaksVarious options
ResponsiveDesignNeeds CSS3 media queries
I prefer Responsive DesignBut sometimes its almost a religious debate...No one says you cant mix and match.
Quick tour!Lets leave these slides for a bit...
Whew!...were back to the slides.
Tips and TricksLets get a little dirty.                Well, not that dirty...
Lets Start!Well focus on Content, Presentation andBehavior
Content
Viewport meta tagInclude in your HEAD<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="vie...
@media breakpoints andranges@media (min-width: 800px) { ... }@media tv (min-width: 800px) { ... }@media all and (max-width...
Flip it good@media screen and (orientation:portrait) {  /* Portrait styles */}@media screen and (orientation:landscape) { ...
@media queriesBringing them inIndividual stylesheets:<link rel=stylesheet media=screen and (min-width: 801px)and (max-widt...
HTML5 tags and ARIA roles<HEAD>                  role="banner"<NAV>                   role="navigation"<SECTION>          ...
Scalable imagesimg {max-width: 100%; }img {max-width: 100% !important; }img {max-width: 100%; border-width: 0;vertical-ali...
HTML VideoToo complex to go over here.Use something like fitvids.js for scaling thirdparty embedded videos.Useful resource...
Normalization vs.Reset StylesProcessing overload vs maintenance
Presentation
"Fat finger"touch guidelines28 pixels to 72 pixels
Pixels and remsFont-size can be pixels for IE < 9 and rems(root em) for everyone elseRoot base size 14pxexample:.main-navi...
Beware of display:noneMany people think if they use display:none onan element in css, the background wont load.This is oft...
RGB and RGBAdiv {background: #c83636;background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColors...
Multiple backgrounds#exampleA {width: 500px;height: 250px;background-image: url(decoration.png), url(ribbon.png), url(old_...
CSS Background sizingbackground-size: 200px;background-size: 200px 100px;background-size: 200px 100px, 400px 200px;backgro...
GridsYou can still use the 960 grid. However, youmay want to consider designing in 300px"chunks" for easy linearization on...
Rounded corners andshadows!#somediv {-moz-border-radius: 18px;border-radius: 18px;box-shadow: 20px 20px 10px #CCC;text-sha...
CSS Gradientsbackground: #1e5799; /* Old browsers */background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cc...
CSS Gradients Cont.Make your life easier. Use Colorzillas gradientgenerator, a preprocessor mixin or another tool:http://w...
Getting your percentageTry to use percentages on columns for better scalability.For Example:@media tv (min-width: 1024px) ...
Transitions, Transformsand AnimationUse them instead of JavaScript animations when possiblefor better performance on mobil...
Transitions, Transformsand Animation cont.Animate over keyframes:@webkit-keyframes appear {  0% { opacity : 0; }  100% {op...
Floats and fixedComplex floating doesnt always play well withmobile/UD and smooth fixed positioning ofitems is spotty in o...
Behavior
NavigationMany different patternsOne of the most prominent is by the FilamentGroupGood rundown of current patternsBrad Fro...
"Easy" ValidationIf creating a mobile only site/app, HTML5 hassome great new form attributes for validationand finer contr...
Modal hellIf youre using modals dont rely on theclose button. Enable close outside modal.
No hover, butclickThere is no such thing as hover for touch
Reduce, reduce, reduceDo all the things you should normally do tooptimize but actually do them.Remember to minify code, gz...
GeolocationInvolves some javascript and the users explicitpermission to allow you to use their location.This also depends ...
Geolocation Cont.function get_location() {  if (Modernizr.geolocation) {    navigator.geolocation.getCurrentPosition(show_...
Caching<html manifest="/yourcache.      On Apaches set .manifest">                       htaccess file                    ...
Other great stuff to lookinto.Local StorageIcon fontsCanvas and SVG for scalable graphics
I probablymissed somethingsBut theres only so much time in an hour.
Time to rinse off.
Useful ToolsWhen you dont want to roll your own
Useful HTML5 frameworks
Good Starting PointsHTML 5 Boilerplate    Wordpress 2012Twitters Bootstrap   320 and upZurbs Foundation     Jquery Mobile
Polyfills/Fallbacks
Herding Browser CatsModernizrFeature Detection and basic html tagfixesalong with Respond.jsSelectivzrMore comprehensive CS...
Some goodhelpers/pluginsWarning : Your mileage may vary.
Content helpersText         Galleriesfittext.js   Photoswipebigtext.js   Touch TouchSliders      VideoFlexslider   Fitvids...
Process and TestA few good building processors andtesting tools
Make life easierCSS Preprocessors   CSS3SASS/SCSS           CSS3 generatorCompass             colorzilla gradientsScout   ...
Theres an Appfor apps...to wrap that.
Native App WrappersCompilers               BuildersApache                  AppMobiCordova/PhoneGapAppcelerator/Titanium   ...
How does this relate tome?
Skill set takeaway●   HTML5●   CSS3●   Preprocessors●   Content/Context User    Centered approach●   Progressive    enhanc...
To sum upMobile design and development can be bothchallenging and rewarding.Reach more people than ever before in morecont...
Say more. Do more.               Q&A?
Upcoming SlideShare
Loading in...5
×

Html 5 mobile - nitty gritty

619

Published on

An overview of some HTML 5 best practices and tools for mobile / Universal Design.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
619
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 5 mobile - nitty gritty

  1. 1. HTML 5 Mobile Nitty-Gritty
  2. 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. 3. What this is and isntThis is a medium diveinto "HTML 5"practices for mobile.This isntcomprehensive guideto everythingmobile/HTML5 nor aguide on native mobileapp development. HTML5 = new Web 2.0?
  4. 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
  5. 5. A start to getting it done.
  6. 6. Agenda● Overview - General tour of a typical page● Gritty Tips and Tricks.● Some useful tools and plugins● Summary● Q&A10-20 minutes each
  7. 7. High level overview
  8. 8. Why are we doing it?Usability, Usefulness and Relevancy
  9. 9. Its not just aboutmobileIts about Universal Design
  10. 10. Design for all Even this guy.
  11. 11. Dovetailswith Accessibility Not just political correctness
  12. 12. Were all now disabledsometimes● need scalable text ● unclear interfaces● low bandwidth ● difficult data entry● contrast problems ● cognitive overload● video captioning ● coordination issues
  13. 13. Warning: Cliches ahead! ● Less is More. ● Form follows Function. ● In Crisis, Opportunity. ● KISS
  14. 14. PrioritiesLimitations, Constraints and Boundaries...ohmy!
  15. 15. Lamp versus Laser focus
  16. 16. When one door closes, a window opens.UD is both a narrowing and broadening opportunity
  17. 17. Beware of one size fits all.
  18. 18. The difference between asite and an appgeneral orientation task oriented
  19. 19. Sometimes these blur...
  20. 20. A little nitty grittyShared approaches and differences
  21. 21. Some context...General Elements Tech SpecificsStructure HTMLAdaptation JSCapability CSSPolyfilling/ Fallbacks FrameworksPerformance PluginsTesting Server side
  22. 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. 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
  24. 24. Various custom methodsMobile Responsive JavaScriptTemplates Design Tweaks
  25. 25. MobileTemplatesMay be user agent sniffing dependent
  26. 26. JavaScriptTweaksVarious options
  27. 27. ResponsiveDesignNeeds CSS3 media queries
  28. 28. I prefer Responsive DesignBut sometimes its almost a religious debate...No one says you cant mix and match.
  29. 29. Quick tour!Lets leave these slides for a bit...
  30. 30. Whew!...were back to the slides.
  31. 31. Tips and TricksLets get a little dirty. Well, not that dirty...
  32. 32. Lets Start!Well focus on Content, Presentation andBehavior
  33. 33. Content
  34. 34. Viewport meta tagInclude 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 - preventsuser zoom though good reference on Mozilla Dev Network
  35. 35. @media breakpoints andranges@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. 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 withtheir width as well.
  37. 37. @media queriesBringing them inIndividual stylesheets:<link rel=stylesheet media=screen and (min-width: 801px)and (max-width: 961px) href=css/medium.css />Or embed inlineOr @import into parent stylesheetexample: @import url(red.css) (min-width:400px);Best method: use @media in main stylesheets and/orbring in during compile with preprocessors. Centralizesstyles and reduces http requests
  38. 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 {}
  39. 39. Scalable imagesimg {max-width: 100%; }img {max-width: 100% !important; }img {max-width: 100%; border-width: 0;vertical-align: middle; -ms-interpolation-mode:bicubic; height: auto;}Additional bandwidth friendly options:Filament Group, Adaptive, Picturefill
  40. 40. HTML VideoToo complex to go over here.Use something like fitvids.js for scaling thirdparty embedded videos.Useful resources if you want to roll your own:https://developer.mozilla.org/en-US/docs/HTML/Element/videohttp://diveintohtml5.info/video.html
  41. 41. Normalization vs.Reset StylesProcessing overload vs maintenance
  42. 42. Presentation
  43. 43. "Fat finger"touch guidelines28 pixels to 72 pixels
  44. 44. Pixels and remsFont-size can be pixels for IE < 9 and rems(root em) for everyone elseRoot base size 14pxexample:.main-navigation { font-size: 11px; font-size: 0.785714286rem; /* 11/14 */}
  45. 45. Beware of display:noneMany people think if they use display:none onan element in css, the background wont load.This is often wrong.Great breakdown on timkadlec.comThere are ways:1. display:none on the parent element2. display:none within media queriesNot absolutely consistent in Fennec browser.
  46. 46. RGB and RGBAdiv {background: #c83636;background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);zoom: 1;background: rgb(200, 54, 54);background: rgba(200, 54, 54, 0.5);}
  47. 47. Multiple backgrounds#exampleA {width: 500px;height: 250px;background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);background-repeat: no-repeat;background-position: left top, right bottom, lefttop;} courtesty of CSS3.info
  48. 48. CSS Background sizingbackground-size: 200px;background-size: 200px 100px;background-size: 200px 100px, 400px 200px;background-size: auto 200px;background-size: 50% 25%;background-size: contain;background-size: cover; courtesy of CSS3.info
  49. 49. GridsYou can still use the 960 grid. However, youmay want to consider designing in 300px"chunks" for easy linearization on smallscreens.320andup can use a 4 column layout whichcovers many situations.
  50. 50. Rounded corners andshadows!#somediv {-moz-border-radius: 18px;border-radius: 18px;box-shadow: 20px 20px 10px #CCC;text-shadow: 1px 1px 1px #000;}
  51. 51. CSS Gradientsbackground: #1e5799; /* Old browsers */background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /*FF3.6+ */background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*Opera 11.10+ */background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*IE10+ */background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#1e5799, endColorstr=#7db9e8,GradientType=1 ); /* IE6-9 */ Argh!
  52. 52. CSS Gradients Cont.Make your life easier. Use Colorzillas gradientgenerator, a preprocessor mixin or another tool:http://www.colorzilla.com/gradient-editor/
  53. 53. Getting your percentageTry 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. 54. Transitions, Transformsand AnimationUse them instead of JavaScript animations when possiblefor better performance on mobile devices. Provide fallbackfor older desktop environments when necessary.Good resource: http://www.css3maker.com/Example Transform:#footer h1:focus { transform: translate(45px, -45px); }works for scale, skew, rotateTransitions properties over time:#footer h1:focus { transition: color 0.2s ease-out;}
  55. 55. Transitions, Transformsand Animation cont.Animate over keyframes:@webkit-keyframes appear { 0% { opacity : 0; } 100% {opacity: 1;}}.someAnimTarget { -webkit-animation: appear 300msease-in 1 alternate 5s forwards}As usual, keep in mind browser prefixs -web, -o, -moz
  56. 56. Floats and fixedComplex floating doesnt always play well withmobile/UD and smooth fixed positioning ofitems is spotty in older versions of Android.
  57. 57. Behavior
  58. 58. NavigationMany different patternsOne of the most prominent is by the FilamentGroupGood rundown of current patternsBrad Frosts Basic Patterns , ComplexI use a Return to Top in the footer and Sitemap
  59. 59. "Easy" ValidationIf creating a mobile only site/app, HTML5 hassome great new form attributes for validationand finer control.Examples: required, pattern, autocomplete,placeholderSee MDN for more examples
  60. 60. Modal hellIf youre using modals dont rely on theclose button. Enable close outside modal.
  61. 61. No hover, butclickThere is no such thing as hover for touch
  62. 62. Reduce, reduce, reduceDo all the things you should normally do tooptimize but actually do them.Remember to minify code, gzip files, cache,CDNs, image sprites and dynamic server sideimage resizing where possible onproduction/live sites.
  63. 63. GeolocationInvolves some javascript and the users explicitpermission to allow you to use their location.This also depends on their GPS and networkcapabilities to determine where they are.Fist detect for support using something likemodernizr.js then run a query against thedevice.You may need a fallback
  64. 64. Geolocation Cont.function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // this device isnt supporting it }}Try geolocation.js for fallback alternative.
  65. 65. Caching<html manifest="/yourcache. On Apaches set .manifest"> htaccess file AddType text/cache-In that file: manifest .manifest ExpiresActive OnCACHE MANIFEST ExpiresDefault# rev 54 "access"myscript.jscss/mycss.cssonly updated when rev# changes
  66. 66. Other great stuff to lookinto.Local StorageIcon fontsCanvas and SVG for scalable graphics
  67. 67. I probablymissed somethingsBut theres only so much time in an hour.
  68. 68. Time to rinse off.
  69. 69. Useful ToolsWhen you dont want to roll your own
  70. 70. Useful HTML5 frameworks
  71. 71. Good Starting PointsHTML 5 Boilerplate Wordpress 2012Twitters Bootstrap 320 and upZurbs Foundation Jquery Mobile
  72. 72. Polyfills/Fallbacks
  73. 73. Herding Browser CatsModernizrFeature Detection and basic html tagfixesalong with Respond.jsSelectivzrMore comprehensive CSS3 supportCSS3 PIE for CSS3-like effects on IE6-8
  74. 74. Some goodhelpers/pluginsWarning : Your mileage may vary.
  75. 75. Content helpersText Galleriesfittext.js Photoswipebigtext.js Touch TouchSliders VideoFlexslider Fitvids.jsOrbit Tables Stacktable.js
  76. 76. Process and TestA few good building processors andtesting tools
  77. 77. Make life easierCSS Preprocessors CSS3SASS/SCSS CSS3 generatorCompass colorzilla gradientsScout Transition makerLESS TestingLess App Adobe InspectWinless AnimationStylus Adobe Animate
  78. 78. Theres an Appfor apps...to wrap that.
  79. 79. Native App WrappersCompilers BuildersApache AppMobiCordova/PhoneGapAppcelerator/Titanium TiggziIcenium Application Craft
  80. 80. How does this relate tome?
  81. 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. 82. To sum upMobile design and development can be bothchallenging and rewarding.Reach more people than ever before in morecontexts than ever.The field is in flux but the reality is clear.Something needs to be done.
  83. 83. Say more. Do more. Q&A?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×