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.
Creating your first Retina image (Must know), will help you create a high-density image and implement it using the HTML <IMG> tag. You will also learn the importance of consistent file names.
Retina background images (Must know), teaches you to use CSS to add high-definition background images.
Optimizing (Must know), explains techniques for optimizing images, what tools are available, and why it matters for speed.
Creating image sprites (Should know), will help you use CSS to add high-definition image sprites that make fewer HTTP requests for increased speed.
CSS border images (Should know), will teach you to create high-definition border images in CSS.
CSS media queries (Should know), explains how media queries can determine when your new Retina images are loaded.
CSS image-set (Become an expert), will teach you a possible future technique for adding Retina images to your site.
Using code instead of images (Must know), explains how to use CSS3 to create resolution-independent graphical elements.
Embedding fonts (Should know), explains how fonts scale on Retina Devices and how they can be added to your site via embedding and font services.
Fonts as icons (Should know), helps you create graphics using fonts.
High-resolution web apps (Should know), helps you create high-quality, web-clip icons for mobile devices and favicons for the browser.
Scalable Vector Graphics (Become an expert), helps you create SVG as a replacement for images.
Canvas (Become an expert), explains how Canvas can be coded to adapt to high-density displays.
Pixel ratio detection with JavaScript (Become an expert), will teach you to use JavaScript to detect if a device has a high-density display and serve the correct image.
Server-side Retina solutions (Become an expert), explains how a server-side code can be used to detect if high-definition images should be served.
You'll need to have a high-definition device to be able to test the examples in this book and a server to upload your code to if you're not developing it on that device. You'll need a graphics editor (such as Photoshop or GIMP) and a code editor (such as Coda, Dreamweaver, TextEdit, or Notepad).
This book is for web designers and developers who are familiar with HTML, CSS, and graphics editing and would like to improve their existing website or their next web project with high-density images.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Make sure you enter the correct background-size dimensions for your image."
A block of code is set as follows:
<style>
.imgHeader { width: 700px; height: 400px; }
</style>
<img src="images/[email protected]" class="imgHeader" />New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose Save for Web or Export...".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.