This is a great video and a must-see for anyone that wants to start building powerful web apps using HTML5′s newest features.

Introduction to HTML 5 from Brad Neuberg on Vimeo.

HTML Cheat sheet [download]

To avoid this massive energy sink, we suggest having two or three hours per day of “non-stimulation” in your day. If you are a busy individual simply try starting off with one hour and test your results.

To avoid this reactionary workflow, some of the most productive people I have met schedule what can be called “windows of non-stimulation” in their day. For two to three hours per day, these people avoid email and all other incoming communication. In this time, they focus on their list of big items: not routine tasks, but long-term projects that require research and deep thought.

Another idea is to aggregate all messages in a central location. Setting your social networks to email you, and using filters to automatically manage these emails, will reduce your “hopping time” (when you hop between sources of communication) and focus your attention. Some people even have their voice mails transcribed automatically and forwarded by email. In a world of many inboxes, you have to consolidate.

Visit Teacher Training Center Website

• What’s it for?
• What’s good about it?
• What’s bad about it?
• In Sum

A few tips on architecture planning:

• Organize content according to user needs, not an organizational chart or how the client structures their company.
• Give pages clear and succinct names.
• Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
• Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
• If you can’t succinctly explain why a page would be useful to someone, omit it.
• Plan the architecture around the content. Don’t write content to fit the architecture.
• When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
• Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Explain Why You Are Asking About Money

Before giving John his quote, you ask a little more about the project. After chatting for a few minutes, you ask him about his budget. A fair question, you think. After all, you could approach the project in so many ways. Without knowing the budget, knowing where to begin is impossible. In your mind, building a website is like building a house. Without knowing the budget, you can’t possibly know how many rooms the client can afford or what materials you should use to build.

John, on the other hand, is instantly suspicious. Why would you want to know about his budget? The only reason he can think of is that you want to make sure you don’t charge him less than what he is willing to give. Besides, he doesn’t really know his budget. How the heck is he supposed to know how much a website costs?

Don’t come across as money-grubbing. (Image credit)

John leaves, determined to find a Web designer who doesn’t want to take advantage of him. Fortunately for you, all of the other designers he speaks with also neglect to explain why they need to know about his budget, and so you manage to win the project after all.

Justify Your Recommendations In Language John Can Understand

Once you have won the job, you arrange a kick-off meeting to nail down the specifications. However, John instantly regrets his decision to hire you because his worse fears have been confirmed. In his eyes, you are all of a sudden trying to squeeze more money out of him as you waffle about the importance of usability and accessibility. John doesn’t care about disabled users. He doesn’t expect disabled users to visit his website anyway.

And as for usability, surely the job of the Web designer is to make the website usable. Why do we need expensive usability testing? He is pretty certain that usability testing involves expensive things like cameras, labs and two-way mirrors. You thought you had explained these issues clearly. You spoke of WCAG 2, and you mentioned Jakob Neilsen. You are beginning to wonder if John is a bit thick.

Avoid techno-babble if you expect clients to understand what you’re talking about. (Image credit)

Perhaps if you had talked about accessibility in terms of assessing search engine rankings and testing usability as a way to increase conversion, then John might have listened. As it is, John puts his foot down and refuses to pay for any of these “unnecessary extras.”

Include John In The Process

You walk away from the kick-off meeting pleased to have a signed contract. But that feeling in the pit of your stomach tells you that this might be another one of those projects. Regardless, you try to be optimistic, and you dive into the design process. Almost immediately, you get a phone call from John asking if there is anything for him to see. You explain that it is still early in the process and that you are not ready to present anything. John sounds disappointed but resigned.

A short while later, you are ready to present the design to John. You are pleased with the result. It took you a lot more time than you had budgeted for, but it was worth it. The final design is extremely easy to use and will make for a great portfolio piece.

Stop hiding from your clients. Show them your work early on, and include them in the process. (Image credit)

When John sees the design, he is horrified. From his perspective, you have entirely missed the point. The design clashes with his offline marketing materials and doesn’t hit the right selling points. Also, he is convinced that his suppliers will hate it and, although they are not his end users, their opinion matters.

After a tense conference call, you feel demoralized but have struck a compromise that hopefully will make John happy. You wonder in hindsight whether showing John some of your initial ideas and sketches would have been better. Perhaps you should have presented a wireframe first.

Educate John About Design

After much agonizing and compromise, you are once again ready to present to John. John is much happier with the new design and feels it is heading in the right direction. However, he does have some concerns. For starters, he has to scroll to see most of the content, and yet white space takes up either side of the design. He tells you to move key content into this wasted space. Also, as he thinks about his young male target audience, he realizes that the color scheme is too effeminate, so he tells you to change it to blue.

While John feels somewhat happier, you feel crushed. You feel as though he is trying to do the job for you. The instructions to move this there and change this color to that makes you feel like you have been reduced to pushing pixels.

Educate your clients so they make more informed decisions. (Image credit)

