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).
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 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 is introduce by ZURB, a company mainly focused on building new web based solutions.
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.
"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.
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.