Semantic vs. Presentational Markup

• “The best web design codes are those that separate structure from content - these pages are more adaptable and easier to update. ”
• (Last modified on: Apr. 12 at: 12:52 am. EST)
  Every so often it's good to freshen things up by changing the appearance of your website. Alizarian.com takes the extra step of ensuring that this process is as simple as possible, because we only use semantic markup: self-explanatory, functional code that is isolated from a page's text and pictures.

• Pages styles, such as font, background color, etc., should all be centralized with one controlling styling script. All our pages maintain visual consistency.
• The elderly, disabled, those using peripherals such as PDA's, and those working in constrained environments, usually will implement styling options (e.g. enlarging font, etc). Our websites maintain flexibility by providing fluid transitions for accessibility needs.
• A centralized style sheet also means that we can change the font of all pages by changing one line of one file. We can change the appearance of every page of a website within minutes to suit the customer's preferences, by using CSS scripting.
• Most search engines rank a page's keywords by both its frequency and placement. Semantic markup helps search engine optimization by assigning correct headings and codes to the most relevent content.
• Above all, our websites are future-proof. Changing and adapting the coding of a web page is much easier if the structure of the page does not interfere with its presentation.

Visual Consistency

• As simplistic and common-sense as this may sound, visitors really like habits. They like everything to be in its place, and get overwhelmed when routine and custom changes. The most usable websites are those that maintain uniform appearance and function accross every page, and only change in size to accommodate for content.

• Uniformity leads to more efficient online experiences. If a website's visitor is used to having the 'search' tab in a specific place every time, that visitor will only have to look for it once - the first time.
• Uniformity tends to be less error-prone. Careless mistakes occur when users click on some particular tab that they're used to clicking on, even if it doesn't represent the same function every time. Otherwise, the user can become overwhelmed easily.

User Flexibility

• Although many people don't realize it, they have the ability to change a website's appearance to suit their needs. Rigidly styled websites inevitably fail because they cannot satisfy everyone's preferences. These websites can become completely unreadable should a user want to change some option, such as contrast or font size.

• Websites should be “device-independent.” That is, websites should remain intuitive and consitent no matter if one is using a computer, PDA, cell phone, or any other mobile device for access.
• Websites should not restrict user preferences. Notice that all pages of Alizarian.com fit all screen resolutions and sizes - from cell phones to oversized LCD monitors.

Centralized Style Control with CSS

• Instead of defining styles for each page element individually, we implement a few scripts that define all of Alizarian.com's pages, known as “cascading style sheets” (CSS). A single line controls all the font styles, and so on. By designing websites in this maanner, semantics and presentation are completely separated. Change and adaptation becomes easier.

• We simplify the process even further by using “nested” classes. One class defines the main content, one for the heading, etc. This further isolation removes unnecessary bulk from webpage code, while making everything easier to understand.
• Here is how other designers would create an improper, presentational heading:

  <p style="font-size: 18px; font-weight: bold">Semantic Markup</p>

• Alizarian.com's pages seperate semantics and presentation. This is how we do a correct heading:

  <h1 class="heading">Semantic Markup</h1>

  The style class, “heading,” is kept in a separate, centralized CSS file:

  .heading { font-size: 18px; font-weight: bold }

• Obviously, the proper method requires more work. The advantage is that if a web designer wanted to change how headings should look that person would have to go over every single heading, changing its attributes one at a time. By separating presentation from semantics, we can change all headings by changing just one line - the “heading” class attribute.
• As a demonstration of flexibility, choose any of the following style sheets below to see this page in a different format. Only one line of this page's code will be changed to assign a different CSS file.
  Original Page Style No Page Style

Semantic Markup for Search Engine Optimization

• A benefit of clean and proper website coding is that search engine spiders tend to follow the intentions of the page's creator. This property is a necessary tactic that most web designers will overlook or ignore.

• For example, lazy designers often cheat by improper HTML tags to differentiate headings from paragraphs, because it saves time. Coding cheats hurt keyword ranking because search engines will be unable to find the titles and sections of page content.
• Look at the above example of the two headings. Notice that the second method provides a correct description of what the context of the phrase, "Semantic Markup" is supposed to be - a heading, whereas the first demonstration is confusing and relates no real extra information to a search engine.
• Search engines naturally place more keyword ranking on headers than normal text. That is why semantic markup is superior to presentational coding. The last thing one wants is to let Google or Yahoo! have trouble reading and interpreting the content and intentions of one's website.

Future-Proof Design and Coding

• For too long, web designers have preferred to stick to what they were comfortable with, thereby yielding results that were outdated, shoddy, and too rigid to meet future demands. Alizarian.com is unique in that we validate the coding of our pages with World Wide Web (W3C) standardization protocols.

• All HTML in our source code fits its function. We do not resort to design cheats and hacks, such as inserting unnecessary line breaks between paragraphs to increase white space.
• Alizarian.com's webpages do not use tables for layout. Tables are for tabular data. Other web designers have fallen into bad habits by using tables, thereby creating code that is over-complicated, too rigid, and impossible to understand by anyone besides the original creator.
• Websites should assign correct coding and attributes for appropriate page elements. Instead of using outdated <table> tags to define layout, we make proper use of divison <div> layers for block elements, and spanning <span> tags for inline elements.
• The test to see why Alizarian.com is ahead of the competition is just to ask other web designers if they use <div> layers on their pages like they're supposed to: most won't even understand the question. That is why their pages cannot adapt to future demands for online services.

• “Innovative, usable solutions for competitive webpage development” - Alizarian Web Design, Inc.

• This site is under construction. Please stay updated!
  
  last updated on 2007-04-24 EST 23:04:28-0500
•  
• www.alizarian.com is a partial collaboration with the Web Design Services division of the Apple Sanity Collective at Applesanity.com: an article-based, online service for the exploration of both the beauty and depravity of humanity, as well as the research and development of webpage design, usability, and search engine optimization. Usability testing for Alizarian.com was designed with considerable help from L. Princop. This domain and all its pages are express property of Alizarian Web Design, Inc. - “Innovative, usable solutions for competitive webpage development”