Responsive web design with various grids and frameworks comparison


Published on

Responsive Web Design with Various Grids and Frameworks Comparison

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive web design with various grids and frameworks comparison

  1. 1. Responsive Web Design With Various Grids and Frameworks By Dhruba Jyoti Dey February, 2014
  2. 2. • What is ResponsiveWeb Design • Pros of ResponsiveWeb Design • Cons of ResponsiveWeb Design • What is RWD Grids and Frameworks ? • Various Frameworks I. Twitter Bootstrap II. Foundation III. Skeleton IV. HTML5 Boilerplate • Comparison of the Frameworks. • Conclusions Index @ Dhruba Jyoti Dey
  3. 3. @ Dhruba Jyoti Dey
  4. 4. What is ResponsiveWeb Design ResponsiveWeb design (RWD)is aWeb design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—acrossa wide range of devices (from mobile phones to desktop computer monitors). • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser. • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions. @ Dhruba Jyoti Dey
  5. 5. @ Dhruba Jyoti Dey
  6. 6. Pros of Responsive Web Design • Less Maintenance • Gives better user experience • Social Sharing • New devices • Gives goodSEO • Web tracking/analytics • Googleendorsed the ResponsiveWeb Design • Its likeWeb Apps in the form ofWeb Sites @ Dhruba Jyoti Dey
  7. 7. Cons of Responsive Web Design • Loading time • Development of responsive design • Implementation problem • Limited Resources • Design @ Dhruba Jyoti Dey
  8. 8. Various Frameworks @ Dhruba Jyoti Dey
  9. 9. @ Dhruba Jyoti Dey
  10. 10. Twitter Bootstrap Twitter Bootstrap is a free collection of tools forcreating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. Its 12-column grid system and amazing JavaScript plugins, such as modal windows, tooltips, carouseland others. Key Features: I. Additional components fornavigation, progressbars, pagination etc. II. JavaScript components including carousels, modals, alerts and tabs III. Classnames for intuitive identification Not soGreat: All the features, and capabilities could mean a steep learning curve for some. @ Dhruba Jyoti Dey
  11. 11. Foundation Foundation is the most advanced responsive front-end frameworkin the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices. Its 12-column grid system and amazing JavaScript plugins, such as modal windows, tooltips, carouseland others. Key Features I. A framework built around the "Mobile First" mindset II. Visible/Hiddencapabilities III. Source ordering to optimize content is seen based on device Not soGreat: Again, it might be a steep learning curve. However, Foundation provides periodic online training coursesfor developers who want to learn @ Dhruba Jyoti Dey
  12. 12. Skeleton Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screenor an iPhone. Its 16-columngrid system. Key Features: I. Rapid deployment II. Bare bones (pun completely intended) and lightweight III. More flexibility to fit into existing or prebuilt projects Not soGreat : It's a very light framework, and doesn't provide much besides the basics. @ Dhruba Jyoti Dey
  13. 13. HTML5 Boilerplate Boilerplate is not a framework, nor does it prescribeany philosophyof development, it's just got some tricks to get your project off the ground quickly and right-footed. Althoughit is not a framework it is good starting point for any HTML5 project. Key Features: I. It contains featuresof cross-browsernormalization. II. Provide performance optimizations. III. Optional features like cross-domainXHR and Flash. Not soGreat: No grid and no plugins of its own. @ Dhruba Jyoti Dey
  14. 14. Comparisonof the Frameworks @ Dhruba Jyoti Dey
  15. 15. Twitter Bootstrap Foundation Skeleton HTML5Boilerplate Summary Grids: Fluid UI tools: Lots of widgets; goodfor rapid prototyping History: Mobile-first updateto the style guide for internal tools developed by Twitter Grids: Fluid. Best in class grids across all viewports. UI tools: Powerfuland modular set of tools. More styleagnostic than Bootstrap. History: Performance and efficiency improvements to v4 Grids: Fixed UI tools: Limited History: Style agnosticand intentionally lightweight Grids: Can adopted Ex: Best with Bootstrap UI tools: Limited History: Style agnosticand intentionally lightweight Version 3.1.0 5 1.2 4.3 License MIT MIT MIT MIT Browser Chrome (Mac, Windows, iOS, and Android) Safari (Macand iOS only) Firefox (Mac, Windows) Opera (Macand Windows) IE8+ Desktop: Chrome, Firefox, Safari,IE9+ Mobile:iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone7+, Surface Desktop: Chrome, Firefox, Safari,IE7+ Mobile:iPhone, Droid, iPad Supportbackward compatibility @ Dhruba Jyoti Dey
  16. 16. Twitter Bootstrap Foundation Skeleton HTML5Boilerplate CSS Reset normalize.css normalize.css Inspiredby Eric Meyer's reset normalize.css LESS Yes No No Yes Sass/Scss Yes Yes No Yes Grids and Responsiveness Base width Fluid(480px, 768px, 992px, 1200px) Fluid(max-width 62.5em default) 960px N/A Grid Columns 12 1-16 with customizer (12 default) 16 N/A Column Class Syntax Multiple [4] Multiple[3] one N/A Files Size 46kb 44kb 9kb 16kb FormValidation No Yes -Abide No No Grids Yes Yes yes Using Others Media Object Yes –Media Object No No No Popovers Yes –Popover Yes –Tooltips No No Responsive media No Yes –Interchange No No Scroll spy Yes Yes -Magellan No No Modal window Yes Yes –Reveal No No Navigation Yes Yes No No @ Dhruba Jyoti Dey
  17. 17. The Responsiveweb designis a powerful strategy in certain situations. We need to identifyour requirement and figured out our best framework we need to used. As Skeleton is the lightesthaving 16Columns grid , Foundation having new featured plaguingallare good for development. I think TwitterBootstrap good for our portal with the help of html5boilerplate. Conclusions @ Dhruba Jyoti Dey