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

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

• 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

 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

 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!

This was a mistake!

 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

 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/

Each browser calculates differently:
1. Blocks
2. Margins
3. Padding
CSS Reset’s normalize
cross-browser
incompatibility for CSS
layouts
http://meyerweb.com/eric/tools/css/reset/
http://html5boilerplate.com/

Font = 100% = 16px (default)
Fonts will always be proportional
body {
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
24 / 16 = 1.5
h1 {
/* 24px / 16px */
font-size: 1.5em;
}
11 / 24 =
Target = 11px, headline = 24px
= . %

Proportional blocks
Margins keep blocks lined up
#page {
width: 960px;
margin: 0 auto;
}
Non-responsive
Non-fluid

Proportional blocks
Margins keep blocks lined up
#page {
width: 90%;
margin: 36px auto;
}
Responsive
.blog {
margin: 0 auto 53px;
width: 93.75%;
/* 900px / 960px */
}
900 / 960 =
Fluid

img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}

@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" />
@media print {
body {
font-size: 15pt;
}
}
@media screen and (min-device-width: 480px) and (orientation: landscape){
body {
font-size: 100%;
}
}
http://stephen.io/mediaqueries/
http://www.javascriptkit.com/dhtml
tutors/cssmediaqueries2.shtml

12-column
responsive grid
JavaScript plugins
Fixed width and Fluid grids
12/16/24 default grid layouts
Customizer
Form controls
Typography
Customizer

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
Emulators
Devices
Wireframe
Ghosting
ADB
Browsers

Start with mockups in 5
dimensions (Balsamiq)
Target screens on major
devices

ymeirovich@gmail.com

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

More Related Content

Similar to E4D js conference responsive web design - js-il.com (20)

More from Eyal Vardi (20)

Recently uploaded (20)

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

Editor's Notes