Graphics | Clicky Media

Are you ready for Halloween?

Published on 31 October 2012 by Nicola in Facebook Competition, General News, Graphics, Pinterest, Social Media, Web Design

When preparing for Halloween there is one task that is crucial to many families traditions … the pumpkin carving.

Whether you prefer the traditional scary face or prefer to be a little more adventurous with your carving, the pumpkin continues to be a crucial part of many families Halloween celebrations.

Social Media and image based sites such as Pinterest have made sharing your masterpiece far easier. Mashable have gathered an impressive collection of pumpkins, we’ve selected a few of our favourites and posted them below.

The traditional scary tree…

A nice traditional werewolf howling at the moon…

Jack Skellington from The Nightmare Before Christmas certainly makes a dramatic Pumpkin…

And for the Science Fiction fans, pumpkin carving is a great way of bringing a little of Star Wars to the Halloween holiday…

What spooky images are you looking to carve into your pumpkin this year? Let us know in the comments below.

Want to make the most of Halloween on your website or social media presence? Call 0800 222 9300 to find out what Clicky Media™ could do for you,whether your thinking of adding a few cobwebs to your site or setting up a Halloween themed Facebook Competition. Add a little extra something spooky to stand out from your competitors.

Source: Mashable

Web Graphics for the iPad Retina Display

Published on 20 April 2012 by Oliver Yeates in Graphics, iPad, Web Design, Web Design Tips

We have been doing some research this week into creating graphics for the new iPad retina display.

Essentially the retina display has a huge pixel density allowing really sharp graphics, the problem is that most 99.9% of website graphics are made for a quarter of the pixel density.

The new iPad (or iPad 3) has a display resolution of 2048 x 1536 and to achieve this each standard pixel size has been divided into 4 parts (see this on Apple’s website for more info – http://www.apple.com/ipad/features/) The results are simply amazing and the clarity of graphics, photos and text are massively improved over a normal screen.

When looking at a website on the new iPad the text is often very clear but the new pixel density means the graphical elements often look a little blurry due to their lower resolution.

We have noticed this is the case for most websites, however some (such as Apple and Google) have set a Media Query to spot if a user is viewing their website on an iPad 3 and then serve up graphics with twice or four times the pixel density.

We have also done this for our website (but only the logo bar at the top of the page for now) and the results are good – a nice clear logo which only loses clarity if you really zoom in a long way.

So what did we do?

Firstly we needed to redo our logo bar in twice the resolution. This was quite simple however we needed to re import the high-res graphics to make sure they didn’t blur as we doubled the pixels. (we use Fireworks but Photoshop or similar is fine)

Originally our logo bar at the top of the website was 980 x 95 so we set the canvas size to twice this – so 1960 x 190, then re imported each graphic until it was an exact replica of before but twice the size.

Then we needed to set a Media Query in our CSS to detect if a user is using an iPad 3 and then serve the new high-res graphic if they were – the below works well:

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { // your CSS }

And the results?

Its hard to show your the true results unless you are using the new iPad but the image below if clicked shows the new clarity of the logo area (the other images need re-scaling too but hopefully you can see the difference)

This is going to be a lot of work for just a few users?

You might be thinking that there is no way you are going to be resizing every single graphic of your site just for these specific users? Well you are probably right for now, and if you look at Google for example they have only really re-sized their logo and Apple have re-sized a few of their glossy graphics (especially on the iPad section) and their navigation bar. But if the rumors are true Apple’s next suite of products including the iMac, are likely to come with retina displays so these users are likely to grow very soon.