Moving from s to

Kristof — Mon, 26 Jan 2009 15:55:59 +0000

The title is actually misleading. I'll be explaining how to ditch tables and move to a more CSS-centered approach of your website.

There is still a large number of webdesigners and webdevelopers that use tables over divs and CSS to design their website. This article is meant as a "getting started" tutorial to help you move from tables to divs.

This is in no way a complete guide to CSS-centered design, and it certainly doesn't explain about all the niceties of CSS-centered design. It's meant to help people move away from tables and start appreciating CSS-centered design.

Using a doctype

The first thing you want is a doctype. More specifically, you'll want a STRICT doctype. Most of the problems people encounter at first when using divs instead of tables arise from using transitional doctypes. Strict doctypes will make sure that all browsers look upon your CSS in more or less the same way - you eliminate a lot of the margin/padding/alignment problems by using STRICT doctypes. Use the following at the very top of your documents.

Yes, you can use 1.1 if you prefer. It's even better, since there is no confusion between strict, transitional or framesets in this XHTML standard.

Designing for Divs

Being a good webdesigner doesn't just mean coming up with fancy graphics. Being a good webdesigner also means knowing the limitations of (X)HTML, CSS and keeping those in mind when designing. To make your life easier, here are a few rules of thumb.

Separate the header from the content from the navigation from the footer from the disclaimer from the sidebar. That doesn't mean your layout has to be columnar or in blocks - it just means that you should see the HTML while designing the page. Know where the different sections of your website will be and layout accordingly;
Use elaborate CSS where possible to substitute for images;
Use background images where possible to substitute for elaborate and complex HTML;

Centering your web layout

Instead of using a master table and setting the width to 100% and then fitting the actual table with your design, you can use the following the autocenter your web layout.

Consider the following HTML content.


This div will be perfectly centered.

Pair the HTML content with the CSS below.

body, html
{
     margin: auto;
}

#wrapper
{
     margin: auto;
}

Setting the margin to "auto" will make sure your browsers autocenters the layout by calculating the left and right margins necessary to center the layout.

The Wrapper

The wrapper div is a container that you set to the width you want your website to have. It's the box that you'll be working in. You can omit this if you want your website to be "fullscreen".

Creating columnar layout

Creating columnar layout is simple. Use float to make certain DIVs align left or right, automatically. Give them a width to work with and you're set. Use clear to clear to reset the alignment.

Consider the following HTML content.


     
          This is the left column
          This is the right column

There are several ways to make the left column align left and the right column align right. The method you choose is based on what column you want to have priority. The column you want to have priority should be declared first. The float property you need is the result of this decision. If you want the RIGHT column to have priority, then you first declare the RIGHT column and then set the float property to RIGHT.


     
          This is the right column

Vice versa, you first declare the LEFT column if you want to do so, then set float to LEFT.


     
          This is the left column
          This is the right column

Problem is: if one of both columns is shorter than the other, the longest column will start to take up to the space left by the shorter column. To avoid this, give the suspected longest column a width. If you want to stop floating divs, use the "clear" property and then either left, right or both.


     
          This is the left column
          This is the right column
     
     This will reset to the full width of your wrapper. Ideal for a footer, for example.

You can also use
but that's not the nicest way to clear your floats.

Questions?

Questions? Post them in the comments and I'll answer them. Most of them. At least the ones pertaining to CSS and/or this article.

Microsoft finally out of sync?

Kristof — Mon, 29 Sep 2008 18:38:11 +0000

For ages, Microsoft developers have been proud to have a very easy way to develop AJAX interfaces in .NET. Misguided as usual, they don't know the difference between asynchronous and synchronous requests.

But all that may be about to change. jQuery announced that Microsoft is adopting jQuery into their Visual Studio IDE. Already jQuery is being brainwashed and talking about "existing ASP.NET AJAX capabilities". Well, they're not entirely wrong since the technology is actually named "ASP.NET AJAX".

The probably bad news is that Microsoft "will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications." Let's hope they're not going to turn jQuery into the abomination that J++ became.

Chrome: a silver lining for developers

