Responsive Web in Brief
-
Upload
epam-systems -
Category
Software
-
view
177 -
download
1
description
Transcript of Responsive Web in Brief
![Page 2: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/2.jpg)
About me
• 7 years in IT
• .NET background
• JS and Front-End with mobile applications
expertise
• Tech trainer for EPAM JS Labs
![Page 3: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/3.jpg)
Choose yours:
flexible, fluid, adaptive, responsive
![Page 4: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/4.jpg)
• 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
![Page 5: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/5.jpg)
Some info about units
![Page 6: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/7.jpg)
Flexible grid-based layout
![Page 8: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/8.jpg)
From pixel to %
target / context = result
for “header”:
target = 900px (body size)
context = 1024px (window screen size)
result = 900px / 1024px = 87.890675%
![Page 9: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/9.jpg)
Other units
rem – like em, but only body is context
vw, vh – viewport width and height (in %)
dw, dh – device width and height (in %)
![Page 10: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/10.jpg)
Media Queries Magic
![Page 11: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/11.jpg)
@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' />
![Page 12: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/12.jpg)
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
![Page 13: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/13.jpg)
JavaScript practices
![Page 14: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/14.jpg)
Detect devices, size, specifics
- window.navigator.userAgent
- window.height, window.width
- window.devicePixelRatio
![Page 15: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/15.jpg)
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;
};
![Page 16: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/16.jpg)
$(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');
}});
![Page 17: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/17.jpg)
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 */
}
![Page 18: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/18.jpg)
Browser, please, help me
![Page 19: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/19.jpg)
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
![Page 20: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/20.jpg)
Mobile first, how and why?Desktop is specific device, mobile is basic
![Page 21: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/21.jpg)
Tricks, tools and hacks
![Page 22: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/22.jpg)
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.
![Page 23: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/23.jpg)
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()
![Page 24: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/24.jpg)
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>
![Page 25: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/25.jpg)
Iconic fonts benefits
• Lossless change size, vector graphics in fonts
• Change of solid color\mask
• Change of shape, shadow and other text transformations
![Page 26: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/27.jpg)
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);
}
![Page 28: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/28.jpg)
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
![Page 29: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/29.jpg)
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>
![Page 30: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/30.jpg)
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=)
![Page 31: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/31.jpg)
Prepare for responsive
- components\function priority
- target devices\screens
- target audience and it’s context
![Page 32: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/32.jpg)
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
![Page 33: Responsive Web in Brief](https://reader034.fdocuments.us/reader034/viewer/2022042715/559453551a28abe14f8b4785/html5/thumbnails/33.jpg)
The end