If your website is in the business of selling, then these statistics become especially important when you consider that research has proven that 85% of online consumers will not buy a product if they can’t read about it in their own native language (Common Sense Advisory, 2006).

When you’re first looking at the design and outlay of your site, you’re likely to be thinking more about how to be innovative, how to accurately communicate your brand’s message through design, and how to facilitate a smooth and pleasant interaction experience, rather than how easily your website can be adapted to suit the different languages and different cultures of foreign countries.

However, with a little bit of pre-planning, you can create a website design that can be easily adapted to the requirements of any foreign language and culture, expanding your online audience to, potentially, every web surfer in the world.

There are a lot of different countries and cultures on the web

Consider your potential audiences

Before you even start thinking about the design of your website, it’s helpful to consider which foreign language markets you might want to adapt your site for further down the line. Thinking the Chinese market might be a wise decision? Then put a little time into researching what’s popular in Chinese website design and what their e-commerce habits are.

Different cultures have been proven to have different ways of processing information, and different aesthetic preferences as far as design, color schemes and navigation go, (especially between eastern and western cultures) so it can only be to your advantage to learn about the e-commerce and design preferences of each of your future markets before you start structuring the site.

Create a flexible design

Your next step is to consolidate everything you’ve learnt about design trends and shopping habits in your desired markets, and then use this information to come up with a website design that has strong, consistent branding, but is also flexible enough to be adapted to different Top Level Domains (TLDs) for each foreign market without losing its ‘sense of self’.

Take into account how the imagery will need to change to be relevant to each market, what sections you will give prominence to on each site (for instance, will your front page feature ‘About Us’ text or will it get straight to the products?), how your color schemes will change, how you will use multimedia for each foreign market and even how large and long your lines and grids will need to be to accommodate different language scripts (and in which direction the languages will be scrolling).

Use the right tools

If you’re changing the language of your text regularly between sites and pages, you don’t want to have to rebuild each page from scratch using a different text encoding tool. Using Unicode UTF-8 as your character encoder will save you trouble – it has individual codes for each character in over 90 different languages, is supported by all the commonly used browsers and operating systems, and is compatible with your standard web design programs, including Dreamweaver and Microsoft FrontPage.

Furthermore, using CSS, with its capacity to keep your content separate from your design, will make your life a lot easier when it comes to switching around the language of your copy between localized sites.

Translate your text

Even more important than making sure your design is appropriate for each foreign market is making sure that your text is appropriate. Language is a tricky area – it is fluid and ever changing, and the differences can often be great even between dialects within the one language. The potential for mistakes and confusion is great, and nothing will turn a reader away from your site faster than incomprehensible or incorrect text – it destroys your image of reliability and credibility.

Therefore, it’s essential to have your text translated by an expert working into their native language – not only will that ensure that the idiom and expressions are correct, it will also help you to ensure that the actual tone, style and content is appropriate for the culture of your audience – the last thing you want is to inadvertently offend a potential customer.

Target your SEO for each market

Once you take the step of creating localized and optimized websites for foreign markets, your next step is to make sure people can find them. This is where localized SEO comes into play – you need to make sure you’re focusing your SEO efforts on the algorithm of the most popular search engine for your target market (Google may be king in the English market, but many other languages have their own equivalent, such as Baidu for China and Yandex for Russia).

More importantly, though, you need to make sure your keywords are localized for each market – the direct English translation of a term is not always the correct one. Research your keywords on a keyword tool like Google’s and you’ll quickly find out what the most popular local search terms are for anything from car insurance to club sandwiches.

Usually, I work on my projects as a one-man team. However, working in a group or team is an other situation and works completely different. I enjoyed working with this large group, but it also caused some management problems. A lot of files were needed by everyone working on the project, and that wasn’t easy to organize with 16 people in one team.

Until I remembered Dropbox.

Dropbox works like this:

1. Download the Dropbox app
2. Create a folder
3. Invite team-members to your folder via email
4. Your whole team can access/modify/add project files.

You can see the advantages, right? Everyone has full access to the folder, so your whole team can add, modify, download and manage the project files. It works fast and is very useful for any team-project.

Dropbox is the ideal solution. Check it out!

