HTML & CSS Direct Study: 2010

Website Auditing

When a business begins to become concerned about the traffic on their site, their conversion rates, or the amount of returning viewer it is time to consider having a web site audit performed. The basics of a web site audit are simple and basic, but the first question to ask is whether or not the site is ready for an audit. Common reasons(questions) the site is ready for an audit include:

What is the goal of this site and are we accomplishing that goal?

How can we increase our visitor-to-customer rate (this is also known as a conversion rate, you want visitors to return to your site in order to create business or in order for your information to be heard)

How can we generate more sales (or how can you generate more usage of the services you are providing)

When these questions are brought to the forefront it is a sure sign you are ready for an audit. The purpose of a web site audit is to have an outside perspective of your site and review all the ways the visitors experience can be improved through you site. This improved experience can lead to greater sales, accessibility, and the ability to have your information in the hands of consumers.

Elements that will be reviewed by auditors:

Competitors Websites
"Call-to-Action"
Usability Issues and Interface Design
Search Engine Optimization
Brand Equity

Auditing Resources:

Are you ready for a Website Audit?
Web Site Audit Template
Website Audit & Recommendations Report
Widget Checklist -- netconcepts.com

The new features in the upcoming CSS3

CSS2 has been around for over 11 years and has allowed web page developers to add consistency, creative ideas, and change how viewers interact with the internet forever. However, it does seem odd that as technology rapidly changes that the current CSS we are using is 11 years old. CSS3 has been around, but it is not frequently used. The limited usage may be a result of the browser capabilities or the fact the designers just don't know much about it.

Browser Capabilities -- before we talk about what CSS3 can do its important to understand how browsers understand CSS3.

Vendor-specific extensions: Browsers have only partially activated some CSS3 elements. This is a result of the uncertainty that WC3 will recommend all CSS3 functions. As a result of users having to use extensions, style sheets can become large, disorganized, and time consuming as a result of how each browser reacts differently.

Five main types of extensions browsers (the first 2 are the most commonly used):

-moz- : Gecko-based browsers such as Firefox
-webkit- : Used with Safari
-khtml- :Konqueror
-o- : Opara
-ms-: Internet Explorer

When looking at the element that CSS3 can provide designers we break them into 13 different categories. Each category does not necessarily work with all browsers.

Selectors
RGBA and Opacity
Multi-Column Layout
Multiple Backgrounds
Word Wrap
Text Shadow
@font-face-Attribute
Border Radius
Border Image
Box Shadow
Box Sizing
Media Queries
Speech

Smashing Magazine -- Article

The Differances of CSS1 and CSS2

Cascading Style Sheets was first developed in order to help web designers develop consistent pages with less coding. Before CSS was released web designers had to insert the style into each page on the web site. This could be very time consuming and also leave room for error, leaving pages inconsistent.

CSS1 was introduced 13 years ago. Two years later an updated version (CSS2) came along, furthermore as we look into the future CSS3 is on the horizon. Looking back on web pages that were designed years ago it is easy to see how far we have traveled in designing esthetically pleasing web pages. With the new development in both CSS2 and CSS3 web pages can rise to an entirely new level.

CSS1 had basic features including limited font selections, usage of tables, and restricted positioning elements. While these features gave designers a new tools to use they only provided some flexibility in design. With the development of CSS2 designers were given many more useful resources.

CSS2 surround the concepts of accessibility. Below are a few ways that CSS2 allows designers to be creative, efficient, and effective.

Aural Style Sheets -- Not only can web site be viewed, but they can now be heard. This allows to add another aspect to enrich the viewer experience of the web page. This feature also allows for blind viewers to access and use your page. Pages that have aural capabilities can be used in cars and other instances where reading may not be a good option.
Paging -- This element allows for media to be placed on web pages such as slide shows, automated books, or paper. Features like this allow for designers to be able to effect how printing marks are viewed and modified.
Media Types -- By having different rules set up for different media types the page handles each media type different, instead of lumping them together. The different types of media are aural, braille, hand held, screen, print, and others.
International -- CSS2 can now appropriately handle international documents including bidirectional text or specific language features like language-sensitive quotation marks.

About.com - Article

JavaScript and DOM - Hand in Hand

JavaScript

Introduced in 1996 by Netscape as a way to add different and new elements to a web page.
During this time Netscape dominated the Browser market.
JavaScript's main purpose is to instruct the Browser on what do to by manipulating elements like height, width, and position of existing element or newly created elements.

DOM Scripting

Document Object Model (DOM) was largely used when fourth generation browsers came out.
Known as an API (Application Programming Interface) -- these are conventions that are agreed on by mutual consent. This is an interface between the user and the content. Some APIs are part of Facebook, Twitter, or Photobuck and allows users to share photos, videos, and other multimedia content.
DOM scripting is a way for developers to conceptualize contents of a document on a web site.
Different Levels of DOM:
Level 0 -- This was the first level of DOM ever created and is used on basic terms for features such as rollover buttons or client validation.
Level 1 -- Provides a DOM Core: This allows for a set of basic interfaces that are in most common documents as well as extending interfaces found in XML documents. Level 1 also provides HTML: A higher level of interfaces than the core. Interfaces introduced at this level were: Document, Node, Attr, Element, and Text.
Level 2 -- This level provide us with DOM Core 2: which enhanced Core 1, DOM2 Views: this allows access to content to that it can be updated through programs or coding, DOM2 CSS: this allowed for progams to update or change current CSS sheets, DOM2 traversal and range, DOM2 HTML.
Level 3 -- This level introduced a few new aspects including Load and Save, Validation, Events, and XPath. While these are new elements, this level also improved the DOM Core.

