Here is a prototype video by R. Clayton Miller, presenting his idea on the future of HCI.

“This video examines the benefits and limitations inherent in current mouse-based and window-oriented interfaces, the problems facing other potential solutions, and visualizes my proposal for a completely new way of interacting with desktop computers.”

10/GUI from C. Miller on Vimeo.

RDFa provides a straightforward means by which data can be published as easily as a web-page can, and the implications are enormous.

This is an interesting video presentation on the topic from Google Tech Talks.

So what can you do about this? Continue creating additional styles for every html element, which results into a bloated CSS file, and hope everything works ok?

Well, there is something you can do! Stop bloating your style sheet, step back a bit and reset your CSS before you move on with your design.

What is CSS reset?

The concept of resetting your CSS comes to address this specific problem with inconsistencies across different browsers.

For example, since Internet Explorer adds different spacing at <p> elements than Firefox, what we want to do is eliminate this difference (and all other differences) and create a level playing field.

Essentially, CSS reset is not a complex process or hard to implement. In fact, it’s very simple.

So how do we reset our CSS?

To get to the point, here is a simple piece of css reset code:

h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code {
padding:0;
margin:0;
line-height:1em;
font-size:100%;
}

Padding, margin, line-height and font-size are the obvious attributes that are rendered in a different way across various browsers, and we want to fix that.

What we did in the previous CSS code example, is to set all these attributes to 0 or to a default value. Now we can take it on and style every element in our page the way we want it to be.

That was it?

Yeah, that was (almost) it! With only a few lines of CSS, you can make your websites render consistently across browsers.

Now, before going ahead and adding this code to your style sheet, you need to decide how far you’re going to go in resetting things.

If you google for “reset.css” you’ll get lots of results and lots of sample reset.css files, each trying to cater to different needs.

If you use only some basic tags, you don’t need to reset everything. While if you have a complex site with lots of tags, then you may need to reset more tags.

As a start, I would suggest the following code. It’s simple, clean and resets the most used tags. If you need additional definitions, just add your tag in the list.

body {
padding:0;
margin:0;
}
 
h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code {
padding:0;
margin:0;
line-height:1em;
font-size:100%;
}
 
ul,ol,li {
list-style:none;
}
 
img {
border:0;
}

You can add this code directly into your default style sheet, or just create an additional reset.css file, which you can then re-use it for all your sites.

Why some people think that learning how to use the tools of a profession, makes you a master in it?

Essentially, a person was asking for advice on his Web Design career:

“Hi,

I am interested in web design and intend to become a professional web designer.

Would like to know your comments on web design future trends so I can take the appropriate training/self-learning.

Some few questions come to my mind; like, should I learn Java Script/PHP/Adobe tools (Cold Fusion, Flex)? What are useful to learn so I can be more productive and efficient?

What are the tools used for mobile web design? Are those the same as for PC?

Thanks and best regards,

XXXX”

As you see it’s a usual question from someone who is about to enter the Web Design field and wants to know the most efficient way into becoming a professional.

What I found weird about the discussion was not the original post, but most of the replies.

“I have currently graduated the University of Phoenix with a degree in Multimedia and now work for a Casino in their IT department. Dreamweaver is an excellent tool to know how to use. Along with that you must know how to create custom graphics using some form of graphics program, I use Photoshop CS3 Extended. I have found out the hard way that Java is a must to know how to use. Almost every program will understand JavaScript. I would say if you could learn Dreamweaver, Flash, Java, and Photoshop you are well on your way.

I hope this was helpful.

XXXX”

Sounds reasonable, right? He suggests many of the nice tools that Web Designers use. Dreamweaver, Photoshop, Flash, etc (his mix-up of Java with JavaScript is not very useful to a newcomer, but that’s not the point).

The rest of the replies on that discussion, like many similar discussions that I’ve read on various forums, tend to focus on the tools of the profession.

There you go people:

1. HTML
2. CSS
3. Flash / ActionScript
4. JavaScript
5. PHP
6. ASP
7. SQL, Flex, ColdFusion, Java, Silverlight…

Learn all of the above and become a grand master Web Designer! – not

You will not become a Web Designer if you learn how to use Dreamweaver and Flash, like you will not become a Graphic Designer if you learn how to use Photoshop. What if Adobe ceases to exist and their products disappear from the market? You’re not a Web Designer anymore?

Sure, you can create some things, you can experiment and actually get to see if you like working with these applications (they’re going to be your daily tools of the trade anyway). But if you’re really interested in the profession, why don’t you take a look at the principles first?

