How to step-by-step site retina optimization

With HD screens, high-resolution screens becoming more popular, such as the MacBook Retina model, the IPad Air series, these new machines have a high PPI, the clarity of the page is very demanding, so more and more webmasters have to face a problem, That is the high-resolution adaptation of their website (retina-ready). Because low-clear pages look bad on high-resolution screens, the user experience is a big disservice. Conversely, high-resolution, adaptable sites look more aesthetically clear and have a significant improvement in user experience. So with the development of science and technology, Retina adaptation (Retinafy) is an inevitable trend, you might as well prepare for this now.

Guide/Jump to

• 1 the benefits of Retina adaptation
• 2 picture and CSS background
  • 2.1 Retina picture naming convention
  • 2.2 CSS Background pictures
  • 2.3 only retina screen display optimized CSS background
• 3 button and other page elements
  • 3.1 icon Font ( Icon Fonts)
  • 3.2 vector graph (e.g. svg)
• 4 Favicon and Apple Touch Icon
  • 4.1 Ap ple Touch Icon
• 5 font and Web style
  • 5.1 more font choices: Web Fonts

the benefits of Retina adaptation

What are the advantages of the website for HD screen optimization? First, there are a large number of sites without retina optimization, and more and more Internet traffic from tablets and mobile computers, these models are very early on the high-definition screen.

The reason why the vast number of webmasters are not tempted to optimize their own site, mostly because they manage the site used by the computer is not a high-definition screen, so temporarily did not experience the high-definition screen under the vague feeling of low-clear pages. But if you can stand out now and make your site high-definition, it is very respectful of the user experience, you can get more repeat customers and satisfaction.

Here are some of the basic points of the site to show how to make the site Retina optimization.

picture and CSS backgrounds

The use of the picture is generally the case of these two, one is the IMG tag, and the other is the CSS background. The former is more direct, is the most common way. To achieve retina optimization in an IMG tag, you only need to provide a double-sized version of the image and stick it in the Web page at 50%.

For example, you have a picture of size 100x100px named picture.png , which used to

In the form of a Web page, now for retina optimization, you need to make an equally clear, but the size is 200x200px double size picture, the name is best also taken as [email protected], and to

In the form of a Web page. In this way, the original 200px size in 100px display, on the high-definition screen to get retina optimization to effect.

Retina image naming specification

This optimized image has a common naming convention, which is to add a @2x suffix to the back. For example [email protected] will be an optimized version of Pic.png, it will be twice times the size of the latter, but we would like it to be displayed in proportion to the original size.

CSS Background Pictures

Another common scenario is to display a picture in the form of a CSS background image. Usually people use it to display a logo, a button background, or a sidebar background. IMG is more in the body, CSS background is closely related to the layout and overall appearance of the page, so actually we do the retina optimization in the picture this piece, more refers to the CSS background this piece. As in the above method, the optimization scheme is to display a background image twice as large as the original size. For example, we optimize the following CSS code

#logo {
Background:url (' logo.png ') no-repeat;
}

And assuming this logo.png is 100x100px size, now prepare an equally clear size for the 200x200px size of the [email protected] picture, optimized, CSS should be written like this

#logo {
Background:url (' [email protected] ') no-repeat;
background-size:100px 100px;
}

Among them,background-size: width height; Part of the picture can be forced to display the desired specifications, so that the retina effect can be achieved.

optimized CSS background for retina-only screen display

We know that double the size of the image means more storage space and traffic, then, can we implement if it is not a high-definition device, then just load the low-clear map? CSS3 provides such a feature.

Just write this now.

/* Low-resolution devices */
#logo {
Background-image:url (logo.png);
Background-repeat:no-repeat;
}
/* High-resolution devices */
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
Only screen and (-moz-min-device-pixel-ratio:1.5),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:3/2),
Only screen and (min-device-pixel-ratio:1.5) {
#logo {
Background-image:url ([email protected]);
background-size:100px 100px;
Background-repeat:no-repeat;
}
}

You can achieve only high-definition devices will be loaded in high-definition pictures, save traffic.

buttons and other page elements

