css and html coding today - pubcon las vegas 2013
DESCRIPTION
Focus on mobile development using HTML5 and CSS3. Includes neat tips and tricks, full code examples!TRANSCRIPT
@toddkeup
CSS and HTML Coding 2013
Mobile Development
Todd Keup@toddkeup
Las Vegas 2013
@toddkeup
Overview
• Mobile native app versus mobile web
• Variations of mobile web development
• How to get started• @media query basics• Tips and tricks
@toddkeup
Native app or mobile web?Considerations
• Features and functions• Design, layout, personalization• Budget• SEO• Updates and App store approval• Platforms
@toddkeup
Mobile web design methods
• Responsive Web Design (RWD)• Adaptive Web Design (AWD)• Responsive Design + Server Side
Components (RESS)
• Responsible Web Design
@toddkeup
Responsible Web Design
Focus on your user … … really?
@toddkeup
Resources
• Apps or web for Mobile Development? http://youtu.be/4f2Zky_YyyQ
• Building Smartphone-Optimized Websiteshttp://bit.ly/JXuTPF
@toddkeup
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
@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
Resources
http://www.initializr.com/ http://html5boilerplate.com/
@toddkeup
Tips and tricks
• Need IE6-IE8 support? Respond.jshttps://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
Tips and tricksAdd pizzazz to your telephone links
Before: After:
a[href^="tel:"]{text-decoration:none;}a[href^="tel:"]:before { content:"\260E"; margin-right:0.5em; }
@toddkeup
Tips and tricksNavigation 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
Tips and tricksFull 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
Tips and tricksFull 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
Tips and tricksFull 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();
});
})();
