If I’m not working on an existing website, I like to think about creating a new one. Based on that, I thought it would be interesting to share my personal steps in creating websites, ranging from the first idea to the boredom of just maintaining the final page.

You can devide the whole process in 6 steps:

1. The Idea
2. Evaluation and Preparation
3. Creation and Testing
4. Reviewing and Optimizing
5. Release
6. Maintenance

The Idea

Before you can start your work you need an idea, if possible a good and unique idea.

If you have no idea, think about what would be useful for you and other people. Have look at existing pages and try to figure out what you would do different, or what you would add/remove to increase the user experience.

I don’t want to make you copy an existing page, just try to get an own idea based on an existing website.

Now get the idea on paper and we proceed to step 2:

Evaluation and Preparation

Use paper to arrange your idea. Make notes on what you’ll need when you start working on the new website.
Also, try to come up with a good name and after you got the name have a look for the proper domain. If you have bad luck the domain of your choice is already in use, so make sure you have a few alternatives at the ready.

Then have a look at the exact requirements for your page. Do you need a database? Will it be done using PHP, ASP or any other server side programming language? How much space and traffic will you need? Based on your answers to these questions you may look for a hosting company which offers what you need at a reasonable price (and with a good service).

Maybe you own already a website and intend to use your current web space for the new website. In this case have a look if you need to upgrade to meet the requirements of your new website.

Now get into details of the techniques used. Are there any open source / freeware solutions which can be used and may reduce your own development process?

I prefer writing everything on my own, but I slowly get myself to the point where I say “Why do I have to spent hours to code my feature X while said feature is already available for free?” Decide on your own if it is better to find an own solution or to use an existing one.

Creation and Testing

After you finished your preparation you are good to start writing the page. Usually it is better to have a design right from the beginning. So if you have already a design in mind, create the design before you start coding the back-end of your website.

If you have no real idea I suggest you create at least a developer design and while you are working on the page you also create the final design.

During your work on the website make sure you test it on a regular base or you may have a harder time finding the bugs in your code. I usually test my code as soon as one essential code block is finished. Depending on my speed I’d say I test it every hour.

Reviewing and Optimizing

Actually this runs hand in hand with the previous step, but I separated it to get a little bit more into detail about the meaning of “reviewing” and “optimizing”.

It is proved that when you are working on a website you will have additional ideas. Maybe you even decide to drop the one or the other part. That’s where the “reviewing” occurs:

• You learn that idea X sounded great but is not possible to implement.
• You learn that idea Y could be changed a little bit.
• You have another, additional idea to make your website even better.

While you are working on a site you may also learn new things about the coding language you are using. So it is natural that there are things you can (and shall) change to increase the overall performance of the page.

Last but not least, under optimizing I also understand “SEO”. Yes, it is a good idea to apply your Search Engine Optimization knowledge to the new website. The new site will definitely have a better start once it is released.

Release

Everything is working, there are no bugs left and the design is finished. I guess now it is time to allow the public access the new website.
When I’m releasing a new website, I tell friends about it. I also make posts on forums and if it fits, as comments on blogs. Sometimes I also write an article on my own blog to raise attention.

Additionally I submit the website to all major search engines.

Maintenance

Everything is done. The website is up and running. Only one thing remains: Maintenance.

Yes, it is probably the most boring if not annoying part but it still has to be done.

Any website needs small, regular updates as previously unknown bugs are discovered, parts of the website get broken or used techniques can be optimized. So here is a list of possible maintenance actions you should take care of regularly:

• Design Update – Any design gets boring after a while. So try to have a new design every 6 months. Depending on the page it may also be enough to change the design once a year.
• Bug Fixing – Not much to say about it. Just listen to any bug reports and get the bugs out of your code.
• Optimization – If the site seems to slow down, have a look if there is a section you can optimize. Also, if you learn something new, see if you can apply it to the website
• Updates – If it is new content or new features, see what you can do to keep your visitors interested

My list is far away from being complete but I believe I covered the most essential parts of the maintenance section.
If everything turned out well, your website should be up and running and hopefully you have many visitors. Who knows, maybe it becomes as famous as one of the other big sites on the Internet?

Wrap Up

These are my 6 steps. I hope they are somewhat helpful for those who want to create an own website but have no real idea about what the website could be. Keep in mind, these steps work for me and in the basics they reflect standard procedures all designer and programmer go through.

And how do you approach the process of creating a website?

These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.

So what to do?

First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…

But how can you validate your HTML, CSS and Accessibility?

Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG)

HTML Validation

My major validator is the official W3C validator. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using my Firefox for testing my websites. I have two very powerful extensions installed:

• HTML Validator by Marc Gueury
• Web Developer by Chris Pederick

The HTML Validator by Marc Gueury allows you to validate the page inside the browser without the need to visit a validator page like the W3C validator. The extension has 3 algorithm to validate the page.

• The “HTML Tidy” algorithm is based on the HTML Tidy from W3C
• The “SGML Parser” is based on the SGML reference information for HTML
• The “Serial” uses both validator algorithms one after the other.

The first algorithm is recommended for all while the other two are recommended for professionals. I myself prefer the Serial algorithm, but I believe you need to test which one works best for you.

The Web Developer tool by Chris Pederick does not have a built in validator, but it allows you to easily check a page with the W3C validator. Also it allows you to easily disable scripting or it outlines your HTML elements. It has many more options and is also useful for validating your CSS or W3C.

CSS Validation

I‘m using the official W3C validator for validating my CSS code. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using the Web Developer toolbar. It allows you to disable CSS if you want to. You can edit the CSS code and see the result without having to edit the original file and upload it again. You can even resize your browser window to test your layout for different resolutions.

Accessibility Validation

When writing a website I always rely on the HTML Validator extension. It tells you almost everything you need to know.

There are also online validators available, one of them you can easily access with the Web Developer toolbar. If it is not enough, you can always Google for other accessibility validators.

Wrap Up

Now you know which tools I’m using. I hope these tools will also help you. Or are you using them already? Do you know other tools you can recommend?

Finally the announced new look for Google Webmaster Central is live. I visited Webmaster Central yesterday and it wasn’t updated, so please don’t punish me if this is “old” news…

The Webmaster Central Homepage

I am not sure, but I believe they didn’t only add new icons and changed the overall design, but also added one or two more options. I don’t recall seeing a link to gadgets for your website but maybe it was just hidden in a sub menu.

Overall it makes a really clean and easy to use look. I’m really tempted to try one or two of the new things I see on there…

What’s new on the Tools page?

First of all of course the look. They got rid of the greenish design and moved to the “Google Standard Blue” as I like to call it. It looks pretty now.

They also changed the navigation and it is way more intuitive now. However, they didn’t add any new features. They only removed the tool rating options and the improved the overview for each category.

What do you think about the new Google Webmaster Central page? Are you using it?

Further Reading: Webmaster Tools by Google

The project run by prizee.com has the astonishing goal of receiving 100 million visits. Once this goal is reached, prizee.com will put back 10,000 Euro (approx. 13,612 USD) to the environmental organization AQUAVERDE.

AQUAVERDE is a non-profit association founded in Geneva, Switzerland, in 2002.

Its goal is to promote and support all initiatives thriving to bring a new dimension to the interaction between human society and environement, in the perspective of sustainable development and dignity of People.

The association concentrates its efforts in priority to the safeguard of water ressources in the Amazon region, which constitute today one fourth of the fresh water reserves of our planet.

I believe we should support this project, either by donating to the association or by supporting the Ace4trees website and getting them their 100 million visits.

So what are you waiting for?

Although I use my Analytics account on a regular basis, I used it as a reason to have a closer look at my stats. While doing so, I remembered that I also have an account for Google’s Webmaster Tools (including Sitemaps). So I went there and discovered that I forgot to maintain it for quite some while. As I dug through the options and information provided I discovered a lot of useful options and features a webmaster should use.

