Responsive Web Design

Your company asked you to develop a website for their product. You began the coding, wrote necessary CSS, HTML, Javascript and finally finished the website. The company liked it very much and asked you to build a smartphone version of the website as well. You modified your code accordingly and that’s it. But hey, wait a sceond! Will you again modify the code if asked for a tablet version? If you are smart enough, you would never do that! You would like to follow this approach: “Code once, run any where”

Now, what the hack is responsive web design?

ImageAs a developer, you need to keep in mind all the possible screen sizes and orientations. Visitors can come to your website through their laptops, smartphones , tablets etc. Responsive web design approach allows you to create a website with optimal screening experience. In more simple terms, you are not coding for a fixed width design. The layout adjusts itself according to the browser’s width.

In nutshell:

One site for every screen!!

Now let’s look at some of the tools that make it easy to develop a responsive site. The ordering is random.

Twitter Bootstrap:

Image

I personally use it. Easy to use, easy to customize and what not! Very beneficial for those who don’t know much CSS. Built by twitter developers, its really fun to use.

Foundation:

Image

This fron-end web framework was built by a design company ZURB. It provides a flexible layout and its core element are reliable in almost all browsers.

The Responsinator:

ImageIts not a framework, but a tester. It allows you to quickly get an idea about how your site will look on some most popular devices. It does not exactly replicate, so its always safe to test on real devices.

HTML5 Boilerplate:

ImageThis is used by many companies and people (the list can be seen on the website), although there are not much examples.

These were few tools to give you some basic idea, there are many others for test purposes.

2013 is the year of responsive websites, make sure you have one!!

Advertisements
Tagged with: , ,
Posted in Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

In Archive
%d bloggers like this: