This document discusses how Bootstrap 3.0, an open source CSS framework, can help a design/development team work more efficiently. It proposes using Bootstrap components like grids and pre-built elements to streamline the design, development, and project management processes. This would allow more collaboration between roles and faster website creation using a shared framework across projects. The document argues that adopting Bootstrap could help teams standardize processes, produce higher quality websites in less time, and increase profits without requiring additional costs or learning new skills.

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

14. http://designmodo.com/demo/flat-ui/
http://axutopia.com/twitter-bootstrap/
http://pixeldropr.com/
http://getbootstrap.com/
http://bootswatch.com/flatly/
http://www.yabdab.com/demo/bootsnap/

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