hello...

i want to know more about responsive website.

can anyone please explain how to build Responsive website??

Try this out first: http://en.wikipedia.org/wiki/Responsive_web_design

thank you so much

No offence Pipe, but linking to a Wikipedia article (especially one as complicated looking yet useless as that) won't particularly help.

 

here's a quote of a post I wrote a while ago, hopefully it can serve as a small guide..

 

 

You make your HTML however you please, but in your CSS file you create what is called a media query

Example:

@media (max-width:1000px) {
whatever css for browsers under 1000px width
}

@media (min-width:250px) and (max-width:750px) {
whatever css for browsers between 250px and 750px
}
 

 

The "@media (max-width:1000px)" tells a browser that this only applies if the window is smaller than 1000px wide.

Wheras "@media (min-width:250px) and (max-width:750px)" is slightly more complicated until you actually think on it, all this does is applies whatever styling is within it, but only if the window is between 250px and 750px.

 

So by setting up css like this you can completely change a websites look dynamically.

 

 

Or if you prefer to only load a particular css file then you can do what I've quoted below.

 

 

or if you prefer to only load a small css file depending on the width then you could put the following into your HTML file -

Example:

<link rel="stylesheet" media="screen and (max-width: 699px)" href="small.css" />

<link rel="stylesheet" media="screen and (min-width: 700px)" href="large.css" />
 

Edited January 20, 201412 yr by SeikoShadow

No offence Pipe, but linking to a Wikipedia article (especially one as complicated looking yet useless as that) won't particularly help.

 

I'd prefer not to duplicate content which is explained 1000x elsewhere. For such an open and wide ranging question not asking for specifics, I believe it was a more appropriate response and was thanked.

Fair point, I just don't see the value in linking to that wikipedia article in particular, because reading it myself I can't see much of any value. A tutorial on responsive design may have been more practical. But either way that is just my opinion it could be that it helps him a lot more than my post

As SeikoShadow explained, the idea is so simple. But as a beginner it's better to use a framewok like Twitter Bootstrap.

i am thankful to all of you for your replies.

Edited January 20, 201412 yr by amincharoliya

Any time aminch, theirs always plenty of people here to help

really great place.

Read this over a cuppa http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

I learnt RWD using a framework, but my advice which is the same advice i was given when i started to learn about RWD was to use a lightweight framework which has all the media queries but lets you do all the other CSS styling yourself and one i recommend is Skeleton.

 

I find frameworks like Bootstrap and Foundation way to big for the purpose as I like to style a website in my own style and not use styling which is used by everyone using a particular framework.

I recommend checking out bootstrap 3 tutorials. Very easy to learn and simple to use:) Just google it.

thanks for advices..

Thanks for sharing that informationregarding responsive websites. wiki is good responsive website.

use the bootstrap framework it makes developing responsive websites really easy

how can use this bootstrap...i have no idea..

I use Bootstrap 3, but it's heavily modified with almost all of the visual styling removed, enhanced grid system, what has been kept are the resets, original aspects of the grid and some of the better JavaScript functions such as models and carousel. With the modifications the framework suits my needs perfectly. Frameworks that are too stripped out slow down my development time.

 

I think it's important when starting out to avoid a framework alltogether and learn how to code responsive grids yourself and gain a deeper understanding of the fundamentals (fundamentals of CSS and HTML as a whole) Then you can use a framework to speed up the development process and modify it where needed. Learn to walk before you attempt to run

i have no idea about bootstrap..

can you help me please??

i have no idea about bootstrap..

can you help me please??

 

You can check out their website for more information

Like I said, if you don't fully understand HTML and CSS why are you trying to learn a complex framework like Bootstrap? Learn the fundamentals. A framework is designed to speed up the process of development, if you don't understand the underlying principles you will run into problems quickly when trying to use a framework (Especially if you plan to modify the styling)