Search code examples
asp.netdevelopment-process

ASP.NET content/functionality versus design/layout/styling

When developing a web application using ASP.NET, do you have any hints about how to separate the development of content/functionality from the design, so that the two can be developed separately and in parallel?

The situation is:

  • Customer has agreed on what functionality they want
  • Customer is changing their mind about the appearance (styling and layout) of the pages
  • Web designer is non-expert:
    • Isn't developing clean CSS-based layout from scratch
    • Is taking various table-based layouts (with CSS) from 3rd-party sites, to use as an example/prototype of the layout to discuss with the customer

Given this, how to start coding the functionality before the table-based layout is finalized?

I thought that one way to do it might be:

  • Code the functionality (which includes creating the active elements on each page) without caring about (specifying) their layout and styling
  • Then, at the end, after the designer and the customer have agreed on a design, then cut-and-paste the active elements into the designer's prototype pages.

Is this the only or the best way to do it? What other ways are there? Any hints, tips, or tricks to make this easier?

Solution

  • No easy answer to this one but I would start by making it a little easier on your designer - lay down the basic CSS elements first. For example, if you know the color scheme you already have the background. You probably already have an idea of whether you're going for the wide or narrow look. So, you already have the start of the stylesheet:

    *
{
   margin: 0;
   padding: 0;
}

body
{
   background-color:#827575;
   color: #c6d3d5;
   font: 75%/1.5em Verdana, Helvetica, Geneva, "Helvetica Neue", sans-serif;
} 

`#container
{
    margin-top: 30px;
    text-align: left;   
    margin-right: auto;
    margin-left: auto; 
}

`#content
{ 
    margin-right: auto;
    margin-left: auto;
    width: 850px;
    margin-top: 10px;
}

    Place the container div, and inside that, the content div, in the master page - surrounding the main content placeholder. Now, you have something to work with. Your guy can now use tables in the content pages and apply the styles inline there if need be, for now. Later on, another designer with better knowledge can come along and move all the CSS into the stylesheet. Just a practical suggestion to keep it moving along :-)