Responsive Web Design

With

Various Grids and Frameworks

By Dhruba Jyoti Dey

February, 2014

• What is Responsive Web Design • Pros of Responsive Web Design • Cons of Responsive Web 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

@ Dhruba Jyoti Dey

What is Responsive Web Design

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

@ Dhruba Jyoti Dey

Pros of Responsive Web Design

• Less Maintenance • Gives better user experience • Social Sharing • New devices • Gives good SEO • Web tracking/analytics • Google endorsed the Responsive Web Design • Its like Web Apps in the form of Web Sites

@ Dhruba Jyoti Dey

Cons of Responsive Web Design

• Loading time • Development of responsive design • Implementation problem • Limited Resources • Design

@ Dhruba Jyoti Dey

Various Frameworks

@ Dhruba Jyoti Dey

@ Dhruba Jyoti Dey

Twitter Bootstrap

Twitter Bootstrap is a free collection of tools for creating 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, carousel and others. Key Features: I. Additional components for navigation, progress bars, pagination etc. II. JavaScript components including carousels, modals, alerts and tabs III. Class names for intuitive identification Not so Great: All the features, and capabilities could mean a steep learning curve for some.

@ Dhruba Jyoti Dey

Foundation

Foundation is the most advanced responsive front-end framework in 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, carousel and others. Key Features I. A framework built around the "Mobile First" mindset II. Visible/Hidden capabilities III. Source ordering to optimize content is seen based on device Not so Great: Again, it might be a steep learning curve. However, Foundation provides periodic online training courses for developers who want to learn

@ Dhruba Jyoti Dey

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 screen or an iPhone. Its 16-column grid 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 so Great : It's a very light framework, and doesn't provide much besides the basics.

@ Dhruba Jyoti Dey

HTML5 Boilerplate

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed. Although it is not a framework it is good starting point for any HTML5 project. Key Features: I. It contains features of cross-browser normalization. II. Provide performance optimizations. III. Optional features like cross-domain XHR and Flash.

Not so Great: No grid and no plugins of its own.

@ Dhruba Jyoti Dey

Comparison of the Frameworks

@ Dhruba Jyoti Dey

Twitter Bootstrap

Foundation Skeleton HTML5Boilerplate

Summary

Grids: Fluid UI tools: Lots of widgets; good for rapid prototyping History: Mobile-first update to the style guide for internal tools developed by Twitter

Grids: Fluid. Best in class grids across all viewports. UI tools: Powerful and modular set of tools. More style agnostic than Bootstrap. History: Performance and efficiency improvements to v4

Grids: Fixed UI tools: Limited History: Style agnostic and intentionally lightweight

Grids: Can adopted Ex: Best with Bootstrap UI tools: Limited History: Style agnostic and intentionally lightweight

Version 3.1.0 5 1.2 4.3

License MIT MIT MIT MIT

Browser Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only) Firefox (Mac, Windows) Opera (Mac and Windows) IE8+

Desktop: Chrome, Firefox, Safari, IE9+ Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface

Desktop: Chrome, Firefox, Safari, IE7+ Mobile: iPhone, Droid, iPad

Support backward compatibility

@ Dhruba Jyoti Dey

Twitter Bootstrap

Foundation Skeleton HTML5Boilerplate

CSS Reset normalize.css normalize.css Inspired by 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

Form Validation 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

The Responsive web design is a powerful strategy in certain situations. We need to identify our requirement and figured out our best framework we need to used. As Skeleton is the lightest having 16 Columns grid , Foundation having new featured plaguing all are good for development. I think Twitter Bootstrap good for our portal with the help of html5boilerplate.

Conclusions

@ Dhruba Jyoti Dey