The applications/technologies listed above are just that: applications and technologies. Everybody can use them, and even become good with them. But only a Graphic Designer knows why a specific color does not match with his overall design. Only a Web Designer knows why he/she should use JavaScript instead of Flash in your site.

…what is a Web Designer after all? What is the difference with an Interaction Designer, or a UX Designer. Does Web Design include programming too, or that’s what Web Developers do? Aren’t you interested in learning such details first?

It’s not about the tools and the technologies, these come and go anyway and we all have to learn and adapt into the new ones. It’s about the principles, the guidelines and the understanding of the medium that we work on and how we can put all these applications(tools) and technologies to good use.

Now, if you’re going to focus on CSS, or JavaScript, or Graphics, or Flash, this is just called specialization and it’s up to your personal preference and/or the current & future job market.

Proper use of title and description meta tags in every page or your site (keywords meta tag is not very useful nowadays, although it does not hurt having it), will help the search engines understand your content better.

There are various ways to format the title and description tags. The worst one is just to leave your site’s name as the title and your tagline as a description in all the pages.

The title of each page should tell what this page is about in a short sentence, while the description tag should give a short abstract of the content.

The real challenge is to find the best possible way to format your title tag, and how to optimise your typo for the description.

Here are some variations for the title:

• Page title
• Page title – Site name
• Page title – Category – Site name
• Page title – Category

Your title tag, is how each page will be displayed in any search engine. Having your site’s name in the title may be helpful if you have a site with lots of traffic and a well known brand, so people can identify your pages easily. I wouldn’t suggest to put your site’s name in the beginning of the title, unless you want to sell your brand first and then your actual products.

Adding the category name (if any) will provide some additional keywords to the search engine and may help your ranking a bit, but be careful cause it may confuse the user, so you need to find some balance here.

Let’s say for example that someone needs to buy the book ‘Flash CS4 Professional Bible’, and wants to find an online reseller. Performing a google search for ‘Flash CS4 Professional Bible’ gives these results:

(note: these are not actual results)

1. Amazon.com: Flash CS4 Professional Bible
2. BooksOnline.com > Internet > Flash > Flash CS4 Professional Bible
3. Flash CS4 Professional Bible
4. buy Flash CS4 Professional Bible
5. Bookbargains.com
6. Flash CS4 Professional Bible – ebooks.com
7. Flash CS4 Professional Bible, Bible Series, Robert Reinhardt, Book – Barnes & Noble

Amazon.com: Flash CS4 Professional Bible
In the first example, we can see the name of the reseller followed by the title of the book we’re looking for. Because Amazon is a well known and established brand, the user might feel more confident in following this link and purchasing the book. This is a case where having the site’s title in the beginning helps build trust with the user.

BooksOnline.com > Internet > Flash > Flash CS4 Professional Bible
In the second one we have to read through the name of an unknown reseller and a series of keywords, which we don’t really care, untill we get to see the actual title of the book. Although, the structure is pretty clear and we can understand that this is a shop selling the book that we need, a link with shorter text would be easier to scan-read.

Flash CS4 Professional Bible
In the third case we only see the title of the book, which is exactly what we were looking for, although we may need to read the accompanying description bellow the title to see if this is an e-shop or something else related to the book. Still, the title serves it’s purpose.

buy Flash CS4 Professional Bible
The fourth one is similar to the second, but without the reseller’s name and the word “buy” added. I don’t think that having action words (‘buy’) in the title helps in this particular case. Online commerce is a sensitive field, and many users feel reluctant in visiting unknown sites with keywords like ‘buy’, ‘best offer’, etc. To me it looks like a spam site that will probably be filled with ads, etc. You can leave the action words for the description of the page. For example, having the actual title of the page as title and a phrase like “buy Flash CS4 Professional Bible for $39.99 at bestbooks.com” as a description, helps a lot more to make a decision on if I should follow this link or not.

Bookbargains.com
The fifth example shows a site that uses just a generic title for all the pages, which is irrelevant to the user, does not tell us if we can find what we need and we will probably not visit it.

Flash CS4 Professional Bible – ebooks.com
The sixth one, provides the book title and the reseller’s name. This is a good one and just to the point.

Flash CS4 Professional Bible, Bible Series, Robert Reinhardt, Book – Barnes & Noble
The seventh and final one contains the title of the book, the series, the author’s name and the reseller’s name. Although this one might rank better in search engines, the user may find it a bit crowded and just skip to the next one that contains less unnecessary text for him/her.

