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

Question

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?

Answer 1

This may seem a bit drastic but one way to do this would be to make your web application service-based. This means that all of your business logic would be encapsulated inside a one or more services that your web server would call out to.

This leaves you with minimal server-side code on the website itself and all of that code will revolve around the dynamic display of data. This means that you can go ahead and develop all the application logic you want in your services and have your design team hack up UI stuff for the client without stepping on any toes.

Answer 2

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 :-)

Answer 3

It's always good to have a visual 'skeleton' layout in place before you start doing any coding. The reason is, if you have a prototype for a layout, then you're able to iteratively have your customer give you feedback on said layout. If I were you, I'd forgo the table based layout entirely. The reason is, in Webforms, if you aren't using a Master page, then you're going to have to edit each page individually (or make a crapload of controls around the same replicated layout). There are a few ways of doing this:

If you know you're going to use CSS (hint, hint) then I'd look at the various options available: Ironmyers CSS Layouts, Layout Gala (40 CSS stylesheets), and my favorite, Open Source Web Design CSS Layouts, and pick one that you'll think will be 'closest' to the layout you're going to use. It need not be perfect, it need only be a skeleton.

Since websites generally have two columns or three columns with a horizontal menu at the top (Stack Overflow is a good example of this), you may want to look for that type of skeleton. Then, all you have to do is to edit your stylesheet when you want to tweak the layout.

You need not be an expert to do this; but it will give you a quick and dirty view of what your website will look like and how the pieces will fit together.

There are various advantages to using a CSS based layout for prototyping:

• You can do a find/replace for the CSS Class ID to change it if you change the layout (or use your favorite scripting language to do it for you)
• You can spend very little time monkeying with a layout whilst developing the backend
• Already-made layouts allow you to edit the CSS, and hit refresh to see the changes immediately; without having to doodle with the HTML at all.

Your current approach runs afoul of clean separation, and given your question, you know that's the case: With a ready-made CSS Template, you could have the prototype's design up in a matter of minutes and work around that, instead of spending time trying to get the layout done with Tables.

Answer 4

Mostly I work as you defined here :

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.

At first I develop backbone of application, entities, data layer, my reusable utility classes. At the same time a designer creates a design and we show them to customer.

While I develop application's functionality, the design gets ready. I just add links textboxes buttons on page. only breaks and spaces added for design.

When we are ready for the first demo, I apply the design. This make-up operation is the most boring part of the work. Especially if client wants smart grids. But it happens only one or two times.

EDIT (START) :

First I took recurring parts and split them into custom controls. and I add masterpages as containers. I add the custom controls into master pages. then the environment is ready.

Then I start to add masterpage references to my active pages and I add css references or other html elements into active pages if necessary. I mean I do not re-write my active pages. Most of the work done by masterpages and custom controls. I only add a table and some css references to my active pages.

EDIT (END)

I use CSS, ASP.NET Themes, Masterpages and Custom Controls to make design easier and to minimize the design related files.