Building a responsive site adds new challenges for web designers and developers. They need to consider various aspects while building the framework, such as image scaling, and user interface components such as column shrinks and shifts, navigation bars, tabs, and carousels responding to varying screen sizes. Web designers and developers look for a solution that will make front-end web development faster and easier; and is made for devices of all shapes, and projects of all sizes. Bootstrap is solution to that. This session covers the following - Responsive Web Design - Bootstrap - Using Bootstrap with MVC/ASP.Net

1. © 2010 WinWire Technologies
WinWire Technologies, Inc. Confidential
Building Responsive Websites with Bootstrap
@WinWireWired2Win Webinar Series

2. © 2010 WinWire TechnologiesWho We Are
IT solutions company making information actionable for the enterprises in the mobile-cloud world
Collaborative and Analytics solutions leveraging pre-built solution accelerators
Cloud,
Collaboration &
Analytics Technologies
Mobility,

3. © 2010 WinWire TechnologiesSession SpeakerBuilding Responsive Websites with Bootstrap
Heemanshu Dave Technical Architect
WinWire Technologies

4. © 2010 WinWire TechnologiesAgenda
Introduction to Bootstrap
Introduction to Responsive Web Design (RWD)
Demo

5. © 2010 WinWire TechnologiesIntroduction Responsive Web Design (RWD)
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience -easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.
What is RWD?

6. © 2010 WinWire TechnologiesElements in Responsive Web Design (RWD)
Media
Queries
Flexible
Images
Flexible Layouts

7. © 2010 WinWire TechnologiesIntroduction Bootstrap
Developed by Mark Otto and Jacob Thornton at Twitter
History
Framework to encourage consistency across internal tools

8. © 2010 WinWire TechnologiesIntroduction Bootstrap
•Bootstrap is an CSS framework that provides many interface elements, layouts, and jQuery plugins.
•Bootstrap is open source.
•It contains HTMLand CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScriptextensions.
What is Bootstrap

9. © 2010 WinWire TechnologiesFeatures of Bootstrap
Mobile-First
Support useful
jQuery plugins
Easy to Customize
Encourages using LESS
Cross-Browser Support

10. © 2010 WinWire TechnologiesBootstrap download
http://getbootstrap.com/

11. © 2010 WinWire Technologies
Demo

12. © 2010 WinWire Technologies
WinWire Technologies, Inc. Confidential
WinWire Technologies, Inc. Confidential
Reach out to us at marketing@winwire.com
Visit us: www.winwire.com
http://www.winwire.com/winwire-blog/
www.twitter.com/winwire
Thank You