10 years ago, no one would have even imagined that people would have the opportunity to have so much information available in their own pocket. Mobile phones are not a commodity nowadays, they are a necessity. This is because they are affordable, and I feel free to say this because the companies that manufacture mobile phones have high selling rates for their products (no matter how expensive the product is). And now, in the 21st century, the mobile phone industry has developed a whole lot, and the most important thing that developers have come up with is the opportunity to access the internet with your phone, thus giving us the opportunity to “see the world” wherever we are.
“You can access the internet with your phone.”
Imagine how that sentence would sound in a not that distant past (the 80’s for example). I think that we take for granted the opportunities we have today and that, if technology continues developing at this rate, the futuristic looking environments and gadgets that we can see in modern science fiction movies will become reality, in 30 years or so (I am speculating, of course).
Recent studies have shown that people are using their mobile phones to access the internet at an alarmingly increasing rate. In the past year, the number has risen up by 35%, and this percentage is growing – and it will continue to steadily grow as time passes.
You can say that, because of the improvements in technology and the web-design and web-development business, people have become sort of spoiled, when it comes to their browsing needs and requirements. Today, you have web-sites that are both excellent looking, as well as well-organized, original, well-functioning and fast loading. Actually, web-sites have become the best advertising tools, and I mean this in a very broad sense.
So, after reading everything above, you should conclude that, if you are doing any sort of business nowadays, you should have an informative and user friendly web-site. And, whether you are selling cat food or a new Rolls Royce, your web-site should not only be designed to fit and look good on your everyday computer screen, but on mobile phones as well.
In order to achieve this, your web site has to be responsive so that it can fit any screen size and it has to have high quality imaging since, let’s face it, HD technology is very common, and more and more people are getting used to it. When today’s children grow up, all the photo and video formats that we got used to in the past decade will look rather old and funny-looking to them, just like those old pictures and movies look to us.
Apple is a company that has proven to be a giant in the business and their products are certainly of high quality and they are sold all around the world to a great number of satisfied customers. One of the more recent advancements that they have made is the Retina display. These are displays made out of liquid crystal, and Apple claims that all the devices that have them have the perfect resolution and the perfect pixel density and, of course, the values for both of these are extremely high (it adds up to more than 300 DPI). With these products, you cannot see individual pixels at a normal viewing distance, and this contributes to the HD experience. For example, the new 15-inch Mac Book Pro has a 2880×1800 resolution and it has 5 million pixels. On their new iPhone 5, the display has a 1136×640 resolution and 326 DPI, which is very impressive. All this, no doubt, provides you with an excellent viewing experience.
Now, one might pose the question of whether the human eye can recognize the difference between this new technology and the former one. We can say that from a normal viewing distance, one cannot actually resemble individual pixels no matter how high quality the image is, but you have probably seen mobile phones and laptops that have one or two dead pixels (those little black dots that are actually not a little stain). If you have, you will realize that you actually can distinguish pixels, but they really are rather small. Some studies have shown that the human eye has the capabilities to discern the difference between an Apple Retina product and all the other products of the same kind, and other studies have shown that this is not true, so the public is in two minds about the matter and, quite frankly, so am I.
Today, you have cameras that can take photos of enormous quality. You can stretch them up so that they are printed out to be large billboards, and they can be large enough to cover entire buildings, and still, the pixel density will be highly satisfactory. When you are to present an image on a small display, like on a phone or on a laptop, by scaling the image so that it can fit the screen size will just improve the quality of the image, since it will have an extremely high pixel density. But, if you are presenting this HQ image on a web-page, you have to be aware that these large pictures tend to take up a lot of time to load when the visitor doesn’t have a very high internet speed. Actually, Google will “think” better of your site, if it has good site-speed, and every web-site wants to be “admired” by Google. This is somewhat logical. If your site takes up a lot of the visitor’s time just to fully load, it is very likely that he or she will close the tab where the page is being loaded and move on to another site, and all this is, as we all know, bad for traffic on the site.
Now, since in most cases, you have certain predefined areas on a web-site that are dedicated for image or video files, and these areas are certainly smaller than the original image, in order to have a Retina ready web-site, you are to place the image (or video) within the area, without it losing its size in terms of kilobytes (it has to have up to 4 times more pixels than usual, and thus, it has to be 4 times “larger”). So, web-developers and designers should either consider reducing their site-speed by a bit, and consequently provide the viewers with an HD viewing experience, or continue on doing everything as they did before. The question that has to be posed is: How many viewers have a Retina display on their platforms?
Normally, you have to keep up with the times.
- First of all, when you are making a web-site, you are making it for everyone that can access the internet through any device, so this is the first reason why you should make it Retina ready.
- Secondly, no matter what one thinks about Apple, they have proven to be able to set standards when it comes to the technology that they make. So, one can assume that, in the near future, there will be an enormous number of Retina devices used by millions of people worldwide, and they will all access the internet through these devices. In order to keep up with the competition, you have to at least consider doing such web-projects.
- Thirdly, we can all agree that technology is advancing pretty fast, and that most probably, as time passes, fast internet connections will be common to an average internet user, and it is somewhat logical that everything looks better when it is of higher quality.
After taking into consideration everything stated above, I advise you to continue reading, in order to see some advice on what you can do.
Time has shown that every new Apple product is (more or less) two times better than its predecessor. You can ask yourself: If the pixel density is so high right now, how high will it be on iPhone 7, for instance? Maybe iPhone 7 will not be that much bigger in display-size than the iPhone 5, but it will have two (or more) times more detail, both horizontally and vertically. How big a file would be necessary to satisfy the “viewing needs” of the people using such a device? If Apple develops a bigger Mac Book Pro, what will be the resolution on its display? These are all questions that one should think about when designing a web-site.
Naturally, if you are using Apple’s user interface elements, most of the “hard” work is, more or less, done for you. However, if you are working on a project that is to be Retina ready on your own, you should be prepared to put in a fair amount of hours in order for your new web-page to take full advantage of this newly designed display technology.
The key is in scaling up elements. As mentioned before, instead of an image or video file having a pixel density that fits the area where it is put, it should have at least four, but better yet, sixteen times more pixels. To put it in plain words, if you have an area that is 100×100 px, within that area, you should have an image that is 400×400 px, which means that within every pixel of the area, you have 4 pixels of what is displayed, and that way you get a 4 times better looking image.
Whether or not Apple’s Retina display will be an issue for a web-designer is a question that has been lurking around ever since iPhone 3 came out and, up until now, many techniques have been developed to make a web-site Retina ready.
- Media Queries
These are used to identify high resolution displays and provide them with a page that is dedicated for it. That way, the long-loading files will not bother the load-time for people whose devices have displays where it is impossible to notice the difference between Retina ready and not-Retina ready designs. That way, everyone is happy.
- Scalable Vector Graphics (SVG)
These files are said to be very helpful, when it comes to creating resolution independent imaging, mainly because they are themselves resolution independent, as any vector for that matter. They are commonly used for colors, fonts, paths and shapes as well as for animations, filters, gradients and scripting. But, you should consider using them for other purposes, like the user interface, or navigation icons. Also consider them for various vector illustrations, as well as patterns and repeating backgrounds.
- Font-Face
This is a, you could say, “CSS rule” that gives any user the opportunity to download a certain font type, so that he or she can render the web-page properly, if the viewer doesn’t have that particular font installed on his or her device. So this means that now, you don’t have to think about which font to use. Furthermore, you can design your own font and it doesn’t necessarily need to be used as textual content. The best thing about fonts is that, no matter how big (or small) they are, they never loose their resolution, and they are certainly smaller in size than image files, so this is another thing that you can take into consideration. Just make sure that you don’t overdo it, because you will end up with producing massive font files, which is what you have been trying to avoid in the first place.
At this point, I will elaborate a bit on the site-speed issue. As we are all well aware, not everyone is looking for a HD browsing experience. There are people that, although they have a device with a Retina display, just want to get across some information as fast as possible, while they are sitting in a coffee house, where hundreds of people are sharing one and the same wireless connection. This is why you should take the process of providing each individual user with content that is optimized for his or her internet speed at a given moment into consideration. This sounds rather complicated, doesn’t it?
Here are some solutions that might do the trick, when detecting the user’s internet speed is concerned:
- Navigator.Connection is one of them. However, it can only identify the whole internet speed available and not the one that is available for you. In plain words, if you take into consideration the scenario mentioned above (you are sitting in a big coffee house and loads of people are accessing one and the same internet source and using it at the same time), in that case, your device will receive information that it has, let’s say, a connection of 100Mbps but, since the computers that are used by the personnel working there probably take up half of that connection and the people sitting next to you are downloading updates, while others are just scrolling through Facebook, you can imagine what you are left with. Read more about this on David Calhoun’s Blog (Using Navigator Connection Android).
- There are some tools that I have come across that might be of use. Keep in mind that I didn’t test them yet, so check them out and see whether or not you consider them useful.
- Pngy (https://github.com/nathanford/pngy)
- Boomerang (http://yahoo.github.com/boomerang/doc/)
- There is this Responsive Image Working Group called W3C (their web-site: http://www.w3.org/community/respimg/), and they have set out to determine a “markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display for both screen and print”, as it is stated on their web-site. Actually, they want to introduce a brand new HTML element that will calculate the device’s dimensions, the internet speed that the user has at his or her disposal at the given moment and the pixel density of the display. This all sounds rather exciting and I, as well as a lot of others (including you, I suppose) are looking forward to seeing how all this ends.
To follow up, I will provide you with the most common advice that can aid you in the web-design and development process, when it comes to optimizing the site for use on various devices. Give the following text a read, because you might find the information useful.
- Begin the process with low resolution images and videos. This advice is only natural, since most people don’t have these new-age displays, and it is illogical to provide them with high resolution graphics, since they literally cannot notice the difference on their phones or laptops. After that, “build up” your design more and more for better equipped devices.
- Follow all the basic image and video optimization principles. This is advice is also logical, but most designers fail to put in a sufficient amount of time to do this, especially when it comes to optimizing HD content for mobile phone displays.
- You should have a working knowledge of CSS3 and use it for various things like background gradients or curved corners. Actually, you should do all you can to avoid using image files for these and other similar purposes all the time. Everything is simply more efficient that way.
- You should try and force resolution-independent solutions wherever possible (these solutions are mentioned above: SVG, Font-Face, basic HTML characters and so on). That way, you stay clear of resolution related issues.
- Try and find a way to detect network connectivity. I know that this is something new in the field, but meditate on it, if you know what I mean.
- Keep track of all the technological advancements, and make sure that you do a little research, so that you are aware of whether a particular device supports things like SVG or Font-Face, as well as the CSS3 techniques (mentioned above).
- In the end of it all, you should get a web-site that can be viewed from both out of date and up to date gadgets, and that is (or should be) your final goal.
In the end, because cream is served with a cherry on top, here are some responsive Retina ready WordPress themes that you can purchase and use. There are loads of options dedicated for various purposes, so you are bound to find the right one for you:
1. Ablaze
Demo link: http://www.spaceheadconcepts.com/ablaze/
I find this design to be very beautiful but, already, it takes up more time for it to load than usual, on my (average) internet connection speed. Nevertheless, the viewing experience is great. It is dedicated for displaying any sort of photo and video content. It is also designed to be viewed from almost all devices. It features a full-screen slideshow, a blog page, a portfolio page, a gallery page, a contact page, and what more do you want? Check it out to see it more closely.
2. Adept Style
Demo link: http://vamtam.com/?theme=adeptstyle
Follow the link above to see how this theme looks on all kinds of devices. It is very user friendly and it can be translated from English to French, German, Italian, Portuguese, Russian and Spanish. Naturally it is responsive and it will look very good on Apple products. It has 5 sliders with touch-swipe-support. A very important feature is that the page-load performance is very good. You can use it for a whole lot of purposes. You get 20 and more video tutorials, so that you can get “acquainted” with this theme better.
3. Appster
This theme is mostly dedicated for portfolio and business web-sites. The developers say that “you will never have to worry about the appropriate representation for your work”. It features a very good slider where you can showcase any and all products that you might be selling. In addition, it has very interesting button styles. So, you should go ahead and check it out.
4. Compose
Demo link: http://wp.contempographicdesign.com/wp_compose/?paged=2
The developer of this theme has been in the business for more than four years, so the quality of this product is guaranteed by his (or her) experience. The theme is easy to set up. It has many beautiful and vivid designs. You also get all the theme’s updates, the moment they are done. Click on the demo link in order to examine this theme more closely. I had a very good “viewing experience”.
5. Entity
This is also described as a Retina ready, responsive portfolio theme, but it can be used for various purposes, of course. It is a great example to show what it would look like to have extremely high quality imaging on your page. Click on the demo link in the brackets above to take a tour through this theme so that you can check and see whether it suits your needs.
6. Fashionic
Demo link: http://www.uiueux.com/theme/?theme=Fashionic
Check this template out, because if it is as good as its description, then this is an excellent Retina ready web-site, since it has rather smooth animations, a full-screen slider, it is responsive (naturally), unlimited colors and an unlimited number of style options, it is SEO friendly, and so on. It is an excellent example to show how small HD images look like (because, if you are thinking about a high quality image, it is usually large, right?)
7. Flipit
Demo link: http://themeforest.net/item/flipit-responsive-multi-purpose-theme/full_screen_preview/3051234
In the description of this theme, the emphasis is given on it being fully responsive. It has loads of layouts that can be used for various proposes. Actually, with Flipit, you get three themes at the price of one (which is a very good bargain). It has “flipable” content, the colors of the accent, the features and the background can be altered, and it is built for touch devices. It has many more excellent features, so check it out to see it better.
8. Food Lovers
Demo link: http://designeek.com/wp/foodlovers/
Logically, this template is primarily designed for advertising restaurants or coffee houses. Keep in mind that it is only WordPress 3+ compatible. It features a menu and 7 widgetized areas with featured imaging. There are 5 different post options: testimonials, gallery posts, team posts, posts about foods or drinks and address posts. If you are making a web-site for such a business, HQ imaging can help a lot, since, let’s face it, the look of a food or a drink, adds a lot to its quality, and everything looks better in HD.
9. Fresco
Demo link: http://wp.contempographicdesign.com/wp_fresco/
10. Gentle
Demo link: http://mpcreation.pl/themeforest/gentle/
As you can see in the picture, “there is no limit to what you can do”. This is mainly a portfolio theme. Apart from being responsive and Retina ready, it is easy to install and setup. Within the purchase, you get detailed documentation that will help you in the customization process. The developers of this theme say that it is “made with love” and this can go a long way. Check it out to see it for yourself.
11. Local News
Demo link: http://themeforest.net/item/local-news-wp-news-theme-with-mobile-version/full_screen_preview/2945886
12. Mater
Demo link: http://themeforest.net/item/mater-fullscreen-image-video-background-wp/full_screen_preview/3047892
This is a very elegant design. It is great for presenting high quality images full-screen as well as HD video backgrounds. The theme can easily be customized to suit anyone’s needs. There is an unlimited number of color schemes and content stacker items. This design can be used for anything related to photography, as well as for portfolio web-sites and various gallery pages. Give it a try.
13. Organic Web
Demo link: http://colibri-interactive.com/themes/organicweb/
Organic Web is an organization that is in the process of saving the planet with organic products, and they are funded by donations, so you should check them out and donate something (if you want to, of course). This theme is dedicated for any and all projects that are environmental and/or humanitarian. Naturally, you can use it for other purposes. There is a support forum on the web-site so if you have any questions, you can ask them there.
14. Outreach
Demo link: http://themes.designcrumbs.com/outreach/#
As you can see in the image, this is a charity theme, and it is very similar to the previously mentioned one. It has a widget area where you can present any and all information that you want to present. The WP E-mail Capture plug-in this theme features is very useful, because you can easily organize e-mails that are sent to you by any viewer. The developers say that “keeping your supporters up to date has never been so easy or looked so good”. So, click on the demo link to see this theme better and you can develop your own opinion about it.
15. Tersus
Demo link: http://themeforest.net/item/tersus-responsive-wordpress-theme/full_screen_preview/2343187
To sum up, I would like to tell you my own experience with the Retina display. I currently own a Samsung Galaxy I7500. Now, this phone is currently not, as they would say, state of the art – particularly now, when so much better products are available for purchase on the market, but I find it to be rather satisfactory, particularly if you take into consideration its display, which is big enough and it has a high enough resolution for my mobile phone needs. I must admit, I was rather skeptical that it can get any better than this and I thought that this Retina display is just a marketing hoax and that it is not necessary to have a phone with such detailed displays. But, when on the one hand I was holding my phone, and on the other, an iPhone 4S (which has the same pixel density as the iPhone 5, but is smaller in height) and while I was comparing their display capabilities, I came to realize what Apple was talking about. After that, there was no doubt in my mind that the Retina display is definitely better than the one I have, and that it does provide its customers with an excellent viewing experience. If I could distinguish individual pixels before, now, on this new-age display, I most certainly cannot.
The biggest question that we have to ask ourselves is what will be common in ten years, or better yet, in one year. Think back and recall your amazement when you first saw the ability to play a game (for example the so popular “Snake” that could be played on those old Nokia 3210 mobile phones) on your phone. Then recall how amazed you were when they invented color displays for mobile phones. If you think about it, all this was not that long ago and since technology is advancing at an increasing rate, one can only imagine what will be at our disposal in a not that distant future. Imagine every device having a sort of projector, and everything that can be displayed on a certain device’s display, can also be viewed on any big flat surface (this is yet another thing that can be seen in sci-fi movies that depict the possible future).
I have mentioned before that the viewing needs of an average internet user have made them, so to say, spoiled. This is not only due to the frequently mentioned constant development of technology, but it is also very much due to the competition in the mobile phone and laptop market. Every company will do its best to stand out and try and make a unique and well-functioning design. There was this legal dispute about whether Samsung had stolen Apple’s designs for their “S” products or not. Furthermore, there are constant arrivals of new companies that are in this business all over the world. Take into consideration the Chinese Huawei company for example. They are developing fast and probably, in the near future, they will have products that can be examined as being just the same, or even better than the competition.
Now I applaud technology and my opinion is that technology should advance at such a rate that, in the future, everything that is considered to be labor, will be done by a perfectly programmed machine. This is something that is going on right now. Think about it. If you want to do a little research about anything, you don’t need to take a walk to the library, and spend countless hours going through infinite amounts of material, not knowing if what you are looking for is actually there. Now, you just put your hand in your pocket, take out your phone and you can learn anything about anything. Again, although we take what we are given for granted nowadays, one cannot but say that all this is rather amazing.
In the end of this rather long piece of text, I will leave you with this:
- Should you start studying technological development and creating individual web-projects dedicated for every different device available to the public individually?
- Should you try and determine a way to have your web-project suited for all the devices, without having to create an individual project for each of them?
- Should you continue doing everything as you are used to and neglect what is going on around the world?
- Or, should you leave it all, and start being a teacher, or a professional golf player, or anything else?
These are all questions that I cannot answer for you. You should answer them for yourself and find the best solution for whatever lifestyle you might have.
I hope that you have found this article to be informative and useful. You should know that the internet is filled with other things related to this topic, and you should feel free to explore other people’s opinions and views, in order to provide yourself with the best possible solution. Sometimes, the more advice you get, the better. As I say, there is never too much information. The more you know, the better a decision you can make, and the better an opinion you can develop (about anything). Like I said, when it comes to Retina displays, I am in two minds, just like a lot of other people. This is a topic that will be open for discussion probably until they develop something new and astonishing and, until then, I bid you farewell.