-
Responsive Web Design and Responsive Frameworks
over 9 years ago
In this session, we will learn about Responsive Design and will check out some of the popular frameworks related to it. So, without much further ado, let's begin:
What is Responsive Design?
"Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experienceeasy reading and navigation with a minimum of resizing, panning, and scrollingacross a wide range of devices (from desktop computer monitors to mobile phones).
- Wikipedia
In other words, a RWD is a design which 'responds' or 'adjusts itself' to the device rendering it. This is achieved by using:
-
Fluid grids or Proportion based grids: Use relative units instead of absolute ones to size page elements. E.g. A page element measured in x% of the screen-size would be more flexible and adaptive than the one measured in fixed pixels or inches.
-
Flexible images: The above relativity principle applies to images as well.
-
CSS3 media queries: This allows one to use different CSS rules to configure the page according to the device.
What is a RWD Framework?
As one can imagine, the emergence of smart-phones and tablets as the primarily used devices for web browsing has necessitated the new (also the old) websites to adopt RWD in a big way. This necessity in turn, has given rise to a lot of techniques, which again by virtue of being similar (they have a common goal!), have lead to many RWD Frameworks. These frameworks are nothing but ready-made packages made up of a structure of files and folders of standardized code (HTML, CSS etc). These include pre-defined styles and rules such as the grid width, font sizes, button and form styles etc. which help us to create RWD compliant websites without reinventing the wheel every time!
So which Framework to use ?
Like we discussed above, since RWD has come up in such a big way, a lot of frameworks also have evolved. While the goal of each is to provide RWD compliance, they differ from each other based on the solutions they offer in terms of complexity of the design and the amount of flexibility one is after. Here, I will be providing a list of few popular frameworks with their features:
-
Bootstrap Framework or Twitter Bootstrap
Bootstrap is the most popular front-end, UI based open-source framework. It was originally developed by Twitter. It consists of a pack of components which helps to build a unique, clean and flexible UI design for sites and apps. The features include a 12 Grid layout structure, 13 customizable plugins for common UIs such as slider or carousels, modal window or popup windows, and many more.
-
Foundation
Foundation is another popular and advanced responsive framework. Built with SASS, a powerful CSS preprocessor giving more customization options to designers, this HTML5 concept allows for rapid prototyping of a responsive site. Other features include (but not limited to) a 12 grid system, reusable HTML components, JavaScript plug-ins, Off Canvas and Improved form.
Foundation is introduce by ZURB, a company mainly focused on building new web based solutions.
-
HTML5 Boilerplate
Though not a framework exactly, but it has been a starting point of Responsive Design philosophy. And since 2010, it has been a popular open source front-end web development tool for buiding HTML5 sites and web apps that are RWD compliant. The features include cross-browser normalization, performance optimizations, cross-domain XHR and Flash.
-
SproutCore
SproutCore is another popular front-end framework for developing HTML5 web apps quickly. Originally, SproutCore is the JavaScript MVC library which started the JS-MVC movement in 2007. Introduced by 'Apple' and managed by a robust and growing community, its features include a rich, responsive, highly-optimized view layer, smooth-scrolling lists of 50,000 items.
-
Base Framework
"BASE" is another popular framework which built on LESS, a strong CSS pre-processor that helps us to write clean, well-formed and well-organized CSS. It is designed to use with a wide variety of devices, from small screen to large screens. The features include 12-column fluid and responsive grid, basic styles for headings, tables, blockquotes and forms. It also includes a default JavaScript file with base enhancements and fallbacks.
-
The Responsive Grid System
"The Responsive Grid System" differs from others by giving designers a break from the 12/16 grid system limitation. That means, it allows one to have any number of columns as per his need. This development plugin can be quickly plugged into existing CSS and HTML.
-
Responsive Aeon Framework
"Responsive-Aeon framework" is an elegant and simple structured CSS3 grid system framework, including responsive grids all based on percentage, media-queries and JavaScript.
It is based on a 12 column responsive grid coded in HTML5 and it also have 3 basic classes which help us to create mockups/wire-frames rather quickly.
-
Gumby Framework
One of the easiest to get started with, "Gumby Framework" is a responsive CSS framework which is built upon SASS and Compass. A 'Hybrid grid' is a base element of this framework, which allow us to create web layouts and prototype structure by implementing different grids. Includes a PSD and User Interface kit.
End of this Session
The above list is of the top frameworks in use today, but this list is definitely not exhaustive. There are many other frameworks which make responsive design task easy and which different designers opt for depending on their needs.
-
0 Comment(s)