Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS and HTML Coding Today - Pubcon Las Vegas 2013

1,083 views

Published on

Focus on mobile development using HTML5 and CSS3. Includes neat tips and tricks, full code examples!

Published in: Technology, Design
  • Be the first to comment

CSS and HTML Coding Today - Pubcon Las Vegas 2013

  1. 1. CSS and HTML Coding 2013 Mobile Development Todd Keup @toddkeup Las Vegas 2013 @toddkeup
  2. 2. Overview • • • • • Mobile native app versus mobile web Variations of mobile web development How to get started @media query basics Tips and tricks @toddkeup
  3. 3. Native app or mobile web? • • • • • • Considerations Features and functions Design, layout, personalization Budget SEO Updates and App store approval Platforms @toddkeup
  4. 4. Mobile web design methods • Responsive Web Design (RWD) • Adaptive Web Design (AWD) • Responsive Design + Server Side Components (RESS) • Responsible Web Design @toddkeup
  5. 5. Responsible Web Design Focus on your user … … really? @toddkeup
  6. 6. Resources • Apps or web for Mobile Development? http://youtu.be/4f2Zky_YyyQ • Building Smartphone-Optimized Websites http://bit.ly/JXuTPF @toddkeup
  7. 7. How to get started <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Title</title> <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"> <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script> </head> link cannot have a charset attribute style cannot have a charset attribute script if embedded must not have a charset attribute; if external (src attribute specified) and you choose to include a charset, it must match the Content-Type metadata (<meta charset="utf-8"> @toddkeup
  8. 8. @media query basics @import nomalize.css /* reset styles */ /* general settings, overall site layout and design */ body { font:16px Helvetica, Arial, sans-serif; } .wrapper { width:90%; margin:0 5%;} / * media queries (using pixel widths) */ @media only screen and (min-width: 320px) @media only screen and (min-width: 480px) @media only screen and (min-width: 768px) @media only screen and (min-width: 1140px) @media print {} @toddkeup {} {} {} {}
  9. 9. Resources http://www.initializr.com/ http://html5boilerplate.com/ @toddkeup
  10. 10. Tips and tricks • Need IE6-IE8 support? Respond.js https://github.com/scottjehl/Respond • Stop iOS from thinking all numbers are phone links: http://bit.ly/wy6ThZ <meta name="format-detection" content="telephone=no"> <!-- Then use phone links to explicitly create a link. --> <p>Phone: <a href="tel:1-408-555-5555">1-408-555-5555</a></p> <!-- Otherwise numbers that look like phone numbers ... --> <p>Not a phone number: 408-555-5555</p> @toddkeup
  11. 11. Tips and tricks Add pizzazz to your telephone links Before: After: a[href^="tel:"]{text-decoration:none;} a[href^="tel:"]:before { content:"260E"; margin-right:0.5em; } @toddkeup
  12. 12. Tips and tricks Navigation Menu <div id="navmain"> <div id="menu-icon></div> <ul><li><a class="activelink">Home</a> <ul><li><a href="">Menu Option 1</a></li> <li><a href="">Menu Option 2</a> <ul> #menu-icon { background: url("/css/menu-icon.png") no-repeat scroll 10px center rgba(0, 0, 0, 0); cursor:pointer; display:block; height:20px; position:absolute; right:0; top:50px; width: 35px; } @media only screen and (min-width: 768px) { #menu-icon {display:none;} } /* toggle nav */ $('#navmain').on('click', '#menu-icon', function(){ $('.menucontent ul:first').slideToggle(100); }); @toddkeup
  13. 13. Tips and tricks Full Site Version <div id="view-options"><span id="view-full">View Full Site</span></div> /* View Mobile/Full Site options */ #view-options span { background-color: #222222; border-radius: 8px 8px 8px 8px; padding: 8px 16px; color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; } #view-default {display: none;} @media only screen and (min-width: 768px) { /* full viewport new definitions */ span#view-full{display:none;} span#view-default{display:inline;} } @toddkeup
  14. 14. Tips and tricks Full Site Version /** * Mobile "Show Full Site" feature using HTML5 Web Storage * http://dev.w3.org/html5/webstorage/ */ (function(){ // default width value for full site viewport var widthFull = 768; // localStorage value already set? try { localStorage.showFullSite = localStorage.showFullSite == 'undefined' ? 'true' : localStorage.showFullSite ; } catch (e) { // no polyfill necessary at this time; if needed: // https://developer.mozilla.org/en-US/docs/DOM/Storage OR // https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browserPolyfills } @toddkeup
  15. 15. Tips and tricks Full Site Version var showFullSite = function(){ $('meta[name="viewport"]').attr('content','width='+widthFull); if(!$('#view-options #view-default').length){ $('#view-options').append('<span id="view-default">View Mobile</span>'); } localStorage.showFullSite = 'false'; // don't show full site button }; var showDeviceWidth = function(){ $('meta[name="viewport"]').attr('content','width=device-width'); localStorage.showFullSite = 'true'; // show full site button }; // User already selected view full site? Change the viewport if(Modernizr.localstorage){ if(localStorage.showFullSite == 'false'){ showFullSite(); } } $('#view-full').on('click', function(){showFullSite();}); $('#view-options').on('click', '#view-default', function(){ showDeviceWidth(); }); })(); @toddkeup
  16. 16. Thank You Todd Keup todd@magnifisites.com @toddkeup @toddkeup

×