The Overview

The sitemap overview, or dashboard as Google calls it, shows you a list of the domains you added for monitoring.
If you have no domains listed, add one.

When adding one you will have to verify that your are really the webmaster of that site.
There are two methods to verify:

• upload a special named html file
• add a special meta tag

However you decide, the decision is period and you need to keep the file or the meta tag online.

Diagnostic View

After you selected a domain you want to have more information about, you will navigate to the diagnostic view with the summary page as the index page.

It provides you with basic information like

• Was your page crawled by the googlebot?
• Is your site listed in the Google Index?
• Are there any crawl errors?

The Summary is self-explanatory and easy to use. Just click on the “Details” link if there are any errors or whatever and you will know what is wrong and how to fix it.
In the Diagnostic View you have a few more tools you can use, I will explain them later because I consider them as “advanced” and very useful.

Beside the Diagnostic View or category, you have Statistics, Links and Sitemaps.

Statistics

The Statistics View is in my opinion a very great tool. It gives you information about Crawl Stats, Query Stats, Page Analysis and Index Stats.

The Crawl Stats could need a few more upgrades because at first you don’t understand the PageRank information, or at least I need a bit time to come behind it. The PageRank shows four bars, with order from a high page rank to no page rank.

These bars are grey and depending on the percentage of the ranked pages they will be filled with a green color. At first glance you have no real idea how this works until you discover that that green represents the percentage of pages for PageRank X. However, you don’t have an exact percentage amount nor do you know which pages have which rank.
Hopefully Google will change it soon because it would make things a bit easier.

Query Stats are like the keywords list in Google Analytics although the list is less powerful. If you don’t want to use Google Analytics, maybe this is enough for you although I highly recommend Google Analytics.

Page analysis shows you how the Googlebot sees your website. I didn’t see much sense in this so far. If you know how this can be useful, please let me know in a comment

Index stats gives you a few links to special searches from Google. Not really that interesting, but maybe it is just because some of those links return no result for me…

Links

Behaves like the Google Analytics link referrer tracking at least for the External links option. Again, not really useful if you are using Google Analytics. Internal links on the other are somewhat interesting because you can see how your pages are cross linking to each other. I just wish Google’s Webmaster tools would draw some kind of a map, visualizing the cross linking.

Sitemaps

This one is really useful. You can submit the location of a XML sitemap to Google and make sure that Google uses the sitemap for indexing your page. Also, it checks your sitemap for errors and tells you what you need to fix to have a valid xml sitemap. This is really handy!

Advanced and especially Useful

I skipped a few tools in the Diagnostic View earlier for a reason. I want to pay more attention to the “robots.txt analysis”, “Crawl rate”, “Preferred domain”, “Enhanced image search” and “URL Removals” tools.

robots.txt analysis
This tool allows you to test a robots.txt configuration before you use it on the live site. If you are already using a robots.txt it will show the current setup.
If you have a lot of errors reported, you can use this tool to modify and test the robots.txt until it works as you want it. As soon as it works, copy it into the actual robots.txt and update it. Next time you get crawled it should work as intended. That way you reduce the risk of blocking the indexing of your page by accident which can result in a worse position on the Google Index. Handy, isn’t it?

Crawl rate
If your server is under a heavy load you can use it to reduce the crawl rate from the Googlebot. It also has a dark side because your site will be less often crawled. I think a better server performance is more useful than a high crawl rate.
If you are lucky, you will also have a very nice option unlocked. Depending on how often you add new content to the page you are able to tell Googlebot to crawl your page more often. I happened to unlock this option earlier of this article and enabled to see if it is useful or not. Unfortunately it also has a dark side because it puts more load on the server. It is your decision if you have the capacity to have some more load or not.

Preferred domain
You are using the www prefix for your site? Set it as your preference. You are not using the www? Tell google that you prefer not using it.
Google don’t promise that your preference will show up on the google search results, but they use it also recommendation. I played with it a while ago and for my pages it did show my preference on the results. Maybe it was because of my keywords, maybe not. Try it and you will know how it works for you.

Enhanced image search
I don’t know exactly what it does, but I’m using it.
As I understand it, Google crawls the images on your website and if you opt-in to the enhanced image search it will assign labels to the images. These labels will improve the indexing and search quality of those images
For more details about this option read the corresponding Google Webmaster Help Center entry.

URL Removals
This possibly the best tool available! You use Google and find pages shown as search result you no longer provide? Send a removal request to google. Within 48 hours these pages will be removed from the index.
Actually it would be enough to give the Googlebot a 404 (page not found) or 410 (gone) error, but depending on your server configuration and some other factors, it can be that the Googlebot sees a 200 (Ok) and that means it won’t remove the non existing pages. If you have such a case, use the URL Removal tool.
I assume you could even use it as you delete the pages, ensuring that the pages are gone already before your page is crawled the next time.

Back to the Dashboard

Last but not least I want to you tell you about 3 tools located on the dashboard which could be useful for you.

Report spam in our index
You use Google Search and the results your receive look like they are spam? Tell Google! The thing they can do is using the information your provide to improve their search algorithm and filters to ignore such spam.

Submit a reconsideration request
If your website violated Google’s webmaster guidelines and you made changes to your site so that it adheres to the guidelines, inform Google by using this tool.
Also, if you suspect that your recently acquired domain may have previously violated our webmaster guidelines, use the tool to tell Google that the owner and the site changed.

Report paid links
Most of us webmasters know how Search Engine Optimization (SEO) works and are aware that “paid links” won’t help increasing your website’s pagerank. However, there are black sheep and they try to use paid links to increase traffic to their pages in an attempt to increase their pagerank.
You know a website that buys or sells links, inform Google. They are always welcome information from their users because they use this information to increase the quality of their search results.

Wrap up

I think the Google Webmaster tools are very useful. However, I don’t rely on them alone. As I said earlier, I’m also using Google Analytics and in combination with the Webmaster tools I’m able to receive a lot of information I can use to optimize my websites.

What about you? Are you using Google Webmaster tools? Do you think I missed something or should explain something more detailed?

Or as Michael Martin from ProBlogDesign.com described it in his article “Does Valid Code Help Your Blog?”:

The W3C is the internet’s daddy. They created HTML, CSS, and dozens of other specifications that govern the use of the technologies that makes the internet thrive today. Valid code is code which meets their guidelines, and can be tested in a validator, such as the HTML and CSS ones.

I don’t want to discuss if using valid code should be used in a blog or if it is actually helpful for a blog. To be honest, I had it in mind, but somehow ProBlogDesign.com beat me to it, which is actually helpful because I can skip this part

To sum Michael Martin’s article up I dare to say that it is useful to use valid code, or better: Web Standards, in a blog.
His reasons are all great, but I have to add one more reason why you should use Web Standards: chances are higher that your blog is accessible by all humans, especially those with disabilities.

Less known among the Internet users is the Web Accessibility Initiative (WAI) of the W3C. Although some webmaster and “webcoder” know and follow the Web Content Accessibility Guidelines (WCAG) put together by the staff of the WAI there are way more webmaster / “webcoder” who are not following these guidelines.

I’m aware that these guidelines are not a must have for a website, however I try to write templates and websites following the WCAG as closely as possible. I’m not perfect on this part and I know that my blog template still needs to adjusted to follow the WCAG, but I’m working on it and I’m using one of the many WAI validators.

So, why I am talking about the whole accessibility thing?