Which one is the winner?

For this particular example I would say that Amazon.com: Flash CS4 Professional Bible, Flash CS4 Professional Bible and Flash CS4 Professional Bible – ebooks.com are good implementations, but I wouldn’t suggest Amazon.com: Flash CS4 Professional Bible as the best practice. In Amazon’s case it works, because people want to feel safe about their online purchases and Amazon has built a good reputation so far.

So, since I think that Amazon.com: Flash CS4 Professional Bible and Flash CS4 Professional Bible – ebooks.com are good implementations, why didn’t I use ‘Design Without Frontiers’ in the title tag of this site?

The truth is that I may use it in the future, but in the format of ‘ – DWF’.

I don’t think that having the ‘ – Design Without Frontiers’ added to the title of each page, adds value for the user when he’s browsing through some search results. On the contrary, it would just add unnecessary noise over the actual title of the page. No need to focus on the brand over the user, especially for a new blog.

Conclusion? My picks for the title tag would be:

• Page title
• Page title – Site name

Make your title tag short and easy to read. Create description tags that can explain the content of the page in 2 sentences. Don’t forget to optimise the title and description with some nice keywords.

As always, remember that we create content for the user, not for ourselves or the search engines.

What’s your approach on creating titles and description tags for your sites? Do you use your site’s name in the title? Do you add keywords to rank better in search engines? Do you create descriptions yourself or just leave it on the CMS software that you use?

You know you want her!

But, how is she going to notice you? She’s so popular…millions of people are after her, but you want to be the one!

Besides being so popular and sought after, Ms. Google appreciates good manners. Ms. Google is looking for a gentleman, or …a gentlesite.

Search Engine Optimisation (SEO) is all about the relation between a site and the search engines, and the rules that apply in this relation are very similar to the ones applying in the relations between people.

The short-term goal of SEO is to grab the attention of the person you’re attracted to, and make him/her give some ‘love’ back. The long-term goal is to build a solid relationship where each participant can trust the other one and enjoy their common goals and ambitions.

Provide a nice sit

If a search engine comes to ‘sit’ at your website, it is important that you help it be seated and feel comfortable.

In order for a search engine to sit comfortably when it lands at your site, it needs to know where it is and where it can go next. A sitemap (along with proper navigation ofcourse) will ensure that all your content is indexed properly, and it will also speed up the process a bit.

Always open doors

This is perhaps the most basic rule of website etiquette out there. It is also one of the easiest to follow so you have no reason to forget it. Whether she is about to enter your online shop, blog, forum, or any place with a door, you should always hold it open. If there are many doors, then hold them open one after the other.

Google is a free spirit. It wants to roam around freely and index information. If you’re kind to it and have your doors open, it will give you some love back.

Make sure you have your main navigation at a prominent place in your code. Remember, google does not really care about the visual appearence of your site – not so much anyway, it only cares about the code structure and the semantics.

Remove dead links, if any.

Provide additional navigational links to relevant content at your site from within your content.

Google can not use forms, so if you have important content that is accesible only after submitting a form (member’s area, etc), provide an alternative access path for search engines.

Don’t lie

People lie in relationships and for a certain period they may get an ‘advantage’ of some kind. But very often these lies come to the surface and then things go really bad. This may even lead to a break up.

Exactly the same thing can happen in the relationship between your site and the search engines. If you try to lie (known as black-hat seo) you may see your site’s ranking go up for a short period and get more visits, but it’s almost certain that in the end you will end with a serious penalty and never see the first search results page again.

Put effort

No relationship is easy, so why it should be any different with the search engines?

If you demand dedication, then you should provide it yourself too. Sure you can achieve some quick results in a relatively short time, but this won’t last long.

Successful SEO is all about effort and persistance. You need to keep an eye on everything:

• content
• copy
• competitors
• code
• search engines

So if you’re dedicated and really put effort in this website – search engine relationship, will everything be ok? Well, as in real life, the short answer is no.

Sometimes you may find yourself trying really hard to improve your rankings, to appear above your competitors in search engine results page (SERP), but to no avail. No love back!

Fortunately, if you keep working, optimising and testing, you will achieve your goals sooner or later.

SEO is a long not-so-predictable relationship. Expect to travel long, fail sometimes, but in the end see the fruits of your effort.

Have you experienced this relationship yourself?