How to test a web designer on css layouts?

Question

Tables have been used in designing web sites for a very long time. Yet, even today, with the multitude of browsers available, many compatibility and accessibility issues rise to the surface. All these issues must be addressed in order to ensure a web site is completely functional to all users including those using alternate browsers.

Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Among the most common browsers today, we see Internet Explorer, Netscape, Opera and Mozilla. However, there are several versions of each on the market. This means that web sites should be tested on as many versions as possible in order to obtain an accurate compatibility analysis.

So if a web designer says he know css based layouts,

• How to test a web designer on css layouts?
• What are the questions he must be able to answer on css layouts?

Answer 1

Are you hiring?

I'll ask him the following questions

• If he knows padding, margin, hover ... and similar things that are small but important.
• I'll ask him if he can design a layout using only "divs", whatever the situation (2, 3.. X columns is).
• I'll check if he knows techniques like CSS boxes, link design, list menu.
• He must know how to use selectors well.
• He should know how to target IE or other browser (or he won't be able to fix bugs).
• He should know how to use Firebug or a similar tool.

Answer 2

• Q: position: absolute positions an element absolutely in relation to what?

  A: Closest positioned container, even if it is relatively positioned. A lot of people seem to believe that the document body is always the answer here

• Q: Other than z-index, what factors affect how elements stack on top of each other, when they overlap?

  A: The order in which they appear in the DOM, and, critically, absolutely positioned elements will always appear on top of elements that are not absolutely positioned. For cross-browser compatibility points, the interviewee might also point out that in IE6, certain elements such as the select will be visible above all others. This is also common with embedded elements, such as flash files, in a lot of browsers.

• Q: What is a block element, as opposed to an inline element? What can you say about the two types' relative appearance?

  A: An element that formats an entire paragraph, rather than a span of text. Examples are h1, div, p. A block element will by default have some margin around it, and will assume 100% width unless specified, or floated. An inline element cannot have a width assigned.

• Q: How is an element, and surrounding elements, affected by floating?

  A: A block element will not allocate more width than it absolutely requires. Sibling after the element will appear side by side, rather than below, if there is available space to allow for it. The element will not allocate any height in its container unless it is cleared. An alternative to this Q would be to simply ask what clear does. This is the main thing I would want from the answer, as I've noticed a lot of people not using clear in an accurate manner, and it can lead to solving simple problems in a very messy manner.

I'd also ask the interviewee to explain the box model.

Answer 3

You usually just want to check his portfolio (which every webdesigner should have). If it uses div's for most layout parts (not using tables at all is as wrong as using them for everything) and his CSS validates with the w3c validator he should be ok.

If you really want to ask specific questions you can use:

- difference between "display: block" and "display: inline"
- what is hasLayout
- how to create a 3-column layout with left and right bar fixed size
- how to center an object to the middle of the page (vertical and horizontal)
- difference of mozilla and IE border model and meaning of width and height (afair in IE elements have a width of width + border, for mozilla the width includes the border)

I'm not a web designer, i just had to do more web layouting than i ever wanted, but those questions should cover the basic parts.

But: The job of a web designer is to create a good looking page, not a CSS/(X)HTML validated page. If the page looks good in all browsers, noone should care if he used tables or divs (unless he uses tables for everything) since sometimes tables make the job a lot easier and don't take much of the flexibility of divs.