Home arrow HTML arrow Page 2 - What Makes a Great Web Design?

What Makes a Great Web Design?

We're all aiming for the perfect mix of a quality site layout that's pleasing to the eye and quick to load, but what makes a great web design? In this article Steve shares his thoughts...

Author Info:
By: Steve Adcock
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 22, 2002
  1. · What Makes a Great Web Design?
  2. · What Makes a Great Web Design?

print this article

What Makes a Great Web Design? - What Makes a Great Web Design?
(Page 2 of 2 )

The Greatness of Web Design
A true analysis of great web design should not only consist of graphics and objects. In fact, it may be the least important issue in this argument. Web design is great when it works for the site's purpose, addresses customer needs, and furnishes a positive visage for the product, service or person the site is serving.

Content Placement
Content placement plays a role in what qualifies as great design. It is no surprise that content is placed in a prominent location on the page, and this particular element is not the problem. Font sizes should be kept large enough to be easily read by the Internet population (size 2 is nice, but size 1 can be used with proper line spacing). The text should contrast well with the background of the page. Web designers have more freedom over font color when placed upon a white background.

Content Organization
A very important element in web design is often overlooked when designing a site, and that is content organization. Create major section titles and provide all relevant content and links within those titles. Implement a clear barrier between the major sections on the site, and also consider placing each title on a separate page.

On my site, for example, I separate each major section by page. I have placed all articles within a single page, articles.php. Additionally, I have placed all information about my site on another, separate page at about.php and contact information on the contact.php page. This schema is clear as day and easy to navigate through.

Tables are the essence of many designs, and that is more than understandable. Web designers should strive to keep nested tables to an absolute minimum. Further, consider slicing your tables up -- vertically. One long table will require more load time than multiple tables will aligned vertically.

Now we arrive at images, perhaps the most controversial part of web design. Read carefully, because this is important: graphics do not make a web design great. In fact, the overuse of graphics detracts from what the web site was built to provide. Graphics are enhancements, not elemental objects of a web site. Use them to enhance and not to build. A rule of thumb is to aim for a 10 second maximum load time of any page.

Straying from the how for a moment, let us examine the what. A good web design includes originality. Originality requires thought, consideration and creativity, which is what makes web design a fun endeavor for a lot of us. Giving your visitors a unique perspective on a web design is refreshing in this world of predictability.

One-to-One Site Design
Want a one-to-one relationship with your visitors? You may have noticed sophisticated, database backed web site designs equipped to serve each visitor independently. By supplying the site with your preferences, you can alter the design, including the content and sometimes the color, with a simple click of the mouse. This type of sophistication is certainly not mandatory, but it does offer food for thought.

Don't Forget Coding Standards
A great web design is not just visual. It should include standard, efficient coding practices. For example, the HTML <body> tag's deprecated attributes -- marginwidth, marginheight, leftmargin and rightmargin -- are often written within code to explicitly set the margins, in pixels, of the web site.

Instead, CSS can be used to accomplish the same task, and the code is interpreted like it should be in all standards-compliant browsers. Setting the margin of a web site to 0 using CSS might look something like this:

margin: 0px 0px 0px 0px;

This is a shortcut method of writing something like this, more intuitive, implementation:

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

In PHP, instead of referencing a variable from the URL with it's name, preceded by a dollar sign (ie: $Var), reference that variable via PHP's superglobal array $_GET['Var'] or $HTTP_GET_VARS['Var'].

For more information about standards in particular areas of web development, refer to some of these particularly useful online resources:
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials