You are previewing Instant Website Optimization for Retina Displays How-to.
O'Reilly logo
Instant Website Optimization for Retina Displays How-to

Book Description

Learning simple techniques which will make your website look stunning on high-resolution retina displays

  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.

  • Create high-resolution graphics for websites

  • Learn to create scalable graphics using CSS, SVG, and Canvas

  • Embed fonts from the web for creating unique typography and graphics

  • Learn how to add high-resolution icons and startup images to your web apps

  • Implement scripting techniques to replace your images with high-resolution versions

In Detail

Apple launched its line of high-resolution, retina display products with the iPhone 4 and has continued to integrate the technology into its other products. These beautiful displays take computing to a new level with incredibly sharp text and graphics. As other manufacturers add similar displays to their devices, high-resolution graphics will become the new standard for the apps and websites of the future.

"Optimizing Websites for Retina Displays How-to" is a comprehensive guide to building a website that will look fantastic on high-resolution displays. Helpful insights and simple instructions walk you through all the various methods of optimizing your site for the latest mobile and desktop devices.

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 high-resolution website.

We will take a look at the techniques for adding retina backgrounds, sprites, border images, and loading large images only when needed to keep your website 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 "Optimizing Websites for Retina Displays How-to" you’ll have the techniques to make creating high-definition websites easy. You’ll have an arsenal of tools for creating graphics on the web at your disposal, leading to superior websites that are beautiful and fast.

Table of Contents

  1. Instant Website Optimization for Retina Displays How-to
    1. Instant Website Optimization for Retina Displays How-to
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Instant Website Optimization for Retina Displays How-to
      1. Creating your first Retina image (Must know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Tips for creating images
          2. Pixels per inch and dots per inch
      2. Retina background images (Must know)
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Optimizing (Must know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Tips for creating repeating backgrounds
      4. Creating image sprites (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Tips for creating image sprites
      5. CSS border images (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. CSS media queries (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. CSS image-set (Become an expert)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Speed detection
      8. Using code instead of images (Must know)
        1. How to do it...
        2. How it works...
        3. There's more...
          1. Transparencies
          2. CSS button effects
      9. Embedding fonts (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Fonts as icons (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      11. High-resolution web apps (Should know)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      12. Scalable Vector Graphics (Become an expert)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      13. Canvas (Become an expert)
        1. How to do it...
        2. How it works...
        3. There's more...
      14. Pixel ratio detection with JavaScript (Become an expert)
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Loading only the correct image
          2. Targeting other high-density devices
      15. Server-side Retina solutions (Become an expert)
        1. Getting ready
        2. How to do it...
        3. How it works...