[RESOLVED]How to make existing web site responsive

our company has a web site which is not responsive in design. so i like to know is there any easy way out like adding any css files or calling any js file which will make our web site responsive in design. i want to achieve the responsiveness giving little
effort for our web site. our company web site link is
. looking for many suggestion and good write up. thanks

A good first step is to use Bootstrap.  It is built to be responsive, so it’ll get going sooner than later.


use fiddler to check the responses. check byte size and amount of requests. make things asynchronous. download yslow. once you know its not the client side, then dig into the server side code… and down the rabbit hole you go!

thanks for reply but if i use boostrap then i need to again restructure the whole css and UI which i do not want to do rather i want to include something which will make my web site responsive on the fly and does all things automatically which is required
to make a site responsive. any idea?

Generally you can not do what you want. There is no generic solution for non responsive pages.

Even using a responsive framework like bootstrap, requires multiple designs, it just allows the use of one page. How easily you can convert your CSS to responsive will depend on your current layout, and what you want to happen when the page gets smaller.

But basically you need to learn how media queries are used to change CSS. Decide your device breakpoint sizes, then with media queries, adjust your CSS for each breakpoint. If you used CSS best practices it should be possible.

Note, it you used inline style, you will need to start over, or use javascript to get responsive.

There is no magic involved with this.  To accommodate "Responsive Web Design", you will need to redesign and rework your web site to accommodate these concepts/fea.

As for "responsive on the fly", that’s exactly what Bootstrap does when implemented. It provides an ready-to-run responsive CSS, but, yes, you will need to restructure your CSS to accommodate.

Regardless, you will likely have to rework your CSS anyway.  Any "quick-and-dirty" solution will likely lead to more problems in maintaining your website.

thanks for your reply. this is not clear u said "Note, it you used inline style, you will need to start over, or use javascript to get responsive."

how we can use javascript to get responsive design ?

regarding responsive design related with media query please redirect me to few right article from where i can acquire the knowledge. thanks

In general, by implementing responsive design, you are making your website responsive to the needs of your users on any client device (desktop, laptop, tablet, phone, etc.).  To achieve some of your goals, you will need to replace some of your features in
the DOM and to do so, you will need JavaScript to make this happen.  For example, let’s say you have a menu.  On "regular" devices (desktops, etc.), you may use a style to make your menu look like buttons.  As the width gets smaller as you move to small devices,
you could use a CSS media query to change the style to look like hyperlinks to save space.  Finally, you get down to the smart phone, portrait orientation, and you need to do some more with the menu.  The likely candidate would be to use something like a jQuery
Mobile menu widget that replaces your "regular" menu, which you would hide using CSS.

Here are some examples of RWD: http://designmodo.com/responsive-design-examples

Here’s an MSDN Magazine article on RWD (a little dated, but still relevant with respect to concepts): http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

Responsive design means the layout is changed to match the device/page size. You use either media queries to change the CSS, or with javascript relay out the page based on size. You can attach to window resize event to know when. If you did not use responsive
design from the first you will probably need to use both options.

Leave a Reply