Post on 15-May-2015
description
CONNECTING THE DOTS
HTML5 RESPONSIVEDESIGN
CSS3
Cas Lemmenscas@lemmens.mehttp://cas.lemmens.me@Castemelijn
Somewhat_cas@somewhat.cc
http://somewhat.cc@Somewhat_Mobile
CAS?> Hyper Island Interactive Art Direction Graduate 2011> Digital Conceptor at Design Is Dead (Antwerp, Belgium)> Creative Technologist at Somewhat_ (London, UK)> Concepting, UX and UI, prototyping, ... > Broad perspective on programming languages
> http://cas.lemmens.me> @Castemelijn
> http://somewhat.cc> @Somewhat_Mobile
HTML5
HTML5 / BASIC MARKUP
HTML5?> Next version of familiar HTML language> Semantically improved> Better performance> Better integration of media and data
> Still not completely cross platform> Some features are really easy> Some features are really dif!cult
> Mobile-proof> Webapps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Sample Title</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
</head><body>
<script src="script.js" type="text/javascript"></script>
</body></html>
<!doctype html>
<head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head><body>
<script src="script.js"></script></body></html>
Document de!nition and HTML declaration
Meta-tags
Link-tags
Script-tags
<!doctype html>
<head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head><body>
<script src="script.js"></script></body></html>
Header
Navigation
Main content Sidebar
Footer
Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div>
Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div>
Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
Header
Navigation
Main content Sidebar
Footer
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
#header
#navigation
#content #main #content #sidebar
#footer
<body><div id=”top-bar”><!-- Header content -->
</div>
<div id=”menu”><!-- Navigation content -->
</div>
<div id=”main”><div id=”articles”><!-- Main content -->
</div><div id=”bar-left”><!-- Sidebar content -->
</div></div>
<div id=”bottom-bar”><!-- Footer content -->
</div></body>
#top-bar
#menu
#main #articles #main #bar-left
#bottom-bar
<body><div id=”huge-header”><!-- Header content -->
</div>
<div id=”extended-dropdown-menus”><!-- Navigation content -->
</div>
<div id=”what-its-about”><div id=”stuff”><!-- Main content -->
</div><div id=”irrelevant-stuff”><!-- Sidebar content -->
</div></div>
<div id=”who-reads-this”><!-- Footer content -->
</div></body>
#huge-header
#extended-dropdown-menus
#what-its-about #stuff
#what-its-about
#irrelevant-stuff
#who-reads-this
<body><div id=”red-jason”><!-- Header content -->
</div>
<div id=”yellow-trini”><!-- Navigation content -->
</div>
<div id=”power”><div id=”black-zack”><!-- Main content -->
</div><div id=”pink-kimberly”><!-- Sidebar content -->
</div></div>
<div id=”blue-billy”><!-- Footer content -->
</div></body>
#red-jason
#yellow-trini
#power #black-zack#power #pink-
kimberly
#blue-billy
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
header
nav
#main section #main aside
footer
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
Header tags is used for titles, subtitles, ... Sometimes even navigation.
Navigation should contain the main navigation of your site, preferable using <ul> or <ol>
Sections can be used to identify different parts of your site, if needed with a unique ID to keep them seperate.
Aside is used for information that stands aside of the main content of the page.
Footer contains content such as secondary menus, contact information, mini site-maps, ...
OUT WITH THE OLD, IN WITH THE NEWDeprecated
<frame><frameset><noframes><acronym><font><big><center>...
New
<small><canvas><article><time><mark><meter><progress><hgroup>...
HTML5 / AUDIO & VIDEO
AUDIO & VIDEO> Easy integration of audio and video> No Flash required> Highly customisable
> Problems lies both in !le formats and browser compatibility
> Not supported by IE8 or lower
> Flash can be used as a fallback
AUDIO & VIDEOVideoVideoVideo AudioAudioAudio
Ogg H.264 WebM Ogg MP3 Wave
Explorer 9
Firefox
Chrome
Safari
Safari iOS
Android
Opera
✘* ✔ ✘* ✘ ✔ ✔
✔ ✘ ✔ ✔ ✘ ✔
✔ ✔ ✔ ✔ ✘ ✘
✘* ✔ ✘* ✘ ✔ ✔
✘ ✔ ✘ ✘ ✔ ✔
✘ ✔ ✔ ✔ ✘ ✘
✔ ✘ ✔ ✔ ✘ ✔
* unless installed manually
<!-- Shows a player on your page --><video src=”movie.mp4” width=”360” height=”240”></video>
<!-- Add controls to your player --><video src=”movie.mp4” width=”360” height=”240” controls></video>
<!-- Add a poster frame before playing --><video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”></video>
<!-- File compatibility --><video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”><source src=”movie.ogg” type=”video/ogg”><source src=”movie.mp4” type=”video/mp4”>
</audio>
<!-- Shows a player on your page --><audio src=”audio.mp3”></audio>
<!-- Autoplays your audio --><audio src=”audio.mp3” autoplay></audio>
<!-- Loops your audio --><audio src=”audio.mp3” loop></audio>
<!-- Adds default controls --><audio src=”audio.mp3” controls></audio>
<!-- Preloads your audio --><audio src=”audio.mp3” preload=”auto”></audio>
<!-- File compatibility --><audio controls><source src=”audio4firefox.ogg”><source src=”audio4safari.mp3”>
</audio>
HTML5 / FORMS
<!-- Normal input remains the same --><input id=”status1” name=”status1” type=”text”></input>
<!-- Autofocus when pages is loaded --><input id=”status2” name=”status2” type=”text” autofocus></input>
<!-- Places a placeholder in the field --><input id=”status3” name=”status3” type=”text” placeholder=”Fill in status here”></input>
<!-- Form won’t be submitted unless this field is filled in --><input id=”status4” name=”status4” type=”text” required></input>
<!-- This field will not get autocompleted by the browser --><input id=”status5” name=”status5” type=”text” autofill=”off”></input>
<!-- Search optimized field --><input id=”search” name=”search” type=”search”>
<!-- Validates an mail address --><input id=”mail” name=”mail” type=”email”>
<!-- Validates a URL --><input id=”website” name=”website” type=”url”>
<!-- Validates a phone number --><input id=”phone” name=”phone” type=”tel”>
<!-- Use this to ask for a range --><input id=”range” name=”range” type=”range” min=”0” max=”10”>
<!-- Use this to ask for a specific number --><input id=”range2” name=”range2” type=”number” min=”0” max=”10”>
<!-- Build-in date picker --><input id=”date” name=”date” type=”date”>
<!-- Build-in color picker --><input id=”color” name=”color” type=”color”>
CSS3
CSS3 / SELECTORS
ATTRIBUTE SELECTORSE[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="en"]
an E element with a "foo" attribute
an E element whose "foo" attribute value is exactly equal to "bar"
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
an E element whose "foo" attribute value begins exactly with the string "bar"
an E element whose "foo" attribute value ends exactly with the string "bar"
an E element whose "foo" attribute value contains the substring "bar"
an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
STRUCTURAL PSEUDO-CLASSESE:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
an E element, root of the document
an E element, the n-th child of its parent
an E element, the n-th child of its parent, counting from the last one
an E element, the n-th sibling of its type
an E element, the n-th sibling of its type, counting from the last one
an E element, !rst child of its parent
an E element, last child of its parent
STRUCTURAL PSEUDO-CLASSESE:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
an E element, !rst sibling of its type
an E element, last sibling of its type
an E element, only child of its parent
an E element, only sibling of its type
an E element that has no children (including text nodes)
STRUCTURAL PSEUDO-CLASSESE:link
E:visited
E:active
E:hover
E:focus
E:enabled
E:disabled
an E element being the source anchor of a hyperlink of which the target is not yet visited
an E element being the source anchor of a hyperlink of which the target is already visited
an E element during certain user actionsan E element during certain user actionsan E element during certain user actions
a user interface element E which is enabled or disableda user interface element E which is enabled or disabled
STRUCTURAL PSEUDO-CLASSESE:checked
E:lang(fr)
E::before
E::after
a user interface element E which is checked (for instance a radio-button or checkbox)
an element of type E in language "fr" (the document language speci!es how language is determined)
generated content before an E element
generated content after an E element
STRUCTURAL PSEUDO-CLASSESE:not(s)
E > F
E + F
E ~ F
an E element that does not match simple selector s
an F element child of an E element
an F element immediately preceded by an E element
an F element preceded by an E element
CSS3 / NEW STUFF
VENDOR-SPECIFIC PREFIXES
-webkit-border-radius
-moz-border-radius
-o-border-radius
-khtml-border-radius
-ms-border-radius
3+ 1+ 3+ 9+ 10.5+
1.1+ 3.1+ 2+ 10+ 9.5+
1.3+ 3.6+ 2+ 9+ 10.5+
3+ 3.5+ 3+ 9+ 10.5+
.class {border-radius: 10px
}
p {text-shadow: 1px 1px 2px #999;
}
body {background: url(image.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;
}
.class {box-shadow: 1px 1px 2px #999;
}
1.2+ 1.5+ 1+ 9+ 9+
3.2+ 3+ 3+ 9+ 10+
.class {opacity: 0.5;
}
p {color: rgba(255,255,255,0.75);
}
body {background: url(image.svg) no-repeat top left
} 4+ 4+ 4+ 9+ 10+
body {background: gradient(linear, left-top, right top, from(#F00), color-stop(0.3, #0F0), to(#00F))
}4+ 3.6+ 4+ 10+ 11.1+
CSS3 / TRANSITIONS
a.foo {padding: 5px 10px;background-color: #7CFFDD;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease; -webkit-transition-timing-delay: 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
3.2+ 4+ 3+ 10+ 10.5+
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;
}
a.foo:hover, a.foo:focus, a.foo:active {background-color: #5EBFA5;
}Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease,color 0.3s linear;
-moz-transition: background 0.3s ease,color 0.3s linear;
-o-transition: background 0.3s ease,color 0.3s linear;
transition: background 0.3s ease,color 0.3s linear;
}
a.foo:hover {background-color: #5EBFA5;color: #FFF;
}
Press me!Press me!
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
CSS3 / TRANSFORMATIONS
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) rotate(-10deg);-moz-transform: scale(1.2) rotate(-10deg);-o-transform: scale(1.2) rotate(-10deg);transform: scale(1.2) rotate(-10deg);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) rotate(-10deg);-moz-transform: scale(1.2) rotate(-10deg);-o-transform: scale(1.2) rotate(-10deg);transform: scale(1.2) rotate(-10deg);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) translate(50px, 60px);
-moz-transform: scale(1.2) translate(50px, 60px);
-o-transform: scale(1.2) translate(50px, 60px);
transform:scale(1.2) translate(50px, 60px);
}
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) translate(50px, 60px);
-moz-transform: scale(1.2) translate(50px, 60px);
-o-transform: scale(1.2) translate(50px, 60px);
transform:scale(1.2) translate(50px, 60px);
}
CSS3 / ANIMATIONS
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation-name: pulse;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;
}
Input field
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;
}
Input field
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;
-moz-animation: pulse 1s infinite ease-in-out;
-o-animation: pulse 1s infinite ease-in-out;
animation: pulse 1s infinite ease-in-out;
}
Input field
RESPONSIVE DESIGN
RESPONSIVE DESIGN / SCALING
RELATIVITY!
TARGET / CONTEXT = RESULT
FONT SCALING> Use a reset stylesheet to start of equally in all browsers.
Check resources for some good examples.> A browser adjusts to its device already.> Follow this trend by using em
> Go from px to em with the known rule
TARGET (in px) / CONTEXT (in px) = RESULT (in em)
<h1>This is my headeline</h1>
<h2>And here is my subtitle</h2>
<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
<h1>This is my headeline</h1>
<h2>And here is my subtitle</h2>
<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 48px;margin: 0;
}
h2 {font-size: 36px;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 24px;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 3em;margin: 0;
}
h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 1.5em;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 3em;margin: 0;
}
h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 1.5em;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
48px / 16px = 336px / 16px = 2.2524px / 16px = 1.5
GRID SCALING> Grids are great to keep you site easy to adjust, maintainable and easier to
build. Check resources for some good examples.> It needs to scale with every device
> Go from px to % with the known rule
TARGET (in px) / CONTEXT (in px) = RESULT (in %)
Header
Navigation
Footer
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
<header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”>
</div>
<footer><!-- Footer content -->
</footer>
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
960px
750px 210px
body {width: 960px;margin: 0 auto;
}
section {float: left;width: 750px;
}
aside {float: right;width: 210px;
}Main content Sidebar
960px
750px 210px
body {width: 960px;margin: 0 auto;
}
/* 750px / 960px = 78% */section {float: left;width: 78%;
}
/* 210px / 960px = 22% */aside {float: right;width: 22%;
}Main content Sidebar
960px
750px 210px
body {width: 100%;margin: 0 auto;
}
/* 750px / 960px = 78% */section {float: left;width: 78%;
}
/* 210px / 960px = 22% */aside {float: right;width: 22%;
}Main content Sidebar
960px
750px 210px
RESPONSIVE DESIGN / MEDIA QUERIES
One css-!le to rule them all
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css" media="all" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
Same thing...
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="global.css" media="all" /><link rel="stylesheet" href="main.css" media="screen" /><link rel="stylesheet" href="paper.css" media="print" /><link rel="stylesheet" href="braille.css" media="braille" /><link rel="stylesheet" href="embos.css" media="embossed" /><link rel="stylesheet" href="mobile.css" media="handheld" /><link rel="stylesheet" href="proj.css" media="projection" /><link rel="stylesheet" href="talk.css" media="speech" /><link rel="stylesheet" href="terminal.css" media="tty" /><link rel="stylesheet" href="tv.css" media="tv" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
Multiple stylesheets for different types of media.Old way of doing this, and less options to specify.
@media screen {/* screen css goes here */
}
@media print {/* screen css goes here */
}
These media queries can be added to your CSS-!le.Less calls to make, but problem of detail persist.
@media screen and (min-width: 1024px) {/* screen css goes here */
}
@media print {/* screen css goes here */
}
That’s more like it...
DEVICE FEATURES USED IN MEDIA QUERIESwidth
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
Width of the display area min- max-
Height of the display area min- max-
Width of the device rendering surface min- max-
Height of the device rendering surface min- max-
Accepts portrait and landscape values
Ratio of the display area’s width over its height. min- max-
Ratio of the device’s rendering surface width over its height. min- max-
DEVICE FEATURES USED IN MEDIA QUERIEScolor
color-index
monochrome
resolution
scan
grid
The number of bits per color component of the devices min- max-
The number of entries in the color lookup table of the output device. min- max-
Similar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device. min- max-
Tests the density of the pixels in the device min- max-
For tv-based browsing, measures wether the scanning process is either progressive or scan
Tests wether the device is grid-based
@media only screen and (min-width: 800px) { /* Desktop browser styles go here */}
@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* iPhone 4, Opera Mobile 11 and other high pixel ratio devices */}
@media only screen and (min-width: 600px) and (max-width: 960px) {/* Good for styling tables */
}
@media only screen and (max-width: 600px) {/* Good for styling mobile devices */
}
RESPONSIVE DESIGN / VIEWPORT
Viewport
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
600px
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
320px
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
VIEWPORT PROPERTIESwidth
height
initial-scale
maximum-scale
minimum-scale
user-scalable
Controls the size of the viewport. Can be either a set number, e.g. 600px or device-width (the width of the screen in CSS pixels at a scale of 100%)
Controls the size of the viewport. Can be either a set number, e.g. 600px or device-height (the height of the screen in CSS pixels at a scale of 100%)
Controls the zoom level when the page is !rst loaded. E.g. 1.0
The maximum a user can zoom in
The minimum a user can zoom in
Allows yes or no. Determines wether a user can scale the page or not.
RESPONSIVE DESIGN / TOUCH ICONS
114 x 114 pxiPhone retina
72 x 72 pxiPad
57 x 57 pxiPhone non-retina
Other phones
Normal icon Precomposed icon
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<!-- For iPhone 4 with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"><!-- For first-generation iPad: --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"><!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png><!-- For nokia devices: --><link rel="shortcut icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
Place these icons with the exact same name in your root folder, and the iOS browser will !nd them by default, no extra HTML needed.
RESPONSIVE DESIGN / WEB APPS
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<!-- iOS web app --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="img/startup.png” />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
RESOURCES
GENERAL INFOMobile Web Best PracticesPoly!llsHTML5 LogoHTML5 Rocks
COMPATIBILITYHTML5 PleaseCan I UseHTML5 Readiness
DUMMY STUFFNot Lorem IpsumLoremifyBasic HTMLPlaceKittenDummy ImageGrid Builder
CODE TEMPLATESHTML5 BoilerplateMobile BoilerplateBootstrapSkeletonLessHTML5 ResetCSS3 Please
DEVICE ASPECTSMobile MatricesEmulators & SimulatorsResize my browser
VALIDATIONCSSLintW3C Validator
VIDEOPopcornSublimeVideoJWPlayerVideo for everyone
HTML5 FOR A PROWhat’s new
FONTSGoogle WebfontsFont Squirrel
JAVASCRIPTJQuery MobileModernizrSelectivizrSensa TouchJQTouch
THANKS!GOD BLESS!QUESTIONS?
Cas Lemmenscas@lemmens.mehttp://cas.lemmens.me@Castemelijn
Somewhat_cas@somewhat.cc
http://somewhat.cc@Somewhat_Mobile