Nov 6, 2012

"Retiniza" your WordPress theme

Filled under:

"Retiniza" your WordPress theme

Apple has introduced many of its devices in the visualization concept called " Retina Display ", whereby a display device twice (at least) a similar resolution, thanks to the high quality displays that use, for example, the latest iPhone, iPad and MacBook computers .

If you've tried one of these devices with retina display will have seen that the resolution of the fonts and images is really spectacular.


To have a website " retina ready "must take into account several aspects, the main ones are these:


Higher resolution images, something easy to add by various methods to be discussed later.
Icons and buttons using CSS, to show different versions depending on the device.
Favicons, easiest, because you only have to upload a favicon to 32 × 32 pixels instead of the standard 16 × 16

And, of course, in WordPress can be prepared to offer a version " retina ready "on our website , so we have several possibilities, some really simple. Let's look at some options, some easier than others ...


WordPress Plugins ... ...

WP 2x Retina : This makes our WordPress plugin " retina ready ", at least as far as images are concerned. It offers two different ways to serve your visitors images, choosing the one that best suits your accommodation and environment. It also has support for WordPress Multisite.

The plugin, once active, creating image files necessary for devices with Retina display . If the original image resolution is not high enough shows you a notice in the Media Library to upload images to high resolution.

From the outset, the plugin recognizes the device from which you are viewing your website and display the appropriate version of the same image, with the highest resolution in the case of the Retina Display.
WP 2x Retina

Retina display

WP Simple Retina : another great plugin that changes when your website is seen from a retina display device, the @ 2x version of the images.

For this, the plugin creates @ 2x versions of the images of the inputs and for the thumbnails. There is nothing to configure, but you also have to install the plugin regenerate thumbnails after installing WP Simple Retina and run the regenerate thumbnails, the rest is automatic.

WordPress Themes ... ...

Of course, you will save time and effort to use a theme that is already ready for retina displays, as Responsive (free) or another pile you can find (and pay)

Resizing ... CSS ...

This already exists, do not have to install or learn anything . The idea is simple: to serve images at twice the resolution but resized to half. The Retina display device displays the image at its top resolution, the only downside is that it always loads the image resolution to stop, but not required on devices without Retina display.

I mean, what you have to do is get into the habit of always upload the images at twice the resolution that you show on your subject and resize them, using the attributes " width "and" height ", all at half the insert.

In short, it would be something like that for an image of resolution 640 × 400: <img src = "http://midominio.com/wp-content/uploads/2012/11/03/pedazo_de_foto.png" width = "320" height = "200" />

Javascript ... ...

One way to achieve the same with the above methods is through the script Retina.js . Once you download it from the official site the process is this:


  1. Upload the file retina.js to your server
  2. Add the script to the file footer.php your active theme, before the tag </ body> : <script type="text/javascript" src="/scripts/retina.js"> </ script>

What the script is assuming you use the modifier high resolution recommended by Apple (@ 2x) to identify variations of high resolution images on your website and thus, if you insert a picture called, say pedazo_de_foto.png , then find a call pedazo_de_foto@2x.png will be showing at the retina display devices. So you know what touches: Always climb the aforementioned, or otherwise use the LESS CSS trick as explained in the official website Retina.js.

Sources iconified ... ...

One of the most horrible things to " retinizar "a website are the sources, because the sample resizing horribly pixelized. To address this important facet technique we can use @ font-face , very implanted from Twitter bootstrap , and quite easy to add to our WordPress using Font awesome , you can install fonts icons as vectors, without reloading greatly your website, show a high quality version that will be great on Retina screens.

Once download Fong Awesome do the following:



  1. Copy the folder " Awesome Font "on your server
  2. Copy files font-awesome.less or font-awesome.css in your theme folder active WordPress.
  3. Open the CSS file upload and edit the URL of the source to point to the folder where you uploaded Awesome Font



Another way is to create your own font services like Font builder and then implement the new fonts to your website creating CSS classes that use @ font-face .

Well, you see there is everything from the simple to special modes for developers. What seems clear is that the Web tends to retinizarse slowly and must take into account these techniques if our website was created using WordPress is competitive and add value to these devices with Retina display that increasingly use more .





0 comments:

Post a Comment