As you know, there are many different browsers out there. Most of them showing the nice designed content of your website, however, there are text-only browsers like Lynx. These users won’t be able to appreciate your nice layout, but they are able to either enjoy your website or just ignore it because of it’s structure. Have a look at your website without the usage of images and CSS, does the “layout” show up in an order which allows you to easily navigate through your page? If not, I’d guess that text-only browser user will ignore your website.

I’m aware of the fact that text-only browser users are a minority, on most page statistics they won’t even show up, but do you really want to loose the few percent of possible customers?

Aside the text-only browser users there is a minority which most people tend to ignore if not forget. I believe it is really sad and of course wrong.
I’m talking about people with a disability. Yes, believe me or not, there are people browsing the Internet who are suffering from blindness or they are deaf or they have epilepsy…I could go on, but I think you get the idea.

It doesn’t require much additional time to make your template more friendly for this target group. For instance, you can avoid using animated gifs so a visitor with epilepsy can enjoy your website. Also, you can avoid the excessive usage of Flash. I know, there are people who would like to lynch me, but be honest. Can you easily navigate through a flash animation without the usage of a mouse? Not really, additionally the animation could prevent the visitor with epilepsy to visit your website at all. Last but not least, (I’m pretty sure that I missed many examples) are the people with some kind of color blindness, like the Red-Green-Blindness. If you use a red-green template you should make sure that either the colors are ok for people with red-green blindness or that you have at least an alternate design available.

Everything I mentioned here is my personal opinion. I know that it can be difficult to maintain a accessibility friendly website and I’m also aware that many major websites like Amazon or Microsoft are not accessibility friendly, but maybe you can make a change.

Whenever I discuss this topic with other people, I hear many excuses for not following the WAI. In return, I always have a solid argument against the excuse.

Bad vs. Good – The Accessibility Discussion

• It will take more time to finish my site!
  Not really, if you follow the WCAG right from the beginning, you will be done at the same time as you would without following it.
• It will make the page more ugly.
  Sorry, but you are wrong here. Actually even the average visitor can benefit from the accessibility optimized website because of the clearer navigation and so on…
• Those disabled don’t have to visit my site and/or shouldn’t use the Internet.
  Ignoring the fact that this is really racist, you should keep in mind that one day you could also suffer from some kind of disability. Of course, it is up
• Major websites like Amazon or Microsoft are not following the WCAG either, so why bothering?
  True, but you know you could make a change? Just because “famous” websites are not following the WCAG doesn’t mean your website wouldn’t help to spread the word and encourage other people to optimize their own websites.

Of course at the end it is your own decision if you try to follow the guidelines or not. I myself will continue to optimize my website(s) into this direction.

What about you?

Well, let’s start at the beginning. On that day my parents drove to Lübeck which is at the Baltic Sea in the northern parts of Germany as they spent their vacations there, traveling by tandem bicycle to Bansin, that’s about 455km away. I traveled with them to Lübeck as I had to drive the car back home and pick them up again a week later after they reached Bansin.

So my parents went off for their vacation trip and I drove home. Everything was cool and I had quite some fun. It was my first time that I made such a long trip alone

I made a stop in Marienborn to have a short look at the memorial of the division of Germany because Marienborn was one of the crossings one could travel to the “German Democratic Republic” (DDR) and the “Federal Republic of Germany” (BRD) back before 1990.

I continued my way home as it was about one hour away from there. Unfortunately, or depending on the point of view fortunately, things got…uhm…bad after I passed the exit to Alleringersleben.

The car in front on me came to an emergency halt, so I had to hit the brakes. Luckily I got to a halt on time, same for the cars behind me. Since I was on the middle lane of the three lane highway, I pulled over to the left lane because it was free. I parked my car, grabbed my mobile phone as I saw smoke about 100m in front of me. I jumped out of the car, had a short look and saw fire. Without thinking I called 112 which is the German equivalent for 911 and reported the accident. I then grabbed the first aid box, locked the car and rushed for the accident to provide first aid.

