Two days ago this blog had a browser check implemented. It’s possible you’ve already found out by receiving a “Sorry, your browser isn’t up to date” message. I’m sorry if it frustrates you, but I want to let you know by doing this, that your browser isn’t up to date. Therefore, it doesn’t support the new HTML5 and CSS3 techniques. That’s why this website probably doesn’t look as good as you might expect.

Please let me explain this choice

I know there are more user friendly options to implement these new HTML5 and CSS3 techniques – Modernizr for example. Modernizr is a piece of neat javascript that let’s you use HTML5 techniques that somehow work for older browsers like Internet Explorer 6 and 7.

Cool! Isn’t it?

Certainly not! I love the tool and I respect the creators of it. But this is just ignoring the main problem in my opinion. I think that people that use older browser versions NEED to update to a newer, or even better, the most newly available version!

Come on people, don’t stick to that old, sluggish and insecure browser versions! Get it updated asap!

Why update?

A new kind of Internet is coming up very fast. There are new web applications created daily for your particular needs. Most, if not all of them, are coded with HTML5 and CSS3 techniques and older browsers just don’t support these kinds of features!

So if you want to miss out on all the cool stuff that’s regularly becoming available, be my guest! But I don’t think you do, so that’s an excellent reason to keep your browser up top date.

Where to update or download

You can update (or switch) your browser by clicking on one of the links below.

• Download Google Chrome (recommend)
• Download Mozilla FireFox
• Download Opera
• Download Apple Safari
• Download Microsoft Internet Explorer

I recently saw the campaign from Suit Supply again which was launched in the Netherlands last year. Suit Supply stores are stores that sell…yes! Suites! They always have interesting and edgy commercial campaigns.  With this campaign, called Shameless, even I thought this could be too much for some people to comprehend.

Yeah, it’s daring

In my opinion, the Shameless campaign is pretty controversial and even provoking in some degree. It features photo’s of male models in suites accompanied by a female model. The female models had to attract attention towards the suite. How? By posing in a slightly sexual way.

In think it’s one of the coolest campaigns I’ve ever seen. Not only due to the fact there are beautiful woman in it. The whole style of the photo set appealed to me. It’s one of the most daring campaigns ever I think.

Bad publicity helps

By choosing this kind of exposure for your company, it will almost immediately get bad publicity. There are always people that will find it to controversial and “sexual” for others to see. These people will complain as hard they possibly can towards everyone they can. In the meanwhile they’re giving Suit Supply publicity and some extra unintended exposure. Pretty crafty, isn’t it?

Their new campaign, Like Skin, features similar styled photographs and even a lot of skin. But as you’ll see, this one is more modest and not that controversial. You can find their new campaign running on their website www.suitsupply.com.

The campaign

Below you’ll find all photo’s that were used in the Shameless campaign. Be advised though, there’s some slightly “sexual” content involved. High res versions are available here.

For our mobile payment system I needed to create a product information brochure. It had to feature all prices and possibilities available. We decided to only use one sheet of A4 paper so it would be easier to hand them out.

This week inspiration list is a big one again. I’ve had a lot of inspiration this week and like to share with you guys. My favourite of the week is #1, the egg photography. I almost wet my pants laughing when viewing that page! Hilarious, creative and a weird source of inspiration.

1. Creative & humorous Egg Photography

Very hilarious photography featuring simple eggs. I laughed my pants of when viewing this set of photo’s. very inventive and for me a real source of inspiration. Why? It shows that normal stuff can be cool too!

2. Magical examples of tree photography

When shooting in nature you can’t miss trees. I see them almost every time on nature shots. This set of photo’s however are one of a kind! Really inspiring to go outside and create similar photo’s!

3. 30 excellent examples of color usage in web design

It’s hard to choose the right colors for your design. It takes a lot of testing to get to that perfect outcome you’ve had in mind. These set of examples can point you towards the right direction.

4. 40 tasteful print poster designs

Yet again a beautiful round-up of print poster designs. Some are great examples of design works, others are a good example on how to use brushes in Photoshop in an arty manor!

5. Water inspired websites designs

These website designs are all inspired by water and dedicated to World Water day. The International World Water Day is held annually on 22 March as a means of focusing attention on the importance of freshwater and advocating for the sustainable management of freshwater resources.

6. Ghost in the machine by Erika Iris Simmons

Talking about creativity, this is probably one of the most creative stuff I found in a while. Creating art with use of old cassette tapes? Erika Iris Simmons did the job very nicely!

7. 45 fresh new business card designs

A nice set of original business card designs. From different sizes to cool cut-outs! Designers have been very creative on these cards. I’m sure nobody will forget one of these when they receive one!

8. Illustration Inspiration

Some amazing and high quality illustrations from different designers. Some of them movie inspired, others just created out of the box.

With HTML5 being supported by more and more browsers it means the <video> tag is getting some real broad support! Which is good because it doesn’t force you to install a plugin on your system.

In my opinion that’s just great! It will make life better for every web designer out there. Or not? Due to heavily fighting over video standards it still needs different types of implementation per browser. Google and FireFox are going for the WebM and Ogg Theora codecs, while IE and Safari want to have the H.264 standard implemented.

Nobody will win this fight most likely, so it’s wise to do a little more work and encode video’s with different codec settings and add different options to the video tag.

How to implement the video tag

Having explained why the <video> tag rocks, it’s time to show you guys how to use it within your HTML code. It’s pretty simple I might say.

<video>
<source src=”video.mp4” type=”video/mp4”>
<source src=”video.ogv” type=”video/ogg”>
Sorry, you’re not running an up to date browser
</video>

Pretty easy isn’t it? This is not everything that’s possible. There’s some more too it as you can read here. I won’t explain them all. I’ll only keep it to basic options.

If you want to add controls to your video you need to add the bottom part within the starting <video> tag.

controls=”true”

Autoplay your video? That’s possible too! You need to add the following code to the starting <video> tag again.

autoplay=”true”

It’s also possible to buffer your video. Then add the code below to your <video> tag.

autobuffer=”true”

For other functionalities I would advise you to read this article I also mentioned above.

How to style it with CSS

Now that you know how to add a video with HTML5, it’s time to style it with CSS. Yes, you can style it with CSS because its HTML and not a plugin like Flash or Silverlight.

Styling works similar to other items you would style with CSS. The <video> tag is a block-element so it will support padding, margins, borders, backgrounds and more.

So having said that the styling could be like this:

video {
border: 1px #222222 dotted;
border-radius: 4px;
padding: 10px 5px 0px 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

This would result in a dotted rounded corner box wherein the video itself would reside. The box would also feature a need drop shadow effect! You can find more about drop shadow with CSS3 here.

These new features will be implemented more and more, including the <video> tag HTML5 let’s us use. Therefor I advise people to upgrade there browsers to their latest version. You just don’t want to miss out on this cool stuff!