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