As I arrived at the scene I saw already other people providing first aid. There were two unconscious persons on the ground, with two burning cars in the background. I approached the helpers trying to revive the unconscious persons and helped with the Cardiopulmonary resuscitation (CPR) on one of the unconscious persons.

Meanwhile the cars kept burning and you could hear how the tires explode. I also learned some details about the accident and it turned out that the other helpers were quick enough to evacuate both cars before it was too late.

Soon paramedics, fire department, police and an emergency doctor arrived, taking over while we helper kept some distance, hanging on our own thoughts and talking with each other to make sure that everyone is fine. After maybe 20 minutes or so we were sure that the person I helped with the CPR didn’t survive. The other person was transported to a hospital by helicopter.

By then I also saw the other involved persons who had only minor injuries. They were also transported to a hospital.

I then asked a police officer if he needs me for something, like for a report or so. As I didn’t see how the accident happened, I could leave. The police officer said “thank you” before I could turn around and had for my car. After what just happened it cheered me up a little bit.
The police allowed us to turn around and drive the wrong direction to the previous (or “next”) exit and I headed home.

Back home I called my parents, telling them more detailed about what happened because I called them earlier so they won’t wonder why I’m later than expected at home. I also called my grandparents…which I regret a bit because my grandpa didn’t really listen to me and 5 minutes later he called me again just to tell me that the accident was on TV and they reported that one person died….hello? I know about it. I was there. Please, I don’t need to know about it, I have to deal with myself now…

As you can imagine I was a bit shocked after this and it took me a week to get over it. The first night I couldn’t sleep much, the next night was better, but it took me a bit to fall asleep as I still saw the scene in front of me.
Today I’m fine, although I “smell” the accident every now and then, like as I write this article, other than that…of course I think about it every now and then, but most of the time I forget about it and continue my life. After all I’m happy that I was able to provide help, even if it was unsuccessful in one case. I’m also glad that my reactions were fast enough that I didn’t crash into the car in front of me and that the driver behind me was as quick.

After thinking about what happened, I’m glad that every owner of a driver license in Germany must provide first aid. That’s why you have to attend a first aid course before you can get your license. Also, all cars must have a first aid box and I can tell it is a good thing. I just wish it was mandatory that all cars have a fire extinguisher. Unfortunately only some cars have them and only certain cars are forced to have one.

As I had to buy a new first aid box on Monday, I also bought a fire extinguisher. I think, after what I saw, it is not a mistake to have one in the car. Although chances are low that this happens to me again, I like the idea to be prepared.

What do you think? Did something like that happen to you? How are the regulations on first aid and fire extinguishers in your country, or what is your opinion? I think talking about this and sharing the thoughts and feelings helps a lot to deal with it.

I assume I had less problems with the heat than anyone else around me, that’s why I decided to tell you my secrets to stay cool and survive the day.

5 ways to stay cool on a hot day

1. Don’t drink cold or chilled drinks

Yes, you read it right. It is the worst thing you can do. If you drink something chilled, your body produces more heat to warm you up again.
It is better to drink something hot or at least at room temperature. That way you will sweat more which will keep you cool.

2. Drink a lot

You loose a lot of water because of sweating, so you need to fill your reserves up. Drinking about 3 liters a day is the best thing you can do, BUT don’t drink alcohol, coffee or tea as they prevent the body from storing the water.

3. Don’t eat heavy food

While digesting food, your body creates heat…which we don’t want, do we? Instead eat fresh stuff like fruits or salads. You can even eat the one or the other ice, but not en mass as my first point also applies for ice.

4. Stay in the shadow…

…or inside. If you are directly in the sun, you will transpire more sweat, loosing more water…which sums up to something not healthy for you
You also reduce the possibility to get skin cancer.

5. Only move as much as you have to

My favorite method. If you have work to do, only do the important work. See which work you can do later, when it is cooler.
Moving/working creates heat and we don’t want to get heated up more than we are already.

That’s it. I hope my tips are helpful.

Stay cool and be safe