This is the challenge. Some badly configured systems send me to mobile (small screen smartphone) when i'm on a 10-inch tablet. Worse still, often, it's a mobile site with cut down content. There really is no need for that. The 11-inch laptop, and large screen desktop is served an entirely different resolution, and often the full site.

I'm interested in this topic, too.

Putting in the all singing and dancing content which can create visitor confidence can be impossible if it has to be eventually scaled for a two inch screen, or even less.

I agree. Especially with features-rich websites. Some websites can be made responsive quite easy. But if a website is features-rich, you have to compromise and I found that in these cases desktop has version loses some of things it had.

I am looking into dynamic content serving depending on user agent, in which case I would give tablet to show desktop version, just with a bit lighter images (not really issue for a tablet over WiFi, but needed if the tablet has cellular capabilities).

Mobile would have its own lighter version of the content.

The biggest challenge is recognising user-agent and getting it right. There are services that do it for you, you call the service passing on UA string and they return response on whether this is mobile, tablet or desktop, but even they get it wrong. Alternatively, you need to keep the list yourself and hope you got it right.
I wish that they standardise a part of the UA string to identify Mobile/Tablet/Other, this would make it so much easier.

I am looking into dynamic content serving depending on user agent

I think you need to serve content based on screen size not user agent. For example an old netbook has a smaller screen size than a new tablet. There more and more devices on the market with different screen sizes, it is hard to catch up and to handle of of them.

I think you need to serve content based on screen size not user agent.

Agreed. I base all my response designs on screen size, not device. I use CSS to adjust the images appropriately. True this method does not reduce bandwidth, but the user gets a website that is optimized for their screen.

I should add that basing it on the UA is not accurate merely for the fact the device could be viewed either portrait or landscape. This is where a responsive design based on screen or device with, coupled with orientation, comes in most useful.

Marshall

Google wants us all to offer the best multi-device sites that we can, they offer a complete suite of easy to follow "How To" articles with tools and resources to help us understand the devices and the solutions we have to choose from. This stuff is better to know before major changes, they do make it easier now than it was 6 months ago - start here: [developers.google.com...]

I think that one way of improving responsive design would be a system which could replace images, depending on screen size. I know we can do it by having a background image plus display:none but this is not ideal, it still gives a performance hit when both the main image and background are loaded for large screens and it only gives a single change. Does anyone know of a way of doing this with css?

I am assuming you are not familiar with @media, so if you are referring to a page background image, you can call different images based on

@media screen and (max-width: 479px) {
APPROPRIATE CSS HERE
}

Of course you can adjust the screen width to your preference or use multiple screen widths.

Marshall

@superclown2 -There is a system, a free php tool to install on your site to do just what you described. I got it to try out from the links I have posted, it is one of the resources offered. I haven't tried it yet, it is for one specific site where they want high res photos available.

Some badly configured systems send me to mobile (small screen smartphone) when i'm on a 10-inch tablet. Worse still, often, it's a mobile site with cut down content. There really is no need for that.

Agreed. This is a usability issue.

1) If a given site has multiple versions (rather than being, say, RWD from 2400px width and over all the way down to 320px width) it shouldn't really be the server deciding which version to display - that decision is for the user.

2) Two different addresses (eg. www. & m.) will allow the user to type into the browser explicitly which version of the page they wish to see displayed.

3) For users who arrive via a link, if the server guesses that the version the browser is pointing at may not be the best-optimised version for the user's device and / or screen-size, then the server can pop up a console with a recommended suggestion to switch to the other version but still let the user decide if they want to or not.

4) To avoid repeatedly hassling the user with the same console asking "Would you prefer to see the small-screen optimised version of this page?" every time they click through a check-box along the lines of "Remember my choice / Don't ask me again" will prevent the console popping up on every visit.

5) A link on every page in the footer or header, allowing the user to switch backwards and forwards between the small-screen optimised version of the page and the standard desktop version of the page keeps the user in control even after they have made indicated their decision via the console (or allows the user an override, if the console never popped up in the first place).

As stated above, if you have a comprehensive RWD in place, there won't be different versions of the page and none of the steps above will be necessary.

I am assuming you are not familiar with @media, so if you are referring to a page background image, you can call different images based on

@media screen and (max-width: 479px) {
APPROPRIATE CSS HERE
}

Sure, I'm using @media with a minimum width of 1000px to display a full background image in the body - looks great on a desktop and doesn't load on anything smaller but with the divs I use a main image with another smaller image in the background and use @media display:none to show just the smaller background image on mobiles. It isn't at all ideal though because both images load on larger screen widths even though the background one is not visible. What would be really useful would be some way of substituting images within a div and I'm still scratching my head over that.

If a given site has multiple versions (rather than being, say, RWD from 2400px width and over all the way down to 320px width) it shouldn't really be the server deciding which version to display - that decision is for the user.

The problem I'm having is that mobile devices report higher screen resolutions than are appropriate. For example, the iPhone 6 reports a resolution of 750px wide. On a desktop, 750px wide is very usable, but due to the pixel size on a mobile, I'd like to serve the mobile CSS to the iPhone. How do I do that?

We are used to dealing with hardware pixels and mobile devices use a different type of measurement called "css pixels". I have links above that explain the difference and how to deal with those differences. Mobile devices need to read a viewport setting in the head of your page to know how they should resize things.

I'd like to serve the mobile CSS to the iPhone.

There is a straightforward solution to this, as not2easy states.

Try:

<meta name="viewport" content="initial-scale=1.0 />

in the header.

And then something like:

@media only screen
and (min-device-width : 320px) {
/* iPhone Styles Here */
}

in your CSS.

The more the website can able to adapt to any platform available, the better. Individuals have their own personal preference whether they want to use the desktop, their mobile phones or even their tablets. It's up for the companies to adjust with whatever technology that we have nowadays.

Hi There,

For responsive design go with bootstrap framework. its just awesome.

Thanks,
TechBuddy

Bootstrap and Zurb Foundation are both great and you can build them as custom packages to make them less bloated.

As someone mentioned above, though, you still have the bandwidth issue. In fact, a responsive site is going to tend to be heavier than non-responsive because at a minimum your CSS is going to get heavier.

There is some nice progress on image handling with srcset and picture.

Aside from images, though, it's still hard to serve a light version to mobile and a heavy version to desktop.

Bandwidth is a concern for me regardless of device. I live in a rural area with no cell service (let alone 3G or 4G) and no "over the wire" internet (satellite only), so I'm frequently on a very slow (under 1Mbps), high-latency (1-sec ping times) connection with data transfer quotas (10GB/month for the highest level plan I can buy, $16 for each additional 2GB "token").

I wish there was a standard for sensing bandwidth similar to the srcset that could work generally. Amazon has figured it out for streaming video, but it takes a lot of communication.

Anyway, all that to say that detecting screen size does not tell you how much you can throw down the pipe and both of those would be nice to be able to control.

Actually...

there is HiSRC which does sense bandwidth. It's not an in-browser solution like srcset, picture and @media queries

[github.com...]

And Chris Coyier has a nice Q&A rundown on choosing a responsive image solution
[css-tricks.com...]

That article is quite old - it's from 2012 which makes it about 40 years old in responsive years* but has some interesting observations

-------

*For non-English speakers, "dog years" refers to each year being equivalent to about seven "human years" because dogs live only about 1/7 as long as humans (roughly). Since "responsive" really dates from 2010 and we're in 2014, that makes an article from 2012 about "40 years old in responsive years" ;-)