Tag Archives: Web Design


WordPress Plugins #30: Cookies

New laws that came into being recently (May 26, 2012) state that websites must get “informed consent” from users before they record any detailed information in the cookies they store on visitors’ computers.”

Note: In this series I’ll delve into some of the better plugins available for WordPress that I am already using, or about to start using. I’m aiming to highlight 30 of the better plugins.

Those of us running a blog based on the popular blogging platforms will find a handy plugin or two in the respective directory, and the one I’ve started testing using is called Cookie Control, and is available from the WordPress website or by searching the directory directly from within your own WordPress blog.

“Cookie Control is a mechanism for obtaining a user’s explicit consent for the use of cookies on their computer. It was created by Civic UK because recent legislation requires websites to obtain explicit consent before leaving behind or reading files (mostly cookies) on user’s computers.”

The Plugin sits in a fairly unobstructed location of your choosing (bottom-left or bottom-right are good places) and can hold user-defined text based on the type of cookies you use (basic blog, Google analytics, etc). Here it is when viewing this blog on a desktop / non-mobile device:

The admin pages reflect the ones readily available on the Cookie Control Configuration website (for those who want to use it without installing a plugin) where you can choose from different icons and position, as well as light or dark background to the text box, and you also get to enter your own specific text and links to your privacy policy (do you have one?).

Have you done anything to address the cookie-question, or are you going to carry on as business-as-usual? And if so, why and what?

Here are few of the storied being discussed on Twitter this morning:

“In an updated version of its advice for websites on how to use cookies the Information Commissioner’s Office (ICO) has said that websites can assume that users have consented to their use of them. The advice was only updated on Thursday, 48 hours before the deadline for implementing the new rules, and published the next day.”
The Guardian: Cookies law changed at 11th hour to introduce ‘implied consent’

“Fines for non-compliance were unlikely to be levied, he said [Dave Evans, ICO], because there was little risk that a non-compliant site would cause a serious breach of data protection laws that was likely to cause substantial damage and distress to a user.”
BBC News: Thousands of websites in breach of new cookie law

“The Information Commissioner’s Office has updated advice and changes to the EU cookie law on the ICO blog.  The guidance stresses that there is no ‘one size fits all approach’.  Dave Evans, the Group Manager for Business and Industry at the ICO, addresses some FAQs on the new law in a short video.”
JISC Legal
: ICO Cookies Update

Designing for mobile phones (not just specific browsers)

Learning Technologist often have to do more than work on the VLE and Learning Materials or provide workshop and training for pedagogical use of Technology in the classroom.

Often we have to get our hands ‘dirty’ and design web pages and even full websites. This is what I’ve been doing (sorry, I can’t show you yet, it’s definitely work-in-progress for a couple more weeks) with a fully CSS website.

This isn’t mind-bending stuff as I’m sure there are many LTs out there doing this and much much more. But for me this is different as I decided that for this project I’d make it compatible with Smartphones, specifically the iPhone – mLearning anyone?

The first thing I noticed when looking into this was the limiting factor of designing for just one handset or browser, and this something that has been levelled at application developers who design and develop their apps for the iPhone – what about those who use different handsets?

So instead of design for my iPhone, let’s try and do it for generic mobile devices. What they have in common is the mobile browser .. oh, they don’t, do they. OK, so the only thing I can really say with any certainty is that they have a certain screen size.

The code I used is based around the following guide on the RK Blog: Optimizing websites for iPhone and Android

To use two CSS files of “screen” media type, one for iPhone and Android, and second one for desktop use something like this;

<link rel="stylesheet" type="text/css" href="style_print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="handheld" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<!-- tell iPhone not to shrink mobile website -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The “only screen and (max-device-width: 480px)” apply to mobile screens, while “screen and (min-device-width: 481px)” is used to prevent desktop CSS from being loaded by the mobile browser.

Once this is added to your <head> content all you need to do is sort the CSS for the print and mobile users and you’re away!

If you are interested in helping me out by trying my website on your mobile, would you DM me on Twitter (@hopkinsdavid) please and I’ll let you have the URL – I want to see how it works on all sorts of mobile devices, not just Android or iPhone, so please please get in touch.

Please also get in touch if you have any other code examples which will help me, and others, sort this out if you think it’s easier or cleaner than the example I’ve used here.

  • For those running WordPress I use WPTouch – it does all this for you once it’s installed. Find it in the plugins directory.