What is Retina Ready Web Design?
What is Retina Ready Web Design?

Time passes, society evolves and technology finds a new way to influence our lives each day that passes. Each aspect of our life has been made easier or more enjoyable thanks to devices that form part of our routine and one of those aspects is our perception of life. This is a literal thing; the quality of the images that we see with our own eyes is improving as well as the devices that display them, for this reason, Apple developed Retina Displays.

Retina displays are a trademark that Apple uses to refer to a display which counts with a high density of pixels per unit of area. The most noticeable advantage of these displays is quality. As pixels are smaller and more abundant than in normal displays, the detail is outstanding and the images look sharp and clean like they were printed instead of appearing pixelated.

Is there a disadvantage? Yes. Not every display has the same pixel density that a Retina display has, and a great amount of websites have programmed their layouts considering the number of pixels the images will occupy, that means this kind of devices will portray small images. This disadvantage can be defeated by working on Retina Ready Web Design.

As text is able to adapt to higher resolutions but images tend to stay stationary, the main goal of the developer by using this kind of design is to fill it with flexible content like images on SVG format or duplicate ones for two different versions of the website. Luckily, fellow designer, there are many ways to make a website retina ready. Here, a few ones:

  • Scalable Vector Graphics: This format that is often used to create logos can be used with other sections of your website as well. These have the information to display the features that shape an image like colors, segments and shadows. Using scripts such as SVGeezy will allow your website to render nicely in older browsers. Nevertheless, creating a SVG isn’t piece of cake; you might want to ask for help from a skilled designer or become one yourself in order to make one that you can include on your website.
  • JavaScript: Implementation of JavaScript can avoid some headaches as some browsers don’t support CSS3. There are some libraries able to detect if a website is Retina Ready, like retina.js and foresight.js that will give you the tools to modify your code in order to replace normal images with counterparts that count with higher resolution.
  • CSS3: This follows the premise of media queries to check if your visitor is browsing through a retina display. The image is replaceable with a background URL setting that will only show for this kind of visitors. Newer browsers react quickly as they support this implementation.
  • Fonts: As said before, fonts are able to adjust their size to whichever display, so you might want to replace your icons with these ones. You need to be aware fonts lose detail, though.




Responsive Web Design – What is it?
Responsive Web Design – What is it?

Living in the era of internet represents an almost uncountable amount of advantages, and as technology is constantly evolving, new ways to access the net are going to keep appearing. This evolution of technology includes new devices that will allow us to search for whatever we need no matter where we are as long as our data provider signal reaches us.

Nevertheless, every coin has two sides, which means anything that could ease visitor experience is probably giving some web designers some sort of headache. Most of time, designers take a time of designing an entire website that suits the device from which is being visited and take the risk of being labeled as content duplication.

Fortunately, Responsive Web Design exists. This kind of design, also known as adaptive web design, employs a series of stylesheets in CSS3 and media queries that transform a normal website in one able to adapt to any platform and every existent size. This is an improvement for visitors that use various platforms, because they no longer have to zoom in and scroll uncomfortably on websites designed for desktop devices while browsing on a tablet or a smartphone.

But, “is it really necessary to change a website in order to make it responsive?” Even when it’s not actually necessary, fellow designer, responsive web design comes with some advantages that will wake your interest up, such as:

  • Maintenance and development get cheaper and easier: You are using the same template for all your platforms, the smallest change in one of them will also be seen in the other, so the costs of development and maintenance go low.
  • No more duplicates: Having a mobile version of your website in order to share your content adapted to the device could harm your SEO because that means that your content is duplicated and Google penalized your web. Having a Responsive web instead makes your content adapt to any kind of resolution and size allowed by the device, so there won’t be any duplicates.
  • Your visitors will thank you: The opinions of your visitors will get better and better and use it more. This is something you will see on statistics such as rises in the time spent on each visit and the bounce rate between pages that shape your web.
  • Virality will go up: Among the 70% of social network browsing is made through mobile devices, meaning that if your content is good enough and enjoyable by the visitors, they will share it on their networks easily.

Responsive web design is not just advantages, though. It requires a greater investment on first development because they’re more difficult to make. Images will load slower because they first adapt to the resolution and size. But don’t worry; there are good people like Foundation 3 and Bootstrap developing preconfigured frameworks so you don’t have to design from scratch.

Make your websites friendlier and start using responsive web design on your projects. The improvements will be almost immediate!



Website Redesign Best Practices For 2018
Website Redesign Best Practices For 2018

Last decade has been marked by how web traffic has surpassed any other kind of engagement between brands and users. As trends change, many of the brand owners feel the need to revamp their websites and that opens up the possibility to ruin a great domain that had nothing bad on it. But there are some ways to reduce that chance of wrecking a previous job that was well done and it consists in having knowledge of what to avoid when the time to redesign comes.

What to avoid…

  • It’s important to avert the redesigns caused by outdated aesthetics.

The vast majority of website redesign attempts that fail have started with owners complaining about how awful the website is looking right now, maybe the brand needs some refreshment that can be achieved with just a change of fonts and colors and not a complete makeover since aesthetics are mostly owners’ desires and the visitors are not considered at all.

  • Other important thing that is better to avoid is to leave fundamental considerations to the end.

It’s quite harmful to not predict what can happen when a major change is implemented. There might be direct repercussions over navigation bounces or engagement time during the visit that could harm SEO and even ad revenues.

  • Last, but not least, you need to test everything while implementing some changes.

Most people do not collect all available data while changing vital stuff such as layout, backgrounds or ad location.

What to do…

One of the best techniques that will guarantee you success this year is tracking engagement metrics. It’s not just about how many visitors go to the website, their behavior and what they do is quite important. This way, you can learn how to affect this statistics in a positive way. For example, designing a content strategy around the content that is producing the sessions with the greatest quantity of engagement is going to guarantee you a major traffic on your website without having to touch the code of your website.

Other great practice that will help you is adjusting your layout to each type of visitor. Here lies the importance of keeping track of engagement and experience metrics like bounce rates and page views. One of the easiest ways to do it is testing different layouts and seeing how these metrics behave with the kind of visitor you want to attract to your page. Once you get the best layout, your organic traffic will grow bit by bit.

Finally, get even more mobile friendly. There are new development techniques such as PWAs that allows a mobile website have all the functionality of an app such as pre-caching, push notifications, compatibility with all devices and more. It’s also known that people is browsing the web through their phones and tablets more than they do with desktop computers or laptops.

Now you have knowledge of some dos and don’ts that will help you redesign websites in a productive way this 2018. Apply them and you’ll have success!