GRAF 3022 - CSS layout options and standards: week 1
Today:
- CSS layout options FIXED - FLUID - ELASTIC
- Web Standards/Accessibility
- Doctypes
- Create an Elastic layout
- Information about domains and hosting
Post homework to: www.graphic-design.ca/~yourlastname/week1
Fixed, Fluid or Elastic
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.
Pros
- The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).
- Fixed width layouts are sometimes easier to style depending on the effect you’re after. Some visual designs can only be achieved in a reasonable manner with a fixed width layout.
Cons
- People with small resolutions (640×480 pixels) will end up with a horizontal scroll bar on a 760 pixel fixed width site. This is a very uncommon problem.
- A 760px fixed width site can look too narrow on large screen displays. The narrow width can limit the reasonable number of columns and content, but this may actually be a pro. Think forced moderation.
- LACK OF ACCESSIBILITY! The content is not proportionately scalable.
Fluid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings. NOTE: Fluid layouts are sometimes referred to as Liquid.
Pros
- If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is seldom a reality, but in theory, and if care is taken to ensure it, it is possible.
- The fluid layout makes the most out of available screen real estate.
Cons
- Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered.
- Not enough white space
- Columns are too wide - try reading a line of text that is over 1000 pixels wide and you’ll see the problem.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.
Pros
- ACCESSIBILITY!!! An elastic layout scales with users’ text size.
- If done right, this is a very stable layout method because everything resizes at the same rate. The result is nothing changes disproportionately.
Cons
- It can be, for some, a little more challenging to produce an Elastic layout
There is also Hybrid:
Hybrid Columns are a combination of any of the previous three options. For example, the two-column hybrid, right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.
Elastic Layout
Why design an Elastic Layout?
It is your responsibility as a web developer to make an accessible website. It is essential that your site be accessible in order to provide equal access and equal opportunity to people with disabilities - and so that your site works on various screen sizes and systems.
Elastic interfaces are flexible and accessible for users, and can be almost as precise as pixels for designers. Layouts can be created accurately and quickly using CSS once we grasp the basic relationship between font size, pixels and ems.
How to design an Elastic Layout?
The design is scalable using EM values based the on the browsers default text size: 16px - with some exceptions.
The EM size is based on the the font size set in the body tag.
It is considered an industry standard (or best practice) to us the EM unit of measurement (height of a letter), as stated by the WC3, for CSS layouts.
Accessibility isn’t all about visual impairments and screen readers. One of the simplest ways to make a website more accessible is to allow users to change the size of the text; to deny this option takes away user control and quite possibly prevents the user from reading content comfortably.
EM Calculation options
So we know that 1em=16px. Now we need to know how to convert, for example, a 950 px div to an em value.
If we are using EM as our unit of measurement, then we need to know how many of those units can go into 950 px.
First option:
px size / em value = # em
950 / 16 = 59.375 em
you could multiple everything by 0.0625em.
Second option - modify the default value. Instead of working with 16's, work with 10's:
To do that we must change the default font size from 16 to 10:
10 ÷ 16 = 0.625 (62.5%)
So you can then set your font default size in the body tag to 62.5% (which we now know is = 10px)
body { font-size: 62.5%;}
Therefore: 1em = 10px (instead of 16px). As this is defined in the body tag, this is a "parent" measurement and the rest of your doc will inherit it.
Now all you have to do is divide each pixel value by 10 to convert in em.
950 ÷ 10 = 95 em
Elastic Layout Lesson
Define the site in Dreamweaver, and then create a new document.
Select the Blank Page - HTML under the Page Type category.
Select 2 column elastic, left sidebar, header and footer from the layout category.
In the far right column we can see a graphical representation of the layout and a description of its specifications.
Leave DocType set to the XHTML 1.0 Transitional default.
Leave Layout CSS on the Add to Head default. Click the Create button.
Note: we are going to create the css in the head of the document for testing purposes - this way we will not have to worry about the browser refresh - after testing we will move the css to an external file
Save the document as layout.html in the root folder of your site.
Web Standards
In order to understand solid standards-based design, you need to understand the two halves of the content/presentation equation: (X)HTML (for content) and CSS (for presentation).
What are Web Standards? They are really just best practices for building web sites. Building sites in this manner means following three principles:
- Separate content and its presentation. Create the essential structure of the document in the (X)HTML page, you can code the information once, and output to many different devices.
- Use Cascading Style Sheets for the design. The simple text document known as a CSS file gives the (X)HTML document its look with a few well-crafted rules.
- Design for universal accessibility. Not everyone on the web can access, or see, our pages in exactly the same way. The goal is to give everyone the same content, in a reasonably acceptable presentational style, without crashing the system. Standards-compliant browsers will render the pages one way. Buggy browsers, such as Internet Explorer 6 and earlier, will need adjustments to render correctly. Assistive technologies (AT) will have access to all our content without the presentational markup getting in the way. And older browsers will still present the essential content, although with fewer presentational enhancements.
Accessibility
In many countries website accessibility is law. In Canada however it is not so cut and dry - there are guidelines and accessibility laws but website accessibility trials are few.
"Best practices" encourage us to create accessible websites - they increase readership and help with search engine indexing.
To change the accessible go to Dreamweaver>preferences>accessibility and check all the boxes. This will force an "alternative text box" to appear when we insert these objects.
Doctype
At the beginning of each web standards compliant document, the Document Type definition (also called DTD or doctype), declares the document standard to which the file conforms.
Dreamweaver uses the XHTML 1.0 Transitional doctype as its default. Unless the site has more specific requirements, this is a good doctype to use because of its backward compatibility with older web pages and its forward compatibility with the future of the web (we hope). XHTML 1.0 Transitional allows deprecated elements, which are mostly presentational elements and attributes such as font, align, and bgcolor. The XHTML 1.0 Strict or HTML 4.01 Strict doctypes do not allow those elements to be used.
The Doctypes is found in the code at the very top.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Flow
The flow of the document is what you see when you remove all of the css
Right click on the top of the layout document (right of check page) and make sure the style rendering toolbar is displayed
click the toggle displaying of css (globe icon) to turn off the styles (you should be in design view)
You now see how the page is seen without css. This is how the search engines see you page as well. Notice the sidebar1 is above the main content. Search engines place more importance on what appears at the top of the page. To get indexed higher you want the main content at the top ( we will do this later in the lesson)
Block Elements
Block Elements are as wide as their parent container and stack vertically one on top of the other.
In the example below the h2 "level heading" header is a block element - it extends to the far right side of the page forcing the paragraph below down - it's like hitting return in a word processor.
Inline Elements
Inline: Elements flow horizontally starting at the left. In the example below we have images, text, links all inline all flowing one after the other until the horizontal space runs out. The next inline element then starts a new line (like wrapping in a word processor)
Place your cursor before the first "L" in the paragraph under "Main Content"
Go to Insert>Image Object>Image Placeholder - call it image and make it 100 x 100 When creating layouts you may not have the original artwork and placeholders are a fast an easy way to create space for them).
Select some text in the first line a create a null link (#). Links are inherently "inline"
Notice the text flows directly to the left of the image (inline element) but it starts at the bottom. The browser calculates how many elements fit on a line and then makes an invisible box that is tall enough for the tallest element.
Review
Div's
A div can be thought of as an empty box. You normally break the page into large div's or sections like header, footer, main content, etc
Take a look at the code for the layout page and find the div's
Div's are inherently block elements and stop when the content stops flowing vertically - this can be confusing - if we look at our page we see the sidebar div ends at the end of the content (dreamweaver templates show this with a grey background. This makes it harder when we want to extend the background colour of the div to the bottom of the page. (We can fix this using a Faux column which we cover in a later lesson)
CSS Selector Types
When working with CSS in Dreamweaver, the New CSS Rule dialog box gives you 4 CSS selector options: Class, ID, Tag, and Compound
CSS Syntax - hand coding
Style sheets are made up of CSS rules that contribute to the design and placement of elements. Each CSS rule is made up of a selector and a declaration block. The declaration block, in turn, is made up of one or more declarations, each of which is a property with a value.
Let's take a look at our H2 rule
Create a new rule with the selector type as class
Create the note class
.note { font: 12px Arial, Helvetica, sans-serif; color: #FFFFFF; background: #CCCCCC; padding: 5px; }
Create a new paragraph in the centre of the first paragraph - place your cursor in the paragraph - down in the status bar (at the bottom) right-click the <p> tag and apply the note class
Compound Selectors
The most used are IDs, pseudo selectors and descendant selectors (though Dreamweaver allows you to type anything into this box, including child and sibling selectors).
Identifiers: IDs are most used to define the style of specific areas for your page
Selectors for IDs begin with a hash mark (#). Each ID name must be unique, and unlike classes can only be used one time on each page.
Create a new rule > id > #nav
#nav {
font: 18px Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: #666666;
}
Put your new div with the id nav after the header div.
Pseudo Selectors
The most common examples are the a:link, a:visited, a:hover and a:active - anchor/link styles that we see listed in the drop-down list next to the Advanced selector option.
We can use CSS to style these link states to display their differences visually. The one thing that must be remembered with these specific pseudo selectors is that they must follow a specific order in the style sheet:
• a:link
• a:visited
• a:hover
• a:active
• a:focus (when included) - a:focus is similar to a: active but is triggered by people using the keyboard to navigate
Add some link styles for your page
For the remainder of the class - HOMEWORK:
Create this new layout from scratch to practice Elastic Layouts
This is graded
Consider the overall design, use of whitespace, images, etc.
Practice creating:
- link styles
- setting all font values to ems (for example, 2 ems would = 20px)
- setting all widths of elements to ems
Post homework to: www.graphic-design.ca/~yourlastname/week1