The HTML spec recommends to use UTF-8 as this is a superset of the commonly used ISO-8859-1 and is backwards-compatible with ASCII.
UTF-8 has a wider range of characters to which you type directly on you html documents.

For example you are using utf-8 as your charset on your html5 documents this means you can type the pound sign(£) directly into your html instead of “&pound” the only ones you still have to use the ordinary html entities are “<” and “>” due to it’s direct connection with html documents.

I would recommend reading the spec on this matter and the wikipedia article on UTF-8, being the later a very completed overview of UTF-8.

Conclusion

Either you are using XHTML or HTML5 i would suggest for you to stick with UTF-8 as the standard charset.

HTML5 Straight to the point - Elizabeth Castro

Book Description:
This project-based book walks the reader through the creation of a Web site, using HTML5 and CSS3. It shows how to use the new HTML5 syntax (article, section, and so on)  and also how to write JavaScript to force IE to recognize that code so that it can be used right now. It covers the newer parts of HTML5 (such as canvas and video) with a strong emphasis on what works right now, using what people are calling “progressive enhancement” (writing web pages that can be viewed by all but that those with superior connections/systems can see in better ways). The book uses a combination of project examples and explanation to teach HTML5 thoroughly and succinctly.

Amazon Page - Elizabeth Castro website.

HTML5 Up and Running - Mark Pilgrim

Book Description:
HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You’ll learn how to use HTML5 markup to add video, offline capabilities, and more—and you’ll be able to put that functionality to work right away.

Publishers Website - Mark Pilgrim.

Introducing HTML5 - Bruce Lawson, Remy Sharp

This book provides great information on HTML5 with good examples and plenty of resources to help you to conquer the new world of HTML5.

Bruce and Remy, teach you to how to implement the new features of html5 in an accessible way and informing the reader on what works on todays browsers.

Book’s Website - Bruce Lawson Website - Remy Sharp Website

HTML5 Designing Rich Internet Applications - Matthew David

HTML5 came to improve the web development world and in this book Matthew shows you what HTML5 can do for your websites by providing demo applications and tutorials that illustrates the power and interactivity offered by html5.

The companion website visualizetheweb.com has many resources, and information to further develop your skills in html5.

Publishers Website - Matthew David.

HTML5 for designers - Jeremy Keith

This is an 85 pages book which transforms a long and tedious spec into a brilliant user’s guide by cutting the chase with practical examples.

The author is Jeremy Keith the author of DOM scripting and Bulletprof Ajax. He also blogs at the adactio.com

Order - Alistapart Website - Author Website

The web is an exiting medium for a long time and with HTML5 coming a long way to a stage where is markup elements are supported in most popular browsers.

Recently i have listen to the Big Web Show podcast hosted by Dan Benjamin and Jeffrey Zeldman, in which they interviewed Jeremy Keith a well known personality of the web design community and author of HTML5 for Web Designers its most recent book.

Well after that episode i got the bug of html5 and started experiencing whit it a lot more, but there is always the issue IE7 / IE8 html5 support so for client work i am using this sudo approach explained in the podcast by Jeremy Keith.

This approach consists in adding div’s with classes that map to the new html5 spec.

But in some new personal projects i am using straight html5 and to make htm5 markup work in IE7 / IE8 i have include HTML5 shiv a javascript piece of code developed by Remy sharp.

This piece of code does wonders and is available here.

You can check HTML5 enabling script blog post where Remy Sharp introduces this script and gives basic instructions on how to use it, but basically you have to place the script in the header of your website, this being place inside IE conditional tags as follows:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

If you can rely on the use of javascript for your next project why not take HTML5 for a spin.

One last word is that if you want to be on the top of html5 i suggest you to subscribe to html5doctor website as this is full of very useful information related to html5.

One of the most fascinating disciplines of design is packaging design and i always check for those when searching for that special details.

Well today i was doing just that and i decided to grab a few of the packaging designs that i enjoyed and i thought i would share it with you.

Resources

• Flickr Design Packaging

• Flickr 99 Design

• Lovely Package

• MIAD Communication Design

Let’s check the interview and you will understand his approach to this industry.

Renato could you please introduce yourself for Keycss.com readers?

My name is Renato Marques, I´m a 26 years old, a motion designer, living in Lisbon.

I work mainly as a motiongrapher, but I´m starting to produce my own projects,
where I can create the concept, direct and do the design components.

