HTML5 and CSS3- One UI for All
Mobile Phone Form Factors
Puneet Kumar, Mobile Team, IFS
Agenda
HTML5 Crash course(20min)
CSS3 Crash course(10min)
Responsive Design(10 min)
Problem definition
Current Solution
Proposed Solution
How can Responsive Design help!
Intuit Proprietary & Confidential
Logistics
This presentation is Part 1 of HTML/CSS Workshop at
TechForum, Intuit, Feb 21, 2012
This presentation at Brainstorm:
https://intuit.intuitbrainstorm.com/Idea.aspx?id=1139
8
Q&A, at the end
Post questions to
http://tiles.intuit.com/tiles/site/tile/HTML5#
Intuit Proprietary & Confidential
HTML5, Crash Course
Intuit Proprietary & Confidential
HTML5 Features
New Doctype
Semantic Tags
Forms, new input types
Video, Audio
Canvas
Web Storage
Offline
Web Workers
GeoLocation
Drag and drop
Many cool features to explore
Intuit Proprietary & Confidential
HTML5, New Doctype
<!DOCTYPE html>
Benefit:
Simple.
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<!DOCTYPE html>
Intuit Proprietary & Confidential
HTML5, Semantic tags
<header>
<hgroup>
<article>
<section>
<aside>
<footer>
<nav>
Benefit:
Human readable
HTML pages.
Better than <div>
Intuit Proprietary & Confidential
HTML5, Semantic tags
HTML5
HTML4
CSS:
CSS:
#.header{}
header{}
#.navigator{}
nav {}
#.sidebar{}
aside{}
Semantic
8
Intuit Proprietary & Confidential
HTML5, Forms, new input types
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
type=email>
type=url>
type=date>
type=time>
type=datetime>
type=month>
type=week>
type=number>
type=tel>
type=color>
pattern=[0-9][A-Z]{3}>
<input type=
Intuit Proprietary & Confidential
>
Benefit:
Built in
validation.
HTML5, Forms, new input types
<form action="" method="get">
<label for=tel">type:tel</label>
<input id=tel" name=tel" type=tel" />
<button type="submit"> Submit Form </button>
</form>
<ul contenteditable=true>
<li>First</li>
</ul>
<input type=tel> will show number pad
10
Intuit Proprietary & Confidential
HTML5, <video> <audio>
Benefit:
Flash killer?
video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; cod
ecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'c
odecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4"
>Download this video instead.</a> </p>
</video>
<video>
11
<audio>
Intuit Proprietary & Confidential
HTML5, Canvas
Benefit:
2D Games!
<canvas></canvas>
Dynamic rendering of 2D
shapes and bitmap images.
<canvas>
12
Intuit Proprietary & Confidential
HTML5, Canvas
<canvas id=ex width=200 height=200>
var ctx = document.getElementById(ex).getContext(2d);
ctx.fillRect(10,20,50,50); //Paints rectangle (x,y,w,h)
ctx.strokeStyle=rgb(0,255,0);
ctx.lineWidth= 5;
ctx.strokeRect(9,19,52,52);
gradient = ctx.createLinearGradient(0,0,0,canvas.height);
gradient.addColorStop(0,#fff);
gradient.addColorStop(1,000);
ctx.fillStyle = gradient;
https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage
13
Intuit Proprietary & Confidential
HTML5, Web Storage
Web Storage- key value
localStorage
sessionStorage
.setItem(data, 12);
.getItem(data);
.removeItem(data)
.clear()
sessionStorage.length
sessionStorage.key(i)
Trap: Stored as Strings!
Better than cookies
14
Intuit Proprietary & Confidential
Benefit:
Cookies on
steroids
HTML5, Web SQL database
Web SQL Storage- SQL database
Benefit:
Database in
Browser!
var db;
if(window.openDatabase){
db = openDatabase(myDB, 1.0, test db, 2 *1024 *1024);
db.transaction(function (tx) {
tx.executeSql(CREATE TABLE IF NOT EXISTS test(id, date,
testdata),[], function(){
)};//executeSql
)};//db.transaction
}
SQL syntax
15
Intuit Proprietary & Confidential
HTML5, Offline
Offline
Application works even after network connectivity is
lost.
Manifest file needs to know what to cache.
<html manifest=/time.manifest>
Apache mimes.types:
text/cache-manifest manifest
No network, no problem
16
Intuit Proprietary & Confidential
HTML5, Web Workers
Web workers
var worker=new Worker(myworker.js);
worker.postMessage(hello);
worker.onMessage = function(event){
alert(The worker sent + event.data);
};
//In myworker.js:
onmessage = function(event){
if(event.data == hello){
postMessage(hello main)
}else{
postMessage(Busy right now!);
}
}
multi threading
17
Intuit Proprietary & Confidential
Benefit:
Responsive
pages
HTML5, Geolocation
.Found You!
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var coord = position.coords;
showMap(coords.latitude, coords.longitude, coords.accuracy);
});
}
.watchPosition();
.clearPosition();
geolocation
18
Intuit Proprietary & Confidential
CSS3
CSS3 offers a huge variety of new ways to create an
impact with your designs.
CSS 3 too has made its mark with its many features not
only augment the aesthetic appeal but also improve
functionality.
Style your HTML markup using drop shadows, rounded
corners, multiple backgrounds, animation,
transparency.
http://css3test.com/
http://www.css3.info/preview/
19
Intuit Proprietary & Confidential
CSS3
Borders
border-radius
box-shadow
Background
background-size
background-origin
Text Wrap
text-shadow
text-wrap
@Font-face
Transforms
transform
rotateX() rotateY()
20
Intuit Proprietary & Confidential
CSS3
Transitions
Animations
User Interface
resize
Color
opacity
Ruby
21
Intuit Proprietary & Confidential
Responsive Design
http://www.readwriteweb.com/archives/redux_how_the_boston_gl
obe_pulled_off_html5_responsive_d.php
22
Intuit Proprietary & Confidential
Problem Definition
Mobile phones have different widths
Use Case
Mobile Browsers with different form factor request mobile
page
On Mobile Web server, User Agent is found
DRS finds width of phone based on User Agent
One of many style sheets is chosen(different widths,
Blackberry)
Mobile page is styled
Mobile Page presented to end user.
Optimal?
Multiple style sheets, more processing, multiple images,
Should we create multiple css files for different
mobile sizes
23
Intuit Proprietary & Confidential
Current Solution,
Device Recognition Software
Https Request
DRS Server
Mobile web page
176
css
240
css
320
css
480
css
320
css
Black
berry
DRS(http://tiles.intuit.com/tiles/site/tile/DRS)
24
Intuit Proprietary & Confidential
Current Solution, Defects
Bigger css applied
25
Smaller css applied
Intuit Proprietary & Confidential
Proposed Solution
Use Case
Mobile Browsers, with different widths, request mobile
page
Flexible Mobile Page presented to end user.
How?
HTML5
CSS3
Responsive Design
JQuery Mobile
26
Intuit Proprietary & Confidential
Proposed Solution,
Responsive Design
Https Request
Mobile web page
Responsive css
Responsive Design
27
Intuit Proprietary & Confidential
Responsive Design, What is? pg1
Flexible Grid
Flexible Typesetting, font-size in em
Flexible Grid, width in percentage
Flexible margins and padding, in percentage
Flexible Images
Media Queries (CSS3)
font-size=1.25em; width=80%,
margin=5%,;padding 5%;
28
Intuit Proprietary & Confidential
Responsive Design, What is? pg2
Flexible Grid
Flexible Images
Fluid Images, max-width=100%;
For IE, width=100%;
For IE, use AlphaImageLoader
Use overflow:hidden;
Media Queries (CSS3)
max-width=100%; overflow:hidden;
29
Intuit Proprietary & Confidential
Responsive Design, What is? pg3
Flexible Grid
Flexible Images
Media Queries (CSS3 feature)
media=screen and (min-width:1024px)
CSS3 is not supported?
Try css-mediaqueries.js
Try respond.js
media=screen and (min-width:1024px)
30
Intuit Proprietary & Confidential
Summary
31
Intuit Proprietary & Confidential
References
http://www.html5rocks.com/en/
http://html5boilerplate.com/
http://diveintohtml5.info/
http://caniuse.com/
http://net.tutsplus.com/tutorials/html-csstechniques/25-html5-features-tips-and-techniquesyou-must-know/
http://jsbin.com/
http://html5demos.com/
32
Intuit Proprietary & Confidential
Q&A
33
Intuit Proprietary & Confidential
