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.
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
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
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
{"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"}