This doesn’t mean that I don´t like to work with a team, because I do, and I think that it’s really important, but from time to time, it’s good to be in control of everything.

The kind of work that i really love to do, is without a doubt, title sequences.

It´s that kind of work that grows, while your are working on it, you get to try a bounce of different things in oppose to advertising.
 

What made you start a career in the design industry and has anyone in particular influenced this decision?

The design thing happened casually before going to college.

I was actually thinking in becoming a painter, because I always liked to give a personal interpretation of life and things, and for me painting was and still is a perfect way to exorcise feelings and aspirations. In the meanwhile I thought that maybe it wasn’t enough for me and I changed my mind and went to college.

I finished a degree in communication design, but without really knowing what design was in fact, which is something that I´m still trying to figure out.

So, in a way or another, I think that I can say that painting helped me in my decision, and still helps me now. It’s a perfect way of freedom in visual communication.
 

Alright interesting path, so when you first began your career, what were the biggest challenges you faced?

There were plenty. From the industry that is still pretty closed in Portugal, to the payments.

Starting in this industry is not easy at all, you have to really love what you do, or else you are not going to make it. But fortunately I got an internship at Euro Rscg 4D Lisbon, that allowed me to learn how the Industry works.

The other thing that was hard to handle, was the rhythm, which was completely different from college as all the hours and dedication necessary in this area is a lot.
 

What was your view on the design back then? Has your perception changed since?

Yes it completely changed.

When I started, I looked at Design as a personal communication tool, and I wanted to use it, without any method at all, in a way I was using it as a art tool nothing else.

Now I see it more as a way to communicate what others want. For that I have to have a method for me to achieve results constantly, and not work Design as Art, in spite of doing that sometimes.

5- How do you typically start a new project any method in particular?

I always try to search for references, to see what was done on the kind of work that I will be doing. Then I try to find the right font, and when that happens, everything becomes real easy. And from then one it´s all about experiment. That is mainly it. It´s a research process, that leads to the creation of the first mood boards.

On my last interview with motion designer Jorinna Scherle she mention that she gets inspiration from things like nature or modern art, In your case is there any process that you follow for inspiration or brainstorming ?

My main references are movies. I watch as many as I can, with the maximum attention to detail as possible. For example Fight Club is a huge source of fantastic references, not only because of the aesthetics, but also for the “twists and turns” that inspire me, with out a doubt.
 

For me when I design I have music as my best friend really like it and I always wanted to know if other fellows designers have something similar to stimulate the design process, does music influence your design spirit or there is any other particular thing that help you going?

Totally! When I´m tired or out of focus, and have a project that needs to be delivered, I always depend on music. One of my favorites is Cinematic Orchestra. Their sound has a power that involves you, and pushes you to your “zone”.

I recommend every one to see and hear “The Man with the Movie Camera”, which the sound track is from Cinematic.

I have other tricks to keep me motivated, like, working at home, instead of driving to my office, which, for me, is pretty cool to have that freedom. I also like to “download the internet” searching for good references, for a particular project.

When you first started what was your very first paid job or project you performed as a graphic designer, any interesting story you would like to share?

I honestly can´t remember that. But I will never forget when I saw one illustration I did printed in the morning paper. That rush really became a fuel for continuing forward, and searching what I want.

Is there any advice you give for new comers to the design industry?

Everyone “copy´s” works from somebody, my advice is to copy from the best.

Do you have any preferred artists that you like in particular? 

Pleix is certainly one of them. They are mainly responsible for my decision to start working on motion design.

They have such groundbreaking work. I am still amazed admiring their work several years later.

Is there any online resources or feeds you follow related to the industry?

Several:

• www.motionographer.com - for inspiration.

• www.greyscalegorilla.com/blog/ - for understanding.

• www.videocoplilot.net - for learning.

What are your 5 favorite sites online?

That’s not easy, but:

• www.motionographer.com

• www.greyscalegorilla.com/blog/

• www.renascent.nl/

• www.fakepilot.com/

• www.pleix.net/

Where can the readers find out more about you and your work?

I have a new site that is going to be easily updated. that is www.cargocollective.com/renatomarques, so stay tuned.

I have there all of my contacts and my best work.

Thanks for everything, and keep up the good work.

Conclusion

