Hands On Responsive Design With Twitter Bootstrap

How Twitter Bootstrap helps you get a solid foundation on which to build responsive sites.

Transcript

1. <anglebrackets/>/ / / Hands/On/Responsive/Design/ With///////////Bootstrap/ Burke Holland @burkeholland
2. 2" " h$p://www.anglebrackets.org " " On/The/Agenda/ !  Introduc@ons/ !  Responsive/Design/ !  TwiBer/Bootstrap/ !  CODE/
3. 3" " h$p://www.anglebrackets.org " " Introduc@ons/ Burke/Holland/ / / / @burkeholland/ a.shinynew.me/ / Kendo UI
4. 4" " h$p://www.anglebrackets.org " "
5. 5" " h$p://www.anglebrackets.org " " / / / / / I/S@ll/❤/HTML5// Always"And/Forever/
6. 6" " h$p://www.anglebrackets.org " " Responsive/Design/ “A/web/design/approach/aimed/at/ craOing/sites/for/op@mal/VIEWING/ easy/READING/and/NAVIGATION… across/and/wide/range/of/devices”/ Wikipedia"of"course"
7. 7" " h$p://www.anglebrackets.org " " Responsive/Web/Design/(RWD)/ !  Coined/By/Ethan/MarcoBe/ / !  One/design/to/rule/them/all/ "  No m.domain.com "  No separate CSS files
8. Demo/ Some"Responsive"Sites"
9. 9" " h$p://www.anglebrackets.org " " 3/Pillars/Of/RWD/ RWD$ Media$ Queries$ Fluid$ Grids$ Flexible$ Images$
10. 10" " h$p://www.anglebrackets.org " " Media/Queries/ !  “Condi@onal/CSS/Rule”/ !  Part/of/the/CSS/3/specifica@on/ !  Consist/of/two/parts/ "  Media type "  At least one expression that limits the scope of the rule /
11. 11" " h$p://www.anglebrackets.org " " Sample/Media/Queries/ body/{/ ////background]color:/lime;/ }/ / @media/all/and/(min]width:/700px)/{/ /////body/{/ ////////background]color:/fuschia;/ ////}/ }/
12. Demo/ Simple"Media"Query"
13. 13" " h$p://www.anglebrackets.org " " RWD:/The/Advantages/ !  Write/once./Run/Everywhere./ "  Target every medium "  Desktop, tablet, phone, tv, refrigerator !  Don’t/Chase/A/Plaeorm/ "  Today’s iPhone may be tomorrow’s Blackberry "  Platform changes effect your app "  iPhone 4 vs iPhone 5 "  Retina vs non-retina !  S@ll/App/Ready/ "  Step 1: Wrap it in PhoneGap "  Step 2: Publish it to the app store "  Step 3: Get interviewed by TechCrunch / /
14. 14" " h$p://www.anglebrackets.org " " RWD:/The/Ugly/ !  Requires/Significantly/More/Work/Up/Front/ "  Planning "  Defining baseline functionality for resolutions !  Tes@ng/ "  Build "  Check on iPad (Looks great!) "  Rotate iPad to landscape (Looks like crap) "  Rinse and repeat "  The Scotch is open by 9:30 AM !  Media/Queries/Not/Supported/On/IE/8/And/Lower/ "  Not too many mobile devices running IE 8 "  RespondJS /
15. 15" " h$p://www.anglebrackets.org " "
16. 16" " h$p://www.anglebrackets.org " " TwiBer/Bootstrap/ !  “Sleek,/intui@ve/and/powerful/front]end/framework/for/faster/and/easier/ web/development”/ !  Created/@/TwiBer/ "  Mark Otto (@mdo) "  Jacob Thornton (@fat) !  SO/FREAKING/GOOD/ ;"
17. 17" " h$p://www.anglebrackets.org " " What’s/In/The/Box/ !  Base/CSS/Scaffolding/ "  Global styles "  Grid "  Fixed and Fluid "  Layouts "  Responsive Design !  Base/CSS/For/HTML/ "  Typography, code snippets, tables, forms, buttons, images and icons !  Essen@al/Components/ "  Navbar, pagination, breadcrumbs, progress bars, ect… !  JavaScript/(jQuery/plugins)/ "  Tooltip, popover, dropdown, modal
18. 18" " h$p://www.anglebrackets.org " " Bootstrap/Responsive/ !  Focused/On/3/Areas/ "  Modify the width of the grid "  Stack elements when necessary "  Resize text when necessary !  Not/Included/In/Bootstrap.css/ "  You must actively include bootstrap-responsive.css
19. 19" " h$p://www.anglebrackets.org " " Targets/
20. Demo/ “Talk"is"cheap.""Show"me"the"code.”" Linus Torvalds
21. 21" " h$p://www.anglebrackets.org " " A/Few/Final/Thoughts/On/RWD/ !  It/is/not/the/answer/to/world/peace/ "  “Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.” !  If/you/are/going/to/do/RWD,/get/a/browser/that/you/LOVE/ !  Your/site/is/either/responsive/or/unresponsive/ "  Having an unresponsive site is the same as telling users on mobile devices to just go away !  Double]tapping/to/read/text/is/so/2000/and/late/ "  Honestly. This sort of UX makes me physically ill.
22. 22" " h$p://www.anglebrackets.org " " Complete/Irony/
23. 23" " h$p://www.anglebrackets.org " " Resources/ !  hBp://twiBer.github.com/bootstrap// !  hBp://bootswatch.com// !  hBps://wrapbootstrap.com// !  hBp://demos.kendoui.com/ !  hBp://addyosmani.github.com/jquery]ui]bootstrap// !  hBp://ckrack.github.com/pootstrapp// !  hBps://chrome.google.com/webstore/detail/window]resizer/ kkelicaakdanhinjdeammmilcgefonr?hl=en/
24. Ques@ons?/ Thank/you!/ Don’t/forget/to/enter/your/evalua@on// of/this/session/using/EventBoard!/