Bootstrap 3.0
-
Upload
youwe-drecomm-ooip-ooip20-synocom -
Category
Technology
-
view
126 -
download
3
description
Transcript of Bootstrap 3.0
The “Boots” we all wear
Bootstrap 3.0 Framework - Integration
12 Grid responsive Css framework
What is it?
It’s currently the new standard for every website to be accessible in multiple devices across different screen sizesSmashing magazine, Gizmodo, Codrops, Dribbble, ...
Yes, ok and So... How? Who? What? How does it affect YOU?
Use Case Scenario, I called it -
“The Routines”
Int. Design
Gra. Design
Front-end
Back-end
Start with IA in Axure
Design all of the PSD’s
Css Layout & Style it
Add functionality
Axure
Complete sets of IA At least 6 - 8 pages +++ / project
PhotoshopBetween 6 ++ PSD’s / project
Html - CssComplete sets of styling - layout At least 6 - 8 pages +++ / project
FunctionalityVaries depending on project
At least 6 - 8 +++ functions - custom code / project
And we are still doing it the same way for every single project… !
everytime, again and again for some projects which are rather similar
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!
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...
Int. Design Gra. Design
Front-end 1Back-end
http://axutopia.com/twitter-bootstrap/
Bootstrap 3.0 layout for Axurehttp://axutopia.com/twitter-bootstrap/
Flat UI Pro Bootstrap 3.0 PSD
http://getbootstrap.com/
Bootstrap 3.0 Grid System - Html
http://axutopia.com/twitter-bootstrap/
Flat UI Pro Bootstrap 3.0 - Csshttp://getbootstrap.com/
Functions, jQuery, Web elements, etc
Front-end 2
http://designmodo.com/demo/flat-ui/
http://pixeldropr.com/
http://getbootstrap.com/
http://bootswatch.com/flatly/
http://www.yabdab.com/demo/bootsnap/
http://axutopia.com/twitter-bootstrap/
<link href="http://bootswatch.com/flatly/bootstrap.css" rel="stylesheet">
Paste this on the last row of http://getbootstrap.com/components/
Int. Design Gra. Design
Front-end 1Back-end
Front-end 2
Wireframe layout & functionality Create only minimum 1 PSD UI
Construct the template - Css Grid
Transform the UI PSD styling - Css colorConstruct web elements
Load Balancing Method
Int. Design Gra. Design
Front-end 1
Back-end
Front-end 2
Layout & Functionality Create new web UI
Only the styleOnly the layout
Result
https://drupal.org/project/bootstrap
Bootstrap 3.0 for Drupal 7
http://highlander.novademo.com/m/
Bootstrap 3.0 for Magento 1.8
Interaction Design Perspective
There is an available Bootstrap 3 Axure Library
IA will look more stylish than our current IA
IA define layout & functionality
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
Graphic Designer 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
Front-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
Back-End 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
Project Manager & Sales Perspective
Negligible cost
Very low risk
No E=mc2 (calculation)... Stairway to make Profit!
The Circles Perspective
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
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
Conclusion
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
FAQ Why Bootstrap?
The “Boots” we all wear
Questions? Framework - Integration