Best Practices

JavaScript:

In the early stages developers did not approve or use JavaScript for several reasons including the similar name to Java (programming language). Many developers expected a more complex or powerful language, however this simple language can easily alter pages for new effects. Don't mistake the name for a new programming language, and just because it can look simple doesn't mean that it can provide new elements to web design.
JavaScript was adopted because it was the only way that designers could manipulate objects within the page.
Remember: Everyone can learn the basics of HTML. As a result of this there are many pages that have poor structure and want to use JavaScript without learning the language. Coping and Pasting script is not always the right way to do things and may cause the opposite effect you wanted. People can continually copy and past script and each time it becomes change. Be CAREFUL with script that is copied and pasted.
When designing a web site ask the question: How will users experience be affected by JavaScript?
Graceful Degradation: It is very common that users have browsers that are old or have JavaScript disabled. As a result of this the web page may not be navigable and users will not visit this site anymore. Use JavaScript correctly so that users can visit your site despite their status of JavaScript.
Pseudo-protocol - Try to avoid using this as a reference to your JavaScript for several reasons. Old browsers won't understand the protocol and if JavaScript is disabled it will be a broken link.
Backward Compatibility -- use this in the form of if statements to surround code. This way you can find out if the browser supports JavaScript and the code will act accordingly. This will prevent the problems with compatibility and broken links.

Developments in DOM Scripting

Browser Wars -- When DOM scripting first came out the market was completely focused on Netscape, however as Internet Explorer came out the Browsers began to have a technology war. It is because of this that DOM scripting and JavaScript has become more useful and can do more things.
The development of AJAX: Ajax is a new way that was developed to use DOM scripting. Web pages are even more interactive than before!

Dynamic HTML (DHTML)

Before browsers were capable of manipulating objects and creating spectacular pages, designers manually created script interactions through HTML. However, with the ever developing technology designers are able to use Javascript, HTML and CSS to create and manipulate pages so that users can interact with the page.

DHTML = HTML + CSS + JavaScript

DHTML has become a useful tool to designers, users, and businesses within the internet, however despite its success it has the pitfall of having some compatibility problems. As a result of browsers being different particular objects may not be displayed and syntax may be different. A solution to this major problem is DOM scripting.

DOM Scripting

Document Object Model (DOM) is a WC3 standard and has helped to solve many of these compatibility problems. Designers can access the contents of a document in a more suitable way. There are several levels of DOM scripting that can be used to access HTML elements.

The main purpose of DOM scripting is to manipulate already existent tags as well as creating new tags or new elements. Adding, Moving, Deleting, and Editing elements are all made possible through JavaScript and DOM scripting.

Common Features using DHTML

Last Modification Date
Pull Down Menu Navigation
Rollover Butoon
Form Validation

Search Engines

Traffic on your site is one of the most important things to making your site successful. Whether you have a sales site, a personal site, or an informative site it is important to have viewers visit below are several ways to increase and generate traffic.

Set your target search engines -- There are three large search engines that are commonly used. The largest is Google (they have between 55% -65% of the overall market), the second 2 (Yahoo and Bing) are about equal holding approximately (15% - 20% of the overall market). It is important that you start by submitting your site to these engines, since almost the entire viewer population use these to search.
Understand how search engines find your information -- There are 2 ways that search engines search your site. The first is to have real people evaluate your site and then categorize your site into the correct place. Due to the complexities and the overall size of the internet Human Directories like these are beginning to disappear and are being replaced with our next option. Search engines will also use automated spiders. These spiders go through each link on your site and search for keywords in meta tags.
Search Engine Rankings -- After search engine categorize your site they rank it based on their findings. The number of times a keyword is used often helps spiders determine the overall purpose of you site and then rank it. However, you can't overload your site with a keyword, because the automated spiders are quite smarter than that and will notice the pattern.
Finally, once you have prepped your site for the search engine you can submit your site to the big searchers. If you throughly prepared your site you can expect to be rewarded by traffic and benefits of search engines

To submit to Google. --> Google Engine Submit
To submit to Yahoo. --> Yahoo Engine Submit
To submit to Bing --> Bing Engine Submit

Search Engine article

Information Architecture: Deliverables

When dealing with large web sites there are many people involved like programmers, site styles, and information architects. As a result of so many different people working together there are deliverables that help communicate how the site will work with information and data and how it will reach the users.

Types of deliverables that will help develop an information architecture for your site:

Content Inventory: This is a overall look at all of the information that is currently or information that is not part of the site yet. This includes a detailed overview of each page the information of that page and any multimedia or pictures that is involved with that page. This helps everyone understand the purpose of the page. There are several ways to achieve the content inventory.
User Profiles: By creating realistic examples of users the designers, programmers, and architects can better understand how to develop the site. It is crucial to focus on the user's needs and how the site will meet those needs. Remember the site is not for the designers to use but for users to visit and gather the information that is important to them.
Use Cases: These are narratives that walk the developers through scenarios that are likely to happen. By going through these bugs can be fixed and the overall experience can be streamlined in order to reach information easily and quickly. When making layout changes or information architecture changes it helps to ask how users will be affected by this, will they have problems or complications or will this make the experience easier.
Sitemaps : Maps are similar to the models that were discussed in an earlier post. They show the overall layout of information of the web site. This helps to develop navigation and the overall layout of the site.
Paper Prototypes: These are commonly given to executives and overlookers of the overall Web Site to view what the pages will look like. Prototypes can be quickly developed and changed. This visual deliverable helps show progress and new elements to end users to help better develop upcoming features.
Style Guides: These are commonly used to outline the overall style of the site. Consistency is important throughout the entire site to make a finished and professional overall feel to the site. If the site it incomplete or has design errors the users will more likely to dislike the site or not continue to visit the site.

