First of all, I don't really think people have any greater motivation "to upgrade Windows/Mac versions": Here are the usage share of web client operating systems (August 2010): Windows XP (48.32%), Windows 7 (19.81%), Windows Vista (18.43%), Mac OS X (6.42%), iOS (iPhone) (1.40%), Linux (1.34%). So nearly 50% are using an outdated OS (XP).
By contrast, here are the usage share statistics for browsers: Overall- IE (31.1 %), FF (45.1%), Chrome (17.3%), Safari (3.7%), Opera (2.2%). Breaking down IE by version- IE9 (0.2%), IE8 (17.3%), IE 7 (8.0 %), IE6 (5.6%). And for Firefox- FF4 (0.8%), FF3.6 (35.3%), FF3.5 (5.6%), FF3.0 (2.9%). So over 50% use the latest stable (or beta) versions of these browsers.
As for your other question--"How can you tell your end users that they will need to upgrade their browser to use the latest version of your website without a huge outcry?"--you must understand (i) the factors motivating people to upgrade, and (ii) the factors inhibiting people from upgrading; then you must use these factors to bolster your appeal to your end-users.
Motivators
What rewards do end-users get by upgrading? Skimming Microsoft's IE8 marketing materials, these are the motivators they stressed most:
- Appeals to Efficiency/Laziness:
- Faster surfing (i.e., you will gain more free-time if you switch)
- You can accomplish more work with fewer clicks, because of a more intuitive design. IE7 had put certain buttons in strange places, etc. (I.e., you will lose less effort [as measured in clicks] if you upgrade).
- Appeals to Security/Fear:
- SmartScreen protects you from malicious software (i.e., you will lose safety if you don't upgrade).
- Compatibility View allows you to view older pages correctly just as the website’s designers intended (i.e., you won't lose anything if you upgrade).
So motivators boil down to what the end-user will gain by upgrading (or lose if they don't upgrade). These things must be important to the end-user: Time, effort, financial security, compatibility, etc.
Reinforcers
Reinforcers aren't rewards, but they help increase the rate of adopting the desired behavior. Here's an example: Your web site can detect old versions of browsers, and direct users to download and install the latest versions by providing links and motivators.
Inhibitors
- Nuisance (cost in terms of time and effort) to upgrade
- Nuisance of learning something new
- New versions are inevitably buggy and suffer from incompatibilities that haven't yet been discovered
You must anticipate these arguments, and develop effective counter-arguments:
- There is a risk/reward trade-off, and the rewards outweigh these risks.
- New versions of browsers are fully supported, and bugs will be worked out. By contrast, older versions aren't well supported; and the oldest version have lost support entirely.
I would follow your first impulse and go responsive - I feel that when implemented properly it makes for a better user experience. Use a responsive CSS library and some javascript MVC frameworks/templating libraries to do your heavy lifting on the client side.
Addressing your concerns:
Low Quality Code from Handling Disparate Prototypes
I think using battle tested JS and CSS libraries and best practices should help you here. Think along the lines of backbone, knockout or angular to provide your clientside code with structure.
Sending Unneeded Code Files to Mobile Devices
I don't think this will that big an issue. Build out mobile functionality first and go from there. This will ensure you get the core functionality created and allow you to build out to the bigger devices from there. Use only the bare necessities to keep things light. If you use templating engines you can reduce the amount of HTML you're sending over the wire. Combine and minify JS and CSS files on the server side to minimize what you're sending to the mobile devices.
Wasting CSS when Hiding HTML Elements
Use a templating engine. These can either be built into the clientside MVC frameworks or separate (Mustache, Handlebars). This will prevent you from sending over too much extra HTML. Additionally, you can lazy load certain sections if that floats your boat.
Conclusion
A well thought out Responsive Web Design should be capable of either avoiding or minimizing each of the issues. A lot of work has been done in the open source community to help negate those problems. I would highly suggest searching out those solutions and seeing if they are helpful with your project.
Its your team's decision in the end, but make sure you consider the vast number of libraries and elect for the best user experience your team can support within the non-functional requirements (timeline, cost, staff knowledge) of your project.
Popular Libraries
JS MVC: backbone + templating library (see below), Knockout, Angular, Ember
Templating: Handlerbars, Mustache
CSS: Twitter Bootstrap, Foundations, Skeleton
Minification/Combination Tools: Yahoo YUI, UglifyJS
Miscellaneous JS: underscore, require
These are the examples I hear the most about. I've personally used Knockout and Twitter Bootstrap. I'm looking to play around with backbone and Foundations as well though. There is a lot of research to do in this area and not really enough space in a single answer. I think if you start researching these libraries and tools you should find plenty of information to get you to the right endpoint.
Best Answer
The IPad has a pretty large screen; any website created in the conventional ways for desktop computers should work just fine on the IPad.
In fact, many websites (this one, for example) actually seem to work better on the IPad, because the IPad can automatically eliminate the empty screen real-estate you see on the left and right.