Web Designer Interview Questions

For a recent hire I had to put together some questions for the candidates; I found these quite useful so thought I would share them.

Warm Up

I wanted to start off the technical questions with just some easy questions to get them relaxed (developers seem to be a nervous bunch on the whole!). These questions also served to identify the candidates who really didn’t have enough starting knowledge or impetus to be suitable for the job.

  1. Can you explain the difference between server-side scripting and client-side scripting.
  2. Can you explain what XHTML is and how it differs from HTML. What about Tranisitional and Strict Doctypes?
  3. How do you keep your web design knowledge up to date?

PHP, XHTML & CSS Tests

CSS Test

I was looking for a decent understanding of CSS syntax in this test (application of CSS is tested separately). I wanted to make sure the candidate knew enough CSS to get by.

Answers:

  1. No closing ; for each property/value pair
  2. Using ; as a separator instead of , 3 font-face doesn’t exist in CSS (looking for font-family)
  3. Tiny is not a valid font size

XHTML Test

XHTML is fairly straight forward and anyone who could deal with the CSS test should be able to breeze through this; however just to be thorough I wanted to go through this exercise.

Answers

  1. There is no document type declaration.
  2. The title should appear between head elements.
  3. The closing heading tag is incorrect. It should be an h1.
  4. The paragraph containing the non-breaking space entity,  , should be removed as we should not be using HTML elements for layout purposes.
  5. The & should be written as & or &
  6. Bonus points for mentioning that a more descriptive page title or the use of meta data would increase the chances of the page being usefully indexed by search engines.

PHP Test

For the PHP test I put together 6 pieces of simple code and asked the candidates to explain what was happening or to tell me what the outcome was.

Whilst these were written in PHP they are very general questions and should be answerable by anyone with decent development knowledge.

Answers

  1. 10 – Trick questions relating to the scope of the the variable $num;
  2. abc – String concatenation
  3. $b – $a is a boolean and $c is an array
  4. 0 – Simple logic test
  5. Foreach loop builds an unordered list if there are any elements in the array $arr. It prints out the key and value of each item in the array.
  6. A class called person with “name” and “email” variables with getter and setter methods. set_email uses regular expressions to check if the email passed is valid and returns a boolean notification.

XHTML/CSS Coding Approach

We had previously tested to see if the candidate had a basic knowledge of the syntax of XHTML and CSS but this is a distinct skill from the approach to the coding of a web page.

In the final step I gave the candidate a screengrab from one of our websites and asked them to discuss how they would approach the coding of the page.

Whilst not an exhaustive list, I was looking for them to discuss these sort of things:

  • Use of floats and/or absolute positioning to create columns
  • Use of CSS/Javascript for the drop down menu
  • Overlapping image of the bottles and the issues that may arise (for example the use of a PNG in Internet Explorer 6)
  • The fixed height section with overflow: scroll
  • Their approach to the main image on the page that fades behind the fixed height section
  • Approaches to the curved corners and fades used in the design
  • Cross browser considerations

The crux of this test was to see that the candidate had a sound approach to the development of a web page from an initial graphic.

In Closing…

Overall I’m very happy with the process as I feel that it broadly tests the candidate in the areas that are relevant to the job. I would tweak the questions slightly for a more senior role, but I am convinced that the method is a sound one.

For anyone looking to incorporate this sort of test I’d just like to mention the non-technical aspects of the interview. In the end these were pivotal in my choices for the second round of interviewing. The critical instance technique worked well for me (“can you give me an example of…”) and finding ones suitable to the role may help understand a bit more about the suitability of the candidate.

I won’t claim to be an authority on this subject however and I’d love to hear any feedback you have, so please feel free to add a comment.

  • friend_in_deed

    hello Ricky..
    i would love to know the answers to the points you mentioned in the list.

    1. Their approach to the main image on the page that fades behind the fixed height section
    2. Approaches to the curved corners and fades used in the design

  • http://www.rickhuby.com Rick Huby

    The article was written before there was much (if any) mainstream browser support for curved corners so at the time I was looking for them to describe how they would build the box using images and the types of images that would work best.

    Similarly with the faded image I would have expected them to discuss how they would approach this technically with the constraints of the day (e.g. just fake the effect by generating the overall background image with the fade effect in the correct place, possibly use a PNG24 with a semi-transparent background image on the text section with an IE6 fallback).

    Nowadays, I would be expecting them to discuss RGBA for the background and border-radius for the corners – with some discussion on how this would degrade in browsers which did not support these features.

Follow me

Article Tags