I would like to publicly say thank you to Renato for his time in answer to my questions, and that i really appreciate his work.
Please time some time o see his work online, and you can start be whatching the video below.

INL SHOWCASE DIRECTOR´S CUT from RENATO MARQUES on Vimeo.

This is a showcase of work done for the inauguration of INL. There was total creative freedom, which was great. The agency was Grey Lisbon.

The overall idea is that we request xml data via “ $.ajax “ function and the response generated is a DOM(document object model) tree with which we can easily traverse utilizing the power of Jquery.

Note: All files are placed inside the same folder.

1. The XML file

This xml file is a simple task list with three elements and each element has two child nodes, the task heading and the task body. A simple file to make the tutorial simple enough.

<tasks>
	<task>
	    <heading>Reminder</heading>
	    <body>Don not forget the game this weekend!</body>
	</task>
	<task>
	    <heading>Beer after game</heading>
	    <body>Let go for a beer after weekend</body>
	</task>
	<task>
	    <heading>Ah! subscribe to keycss.com</heading>
	    <body>Don not forget to subscribe to keycss.com RSS</body>
	</task>
</tasks>

2. The HTML page element

I have included an unordered list with the id of “place-holder” and in this list I will append the results provided by the jquey request.
So inside the body tag of your html document paste the code snippet below:

 <ul id='place-holder'>
 </ul>

3. Download and setup Jquery

I like to link to the jquery file hosted on google code in Google Ajax Libraries, there you will find jquery link among other popular javascript libraries.

The reason for this is that a general part of developers link to this this file therefor is most likely to be in the users cache and a faster loading time will be achieved, now back to the tutorial.

Paste the link below in between the head tags of your document

<script 
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 
 type='text/javascript'>
</script>

The next step is to have an external javascript file in which i will place my custom javascript code, i called it script.js but you can call it whatever you want.
I load it into the web page as below by placing it between the head tags:

<script src='script.js' type='text/javascript'></script>

Now that we are set keep reading, the real deal is coming in a moment

4. Requesting XML file with jquery $.ajax function

In the code snippet below i requested the xml file via $.ajax function specifying four arguments.

• type: this describes what kind of request we are making, in this case we make a GET request as we are only reading data and not changing anything on the server side.

• url: simply indicate were is the source of our data in our case is tasks.xml located on the tutorial folder and exemplified on step 1.

• dataType:   as descriptive as it is we are telling Jquery what type of data we are dealing with.

• success:  this has the name of the function we will use to manipulate and read the data requested, in my case below i called my function manipulateXML.

$(document).ready(function()
{
 	 $.ajax({
 	   type: "GET",
   	   url: "tasks.xml",
    	   dataType: "xml",
    	   success: manipulateXml
  	});
});

Place the code above in your script.js file

5. Read and manipulate the XML with Jquery

Now that we have requested the data and told Jquery to use the function manipulateXml to deal with the response we need to create that function, paste the code snippet below in your script.js file just after the previous snippet.

function  manipulateXml(data){
  //find every Tutorial and print the author
  $(data).find("task").each(function() {
	
	var heading = $(this).find("heading").text();
	var body = $(this).find("body").text();
        
        var output = "<li>";
	output += "<h2>" + heading + "</h2>";
	output += "<p>" + body + "</p>";
	output += "</li>";
     
        $("#place-holder").append(output);
  });
}

Now step by step

Our function manipulateXml() has one argument that is in fact the response object that is provided to us by the $.ajax function, so once the request is successful we have an object to work with in my case i called it data.

With this data which is in fact a DOM tree i use the function .find() to find all the xml elements with the name of task, after i utilize the .each()  to loop my results and generate a response.

$(data).find("task").each(function(){
});

Within my .each() loop i created two variables that represent the two child nodes of my task elements, utilizing the keyword this as in ” this task ” and once again i use the .find() to get my elements.

Another important thing here is that in fact for example we found the heading element but what we want is the text inside that particular element so for that reason we call the function .text()  to simply get the text we want.

var heading = $(this).find("heading").text();
var body = $(this).find("body").text();

Another step we need to do is to actually output our data into the web page after all that is the main goal right!
So i created a variable output and simply assign it a string with the markup and variables heading, body.

var output = "<li>";
output += "<h2>" + heading + "</h2>";
output += "<p>" + body + "</p>";
output += "</li>";

Last but not the least i append our output variable to the unordered list using the .append()  function.

 $("#place-holder").append(output);