Information Architecture: Models

There are several models that can guide designers in organizing information on the web page. Below are a few conventional models that are commonly used.

Types of Models:

All-in-one: This is the simplest model for a web site. All of the information is displayed on the home page. As a result of the simplistic form maintenance is reduced and the overall designer experience is easy. However, this model is not suited for a web site with a lot of information. With having a large amount of data a site can become overwhelming and not user friendly.
Flat: Also referred to as a 'monocline grouping' this is another simple form with multiple pages. A flat model is considered a step up from the all-in-one page. There are a common set of pages that are all considered to have the same priority or peers to one another. Access to each page is available through all other pages. A common set of pages for this model are Home, About Us, Contact Us, and Products.
Index: This is similar to the flat model with the difference of having one central page called the index. Indexes are commonly used with medium amounts of data and help organize data in a way that makes it easier for users to find the information they are looking for. Examples of indexes are phone books or dictionaries.
Hub-and-spoke (Daisy) : This model is helpful fr information that has distinct linear flows. In situations that you are frequently returned to the common page is an example of this model (i.g. email -- reply's and forwards are all kept within one email on Google Mail). Transactions will commonly share a common beginning and end point creating a loop.
Strict hierarchy: This is a model that organizes data into parent and children like relationships. Users can only access children sites by going through the parent site. Examples of this type of organization are sites that have multiple offices in multiple countries, therefore each office can only be associated with one country. These relationships exist in life, however before deciding on this model make sure that it is the best way to display it online.
Multi-dimensional hierarchy(cross-reference): This allows users to view information in many different ways. By slicing data users can get the information they are really looking for. An example of this hierarchy is a book site (such as Amazon, Barnes and Noble, or Borders). Users can search for books by title, search features, categories, or keywords.
Search: A search feature on a site is commonly used to direct users to the information they want more quickly. This allows users to skip the architecture and hierarchies by simply finding the information they want. This will increase usability and the amount of times a user will return to the site.

Information Architecture

What selection method is used when organizing information? --- It is important to evaulate all of the content you want to put on a web page. When organizing the information in a way that will make sense to users think of the different factors such as what the user wants to get from the site, environment restrictions (such as browsers, speed, bandwidth, screen resolution, operating systems), how users will search for this information (through search engines or other sites), how much time and effort put into the design and organization, and most importantly use common sense. In the end as a designer we are also users so think about how we access sites, what our likes and dislikes are, and what sites we continually use.

Listed below are elements of small web sites that are useful for small companies/businesses or even personal sites. When creating these sites it is important to think about:

Brochure-ware site: These are sites that can commonly be found. Most of the time information is static and not overwhelming in content. Navigation bars can be kept simple to include the home page, about us, services, and a contact page. This type of site usually classify as a flat site and is easy to organize and maintain. However, for larger amounts of information this organization scheme will become cluttered and unorganized for users.

News Items: When posting news about the organization or oneself it is important that you are considerate of what news you post. Think first of the site's goals - is it important for everyone to see this new information. What about the user? -- Do they care to see this new information, is it important to them? How frequently will there be news? -- If you frequently update this page it may be better to create a separate news page.

When trying to organize larger volumes of information consider the methods below:

Architecture based on real systems: Arrange information based on regions (geographically -- countries --> states/regions --> further specific areas). Divide information based on the sectors within the business (i.g. Chemical Manufacturing Company would divide their products into categories -- Restroom Cleaner, Floor Care, Hand, Soaps, Aerosols, Insecticides)

Architecture bases on users' standards: When users visit your site they are there for a specific purpose. Functionality of the site is crucial for the user. Find out what users want out of your site. This design may not be the same as the organization's business structure, however the site is based around the users that will commonly visit the site. This can increase the amount of time they spend on your site and if they will return.

Multi-dimensional Architecture: For large volumes of information offer many different views of data. This will allow users to understand data and have a greater flexibility with your site. (i.g. Amazon offers users to find books through categories, searches, or direct links. Books are in many different categories so this gives the user the opportunity to find exactly what they are looking for).

Web Form Validation

Validation is crucial important in having any sort of data base or reporting system. If the information that is entered by users is not correct or invalid in any way then you recieve data that in unhelpful and can cloud real data within your system. There are several ways that you can validate data:

Server-side validation: This method of validation is done on the server side (hosting side). Advantages to using server side validation is that it can be very secure and works even in browsers were JavaScript is disabled (some people that are trying to insert false information or trying to do malicious things will turn this off to bypass validation). On the other hand disadvantages can be that response times can be slow and feedback can only be given after the user has submitted the information.
Client-side validation: Client side validation helps to brighten the disadvantages of server side. All validation is done in real time while the user is entered information. The user will never be able to submit the information if the validation fails, however on the down side users can turn on the JavaScript that the client side validation runs of off and completely bypass that validation.

Both methods have advantages and disadvantages. The best way to achieve validation is to use them both. This provides a better user experience with less complications with validations while also keeping out those who are bypassing the system.

Why and What information should be validated?

required: This is any information that is crucial to the transaction between you and the user. Without this information the operation cannot be completed. When making forms it is important to think of a few things. 1) Mark any mandatory field (commonly marked with (*), however this should be noted on the form). 2) Minimize any fields that are not mandatory, with limited distractions users are more likely to fill out the form. 3) If all fields are mandatory do not mark them all 4) It is common practice to have no more than 5 mandatory fields for a good form.
correct format: As discussed in an earlier blog format is as important as correct data. Fields such as emails, URLS, phone numbers, birthdays, and other fields all have specific formats. It is best to just let the user enter the data in the way they chose and have the application correctly asses the data, or like suggested earlier have the computer do the formatting while they are typing it in.
Confirmation Fields: This is so that the user knows they are entering in the correct information. This field is commonly used for passwords, email address, or other important information. Confirmation fields should be located below or next to the original field and clearly have a label that states "Confirm you .... ". Provide the user with feedback if the two fields do not match.
Validation Feedback: If the information that was entered is incorrect you need to inform the user in a bold way. Tips for Validation Feedback: 1) The error message should be at the top of the web page so that it is noticeable. 2) The error message should be in red and display an icon that is commonly known as having errors 3) Fields in the form need to be highlighted in red (backgrounds, in-lines, or field labels) 4) Provide feedback with why the information is incorrect ( giving initial hints can eliminate validation feedback in the long run)
Validation upon Submit: This is done after the user hit the submit button at the end of the form. The advantages to this is the user is not interrupted while filling out the form, however it can become frustrating to have to return to the form to correct it. (Server-side validation)
Real-Time Validation (instant): This is when validation is done in real time while the user is entering information. This can be achieved through use of JavaScript and can help users fill out the data as they go along. When using this validation, use it sparingly because it can become distracting if overused.
Help hint: Give the users hints with what each field is asking for. This will eliminate feedback errors and help users to enter the data on the first try. You can do this by having text next to the fields or you can use Help Indicators. These indicators can be used to scroll over and display a description of what the field is looking for.
Dynamic Tips: These tips only appear when the user is entering data in to a particular field. This helps to reduce clutter and focus on the information that is being provided. By placing these tip to the right side of the field they can be helpful and non-distracting.
Masking Input: This can help users enter in information in a particular format. Users are forced to use this format because of the mask that is set. This should be used with caution, in the end it is best to let the user enter various input format and have the application format the data.

