4. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
• 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
6. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
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
7. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
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!
11. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
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
12. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
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/
20. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
<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
24. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
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
29. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Start with mockups in 5
dimensions (Balsamiq)
Target screens on major
devices