Book Image

Instant Website Optimization for Retina Displays How-to

By : Kyle Larson
Book Image

Instant Website Optimization for Retina Displays How-to

By: Kyle Larson

Overview of this book

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."Instant Website Optimization 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 "Instant Website Optimization 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 (7 chapters)

Fonts as icons (Should know)

Web fonts are typically used for applying different typefaces to your designs, but they can also be used to add high-definition icons. Typefaces that are made up of symbols and shapes are called dingbats. You may be familiar with some of these fonts that have been pre-installed on your computer, but typically they don't serve much purpose.

Web designers can find useful sets of dingbats that are specifically tailored for building websites. These include icons for social media, shopping carts, e-mail, zoom, print, and other images that are useful for designing user interfaces. You could even create your own font with custom icons for your site. In this recipe, we'll use what we learned in the embedding fonts recipe to add a dingbat font and create an RSS button.

Getting ready

To get started we need a dingbat font to work with. For this example, we'll be using the Modern Pictograms @font-face kit, which can be downloaded from Download the kit with all the font formats available to ensure compatibility with older browsers.

How to do it...

  1. To get started, move the .eot, .svg, .ttf, and .woff fonts that you downloaded, into your /retina/ folder. Then create a new HTML document called dingbats.html inside the /retina/ folder. Within the basic HTML structure we'll add some CSS code to include our web font.

      @font-face {
        font-family: 'ModernPictogramsNormal';
        src: url('modernpics-webfont.eot');
        src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
               url('modernpics-webfont.woff') format('woff'),
               url('modernpics-webfont.ttf') format('truetype'),
               url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
  2. Then we'll add a class that lets us create an RSS button.

    .rssButton {
        background: #ff9c00;
        border-radius: 8px;
        cursor: pointer;
        height: 50px;
        width: 50px;
        margin: 20px;
        font-size: 50px;
        color: #fff;
        line-height: 15px;
        text-align: center;
  3. Then we'll add the HTML code to display our button. The RSS icon is a "^" character, which is Shift + 6 on the keyboard.

    <div class="rssButton">^</div>
  4. If you run this code inside of your browser you should see the RSS button. Notice that the button is just as sharp on a Retina device while zooming in.

How it works...

To start creating our RSS icon we set up @font-face rules for the font kit we downloaded (refer to the previous recipe on embedding fonts for additional information). Then we created a class to format the button. We started out by creating the structure with an orange background, rounded corners, width, and height.

Next, we added the settings for our new dingbat font. I've added a line-height attribute here to make sure the icon is set in the middle of the button. Finally, we created a div with the rssButton class and added the ^ character to it, which is the RSS icon dingbat.

There's more...

The benefit of using a font instead of an image is that fonts are vector graphics. This means that the font will scale to any size because it is based on code rather than pixels. A user can zoom to any level on their device and the icon will still appear sharp. You can also reuse this icon at any size or color on your site without having to worry about creating additional images.