Preface

Instant Website Optimization for Retina Displays How-to is a comprehensive guide to building a website that looks fantastic on high pixel density displays. Helpful insights and simple instructions walk you through all the various methods of optimizing your site for the latest mobile and desktop devices.

Apple launched its line of high pixel density, Retina Display products with the iPhone 4 and has continued to integrate the technology into its other products. A high pixel density display typically has one and a half to two times the amount of pixels per inch of a traditional display. This makes the pixels nearly invisible to the human eye. These beautiful displays take computing to a new level with incredibly sharp text and graphics.

Apple's marketing of the Retina brand popularized the high pixel density display, but the techniques in this book apply to many other manufacturers' devices with similar displays. As these displays become cheaper to manufacture, high-density graphics will become the new standard for the apps and websites of the future.

This book begins by covering the basics of Retina images and dives right into practical advice so you can start improving your website's images. It continues building on the basic techniques with simple recipes covering all the tools you'll need to make an impressive Retina website.

We will take a look at the techniques for adding Retina backgrounds, sprites, and border images. You will learn how to optimize your site, loading large images only when needed to keep it running fast. We will create a variety of basic shapes and styles using CSS that can be used instead of graphics in your user interface. We'll cover scalable image techniques, including using fonts as icons and implementing Scalable Vector Graphics (SVG), which make your graphics look great on any device.

After reading Instant Website Optimization for Retina Displays How-to you'll have mastered the techniques to make creating high-density websites easy.