Website Design
Taking the time to design your site means less time building it.
Building a web site can take a lot time; taking the time to document the design helps ensure all the pieces are built and fit together right and less time is spent coding
It’s called Application Architecture (or Design). It means putting to paper the pieces of a web site that need to be built (coded) and it's one of the most important parts to building a website. There are several important inputs required to ensure a well designed application: Requirements, Information Architecture and Creative Design. Once these inputs have been reviewed, the application design starts to take shape. The more detail documented; the easier it will be for developers to code the web site.
The Basics: All application designs should include the following information:
- What development languages are used (i.e. php, asp, aspx, xml, ajax, html, jsp, coldfusion). The language selected depends on several things including where will the web site be hosted and what are the skills of the developer
- What stylesheets are to be built and how are they used? Cascading stylesheets (css) are a special web page that lists all the visual styles used on the web site (such as main font, different titles, navigation links, how links look, etc…). A developer can reference a style from one or more stylesheets instead of hard-coding the style on the web page. This enables easier modification of the style and a cleaner approach to development.
- All developers tend to write code differently. Whether there is more than one developer or a different person updates the code at a later date, it’s important to have them following certain coding standards. Things such as putting comments on all functions to explain what they do to declaring all variables at the beginning of a page. Coding standards make the code cleaner, easier to debug when testing and easier to update/modify.
Web Pages: There are several types of web pages. Most are the presentation web pages showing the actual site. Others are supporting or handler web pages containing functions and processes that are executed when forms are completed or shopping carts updated. The Creative Design tells what the pages look like; the application design tells the developer how to write the code to give that look. The Information Architecture determines what presentation pages are built, the application design tells the developer how to build the structure on the page.
Components: Components can be things as simple as functions or as complicated as integration code to connect to an inventory database or a financial system. They can be found on presentation or handler pages.
Database Design: Most web sites have a database behind them that stores the actual content displayed on the web site. In some cases, the database actually has the design for the web site. When designing a database, take several things into consideration:
- Normalization (this is a separate discussion in itself)
- Relationships (what tables are required and how are they related to each other)
- Primary Keys on all tables if possible
- Indexes where necessary to enable fast retrieval of content for display
Session Management: A session is the period a visitor enters the site until they leave the site or close their browser. The web site can store information for a visitor within a session object to use throughout their visit. Once they leave the site, all information stored in that session object is deleted. Sessions can be used to store shopping cart information, general login information, etc…).
Without a clear application design, a developer can be left to their own devices to code the web site. This often leads to incorrect functionality, hard to debug testing errors, messy code and lack of reuse for common functions and styles. Take the Creative Design and Information Architecture documentation and write a clear application architecture design for the development team. The benefits are clear: faster development time, reduced coding errors and easily updated code for future updates and enhancements.
