Response title
This is preview!
Best Practice: icons
in jQuery Mobile
•
11 years ago
I'm building a jQuery Mobile web-app and I'm doing a bit of code clean-up before my next sprint. I'm wondering what the best practice is for icons in a mobile web environment. The content of the web-app itself isn't very image heavy; the only images are UI elements, but these elements occur a lot (for example, I have extensive nested lists with different icons).
My primary concern is that the majority of the target clients are power users: they tend to cycle through new phones every 6 months or so, and almost all use flagship models. This means that in the next few months (before the app goes out to our clients), most will be using phones like the HTC One X and Galaxy S3 with screen resolutions of 720p. Since the app itself requires quite a lot of server side activity (authentication and so on), I'm concentrating on reducing server load. One method is using CSS sprites; and here's where I'm a bit lost.
Would it be better practice to:
1. Use a large high res sprite for the UI elements and scale each of these elements according to screen resolution (potential client side performance issues?
2. Use separate sprites with appropriate resolutions for each screen resolution category
3. Use one large sprite with UI duplicate elements scaled for all screen resolutions
EDIT: Just to be clear, I'll be designing for 480x320, 800x400, 960x640, 1280x720 to ensure maximum compatibility
1