Bootstrap 3.0
- 1. The “Boots” we all wear Bootstrap 3.0 Framework - Integration
- 2. What is it? 12 Grid responsive Css framework
- 3. It’s currently the new standard for every website to be accessible in multiple devices across different screen sizes Smashing magazine, Gizmodo, Codrops, Dribbble, ...
- 4. Yes, ok and So... How? Who? What? How does it affect YOU?
- 5. Use Case Scenario, I called it - “The Routines” Int. Design Start with IA in Axure Gra. Design Design all of the PSD’s Front-end Css Layout & Style it Back-end Add functionality
- 6. Axure Complete sets of IA At least 6 - 8 pages +++ / project
- 7. Photoshop Between 6 ++ PSD’s / project
- 8. Html - Css Complete sets of styling - layout At least 6 - 8 pages +++ / project
- 9. Functionality Varies depending on project At least 6 - 8 +++ functions - custom code / project
- 10. And we are still doing it the same way for every single project… ! everytime, again and again for some projects which are rather similar
- 11. So How can Bootstrap 3.0 Help us to achieve ! High quality website within less hours involves more team work make things easier return more profit ! Without Cost & learning Anything!
- 12. Thanx, to the large open source community that envy Bootstrap, We now have pieces of building blocks that we can connect together. ! This method is still fresh, not much known, a secret...
- 13. Bootstrap 3.0 layout for Axure Flat UI Pro Bootstrap 3.0 PSD http://axutopia.com/twitter-bootstrap/ http://axutopia.com/twitter-bootstrap/ Int. Design Gra. Design Functions, jQuery, Web elements, etc Flat UI Pro Bootstrap 3.0 - Css http://getbootstrap.com/ http://axutopia.com/twitter-bootstrap/ Back-end Front-end 1 Bootstrap 3.0 Grid System - Html http://getbootstrap.com/ Front-end 2
- 15. <link href="http://bootswatch.com/flatly/bootstrap.css" rel="stylesheet"> Paste this on the last row of http://getbootstrap.com/components/
- 16. Wireframe layout & functionality Create only minimum 1 PSD UI Int. Design Gra. Design Construct web elements Transform the UI PSD styling - Css color Back-end Front-end 1 Load Balancing Method Construct the template - Css Grid Front-end 2
- 17. Layout & Functionality Create new web UI Int. Design Gra. Design Only the layout Front-end 2 Only the style Front-end 1 Back-end Result
- 18. http://highlander.novademo.com/m/ Bootstrap 3.0 for Magento 1.8 https://drupal.org/project/bootstrap Bootstrap 3.0 for Drupal 7
- 19. Interaction Design Perspective There is an available Bootstrap 3 Axure Library IA will look more stylish than our current IA IA define layout & functionality
- 20. Graphic Designer Perspective A PSD ready with Html code available for Bootstrap 3 1 UI page psd for any site 1 Style for each web elements makes design more accurate Not so-dependent on IA result while designing
- 21. Front-End Perspective Quick 12 grid layouting, responsive / non responsive. Save time creating responsive front-end Front-end now can use the IA as reference Front-end now can template website without being attached to a local server
- 22. Back-End Perspective Easier to manipulate the Html layout Back-end now can contribute Front-end work easily Back-end now can use the IA as reference Back-end can build functionality by looking straight to IA
- 23. Project Manager & Sales Perspective There are not much website in the Netherlands that use Bootstrap (especially for Magento) More open source framework Responsive ready website offer Front-end, Back-end and interns can now also template Magento easily More room for marketing communication, strategy, research, etc
- 24. The Circles Perspective Negligible cost Very low risk No E=mc2 (calculation)... Stairway to make Profit!
- 25. Risk ! It’s never been implemented yet We need to work closer and communicate better as a team No stable / own Magento Bootstrap 3 yet Sell the same hours, use it for other areas
- 26. Conclusion Big advantage for everybody Flexible team work Synchronize IA, Design, Frontend, Backend Easily upgrade / update website for Front-end’er Nothing is needed to be learned besides small portion for Front-end’er Responsive / not responsive is not a ‘drama’ anymore Reindert needs to find Bootstrap developer
- 27. FAQ Why Bootstrap? The largest responsive mobile first community Flexible team work & team plays Faster development, grid layout & responsive (xs, sm, md, lg) More opportunities for intern to actually template project Exchange website style between different cms Html 5 ready Compatible with IE:9 and compatible with less (OOIP style) Free... It's Open Source Framework
- 28. The “Boots” we all wear Questions? Framework - Integration