Responsive Web Design: beyond flexible grids and fluid images
Responsive web design with various grids and frameworks comparison
-
Upload
dhrubajyoti-dey -
Category
Education
-
view
107 -
download
1
description
Transcript of Responsive web design with various grids and frameworks comparison
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