Useful Validation Site:

These sites are useful for different types of validations on web pages. Remember to use them correctly and in a helpful way.

Live Validation
Valdanguage
JavaScript Form Validation
Form field Hint with CSS and JavaScript
Dynamic JavaScript Form Validation

MYSQL Connection

This will be a resource guide on how to connect an HTML page to both MS Access and MYSQL Databases.

Designing Web Forms

Form Creation Tips:

Choose the right field -- Depending on the data that you are trying to receive from the users it is very important to choose the correct type of field. Radio buttons can be used when only one choice can be selected. A user cannot select multiple buttons. Check boxes when a user has the option to select multiple choices (including zero or one). Drop down boxes are great for having a lot of different options, but the user only selects one (list of states or country).
Field Length -- When you provide a user with an area to type text (e.g. Name fields, comment fields, home address, or emails) make sure to provide them with plenty of space. If the space is too short users will not be able to correctly enter the information. Also, make sure the the box is large enough to see all of the text they are typing so that the user can read the entered information.
Mandatory Fields -- When creating forms make sure that you do not ask users for unnecessary information. What are you going to gain from each piece of information that they give you? If you gain nothing then do not include it. Furthermore, when you are deciding which fields are mandatory ensure that if the information is not crucial to completing the current transaction to not force the users to provide it and give them a choice.
Descriptive Labels -- Each information field should have some type of label that explains to the users the information wanted. If fields are placed without labels the users would not enter valuable data and get easily confused on which information they are being asked to provide.
Formatting -- Let the computer do the automatic formatting. This way the user can only enter in information the correctly fits that format. This can help solve data errors as well as incomplete data.
Error Messages -- If there is an error in the data that the user has supplied it is important to tell them which part of the information is incorrect. Do not just keep returning them to the form without giving the correct feedback on information. By correctly giving good error messages problems can be troubleshooted much more easily.
Wording -- It is important to use active and positive words in your check boxes and radio buttons. This will not only give a positive overall image to your site, but keep customers upbeat and understanding of the process. Layout of fields is as important as wording. Make sure to break up different fields by subheadings or groupings. Using both of these techniques will ensure that fields are identifiable and users know which information they are agreeing to provide.
List Presentation -- When presenting a list of choices try to list them in a vertical fashion. This will clearly show which choice goes with which bubble. In a horizontal instance the bubbles and options can become very confusing on which go together.

Overall Form Suggestions

Clean, Simple Solutions -- Keep forms short and simple. Users will often become overwhelmed and skim through information or even not fill it out at all. Simple forms can be user friendly and quick. Allowing you to get the correct information and the user to not waste time.
Be Creative -- As IT Professionals we have all seen a billion dull, boring forms. Add something to your form that makes it interesting, furthermore this will create and overall "difference" about your site. Some creative options could involve: Flash, short puzzles, side bars, images, and colorful forms.
Use Illustrations -- Use appropriate images this will brighten up your form, while also making the user feel that the form is useful and making the form more comfortable.
More Functions -- By adding functions such as font styles, links, or picture add ins you can let you users be creative and provide more feedback. They are likely to provide relevant feedback if you give them the resources to use correctly.
Icons -- Use Icons as click-able buttons. By placing icons on buttons such as submit, reset, comment, or other functions. This will have these options stand out, therefore having a higher likely hood of being used by users correctly.

The Basics of Typography + Typography Tools!

The importance of Typography has grown in recent years due to an increase in technology. In past times web sites could only display a select number of fonts, therefore those fonts have become standard and commonly used. Fonts such as Georgia, Arial, or Verdana are seldom known for anything else besides web fonts.

