How should coder write HTML for a designer without understanding CSS and design?

Question

I've recently started materializing my biggest website project idea. Not sure if this relevant, but I'm using ASP.NET MVC 2 and Microsoft stack.

I appreciate design and aesthetics, and know they play a critical role in the success of this project. I think I have an eye for basic usability things, but from design and visual perspective, I'm really bad.

I'm a programmer, but I am still learning and there is a whole bunch of design patterns, best practices, architecture design to consider in the implementation and trying to learn CSS and design would probably be over my head currently.

This is why I would like to prioritize functionality over design for as long as possible. I would probably be willing to make an investment into a good outsourced design at some point.

I've used a "starter kit" website solution that contains Blue Print CSS framework as part of it. So all the default Views generated are based on Blue Print CSS. But after reading your knowing opinions about CSS frameworks, I'm contemplating whether this is a good idea after all.

To make the work for the possible future designer as easy as possible, how should I write the View/Template code (ie. HTML)? Should I be using div-tags at all? Should I be assigning class names to any content? Should I be trying to declare some meaningful class names or ids to elements based on what they contain or should I leave that to the designer? Can I do this kind of "design" without really understanding CSS? Is plain HTML without any styling and "classing" the way to go?

Edit: To clarify, I would like to leave CSS to a professional. I don't mind the site being absolutely "plain" until a designer does his magic.

Sorry if this seems vague. Any help, pointers and guideline is really appreciated. Thank you.

Answer 1

I would suggest you at least learn some CSS. See? its not that hard To be a good programmer you must have some versatility.

Answer 2

I suggest you start with sitting down with a designer and let him make up a style guide based on html you're planning to render. I had to start with a normal ASP.NET application several years ago and only after a while an external design agency got involved while I insisted that it would be done upfront. Bottom line: we lost quite some time for nothing implementing the strange html that the agency sent us. So communicate well up front of what you expect and what kind of html you must generate so that the designers magic can kick in without too much refactoring from your side.

Grz, Kris.

Answer 3

Write it the way you want, just keep it clean. Write as simple as possible HTML, and style it equally simple. Make all code for including dynamic content as simple as possible to understand - and preferrably use Spark View Engine to even further clean the views. (I've used Spark for one big project, and I'd never ever go back to the default one. Never.)

When or if you hire a designer, you need to work along with him/her anyways. The simpler you can keep everything he/she is going to touch, the better the result will probably be. You will probably need to assist here and there anyways.

Front-end design and server-side coding should never ever be 100% separated, work-wise. Same goes for HTML and CSS. You can't work with them in isolation. They affect eachother.

What concerns div-tags or class names: Doesn't matter. The designer will probably add markup and/or change class/ID-names for own preferences or needs. Use what you need in the beginning, and be ready to change it when or if needed.

When all this is taken care of, be sure to provide the designer with something like a good spec of what you really want. Give him/her any wishes what concerns colors, shapes, positioning etc. This is good value for a designer. And listen to what he/she says if something needs to be changed.

The ultimate baseline is keeping it simple.

Answer 4

Probably the first thing to say is that the approach you're taking (concentrate on the core functionality, and get someone else to do the aesthetics and design later) is definitely the right strategy if design is not one of your strengths. But, however well you code up the HTML according to best practice, be prepared to make changes later once you do engage a desiigner. This is partly because the HTML/CSS split, while intended for exactly this sort of division of labour, is far from perfect, and also because a good designer will probably have ideas you couldn't have anticipated (after all, that's part of their job!)

That said:

To make the work for the possible future designer as easy as possible, how should I write the View/Template code (ie. HTML)?

Make it as clean as possible: try to use HTML tags only for what they were originally intended for (for example, use tables only for tabular data), rather than bending them to do your will. Don't use the "style" attribute on HTML tags, as this will hamper any proper stylesheet use. And make the generated HTML output tidy and easy for a human to parse.

Should I be using div-tags at all?

Yes, but only for parts of the output that consist of logical divisions of the page.

Should I be assigning class names to any content? Should I be trying to declare some meaningful class names or ids to elements based on what they contain or should I leave that to the designer?

Yes - but don't go overboard, because as mentioned above you'll most likely have to change things later as a result of dialogue with your designer - so just do anything that's simple / easy, or that will obviously be useful.

Can I do this kind of "design" without really understanding CSS?

To a limited extent - but you will find it very helpful to know at least the basics of CSS - maybe spend an hour or so working through a tutorial. There's a huge difference between knowing roughly how CSS works, and being able to create bautiful pages with it!

Is plain HTML without any styling and "classing" the way to go?

It's certainly not a bad start, but I'd usually go for basic HTML with a few classes + a small amount of CSS - enough to make the page look "not hideous" - and then expect to have some discussions withe designer about what may need to be changed to let th do their job successfully.

Answer 5

Was going to comment, but this will be too long I think.

The others are right, clean HTML etc.

But you should understand enough CSS to know to leave the functional points within your pages. If you use a DIV to make a logical block on the page, you may as well identify it with a an ID.

If you have a logical reason for one link being different than another (vs a stylistic reason), you should CLASS those links separately.

Do not worry about "how to lay DIVs out for the 3 Column layout" or whatever. Worrying about extra divs (almost) solely for layout sake. But that doesn't mean you shouldn't have much of your sections tagged with some notion of what the block is for.

You may well be surprised at how much a real designer can do with just plain CSS on top of your "ugly" markup, but their job is much easier if the have some IDs and CLASSes noted throughout the pages. After you hand off the generated HTML to a designer, you may well have few structural changes that need to be made to you final pages, with the rest of the magic being in CSS.