Today I am rocking a Apple MacBook Pro. Works awesome. When I was searching for a good alternative for browser compatibility on the Mac however, I couldn’t find a good program. So, I decided to go with an online tool.

BrowserShots.org and IPinfo’s NetRender wouldn’t help me out here, because it takes a lot of time to reload the screenshots, which made it hard to solve any layout issues. You don’t want to wait 5 minutes between each change, before you can actually see what happens, right?

That’s when I found out about Adobe’s BrowserLab. BrowserLab allows you to view your layout in different browsers fast and accurate. When you made a change to your website, just hit reload and your website is reloaded in a second.The BrowserLab currently let you check these browsers:

• Chrome 3.0 (Windows XP)
• Firefox 2.0, 3.0, 3.5 (Windows XP & Mac OSX)
• Internet Explorer 6.0, 7.0, 8.0 (Windows XP)
• Safari 3.0, 4.0 (Mac OSX)

The only disadvantage is that you need to have an account on Adobe’s website, but registering is free.

So, if you are building websites and have some compatibility problems, please check Adobe’s BrowserLab because it can help you a lot.

However we were editing and uploading the same files and this caused some problems.  The changes he applied weren’t in my stylesheet, so when I uploaded my changes, his changes were lost. And visa versa. We needed to think of a workable solution.

Adobe’s Dreamweaver “Define A Site”

We found the solution via Adobe’s Dreamweaver “define a site”-feature. Any user in the team (Frank and me in this case) should define the same site in Dreamweaver and check files in/out (more info on check in/out below). These files were uploaded right back to the server once it was done.

This is the perfect solution for working in a team on one website. That’s why I will teach you exactly how to set up such “site”.

Before we can start

Before we can actually set up this connection between Dreamweaver and your site, we need a couple things ready. You need these:

1. FTP information
2. Dummy WordPress installation (or any other folder you would like to edit)
3. Folder on your local computer where you can store the files.

Setup the Connection

I will guide you through a step-by-step process of setting up the connection. It isn’t that hard, but you need to follow the guide step by step.

In this version of the tutorial, I used Dreamweaver 8. Any later version of Dreamweaver should have almost identical steps, so it shouldn’t be a problem.

Step by Step

Step 1. Open Dreamweaver. Go to “Site > New Site”. You should choose the basic setup.

Step 2. Name your site and enter the HTTP address of that site. Click next.

Step 3. Do you want to use a Server technology? Yes, we would like. WordPress runs PHP and MySQL. Click next.

Step 4. How do you want to work with your files during development? I suggest you choose option “Edit locally, then upload to remote testing server”.

“Where on your computer do you want to store your files?” You have to enter the folder where you develop your site on your own computer. Choose next.

Step 5. When we proceed, we have to connect to a testing server. I think it’s easiest to set up a FTP connection. Enter your FTP information and check if Dreamweaver can make the connection.

“What folder on the testing server do you want to store your files in?”. You should choose the complete path here. Usually this is something like “/public_html/wordpress/wp-content/themes“. Click next.

Step 6. Enter the root URL of your site and click next.

Step 7. We see some options for sharing files. You should enable “check in and check out”, because you want to make sure your co-workers don’t edit the same file at the same time you are busy with that file.

Step 8. Enter your name and email address. After this step you will be given a summery. Click done.

Upload on Save

Dreamweaver has the function to upload the file as soon as you hit the save button. This means you don’t have to upload anything anymore, because that will be done automatically.

Step 1. Site > Manage Sites
Step 2. “Edit” your site
Step 3. Advanced options
Step 4. Remote Info
Step 5. Check “Automatically upload files to server on save”

And we are done. Your saved files will be uploaded to the server immediately.

Checking In / Checking Out

Here is some extra information about checking in and checking out files.

When you are connected and you want to edit a file, you double-click on the filename (you “check in”). This means that you give Dreamweaver the sign that you are editing a file from your site. Your co-workers see this “check in” sign too, and they know you are editing it so they can not edit that file.

“Check Out” is when you are finished with a file and you are releasing it to the public workspace again. Your co-workers can see this too and if they want, they can now edit the file.

After the setup

Once all your co-workers have defined the same “site”, your online workspace is done. Everyone can now reach the most up-to-date file.

More Resources?

Here are a number of other resources and links.

• Checking In/ Checking out
• How to define a site in Dreamweaver
• Adobe
• Setup a site in Dreamweaver

Questions

If you have any question about this tutorial, or something isn’t clear, I will be happy to reply to your comments.

I have a question for you too: Did you set up such online workspace? Or is there any other (and better?) program that can do this?

Today you can learn something about the layer mode, a function of Photoshop that has been around for a long time and that has many possibilities. With the layer modes, you can blend different images in each other.

Open up Photoshop

For this tutorial, I use the Adobe Photoshop CS3 Extended version, but if you are using a older version, that shouldn’t be a problem for the process.

1. Open a new file (ctrl+N). I’ve chosen a width and height of 500px. Background white.

2. Import (or paste) an image into a new layer. For this tutorial I’ve chosen this really cute baby:
click here

3. Open/import another new image, in a new layer. In this article I took a nice wallpaper of fire.
click here

4. Make sure your flames are in your top layer, and the baby’s in the one below that.

5. In your layer palette, you see that there’s a clickable box saying ‘normal’. This is your layer mode. See figure 1.0 for a example.

By playing with this layer mode, you can get several cool effects. I listed a couple of them at the end of this article.

figure 1.0

6. Start experimenting with these settings/opacity’s (the amount of seethrough of a layer) and you’ll get some cool results! You can find the opacity just right from the layer mode.

Color Burn

Darker Color

Overlay

Difference

If you have made a figure that is worth mentioning here, please show it in the comments below!

Want to get noticed immediatly when new photoshop tutorials arrive? You should subscribe to our RSS feed for the latest articles.

It is a fact that bloggers who just starting out like statistics. They tend to check their numbers every five minutes of a day. Is that productive? Is that the right thing to do?

A starting blogger and stats

In the beginning of a blog, the blogger likes every visitor that took the time to visit the blog. Therefore every time you visit your stats you will have a great feeling and that is awesome, but, but you should not forget: checking your statistics will not get you any more visitors!

We will do a little math. Let’s say you check you statistics 5 times a day for 5 minutes. That is 25 minutes a day, 125 minutes a week and 500 minutes a month. 500 minutes is 8 1/3 hour a month! You can write yourself many quality articles in that time, and that will increase your visitor base!

So why the article title?

It is simple. As soon as you are receiving some traffic it is from great importance to analyze your statistics. That’s something else then just looking to some numbers. For example, with a great statistics program like Google Analytics you will be able to learn almost anything about your visitors, with the result you can optimize your blog with your findings!

The importance lies in the knowledge you gain from the stats about what visitors do on your blog. You will know where they are coming from, what the keywords were they’ve entered and found your blog through and you’ll know how they are navigating through your site. I guess you are interested in that.

What is important in statistics analyzing?

In this example I will use Google Analytics, because that is the program I use myself to analyze DivitoDesign’s statistics. Of course, if you look for the same pointers in other stats program, it will work via the same principle.

Important Pointers

In your program, look for the following points. These can help you to improve your blog:

1. Referrer logs – People who visit your blog usually come from websites that link to your site or link to some articles you have written. If you know where these people come from, you know which sources work for your blog. You can use that to promote articles in the future.In Google Analytics: Traffic Sources > Referring Sites
2. Search engine traffic – Get to know on which keywords your visitors get on your site. Try to optimize those pages some more and try to get higher in the listings, because it might become your most important traffic source.In Google Analytics: Traffic Sources > Search Engines
3. New vs Returning – Very important in the long run. Do you have many people just coming for one time, or will many of those visitors return some day to check for news? This point is important if you want to build a community around your blog (which I think is the most important thing in blogging). In Google Analytics: Visitors > New vs Returning
4. Bounce rate – Bounce rate is important as it tells you the percentage of people who view only 1 page of your blog. If your bounce rate is very high, you need to optimize your layout, you need to give visitors more reasons to stay on your blog (to let them navigate easy, related articles, popular articles. Learn more).In Google Analytics: Visitors > Visitor trending > Bounce Rate
5. Browsers – If you check this part of the stats program once in a while you get to know what your visitor base is browsing with. If you see some new browsers pop on that list, you have to try your website in that browser and see if it displays properly.In Google Analytics: Visitors >Browser Capabilities > Browsers

What about you?

