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?
Comments
I’ve got to admit, the first time we talked about this I had never even considered working from the inside out. However, I still don’t. But, I do take the interior pages into account much more than I used to. They certainly aren’t afterthoughts any more (planning-wise anyway).
One of the reasons I start designing the homepage first is because it allows me to make a wide variety of design elements, which will likely spill over to the interior pages. Therefore, I’ll have a pool of cohesive assets to pull from once I move on to the interiors.
Regardless of what comes first, I think this says a lot about project strategy in general. It’s a great reminder of the thought and planning that should go into each and every project.
Great post! I recently started working with a new designer, one who’s process is much different than I am used to. I feel he’s inefficient at times and could improve, but then after reading this it made me realize, I have plenty of room to improve myself. I don’t ever code the interior pages first, but I certainly look the entire site over to determine what can be common and reused.
and the whole bit about building websites is a craft is so spot on. I get people that ask me too often: “How easy is building websites? I’m thinking of getting into it…” and its hard to give a precise answer without detail and/or making their head explode 🙂
This is a great concept. I’d love it if this could apply to every project, but in most cases, the client wants to see the home page first, and the designer has to meet that client need, especially for budget’s sake.
In my process, I don’t code until all comps are finalized and client-approved. This way I can markup and style using this principle. When coding I do develop the interior pages first, creating a solid foundation, while keeping in mind how the home page will be coded differently. Then when it’s time to code the home page, the pieces just fit together.
I’m right there with you as far as development. On the occasion that I do any design work I usually start with the home page. I feel like in the design comp stage, clients are expecting to see a home page design. Of course, not every process includes client-approved comps and even if they did I’m sure there are ways around presenting a home page right off the bat. I think the next time I do design work I’ll give it a shot.
Definitely a great point from Steve and Scott! I agree in full that clients are expecting to see a home page first. I’ve actually come to conclude that it’s helpful to present both a home and interior page as a first round unveiling to a client.
Unfortunately, it’s more work for the designer right out of the gate, but hopefully if things have gone right, the client is going to love both and you’ll be a step ahead with getting all of the comps approved. What do you guys think?
[…] This post was mentioned on Twitter by Jonathan Christopher, Jonathan Christopher. Jonathan Christopher said: Improving Your Process is back baby! https://jonchristopher.us/?p=1296 #mbn […]
That sounds like a good approach, especially if the client has been particularly helpful during the early phase when you’re trying to figure out how to solve their design problems and meet their expectations. Having both an interior page and a home page makes it seem like the design is more fleshed out and you’ve put more time into solving the client’s problems (which you would have.)
Also, you could always just show the home page at first. Having started on an interior page could probably benefit the design for the reason you mentioned in the article, whether or not the client want’s to see it up front.
I always considered websites as books, I mean, when I design. The cover must be the sum, the view (depending of the subject) of what’s inside. So, indeed I do both, beginning with pieces of inside content and at the same time concieving the whole concept.
Working from the homepage to the inside seems absurd to me. I went from press, so I assume it’s natural to me to think this way. Acording to my experience, clients are expecting to see the cover before opening the book, but they certainly expect to see something behind the cover as soon as they have the book in hand.
So, I fully agree your second statement, that you have to work both at the same time. And I thank you all for this interesting conversation…
(I apologize about my english, sorry)
Great thoughts Jon. I guess I’ve never really thought of this specifically, but developing from the inside out makes a lot of sense for front-end work. I also agree that showing the client the homepage as well as a mock for an interior page should, in theory at least, give them a stronger impression that you’ve put a good amount of effort and thought into helping them achieve their goals. Yes, it could mean more criticism and work off the bat, but you are a step ahead in an area that you would inevitably go anyway.
It’s always good to get a different take on development styles. Even if you don’t agree, it makes you evaluate your own process and that leads to improvement.
Heh I converted everyone in my workplace to this process around a year ago! I find that the benefits are very far-reaching. First, its harder to use dummy filler and get good results-you really have to think about content. Second, it absolutely helps with the cohesion factor you talk about. Third, i find that its a great way to get under budget with good results – primarily because it narrows the scope for the homepage. Clients tend to have the most opinions about the homepage, and without careful management this can easily turn into revision hell. Designing it last means the client is much more familiar with the site as a whole and generally (if you do a good job) is more agreeable!
This is undoubtedly a wonderful thought, but I m not sure if one can establish one approach over the other. Both have pros and cons. I run a small design house and many a times th client just wants to get an idea by having us design a home page mockup before finalizing between us or some other agency. Your approach is definitely a bigger creative challenge hence should be exercised when time is not a very big constraint. I m definitely keen on starting this with th CSS part of th process 🙂
Thanks for the insight. I am finding that sometimes, when working with a CMS or e-commerce site, I prefer to set up all the functionality the client wants first, and then I design around the process.
[…] gândit cum ar fi (ca designer sau front end) să începi un site cu paginile interioare? Cică ar fi mai bine (și chiar are […]
Hi Jonathan, we have been doing this for a while (development wise), just didn’t realize it… For design though, we adopted a design process that steers the client away from expecting a home page as a comp.. We present them with Mood Boards, and then design the overall page ‘feeling’ – this gets them involved in the process of previewing the site as its built.. starting with a ‘wireframe’ core css set. then we layer on design (like a painter layers on a canvas).. once everyone is invested, and we have lots of markerboard meetings we then do the home page and other primary page designs on top of already approved blocked structure that inherits the already approved design elements.