I will begin with the traditional method of web design and then explore a new method that many developers are now using due to the vastly changing web world. Feel free to sit back, relax and take notes as we explore the wide world of CSS.

First, let’s look at the history of CSS (Cascade Style Sheets). The governing body of the Web, W3C, recommended CSS in December 1996, with CSS Level 1 specification. CSS Level 1 described attributes for use in HTML pages. These attributes replaced the traditional font tag along with other “styles” such as borders and colors. In May 1998, W3C introduced CSS Level 2, adding additional capabilities to level 1, including positioning attributes. These attributes replaced the widespread incorrect usage of the table tag to design web page elements. The most recent version of CSS is 2.1 removes some of the attributes that previously had limited usage and adds refinement to others.

Problems with the Traditional Table Layout and CSS Responses:

Making simple changes such as moving images, changing navigation, or switching colors can take hours. Traditional Table layouts have slow-loading pages because the browser has to retrieve the page from the server and decipher the complex elements of the nested tables. When using CSS, the browser instantly renders content from the server because there isn’t extensive markup language there.

Another down side to tables is the browser needs to retrieve, analyze, and render each individual page. The browser has to go through these steps for each page, which can really slow down your website. But, if you use a cascade style sheet (CSS), the first page of the site allows the browser to cache the linked style sheet file that is used for that page. Meaning, all of the remainder of the pages will load faster since the style sheet has been decoded.

Lastly using traditional table layouts adds lots of extra code, which takes time for the computer to figure out and longer for rendering, features such as font tags. This can be minimized by moving codes to a CSS design. This will minimize your code by as much as 50% or more!!! Less code = a faster loading website!

Hopefully this has helped you better understand CSS and why it has become the web standard for design. If you have any questions feel free to comment on this article or contact us directly. We would love to help on your next project.

Related articles by Zemanta

• 15 CSS Habits to Develop for Frustration-Free Coding (noupe.com)

In reality, most people glance at each page and, if you’re lucky, scan some of the text, clicking on the first link that catches their interest or vaguely resembles what they are looking for. Usually there are large chunks of the page that the user doesn’t even look at.

The Home page of a website gives a first impression and thus should have some thought invested in its design. It needs to be straightforward, easy to navigate, and possess a clear message. Below are some questions you need to ask yourself about your current website or the one you plan on building. If you cannot quickly answer the questions below then you might want to redesign your website.

Lets Start with the Trunk Test:

• What site is this?
• What page am I on?
• Where am I in the site scheme?
• What are my options from this level?

Design

• · Conventionally, the logo should be at the upper left hand corner because we read left to right and it is the first thing that catches our eye. Also, the logo should be easy to read, conveying useful information or enhancing the branding value of the website.
• · The home page should have Call to Action and contact info placed prominently.
• · Click-ability should be obvious
• · Scan-ability – fast info
• · Text entry areas are obvious – Empty space effectively ends the page and no one is going to scroll beyond it. Anything below this will be lost, so design page layout and flow to maximize sales potential of page real estate.
• · Formatting applied via CSS (Cascade Style Sheets)
• · Conventions applied to all pages
• · Busy-ness and background noise are minimal
• · Footer includes copyright date and text
• · Correct Spelling/ Grammar
• · Image Quality – make sure images are not pixilated (stretched out)

Navigation

• Site Map
• Sense of scale, directions and location
• Page name matches that links that bring people there
• Breadcrumbs and site-level Navigation

When it comes to site design, most think of a product brochure, while the users reality is much closer to “billboard going by at 70 miles an hour.” People don’t read pages. They scan them. Try the three second scan-ability rule on your website. What can you remember about it after that time span? The most important information should stand out from the rest in those three seconds and you should be able to recall what that information is.

Does this all make sense? If you use these easy usability conventions, your site will communicate clearly and effectively.