Responsive Web Design with Bootstrap
0 likes2,773 views
Responsive Web Design uses CSS3 media queries to make websites work well on different devices by adapting the layout. It has benefits like a single codebase that works across screen sizes, and better user experience. Drawbacks include more complexity in development and testing. Popular frameworks like Bootstrap use a grid system and components to help developers quickly build interfaces that work responsively.
Responsive Web Design with Bootstrap
- 1. RESPONSIVE WEB DESIGN WITH BOOTSTRAP Jason Stehle @jasonstehle
- 2. WHAT IS RESPONSIVE WEB DESIGN? Responsive Web Design is a way to make a website or web application work well on devices of different shapes and sizes.
- 3. WHAT IS IT MADE FROM? CSS3 Media Queries dvsd-ysd { i.ieb-ie fot lf; la: et wdh 4.3101755; it: 89672269% } @ei (a-it:77x { mda mxwdh 6p) dvsd-ysd { i.ieb-ie fot nn; la: oe wdh 10; it: 0% } }
- 4. BENEFITS OF RESPONSIVE WEB DESIGN One codebase Better experience across screen sizes No more m.*.com Better future proofing
- 5. DRAWBACKS OF RESPONSIVE WEB DESIGN More complexity More testing Mobile performance considerations (images, excess content, etc.) Legacy browser compatibility (Can I Use)
- 6. WHO USES RESPONSIVE WEB DESIGN? Microsoft, Boston Globe, etc. Follow @rwd
- 7. WHAT IS BOOTSTRAP? Grid system, useful styles, component library. *I have been informed by a hipster that it should not be referred to as "Twitter Bootstrap"
- 8. WHY DO I USE BOOTSTRAP? I am not a particularly talented front-end developer I am not a particularly talented visual designer Good for building a passable UI quickly I have deadlines I can use it how I want It has the "critical mass" It has an ecosystem (builtwithbootstrap, bootswatch, wrapbootstrap, jetstrap, divshot) It's (mostly) well documented
- 9. DRAWBACKS OF BOOTSTRAP Everything's going to look like default Bootstrap. So buy a theme, they're like 20 bucks.
- 10. AND NOW, SOME CODE