There you go, if all went alright you should be able to see your tasks in the web page once you load it, if not sure please have a look at the demo of this tutorial.

Conclusion

In this Jquery XML tutorial i explained a simple way to deal with xml files and jquery, i hope that its clear.

For me using Jquery to consume XML is just so easy and advantageous,  in this jquery xml tutorial i used a simple xml file to exemplify the concept and the basic steps but if for example you wanted to get your twitter stream would be as easy as what we done in this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files. 

The other a client ask me to have every page fading in when they load and i thought that is easy and if you notice google home page also has a smooth fade in effect when the user moves the mouse over the page, on this example the will be fading in as soon as the page loads and the best of all it only takes a few lines of code due to the fact the we will be using a great Javascript Library Jquery

This will be short and easy.

1. Set up HTML

Firstly we set up a basic web page, nothing fancy just for the demonstration, on this page i will include a page wrapper with some text.

Place the code displayed below, inside the body tag of a HTML document.

<div id="page_wrapper">
<h1>Page Fade In effect with Jquery</h1>
<p>A simple Jquery trick to Fade In any web page in your web site</p>
<p>To verify it just reload this page.</p>
<p><a 
  href="http://keycss.com/entry/page_fade_in_effect_with_jquery" 
  title="Page Fade In effect with Jquery">Check the tutorial page</a>
</p>
</div>

2. Add some nice CSS

With this css i have added a nice background to the body, set some basic styling for the text, centered the page wrapper , added padding and also added some css3 rounded corners.

This is nothing to advanced but gives it a nice look, i think.

body {
     background: url('images/background.png') top left repeat-x;
}

h1 {
    color: #ffffff;
    font-family: Helvetica, arial, verdana;
    font-size: 24px; color:#000000;
}

p { 
    font-size: 13px; 
    line-height: 13pt; 
    margin-top: 8px; 
    color: #808080;
}

a { 
    font-size: 13px;
    text-decoration: none;
    color:#e51837;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#page_wrapper {
    width:500px;
    margin:0 auto; 
    border: 1px solid #cccccc; 
    padding: 20px;
    background-color:#ffffff;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

#page_wrapper img {
    float:right;
}

Place the code above in a stylesheet or between the the head tag of an HTML document.

3. The Jquery nifty bit

I have placed this Jquery code before the end of the closing body tag, so that the page effect happen before the all document is loaded.

With two lines of Jquery code we create the fade in effect of the page, yes I know I love it too.

$('body').hide();
$('body').fadeIn(1000);

I placed all the code in one page to make this tutorial simple but for good reasons and practice this should be placed outside the document and linked to it.

Conclusion

I dont know about you but i like the effect of having the page fading in on this website, hope you like this little trick.
Please feel free to ask any questions on the comments below and i will assist you if you have any problem with this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files. 

Since the begin of graphic design one of its core elements is layout and a fantastic way to help you achieve a professional layout is the use of grids.

Well this has arrived to the browser by bookmarking a Bookmarklet called Grid developed by Allan Jardine .

This tool is very simple and easy to use, you bookmark this Tool from the link provided above, and one you clicked you will have three main sections: Page, Latitude and Gutter.

In the page section you specify the details of your page as for example the width and other easily understandable attributes, followed by the number of columns you require as in a traditional print worflow and lastly you choose the gutter details.

This tool is very easy and useful, give it a try.

I would like to say thank you to Allan Jardine for this so useful tool, well done.

Wireframes and Information Architecture

Information architecture is an important element of any website and wireframes will help you produce a visualization of the overall project. This will also allow you to have an easier implementation of the project on a long run avoiding miss understandings on what is the overall goal.

Keep it simple

Wire frames are used to outline the initial concept of the website so for that reason they should be kept simple to better verify the functionality and main goal without much clutter, after all the point is to have a basic starting point.
However the most complex is the website the more elaborate wireframes should be but maintaining a simple outline.

A good resource to find all kinds of wireframes is a Tumblelog brought to you by Ivana Jurcic, Web Developer from Belgrade wireframes.tumblr.com. Go and have a look but come back…

Wireframing will save you time

Ok, you might be septic about this idea and adopt the point of view that will be an extra cost and time.

Yes, but in a long run you will correct or change less elements as you already have a solid starting point based on the wireframes produced , therefore the overall time frame of you project will be reduced and if any new features pop out you will have a straight view on were to incorporate them.