In addition to the picture, we often also in the button, the hint picture and so on some small corner to see the low clear disharmony picture. Sometimes we look at the buttons and we do some picture tricks on them. But these little places, if the retina optimization is not implemented in these small corners, the user's vision will be suddenly attracted to the past and complained.

To solve these problems, you can first use high-definition pictures as described above to achieve the retina effect, but the better way is to use less picture elements. Now that browsers mainstream support for CSS3 technology, CSS3 can help you create scalable, native HD visuals without the use of images, so you don't have to worry about retina optimization at all and speed up loading.

For example, the following common visual design methods, can be completely made of pure CSS, why use pictures to work with themselves?

CSS3 Online production Resources

If you are not familiar with CSS3, you can use the Http://cssarrowplease.com website to help you make some arrows and dialog boxes;

Use http://css3buttongenerator.com to help you make CSS buttons (button);

Use http://css3generator.com to help you make some other effects.

icons Font (icon Fonts)

I want to do some of the icons icons relatively small, and a lot of, but CSS does not come out, I would like to do a one, and a generation of @2x pictures, and then one by the above CSS writing rules to write in it? Don't be so troublesome.

Icons (icon Fonts) are like font files made up of a bunch of vector icons, embedded in Web pages that can be arbitrarily called and scaled at will. Better yet, there are plenty of free ready-made resources on the web, and perhaps what you want is already available online for free.

For example http://weloveiconfonts.com this website.

vector images (e.g. svg)

Sometimes you may notice that if you directly put a picture, such as logo, 50% size display, may appear distorted situation, so you can also directly use SVG to make some simple but need to use multiple images, so you can a file go world, free zoom to any size, No need to be bitter to create a variety of sizes. For example, the famous TheNextWeb website uses the SVG as the logo, the effect is very good.

Favicon and Apple Touch Icon

Many people ignore the site bookmark icon Favicon also needs Retina Optimizer. But a clear and beautiful favicon will certainly make the user impressed when they bookmark the page. Optimization Favicon is simple, you only need to 16x16px size of the original icon based on a 32x32px size and packaged as a favicon.

Don't worry, http://www.xiconeditor.com can help you do this for free! After the production is finished, upload to the website root directory.

Apple Touch Icon

The other is Apple Touch Icon, which is primarily a picture that iOS devices will display when they add a webpage to the home screen. You can add the following in front of the homepage source code

<link rel= "apple-touch-icon-precomposed" href= "/touch-icon-57x57.png"/>
<link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "/touch-icon-72x72.png"/>
<link rel= "apple-touch-icon-precomposed" sizes= "114x114" href= "/touch-icon-114x114.png"/>

And according to the above to make the corresponding pictures can be, they correspond to different sizes and definition of iOS devices.

font and Web style

Another area worth considering is the font. Generally speaking, on high-definition screen, because of the appearance of the results, ugly fonts will be more ugly, beautiful fonts will be more outstanding. So we can no longer adhere to the default font, but to bold selection of fonts. Most of the situation shows that, in the high-definition screen, for the layout of the page, the non-liner body is more superior than the liner body, for the body, the liner body has a reading advantage. But the Web page style is the best emphasis on unity, so it is better to choose a uniform non-liner body.

For English, the common Helvetica Neue Family, Arial, Avenir and so on are very suitable fonts, they do well on high-definition screen, they will not let you down. Helvetica is also the font that Apple has been advocating for many years, and they recently changed the OS X system default font to Helvetica font, which echoes the full retina of Apple.

In the case of Chinese, the retina screen is shown in boldface, and Arial and italic do not have much advantage on the page. You can take your discretion.

more font choices: Web Fonts

Fortunately, you can use Web fonts to avoid the embarrassment of text images piling up on pages because of the exact font. For English fonts, their font files are small, so we can simply embed fonts. Free Google fonts and some paid typekit are good choices.

Remember the last point, the High-Definition screen page style appears more prominent, so carefully choose the style of the page. Now it's all in a flat style, and the flat color elements glow in a high-definition screen: They're simple and clean, and they're very resource-intensive. So flat style can be said to be the Gospel of Retina Optimization Web page.