@toddkeup CSS and HTML Coding 2013 Mobile Development Todd Keup @toddkeup Las Vegas 2013
CSS and HTML Coding Today - Pubcon Las Vegas 2013
May 09, 2015
Focus on mobile development using HTML5 and CSS3. Includes neat tips and tricks, full code examples!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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();
});
})();
Related Documents
