Cons

• It might limit creativity. When working in Photoshop you don’t really think about how you would translate the pixels into HTML and CSS. That’s why most of the time I would make something and really had to push myself to get the same effect on a working website. Forcing me to develop my HTML and CSS skills. Working directly with HTML and CSS it’s not likely you will think up of something which is hard to create. This narrows the vision and might limit creativity.
• It’s hard for clients to comment on the things that matter. Because the website looks so real (it’s already functioning with hovers, menu’s, etc.) clients tend to comment on trivial things such as a missing disclaimer page. It’s harder for them to look at it as a design and give critique on used colors, photo’s, fonts and the positioning of elements.

Pro’s

• I’ts more realistic. What you see is what you get. Clients can look at it on their mobile and tablet or on different browsers. They can experience the design like their users will in the future. Compared to the old ways (creating a rendered Photoshop JPEG) there is less going back and forth between you and the client about the translation of the design into HTML and CSS.
• It’s faster. Because you don’t have to recreate the Photoshop design in HTML and CSS anymore you can skip a step in the process. When a client signs off the design you only have to add a few extra pages or (in my case) you will need to make the design fit for a Content Management System. This can be a real time-saver.

• Flash is dead: With Google not indexing Flash sites, Apple denying it’s existence on their products and HTML5 being the Google-friendly alternative, it is all going downhill for Flash.
• Hovers do not work on a tablet or mobile phone: The rise of the mobile devices is unstoppable. We need to tailor or sites to make them work perfectly on any devices. Meaning hovers will be a thing of the past because you can not hover on a smartphone or tablet. So no more fancy jQuery hover pop-up thingies.
• Tiny fonts are a thing of the past: 10 to 12px is very small. Read this great article why everything should be 16px.
• Websites need to be fast: Mobile visitors have lower bandwidth so you can not load a gazillion javascript files to make it all look pretty. Also Google will rank you higher when you speed up your site.

1. Research your keywords. They have to be of high relevance, give you high traffic and have low competition.
2. Use Market Samurai. This will give you insights in the information summed up in point 1.
3. Make sure you keywords density is between 2% and 4% on a page.
4. Explore alternative link building activities such as comments and forums.
5. Don’t talk about features, talk about benefits. What’s in it for your visitor?
6. There are six levels of awareness:
   0. People don’t have the problem you are offering a solution for.
   1. People have the problem but don’t know there is a solution.
   2. People know there is a solution, but they don’t know your solution.
   3.  People know your solution but are not convinced.
   4. People are convinced by your solution but are not ready to commit.
   5. People are convinced and are willing to use/try your solution.
7. Write content for the level of awareness you think will attract the most potential buyers/is the biggest market.
8. Use the Permutation Generator to create different strings of keywords.
9. Think out of the box when researching keywords. You never know for sure what people are searching for. Try to find an untapped market.
10. Set up your funnels in Google Analytics so you know where your website is ‘leaking’ visitors.
11. The Tree Elements of Conversion are: Get their attention, Keep them Engaged and Call them to Action.
12. Headlines should confirm where you are and it should grab your interest and give you a reason to look further.
13. Your headline should suggest value to the reader.
14. Use you-oriented language. Your content shouldn’t be about ‘Us’ but about ‘You’ (the visitor).
15. Write for the undecided prospect. Those who are determined to go through to the next step always will. Those who are not going to proceed no matter what happens, never will. Focus on the undecided.
16. Promise to solve a problem
17. It’s about benefits, not about features.
18. Squint your eyes when you look at your website. Where is the main focus? It should be on the call the actions.
19. Use contrast, boldness, space, size, color and 3D effects to emphasize your call to actions.
20. Take away all the text on your page. Do the graphics still convey what you are about?
21. Content over style.
22. Resolve concerns.
23. Show evidence: use customer quotes or awards to build trust.
24. Make it easy for visitors to call to action. Give them lots of options to interact with the website.
25. Calls to action should be obvious, bold and direct.
26. Inject urgency. Give visitors the feeling the offer could end any moment.
27. Reverse engineer the competition. How did they get their back-links?
28. Use Google Website Optimizer to do A/B testing or Multivariate test.

1. Make a dribbble account and list as a prospect
2. Make sure your portfolio is up to date and looking OK. It doesn`t have to be the best thing ever displayed on the interwebs but get it tidy and passable.
3. Go to the twitter search and search for dribbble invite. Login to twitter (if you don`t have a twitter account, get one) and save this search. Now you see people requesting and offering invites.
4. When someone offers an invite start by following this person.
5. Reply to their tweet with a kind message asking to be considerd for the invite. Include a link to your dribbble profile and your portfolio! Make it easy for the kind soul to glance over your portfolio and invite you straight from your profile.

