creating responsive site

i want to know how to create responsive webtemplate . i dont know anything about responsive .how they working? how use javascripts for that? how to give correct width and height? i know to make template in css and html please some one help me

 

The first thing you need to do is learn how to use media queries. Then you need to get more specific about you are trying to build. There are many approaches to developing responsive websites, and the right approach depends on requirements, content, audience, and device support mix.
You can get a start on learning media queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

 

checkout the Bootstrap (http://getbootstrap.com) responsive javascript framework. I think it's the best to make the responsive site very easy to use as well.

 

I learned HTML , CSS from w3schools. So is there any site that help me to make responsive site?

 

basicaly you need to lean how to make your css responsive means some values in css which whne applied will result in a responsive layout

 

If you Google responsive design tutorial you should get several million hits. There are as many opinions on how to do it as there are developers trying to sell their own template, plugins, and other junk. If you are only at the level of W3schools you might want to step it up to a more challenging level if you are serious about doing real development that is responsive and stable across platforms. I gave you the mozdev link because you need to come up to at lest that technical level of understanding, or you are not going to be able to sort out the junk from the good stuff as you advance.

 

if you now css, then will be such a headache.
for instance, make a news css file named responsive.css where you will style the layout depending on resolution size

(example for tablet portrait)

 @media only screen and (min-width: 768px) and (max-width: 959px) {

.myclass { width: 50%; }

}

Code (markup):

check and this link : https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices for more resolutions.

then check your design on websites like http://www.responsinator.com

you can use and firefox plugins for that.

 

#1 - bootstrap
#2 - jquery mobile (for mobile websites)

 

Learn

Html / Css (div based)
Learn about media query (start without bootstrap first )
Do small designs
then Learn about bootstrap
check how bootstrap css library is beneficial.

for more skype me: dev.srs

Pleasure to help you.

 

I am thinking you have knowledge of HTML, Javascript and CSS.

There are two main ways to make responsive desirgn easily.

1. Use media query in CSS - there are some settings for different height and width.
2. Use any framework ( in this case you need to use that framework default classes, I'm using boostrap framework)

For rest of the work search on google "Responsive design guide" and you will get useful information, some videos are also available on you tube.

All the best!!

 

you can visit LessFramework4 site to know responsive design..

 

Start with "media queries" first. Just to scratch the surface. Then take a course of Bootstrap 3 and it's grid system.

 

I'll agree with using Bootstrap. Our web developers just recently implemented it on our company website and it has performed pretty well. There were a couple of bugs related to image placement, but they've since been ironed out. I hope to add a few more interactive elements in the future, but my concern right now is speed. I've been working with the developers to cut down on loading time, so if anyone has suggestions, it'd be greatly appreciated.

 

... and again, minus 9,999,999,999,999,999 for bootstrap. That bloated, halfwit idiotic dumbass steaming pile of bloated worm-ridden MANURE craps on EVERY website people sleaze out with it. Welcome to five to ten times the markup and ten to twenty times the CSS necessary before you even start plugging in your content!

Developers are dumber and sites slower loading and less useful to users thanks to that train wreck of ineptitude even existing.

Take your content (or a reasonable facsimile), mark it up semantically practicing separation of presentation from content. Then make your base screen layout by bending the markup to your will with CSS to create a mid-size desktop resolution elastic semi-fluid layout (for non-media query legacy browsers). Then you make it progressive by using media queries to create all your other (screen) layouts based off that base by adding/removing columns, adjusting font sizes and element placement and so forth. (which typically shouldn't take more than two dozen lines of code).

... and depending on the site it might not hurt to make a "print" layout too.

You can find an explanation of this in this thread:
How to make responsive design and what is difference between simple design and responsive design?

ANYTHING else is halfwit ignorant bull -- again, see the train wreck of ineptitude known as Bootstrap. I pity anyone DUMB ENOUGH to use it since they'll end up with half a megabyte of crap in dozens of files doing tens of K's of code and single digit file-count's job.

Oh and @Brian Mell, you want speed? STOP using bootstrap, STOP using HTML 5, and (this is a wild guess) STOP pissing all over the page with javascript for nothing (like the other fat bloated idiotic train wreck of ineptitude known as jQuery).

Lemme guess... 60k of markup for 2k of plaintext and a half dozen content images? 200k of CSS? half a megabyte or MORE of "javascript for nothing"? It's a wild guess, but probably accurate... :/

 

There is one advantage to bootstrap... It means lots of questions to answer; fixes to do; workarouds to find; and lots of practice digging through crap to replace 4 pounds of code with the 3 lines actually need to do the job. So perhaps we should encourage the use of junk to insure a steady flow of novices ready to be educated and rescued from the dark-side.

 

@deathshadow Thanks for the input and course correction for future development.

 

For responsive websites you can use media queries or simple use css framework "bootstarp"

 

My favourite responsive framework:

Gumby
Bootstrap
Skeleton
Foundation

 

Never heard of that one, let's see how it holds up and if it's the same halfwit idiotic dumbass ignorant bullshit as the other three you listed.

Website: inaccessible trash bloated with pointless scripttard and PSD jockey trash. minus 50 points.
Download Link: buried at bottom of page, minus 50 points
Library size: 169k, minus 150 points
Demo analysis:
-- HTML 5 bloat: minus 10 points
-- Stupid malfing idiotic "IE CC around HTML tag" crap by paul Irish, minus 10 points
-- Presentational use of classes: minus 100 points
-- Grids: minus 100 points
-- Pixel metric widths: minus 100 points
-- Scripting reliant on a fat bloated idiotic halfwit library like jQuery: minus 100 points

so negative 670 points. Just another garbage halfwit train wreck of how not to build a website like every other so called HTML/CSS "framework" -- and why to me the term framework now has a negative connotation.

SERIOUSLY, how the {string of expletives omitted} is ANYONE competent enough to even attempt build a website DUMB ENOUGH to see ANYTHING remotely resembling merit in these steaming piles of manure that are the antithesis of acessible design, or even the reason HTML and CSS exist in the first place?!?

169k before you even start plugging in content... that's a serious "yeah buddy, well **** you!" That is more than two times the size I'd allow for a sites ENTIRE template's HTML+CSS+SCRIPTS+IMAGES (not counting content)!!!

 

I've used all of them, each have their advantages / disadvantages and you don't have to use the ENTIRE library of components.

but hey, if you don't like it just build your own!