Improving Your Process: Work from the Inside Out

For a long time I’ve had the opinion that it’s more important to both design and develop websites from the inside out. That is to say, I prefer to begin with the most generic possible interior page and work my way to the home page. I’ve had this stance for a number of years and while I’m comfortable with it, I haven’t met too many designers or developers that feel the same way. I thought I’d state my case in hopes of sparking a bit of conversation as well as an overall view of our landscape of colleagues.

The thought behind it

There was a time where I nearly obsessed over this subject. I was just getting into client work and I was like a sponge when it came specifically to presenting comps to clients. As it stood, the process revolved around showing the client a ‘first round’ comp. It was a home page a designer had been focusing on some time and there was always a bit of holding our breath when it came to the client’s initial reaction. More often than not it was a very positive experience and the client gave the go ahead on interior pages. I’d speak with the designer at that point a number of times because it was usually a “Phew! Now what…” kind of moment where we’d sit and brainstorm where to go next.

The first few times I was involved with the process was exciting, it was my first professional opinion and I was eager to learn from those around me with infinite more knowledge. At the same time though, I couldn’t help but think that there was something awry with having a “Now what?” moment after designs had been client approved.

As time went on I thought more and more about the subject, I thought about the bigger picture of designing websites and began to theorize about consistency as well as detail in the design of a website. While the home page is usually thought of as the first (and possibly last) page anybody will ever see, I feel strongly that there should be a correlation between every page throughout the site. At that point in time, the sites I was working on didn’t have a level of cohesiveness I was truly happy with. Interior pages were an afterthought and at times it showed.

It made sense though, why the designers would begin with the home page. It’s the most fun to work with. You have the most creative liberty when it comes to the home page and with that you have the most elaborate design elements. It made sense from a self-satisfactory angle, but I couldn’t help but think about the interior pages. While the home page is probably the most trafficked page of your site, there is a good chance that it’s one of many entry pages.

If you’re doing things right, lots of visitors will be arriving via search engine results page. Unless they know of your company and are searching for your website, they’re probably searching for something in particular and your company happens to specialize in that area. With an interior page being the entry for an already engaged visitor, I’d conclude that it’s important for a lot of thought put into it. Sure it’s hopeful that the visitor will then move on to the home page and continue from there, but that’s not to say that the home page can’t be equally as impressive when navigating there second.

If a visitor hasn’t bounced away and decides to head to your home page to find out more about you, the experience of the interior page has prepped the stage for an unveiling of the home page, there’s still plenty Wow® to dish out. I quickly realized that it’s important to think about and design every page of a website, but further I began to realize that starting with the interior page will afford you the focus of the more generic elements, giving them the subtle attention they deserve to be impressive in their own right.

The same goes for development

These ideas quickly transferred over to my development process. I was brought on as a developer and that was my prime responsibility. I couldn’t help but be enamored with the design aspect, however. The same faults I saw in designing the home page first instantly clicked with the issue I have with developing the home page first. Home pages are (usually) the most intricate page; they’re going to have the most unique elements by far and with that comes unique markup and style.

I constantly analyze how efficiently I’m writing my style and over time have corrected a number of bad habits I picked up over time. I’m completely self taught in every aspect of development so of course I picked up some really nasty habits along the way, one of which was copying and pasting. When I first began teaching myself CSS I was a legendary Copy-and-Paster; everything is there for the taking and I used it. That’s not staying I would improperly use the work of others, but instead work from it in an effort to get my job done. With that came immense style bloat and way too many !important declarations. It didn’t take long for me to realize that something was very wrong.

One of the best features of CSS, to me, is the reusability factor. If you have a plan for your CSS from the starting line, you’re amazed at how adaptable it can be. Tie that in with an object-oriented state of mind and your CSS will always be all that it can be.

When you start marking up and styling the most generic page of a site, the structure, classes, ids, and selectors are very likely to be reusable a number of times throughout the project. They’re setting the groundwork for all of the detail layers that need to be added with each unique page.

It all comes to a head when you’re building out the home page, though. You’ll have the most unique markup and style combination of any page on the site, but the benefit comes with having to do the least amount of thinking and the most amount of specificity to get the job done. You’ll rarely find yourself backtracking because the foundation you laid will be that much stronger.

This change in thinking wasn’t all that apparent to me in the beginning. I realized that nothing clicked because there isn’t a single point in time where you realize the mistake(s) you’re making. Instead it’s a viral problem that lasts the entire span of the project and adds bloat or instability bit by bit. You (more often than not) will make a change either by being a bit more specific or using an !important declaration and move on; you’re on a budget after all. At the end, the job may be done, but you could have done it better. The stylesheet could be a percentage of what it is, your classes and ids could be that much more useful (and sparse) and your overall document structure could be more sound.

From the inside out

Building websites is a craft; it’s a craft that can be optimized in many ways, with the benefits being amazingly apparent. Do you design/develop from the inside out? Why or why not? Do you find yourself limited creatively when designing a generic copy page first, only arriving at the (more fun) home page last? If so, do the pros outweigh the cons? Have you never felt yourself limited after setting the ball in motion with the home page and having to strip things away to arrive at the lowest common denominator that is a copy-heavy page?