Responsive Web Design with Various Grids and Frameworks Comparison

1. Responsive Web Design
With
Various Grids and Frameworks
By Dhruba Jyoti Dey
February, 2014

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. @ Dhruba Jyoti Dey

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. @ Dhruba Jyoti Dey

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. Cons of Responsive Web Design
• Loading time
• Development of responsive design
• Implementation problem
• Limited Resources
• Design
@ Dhruba Jyoti Dey

8. Various Frameworks
@ Dhruba Jyoti Dey

9. @ Dhruba Jyoti Dey

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. 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. 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. 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. Comparisonof the Frameworks
@ Dhruba Jyoti Dey

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. 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. 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