lewro’s blog - 2.1 - web designer beginner

As you may have noticed my blog was rendering pretty good in almost all actual web browsers but I had some problems in Safari. I have realized that quite some time when I visited Apple store but I have not had a chance to test my site in that particular browser.

You might know that Apple recently released Safari browser for Windows and that was excellent opportunity form me to try to fix those problems and test them immediately in the Safari browser. So that is what happened just today. I have found the problem and fixed it.

I feel sorry for all those Safari users. And what is the worst about this story? The problem was in just one declaration. The only think I had to do was to write width: 100% for my navigation and the problem was gone. I wish I could have tested it earlier.

And now some good thinks I would like to share with you. I started a new job this week as a junior web designer and (surprisingly in the same week) I was presented in the Smashing magazine in the collection called 45 excellent blog designs. Amazing honor for me. Thank you!

It has been quite some time since I started my collection called drawing without experience. Recently I have found some time to add couple of more drawings into the collection.

I was actually influenced by few podcasts from Media 2007, specially the one from John Hicks and Jason Santa Maria. Both talked about importance of keeping sketchbook. So I bought a nice sketchbook with a lovely paper and mechanical pen.

The mechanical pen is a very good option for traveling. I still keep my set of pencils for sketching at home and I plan to draw some more portraits where you really need those, but the mechanical pencil is more handy and it is always sharp and ready to use. Bellow are couple of recent drawing I have made during the last week.

You may have noticed from my work that I am a big fun of semantic markup. So let’s go straight to the point. When you write semantic html you should always avoid inline scripting and use external scripts instead. The same logic should be definitely used for your CSS as well. If you are on the web standards boat this is no news for you. For all of us who are hooked on web standards this might look like: Hey guys is there any other way? but actually most of the web creators do not think this way. We all wish they would but unfortunately it is not the case yet. There are many reasons why it is like that but let’s not to talk about that right now. For all of you who do not know how I would like to show how to implement progressive enhancement into your web projects.

External java-script

The java-script file should be linked from the head of your html as seen on the image bellow. In some cases web designers link the java-script file from the bottom of the page but that is not an issue here.

Onload function

Ussualy we want java-script fire after the page is fully loaded and for this reason we can use simple onload event inside of our java-script file. Because of the reason we might want to execute more functions when the page is loaded I use the onload function I have found in the Jeremy Keiths book. So let’s see how the function looks like.

So that is all about it. The page is loaded in the java-script is executed.

The next question is: How can I target elements without inline java-script hooks?

Very simple. You will use document.getElementById or document.getElementsByTagName function. So let’s say you want to change the background color of the paragraph with the ID called intro into red when you click on it.

Deeper knowledge

This is just a very simple example but I am sure you got the point. This way you can attack any DOM element and your HTML can stay clear.You can even create html elements on the fly. I use this technique in my blog for the text resizing function.

More examples together with deeper information about DOM-scripting can be found in books:

• Dom Scripting
• Bulletproof Ajax