As technology grows ? so does our need to see things in super high quality. Our computer and mobile phone displays, must be larger and better than before. No longer are we satisfied with blurred images, and squinting at our small mobile phone screens to try and read “blocky” text. By “blocky” I mean that the edges of the text and images lose their crispness and you can see the pixels (square edges).
Enter the new player – Retina Display. This technology allows us to view content on our computer screens, laptops, tablets and mobile devices, at a high resolution with clear images and smooth text. The reason for this is because these displays have at least twice as many pixels per inch (ppi), as a basic display. Therefore our eye (retina) interprets what we see, as being closer to how we see things in real life.
Some devices recently released, that have Retina Display: MacBook Pro, iPhone 6 and the iPad Air.
What relevance does this have for you?
If you have a website and want to target a wide range of clients/customers, then you will need to cater for their devices. A basic website with low resolution graphics, may not be good enough any more, particularly if your target audience are viewing your site on their mobile devices, laptops or tablets. Most of these devices are now including Retina Display as a standard feature ? especially Apple products.
Information is one of the most important aspects of a website. A website that has blurred images and icons, with “blocky” text, may convey the wrong message to your visitors.
If you check the Google Analytics for your website you will quickly discover how many people are browsing your website using a mobile device.
How we can help improve your website?
There are several ways we can improve your website for Retina Display. Firstly, by making the choice to use styled text instead of text that has been embedded in an image.? Styled text is able to be scaled up or down, to suit a variety of devices. The text will look smooth and easy to read. This doesn’t mean that you always need to have basic fonts either. We can offer a wide range of fancy fonts (that will suit your style) ? for use on your website. Google Fonts, is the tool that gives us the capability to design text with varied fonts, for Retina Display.
Secondly, we can improve your website for Retina Display is with the use of Font Awesome icons. These icons (e.g. phone, search, email) can be scaled to fit nicely on any device. They will always look crisp on both a Retina Display and a basic screen resolution. There are many to choose from, and they can be designed to match any colour that is needed.
Thirdly, detailed photos need some extra love. We can set them up for you so they display at high quality on each device. Here is an outline of the process we use:
- Set up your website to function in a responsive way ? where the layout adjusts to fit comfortably on a variety of screen sizes. ?This isn’t an essential step in addressing your large images, but is definitely an important part of providing a great experience on a mobile device.
- Create 2 versions of your important images. One is larger (for utilizing on Retina Displays), and the other is smaller (for basic displays).
- Insert a small piece of additional code into your website (called a Media Query) which detects the type of device that the website is being viewed on, and then chooses one of the two image sizes to show (depending on the type of device detected).
It is also worth noting that there is a difference in file size, for photos used on Retina Displays. The files are larger in their visual size, which means they are also larger in file size. This is why it’s important that we have a second smaller version of the photo, for use on basic displays ? so that a visitor is not unnecessarily downloading large images (which look basically the same to them).
With these simple but effective tools, we can help your website to stay up to date with new high quality display technologies. Retina Display can be a beautiful thing ? if we understand and use it to its full potential.by