Share It

You should share your wireframes with coleagues, business partners or anyone with a relevant opinion to the overall project.

This will allow everyone in that project to better understand the concept, functionality and path, bringing all the ideas to the table at an earlier stage. Furthermore the tasks will most likely be better prepared since everyone is in the same page.

Conclusion

I am sure that there is much more related to wireframing, however this is the main concepts i use for projects in which i am involved.
I hope this article will convince you that wireframes are important and you should ponder if they will bring you any extra productivity or help you to achieve a better final product.

Useful links

• Wireframes.tumblr.com by Ivana Jurcic
• Wire Frame Your Site By Matt Beach
• Excellent Wireframing Resources by Cameron Chapman
• Cooking up wireframes with Balsamiq by Andoy Montiel

I would like to say thank you to Jorinna for the availability to answer my questions and for designing such inspirational work.

Interview

Hello Jorinna thank you for the time spared to answer some questions to keycss.com, so :

Can you introduce yourself for our readers?

My name is Jorinna Scherle, I’m a 27-year-old designer, living in Berlin.

I’m mostly focused on motion and interactive design, but always try to spend as much time as possible on art projects. I work as a freelance designer for companies all over Germany – right now in Munich for a broadcast design studio.

I really like your motion design work and my question is, how did you get interested in motion graphics ?

When I was 19 and still at school, it was just fun for me to mix electronic sounds and compose short music pieces for websites and flash animations. This was my first contact with “motion graphics”.

I worked then some years as a screen designer, until I found out for myself, that making films and animation is my passion that drives me forward. Animation in general gives me the possibility to create designs even for big clients that are not limited by too many guidelines and the combination of visual and auditive is one the things that I love most.

Where do you usually get inspiration for your fantastic work ?

I try to get my inspiration from artistic fields outside design like modern art, music, theater or modern ballet – but what inspires me most is nature and light.

Taking a walk through beautiful forests and observing nature from different perspectives, gives me my visual energy for the next project.

In contrast to that I like electronic music, especially if it comes from Sweden, Norway or Denmark, I love watching people, drinking white Russian and I’m a big fan of David Lynch.

Could you describe a little about your design process ?

For me every project needs some time to grow until I really start with the design process. I need to be sure, how the result should feel like, and I need at least a rough idea how to achieve that.

I’m ready then to do the next steps, and they are never the same, in many commercial projects, I start with styleframes and really lots of layouts for the storyboard, that makes it easier to produce after wards in 3d, especially if you are working together with other 3d artists or have a bluescreen shoot with many people.

If I work on my personal projects or don’t have to get very fix results in the beginning, I enjoy working very intuitive and change the style and look until I’m happy with it. Sometimes I start with layouts in Photoshop, sometimes even directly in 3d or with scripts for generative pieces like audioreactive, for other projects I take my camera and film close up stuff, or I do some scribels and try to get myself more clear about my idea. 

Which tools do you use on the daily basis to achieve this stunning work ?

It always depends on the project, but I like it most to mix different techniques or programs and use the specific tools each one offers, for example simple modelling and lighting in 3d, use some special blurs in the compositing and use programs like photoshop to quickly try different looks and compositions and manage all the color adjustments.

But in the end tools are just tools. I don’t want to let the software dictate my style and never use plugins as a replacement for good design. In fact I don’t like plugins, if you can identify them after wards.

What resources would you point someone who is interested in learning motion design ?

The resources I recommend every beginner are ambition, patience and of course a little talent for design. For me the hardest thing was to actually start learning.

So the best way to learn the software and how animation works, is to have a real project. If you work with a concrete aim, you will learn the things you need to achieve it. I’m really glad, that so many people online help you to learn 3d and animation stuff.

Actually you just need a computer, have to spend a lot of time in front of it and never give up, even if you don’t understand anything at first.

If our readers are interested in your work, where can they find you online ?

You can find my work online: www.jorinna.com

And you are very welcome on my next exhibiton: Nov. 13th, 2009, Berlin (detailed location soon on my website!)
Thanks, Joao, for the interview and good luck with your blog!

Conclusion

For all the readers i hope this interview helped either by the sincere answers or by Jorinna’s works.

Please comment bellow or if you know some other designers that you would like them to featured on this blog please don’t be shy.