With development of CSS properties and web technology a new range of fonts can be displayed. Choosing fonts is as crucial as layouts and colors and can affect the overall feel of your web page. Below is a list of tip to help set the right mood for a web site:

Readability -- no matter what font is chosen this is the first evaluation criteria. Readers must be able to legibility read the content, if the can't then the point of the web site has become overlooked.
Contrast -- Fonts can range in different forms. Some fonts can be soft and give a sense of elegance, integrity, delicate, or sophistication, on the other hand some fonts can be stable, sturdy, strong, and hard and give a sense of seriousness or responsibility. If your contents contradicts your fonts the entire page can feel confusing or disorganized.
Content -- When selecting fonts keep in mind that the body of the text will be read the most, therefore this font should have the highest priority of readability and give off a correct mood. For really flashy fonts that are on the questionable side of readability are best fit for headers or display sizes.
Font Characteristics -- By writing down a description of the qualities of the content you can better select a fitting font. Selecting a font that fits those qualities will convey to the reader the overall feel of the content.
Pairing -- A web site should have around 2 different typefaces. When pairing fonts it is important to find a medium between the fonts. Having a fonts that are very similar can easily blend and not set apart the content correctly. However on the other hand find two very different fonts can create tension. Good pairing examples: One sans, One Serif; One Old typeface, One New typeface; Using the same typeface but using different weights or elements (Helvetica, Helvetica Condensed, Helvetica Black)

Typography Tools

Font Stacks
Typography Sites
Choosing a font
Techniques
Hyphenation
sIFR
Grids
Typography Practices.

Way to Create Good Typography.

Typography gives finishing touches to web pages. By correctly using typography a page can look finished, professional, and visually appealing. However, if typography is poor and ignore the page can look incomplete and viewers may not return to the site. Below are tips that can be used to asses typography and how to properly use it.

