If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.

There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.

Hi rtrethewey,

Thanks for your reply,

i dont care about on IE ,

As you said,

"you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones"

You don't need separate settings for each width and height. You can have your default styles for desktops and laptops, then add a media query for smartphones (320px width). And if you think it's best, you can have another media query for tablets with a lower resolution than most desktops.

The key point is designing the page with a flexible layout so that you can adjust to different screen sizes without losing any functionality (or, hopefully, without losing visual appeal). My advice is to experiment with some simple pages to learn the basics of responsive design before you try to make a real website. Once you get some experience with how everything works, it will be much easier to create a page you'll like.

masterwin, there is cool website http://quirktools.com/screenfly/ for testing your website on different resolutions. There are some popular devices to choose, you can also set screen size manually.

Are media queries necessary for RWD? If you have website with very simple layout it's possible to make your page "responsive" without using media queries. If you use floats, if you won't use big static value for widths (like standard 960px, 1008px and so on), if you carefully set fonts sizes (with proper %) you will manage to create responsive website without using media queries but having all functionality and visual appeal. But it will work only for simple layouts. If you have more complicated website, with many different navigations, sidebars, widgets, and so on, than media queries will be very usefull, because you will need a tool for getting the size of the screen used by user for browsing your website.

But screen resolution in only one side of Responsive Web Design. There is also problem with support for css3, html5 and other techniques in mobile browsers. Not all features are supported in all browsers. There are same websites where you can check what features are supported by the most popular browsers. I use http://caniuse.com/. There are compatibility tables for support of HTML5, CSS3, JS, SVG and other stuff in desktop and mobile browsers.

1. It is not feasible, or necessary, to support ALL devices capable of accessing the web. The minimum screen width you really need to consider is 320px, and even that is becoming less important. Choosing a minimum width of, say, 480px makes it far easier to build a site that will look good on the vast majority of displays.

XHTML? Transitional? Why? I don't want to make a flame but why don't you use html5 or at least html4 (strict, not transitional)?

You have 'css/style.css' so why do you use 'presentation elements' in your html? Don't use 'align="...", 'color="..." etc. HTML represents the 'structure' of your website, css is responsible for 'presentation'. They should be separated. Text alignment, font color should be placed in css.

You have a couple of 'img' elements. They play 'presentation' role in your website. They also should be placed in css as a 'background-image'.

You don't need 'container div' because its css attributes can be applied to 'body' tag.

There are some tricks for making div centered. For example you can change

You have quite simple website. One element below the other. You have to play with font sizes and 'centering' elements horizontally (but not 'align="center"'!) and it will look nce and responsive. Try to not use xhtml, html is 'better' for 'standarised/patternised' coding.