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

660 views
555 views

Published on

js-il.com

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
660
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • http://api.jquery.com/prop/
  • E4D js conference responsive web design - js-il.com

    1. 1. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Israel JavaScript Conference
    2. 2. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    3. 3. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    4. 4. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |• Introducing and the need for RWDScience• The Science of Responsive Web Design (RWD)Art• Design approachTest• Testing and DebuggingRules• Rules/Suggestions for a successfulimplementation of RWD
    5. 5. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    6. 6. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com | Website rolled out to millions Needed to be Light, Lean andLightning fast Non-reflexive, responsive serverinfrastructure unlike Amazon S3 Want mobile but no history ofmobile at the Ministry and nohardware devices Short development time
    7. 7. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com | No time/ability to learn nativemobile code (obj C, java) Use current skill-sets Needed to be maintainable Small team High profile project watched atthe highest levels NO PRESSURE!
    8. 8. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    9. 9. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |This was a mistake!
    10. 10. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    11. 11. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com | Standalonepage, multiple files Fixed-width layouts Focus on pixels Doesn’t display wellon mobile Single page/file Fluid layouts Focus on EMs / % Display adjusts todifferent layouts andorientations
    12. 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 CSS3specificationhttp://responsivewebdesign.com/robot/http://www.starbucks.com/
    13. 13. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Each browser calculates differently:1. Blocks2. Margins3. PaddingCSS Reset’s normalizecross-browserincompatibility for CSSlayoutshttp://meyerweb.com/eric/tools/css/reset/http://html5boilerplate.com/
    14. 14. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |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 = result24 / 16 = 1.5h1 {/* 24px / 16px */font-size: 1.5em;}11 / 24 =Target = 11px, headline = 24px= . %
    15. 15. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Proportional blocksMargins keep blocks lined up#page {width: 960px;margin: 0 auto;}Non-responsiveNon-fluid
    16. 16. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |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 =Fluid
    17. 17. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |img {max-width: 100%;height: auto;width: auto9; /* ie8 */}
    18. 18. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |@media screen and (device-pixel-ratio: 1.5){/*adjust your layout for 1.5 hardware pixels toeach 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/dhtmltutors/cssmediaqueries2.shtml
    19. 19. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |12-columnresponsive gridJavaScript pluginsFixed width and Fluid grids12/16/24 default grid layoutsCustomizerForm controlsTypographyCustomizer
    20. 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 foundationFlexible ImagesFlexible FontsResponsive design is, I believe, one part design philosophy, onepart front-end development strategy. And as a developmentstrategy, it’s meant to be evaluated to see if it meets the needs ofthe project you’re working on. - Ethan Marcotte
    21. 21. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    22. 22. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    23. 23. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    24. 24. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Why do people use yoursite?Know your users goalsDecide which devices tosupportAdditive ExpansionistNon-reductionistPixels vs % vs EMsFocus on functionality oversexySemantic HTMLWho determines whichimage to serve up?JavaScript Libraries
    25. 25. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    26. 26. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |TestingEmulatorsDevicesWireframeGhostingADBBrowsers
    27. 27. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    28. 28. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    29. 29. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Start with mockups in 5dimensions (Balsamiq)Target screens on majordevices
    30. 30. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    31. 31. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
    32. 32. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ymeirovich@gmail.com

    ×