How Separating Design from Code Made My Sites Better

A lesson learned the hard way after building my first proper website

Posted by Hüseyin Sekmenoğlu on November 19, 2011 Frontend Development

🧪 My First Real Project

In one of my university classes, I had to build a website for a driving school. It was the first time I had created something that looked and felt like a real site.

Like most beginners, I started by designing the homepage. I added menus, a logo, a banner, and so on. Once I had the homepage layout ready, I simply copied and pasted it to create every other page. All I changed was the content in the middle of each file.

At first, it felt great. I thought I had found a shortcut. But that feeling didn’t last long.

🤯 The Pain of Updating Everything Manually

Later on, I wanted to redesign the layout. That is when I realized I had made a huge mistake. Every single page had to be updated manually. Changing a small piece of the design meant editing every file by hand. It was exhausting.

At the time, I didn’t know there was a better way. Then I discovered a tool called Mini-Nuke, a lightweight CMS written in ASP. It worked like Joomla or WordPress, but it was Turkish-made and simpler. Though the original site has shut down, its users continued the project under a new name: MaxiNuke.

That system taught me the value of separating the site’s design from its content.

🧩 The Include File Pattern

When I looked at how Mini-Nuke worked, I saw that all pages included a shared design file called view.asp at the top, like this:

<!--# Include File ="view.asp" -->

Inside view.asp, there were several procedures:

  • Sub UST handled the top header section

  • Sub SAG created the right-side navigation

  • Sub SOL was for the left blocks

  • Sub ALT defined the footer area

Each actual content page looked something like this:

<% 
  call header
  call left
%>

<!-- Page-specific content goes here -->

<% 
  call right
  call footer
%>

By calling these shared layout pieces, any change made in view.asp would reflect across the entire site. One update changed the whole structure. It blew my mind.

🧱 My New Approach to Design

Since then, I apply the same principle to every project. I start with a full-page design, but I split it into reusable parts.

  • The area from the top of the page down to the main content becomes the UST section

  • The footer and anything after the content block becomes the ALT section

I now use divs and CSS, instead of old-school table layouts, to build structure and styling.

This separation makes updates and redesigns much easier. I can now update my layout in one place, and all pages reflect the change instantly.

✅ Final Advice

If you are still copy-pasting full-page HTML across multiple files, stop now. Separate your layout from your content.

Use partials, components, or includes depending on your tech stack. This small change will save you hours of work and frustration in the future.

Whether you are working with ASP, PHP, or any modern framework, reusable layouts are essential for scalable frontend development.