I quickly ran into issues though. Now, it wasn’t anything that animate.css does or doesn’t do. More the fact that there was no way to replace jQuery animations with the CSS3 fancy-pants ones.

“What did you do?” I hear you ask.

Well, I’ll tell you. I wrote a little function that handled adding the classes to any element dynamically. This gave me a little improvement in terms of ease of use and speed. There was still something missing though. I only realised when I had 3 animations that needed to run one after each other, that there was no way to determine when a CSS3 animation had completed so I could run another one. In the interim I set a delay parameter so I could say ‘do this, wait 3 seconds then do this’.

This ‘callback’ functionality does exist and CSS3 animations do indeed trigger an event when they finish, you just need to set a javascript event listener to detect that so you can apply some actions. After a little Googling I added this to my function. This now worked in a very similar way to jQuery’s own animate function so it was very familiar.

Then came the plugin

A few weeks later, Dan (@_dte) mentioned me in a tweet saying that my site was using his animate.css and looked good. I thanked him and showed him my jQuery function that helped. He seemed suitably impressed and asked if he could use it. It was already a public gist on github so I said no problem. That evening I decided it would be even better if it was an actual plugin that could be used in an even similar way to jQuery’s native functions. And so jQuery animateCSS was born.

To use it is pretty easy.

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    alert('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', 500);

With delay AND callback

$('#your-id').animateCSS('fadeIn', 1000, function(){
    alert('Boom! Animation Complete');
});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

<style>
    .js #your-id {
        visibility:hidden;
    }
</style>

$(window).load( function(){
    $('#your-id').animateCSS('fadeIn', 1000, function(){
        alert('Boom! Animation Complete');
    });
});

Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews).

Again, the plugin is available here: https://github.com/craigmdennis/animateCSS/

That’s it guys. Have fun.

Let me start by saying that I am not a developer, I am a designer who dabbles in jQuery and as such my code will probably not be the cleanest or most efficient but it gets the job done.

I will also assume you have some basic knowledge of jQuery.

View the demo

Recently I had to create a sophisticated jQuery interface initiated by clicking an icon and showing a div then fading it away upon leaving the div. The problem was the shape meant that when a user moved the cursor from the icon to the div they briefly left the confines of the div and as such the div would fade out. This was a problem and the solution seemed to be the Hover Intent plugin which allows the mouse cursor to leave the div and re-enter it within a certain number of ms (milliseconds) and not fade out the div (or whatever action you have written).

This is great right? Well yeah, but this only works when you hover over an element to begin with. What happens when you want to initiate the initial action on a click instead of on hover? This was my problem.

My solution:

So lets set up Hover Intent set up to work on hover with a mega-menu. Below is just the jQuery, you can see the html and CSS in the demo if you want to or download the source files here.

$(document).ready(function(){
$('body').removeClass('no-js'); // Removes the class 'no-js' from the body to let us know javascript is enabled
function slideTheMenuDown() { // This function is called by hover intent 'over:'
$(this).find('.subnav').slideDown('fast'); // Slide the menu down
}

function slideTheMenuUp() { // This function is called by hover intent 'out:'
$(this).find('.subnav').slideUp('fast'); // Slide up the sub menu
}

$('ul.topnav li').hoverIntent({
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100,   // number = milliseconds of polling interval (we want this to be initiated on click rather than hover)
over: slideTheMenuDown,  // function = onMouseOver callback (required)
timeout: 500,   // number = milliseconds delay before onMouseOut function call
out: slideTheMenuUp    // function = onMouseOut callback (required)
})
});

Now that we have Hover Intent working on hover all we need to do is wrap the function slideTheMenuDown in a click event. When Hover Intent reacts to a hover event, there is no action until the associated click event has triggered (basically until you click nothing happens). The result is no animation until you are hovering over the desired element and are also clicking it. Sweet right?

This is what it looks like

function slideTheMenuDown() {
    $(this).click(function() { // We wrap the action in a click event
        $(this).find('.subnav').slideDown('fast') // Slide the menu down on click
    });
});

That’s it, you’re done.

I have added a few embellishments such as adding an active class to the parent li so when you hover onto the submenu, the hover state sticks on the top level menu item.

Get the menu style as a psd from Premium Pixels

View the demo

Yesterday at work I stumbled upon an idea that I haven’t seen before when dealing with pure CSS drop-down menus. The general premise is to use an unordered list within an unordered list activated on hover of the parent li. This is pretty standard (but won’t work in IE6 due to hovers only being available on anchor tags) and was no problem to implement:

View the demo ›

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
    </ul>
  <li><a href="#item2">Menu Item 3</a>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

The problem?

The problem you will notice is that as soon as you start to hover over the sub menu items, the main menu item returns to it’s native, non-hover state. This is a problem as this affects the aesthetic quality of the menu and goes against the expected action.

The solution

The idea I had to solve this problem was to add anextra list element at the top of the sub menu unordered list and absolutely position it over the item on the main menu when the cursor hovers over the sub menu. Again this action is only supported by IE7 and above.

1. The list item will have a class ‘overlay’ applied to it so as it can be uniquely identified.
2. The list item will have the same text and same link destination as the main menu item.
3. position:relative; needs to be added to the sub menu unordered list in order to add position:absolute; to the class ‘overlay’
4. The position of the class ‘overlay’ needs to be the negative value of the sub menu list items. So if your list items are 20px in height, the class ‘overlay’ needs to have top:-20px; applied to it.
5. For some reason float:left; needs to be applied to the sub menu unordered list for the effect to work properly in IE7.

Have a look at the code below and check out the demo

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li class="overlay"><a href="#item2">Menu Item 2</a></li>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
   </ul>
  </li>
  <li><a href="#item3">Menu Item 3</a></li>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative; float:left;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

This is the basic principle. View the demo to see it with some styling.

View the demo ›

Please feel free to comment with any improvements or criticisms.

Let there be light!

The main thing to realise is that all browsers are not created equal. Older browsers lack support for new technologies (CSS3 / HTML5) and render pages in sometimes odd ways. They also tend to be less forgiving with various structural models and dynamic scripting languages like JavaScript. Something often forgotten is that some users may decide to turn off features in browsers or may be impaired in a manner which affects their browsing habits.

Examples include:

• disabling JavaScript
• disabling images
• not using a mouse
• using a screen reader
• using a text-to-speech device

Now while it is near impossible to include in a design every aspect that could affect the way someone experiences a website, there are things that can be done to improve the experience where possible.

Graceful degradation

“Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.”

– Fluid Thinking, by Peter-Paul Koch

Graceful degradation is finally being addressed as the wrong way to approach the problem – design utilising the most advanced features of a browser and where a browser is not capable of implementing those features, a compromise needs to be made. The testing of older browsers is often done towards the end of the development cycle. More often than not this results in a less pleasing site for those using older browsers. This mainly affects IE6 which is still widely adopted throughout the corporate world. Using this approach focuses on using the latest technologies and not considering the experience for people with older browsers, disabilities or with certain functionalities disabled.

So how do you add bells and whistles to a site while maintaining  focus on usability and experience? The answer is in the design process. By first focusing on what ‘everyone’ will see and use, you can address the broadest issues. Bear in mind that a good experience with a site does NOT mean pretty pictures (although they can help) and a person can have a good experience on a simple site, for no other reason than being able to do what they want to do with ease and no interference.

Progressive enhancement

Leading on from core usability is the inclusionof  features to improve the experience for those people who are able to experience them – this is known as ‘layering’, starting with semantic  (X)HTML, wrapped in some CSS and finally some JavaScript on top.

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

– Wikipedia

There is a far more tasty explaination using an M&M that defines the same point:

“Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).”

– Aaron Gustafson

Good for SEO too?

When you write rich, semantic (X)HTML you are making life easier for search engines to index your site. It is written in a predictable, organised fashion and as such means the search-bots are more likely to pick up on any extra information as well as index it in the way it is intended. If you think about a search-bot ‘seeing’ in a similar way to a screen-reader, they generally only read text and links and with progressive enhancement you have given them both the best opportunity to get the most out of your site.

In practice…

It’s difficult to keep this in mind when you want to use newer technologies to make your life easier. CSS3’s rounded corner declaration or shadow facility would be great, but what happens when you meet a browser that doesn’t support it? As long as the contrast of text to background is suitable and the corners are not an integral part of the design then they will just have square boxes and normal text – something that doesn’t affect their experience too much and won’t affect the usability in any way.

This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

1. TimThumb.php
2. Get the Image script (includes a TimThumb.php in a package file)
3. jQuery
4. WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image()  gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.

This got me thinking about the actual likelihood of this occurring. At the moment, most web sites are built to WC3 standards and comply with various levels of accessibility, but we are all still coding for IE6 to some degree. There is always a dedicated machine (virtual or otherwise) that is running the dreaded browser. It’s strange to think that the IE box model is actually a better way of viewing content on the web but it causes so many other issues that it has been demoted in favour of a more forgiving model.

So how long are we going to be checking out work on IE6? It’s been around since 2001 and has yet to die as the Twitter hashtag #IE6MustDie can attest to.The reason is that in most corporate environments it is still the predominant browser and as such has a huge user-base. This is not due to choice though.

So if that is the case then, we need to replace the corporate world’s browser to Firefox something else. With IE9 peeking its head over the horizon and Windows 7′s record breaking adoption rate, could we finally start to tell clients that we will not support IE6 in our designs? This depends on the client themselves. As the majority of work the company I work for does involves insurance companies which tend to lend themselves to a more corporate environment, will we ever be free?

