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?

Influenced by their articles I decided to review and optimize my own blog. Some of the mentioned plugins and optimizations I had already in use, a few I added as result of reading said articles:

• Installed WP Super Cache to replace WP-Cache 2.0
• Added a visual text editor with NicEdit
• Added CommentLuv
• Added FreePress Recent Comments
• Added NoFollow Free to make sure that DoFollow is enabled
• Last but not least I also added Gravatars.

You could call this some kind of heavy maintenance, so I’m now interested on some feedback. How do you like the new comment plugins? Does the site load slower or faster or did it stay the same? Any reply is much appreciated, especially feedback about the loading time of my blog

Update:
I moved all javascript used on my site to the foot which should reduce the loading time a lot more.
Please let me know if something is now broken

Matt at Webmaster-Source started a new project which adds to his blog. This project is a podcast about blogging and webmastering as these podcasts are quite rare. After searching for a name and volunteers for his podcast he choose BlogCast as title.
I don’t know how many other people volunteered to be a guest in his podcast, but I do know that I received the honor to be his first guest in the pilot episode. I guess this is the right place to say thanks to Matt!

Back to the headline

It is easier and faster to quote Matt right away:

What Do YOU Want Us to Talk About?

Marco of Ruelicke.net and I will be talking about a blog-related topic on the upcoming pilot episode of BlogCast. The only problem is neither of us have decided on a topic yet.

So, here’s my question for all of you: What do you want us to talk about?

Is there something that you want to know more about? Leave a comment, and we’ll consider your idea.

Of course you are welcome to leave a comment on my blog, but it would be a little bit easier for us, if you also leave a comment at Webmaster-Source.

Happy Holidays…

…or vacations, which ever word you prefer.

This week I had vacations and I tried to enjoy them. I didn’t really succeed, but I didn’t fail either:
Originally I intended to stay away from the computer as much as possible, just to get some distance and to prove once more that I’m not computer or gaming addicted. At the end it turned out that I spent some time at the computer, mainly playing World of Warcraft and working on the homepage of Thorsten Kramer.

My vacations also helped to come up with some more ideas for articles, so stay tuned for them.

That’s all for now, I need to write some articles, if you excuse me…

Wait!

I almost forgot something:

Matt at Webmaster-Source announced that there will be a Webmaster-Source Podcast coming soon. He is currently looking for a title for said podcast and he is looking for a blogger willing to give an interview through Skype (or talk about some blogging-related subject). So have a look, maybe you are the one with the perfect name for the podcast…or you are one of those “on-air” with the podcast. (Yes, I told him I would be up for it.)

As I’m already talking about Webmaster-Source: Thanks, Matt, for having my blog on his list of “The Coolest Web Designs On The Planet“!

Thorsten Kramer is a German actor who asked me a while ago to take care of his website. Of course I said yes, although I consider this work more a hobby than an actual job. Anyway, I believe that this website will help me in the future to get into touch of possible clients, so I put a lot of effort into this site to make it as perfect as possible.

Before I start to talk about details and features of the website let me tell you a little bit about how Thorsten Kramer and I worked together to make the perfect site for him.

Working together with a great client

When you stumble through the Net you read a lot about “clients who don’t listen to the webmaster”, I’m very proud to say that Thorsten Kramer is a client you really enjoy working with. He listens to your ideas, asks questions and maybe wants to see a small demonstration. Aside one or two things I’m allowed to optimize the site to make it almost perfect and so far both of us were surprised on how well my SEO work on it turned out. Of course I’m not done with the SEO yet, nor am I satisfied with the current results, but I’m working on it.

Anyway, our paths crossed via another project I tried to get involved but due to a few reasons things didn’t work out there and I stopped my work on that project. Well, Thorsten Kramer asked me if I’d be interested in working for him because his website is a piece of junk. He gave me a link to it and ….well…. my friends know that I hate abuse of Flash, usage of tables/frames for the layout and so on. That page did really everything wrong you could do wrong. Even worse, it turned out that it didn’t work with Firefox at all!!!

So what did I do? First of all I told Thorsten Kramer that the website should be buried as soon as possible. Then I asked him if he has a design in mind for his new website. It turned out that he had an idea I was able to use very well. I started to work on it and within a few weeks I got the first version of it online. It wasn’t perfect, but still way better than the old one.

After I got his ok the new site went live. In no time you saw quite a difference. A few more visitors came and the site got a better ranking. Anyone else would have sat down and stopped working on it. But I didn’t.

While working on that first version I had a few more ideas and also learned a few more things, so I decided to rework the design a little bit and redo almost everything of the PHP code.

Features of the website

One of the many new things was a self-coded PHP template engine which loads faster and does more than the one I found somewhere on the Net. At the same time it is way easier to use, although this part is only interesting for the coder…

Further I trimmed the design a little bit. Instead of the left-aligned, window-width design I switched to a centered, fixed width version. I also dumped the image menu buttons and replaced them with pure text and CSS styling. It took a bit work to convince Thorsten Kramer, but at the end he understood that this is way better and as far as I know he really enjoys the face-lifted look.

Together with the reworked design I also switched to XHTML stricted and made sure that the page is as user-friendly as possible, which also includes following the WCAG guidelines. The design is now fully scale able, including the images…at least most of them.

Behind the scene I created a very easy to use, yet powerful administration for Thorsten Kramer. Since the whole page is build on demand, it isn’t as flexible as a real Content Management System (CMS) like Drupal or Wordpress, but he can do a lot of things.

Unfortunately not everything of the administration is working, yet, due to a security issue I need to fix. I have to do it by admin area and when I have the time because school is currently consuming a lot of time.

I‘m also working on a few more things to optimize the SEO, but this is currently on hold because the Administration of course has the highest priority.

Who is Thorsten Kramer?

You didn’t hear about Thorsten Kramer before? He is (yet) not that well known outside of Germany and I believe there are also a few German who didn’t hear about him…yet… so maybe you read his detailed résumé is available on his german website www.thorsten-kramer.de and with some luck he will become a famous actor in one of the Hollywood movies.

Editor Note:
I want to thank Thorsten Kramer for allowing me to use his image (Copyright by Bartosz Galus) and I’m looking forward to continue to work with him on his site. Although we didn’t meet in person, yet, only via instant messenger and phone, I really enjoy working together with him. I hope we will meet in person one day.

I‘m trying my best but school takes up a lot of time right now. I just thought I let you know before you start to worry…

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?

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?

Anyway, here are my plans for future articles:

• Continuing the Tutorials
• Adding JavaScript and CSS to the Tutorials, maybe even some MySQL stuff
• Adding code snipplets to the Tutorial sections. These are for public use and are not a real tutorial although I may explain a few things of the code…
• Revamping the Review Category. I will stick with Games, Music and Software for now, but I will present a better review system soon.
• Starting the Review series with some details about my computer and how I will test and review Games and Software.
• I’ll continue stumbling around on the Net to find interesting YouTube videos or other “StumbleUpon” stuff

On a side note:
I finally had the time to get rid of the ugly YouTube (and other) “embed” code and turn it into the nice “object” version.
Special thanks to A List Apart as they have an article about the “embed to object” conversion.

Update:
I forgot to mention it above: I switched from blog.ruelicke.net to www.ruelicke.net as I don’t need extra domains for the blog and for my main page anymore. As of today the blog is my main page.