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

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Yitzchak MeirovichWeb Developer, Instructor

Israel Finance Ministrysite: javascriptphp.com

Responsive Web DesignThe Art & Science

Israel JavaScript Conference

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)

• Design approach

• Testing and Debugging

• 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

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/

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/

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

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*/}

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

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

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

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, Instructorymeirovich@gmail.com052-756-3792

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

israel javascript conference

javascript libraries

px auto

px arial

px defaultfonts

media media queries

media screen

width layouts focus

Technology

js tacktalk team dev js testing performance

jquery mobile apps - js-il.com

node js websocket js meetup slides

overview of transdisciplinarity: e4d seminar , march 2012

cold rolled steel - posco.co.kr · pdf filejs-spcc js-spcd...

o verview of t ransdisciplinarity : e4d s eminar, m arch...

m ou n tfl e ch red a id sd.r.c.js tyen i js taung ajs qanqu...

スクリーンショット 2018-05-07 11.42.15...-dsp020...

Разработка single page app. backbone js....

· 4.4 js 43s * : js ias : 41.4.] .

angular js: first look เริ่มต้น angular js...

ikaheng js mount frere education district · zoko jss tsewu...

[2015/2016] require js and handlebars js

scala js (kyiv js 30-01)

js dom & js bom

visionmooiplaats 242 js goedehoop 244 js doornkop 246 js...

ru.nornik2.3ebra.comru.nornik2.3ebra.com › upload ›...

true def e4d espertise webinar fredrickson cg2

origami - g-il.com by … · origami 1 2 3 13 kehilat...

il.com vincenzo.pinto@pecordineavvocatipisa...e-mail-pec...