Windows 7 looks like a very stable OS and with Office 2010 and their online suite looking to take off, now might be the right time for companies to overhaul their outdated systems and with it their browser. A lot more companies now are allowing their employees the freedom to choose browser and Windows 7 incorporates this into their setup (UK only).

The sad fact of the matter is that no matter how far along we go, web technology has a leapfrog progress. We constantly have to account for older generations of browser or markup. CSS1 to CSS2 and now to CSS3 means we can do more but we have to make sure that they degrade gracefully to ensure people with the older stuff can still get a good user experience. This obviously applies to HTML and all this hangs on a browser being able to render it correctly.

The only recent experience that has given me a glimpse of the death of cross-browser compatibility issues was designing a mobile site specifically for the iPhone. All iPhones/ iPod Touches are the same size, screen resolution, brower and OS. This means that if I design and build a site that works on one iPhone, it will work on all of them.

I can’t put it any simpler than this: IE6 causes longer development time, more expense and a worse user experience so stop using it and use something else.

Topics covered are things such as graceful enhancement and graceful failure, designing specifically to allow access on various mobile browsers and adding enhancements to the site to improve user experience on the desktop browser or to allow them to fail gracefully so as still accessible on the mobile platform.

Doing this has inspired me to design a mobile specific version of my own website. Now while I would (ideally) like to create a version that is designed for all mobile platforms, I think I will start with just the iPhone.

Step one is already complete! Which is to say I have set up craigmdennis.com/iPhone/. Really tricky stuff…

The next step is to set up some kind of automatic detection and redirection to make sure if people using an iPhone access my site, they get taken to the iPhone specific version.

There are several tricks and treats (pardon the Halloween pun) available when designing a site for the iPhone that allows for the use of certain javascript functions to make use of the touch screen and the orientation detection. Something that means you can even show completely different content when the orientation of the iPhone changes. A great tutorial from Engage Interactive shows what is needed to do just that.

So I am designing a basic UI to navigate to the various sections of my site: Portfolio, Blog, Photography & CV. I want to make sure of the iPhone style photo navigation but that will be a little later on. I can’t decide what to do for the blog section and whether to have a list of titles, titles and descriptions or just the most recent post.

I also have to figure out how to turn off the iPhone redirection when linking to the ‘normal’ version of the site.

“Yeah I’m a web designer”

That response to a question about your chosen career path used to lead people to think that you live in your parent’s basement, wore square glasses taped together, wore your trousers too high, were bad with girls and were generally a massive nerd.

Oh how times have changed (for some). As has the role of the web designer.

Web design is more than just coding a website, web design is now just a tool in a larger process. More and more is being included in the sphere of web design as the need for conversion on the web is becoming more and more important. Investment in advertising on the web recently overtook advertising on TV for the first time which means that we need to design the user experience rather than design a ‘website’.

During the process of this ‘experience design’, there are many more aspects that are involved than just a website.

You may be designing an entire campaign centred around a site or it may just be that you are AB testing two or three or even five designs for improved conversion. How does a user move through the site. Which pages are they landing on when they reach your site? Which PPC leads them to which section? There is a huge role for analytics on websites to try and determine all of these factors and design / test new ways to increase the number of users reaching an intended goal. More often than not meaning parting with some dosh.

Then there is SEO to consider, something I am learning at the moment. Things like URL structure, alt text, anchor text and conomical URLs can have an effect on the keywords your site is found with. There is a large market for optimising websites for search, and as search engines get better – so too must the way we optimise for them to maintain hight ranking.

One of the most recent and yet important inclusions is that of social media campaigns into the design.

Use of sites such as Facebook and Twitter to promote a brand also promotes brand awareness and gives the market an opportunity to have direct communication on an open platform. This means valuable customer feedback (positive and negative) can be obtained at no extra cost.

The added benefit of social media inclusion is in the realm of search. If you search for a brand on Google you get a list of results related to that brand, but some may be negative from people bitching on forums etc. The more social media sites you have such as Twitter or Facebook push those negative results down and even onto the second results page (and who looks there?).

So the whole process can be done by one person but really you need an entire office of ‘web designers’ each with their own focus in design.

So am I a web designer? Yes… but really I am an experience designer with a specific focus.

Compilations such as ’30 Fresh and Inspirational Portfolios With A Twist’ from Smashing Magazine are fantastic as portfolio pieces and happen to be portfolios which seems to be a perfect combination. They have great work and nice looking sites but it all depends what message you want to send.

This is what I am now thinking about. What message do I want to send?

Well…

• I want a job and want people to want to employ me. So I need to come across as professional.
• I want to be taken seriously as a designer so I need to show that there is a reason for the things I have done and show the thinking behind them.
• I want people to pay attention to the things I say so the content needs to be the priority.

