What should a UX designer know about CSS (for a job interview)?

Question

I've an interview on Friday for the role of a UX designer. The job description says 'require HTML & CSS skills'. While I know the basics of HTML& CSS, I have not done coding. What potential interview questions should I prepare for and what is a UX designer expected to know about in this area?

Also, typically how much coding does the role of a UX designer require?

Answer 1

I have not done coding

Well, then I'd say you don't have HTML and CSS skills. That's not a deal breaker. But I'd much rather have you be honest about it then try to fake your way through some CSS questions during the interview. State "I understand the basics and am eager to learn more, but haven't actually done front end development work".

Can you share some of the potential interview questions?

They could be all over the place. I don't expect developers to write syntax-perfect code in their head, so would tend to ask questions that were more opinion based rather than specific syntax based. I may ask:

• What elements of CSS3 are you most enjoying?
• Have you worked with webkit css transitions?
• What is your standard way for dealing with IE?
• What CSS frameworks have you used. What did you like/dislike about them?
• Have you heard of OOCSS? What's your opinion of it?

But these aren't types of questions that you're going to be able to figure out answers for in a matter of days. These would all show your actual work experience (or lack thereof).

typically how much coding does the role of a UX designer require?

There is no typical UX designer skill set. It depends entirely on the type of UX team you are on, the skillset of the other team members, and the personal preferences/wants of the UX managers.

I, personally, prefer working with UX designers that can also build what they design. But on larger teams, there's certainly room for all sorts of roles and skillsets.

Many UX teams don't touch code ever. Many UX teams do everything including all the HTML CSS and JS.

Answer 2

There is not the requirement on my team to actually use CSS/HTML at all. We just make PowerPoint storyboards to explain the details of the feature we want to add to the application.

HOWEVER, I find that the designers who DO know CSS have a better grasp of how the application will be built. It is a degree of technical knowledge that makes one a better designer.

It's not that they need to do CSS. It's more of a background thing. If they know CSS, they understand the browser and the web better.

Answer 3

If you haven't got any HTML / CSS skills definitely be honest. If it's something you'd like to learn make sure you state that. Back this up with a little bit of research.

• found a local / online course to get you up to speed http://www.uxbootcamp.org/debriefing-prototyping-in-code-bootcamp-july-2011/

• Maybe you've watched some of the videos on http://membership.thinkvitamin.com/library/html-css

and show you're proactive about improving your skills in this area, if this is the job you want.

It's great to be able to test out your ideas and designs in prototypes with representative users. You might need some help from a developers at first, but you can start off simple using image maps to make click throughs of your sketches / wireframes and then gradually add things like drop downs, radio buttons, and other more advanced Jquery type interactions as you learn.

It's nice to be able to try these things out yourself without having to be reliant on developer resources being available. You want to remove as many barriers as you can to getting ideas in front of people so that you can get feedback as quickly as possible.

Answer 4

I'm a web programmer, and I can tell you that it is extremely frustrating when I had to work on a web project with a graphic/UX designer who knows nothing about HTML/CSS.

The reason is twofold, designers who don't know about HTML/CSS usually fail in two points:

1. make designs that doesn't conform to best practices since they don't know the full capability of HTML/CSS and thought a modern, best practice design will be too difficult to implement.
2. make designs that is gorgeous but nearly impossible to implement without a lot of custom Javascript, again, since they don't know that HTML/CSS aren't able to do everything as easily.

Things that are easy to do in a mockuping tool can be difficult to do in HTML/CSS, while other things that are impossible in mockuping tool is trivial in HTML/CSS.

One example is adaptive layout. Given proper considerations to the initial design, it is possible to create a layout that will adapt to the user's browser (i.e. screen size, mouse or touch screen, aural/braille device, etc); this sort of thing is impossible to express in a mockup and designer who knows nea about HTML/CSS usually create a static layout doesn't fully exploit the capabilities offered by HTML/CSS; or they design too much interactions that would require a lot of custom Javascript work and causes a time/cost overrun.

While I do not expect a designer to be able to churn out HTML or CSS codes, I would expect them to design a web application with web technologies in mind. I would expect them to know what is possible/easy and what is impossible/hard to do in CSS. Given these sort of expectation, I don't think it is possible to learn about these without ever getting your hands dirty with writing HTML/CSS from scratch.

Answer 5

I am not sure what questions might be asked, how big knowledge should UX guy have. What I can share is what I, as a web developer, think is important about CSS.

Definitely the most important thing is good understanding of block elements (like divs, p, table) vs inline elements (like a, span). You should know how to build layout on divs, without tables (by using float property). You should know, when float blocks element does not take any space (for example, if in DIV1 you have only float elements, and DIV1 does not have specified overflow: hidden, then it will not reserve any space). You should know which statements works in which browsers (or more precise: which statements does not work in Internet Explorer X ;-) ). This is tricky and needs experience, so probably you will find out in practice, while spending X amount of hours trying to figure out why IE displays web site differently. If you want to know something interesting about efficiency, then you should know that CSS is parsing expression from RIGHT to LEFT. It means, that if you write

#divId a{
 ...
}

then what will happen is that for EACH link on the site a comparison will be made, whether one of its parrent is #divId. Hence it is inefficient way of writing CSS, even tohugh the intuition says, that it should be.

You should be aware of following CSS expressions (and be aware that 1 and 2 are the most efficient)

1. find element by id - #divId{...}
2. find element by class - .classId{...}
3. you can join conditions, for example find element that has BOTH class1 and class2: .class1.class2{ ... }
4. you can take several elements at once by separating them with coma: class1, class2 { ... }
5. you can take all elements of given type: div { ... }
6. you can take certain element (for example P) only if his brother is other element (for example H2): H2 + P { ... } (this will match < h2 >< p >... but will not match <h2> <any other element than p > <p>
7. you can take element that has certain attribute: a[href]{ ... }
8. you can specify what should be value of attribute: input[type=text]{ ... }
9. you can use pseudo classes, for example: a:hover{ ... }

this obviously does not cover the whole topic, but gives you impression what you might want to google if you feel that you need to

I hope you will gain (even a little) benefit out of this answer, otherwise please just ignore it : )

Answer 6

I've an interview on Friday for the role of a UX designer. The job description says 'require HTML & CSS skills'. While I know the basics of HTML& CSS, I have not done coding. Can you share some of the potential interview questions?

If you're not very familiar with the coding and want a refresh, checking out w3schools css tutorial doesn't hurt: http://www.w3schools.com/css/

Like the post above me says, It's good to know how a page is layed out in HTML with divs and styled with CSS.

I'd also recommend going over some JQuery, as it adds a lot of the magic to the UI of a site. It may be a good idea to know the new trends with HTML5 and CSS3. Check out this site: http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level for a quick crash course on what's new!

A lot of job postings require HTML and CSS skills so that you can speak the same language with front end developers and know the limitations of implementing a design, how long it would take, whats most feasible, etc. Browser compatibility may be important, in general, not just about html and css skills. I'd recommend googling what features browsers don't support.

Also, typically how much coding does the role of a UX designer require?

It depends on the role, sometimes there's no coding at all, sometimes you might want/need to show actual mockups / prototypes in a browser, sometimes you might design and code!

PS: I see that some questions related to CSS have been closed. Can you please guide me to the right forum to post the question if this is not the right one.

http://stackoverflow.com/questions/tagged/css there's a link to stack overflow tagged with CSS questions asked, it may help to go over them quickly?

Good luck in your interview Tara!