e4d js conference responsive web design - js-il.com

Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |

Yitzchak MeirovichWeb Developer, Instructor

Israel Finance Ministrysite: javascriptphp.com

Responsive Web DesignThe Art & Science

Israel JavaScript Conference

mailto:[email protected]

http://www.js-il.com/


Why use Responsive Web Design?




The Good News and the Bad News

Need for Self study

RWD is still being debated

The Science is easy The Art is hard

Testing and implementation are challenging

Will learn the technique to implement RWD

Will hear a story of RWD deployed to millions of users successfully

Will get tips, tricks and best practices




איתור

מוטבים

• Introducing מוטבים and the need for איתורRWD

Science

• The Science of Responsive Web Design (RWD)

Art

• Design approach

Test

• Testing and Debugging

Rules

• Rules/Suggestions for a successful implementation of RWD




מוטבים איתור




Defining a RWD Site Website rolled out to

millions

Needed to be Light, Lean and Lightning fast

Non-reflexive, responsive server infrastructure unlike Amazon S3

Want mobile but no history of mobile at the Ministry and no hardware devices

Short development time




Defining a RWD Site No time/ability to learn

native mobile code (obj C, java)

Use current skill-sets

Needed to be maintainable

Small team

High profile project watched at the highest levels

NO PRESSURE!




Technical Specs

HTML 4/5

CSS3

jQuery, jQuery Mobile, Mobiscroll

Why jQuery Mobile was rejected

C# .NET

Oracle

Opened web port for testing (device surfing)

Back-end Front-end




Site Design and Layout Started as usual – single layout design Desktop first approach

This was a mistake!




The Science of RWD




Responsive WebCurrent Development

Standalone page, multiple files

Fixed-width layouts

Focus on pixels

Doesn’t display well on mobile

Single page/file

Fluid layouts

Focus on EMs / %

Display adjusts to different layouts and orientations

RWD Development

Inflexible Flexible




Responsive WebIngredients

CSS Reset

A flexible, grid-based layout

Flexible images and media

Media queries, a module from the CSS3 specification

http://responsivewebdesign.com/robot/

http://www.starbucks.com/



http://responsivewebdesign.com/robot/

http://www.starbucks.com/


CSS ResetBrowser Compatibility

Each browser calculates differently:1. Blocks2. Margins3. Padding

CSS Reset’s normalize cross-browser incompatibility for CSS layouts

http://meyerweb.com/eric/tools/css/reset/

http://html5boilerplate.com/



http://meyerweb.com/eric/tools/css/reset/

http://html5boilerplate.com/


Flexible TypesettingResponsive fonts

Font = 100% = 16px (default)Fonts will always be proportionalbody {

background-color: #DCDBD9;color: #2C2C2C; font: normal 100% Cambria,

Georgia;}h1 a {

color: #747474; font: bold 11px Arial, sans-

serif; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;

}

target / context = result

Secret Formula

24 / 16 = 1.5

h1 { /* 24px / 16px */ font-size: 1.5em; }

11 / 24 = 0.458333333333333

Target = 11px, headline = 24px= 45.8333333333333%




Fixed GridBlocks with Gutters

Proportional blocksMargins keep blocks lined up

#page { width: 960px; margin: 0 auto;

}

Non-responsive

960 fixed width

12 columns

6px gutters

69px columns

30px margin (R/L)

900/12 = 75-69=6

Non-fluid




Flexible GridBlocks with Gutters

Proportional blocksMargins keep blocks lined up

#page { width: 90%;

margin: 36px auto;}

Responsive

.blog { margin: 0 auto 53px; width: 93.75%; /* 900px / 960px */}

900 / 960 = 0.9375

Fluid




Flexible ImagesFLUID Imagesimg { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

Image max-width : 100% and height: auto works in IE7, but not in IE8 (weird IE bug). To fix this, you need to add width : auto\9 for IE8.




Media QueriesCSS2 Queries

@media screen and (device-pixel-ratio: 1.5){ /*adjust your layout for 1.5 hardware pixels to each reference pixel*/}

<link rel="stylesheet" href="paper.css" media="print" />

CSS3 Queries

@media print {body {

font-size: 15pt;}

}

@media screen and (min-device-width: 480px) and (orientation: landscape){

body {font-size: 100%;

}}

List of Device Features

widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid

http://stephen.io/mediaqueries/

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml



http://stephen.io/mediaqueries/





CSS Grid Systems960.gs

Twitter Bootstrap12-column responsive grid

JavaScript plugins

Fixed width and Fluid grids

12/16/24 default grid layouts

Customizer Form controls

Typography

Customizer




Becoming ResponsiveMust Have

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

Flexible layout with media queries layered upon that non-fixed foundation

Flexible Images

Flexible Fonts

Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on. - Ethan Marcotte




The Art of RWD




Design Approach

5 Dimensions Mobile First

Functionality Fluid not Fixed

Devices




Thinking in 5 Dimensions

Desktop

TabletPortrait

TabletLandscape

MobilePortrait

MobileLandscape




Mobile 1st Strategy

Why do people use your site?

Know your users goals

Decide which devices to support

Additive Expansionist

Non-reductionist

Pixels vs % vs EMs

Focus on functionality over sexy

Semantic HTML

Who determines which image to serve up?

JavaScript Libraries




Testing & Debugging




Testing

Emulators

Devices

Wireframe

Ghosting

ADB

Browsers

RippleChrome

Debugger

Chrome/SafariiOS vs Android

Adobe InspectCrossbrowsertesting.com

Android Bridge

Adobe Edge ReflowWirefy

Android/iOSVersion?

Mobile/Tablet




Rules for RWD




Rules for Successful Rollout No browser sniffing

Feature testing

Don’t disable zoom

Performance Oriented




Rules for Successful Rollout Start with mockups in 5

dimensions (Balsamiq)Target screens on major devices

Images Resources Use CSS3 and Sprites

Compress HTML,CSS,JS Resource Downloads




Thanksjavascriptphp.com

Yitzchak MeirovichWeb Developer, [email protected]




e4d js conference responsive web design - js-il.com

Technology

israel javascript conference

javascript libraries

px auto

px arial

px defaultfonts

media media queries

media screen

width layouts focus