When thread of internet bomb was ignited around the year 1990, one thing developers found quite challenging is creating a layout and defining size for various screen sizes. Later on, making its debut in the year 1996 CSS became one of the reliable solution for creating web sites for multiple screen sizes!
Venturing on, CSS too had lags as the “Mobile” screens sizes started to emerge and disperse rapidly and steadily. Further adding to Mobile screen sizes, Tablets started to emerge too making it little wider to cover when designing web sites for multi-platforms and multi-devices.
Finally, a new concept was egressed called “Responsive Web Design” that is otherwise conceptually called as “Mobile First” and “Device Aware” designing.
RWD came into limelight and was at its peak time in the year 2013 wherein Mashable, counted the year as “Year of Responsive Web Design”.
RWD cut shorts the need of a separate mobile application if the info is not so “Resource oriented”. Also, there is no need of separate style sheets that gets clumsier when dealing with multi-screen sizes and devices.
This article features such concept with available frameworks, its features and USP’s as per my favouritism.
Leading the list will be from last to first!
- Less Framework
Less Framework is a modern front-end framework for building responsive designs. Similar to Skeleton (discussed above), Less Framework focuses on being just a plain and simple layout grid framework.
- Montage HTML5 Framework
- HTML Kick start
- HTML 5 Boilerplate
It has 4 pre-built layouts: Default, Tablet, Mobile and Wide Mobile.
Zebra is a rich UI open source framework that leverages HTML5 canvas as the backbone of its rendering abilities.
Zebra says that using it "isn’t rocket science" and that you can get started in 5 minutes.
SproutCore is a front-end framework for building HTML5 apps rapidly.
It follows the MVC architecture pattern and promises its users the ability to craft native-like user experiences for the Web.
Montage also has a feature called Blueprints for associatively binding metadata onto your app objects — a pretty nifty function for dealing with lots of dynamic page elements.
At about 300KB, HTML KickStart packs quite a punch: UI components like stylish buttons and navigation bars, scalable icons (using Font Awesome), a responsive grid layout, a touch-enabled slideshow component and so on.
Skeleton is a simple and clean responsive CSS boilerplate for HTML5 websites and apps. It’s got just the things you need and nothing more.
Some notable features: a responsive layout grid, standard media queries for your device-specific CSS style properties, a CSS class for responsive image elements that scale with the layout grid, a PSD template for mocking up your web designs, and an HTML5 shiv for old web browsers.
If you want to get started with responsive design quickly, you should look into this open source project.
In 2010, HTML5 Boilerplate became one of the first, and subsequently, most popular open source front-end web development tools for getting HTML5 websites and web apps up and running in no time. It’s a compilation web development solution that enables our sites to support modern web browsers.
Included in HTML5 Boilerplate is a mobile-friendly HTML template, placeholder icons, CSS resets for normalizing/standardizing your style sheet property values, standard media queries for popular viewing screens, an HTML5 shiv for non-modern web browsers, and more.
Built at Twitter, Bootstrap is a popular, modern front-end/UI development framework. It’s feature-packed and will have most of the things you’ll need for developing responsive sites and apps.
Bootstrap has a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more.
Bootstrap is well-documented, and this open source project has plenty of coverage in blogs and tutorial sites.
Gumby uses a flexible, customizable, 960px wide grid, a width chosen by many web designers. It also uses SASS, aka Syntactically Awesome Style Sheets, an extension of CSS3 that adds nested rules, variables, mix-in’s, selector inheritance, and more. Finally, Gumby is perfect to create clutter-free responsive site, no unnecessary style sheet on the tablet version of your site is the USP that I see in them.
Finally the winner as per my judgement is,
My personal favourite and weapon of choice goes to Foundation RWD Framework!
Having hands on experience with Foundation, it was relatively easier to create a simple looking but powerful websites in least time given.
It provides a great, flexible grid that can easily be nested. It also focuses on mobile and lets you build sites that are mobile first, then add the stuff for other versions, making the mobile version really optimized and un-cluttered. It also works very well for rapid prototyping, making it a useful tool for more than just designing your site.
Foundation is by ZURB, a company of product designers focused on providing web-based solutions.
Although, I personally vote for Foundation, my company has used Bootstrap ranked at #3 foreseeing our requirements as such. Summing all up, the conclusion is highly subjective to the individual or the team getting to use RWD Framework. However, it is best suggested that opting for RWD is probably the only way to survive in the confusing world of screen sizes!
Have an appie time! J