Game Development Reference
In-Depth Information
var mobile = isMobile(navigator.userAgent);
// If the browser is not mobile, add enhanced
CSS functionality
if (!mobile) {
var container =
document.querySelector("#container");
container.classList.add("anim-background");
}
Now, it wouldn't be particularly difficult to build the game with the animated back-
ground first, then remove it when a particular device was detected. There wouldn't
necessarily be any added value taking this approach either.
In summary, whatever approach makes more sense to your specific application and
design goals and objectives, the key principle is to keep user experience in mind.
Never present the user of your game or application with an unusable product or fea-
ture. Either downgrade the feature to something useful or upgrade it when you are
sure that the user's environment can make proper use of the feature.
Finger-friendly design
Another very important design consideration that is so easy to overlook is the size of
the various elements. Although making text large enough is important, this is some-
what easier to get right. Plus, text size is fairly easy to adjust dynamically, so users
can tweak things until they're comfortable with the exact size of the text in your ap-
plication. However, coming from the point-and-click world, where action targets are
big enough if the mouse pointer can fit on top of it, we may not realize that different
people have vastly different finger sizes. Nothing can possibly be more frustrating to
a big-fingered user, than to miss a click target because the target is too small. When
the first touch-sensitive mobile applications came out several years ago, users prob-
ably considered carrying a finger sharpener along with their device, so that those tiny
touch targets could be reached.
In the following illustration, the screenshot on the left is an example of items that are
too small for a user to touch, as well as items that are too close together. The better
