Archive for April, 2015

Designing for the future of web display technology

April 20th, 2015 by Tamar Smart

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.

Google Fonts

Google Fonts

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.

Font Awesome icons

Font Awesome icons

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:

  1. 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.
  2. Create 2 versions of your important images. One is larger (for utilizing on Retina Displays), and the other is smaller (for basic displays).
  3. 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.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Mobile Responsiveness just became even more important for high ranks in Google

April 19th, 2015 by Trevor Robinson

As of the 21st April, 2015, the Google search engine, globally, is giving weight to the presence or absence of mobile responsiveness in your website for people searching in Google using a mobile device. For example, if you are searching for a local cafe while using your mobile phone, the local cafe that has a website which is optimised for viewing on a mobile phone is much more likely to appear in the top search results for your Google search.

Google have been warning about this change for some time, so if you don’t have a mobile responsive website yet and if people searching for your business are likely to do that using a mobile device (tablet, phone, mini-tablet etc), now is definitely the time to act.

In a nutshell, a mobile responsive website is one that lays out differently and potentially functions differently, depending on the size of the screen being used, and whether the device has a touch screen or not.

Below is an example of a website which has been built responsively (the Contact Point website):
responsive_contactpoint

You can read more about what it means to have a mobile responsive website here.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contact Point Email Newsletter

Each email newsletter is filled with technology updates and great ideas to help your business grow.

To subscribe, simply fill in your details below: