Cibgraphics Design Studio

This week I was greeted with a nice surprise. Turns out that this page (which I designed and developed) had been included into a blog post of a very popular web design blog/magazine. On August 23rd WebDesignLedger.com posted an article titled 55 Excellent Examples of Websites Using HTML5 and this site was one of the ones included. The blog article was also posted on Smashing Magazine.

In addition this site was also included into the online gallery called HTML5Gallery. To be accepted you have to have exceptional design and code.

This proves that hard work pays off.

Text-shadows are becoming a popular method in web design. If done right, they can be done elegantly and beautifully. They are also easy to do when you know what the syntax is. As usual this is supported in every major browser except IE.

Example with text-shadow

Hello World

Without text-shadow

Hello World

The property accepts 4 arguments (or values). 

1. Color of shadow

2. The X-coordinate of the text-shadow

3. The Y-coordinate of the text-shadow

4. The blur radius of the text-shadow

In an effort to help the client out a little more, I have updated the site with a FAQs section. This will go over some questions that I get from the client a lot or some things that the client is sometimes confused about.

Now I know a lot of designers and developers come to my site to visit the resource page. The page is not gone but is no longer on the main menu. I might figure out something else for it but for now you will find the link in the footer. I think that it might have been confusing some clients into clicking on it expecting to find information for them. If you need a quicker link here is the Designer Resources.

If there are any other things that I can do to make the page more user friendly let me know.

Though all the talk of new features of Photoshop CS5 there is one feature that doesn't get a lot of attention. But for those working in this line of project, they will leap for joy in the improvements that Adobe has made to making animations.

First and foremost I am happy to note that Photoshop CS5 will finally be able to open animated gif files with all frames intact. Previously Photoshop would throw away all animation data and leave you only with the first frame of the animation. Needless to say this was useless.

The animation panel in Photoshop CS4 and previous was simple yet oddly hard to use. Mostly this was so because there was no good indicator as to what animation was going on. You had to remember what you did, and constantly preview your animation. Even more confusing is that if you wanted to make changes it was downright difficult to do so often resulting in starting over the animation process.

Gladly Adobe made some huge improvements to the panel. It is very easy to use and even more importantly easy to see what is going on and make changes.

Click image to see larger version

I wont go through how to make an animation but I will try to explain a few of the new things that have been introduced.

If you have ever used Adobe movie creation software than this will look very familiar to you. You have multiple layers in your timeline. Each layer has multiple properties that can be animated. Animations start by click on the stopwatch. The smart thing that Adobe does is that all you have to do is set the correct position in the timeline (using the scrubber) and change what property you want to animate. Adobe will then automatically set the keyframe for you. It is important to note that if you click on the same stopwatch it will turn off all animations for that property and hence delete your keyframes. If you need to make a change all you have to do is select the proper keyframe and move it to the desired position or change the property. 

There is many more features and options but that is the basic workings of the new panel. This is a huge refreshment over the last version and one that is very welcomed. It is easy (and fun) to create basic animations such as the one below.

I have seen many webpages attempt to secure their information by disabling the right click. Not only is this a bad practice, but limits your users in function that they would normally do.

First off, why is this bad? It is bad because it is very ineffective. Lets list the reasons.

It uses Javascript.

Any web savvy web user knows that javascript can be disabled. If they really wanted your content they can just disable javascript and bypass your script.

Print Screen

If they wanted your images, all they would have to do is do a screenshot and they have your image.

Menu - View Source

If you are trying to prevent them from gaining access to your code it isn't going to work. All browsers have an options to view the source from their menu systems. This gives them access to all your code and by consequence the URL's to all your images. Some browsers (Firefox, Safari, Chrome) have extensions that enable the visitor to see all your source code without the browser menu system so that is another way for them bypass your script

Takes time to load

Because it is a script, that means the browser needs to execute it. This takes time and browser resources which will make your site just that much slower.

User alerts

When a user does right click, they are alerted by a popup that the function has been disabled often requiring the user to accept the notification. This added click will do nothing but annoy the user who will often times just leave your site never to return.

____

Now the title said that it disables your users. How could the right click be a plus for users?

New Window or Tab

All browsers have the ability to open up tabs in one window. There are many users that use this functionality and a popular method is to open up links via the right click in a new tab or window. If you disable the right click it will make that method all the more harder to do.

Bookmarks

If the user wanted to bookmark the page via the right click menu, this would no longer be possible. The user would have to resort to the menu system. And unless you have really good content, they probably are not going to bother.

____

So you don't want people to steal your content, so what can you do?

Watermarks on images

Seems simple enough. It is a good start but be warned that even this is not fool proof. A poor watermark can be removed with an image editor.

Don't put it on the internet.

If you absolutely don't want certain content stolen just don't put it on the internet. It is 100% fool proof.

HTML5 bring in a bunch of new meaningful tags. Amongst those is the time tag. Its purpose, thoughtfully enough, is the give meaning to a date or time.

But what if you have a date, or even a word that means a point in time. What is the meaning behind that?

To give more meaning to it, you must use the datetime attribute.

So we can see that with HTML5, we can give purpose and meaning to time and dates.

You may have not noticed some changes on the site. For one, we now how Facebook Like buttons on the blog. Also, in blog comments you can now add some basic formatting to your comments. I also tried to reduce the load times on the pages so the site should be much faster.

Perhaps the biggest change is not a visual one at all. With all the blog posts about HTML5, it seemed kinda silly saying how easy it is to use and that you can use a lot of it right now, but not actually do it ourselves. So the whole site has been recoded to use HTML5 tags.

Let me know how you like the new changes.

No, we are not kidding. The famous color swatch company now owns their own hotel.

Located in Brussels anyone can sleep with their favorite colors (or color combination). As you can expect everything is colorful and in Pantone's color swatches. Colors are even labeled with the correct color identifier.

Take a better look at the hotel by visiting www.pantonehotel.com.

On a side note, they should really hire someone to fix the awful kerning problems on their site.

Google is great at making resources available for developers. They even host Javascript and other files so developers don't have to host it themselves. One of the most annoying aspects of creating webpages is the use of fonts. Usually you would have to make an image out of what you need, or you could use either a Javascript or a Flash solution. In fact, this site makes use of Cufon for it's special fonts.

Google has a solution. The Google Font API. If you know just even a tiny bit of CSS, you can use this. First you have a group of fonts that you can choose from. At the moment it is only a small selection but I am sure it will grow with time. You can visit the font library here.

After you pick a font you just insert the given code into your webpage. For example if I was to choose the Vollkorn font the code would be this:

Then you would make reference to the font using CSS:

The nice thing about the code/font library is that it is compatible with even IE6. If the library grows to a couple hundred fonts I can see this as a valuable tool for serious production in the future.

One of the many great new additions is the video tag. Yet this confuses people because they are not sure how to use it. To understand how to use the tag you must understand what video formats browsers use and support. Safari and Chrome use H.264 (MPEG-4), Firefox supports the Ogg Theora codec, and currently IE8 and below doesn't even support the tag but will in IE9. This leaves a problem. How can you add a video that will play in all browsers. First lets learn how to use the tag.

This your basic syntax:

To solve the problem between Safari/Chrome and Firefox you can modify the syntax like this:

This will display the video in each browser that supports it, but currently it will sit on the first frame with no way for the user to start or watch the video. To do that we must either add controls or make the video play automatically (or both). It would be also wise to auto buffer the video before playing. If you have multiple videos on one page, I would avoid auto buffering.

For IE, you will have to figure out what browser they are using with either a server language or javascript and then display a flash version of your video.

The nice thing about the video tag is that since it is HTML, it can be styled with CSS to personalize it they way you need to match your site and needs. The video tag is a block-level element so keep that in mind as you style it. As an added note, since you are using HTML5, why not try using some CSS3 to style it such as rounded corners and drop-shadows.