CSS and HTML Coding Today - Pubcon Las Vegas 2013
•Als PPT, PDF herunterladen•
1 gefällt mir•1,209 views
The document discusses various approaches to mobile web development, including responsive web design (RWD), adaptive web design (AWD), and responsive design with server-side components (RESS). It provides an overview of considerations for choosing between native mobile apps and mobile web apps. The document also shares tips and tricks for mobile web development, such as using media queries and JavaScript to toggle between mobile and full-site views. Code samples are included to demonstrate implementing responsive design patterns and features like touch-friendly navigation menus.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie CSS and HTML Coding Today - Pubcon Las Vegas 2013
Ähnlich wie CSS and HTML Coding Today - Pubcon Las Vegas 2013 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
CSS and HTML Coding Today - Pubcon Las Vegas 2013
- 1. CSS and HTML Coding 2013 Mobile Development Todd Keup @toddkeup Las Vegas 2013 @toddkeup
- 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. Native app or mobile web? • • • • • • Considerations Features and functions Design, layout, personalization Budget SEO Updates and App store approval Platforms @toddkeup
- 4. Mobile web design methods • Responsive Web Design (RWD) • Adaptive Web Design (AWD) • Responsive Design + Server Side Components (RESS) • Responsible Web Design @toddkeup
- 5. Responsible Web Design Focus on your user … … really? @toddkeup
- 6. Resources • Apps or web for Mobile Development? http://youtu.be/4f2Zky_YyyQ • Building Smartphone-Optimized Websites http://bit.ly/JXuTPF @toddkeup
- 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. @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 {} {} {} {}
- 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. 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. 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. 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. 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. 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
Hinweis der Redaktion
- {"6":"The first link is about HTML5 versus Android and is presented as an "app development smackdown" by Google Developers. The video is from May 2011 so you can only imagine how much further progress has been achieved.\nThe second link is Google's advisory to developers: https://developers.google.com/webmasters/smartphone-sites/details\n","12":"Thinking outside the box, literally, on this one. The entire main navigation menu has been exploded to show each option available for selection. Other options here may be to show only the next level of navigation which could be handled in the JavaScript or through a round-trip back to the server which requires bandwidth on your mobile user's service-provider plan. We did this as a demonstration and the client asked to keep it as is – they liked the concept.\nThe media query tells our larger viewport devices to not show this menu icon. And the JavaScript tells our smaller viewports to use the jQuery slideToggle() method to display or hide the matched elements with a sliding motion. So in this case our menu slides on and off the display when the user touches the menu icon.\n","1":"Good Morning!\nI want to thank Brett Tabke and his organization for all their hard work in putting a conference like this together. Each time I attend I find myself a beneficiary of the knowledge shared at this gathering. Thanks Brett, for the opportunity to not only be here, but to be here once again as a speaker.\nI would also like to thank my friend Jerry West for volunteering to facilitate this session as well as my esteemed panel of peers. But most of all thank you for being here today. I am honored by your presence and the privilege to share what I am able regarding CSS and HTML coding today.\nFor those of you that are familiar with the WebmasterWorld web site and the forums at WebmasterWorld, I am an active member and one of the moderators of the PHP Server Side Scripting Forum. I go by the nickname “coopster” and I want you to know that I would absolutely love the opportunity to make your personal acquaintance today. I am approachable and friendly. Please don't hesitate to introduce yourself.\n","7":"HTML5 Basic Changes:\nWhat's different here?\nThe DOCTYPE declaration has been simplified\nThe meta charset element has been simplified\nThe link, style and script elements have charset policies\nWith no other changes, you are delivering HTML5! (NOTE: depends on server set up and response headers; ie application/xhtml+xml)\n","13":"Using HTML5 localStorage to retain user preferences. In this case we demonstrate how we can remember their Full/Mobile site version viewing preferences.\n","8":"Normalize (CSS resets).\nGeneral site settings; develop for mobile first.\nAdd your specialized markup for smartphone portrait mode.\nAdd your specialized markup for smartphone landscape mode.\nAdd your specialized markup for larger viewports like tablets.\nAdd any markup for full size display.\n","3":"The million-dollar question and to this day a topic of heated debate. And mostly by developers, of course. Organizational stakeholders are asking questions such as those listed to determine the best approach for their particular goals. Just remember that HTML5 and CSS3 are blurring the lines of separation. Of key note here is SEO – mobile apps don't get crawled by search engines. And another mention is platforms. If you can target your users on iOS or Android, fine. But don't forget the plethora of other mobile operating systems including Windows, Blackberry (RIM), Bada (Samsung), Symbian (Nokia), Firefox OS, Ubuntu, etc. etc. etc. Not to mention hardware-specifics like refrigerators and other appliances!\n","9":"H5BP has a default stylesheet. Initializr.com has a working example and brief tutorial.\n","4":"RESS relies on user-agent detection to render different responses to requests. Let's focus on the first two for now though as here again we have yet another topic of heated debate and it really comes down to semantics. Some folks claim that the difference between RWD and AWD comes down to delivery – that responsive web design utilizes flexible and fluid grids while adaptive web design relies on predefined screen sizes. I'm not so certain I would agree but hey, to each his own. And if you listen to the guys that coined these terms (RWD and AWD – Ethan Marcotte and Aaron Gustafson), whose books came out at around the same time, by the way, they agree that the two terms are interchangeable and the method describes ultimately what the goal is, Responsible web design.\n","10":"Older browsers cannot handle media queries in CSS3 so you may need a polyfill. Respond.js is a great polyfill.\nAnybody working with Personal Health Information (PHI) or HIPAA related information like social security numbers? Corporate intranets, especially?\nhttps://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html\n"}