2 bootstrap-3-m1-slides
0 likes1,293 views
Bootstrap 3 is an open-source framework designed to facilitate web development, particularly with a mobile-first approach. It addresses the need for responsive web design, ensuring websites are adaptable to various devices while promoting the use of common design elements. Customization is essential to avoid producing generic-looking sites, despite Bootstrap's popularity.
2 bootstrap-3-m1-slides
- 1. Bootstrap 3 Module 1: Why Bootstrap 3? Shawn Wildermuth Wilder Minds LLC http://wilderminds.com
- 2. Agenda Why Bootstrap Developers and Designers What is Bootstrap The Mobile Web Bootstrapping of the Web
- 3. Developers and Designers Not every project has a designer This means well-meaning developers often do their best to create websites It doesn’t always go well…
- 4. Sins of the Internet
- 5. Redemption Learning from the community can help Most websites are made of the same basic parts Navigation Layout Etc.
- 7. What is Bootstrap Open Source Framework for Building Web Sites A bit of CSS A bit of JavaScript Modular Covers the 80% of the Metaphors
- 9. The Mobile Web Devices and PCs are equally important now Your website is just as likely to be viewed on a tablet or phone as on a PC This used to mean building a ‘mobile’ version No longer viable… …Your site needs to respond to the device it’s viewed on
- 10. Responsive Web Design What is it? Adapting Site to Mobile Devices Approach usually has been to gracefully degrade For Example…
- 12. Responsive Web Design Main CSS (Common Design) 960+ (Standard Browsers) 0-959 (Tablet Landscape) 0-767 (Mobile Sizes) 0-479 (Mobile Portrait) 480-767 (Mobile Landscape) 768-959 (Tablet Portrait and up)
- 13. Responsive Design Media Queries Works because of cascading rules Later rules over-rule (pun!) earlier rules More specific rules overrule earlier rules // your.css #main { width: 989px; } @media only screen and (min-width: 768px) and (max-width: 959px) { #main { width: 760px; } } @media only screen and (max-width: 767px) { #main { width: 470px; } }
- 14. Responsive Web Design Problems… Subtractive solution means too many resources All JS code is running On Platform that is least suited to handle it Images are loaded but hidden
- 15. Comparison of Mobile and Desktop Views 9% Mobile is Larger 4% 25% Same Size < 10% Savings 11%-50% Savings 21% 4% 51%-100% Savings Greater than 100% 37% * Source: Jason Brigsby - http://shawnw.me/11vMlhG
- 16. Mobile First Responsive Design Philosophy created by Luke Wroblewski* Focuses on Progressive Enhancement Where RWD is typically Graceful Degradation Scales Up…not down * http://www.lukew.com
- 18. Mobile First Responsive Web Design Main CSS (Common Design) (0-480) > 480px > 768px > 992px > 1200px
- 19. Bootstrap 3 and Mobile First Responsive Design Bootstrap < 3 Supported optional Responsive Web Design Great help to a many sites But wasn’t mobile first Bootstrap 3 Major changes from prior versions Change to support Mobile First but… …breaks existing clients
- 20. The Bootstrapping of the Web Bootstrap is very popular… But it also means that it is easy to look like a cookie cutter Use Bootstrap as the basis but not the look of your site Once you use bootstrap you’ll start to see it everywhere Avoid the temptation…
- 21. The Good and Bad of Bootstrapping the Web Demo
- 22. Summary Why Bootstrap 3 Websites often require common metaphors Using a framework to implement these metaphors is a good decision Bootstrap 3 is a great framework for building these metaphors But if you don’t customize the CSS from Bootstrap, we might laugh at you