Measure -- Having text lines that are too short or too long can be confusing and distracting, because the reader is always looking to the next word and next line it is important to use a consistent length. An ideal length is 65 characters. (Note: A trick to set the length of your text is to use Robert Bringhurst's method. This method is to multiply the font size by 30. The result gives you the amount of pixels for around 65 characters per line.)
Leading-- The amount of space that is between each line of text is crucial important for readability. Finding a good medium can be hard to do, however the extremes can be visually appalling. Take a collage paper for example, often times these are double spaced, however if this much space was used on a web page the content would be very spread out and hard to read. On the other hand if the text is too close the content can look like it was crammed into a space and can be difficult to distinguish between different lines. (Code for this is line-height: XXpx; A tip for line height is to set it a few pixels greater than the text size (e.g. if the text is 12px then use a 15-16 px line-height)
Hanging Quotes -- By placing the quotation mark in the left margin the reader's focus is not disrupted. These hanging quotes will allow for the text to remain left aligned and not force the paragraph to start further right. To achieve the hanging quotes simply use a block element and set a negative indent. (Code: blockquote { text-indent: -0.8em; font-size: 12 px; }
Vertical Rhythm -- Having a consistent vertical balance is important to the readability of your pages. By being inconsistent with the margins and the way you pad the elements can create an unbalanced vertical rhythm. By retaining a base grid line you can keep the vertical rhythm in your page. Make sure that the spacing between elements, line spacing, and margins are all equal amounts of pixels.
Widows and Orphans -- A widow is a word or small line that is left at the end of a paragraph. An orphan is a word or small line that is at the beginning of a page or column. These create abrupt endings or beginnings that reduce the readability. In order to avoid these it is important to carefully use page breaks and no-space breaks so that these do not happen. By eliminating orphans and widows you can create a professional and complete looking page.
Emphasis -- Important parts of text that you want the reader to remember can be emphasized by using elements such as bold, italic, caps, and other formats. By placing these elements on selected words the reader realizes that this is an important part of the content. However, it is just as important to not disrupt the flow of the content. By making the emphasis dramatic or using more than one element the text can be busy and abrupt. When using emphasis only use one element at a time and use them sparingly.
Scale -- Setting the scale is very important. Using either a traditional or custom scale is acceptable. Scales are normally used to set apart different size headers and content. This helps the reader distinguish the differences between them and helps with overall readability.
Clean Rags -- This is how the rough edge of the paragraph appears. As a result of a paragraph being left or right justified the opposite edge can turn out to be choppy and distracting. In order to avoid these rough edges you have to make manual adjustments to the block of text. Another way to correct this is to use hyphens so that some words can be split on different lines.

Color Palettes & Schemes

Different Types of Color Schemes:

Monochromatic -- this involves just one hue and other colors come from this. Using differing tints, shades, or tones you can create a page that looks professional and organized. This is an easy scheme to create because you are only using one color, however you must choose the correct way to display the colors or else the page can look abrupt and unpleasing to look at.
Analogous uses colors that are next to each other on the color wheel. By selecting 3 colors that lay next to each other on the wheel you can create an easy scheme while also adding differing colors to the design. It is common to have the seem Chroma within all the colors, however you can make your design look more developed by carefully using tones, shades, and tints. Some colors will not do well on a site making it too dark or too light, by adjusting the shades, tints, and tones you can make a more web friendly scheme.
Complementary -- By taking colors that are opposite each other on the color wheel you can add variety to a design. This scheme usually only takes on two colors, however by changing shades, tints, and tones you can create several differing appearances that create an appealing page. On a downside make sure to be careful with hues of the same chroma because they can sometimes create very abrupt designs. It is best to use a different color to separate them or add white space.
Split Complementary -- this is very similar to Complementary, however you do not use the opposite hue of your base color. Instead you take the hues that are on either side of the opposite hue. This creates the Complementary colors that make a vivid design, but prevents mixing two colors that can create an abrupt scheme.
Triadic -- This technique uses hues that are equally spaced around the color wheel. Furthermore, you can then use all dark shades of one color and a few tints, tones or shades of another color to put emphasis on particular colors.
Custom -- It becomes very rare when a web designer is able to choose one particular traditional scheme from above and use it. More commonly today custom schemes are developed in order to meet all the needs of the web site. There are several websites that can help use pictures or colors to develop custom schemes. Web Sites such as Kuler help web designers with custom colors.

Color Contrast

Contrast: is an important element to a page that helps viewers to better understand content information that is being displayed. By creating contrast within a page the overall appearance, readability, flow of information, importance levels of information, and a visually appealing web page are all achieved. Most people begin to think of color when contrast is mention, however as described below there are several different ways to explore and use contrast on a web page.

Different Ways to Create Contrast within a Page:

Color -- There are many different elements located on the page. If each element has the identical style then a reader can not see where some information begins and other ends. For elements that have nothing to do with each other use colors that are very different from each other. For example content area could be dark brown with light text, while the headers, footers, or navigation has a more neutral color with dark text. On the other hand if the elements are similar to each other (i.e. similar articles, content, promotions) then you could use similar colors or the same color just lighter or darker shades.

Within the content itself using colors can distinguish between different types of information. By using different, but similar colors you could distinguish headers, sub headers, and content.

Size -- By creating different sizes within the elements on the page you can direct the viewer to see which elements are more important. Larger elements will often attract the attention of the viewers, while more smaller elements will be looked at secondary. Using bigger text can also attract readers to particular points that you want to be seen first or often.

Alignment -- Alignment is an important part of every document ever presented in business. Page breaks, justification, total alignments are all important, however within a web page there are different aspects of alignment that are important to ensure are correct in order to visually appeal to readers. One good way to use alignment in your advantage is to left align your header then below create a wide margin before you begin your content. This helps set apart the header and content and can help if the font sizes are similar by distinguishing a difference. However, you have to be careful with alignments, because some can just look like design errors. If you create a margin, make it a wide margin, furthermore never center align paragraphs this can make is difficult to read and overall leave an undesirable appearance.

Concepts of Color

Colors are often associated with thoughts, feelings, emotions, and reactions.

Color Explanations:

Warm Colors:
Colors that are warm give feelings of positive, energy, or passion. Colors such as reds, oranges, and yellows that are often seen in sunrises, sunsets, fires, or fall colors often are inviting to people and are commonly used in web pages.

Red -- It a very broad color with many meanings. Associations can be made with red ranging from violence to love, importance to danger, and mean something completely different in other worlds. It is because of the last fact that we must carefully watch what colors we use. Red is a very vibrant color that is great for small pieces or accents, however can be quite overwhelming in larger quantities.
Orange is a step down from red. It is not quite as vibrant, however it has many very important meanings. Orange can be associated with autumn with the leaves changing colors, or with fruit and health. This is a very inviting color that may be a great alternative to the overwhelming Red.
Yellow Yellow is the brightest color of all the warm colors and can have the most energy involved. Similar to red, yellow has a range of meanings: from cowardly to hope to mild danger. Using yellow in a web page can bring many different feels to a page such as being cheerful and happy or even a more neutral color for children.

Cool Colors:
Colors that are very opposite of warm colors, however in order to develop the cool colors you have to mix them with warm colors. Cool colors bring a sense of calm involving nature or water and can range to include being professional and colors of night time.

Green The range of meaning for green begins with new beginnings and growth, however green can also turn into jealously or envy. Green can mixed effects like calming and energizing, however using green within a design may help to balance out the overall look of the page.
Blue The meaning of blue do not come primarily from the color, but the different shades or hues of blue. Darker shades of blue are considered to be stronger and more stable. Blue can be calming, refreshing, and friendly, however it can also mean sad, depressing, or "blue"
Purple is commonly associated with wealth, royalty, and luxury. Lighter shades of purple can be soft and romantic and can often be used for children or toddlers. However darker shades lean toward a wealth and luxury feel.

Neutrals:
Neutrals can be used as both background designs or primarily layout designs. By adding accent colors to the page the neutrals tend to be affected and can be developed and sophisticated.

Black is one of the most complex neutral colors. Many meanings are derived from black in a good end black can show elegance, organized, power, or formal, however it can also be associated with darkness and mystery. When using black it is always important to consider the content of the page and how this page may be viewed. Black can symbolize mourning(death), Halloween, or can make a well designed and organized page.
Gray can be on either side of the spectrum. Darker grays often can be a replacement for black and can show mourning, professionalism, and formality. On the other hand lighter grays can be a replacement for white and are associated to be modern and sophisticated. By adding colors to the grays a web page can really bring out elegant designs.
White is normally portrayed in a positive light. White can be used as a backdrop accented by great colors. Meanings can range from angels to brides & weddings to purity and cleanliness. White is a neutral that can be used frequently and spiced up with surrounding colors.
Brown is a very earthy color that can provide the feeling of stable environments, dependability, and reliability. When using brown it can be set as a background with other surrounding colors or can be used to illustrate differing textures. While using brown in a web page it is important that it does not make the page seem dull or boring.
Tan/ Beige takes on the characteristics of the page around it. This color can be considered cool or warm so it can be used in many different areas and elements. By adding colors an overall feel of the page can change depending on if the colors are cool or warm. On a web page it is common to use these colors as background and paper like textures, however beware that too much and not the right layouts can cause this color to be dull.
Cream/Ivory if the goal of the web site is to be cool and elegant these colors will add both feelings to the page. As a result of the coolness of the color both these colors can evoke a feeling of history. Since white can cause an abrupt layout and can be hard to blend these colors can replace white and help smooth out the overall layout.

Color Concepts:

Hue is a basic term that describes the objects color. By saying that an object is blue, red, or green is to describe its hue. Hue can be very important to your web site because colors convey messages and meanings to the viewers. As described above it is important to carefully choose colors so that your message is properly received. Some hues may be more commonly used such as red, however other hues are not as commonly used like green (but they stand out more). When designing a web site you can mix hues in order to create different moods.
Chroma describes the overall intensity of the color in comparison to white. The purest form of Chroma is a color with no black, white, or gray. Adding these colors reduces the Chroma. When using Chroma in a web site be sure to vary the chroma of the hues so that the page is not overwhelming. It is best to use Chroma in moderation or by using the same hue throughout the page with different levels of Chroma.
Saturation is often compared to Chroma, but has a different context to it. The appearance of how hues are seen in light describes the saturation. One can often describe saturation in terms of weak, strong, pale, or pure.
Value use a high and low scale in order to describe the "lightness" of a color. The scale ranges from black (lowest value) to white (highest value). By using a variety of different values in a web site a visually appealing page can be creates. Different values can also show differing sections within the page without creating abrupt lines.
Tones are created when gray is added to the hue. By adding gray to the hue it creates a duller version of the pure hue, these are commonly used to change the feel of the web page. By using tones the designer can create a vintage, sophisticated, or elegant look. When tones are used throughout a page you can add gray sections that will intensify the tones used.
Shades is created when black is added to the hue. When adding black to a hue you create a darker version of the pure hue. Different affects can come from using shades with tints, textures and varying other elements. The term shade is commonly misused to describe other elements.
Tints are exactly the opposite of shades in which you would add white in order to create lighter version of the hue. Pastels are and example of tints. Tints are commonly used to create a more feminine, vintage or even used on toddler or baby sites.

Layout Divisons - Why they are important

Divisions are the most commonly used layout technique used in today's modern websites. The division element gives the web designer the flexibility to move content and adjust the way it fits on the screen.

Each <.div> tag can be affected though class names and CSS style sheets.

Absolute Positioning
As you can tell in the example below each <.div> element can be changed within the style sheet to look unique and creative. In the below example four <.div> elements are shown using different colors. They are easily arranged using absolute formatting which allows us to move the div tags around to wherever we decide to put the content.

Div Example

As seen in the example div tags provide a lot of flexibility and many different formats.

Z-Index

By using the z-index a web designer is able to change the way that elements are stacked on the web site. Z-index is named for the use of the z dimension, because we are changing the order of how things are displayed in relation to the z axis. How the index works is to use a numerical value, the element with the highest z-value will appear on top.

As you can see in the following example we have taken the example above, but changed the way the divisions are ordered.

Z-Index Example

In conclusion:

As shown divisions can be a very easy, flexible, and creative way to design layouts for a web page. The <.div> tag has given more freedom to the web designers while also freeing up time that was used in order to create layouts. Currently the use of divisions on a web page is encouraged by the W3C as a way of being in correct HTML and CSS language.

Printer Friendly Layouts

Often times web pages can be printed in order to make the content mobile and accessible by readers. Information such as emails, directions, research, articles, and much other important information is desired in a print format. It is because of this that we should make sure that our web pages and their layouts are printer friendly. This can be accomplished by having an additional style sheet that modifies the page to make it printer friendly. Attributes such as:

----Font

----Color

----Images

----Links

----Visual Layouts

Best Practices for Creating Printer Friendly Pages:

Remove any backgrounds on the page. This allows for the page to be printed on a white page, saving ink and time.
Text should be black or a color that will print well. All text should be the same color. Black is preferred because it will print on both color and black only printers.
Ensure that the text on your page can be read. Adjust the font size according to what is most visible.
When your page is printed users cannot visit links, therefore the formatting should change. You may want to leave the underline so that readers can tell there was link there.
Remove non essential elements such as navigation, excessive pictures, advertisements, and buttons. Content is the most important thing to display when printing a page.
Make sure that your layout fits well on a page, because printer paper is normally 8 ½ by 11 some horizontal layouts may need to be changes to fit better vertically within the page sizes.

Layouts - Past, Present, Future

Layouts using Table:
As previously discussed may web designers would create complex layouts using primarily tables. Simply by stretch and reforming the spans in a table you could create a webpage that looked neat and organized. However using tables to create layouts can be very time consuming and frustrating, because each cell associates with all of the others often times making changes to one things means correcting errors on other cells. W3C (World Wide Web Consortium) as guided many web developers to use other ways to create creative and efficient layouts, however tables can be useful in some situations and make data easily presentable.

Layouts using Frames:
Frames are regions within the webpage that display multiple HTML pages. Displaying multiple pages within one page allows for flexibility, creative designs, and ability to changes individual pages without affecting the surrounding information. Frames were commonly misunderstood and misused when they were first developed, therefore currently they are not widely used and can sometimes be confusing to users. However, if frames are used correctly they can be beneficial by showing multiple pages of information at one time. Despite the development in frames there are still many issues that turns both developers and users away from them. Many problems are associated with frames that cause people to think negatively about them. Trouble with navigation, printing, bookmarking, designing, and even browser compatibility all affect the usage of frames. It is because of these drawbacks that they are not frequently used.

Layouts using Division:
Currently the most accepted form of layouts are created using divisions. Divisions can be manipulated and placed wherever the developer wishes for them to be located. By having individual divisions the developer can create different backgrounds, text styles, and appearances. This gives the developer room to be creative while also organizing a site well. Divisions can be very flexible and allow many changes to be made to them while not affecting other divisions in major ways.

Best Practices for Layouts (some CSS too):
1. Set Defaults – This helps to bridge the gaps between different browsers. When you set defaults this lets you start of with a blank page.
----- Margin = 0
----- Padding = 0
----- Border = 0
2. Work from the top down – in sections – If you begin at the top of the page then you are starting with the largest element. By working down the page you can enter into more detailed sections. This creates better flow and can prevent errors.
3. Document and Debug:
---- Documentation is important – you may not be the only one to ever edit the web page. If you clearly make comments then others can read, understand, and edit your code.
---- Debug: by debugging your page you accomplish a few things. First, this means that your site will display correctly as you wish for it to be displayed. Second, bringing your code up to W3C standards makes your code correct by industry standards
-------§ Firebug – Debugger add-on used in Firefox browsers
------- § W3C Validation – Checks your site for critical errors, can correct layout problems you may be having.
4. Come to a decision on Browsers – There are multiple browsers that users can view a web page through. It can be very difficult to create a page that will look correct in all browsers. When you develop a page research and decide which browsers you want your page to work well in. This decision can be made through analytics or recommendations by W3C.
5. Borders – Borders are not always used to outline each element within a page, however when developing a web page if an element is not correctly positioned or displaying correctly you can set a border to display. This will reveal why all elements are not correctly displaying.
6. CSS Practices:
---- Generic Classes – these can be used multiple times in multiple elements. This helps to set the overall look of the page without having to type repeated code.
----- Example: .bold {font-weight:bold;} -- this can now be used any place bold settings can be used.
---- Multiple Selectors -- If you want to have the same effect on different elements you can easily combine them so that they are all affected similarly.
----- H1, h2 { font-style:italic; font-family:Arial}

Table Apperance

***NOTE: Periods are placed at the beginning of tags only to make them visible, since they can be confused as part of the HTML to write this blog. In normal HTML code periods would not exist.

Tables in Review:

Tags:
<.table><./table> -- This tag is used to begin and end a table.
<.tr><./tr> -- This tag is used to begin and end a row.
<.td><./td> -- This tag is used to begin and end a data cell.

Elements:
Border = “ “ – This allows us to set the thickness of the border for the table.
Colspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several columns.
Rowspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several rows.
Cellspacing = ” “ --
Cellpadding = “”

New Content

Tags:
<.caption><./caption> -- This optional tag that gives more details about the table.

By using these elements you can establish a consistent header and footer. These can come handy when using Databinding or data covering several pages.

<.thead><./thead>
<.tfoot><./tfoot>

While this can be accomplished with rowspans and colspans this can be used with table that is complex and extensive. This can help place headers and footers on each page making data more easily read.

Example 1:( this table uses <.caption>, <.thead>, <.tfoot>, and <.tbody>)

Example 1

Elements:

Valign = “” – This is used to align data in a Top, Center, or Bottom vertical format.

Align = “” -- This is used to align data in a Left, Right, Center horizontal format.

Height = “” – Sets the heighth of cells to allow flexible layouts and formatting

Width= “” – Can set the width of columns to make a more flexible layout.

Bgcolor = “” – This is used to change the color of the background on the table.

Bordercolor = “” – Changes the border color

Bordercolordark = “” – Allows two different color settings to create a 3D affect.

Bordercolorlight = “”– Allows two different color settings to create a 3D affect.

Example 2: (This example shows the differing border colors, along with bgcolor-- it is common in the business place to have alternating colors on data row to increase visibility)

Example 2

Concepts:

Layouts -- Table were commonly used to make entire layout for web pages, however more modern websites use division tags that allow more flexibility.

Centered Layout – This creates a simple page that could be developed in one cell or multiple cells. Navigation can easily be added to the side to allow multiple pages, however this design is very simple with similarities to printed material.

Top-Left-Bottom Layout – Commonly referred to as TLB layouts this layout follows its name. There are three cells, the first being a header/ title, the second being a Navigation bar to the left, and finally a footer with Navigation or copyright information.

Stretchable Table Layout – This layout allows for the tables to adjust to the screen. By strategically setting cell widths and heights the table will adjust to the viewer screen.

While all of these are easy layouts and template, more complicated sites require more complex tables. Using tables as a means of laying out a webpage can be very tedious and time consuming.

Databinding – This refers to generating tables from particular data sources whether they be word documents or java applets. These tables can become very powerful when connected to a database, because they can display a variety of different data and information.

Best Practices for Tables:

When developing tables always code in cellspacing, cellpadding, and borders, even if they are all set to 0. This will help visually understand how information is displayed as well as allowing you to check your work in differing browsers to ensure it looks as you had planned.

Make sure that column widths are equal with the overall width of the table this will ensure that the table appears correctly. Bad math can cause tables to come out looking incorrect.

The use of colspan or rowspan will result in altering other rows or cells. Make sure that if you use these elements you take out the corresponding rows or data cells.

Not all table elements will work in all browsers. Be sure to check out your work in each browser to make sure you achieve the desired looks.

Do not excessively nest tables. This can become busy and sometimes slow the page load speed.

Document your work!! Its hard to go back and edit if you lack documentation.

HTML & CSS Direct Study