Do you analyze your statistics? What are you looking for when you analyze? Or do you think it doesn’t really matter where your visitors come from? Please comment to tell me what you think and vote on the poll in the sidebar. I am very interested in your opinion regarding this subject!

CSS related

CSS CheatSheet by IloveJackDaniels.com – This Cheat Sheet is the first one I ever saw and is very advanced. If you have forgotten a small thing or if you aren’t sure things are possible, this CheatSheet is here for the resque. All CSS developers should have this one available and printed on their desk.

Leslie Franke’s CSS CheatSheet – A less advanced CheatSheet as Dave Child’s one but it’s very easy to understand and the look is great. I really like the cleanness and organization of the design.

HTML Related

HTML CheatSheet by IloveJackDaniels.com – Yes, yet again IloveJackDaniels.com, because I think Dave Child really created some great Sheets. This is the only one I have used, but I don’t need it anymore.

ASCII Character Codes Table – Use this one all the time because I don’t remember all them signs and marks and their HTML entities. This is simply a great reference.

WordPress related

Wp-Loop by bueltge.de – Very simple CheatSheet with exactly the information you need if you are working on a WordPress theme. The loop is always a bit hard, and really important to do that right.

WordPress Help Sheet by WPcandy – WPcandy has developed a Sheet that includes the general WordPress theme knowledge. It is very handy when you are just starting out developing themes.

Miscellaneous CheatSheets

Web safe color color chart – Handy if you need a couple HEX color codes and you need to know if those are web-safe. I don’t use it myself, because I have a great Firefox plugin called ColorZilla installed, but it could be handy in some cases.

Google’s CheatSheet – Get all the Google commands in one place with this great CheatSheet. Take a look yourself and find out what you can do with Google. Many things, I guess.

Htaccess CheatSheet – Htaccess isn’t as expanded as it could be, but with this CheatSheet it is easy to find everything you need.

Photoshop Shortcuts – Great reference to learn the shortcuts you could use in Photoshop CS2. I didn’t know Photoshop had that many!

I hope that help.

What is a Robots.txt file

As the name already tells you, Robots.txt is a text file. A text file telling search engine ‘robots’ what to do with certain pages in your website. That is all a Robots.txt file does. For example, if you have a private weblog for your colleagues, which people outside your work group, should not be reading or if you have a site displaying time tables for a high school, the use of Robots.txt is an option.

Content in a Robots.txt file

The Robots.txt isn’t as expanded as it could be. This means there are disadvantages to the use of this file and of course the lack of features. Let’s start to go through them.

If you would like to include any of these features to your website, simply open up Notepad and save that file as Robots.txt. You should upload this file always in the root of your website.

Block all robots on all files

User-agent: *
Disallow:

Block all robots

User-agent: *
Disallow: /

Block all robots on specific directories

User-agent: *
Disallow: /admin/
Disallow: /private/

Block a Bad Crawler

User-agent: Bad Crawler
Disallow: /

# In a Robots.txt file, you can add comments. Add a '#' and type your comment.

What you should know about Robots.txt

As I mentioned earlier: there are some shortcomings and disadvantages to the use of these files. In this part of the guide I will add a couple tips.

1. Always place your Robots.txt file in the root of your website. Example: http://divitodesign.com and http://blog.divitodesign.com both fit the criteria.

2. Usually, blocking bad robots will not work. Those bad robots are usually spam bots and they will not even look for a Robots.txt file. They just ignore them.

3. The Robots.txt file is a public file. Everyone can look and find via the Robots.txt file which parts of the site is blocked. The part is blocked for the robots, but they aren’t for the users! Do not forget this.

4. As we aren’t perfect, typo’s and syntax errors are possible. Fortunately, there are some Robots.txt syntax checkers out there.

5. When you use Google’s Webmaster Tools, you could use Google’s Robots.txt generator to generate your Robots.txt file.

6. WordPress blogs could get a penalty for duplicating content (For example: same content on the “Categories and Archives” pages.) and you can use a Robots.txt file to exclude those archives and categories pages from the search results.

7. To block specific robots you need the right name. Here is a database of those robots with description per robot.

Do you need more information?

If you have any questions, please post a comment or contact me. You could check out the following sites if you need even more info; Robotstxt.org and the Wikipedia page.