Kristof — Mon, 22 Sep 2008 12:47:14 +0000

The contest for best post-title is over. I just won it. Now, on to reality.

Did we need another browser? What's up with Google supporting Firefox and then coming out with their own Open Source browser?

I took Google Chrome for a spin as a developer and found out some interesting things. Sure, Google Chrome has no developer toolbar at this moment, but who needs a developer toolbar with all the built-in goodies from Safari? (Thanks Lagaffe). Check out what Google Chrome has to offer for developers.

Until now, people had to rely on Firefox and Firebug to debug their web pages. IE has had a developer toolbar since not too long ago but, face it, nobody develops for IE anymore. We all build things according to standards and then check IE to see where they didn't apply the standards. Right? Well, not entirely. A lot of people still depend on IE as their sole window on the web. This article does not apply to them.

Google chrome may well be the best thing ever to happen in the last year for web developers. Loaded with Apple's Webkit, it has what is probably today's best rendering engine. Webkit/Safari is the only browser that's getting a 100% test result on ACID3. Granted, it's on a developer build and Chrome isn't currently profiting from that build and is stuck at 79% which is slightly better than Safari's current stable release test result.

But how does one take advantage of all the features Chrome has to offer?

DOM Tree Inspector

Upon right-clicking anywhere on the browser screen and selecting "inspect element", a new window opens and it shows you where in the dom tree you clicked. It takes this even further. You can simply hover over an element in the dom tree and that element will get highlighted in the actual webpage. (on a side note: As I'm typing this, I'm also taking advantage of another great Chrome feature: drag the edge of any textarea to enlarge that textarea. Really handy when blogging) You can expand and collapse parts of the DOM tree. It does NOT react to changes in the DOM tree but it does reflect that actual current status of the DOM tree. Confused? When you open the console, you get the actual status of the DOM tree. If you have, for example, a photo gallery where people can drag their own pictures around and re-order the gallery, the console will not update to every change made to the gallery. If you however make changes, close the console and come back, it will reflect those changes. It's a bit of a workaround but it's really handy to check your AJAX and MOOtools based websites (until Dreamweaver CS4 hits the market).

The great news is that it will show you the domtree for dynamically generated content as well. If you have some Javascript lying around that dynamically displays pictures, fetches remote text and creates div's on the fly, you can use Google Chrome to keep track of all that and find that one div that doesn't get created correctly.

CSS Inspector

Google Chrome has what I find to be the best CSS inspection module available today. Firefox has a few nice ones but Chrome definitely takes the cake.

As you can see on the left, Chrome has a number of things to say on every element of you web page.

Just select an element in the DOM inspector and the corresponding style will show up. Not just THE corresponding style as the Firefox developer toolbar can, but it will show you everything you want to know.

Let's start with computed style. This are the current style modifiers applied to the selected object. This may not be what you thought it would look like. Instead, Google Chrome simply adds up all of your styles and shows you what is applied.

Beneath the Computed Style are the other style elements that are applied to the object. All the style elementes you find are what make up the computed style.

In this case, I have the #footer div highlighted. It gets the color from the #footer h2 declaration and the margins from a previous h2 declaration. What declaration? Simply click the link next to the style element and you'll be taken to the CSS that declared it.

Check out the styles that were struck out. That means you applied that style but the style got overridden somewhere else. Google Chrome makes solving these problems a breeze. If I check out the "color" part that got struck out, I can deduct that it got overridden by the color declaration in the #footer h2 element.

The properties at the bottom of the screen should be self-explanatory but I would like to draw your attention to the Metrics box. This box actually shows you how the selected object is drawn. The footer, in this case, is 760x22 pixels, has no padding, no border and a margin of 30. Actually, that is not correct. The footer has no padding declared, hence the dash.

Using this style console has saved a number of my days already by helping me pinpoint those typical problems you get when editing humongous stylesheets.

Javascript console

At the bottom of the console is a small button. Hover the button and it'll say "console". It's a Javascript console in which you can type actual Javascript. Not just the alert as I've demonstrated, but also calling functions in your webpage so you can debug them in the Javascript debugger (alt+`).

Resource console

Last is the resources console. You can access this by simply clicking the "Resources" button on top of the console window. It may happen to you that this window is empty. You can fill this by simply going to the webpage you wanted to check and reloading it. The resource console only shows the resources that are loaded when the console is active. The blue bar is the HTML page. The green bar is the CSS. The purple bar are "other" resources such as flash files or images. The orange bar represents Javascript files and the grey bar is the garbage can.

For each resource, you can see the start of the request, the time it took for the server to start returning data and the time it took to receive the data and render it on screen. It's not useful all the time but it can tell you which files are slow to load and might by holding up your web page. You can also use it to track server response times. Don't rely on this too much when dynamically loading information from the web page. Each additional load, through AJAX or simply loading in a new image will expand the "loading time" from your web page.

Conclusion

Aside from the wondrous interface and the incredible speed at which Chrome handles or helps to handle complicated pages (like the Wordpress admin interface), Google Chrome is mana from the heavens for developers. It may take a few hours to get used to the new interface and to understand all the information you're getting but once you'll have mastered the information, you'll wonder how you ever managed without them.

Google Chrome already made me look good and other developers I talked to have also switched to Google Chrome - even if only for debugging the heavier parts of their website.

So, did we need another browser? I guess we did.

serialkeep.com

Kristof — Thu, 04 Sep 2008 08:34:23 +0000

Some weeks ago, I launched serialkeep.com, a website that can assist you in remembering important information wherever you are.

Just over a year ago, I was burglared. They took the usual: portable game computers, mobile phones, wallets and digital cameras. Oh, and my leather pants that were sitting in a bag they also took - probably to carry the stuff they just took.

I of course neglected to write down important information such as serial numbers, IMEI numbers and distinctive properties of the items.

That's why I decided to launch serialkeep.com. It's a simple website where you can enter freeform information on serial numbers, IMEI numbers, software serials. You can also abuse it by entering telephone numbers, contact information or license plates.

It's very freeform but it's available wherever you are. If your telephone gets stolen why you're away from home, you can look up the IMEI number and have it blocked. If your car is stolen but you can't remember the license plate, you can look it up and have it reported stolen.

Even better: when an item is stolen, you can report it. Reporting an item as stolen will flag that item. When someone buys a second hand product, they can enter the serial number into the database and they will be informed if the item is stolen. No, the owner of the allegedly stolen item will not be informed.

Please register and check it out. I've been using it for a while now and all the bugs seem to have been cleared. Registration is free.

Your data is secure and private - I only want an e-mail address so we can reset your password should you lose it. There is no connection between you as a physical person and the items you register.

On a technical note: this is my first site in PHP/MySQL. It's also the first site in which I used Ajax techniques and fooled around with MooTools. Comments are welcome.

riajobs.org

Kristof — Fri, 27 Jun 2008 05:43:32 +0000

Peter Elst just launched riajobs.org. Riajobs.org is a community-based jobboard. Amazingly enough, the site is free - even for companies that want to post jobs. There's of course the odd feature that requires a fee but even then, 20 percent of the monthly revenue will be donated to charity.

As I write this entry, jobs are being added to the site. The few jobs currently posted originate from all over the globe. Community support looks strong and will be a major success factor for riajobs.org.

The only thing this site needs is a little space for potential candidates and freelancers to leave an impression and the matchmaking site will be complete. And whaddayaknow? Peter already added that to the list of features to be added "in the near future".

Let's hope riajobs.org is not going to turn into another "enter ALL of your details including highschool friends and that female teacher you had a crush on and all the different types of pasta you've eaten in your life and all of the places you visited" setup, but, instead, a simple 1-minute setup. I've always felt that careersites asked way too much information. Just the basics and company and candidate will sort things out themselves, thank you very much.

I believe "niche" websites like this will become the ultimate future. A small company in the Netherlands has set-up a jobsite aimed solely at the creative industry and it's becoming increasingly popular as well.

Let's root for riajobs.org! From the community, for the community and, eventually, by the community.

sentient beings » HTML

Microsoft finally out of sync?

Chrome: a silver lining for developers

serialkeep.com

riajobs.org