Responsive Web Design & Frameworks : Kick Start your brain


If you are still designing/developing websites which just works on PC's & Laptops, it's time to upgrade yourself. Remove that old brain. Wash it and replace it back with a new battery called "sense".

Do you think your users only use desktops to browse your webpages?


No. Not at all. People use mobile phones, small notebooks, tablet devices such as iPad or even Playbooks to access the web & apps you develop.

If you are still busy creating the traditional fixed width webpages, the output of them on the devices would be cluttered pages, unwanted scroll-bars, missing Ratio & Proportions in the Size of images & text would be causing a big imbalance and thus creating frustration among the users.  Take some time. Just browse your webpage on a Mobile phone and see how it looks.

Now, if you are really serious about designing and developing web pages that are usable across devices and platforms, start learning the art of Responsive Design.

Responsive design is all about the adaptive design principles which helps your web pages adjust their size to fit in all the display resolutions and the devices. Flexible images & content are the keys for a responsive design. First, open these webpages and resize your browser window back and forth & observe what happens when you do that.


Did you observe that, even the images change their size based on your screen size, there is no clipping of text, images, cluttered blocks of text or unnecessary scrollbars that make you feel bad? Instead it had a mechanism for folding the columns as and when you reduce the screen size, had elastic gutters to make your pages expandable and to look simple and readable even on different resolutions.

And Now. try doing the same for some other webpages which doesn’t have the responsive design thinking in them. You feel shame on what you have done really. Common Sense & A good framework are two important things which can make your webpages responsive. However, when you want to know the basics, two things you need to be aware of are CSS3 Media Queries and a CSS Grid System.

OK. Now, if you argue that you really don't have time to learn complicated HTML, CSS and all. Just learn and use any of the frameworks mentioned below. 

Skeleton
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.


BluCss
BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you're working on your next project, you don't have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.


Adapt.js
Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Website & Demo : http://adapt.960.gs/

Less Framework 4
Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Website & Demo : http://lessframework.com/

Twitter Bootstrap (Yes, this is from the twitter development team)
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.


Among all the above frameworks, I personally like twitter bootstrap. Because it can be used by people with all skill levels, Built for and by nerds, It has a 12-column grid, Cross-everything and the very important thing is that it is made in twitter! and is growing. Here are some great examples of pages done using the  Twitter Bootstrap http://twitter.github.com/bootstrap/examples.html 

Twitter bootstrap offers three kind of free templates for everyone to download and start using that as the starting point for creating a responsive webpage.

If you have some time, you can look into the nUit, Tiny Fluid Grid, Respond & Zurb Foundation frameworks for responsive design. 

You can follow me on twitter @msguytweets and Subsribe to the feeds http://feeds.feedburner.com/MsGuyblog . Happy Reading :)


Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Real time Push Notifications with SignalR & PNotify (Pines Notify)

What's new and expected in .NET Framework 4.5