responsive web in brief
DESCRIPTION
Author: Oleg Gomozov, Senior Software Engineer Agenda: - Chose yours: flexible, fluid, adaptive, responsive - Some data about units - Media Queries Magic - JavaScript practices - Browser, please, help me - Mobile first, how and why - Tricks, tools and hacksTRANSCRIPT
About me
• 7 years in IT
• .NET background
• JS and Front-End with mobile applications
expertise
• Tech trainer for EPAM JS Labs
Choose yours:
flexible, fluid, adaptive, responsive
• Flexible – change size, scale
• Fluid – flexible + grid or some layout rules
• Adaptive – fluid + change in content, UI
elements face and appearance
• Responsive – adaptive + change of
interface, behavior, interactions, device and
human specifics
Some info about units
Flexible measurements<body style=“margin: 0 auto;”>
<header>Header text
<span>Small text</span>
</header>
</body>
From pixel to em:
target / context = result
for “header”:
target = 24px
context = 16px (base font size per
browser)
result = 24px / 16px = 1.5em
for “header” – >“span”:
target = 14px
context = 24px (header font size)
result = 14px / 24px = 0.583333333em
Flexible grid-based layout
From pixel to %
target / context = result
for “header”:
target = 900px (body size)
context = 1024px (window screen size)
result = 900px / 1024px = 87.890675%
Other units
rem – like em, but only body is context
vw, vh – viewport width and height (in %)
dw, dh – device width and height (in %)
Media Queries Magic
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
@media only screen and (min-width : 1224px) {
/* Styles */
}
<link rel='stylesheet' media='screen and (min-width: 701px) and
(max-width: 900px)' href='css/medium.css' />
Media query properties
screen
orientation
aspect-ratio (min, max)
device-height (min, max)
device-width (min, max)
device-aspect-ratio (min, max)
height (min, max)
width (min, max)
-webkit-device-pixel-ratio
JavaScript practices
Detect devices, size, specifics
- window.navigator.userAgent
- window.height, window.width
- window.devicePixelRatio
var isChrome = function () {
return navigator.userAgent.indexOf(“Chrome/”)
>=0;
};
var isIphone = function () {
return navigator.userAgent.indexOf(“iPhone”) >=0;
};
var isTablet = function () {
return $(window).width() > 1024 &&
$(window).width() < 2048;
};
$(document).ready(function () {
if (isChrome()) {
$('.left_menu').hide();
}
if (isIphone()) {
$('body').css('font-size', '2em');
}
if (isTablet()) {
var logo = document.getElementById('logo');
logo.style.backgroundImage =
'url("/images/tablet_logo.png")';
$('.right_menu').css('flex', '1');
$('.left_menu').css('flex', '2');
$('.content_menu').css('flex', '4');
}});
matchMedia
if (window.matchMedia("(min-width: 400px)").matches) {
/* the view port is at least 400 pixels wide */
} else {
/* the view port is less than 400 pixels wide */
}
Browser, please, help me
Meta viewport and @viewport
<meta name="viewport" content="width=device-
width, initial-scale=1.0, user-scalable=false,
minimum-scale=0.9, maximum-scale=1.1">
Apple-specific meta
<meta name="apple-mobile-web-app-capable"content="yes">
navigator.standalone mode
Mobile first, how and why?Desktop is specific device, mobile is basic
Tricks, tools and hacks
http://adaptive-images.com:1. The HTML starts to load in the browser and a snippet of JS in the <head> writes
a session cookie, storing the visitor's screen size in pixels.
2. Browser then encounters <img> tag and sends a request to the server for that
image. It also sends the browser cookie.
3. Apache receives the request and looks in the website's .htaccess file.
4. .htaccess: any request for JPG, GIF, or PNG file send to the adaptive-
images.php file.
5. PHP file looks for a cookie and finds user maximum screen size of 480px.
6. It compares the cookie value with all $resolution sizes that were configured, and
decides which matches best.
7. Then looks into /ai-cache/480/ folder to see if a rescaled image already exists.
8. If not the PHP then goes to the actual requested URI to find the original file.
9. It checks image width. If that's smaller than the user's screen width it sends the
image.
10. If it's larger, the PHP creates a down-scaled copy and saves that into the /ai-
cache/480/ folder ready for the next time it's needed, and sends it to the user.
PictureFill
<span data-picture data-alt="A giant stone face">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<span data-src="small_x2_retina.jpg"
data-media="(min-device-pixel-ratio: 2.0)"></span>
<noscript> <img src="small.jpg" alt="A giant stone face"> </noscript>
</span>
File picturefill.js in <head> changes all <span>’s with “data-picture” attribute to
<img> with corresponding URL from inner <span> “data-src” attribute according to “data-
media” query using window.matchMedia. Also supports deffered loading calling
window.picturefill()
Iconic fonts
@font-face {
font-family: 'icons';
src: url('../fonts/IcoMoon.eot?#') format('eot'),
url('../fonts/IcoMoon.woff') format('woff'),
url('../fonts/IcoMoon.ttf') format('truetype');
}
[data-icon]:before {
font-family: icons;
content: attr(data-icon);
}
<h3>
<span data-icon="⇝">Statistycs</span>
</h3>
Iconic fonts benefits
• Lossless change size, vector graphics in fonts
• Change of solid color\mask
• Change of shape, shadow and other text transformations
HTML5 Approach
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg"> <img src="fallback.jpg" alt="This
picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
picture tag
HTML5 Approach-web-kit-image-set
.selector {
background-image: url('../img/image-1x.jpg';
background-image: -webkit-image-set(url('../img/image-1x.jpg')
1x, url('../img/image-2x.jpg') 2x);
}
HTML5 Approach
<img src="fallback.jpg" srcset="small.jpg 640w 1x,
small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x"
alt="…">
srcset
Proper HTML5 input types<form>
<input type="url" placeholder="Go to a Website" autofocus>
<input type="email" required maxlength="12">
<input type="date">
<input type="datetime">
<input type="number" min="0" max="10" step="2" value="6“
pattern="[A-Z]{3}[0-9]{4}">
<input type="color">
<input type="submit" value="Search">
</form>
Pixel is not a pixel
1 CSS Px = 1 Device Px
CSS pixel – reference pixels, which are the main measure points for browsers measurements.
Device pixel – physical pixels, which are the main measure points for device graphics actions.
Zoom out Zoom in1 CSS Px = 4 Device Px,
Retina=)
Prepare for responsive
- components\function priority
- target devices\screens
- target audience and it’s context
Refs• Responsive Web Design, Ethan Marcotte
• Mobile First, Luke Wroblewski
• http://cssing.org.ua, Yuriy Artyukh
• http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHT
MLRef/Articles/MetaTags.html
• https://github.com/scottjehl/picturefill
• http://adaptive-images.com
• http://www.quirksmode.org/mobile/viewports2.html
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://www.w3.org/TR/wai-aria/
• http://designinstruct.com/roundups/html5-frameworks/
• http://mashable.com/2013/04/26/css-boilerplates-frameworks/
• http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html
The end