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.

http://colly.com/
http://seesparkbox.com/
http://www.bostonglobe.com/
http://staffanstorp.se/
http://www.movembermike.com/

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.

Website : http://getskeleton.com/
Demo : http://getskeleton.com/#grid

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.

Website : http://designlunatic.com/projects/blucss/
Demo : http://designlunatic.com/projects/blucss/demo.html

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.

Website & demo :http://twitter.github.com/bootstrap/

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

Image upload using JQuery + Uploadify + ASP.Net Custom Handler

Image
Recently, I worked on a small POC to upload image files to web server and without a visible postback. There are many solutions to upload a file to server and among many of them, one of the interesting solution is to use a jquery plugin called Uploadify . Well, the advantages of Uploadify are You can upload one or more files  It is a Jquery implementation. Works on multiple browsers. Many options to try (Set file size limit, File type filter, Callback after upload etc) You can bend it based on  your needs. Look and feel is customizable.
Read more

Generating reports with Templater, MS Word & C#

Image
Whenever developers think of report design or development, they actually think of SSRS or other report designers/engines. But many times it happens like just for the sake of few basic reports, customers will not be ready to buy those expensive reporting tools and also it is obvious that using such tools are meaningless for a small requirement. You can create reports with MS Word and MS Excel easily, it was not so easy to push data into it programmatically. In this post, let us look into a small reporting library known as " Templater " to push data into reports. Well ,
Read more

Creating a cool Microsoft Word Report for listing Scientists with Templater and C# Generic List

Image
Some time back, I had written a post on Templater Library for creating a simple "Prize Winner Notification" e-mailer template using MS Word & Templater. It was a simple one. If you have not read it yet, please have a look at this Post . In this post, let us create a Microsoft Word Report which lists few great scientists across the world. Also, let us see how the Templater supports Generic List as a data source for the report.
Read more