Your SlideShare is downloading. ×
Html 5 mobile - nitty gritty
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html 5 mobile - nitty gritty


Published on

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

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

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HTML 5 Mobile Nitty-Gritty
  • 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 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. 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. A start to getting it done.
  • 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. High level overview
  • 8. Why are we doing it?Usability, Usefulness and Relevancy
  • 9. Its not just aboutmobileIts about Universal Design
  • 10. Design for all Even this guy.
  • 11. Dovetailswith Accessibility Not just political correctness
  • 12. Were all now disabledsometimes● 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
  • 14. PrioritiesLimitations, Constraints and Boundaries...ohmy!
  • 15. Lamp versus Laser focus
  • 16. When one door closes, a window opens.UD is both a narrowing and broadening opportunity
  • 17. Beware of one size fits all.
  • 18. The difference between asite and an appgeneral orientation task oriented
  • 19. Sometimes these blur...
  • 20. A little nitty grittyShared approaches and differences
  • 21. Some context...General Elements Tech SpecificsStructure HTMLAdaptation JSCapability CSSPolyfilling/ Fallbacks FrameworksPerformance PluginsTesting 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
  • 24. Various custom methodsMobile Responsive JavaScriptTemplates Design Tweaks
  • 25. MobileTemplatesMay be user agent sniffing dependent
  • 26. JavaScriptTweaksVarious options
  • 27. ResponsiveDesignNeeds CSS3 media queries
  • 28. I prefer Responsive DesignBut sometimes its almost a religious debate...No one says you cant mix and match.
  • 29. Quick tour!Lets leave these slides for a bit...
  • 30. Whew!...were back to the slides.
  • 31. Tips and TricksLets get a little dirty. Well, not that dirty...
  • 32. Lets Start!Well focus on Content, Presentation andBehavior
  • 33. Content
  • 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. @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. 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. @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. 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. 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. 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:
  • 41. Normalization vs.Reset StylesProcessing overload vs maintenance
  • 42. Presentation
  • 43. "Fat finger"touch guidelines28 pixels to 72 pixels
  • 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. 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. 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. 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
  • 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
  • 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. Rounded corners andshadows!#somediv {-moz-border-radius: 18px;border-radius: 18px;box-shadow: 20px 20px 10px #CCC;text-shadow: 1px 1px 1px #000;}
  • 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. CSS Gradients Cont.Make your life easier. Use Colorzillas gradientgenerator, a preprocessor mixin or another tool:
  • 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. Transitions, Transformsand AnimationUse them instead of JavaScript animations when possiblefor better performance on mobile devices. Provide fallbackfor older desktop environments when necessary.Good resource: 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. 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. Floats and fixedComplex floating doesnt always play well withmobile/UD and smooth fixed positioning ofitems is spotty in older versions of Android.
  • 57. Behavior
  • 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. "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. Modal hellIf youre using modals dont rely on theclose button. Enable close outside modal.
  • 61. No hover, butclickThere is no such thing as hover for touch
  • 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. 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. 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. 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. Other great stuff to lookinto.Local StorageIcon fontsCanvas and SVG for scalable graphics
  • 67. I probablymissed somethingsBut theres only so much time in an hour.
  • 68. Time to rinse off.
  • 69. Useful ToolsWhen you dont want to roll your own
  • 70. Useful HTML5 frameworks
  • 71. Good Starting PointsHTML 5 Boilerplate Wordpress 2012Twitters Bootstrap 320 and upZurbs Foundation Jquery Mobile
  • 72. Polyfills/Fallbacks
  • 73. Herding Browser CatsModernizrFeature Detection and basic html tagfixesalong with Respond.jsSelectivzrMore comprehensive CSS3 supportCSS3 PIE for CSS3-like effects on IE6-8
  • 74. Some goodhelpers/pluginsWarning : Your mileage may vary.
  • 75. Content helpersText Galleriesfittext.js Photoswipebigtext.js Touch TouchSliders VideoFlexslider Fitvids.jsOrbit Tables Stacktable.js
  • 76. Process and TestA few good building processors andtesting tools
  • 77. Make life easierCSS Preprocessors CSS3SASS/SCSS CSS3 generatorCompass colorzilla gradientsScout Transition makerLESS TestingLess App Adobe InspectWinless AnimationStylus Adobe Animate
  • 78. Theres an Appfor wrap that.
  • 79. Native App WrappersCompilers BuildersApache AppMobiCordova/PhoneGapAppcelerator/Titanium TiggziIcenium Application Craft
  • 80. How does this relate tome?
  • 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 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. Say more. Do more. Q&A?