My Web Design Framework

mywebdesignframeworkIn many web design projects I tend to have similar initial steps. Because of this behavior and my way of coding, I’ve decided to create a web design framework that will help me gain some time from the overall estimation of a project. Keep in mind that this framework is flexible and you can adapt it to your way of creating websites. At the end of this post you will have several files that will help you build your future web projects faster.

1. XHTML Template

When it comes to writing the HTML template I always use XHTML 1.0 Strict Doctype. I use it because it is quite restrictive and it helps you to separate the design from the content easily. Also the output code is much cleaner and well structured.

For My Web Design Framework I’ve decided to include first a basic template of a XHTML file. This template contains my most common structure that I use in my projects. So basically this template is composed of the XHTML 1.0 Strict Doctype and several nested DIVs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Title</title>
</head>
<body>
<div id="wrapper">
	<div id="header">
 
	</div><!--header-->
	<div id="body">
		<div id="content">
 
		</div><!--content-->
		<div id="sidebar">
 
		</div><!--sidebar-->
	</div>
	<div id="footer">
 
	</div><!--footer-->
 
</div><!--wrapper-->
</body>
</html>

As you can see the template is pretty basic and it has a semantic approach which makes it suitable for simple HTML projects, WordPress themes or any other website project. The DIVs inside the template can be used, adjusted or deleted – this is your choice. You can easily adjust it to your needs to fit your coding style.

2. CSS Template

The second file in this framework is a CSS template, a file that can be easily customized like the XHTML template. For this file I’ve analyzed my CSS creation steps and I’ve decided that several section that I often use must be in this template: CSS Reset, Typography, LoVe HaTe, Clearing Floats methods and Diagnostic Classes.

There are several CSS reset codes out there but you’ll only use the one that is suitable for you. It is not a must to use a CSS reset, so in this case you can delete the first section of the CSS template if you don’t like resets. In my case, for the reset section I’ve started with Eric Meyer’s CSS Reset but I’ve removed several sections from the code.

For typography and LoVe Hate rule I left the properties and values empty. That is because these sections are different in most of my project. The reason for letting the elements still in the file is as I said in the first lines – to boost my productivity.

For the clearing floats problem I’ve placed in the CSS template two classes: fixed and clear. Both can be used to clear the floats but in different ways.

1
2
3
4
5
6
7
8
9
10
11
12

.fixed:after {
	content:"."; display:block; height:0;
	clear:both; visibility:hidden;
	}
 
.fixed { display:block; }
/*  \*/
 
.fixed { min-height:1%; }
* html .fixed {height:1%;}
 
.clear 	{ clear:both; }

The last part of the CSS template are the debugging styles. These are 2 generic classes that I usually attach to different elements in the design. The classes have one a red border and the other one a green background. In this case I can see what elements are OK and what elements are not well positioned, aligned or scaled.

1
2

.fix_br		{ border:1px dotted #f00; }
.fix_bg		{ background:#0f0; }

You can add other elements common for your daily work flow. As I said any part is customizable and in the end you should create your personal Web Design Framework.

3. HTML Components Template

The last part of the framework is an HTML file that has most of the HTML elements. You can find here all headings, paragraph, fieldset, drop-down and others. The reason for this file is to see how HTML elements are rendered after your CSS is applied.

My Web Design Framework

In the end the base for my design work flow is composed of 3 main files:
- XHTML Template
- CSS Template
- HTML Components Template

You can add even more files that you may use like Javascript Frameworks (jQuery, Mootools etc.), your most used snippets etc. You only have to keep in mind that this is flexible and it has to make your coding easier and faster.

Conclusion

Treat this article as an optional thing not a necessary one. You may have a different style and maybe you can’t implements something like this in your work. But when you have repetitive actions in your design process try and embed them in some framework and in this way you will gain speed and time. Hopefully these ideas will be useful to you and you will increase your productivity. Cheers!

Download:
You can click the following link in order to download My Web Design Framework. Thanks

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends