Book Image

Mastering jQuery Mobile

Book Image

Mastering jQuery Mobile

Overview of this book

Table of Contents (17 chapters)
Mastering jQuery Mobile
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Best practices for design and layout


When you have decided to use jQuery Mobile as a platform for your mobile web application, there are a few things to keep in mind in terms of the overall design and layout. The following key pointers will help you better design your web application.

Icon size

Most of the newest smartphones feature the retina display, a screen that packs double the number of pixels into the same space as older devices. For designers, this immediately brings up the question, "How does this affect my current images? What do I need to make them look outstanding on the retina devices?" The answer is pretty simple, but let's understand the concept of retina display images first.

The basic concept of a retina image is that a larger image with double the number of pixels (for example, 60 x 60, twice the height and width) of the original image (30 x 30) will be set to fill half the space:

This can be done using the following code snippet:

<img src="star_icon_60x60" style="height...