If you`re lucky you are in. If not go back to step four.

Extra:

• Speed is everything so you have to be quick when someone offers an invite. I found the best way to do this was to install tweetdeck. You can add the saved twitter search from step three into a column to your tweetdeck. If you set the notifications you get a pop-up everytime someone offers an invite and you are able to respond immediately.
• Don`t waste your time with people having contests over invites. They are not worth the hassle. If your portfolio is not convincing enough: start working on it!

It took me about three days and twenty twitter replies to get invited. Good luck and let me know how it went in the comments!

Use Lorum Ipsum but only to fill the gaps! As a designer you have to think about where to place what content. It is one of the most important tasks as a designer! Create meaningful headers such as ‘Latest News’ or ‘Upcoming Events’ to indicate what kind of content is supposed to be in that specific area. I see no harm in using Lorem Ipsum to fill these content area’s with placeholder text as long as it is clear what kind of content is supposed to be there.

We are designers. Not copy-writers and no information architects. Because of our experience we know where to place content so it is creates a pleasant experience for the user. But don’t waste time on the details, it’s not our task.

1. Underpromise and overachieve
It is fairly simple: When a client asks you when something is done take the date when you think it’s done, add a week and communicate this date to the client. For example: you think something will be done in a week. Tell your client it will be done in two weeks. Your client expects you to deliver in two weeks but when you deliver within a week your client will be extra pleased. It works the other way as well. Imagine you told the client it would take a week and you deliver one day after this deadline. Result: your client will be pissed off because you are too late. So what would you rather have?

2. Little money, big problems
When a client tells you he has little money to spend on the project at the moment but he promises a big pot of gold at the end of the rainbow when things take off, alarm bells should be ringing. Clients with little money to spend are the biggest pain in the ass. Because they have little to spend they want to spend it well and will fuss about almost everything. Try to avoid these clients, cause in the end they will only cost you.

3. 9 to 5 is an unnecessary bitch!
9 to 5 is an absolute joke. Nobody works 8 straight hours a day. So why do we keep confining people to these rules which have their origin in the Industrial age? People need to have the freedom to make their own schedule. In the end it’s all about achievements. Who cares if you do your work in 10 minutes or 10 hours? As long as it gets done! More about this subject in this great book.

4. OK is good enough
Being a perfectionist is being stupid. You need a healthy balance between time spend on a project and meeting a deadline. Sometimes you just need to let it go and tell yourself it might not be perfect but it’s OK. It’s the best you could do within the time schedule. Don’t lose yourself in the details.

5. It’s easy to become an expert
Want to become an expert on a subject? Easy: just read blogs and sites about this subject every day and eventually you will become an expert. You’ll be one of the few people actually taking the effort to keep yourself up to date. It’s easy and fun (granted you are interested in chosen subject). And if you want to take it a step further just start a blog or website about the subject. This is how I became and expert on Android and was invited to two different major Dutch radio stations to talk about Android.

Take from this advice what you want. Have something to add? Let me know in the comments!

More likely future websites will have added layers enabling Voice Control or simplified touch controls. Making websites easier to use on the iPad and future iPad competitors without compromising experience for users viewing the website in an ordinary browser. Because it will take a very long time for the iPad (or any similair iPad-like device) to become a household product. Take a look at the penitration of smartphones. In 2009 only 17% of every mobile phone was a smartphone. Offering your data and services merely through Apps won’t cut it! You still need a website to please the biggest share of users. Websites are not dead, they are ready for their second life.

According to Gladwell it comes down the the 10.000 hour rule.  If you practice something for 10.000 hours you’re bound to get good at it. Outliers: The Story of Succes is loaded with great examples which demonstrate this 10.000 hour rule.

How does this 10.000 hours of practice apply to a designer?
Dee Barizo made a blog post about how to practice as a designer. He gives some great pointers:

• Practice is not enough, you need to improve. Doing the same thing over and over again won’t help you unless you improve.
• Seek feedback. Without feedback it’s hard to determine if you improve.
• Don’t overdo it. Your brain can handle so much, straining it won’t do you any good.

So, stop reading this blog and start practicing!

P.S: Dee Barizo talks about another book Talent is Overrated by Geoff Colvin. I haven’t read it but it looks very similar to Outliers. Fascinating.

I’ve looked at four different ways to check websites in several browsers in order to find the holy grail of cross browser testing. I’ve researched four different options and found one option to be the best. Read on if you want to know whose the winner. (Please take note that I’m talking about cross browser checking on a Windows machine. Some information might still be valuable for Mac users though.)

1. Litmus

Litmus in a web application is which let you test a website by giving it the URL. It will return screenshots from up to 23 major browsers (including the six above)! So theoretically you can test your website in all major browsers. But the problem is you only get a screenshot. So you can’t test the interaction of drop down menu’s or forms, which is a big miss.

Pro

• Web based so no need to install something on your PC.
• Covers 23 different browsers.

Con

• Free version only allows testing on two browsers. (Else it will set you back for at least $24 a day or $49 a month)
• You only get to see screenshots so you can’t test any interaction.

2. Microsoft Expression Web SuperPreview

‘Wow, it’s got SUPER in the title so it HAS to be SUPER right?’. Not really. SuperPreview lets you view your website in Internet Explorer 6, Internet Explorer 7, and when installed, Internet Explorer 8. It has great features like overlaying the IE6 version over the IE7 version or you can place them side by side so it’s easier to track differences. But it also has great disadvantages. It’s not possible to click links or test interaction (drop down menu or forms) and there is no way to use tools such as the Internet Explorer Developer Toolbar which make it easier to solve the problems. But the biggest problem is that the rendering engine isn’t working correctly! There were some major differences in the rendering with Superpreview compared to the rendering of a native Internet Explorer 7. Which renders (no pun intended) Superpreview useless. It’s still in a BETA stage so hopefully they can fix these problems, maybe then it would be a great app but for now it’s still lacking.

Pro

• It’s free (at least for now)
• Easy to track differences

Con

• Not easy to solve problems (no support for Internet Explorer Toolbar)
• Only displays Internet Explorer versions. No Firefox, Chrome or any other non-Microsoft product.
• Unable to test interactions such as drop down menu’s or forms.
• Rendering engine is seriously lacking.

3. IETester

lETester is a webbrowser which enables the user to open tabs using different Internet Explorer rendering engines. In the latest alpha version you can test websites with Internet Explorer 5.5, 6, 7 and 8! You can click links, use forms and test drop downs just like a normal website.  A great tool but the only thing lacking is the Internet Explorer Developer Toolbar making it easier to track down and solve problems.

Pro

• Enables testing for Internet Explorer 5.5, 6, 7 and 8.
• It’s possbile to test interaction such as clicking links, filling out forms and functioning of drop down menus.

Con

• Not possible to use the Internet Explorer Developer Toolbar.

4. The Answer: Using Virtual PCs

Virtual PC is an application developed by Microsoft. With Virtual PC you can simulate a virtual desktop PC with a Windows operating system of your choosing. Using Virtual Hard disks you can create different PCs with different browsers.  So for example you can create a Virtual PC running Internet Explorer 6, Chrome and Safari (for Windows). Another Virtual PC can run on Internet Explorer 7 and another can be used for testing Internet Explorer 8.  Testing in an environment which is an exact copy of the environment of the user is a big plus! You can test all the interaction and use the Internet Explorer Developer Toolbar to iron out those last bugs. Setting everything up can be a hassle but it’s worth it.

Pro

• Testing browser in the same environment as the user.
• It’s possbile to test interaction such as clicking links, filling out forms and functioning of drop down menus.
• The ability to use the Internet Explorer Developer Toolbar.

Con

• It’s a hassle to set up.
• You have to maintain the Virtual Hard Disks as they tend to expire after a certain date.

As you can see testing for different browser can be a bitch but in a way you get a great sense of achievement when your website is running smoothly in all those different browsers. Do you have a better way to test websites in different browsers? Let me know!

• “Our brochure has the logo on the bottom so it has to be the same on our website!”
• “Our corporate colours are green, brown, yellow, purple and red. Could you please put them in as a background?”
• “We want a 15 minute long flash animation in front of our website. No need for a skip button, people will love this animation!”

But don’t blame the client just because he or she is lacking the experience! You are the web designer so you have to warn your client. If you don’t mention it, because you think client is always king, you will end up with a dissatisfied client. The project turns out to be a disaster and nobody warned him or her. And guess who gets the blame.

Here are 5 things you can do when you happen to be in this situation:

1. Tell your client that you’ve designed hundreds of websites and that his idea is rather unusual and that your advice as a designer is to drop it.
2. Show your client studies which show that the idea he or she is having is not working in the world wide web. (I know he is an internet dinosaur but Jakob Nielsen has done some great studies which help convincing your client)
3. Go along and tell the client that the idea is unusual but would make for a great experiment. Make amends and tell them to test it at home with his or her friends and family to see if it works.
4. Be blunt and tell the client it’s a bad idea. You understand that the client is king but making these changes and putting it all back when it doesn’t work will cost them a lot of extra money.
5. If you are really against the idea you can always refuse to make the changes. Tell the client you don’t want to make the changes because in the end it will make your client and you unhappy. You give the client all the project files so he or she can go to another web designer and you keep the good relationship with the client.

Have you been in this situation and have another tip? Please share!