By this point, you are sure the client is dim, and now you just want him to sign off on a design. At no stage do you think to ask John why he is requesting these changes. Perhaps if you had appreciated his thinking, you could have explained concepts such as screen resolution and suggested an alternative to corporate blue, which is so over-used on the Web.

Instead, you wash your hands of the design and just give John what he wants.

Communicate With John Regularly

Now that the design is complete, you turn your attention to building it. John certainly won’t care about your code. Now you can finally do things right.

It’s a big job and takes a lot of time. Even though you put too much time into the design and washed your hands of it, you still have your pride. You are not about to cut corners with the code. After all, other designers might look at it and judge you! You work really hard, putting in more work than you probably should have. John even manages to slip in some extra functionality at the scoping phase, which turns out to be a pain in the butt.

For his part, John is wondering what’s going on. He hasn’t heard from you in weeks. Surely the website must be ready now? He decides to email you to ask how things are progressing. You reply with a short email telling him that everything is progressing smoothly. You never did like project management, and you are sure John would prefer that you spend time building his website instead of writing him detailed reports.

John receives your email and is becoming increasingly frustrated. What does “progressing smoothly” mean? He writes back asking for an expected date of completion, and you reply with a rough estimate.

The date comes and goes without a word from you. After all, it was merely an estimate, and several complications have delayed completion by a few days. John finally loses his temper and calls you. He tells you that he has arranged a marketing campaign to coincide with the launch date, and because he hadn’t heard from you, he presumed everything was on schedule.

Communicate with your client regularly. (Image credit)

You defend yourself, citing “scope creep” and unanticipated delays. But responding is difficult when John says, “All I needed was a weekly email keeping me up to date on progress.”

Explain John’s Ongoing Role

By this stage, the relationship has broken down entirely. You finish your work, and the website finally launches. Begrudgingly, John pays the invoice after delaying it for as long as possible. What amazes you most is John’s pronouncement that he is bitterly disappointed with the result. How can that be when you gave him exactly what he asked for? This guy isn’t just thick: he’s a jerk!

Of course, John sees things differently. He came to you with a list of his business objectives, and the website has failed to meet any of them. He had hoped to launch the website, watch it achieve his objectives and then move on to the next project. Instead, after an initial spike in interest, the number of users and inquiries dropped over time, and the website stagnated.

Ensure that your client understands what kind of ongoing care their website will need. (Image credit)

What John does not realize is that websites need continued love and support. You cannot build a website and then abandon it. John has to nurture it by adding new content, engaging with visitors and planning for ongoing development.

If only someone had told him.

The Moral Of The Story

It’s amazing how quick we are to judge our clients.

As Web designers, we communicate and empathize for a living. Our job is to communicate messages to our clients’ users. We create usable websites by putting ourselves in the position of our users, which allows us to design around their needs.

Why, then, do we so often seem to be incapable of empathizing or communicating with our clients? Perhaps it is time for us to apply the skills we have cultivated as Web designers to our own customers.

[Demo] (right click save as to download) – Required: [ReCaptcha]

What it does »

No visible email addresses online. For example we take an email address like.
Email Normal: bluemans@live.com
Email Encrypted: Ag8bHRQKKxQOCQAYSQwEHg (sexy right?)

The visitor clicks “Contact Owner”. Then we are promoted with re-captcha human verification. If the visitor correctly answers the question the email address is then decrypted and the visitor can send a message.

How To »

I created the test file below “email-encrypt.php” for a quick demonstration.

Conclusion

Easy to implement, and results are awesome.
- Install ReCaptcha
- Setup Encrypt
- Test and experiment

How To »

The Template Tag, wp_list_pages(), displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header. So now the code of the top nav bar will look like this:

You can simply edit the header.php file and exclude any page id you want, you can also include the pages you want.

Creating Two-Tiered Conditional Navigation in WordPress »

A common navigational scheme, parent pages on top and child pages (if they exist) on bottom as seen at the top of this post.

How To »

Darren Hoyt goes through a nice solution to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.

And then he show us how to use CSS to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.

Use breadcrumbs

Breadcrumbs are great for so many reasons: usability, SEO, etc. In terms of plugins, there are many options, my favorite is Yoast’s Breadcrumbs, because it’s easy to implement. Another breadcrumbs plugin, gives you a new template tag called breadcrumb_trail() that you can place anywhere in your theme. Once that’s done, it’ll display a hierarchical menu of where the current visitor is on your site. It’s quite useful if you have more than a few pages or posts.

Points to take care »
First problem you may run into when you make a static page your home page is that the link to that page now appears in the main site navigation. Usually the page called “Home” in the main site navigation. This tutorial shows how to remove one of those links from your site navigation so that visitors to your site are not confused by the duplicate link.
The second problem is you will see that link again in the sidebar widget, the fix is pretty simple. The WordPress Pages navigation widget now allows you to exclude any page from its links by inserting the Page IDs of pages you want to exclude into the “Exclude” box in the Pages widget.