How can I design an ASP.NET website delaying the style/theme?

Question

I need to build a prototype for an intranet website, and I want to focus on usability (layout, navigability, etc) and leave the theme for later (I have very bad taste, so this will probably be done by someone else)

I know about ASP.NET's capability of switching themes instantly, but how do I have to design the WebForms for it to be easy later?

• Should I create controls with a class attribute pointing to something that will exist in the future css?
• Or do I simply create the controls without worrying about this and it'll be handled easily when we create the theme?

Answer 1

Yes to both!

Answer 2

just wrap your controls in divs. will make layout/style much easier in the end

Answer 3

If you're planning on using ASP.NET Themes, then you can design all of the controls generically and add Skins later on. Depending on the complexity of the design (meaning how many different styles you have for textboxes or gridviews, etc), this might not save you a lot of work, but it's one way to use the built-in .Net support for theming.

Make sure you use a MasterPage so that all of your sub pages will have a common base, and give all of your elements good IDs, because you will still need to get your hands dirty with CSS to put it all together.

Here's a link to a decent Themes & Skins tutorial. Knowing what you'll have to do in the future to add this in will make it easier to design for it now.

Answer 4

Skins are probably the answer, but something about that irks me (maybe because I don't like being that vendor specific and I'd like my skills to be applicable to other web languages and platforms than .NET). I prefer to use CssClass attributes on all of my ASP.Net controls and carefully class everything else and to use as much semantic markup as possible. Then, when I get the controls set up and working, I use CSS to style everything (although I usually have to tweak the HTML and JavaScript stuff at this point).

Another developer I work with prefers to do everything the Microsoft way with Skins and page directives and so on. It's probably the best way to do it, but it feels to me like it's mixing too much of the presentation into the middle and back-end of the application.

Answer 5

I'd like to make the argument for ignoring themes altogether and using nothing but CSS. It's never been clear to me what value themes add; it's a very Microsoft-specific approach, and its output isn't always standards-compliant. By using CSS you will widen the pool of potential designers able to work on your project, and you will have a better chance of having a cross-browser and standards-compliant site.

If someone else is going to be styling this later, I'd just make sure that you provide enough "hooks" for them to be able to design this. This means adding CSS classes to pretty much everything you do that will be styled similarly, and wrapping things in divs or spans with CSS classes where appropriate, for example

     <div class="ButtonContainer">
       <asp:linkbutton runat="Server" cssclass="Button Cancel" command="Save" text="Save" />
       <asp:linkbutton runat="Server" cssclass="Button Save" command="Cancel" text="Cancel" />
     </div>

If you don't have a solid understanding of CSS and you don't have in-house naming conventions or standard style sheets, though, you won't really know how to structure your divs and classes. In our shop, the way we handle this is the programmer just writes standard ASP.NET markup, and the designer goes through and adds divs, spans, and class names that work with the style sheet they will develop.