Responsive Web in Brief

Responsive Web In Brief
EPAM Ukraine, 2014, oleg_gomozov@epam.com

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

Flexible measurements
<bodystyle=“margin: 0auto;”>
<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

From pixel to %
target / context = result
for “header”:
target = 900px (body size)
context = 1024px (window screen size)
result = 900px / 1024px = 87.890675%

Other unitsrem –like em, but only body is contextvw, vh–viewport width and height (in %) dw, dh –device width and height (in %)

@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

Detect devices, size, specifics
-window.navigator.userAgent
-window.height, window.width
-window.devicePixelRatio

varisChrome=function(){
returnnavigator.userAgent.indexOf(“Chrome/”) >=0;
};
varisIphone=function(){
returnnavigator.userAgent.indexOf(“iPhone”) >=0;
};
varisTablet=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()){
varlogo =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 */
}

Meta viewport and @viewport
<metaname="viewport"content="width=device- width, initial-scale=1.0, user-scalable=false,
minimum-scale=0.9, maximum-scale=1.1">
Apple-specific meta
<metaname="apple-mobile-web-app-capable"content="yes">
navigator.standalonemode

Mobile first, how and why?
Desktop is specific device, mobile is basic

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 .htaccessfile.
4..htaccess: any request for JPG, GIF, or PNG file send to the adaptive- images.phpfile.
5.PHP file looks for a cookie and finds user maximum screen size of 480px.
6.It compares the cookie value with all $resolutionsizes 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
<spandata-picture data-alt="A giant stone face">
<spandata-src="small.jpg"></span>
<spandata-src="medium.jpg"data-media="(min-width: 400px)"></span>
<spandata-src="large.jpg"data-media="(min-width: 800px)"></span>
<spandata-src="extralarge.jpg"data-media="(min-width: 1000px)"></span>
<spandata-src="small_x2_retina.jpg"
data-media="(min-device-pixel-ratio: 2.0)"></span>
<noscript><imgsrc="small.jpg"alt="A giant stone face"></noscript>
</span>
Filepicturefill.jsin<head>changesall<span>’swith“data-picture”attributeto<img>withcorrespondingURLfrominner<span>“data-src”attributeaccordingto“data- media”queryusingwindow.matchMedia.Alsosupportsdefferedloadingcallingwindow.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>
<spandata-icon="⇝">Statistycs</span>
</h3>

Iconic fonts benefits
•Lossless change size, vector graphics in fonts
•Change of solid colormask
•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"><imgsrc="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
<imgsrc="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>
<inputtype="url"placeholder="Go to a Website"autofocus>
<inputtype="email"required maxlength="12">
<inputtype="date">
<inputtype="datetime">
<inputtype="number"min="0"max="10"step="2"value="6“
pattern="[A-Z]{3}[0-9]{4}">
<inputtype="color">
<inputtype="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 in
1 CSS Px= 4 Device Px,
Retina=)

Prepare for responsive
-componentsfunction priority
-target devicesscreens
-target audience and it’s context

Refs
•Responsive Web Design, Ethan Marcotte
•Mobile First, Luke Wroblewski
•http://cssing.org.ua, YuriyArtyukh
•http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule
•https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/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

Responsive Web in Brief

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Responsive Web in Brief

Similar to Responsive Web in Brief (20)

More from EPAM

More from EPAM (9)

Recently uploaded

Recently uploaded (20)

Responsive Web in Brief