PSD to HTML involves taking a design source file and transforming it into a functioning web page. This usually involves coding HTML and CSS and happens to be what I do for a living. While the end product is more or less the same, the method for getting there can vary.
The most common process I’ve seen is as follows:
- Develop the basic layout (the “boxes”)
- Once the layout is set, go back through and style the text
Styling Text Last
I think the main idea behind the “style text last” method is that you focus on one part at a time. First, you sort out how page elements fit together. Then, you go back in and give attention to the typographic details. It is common to divide typography styling into a separate stylesheet, so theoretically, your workflow is improved because you don’t have to keep jumping between stylesheets.
One Workflow Doesn’t Always Fit All
Apparently I’m an anomaly (if you’ve read some of my other posts, this probably is not a shock to you). I guess it never occurred to me when I started doing front-end coding that there might be an optimal process. Being primarily self-taught, I just dove in and did everything at once.
As I gained more experience, I adopted a type-only stylesheet method for organizational purposes. I tried many times to save the text styling for the end, but I just couldn’t get into the habit of doing it regularly. I had become very efficient with my own method, so changing it actually slowed me down.
I realize now that my preferred workflow is completely a product of my personality. I’m a perfectionist, but also a “big picture” type of person. When I’m coding a design, I can’t mentally separate the text from the layout. I am a visual person so if the text doesn’t look the way it should, I get perturbed and need to fix it immediately.
For me, the supposed time-savings of focusing on one stylesheet at a time just isn’t worth it. I know there will be text style changes that affect the layout and so I’ll end up going back to the main stylesheet (remember, I’m a perfectionist) anyway. Any time I might have saved by putting off the text styling until the end would be negated.
what works for you?
Like many areas of web development, I think it’s important to figure out what works best for you and go with it. I’m curious to hear how others tackle front-end coding. Do you style the text last, and if so, how does it help your workflow? What is your process like? Is your process directed by a higher authority (such as a lead developer or manager) and would you do things differently if you had the choice? Let me know in the comments!
On larger projects that normally end up with huge css files I tend to split the css files up purly for workflow reasons.
Normally I’ll do somthing like this: (first two are always the same)
reset.css to reset all my browser defaults
base.css to put some basic styles back etc
layout.css – headers, footers, columns blah blah
elements.css for bits an bobs like carousels, tabbed areas, photo gallery’s etc
forms.css err for forms
and finally type.css for all the fonty bits.
When the site is no longer in development I’ll merge the css files into one or use a server side script to roll them all up when the page is requested to reduce the number of http requests.
On smaller projects I’ll simply stick it all in one file from the start.
Very interesting! I have similar stylesheets, but with slightly different names. Layout, widgets (the interactive type things like tabs etc), reset, and type are the main ones I use. I like the idea of separating form styling out from the rest, I’ll have to try that out in the future