So the reason I decided to create this site was because I wanted to learn more about the law and how it applies to the projects I work on.

Initially I was going to write an in-depth blog post about it but then decided to use it as an excuse to play with some funky new toys I have been meaning to play with for a while.

Learning about the law

Even the process of learning about the law was pretty interesting – on a quick pass you find a handful of websites aimed at the law and a few articles on it, but nothing major – but if you start to refine your search you find that there are hundreds of people chatting about it and there are a lot of conflicting views – it really depended on how you worded your search .

There is a question here around how neutral you can make yourself whenever you search on the web, the tone of question could very well dictate the type of answer, but that is for another blog post.

This project was the first time in a long time that I set myself a homework – normally I skim read dozens of articles, follow a handful of tutorials and generally coast through new things (I strongly believe this to be the most efficient way to be an excellent generalist).

This time I gave myself the task of learning about something in depth, writing notes on it and then summarising those notes in a way I felt would be useful to others.

I really enjoyed the process and I certainly think I am going to set myself more tasks like this – instead of maybe just following a tutorial, really getting my teeth into each section and writing about it in a longer form format.

The final takeaway point for learning about the law was the law itself, it seriously sucks, if you want to know about the EU Cookie Law, naturally you should visit the site but essentially it is just a bollocks law set by people who clearly have no real grasp of the technical issues involved in policing or enforcing something like this – it will crush small/medium businesses and put European trade on the back foot. Complete rubbish.

Technology

So the reason I decided to make a site instead of writing a blog post was I wanted a reason to try out Twitter’s Bootstrap – just to see if it was any good. Honestly, I found it confusing as hell – I can see the use as a bit of a quick template to get you going but the experience wasn’t anywhere close to what I assumed it would be like. I wouldn’t recommend it.

Whilst I was looking through the source of the Bootstrap I was reminded though of LESS, which extends CSS to allow it to do a whole manner of awesome things – LESS is just the bee’s knees, you can add variables to your code and apply mathematical and graphic methods to them, for example you can darken a colour by a particular percentage, this is so freakin awesome and time saving you wouldn’t believe.

I was worried it would be a bit of an arse to set up because I was developing on a machine that I haven’t really had the time to set up yet – to be able to compile the LESS files down to CSS I needed to install a node package, to install a node package I needed to install node, to install node I needed to install homebrew and to install homebrew I needed to install Xcode. None of these steps was particularly hard to do, it was just annoying to have to do them!

Once all the dependancies were installed I was flying, there was even a build package already built for Sublime Text 2 (my current text editor of choice) So I can just type cmd+b to save my less file as a CSS file.

If you have been to the site you will see that it is very basic – it is really just one long article – I had decided to use HTML5 because frankly only the elderly are still writing in HTML < 5, because there was nothing too fancy going on I didn’t bother including modernizr.js and my tests showed that IE7 handled everything just fine, which is more proof (if proof be needed) that HTML5  should be the standard doctype for your markup.

I also used this project as an excuse to dick around with responsive design – before you get too excited the site doesn’t do a massive pile, in fact it was designed to be flexible regardless of media queries, but I was able to write enough to get my head more around the concepts better than it had been before.

If you are looking and can’t see it, it is because it is that subtle, basically the gutters of the page decrease away to almost nothing when viewing it on a very narrow screen.

Analytics

One of the contentious issues around the EU Cookie Law is that analytics such as Google Analytics is not seen as core site functionality, and as such people need to be given the option to be able to opt in or out of getting the GA tracking cookie.

Obviously I didn’t want to have a site about the EU Cookie Law that breaks the law, so I decided not to install Google Analytics, or any other 3rd party analytics tools.

I have to say I forgot how much you get can out of the information stored by the likes of Webalizer that comes installed cPanel (which comes with my hosting) – on a project like this were my only real interest in analytics is to look at some visitor counts every so often Webalizer more than meets my needs. I am sure plenty would disagree with me but I am starting to wonder if I need to stop blindly putting GA code into my sites and instead work with what my server can log and give me.

