What is your workflow when designing HTML/CSS layouts?

Question

I have been working with PHP/MySQL as a hobby for close to a couple of years now, I have been working with photoshop for a very long time, I know CSS & HTML well enough to write without any reference, so, I would not consider myself someone who's very new at this. I have recently started developing websites professionally - (only person working on the project).

I have seen the power of Joomla and how you can make a website ready for your customer in a matter of hours(if not minutes). I find it very hard to make layouts that remotely look like the themes on joomla. I find making even simple layouts a very cumbersome process and takes a lot of time to get a good enough output.

I have a feeling I may not be using the right tools or workflow for the job.

What I wanted to findout was, as part of the industry :

• How do, you, make your website when you do it from scratch?
• What are the tools that you use?
• What is your workflow?

Just noted a few things I know already, for your reference(You can skip this if you like)

I have seen the export for web for Photoshop that exports CSS - but (as far as I know) exports only absolutely positioned webpages so they need to be beaten and fixed if you want to use them for example for joomla.

I have used the SiteGrinder plugin for Photoshop that exports HTML/CSS. It looks promising but haven't tried it extensively.

One of the tools that save loads of time is FireBug. This makes it easy to edit html and css on the fly and get the page looking exactly as you want it.

Recently stumbled upon fireworks. But haven't explored it much.

Thanks! :)

Answer 1

I use GIMP to design a site, and to slice the design up in to pieces suitable for the web. I use VIM to write the HTML and CSS (and any PHP/Rails required for the back-end) from scratch. I use Firefox with Firebug for debugging purposes. Very different from your setup, but I'm not advocating you abandon yours in favor of mine. The tools you use aren't so important as your efficiency with those tools. Speed comes from getting very proficient with your tools and then looking for ways to automate or speed up the repetitive parts.

As an example, I've got a Firefox plugin that lets me reload only the CSS of the current page, which is much faster than a full refresh. I went looking for such a tool because I found the ~2 second delay required to reload ALL the contents unacceptable, since I was doing it very frequently for extremely minor CSS changes.

Answer 2

First I code the HTML. Syntactically correct markup is vital to proper styling.

Next I do the CSS.

Simple as that. If I have a PSD or something I'm slicing then I just slice that out when I do the CSS.

If I have a framework (my favorite is Blueprint) I will add those resets and styles first, then start marking up the HTML.

Everything is available by reference, focus more on the initial clean markup then anything else. If your CSS is a mess it's easy to fix. If your HTML is a mess it's just plain hard to write the proper CSS for it.

Answer 3

I personally don't use auto-generating of html/css by different software.

My workflow usually is the following:

1. Make a graphic design in some graphics program,
2. Slice the design by hands and optimize/export individually every slice,
3. Make static HTML/CSS pages in html editor, constantly refreshing it in different browsers for preview,
4. Make templates for CMS/framework, based on static pages in orevious step. I call this "dressing up".

That's it.

Answer 4

I use 960 Grid to start. I also use the Firefox add-in Web Developer. I don't make graphics-intensive sites, but I think I would rely on these two tools even if I did.

You do use a LAMP (WAMP, XAMP) setup? I'd suffer without that. Certainly recommended. But then I'm on the "web dev" side, with a database to connect.

Answer 5

I've been using SublimeText with the ZenCoding plugin. Snippets, multiple selections, and actively highlighted regular expression search can be a massive time saver, especially when making modifications.

While it's not directly related to layout per-se, if you haven't been using a javascript library like jQuery or Prototype to do client side scripting, I highly recommend it. The productivity increase is ridiculous.

jQueryUI, or similar libraries can also save time on components like calendars and buttons, and scripting UI events.

Things I've yet to look into, but might be worth some consideration:
There are also some projects that give some foundational code, like BlueprintCSS and 960grid. Also, there are CSS compilers for improving code re-use and lighter syntax, like SASS, LessCSS, and HSS - SASS seems to be most popular, and though it's built for Ruby, it can be used in non-Ruby projects as well. Another project, Compass, uses SASS to work with Blueprint. If you're interested in these at all, I've just recently asked a question about it here.

For debugging, there's IETester, though it crashes like crazy.

Answer 6

1. I use 960 grid, with slight modifications to the meyer reset included, such as dropping the padding on inputs.

2. Make the design in photoshop

3. Emulate the design in HTML/CSS without using any images, implementing css drop shadows and rounded boxes as much as possible. This ensures that slow connections will see something fairly representative of the final product.

4. Include any functional php that I need for contact forms or w/e, then do a cross-browser check.

5. Use CSS image-replacement, sprites to get the page looking exactly like my original design, cutting up the psd manually, slicing it and then using "save for web & devices". I generally prefer 24-bit png's. Another cross-browser check.

6. Drop in any javascript that I need for animations or AJAX. Final cross-browser check.

Each of these steps is done in a modular fashion, ie. I'd completely finish a nav-bar before moving on to a block of content. Left to right, top to bottom :)

I do all of this so that I know my design follows "progressive enhancement" principles. I can see what my users will see at each grade of browser/connection speed before I move on to the next step.

Answer 7

Memorization of HTML tags and expensive software has never turned anyone into a designer. If you can't produce results with a pencil and a piece of paper, you're going to be beating your head against the wall for a very long time regardless of what tools you download or workflows you strive to emulate.

And do make sure you take a look at the work of those offering advice to the contrary here.