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.

In my experience, responsive design works best when you choose a minimum page width you will support, say 480 px. This is because trying to support smaller hand-held devices as well as full-size screens involves too much compromise. Also I use media-specific style sheets rather than media queries. I find them easier. And remember: IE8 and below ignore media specific code. So, on the assumption that IE8 and below are only found on PCs, I set up media-specific style sheets as folllows:
- style.css (the default) assumes a larger screen size, say, 640+ px wide, and ignores hand-held and printer-specific classes.
- handheld.css assumes smaller screens, say 480 px to 639 px wide.
- printer.css assumes that the output is intended for printing only.

<rant>
I access the web often through my Android smart phone and get completely cheesed off with developers who enforce a mobile site on me when my web browser is more than capable of showing and using a standard web page.

So can which ever retard thinks its OK to force a user in to a web page that does not suit my purpose please stop preaching that mobile devices should be forced in to viewing something that resembles a page of buttons with the occasional image please?

Give viewers BOTH options and set a cookie and if a cookie can't be set, a session cookie so that the visitor can appreciate the web as THEY WOULD LIKE TO SEE IT.
</rant>

... because web developers don't always know whats best.

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...

So can which ever retard thinks its OK to force a user in to a web page that does not suit my purpose please stop preaching that mobile devices should be forced in to viewing something that resembles a page of buttons with the occasional image please?

Give viewers BOTH options and set a cookie and if a cookie can't be set, a session cookie so that the visitor can appreciate the web as THEY WOULD LIKE TO SEE IT.
</rant>

... because web developers don't always know whats best.

I agree that developers should not default to a mobile-specific sub-site just because the device is classed as "handheld". Mobile-specific sites are only really needed for devices with display widths below 480px. Above that, mobiles are perfectly capable of displaying responsive web pages.

However, I would suggest that, rather than offering the user a choice, the distinction should be based on display width, not whether it is a mobile device.

First of all you need to make the right choice between the implementation of responsive, dynamic or mobile URL. These types of mobile website are suitable for different needs. For example, if you require major differences between desktop and mobile versions of the website (for example, completely different content), a mobile URL is a good choice. Responsive design is not the best solution for heavy content, such as video - it can slow down the website. If you need to deliver only a part of the desktop content, dynamic webpage is what you need.

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design , check out the below code which may help you.

Step 1. Meta Tag (view demo):
Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

Step 2. HTML Structure:
In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.

Step 3. Media Queries:
CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.

The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.

You can write as many media query as you like. I've only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.

I highly recommend using both Javascript to test the device, and also css media queries. This way you will be sure that your responsive design will be optimized for different screen resolutions and devices also.
I am using WordPress, and I was building pegsweb.com, I had a big problem on tablets because I was using css media queries only. I resorted to Javascript & css and these issues are gone completely.

The best things you can do if you are totally new to responsive design are

1. Check out Bootstrap at http://getbootstrap.com. This is a great tool to help you get started quickly.
2. If you want to go deeper, go to http://lynda.com and pay the $25 to get access to all of their great courses.