Because I don’t have that tracking code installed, or any social networking plugins it means I could get away without any JavaScript on the site at all.

It has been years since I have been able to write a project that was 100% HTML/CSS and I have to say it was liberating – no debugging to do, no overheads to be concerned about, brilliant.

The Power of Hacker News / Reddit

The only promotion I did upon launching the site was to submit it to both Hacker News and Reddit, I had over 1000 hits on the first day and the traffic is still going strong. I couldn’t have asked for better!

Sorry for the long rambly post!

I don’t think that there is a correct answer, it depends on two things:

• Is the content likely to be something that needs to be printed out?
• Is the audience likely to desire to print the content out?

For example, a blog with long form articles immediately sounds like something that would benefit from potentially being printed nicely, but what if the articles were exclusively for mobile device users? Are they more likely to view your content on a screen or at least save it off to an offline service?

What interests me are sites that don’t have an immediate need for print style sheets but might be large enough that someone at some point in time would like to print them off.

Anyway, this article doesn’t attempt to dig into those questions, what I want to show off in this article is how some websites look when printed, and maybe open up a discussion on if they have hit the nail on the head or if they need to rethink their stylesheet.

I have chosen websites that wouldn’t have a massive use case for printing and also a few that would have a use case for printing.

All the images show off the first page of the print out and can be accessed in full by clicking on them.

Facebook

I was trying to think if I would ever want to print off anything from my Facebook wall, I don’t think I would – but as it is one of the most popular sites on the web I figured it would be worth including.

This was taken straight from my wall and as you can see it is a bit of a mess, elements that serve no purpose on a printed sheet are included (the search box, navigational elements) and things that could do with being expanded are not.

As I said I don’t know when I could see myself printing anything off from Facebook, but to be honest if there was a thread that I wanted to print I feel a little let down that there hasn’t been some thought put into it.

Google Plus

If I am going to mention Facebook I should also mention the other big social networks, the next of which is Google Plus. Unlike Facebook I can actually see myself printing articles off of this site, most of the people I follow are interesting and often write longer posts worthy of an offline read.

This is the first page from the main timeline, I don’t have much to comment here other than Google have dropped the ball – I think it is one thing to not have a specific stylesheet for print to improve it, but when it is actively broken, bad form!

Twitter

By this stage I am not holding out much hope for social networks, I am kind of assuming that the developers just don’t feel there is a valid use case in printing their pages and think the couple of hours of effort and extra space overhead aren’t worth it.

Much like Google Plus I have to say the ball has been well and truly dropped, there is nothing of use on the first page of the print out at all.

Google

Next up we have Google Search, this is something I have actually had call to print out before and my memory was that it worked OK, today when I tested this was the result.

Much better, kind of like the Facebook print there are elements that could probably be removed (navigational) but this is the first printout that fits nicely onto one page.

Expanding the URLs would be good.

Wikipedia

Now this is a site I would expect to get printed quite regularly and the first site that I would be pretty annoyed about if they got it wrong.

It is pretty good – It is the first where font has been made larger and there has been a clear removal of unnecessary elements.

There could be better styling in the contents section and it doesn’t handle breaking over the page well, but it is certainly readable and useful.

Hacker News

I figured for my next test I would try and print out a comment thread from Hacker News. I have wanted to do this once before as there is a lot of worth to be found within them.

As you can see it doesn’t look like they have made any special effort to cater for people printing their articles.

Reddit

It wouldn’t be fair to show Hacker News without showing a similar site, so I chose Reddit and again I chose the comments thread as again this is where you can find a wealth of information.

More of the same really, no thought put into the print stylesheet at all, by this stage I am too depressed to comment much further.

Smashing Magazine

Right, I wanted to end on a high by picking a well known website that a) has reason to need to be printed and b) has definitely talked about printing in the past – if this site doesn’t deliver I will eat my hat.

