About Me

• Julia Vishnevsky• .Net developer at ‘Yedioth Aharonot’

Daka90.co.il team• Co-founder & CTO at ‘Gigpo’• Keep in touch:

– Facebook– Linked In

WHY RESPONSIVE?

Motivation

The total number of people using the web on mobile devices is set to surpass desktops by 2015

• 77% of world's population has a mobile device

• Different devices and browser have different capabilities in terms of feature support

• People expect to be able to browse the web on their phones just as easily as they browse the web on a desktop computer

Different screen resolutions

Different screen resolutions

Different screen resolutions

POSSIBLE SOLUTIONS

Development Options

• Graceful Degradation

• Progressive Enhancement

• Mobile Specific Version

• Responsive Design

Graceful Degradation

• First build for the latest and greatest• Create a site using the newest features • Focus on the majority before catering to those

outside the mainstream• Add handlers for less capable devices• make sure older browsers don't choke on the

code and display the content

Pros & Cons

• Pros– Fault tolerance

• Cons– The content is displayed, but the experience might

be painful– Not a good experience for:

• the older browser user• the mobile devices that use less capable browsers

Progressive Enhancement

• Create a baseline experience first• Use layers to provide richer experience for

more capable browsers• Pros

– Everyone gets a good viewing experience• Cons

– Development time– Design restrictions

• Create a separate mobile site– Subset of functionality.

• Pros:– You can fully tailor the browsing experience for mobile users.

• Cons:– Mobile users won’t get the full experience.– Each new feature has to be developed twice, resulting in

large maintenance costs.– Still need to make adjustments for different screen

resolution

Mobile Specific Version

RESPONSIVE DESIGN

Responsive

• The design responds to– Device capabilities– Device type– Screen size and resolution– Orientation

The Father of Responsive Design

• Ethan Marcotte– Web designer, developer, speaker and author

• Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart

• http://alistapart.com/• http://alistapart.com/article/responsive-web-

design/

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”

Ethan Marcotte

EXAMPLES

Links

• http://www.bostonglobe.com• http://www.cacaotour.com/index.php/en/ho

me• http://foodsense.is/

IMPLEMENTATION

How Responsive Design Works

• It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole

• 3 main components– Fully fluid web design - %– Css media queries– JS

FLUID DESIGN

In The Past..

• We used to build fixed width layouts, centered

That doesn’t work anymore..

Fluid LayoutsFluid/liquid layout – the components havepercentage widths, and thus adjust to the user’sscreen resolution

% = Target / Context

0.76 = 720/ 940

0.23 = 220/ 940

Fluid Grid Frameworks

• Flexible way to create a responsive web site

Fluid Grid Frameworks

• Pros– No math required – just count the number of

columns you need– Scales to any width – uses percentage -

Responsive– It’s easy

Grid Frameworks

Less Framework 4 Bootstrap

FONTS

What About Fonts?

• EMS– The “em” is a scalable unit that is used in web

document media.– 1em is equal to the current font-size of the element

in question– If you haven't set font size anywhere on the page,

the browser default is 16px– By default 1em = 16px– If you set a font-size of 20px on your body,

then 1em = 20px

EM = Target / Context

• Default: 16px• Target: 8px• EM = 8/16 = 0.5em

Example

IMAGES

Flexible Images

• Images width can also be defined in %

• Setting the max-width to 100% also ensures that the image does not scale larger than its actual size

Downloaded vs. Displayed

High/low resolution

High/low resolution

Responsive Image Solutions

• Possible solutions– Picturefill

• A polyfill script for the proposed Html5 <picture> element

– HiSRC• A plugin that enables you to create low-, medium- and

high-resolution versions of an image, and the script will show the appropriate one based on Retina-readiness and network speed.

Picturefill Implementation

Css3

Media Queries

• CSS3 module

• A media query is an expressions, which resolves to either true or false

• When a media query is true, the corresponding style rules are applied

Media Types

• @media screen

• Recognized media typesall, braille, embossed, handheld, print, projection, screen, speech, tty, tv.

• (min-|max-)width and (min-|max-)height These allow us to query the width and height of the viewport (i.e. the browser window)

• Orientation:– Landscape– Portrait

Ipad - Portrait

Iphone - Landscape

BROWSER COMPATIBILITY

Browser CompatibilityIE 9, 10 IE 6, 7, 8

Opera 9.5+ Opera Mobile

Safari 3+ Safari 2

Firefox 3.5 Firefox 1, 2

Chrome

• Write css for desktop browsers – the way you always did

• Use media queries to optimize for smaller mobile screens

• Using this workflow, older IE’s will always show the desktop version

Possible solution

Problem

• Not all of us browse the web using the latest mobile devices

• There are lots of older, popular and less capable devices around that don’t support media queries

• Using this workflow means these devices won’t show our mobile layout

MOBILE FIRST

Mobile First• start with a fluid mobile layout• use media queries to optimize for bigger

screens

• This way, all devices are served a mobile layout at first

• Meaning even devices that don’t support media queries will display the mobile version of your website

• Most desktop browsers understand media queries so they’ll serve the desktop layout.

• But what about older IE versions?– The layout will be broken but the content will still

be readable.

Polyfills

• You can use a polyfill– Which forces older IE versions to interpret media

queries.

• Polyfill– Downloadable code which provides facilities that

are not built into a web browser. – It implements technology that a developer

expects the browser to provide natively.

Polyfills

Browser CompatibilityIE 9, 10 IE 6, 7, 8

Opera 9.5+ Opera Mobile

Safari 3+ Safari 2

Firefox 3.5 Firefox 1, 2

Chrome

JS

JS

• Browser detection

• Jquery: jQuery.browser – deprecated

• Js : User Agent: navigator.userAgent

User Agent

META TAGS

Mobile problem

• http://source.tutsplus.com/webdesign/tutorials/037_new-viewport/viewport/no-metatag.html

Now let’s see how that looks on mobile…

• iOS Safari assumes a webpage is 980px wide, zooming out in order to fit the whole lot within the available (iPhone 4) 320px.

• The content is then much less readable, unless you zoom in.

Viewport

<meta name="viewport" content="">

• For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:

<meta name="viewport" content="width=320">

• For flexible layouts it’s more practical to base your viewport width on the device in question, so to match your layout width to the device width you’d enter:

<meta name="viewport" content="width=device-width">

• To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example:<meta name="viewport" content="initial-scale=1">

• This will ensure that upon opening, your layout will be displayed properly at 1:1 scale.

• No zooming will be applied. You could even go further and prevent any zooming by the user:<meta name="viewport" content="maximum-scale=1">

TESTING

Testing…

• 2 main components:• Screen size• User Agent emulation

• Chrome Plugins:– Mobile/RWD Tester – user agent + screen size

• Chrome Emulator

BOOKS

Books

Ben Frain Tim Kadlec