Invest Time
When you’re going to build a new site invest time in the beginning. It is going to save you a lot of time in the end and its going to help you create not only a better product, but one that is sustainable.
If you can, work with someone else to discuss how the markup is going to be structured, naming conventions of IDs and classes, how the CSS will be written, how the folder structure will be laid out, what CMS you’ll be using, if you’re going to be using a javascript library and if so which one?
These are fundamental web development questions yet people skip them all the time. They rush right into the markup and begin developing and building before asking Why and What. I can understand that some of this is due to excitement of building a new site, but often its because they don’t know better.
Take the design (whether it’s a PSD or jpg doesn’t matter) and print it out. Yes folks, print out your web design. Sit down with it (as many unique pages as possible) and a pencil. The full site design doesn’t have to be completed yet, doing this with only a few pieces of the site you’ll still see the advantages. You’ll see common elements throughout the site, try to reuse that markup and CSS as much as possible. Take your pencil and start to sketch out on the printed mockups your divs, classes, ids, unordered lists, elements that will need to be floated or positioned absolutely, etc. This not only helps to reinforce your skills as a developer but it helps flush out any development problems earlier in the process.
If you can sit down with the designer and another developer that’s even better. You’ll be able to bounce ideas off the other developer and learn why the designer made certain design choices. If you can sit down with a very small (and focused) group of individuals it may be more beneficial to use a projector and whiteboard. Yep, you guessed it – project the design onto the whiteboard and light it up with those markers. This will help the group dynamic and discussion. Potential problems can be squashed and ideas or concepts can be discovered with a bit more ease.
This Mental Markup is crucial to building clean and awesome sites and apps. Its only going to help make your product stronger and make you a better developer. If you’re not doing it already you should definitely start.
This entry was posted on Tuesday, April 13th, 2010 at 3:42 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
6 Responses to “Invest Time”
April 13th, 2010 at 3:54 pm
I really like the idea of printing, writing, and discussing ideas before you start building. Another great post, Mike.
April 13th, 2010 at 3:55 pm
Thanks TJ! Glad you’re liking them so far!
April 13th, 2010 at 4:10 pm
Mike- Well-said. I do this before every project (even things where I’ve done the design myself), and it’s an exercise I’ve made prospective hires do during the interview process. It’s always very telling in an interview for a front-end person to see their markup on a page they may have never seen before.
I also tend to do this on wireframes if I know the designs won’t be coming down the line in a timely manner (tends to be the case a lot lately), as the wires should (hopefully) reflect the overall layout & information hierarchy of the site.
-Rob
April 14th, 2010 at 10:21 am
‘Mental Markup’ – Great catch phrase!
April 14th, 2010 at 10:24 am
Rob – Great to hear that you’re already doing this! It can definitely be helpful in interviews, just to see how comfortable they are using this method (Although I would caution if they’re not familiar with this, it may be a bit nerve racking).
Jeff – I love the phrase! Joel Oliveira actually coined it in a tweet a few weeks ago : http://twitter.com/jayroh/statuses/11718884410
April 16th, 2010 at 1:14 pm
Hi Mike,
Reading your post made me think of a really cool iPad app. One app that grabs the .png or .psd which has layers and grouped elements, and you can just tap hold and drag elements to see how the UI looks and feels in various instances.
And I think it would be better than plain paper and you know, eco friendly.
On the other hand, I’ve never used printed designs, because they look to awful printed from a 72 DPI resolution.