So do I need a flashy website with bells and whistles? Not necessarily, I need to have a site that is accessible and looks professional, getting people to what they want to look at as quickly as possible. Sure there can be bells and whistles but so long as they add value to the user and are not just there for the sake of it.

In the design of my current site I knew I wanted certain things that would add value to the first impression of it as well as keep people coming back.

Things I added…

‘Read More’
This allows me to break the content into an introduction and only list that on the main page rather than the whole content as I had it before. It makes the most use of available space and shows more content for people to see if they want to read further. If they want to read more then they can, otherwise they just skip to the next post.

Recent Comments
Show other people’s views on my posts means that those posts are more likely to get attention from people who are either interested in the content or just wanting to see what all the fuss is about. I want to encourage discussions. If I have said something that is inaccurate, I want to find out why it is. Being proved wrong is just as valuable as being proved right.

Recent Tweets
Twitter has become huge and I have been using it for some time. I always wanted to find a way to integrate it into my site so that people who might not know about Twitter or who might not otherwise have seen my tweets, gets to see them. Instead of having one tweet at the top of the page I added the most recent three in the sidebar. With three tweets people can judge if they find them interesting, funny, useful etc and make a better judgement of whether they would like to follow me.

Recent accomplishments
Whether it is awards or podcasts, I think it is important to show what you are proud to have achieved recently.

More categories
Originally I only had four – Personal, Projects, News, General. I was using tags to describe various posts but while this is good practice it was actually rather stupid because the tags were listed at the bottom of the sidebar in a cloud. So more categories means a faster and easier way for people to go to what they’re interested in.

My External Links
YouTube, LinkedIn, Flickr, Twitter etc are all separate sites for a reason, they all provide different tools or features to people. I want someone to be able to get a good idea about me by looking at all the things I do so I include as many as possible. I have even included my Facebook but you will have to send a friend request to see anything. Each link says something about me as does the last time I used that site.

Links in the footer
This was more of an experience thing than anything else. When you scroll to the bottom of the page, you no longer have access to the menus that appear at the top without scrolling back up. Having the most used links at the bottom means that the experience doesn’t need to be interrupted by innate scrolling up to find a link. However if people do want to go back to the top I have included a ‘Back to top’ link that does just that. The active clicking of the link ensures that the experience continues quickly.

Recommended Posts and Natural Language
Linking directly to posts that relate to what has just been read is valuable because it shortens the time for people to navigate to other content they might like and also increases the likelihood of them staying on the site for longer. Using language like  “If you liked this you might also like…” rather than “Related Posts” is a much more human way of interacting a reduces the sharpness, again increasing the chances of further reading.

What all of this has led me to discover is that my site is perfect what what I am using it for. It is clear, professional and the content is the main point. It does what it needs to do and it does it well.

So do I want a flashy, all singing, all dancing website? No thanks, but I like to see what can be done. Does that make me boring? No, it makes me more creative

After much arguing through many emails I have decided to defer my vote to someone else as it’s getting heated. Just need someone to make a creative decision who is higher up in the hierarchy than we are.

Forgetting all of that stuff, I have redesigned my website, business card and all pdf documents and updated my ‘brand’ since doing that for the final degree exhibition. I changed the colour to 100% Magenta instead of orange but kept the same font The portfolio section is now up with proper descriptions, pictures and styling (with some more projects to come when I get a chance).

My business card can be seen below and yes I am aware that the back of the card has the wrong corners rounded in the image.

While at Samsung I noticed that my new website design did not look correct in IE6 (no surprise there then) so I spent some time correcting some CSS problems. No sooner than I had done that than I tried it in Safari and it failed even more to display correctly.

After several hours trying to figure out what the problem was, changing (and improving) my CSS stylesheet I discovered that even though I zero’d all margins at the start of the CSS by:

* {margin:0px; padding:0px}

Safari is a bitch and does not recognise that. So after several hours of trying, finally declaring the padding and margins as 0 for ul and li elements as well as entire divs, the formatting magically came into alignment in Safari.

After doing all that, feeling like I needed to vent some of my frustration and being British I wanted to write a strongly worded letter to Mr. Jobs. Instead I am blogging about it. This in itself proved more difficult than first anticipated as when I logged into Worpress, the visual text editor for the post screen had gone and all the text was coming out in white! After a quick Google and a re-install of WordPress 2.8 the editor came back and I can see what I’m writing now.

I have just received an HTTP error while uploading my business card image. Seriously what is going on with the internet tonight?

Now the reason I am blogging at this late hour and not in bed, asleep in preparation for work tomorrow is simple… There are people in my house who I don’t know, playing very loud music. I hope tomorrow is a better day.