Phew.

Conclusion

It is my opinion that most of these sites have dropped the ball by not providing a good print fallback for their content.

I am aware that print as a medium is dying, but that isn’t to say that there is never a use case for it anymore, as an industry I think we can do better.

I would love to hear your opinions on the subject, either on the comments below or on Hacker News

Latest Edited: 04/04/12

Inline-Block – Why it rocks and why it sucks – A nice rundown of why inline-block can be used instead of float, but some potential pitfalls with it.

Subtle Backgrounds – Really nice subtle background images you can you use for your next project.

CSS3 Button Generator – For us lazy types who like GUIs for doing this sort of thing!

Vendor prefixes in CSS serve the purpose of allowing browsers to play about with their own implementations of new CSS rules or adding stuff totally unique to them.

There have been arguments back and forward about how useful these are in production systems and there have been some great tools made to try and reduce how much time we spend in vendor prefix hell, personally I think anything that drives the web forward is a good thing and I think prefixes do that.  But anyway, enough pre-able.

What I would like to propose is that since we have vendor prefixes anyway, could we use them to target specific browsers with already known rules.

I have an edge case where it would be really nice to be able to do something like;

margin-bottom: 59px;
-webkit-margin-bottom: 39px;

What this would allow me to do is set the standard margin-bottom to 59px (if it not being 60px makes you twitch, join the club!) but in webkit browsers I would like the margin to be slightly smaller.

I know this could be misused and end in really sloppy, massive CSS files – but if used with care (which I promise I would do) it would be a neat way to achieve these odd little hacks that occasionally we need to do.

You can read the full question and answer on the site, but essentially I needed to add;

* { overflow:visible ! important; }

into my stylesheet.

The issue, of course, was that my stylesheet wasn’t designed to hide the style of the unordered list items.  Here is the code I needed to add to remove the bullets.

#disqus_thread ul {
    list-style: none outside none;
}

Hope it helps someone.

An example of this would be when you have a td with a CSS property of width: 100px; and apply a colspan of say 3.

What most browsers seem to do is take that width and multiply it by the colspan, whilst this is sometimes useful it isn’t what you asked the browser to do.

IE7 doesn’t assume anything, it applies the colspan first then looks at the CSS and says ‘hold on a minute, they want this width set to 100px’ and applies it.

In my opinion that is the way it should work and well done IE7 for not trying to second guess me.

I found this when I was doing a quick search for new CSS themed Firefox plugins and whilst I was initially put off by the fact I had to install Adobe Air on my lovely new machine and the fact I had to sign up to a website in order to use this service I decided to give it a whirl.  After doing those things the process of using it was fairly straight forward.

You download and install the Air application, put in your key (which you can get from the website by clicking on your username once logged in), drag your local CSS file into the Air application and there you go, set up and ready to sync.

Once you have made your edit in Firebug you can sync either from the Firebug console itself, or from the Air application.

To sum up this very quick post I think my initial thoughts on this small app are very promising ones.  Get over the fact you need to sign up in order to use it and you will very quickly find yourself saving a lot of time copying and pasting small code changes.

The creators seem very keen to receive feedback and hopefully this app will continue to improve with each release.

So today I want to chat about the SM post entitled ‘50 New CSS Techniques For Your Next Web Design‘ it is a quality article (what else would you expect from Smashing Magazine) that basically runs down a list of blog posts and tutorials on how to achieve the very latest CSS things.  As with a lot of their articles you could always argue that this is all information that is freely available and perhaps that most web designers should already be taking for granted but the fact of the matter is that with so much new stuff constantly coming out, and so many people finding new ways of doing things these run downs are incredibly useful.

Things that I found especially interesting / useful were;

• Compressing JavaScript and CSS.
• Useful layout tips and tricks.
• Multiple Backgrounds.
• A whole lot more.

I would really suggest you bookmark this article and really spend time going through each of the sections.