* Some CSS properties allow us to generate content.
* These properties work in conjunction with a further two pseudo elements, before and after.
* NB: Although we are generating content which appears inside the browser, we are not altering the document - just altering the presentation of the document.
* Using the selector #content:before {content:"Designed by Daniel";} would place this string before the other content.
* Using the selector #content:after {content:"Designed by Daniel";} would place this string after the other content.
* This extra content will appear alongside any text from the HTML but it is stored along with the CSS, usually in a seperate file.
* We can also use CSS in this way to create a counter for an unordered list for example.
* ul {counter-reset:count;} creates a counter and names it 'count'.
* li:before {counter-increment:count; content: "number" counter(count) ":";} instructs the counter to increment and places the specified text before the list item.
Saturday, September 5, 2009
Pseudo Elements
* Pseudo elements allow us to extend our selectors so we can be more specific with what we would like to select.
* They allow us to match elements in our document that don't appear specifically in the document tree, e.g. the first letter of a paragraph.
First-letter
* p:first-letter {...} uses the pseudo element :first-letter to apply any CSS rules to the first letter of each paragraph.
* NB: In CSS1 and CSS2 the pseudo element is identified by a single colon, but in CSS3 it is identified by a double colon.
First-line
* p:first-line {text-transform:capitalize;} would make the first letter of each word of the first line a capital letter.
* If you adjust the size of the browser window the amount of text that fits on the first line would vary and the formatting would also adjust to the varying content.
* NB: Be aware that not all browsers support this property yet.
Selection
* Using the universal selector in association with this pseudo element, the CSS selector *:selection {...} would apply the rule(s) to any and every element in the document when it is selected by the user.
* The selection pseudo element only has two properties that can be used, 1. background and 2. color.
* NB: At the moment only Opera and Safari support this property.
* They allow us to match elements in our document that don't appear specifically in the document tree, e.g. the first letter of a paragraph.
First-letter
* p:first-letter {...} uses the pseudo element :first-letter to apply any CSS rules to the first letter of each paragraph.
* NB: In CSS1 and CSS2 the pseudo element is identified by a single colon, but in CSS3 it is identified by a double colon.
First-line
* p:first-line {text-transform:capitalize;} would make the first letter of each word of the first line a capital letter.
* If you adjust the size of the browser window the amount of text that fits on the first line would vary and the formatting would also adjust to the varying content.
* NB: Be aware that not all browsers support this property yet.
Selection
* Using the universal selector in association with this pseudo element, the CSS selector *:selection {...} would apply the rule(s) to any and every element in the document when it is selected by the user.
* The selection pseudo element only has two properties that can be used, 1. background and 2. color.
* NB: At the moment only Opera and Safari support this property.
Line Height
* This video was a bit buggy and there was no proper beginning or ending so there may be more to it but ...
* The line-height property can be used to mulitply the default line height between lines of text.
* We can use most units of measurement to set the line height (ems, pixels, etc.) but we cannot use negative values.
* It may not look on screen like the line height is rendering out exactly, however the text itself is included as part of the line height.
* Most browsers have a defualt line height of approx. 1.2em but, as it is not part of the W3C standards, this is left up to the individual browser.
* The line-height property can be used to mulitply the default line height between lines of text.
* We can use most units of measurement to set the line height (ems, pixels, etc.) but we cannot use negative values.
* It may not look on screen like the line height is rendering out exactly, however the text itself is included as part of the line height.
* Most browsers have a defualt line height of approx. 1.2em but, as it is not part of the W3C standards, this is left up to the individual browser.
Wednesday, August 26, 2009
Week 6, Reading 3
Information Architecture
by Scratchmedia
This article looks at the various models of web design and discusses the pros and cons of each.
All-in-one
This is the simplest possible model. Everything goes on a single Home page.
It's interesting to see many more sites using this approach, to simplify the experience and to reduce maintenance.
Flat
A flat pattern is where all pages are arranged as peers, and every one is accessible from every other one. This is very common for simple sites, where there are a few standard topics, such as: Home, About Us, Contact Us, Products.
This may also be called a 'monocline grouping'.
Index
An index structure is like the flat structure, with an additional list of contents.
An index is often organised in some way, to make stuff easier to find. For example, a list of files in a web directory (the index page), or could be an index of people's names ordered by last name.
Dictionaries and phone books are both giant indexes. Look at the corners of the pages, where the data 'index' is: it may be the first few letters of the word, or a marker that shows the alphabetical range on the page.
Indexes work well when there is a medium amount of data, and also when that data can be ordered in a way that makes it easier to scan to what you want.
How many items can an effective index contain?
Quite a lot. Would it be quicker to use a search engine or a phone book to find a particular number? I'd guess that if the search engine works well, it would probably be a little bit quicker, but the phone book doesn't do a bad job. For a clear difference, you'd need a large amount of data, such as a multi-volume encyclopaedia, where you would find alternative mechanisms more useful.
Hub-and-spoke (or daisy) pattern
This model is useful for multiple, distinct linear workflows. A good example may be an email application, where you will return to your inbox at several points, e.g. after reading a message, after sending a message, or after adding a new contact.
Sometimes, I find the term 'daisy model' more helpful, for architectures that use a number of transactions that share a common start/end point. The transaction loops can look like petals on a flower.
Strict hierarchy
A strict hierarchy describes a system where you can only access a lower-level page via its parent.
This could apply to a real-world model where there is a strict parent-child relationship between objects, such as arranging pages for company offices by their country. An office cannot be in more than one country.
Many data models also have strict parent-child relationships, such as Message boards, Threads and Posts. Every thread belongs to one message board; a message board can have many (child) threads. Each thread can have one or more subsequent (child) posts.
The important thing to remember about this is that, even if there's a strictly hierarchical real-world model, that doesn't mean that a strict hierarchy is the best way to represent it online. You should consider your users' goals and contexts of use. For example, while it's possible to arrange all your products by product category, that might not be the most intuitive way for a user to find it. Supermarkets often place the same items in more than one place, knowing that consumers will think about them and look for them under more than one category.
Multi-dimensional hierarchy
A multi-dimensional hierarchy is where there are many ways of browsing to the same content. In a way, several hierarchies co-exist, overlaid on the same content. The structure of the content can appear to be different, depending on the mode you're looking in.
A typical example is a site like Amazon, which lets you browse books by genre, or by title, and also lets you search by keyword. Each of these hierarchies corresponds to a property of the content, each of which can be useful for people in different situations.
Search
Many users and sites rely on the ability to use it to get to content quickly. While it's strictly more a navigation tool than an architecture, a search tool is often built in to a site's architecture, like an elevator is built in to the architecture of a building.
Search functions present a dynamic view of a set of content, and offer instant links to each result. This allows users to jump straight to content, without having to browse through hierarchies or indexes.
When search works well, it can be a huge benefit. Generally, the more content there is, the more value search can offer.
by Scratchmedia
This article looks at the various models of web design and discusses the pros and cons of each.
All-in-one
This is the simplest possible model. Everything goes on a single Home page.
It's interesting to see many more sites using this approach, to simplify the experience and to reduce maintenance.
Flat
A flat pattern is where all pages are arranged as peers, and every one is accessible from every other one. This is very common for simple sites, where there are a few standard topics, such as: Home, About Us, Contact Us, Products.
This may also be called a 'monocline grouping'.
Index
An index structure is like the flat structure, with an additional list of contents.
An index is often organised in some way, to make stuff easier to find. For example, a list of files in a web directory (the index page), or could be an index of people's names ordered by last name.
Dictionaries and phone books are both giant indexes. Look at the corners of the pages, where the data 'index' is: it may be the first few letters of the word, or a marker that shows the alphabetical range on the page.
Indexes work well when there is a medium amount of data, and also when that data can be ordered in a way that makes it easier to scan to what you want.
How many items can an effective index contain?
Quite a lot. Would it be quicker to use a search engine or a phone book to find a particular number? I'd guess that if the search engine works well, it would probably be a little bit quicker, but the phone book doesn't do a bad job. For a clear difference, you'd need a large amount of data, such as a multi-volume encyclopaedia, where you would find alternative mechanisms more useful.
Hub-and-spoke (or daisy) pattern
This model is useful for multiple, distinct linear workflows. A good example may be an email application, where you will return to your inbox at several points, e.g. after reading a message, after sending a message, or after adding a new contact.
Sometimes, I find the term 'daisy model' more helpful, for architectures that use a number of transactions that share a common start/end point. The transaction loops can look like petals on a flower.
Strict hierarchy
A strict hierarchy describes a system where you can only access a lower-level page via its parent.
This could apply to a real-world model where there is a strict parent-child relationship between objects, such as arranging pages for company offices by their country. An office cannot be in more than one country.
Many data models also have strict parent-child relationships, such as Message boards, Threads and Posts. Every thread belongs to one message board; a message board can have many (child) threads. Each thread can have one or more subsequent (child) posts.
The important thing to remember about this is that, even if there's a strictly hierarchical real-world model, that doesn't mean that a strict hierarchy is the best way to represent it online. You should consider your users' goals and contexts of use. For example, while it's possible to arrange all your products by product category, that might not be the most intuitive way for a user to find it. Supermarkets often place the same items in more than one place, knowing that consumers will think about them and look for them under more than one category.
Multi-dimensional hierarchy
A multi-dimensional hierarchy is where there are many ways of browsing to the same content. In a way, several hierarchies co-exist, overlaid on the same content. The structure of the content can appear to be different, depending on the mode you're looking in.
A typical example is a site like Amazon, which lets you browse books by genre, or by title, and also lets you search by keyword. Each of these hierarchies corresponds to a property of the content, each of which can be useful for people in different situations.
Search
Many users and sites rely on the ability to use it to get to content quickly. While it's strictly more a navigation tool than an architecture, a search tool is often built in to a site's architecture, like an elevator is built in to the architecture of a building.
Search functions present a dynamic view of a set of content, and offer instant links to each result. This allows users to jump straight to content, without having to browse through hierarchies or indexes.
When search works well, it can be a huge benefit. Generally, the more content there is, the more value search can offer.
Week 6, Reading 2
CSS in Print Media
By Kyle Schaeffer
(This guy basically agreed with everything Daniel told us in the video tutorial, or vice versa)!
If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy.
Font Sizes
Points are font sizes optimized for printing, so we’ll want to make use of them in our print-media CSS style sheet. Generally, you’ll want to set the base font size on your body tag to 11 or 12 points.
Design Width
Many site designs have a fixed pixel width, which doesn’t translate very well to print media. Some browsers, such as Internet Explorer, will actually shrink your entire design in order to fit everything on the page, but many other browsers will simply clip the contents of your site when printing. Generally, neither of these scenarios are desirable (shrinking your site often makes the font sizes too small). Because you can’t predict the type of printer or the type of media on to which your site is being printed, you should always use a percentage width (preferably 100%) for your site layout.
Other Considerations
In many cases, you may want to hide something entirely on print media. Navigation, for instance, often serves no purpose on printed media. Search boxes, breadcrumbs, and forms are other examples of elements that you may want to hide when printing. To do this, just add “display: none;” to an element in the print media CSS.
By Kyle Schaeffer
(This guy basically agreed with everything Daniel told us in the video tutorial, or vice versa)!
If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy.
Font Sizes
Points are font sizes optimized for printing, so we’ll want to make use of them in our print-media CSS style sheet. Generally, you’ll want to set the base font size on your body tag to 11 or 12 points.
Design Width
Many site designs have a fixed pixel width, which doesn’t translate very well to print media. Some browsers, such as Internet Explorer, will actually shrink your entire design in order to fit everything on the page, but many other browsers will simply clip the contents of your site when printing. Generally, neither of these scenarios are desirable (shrinking your site often makes the font sizes too small). Because you can’t predict the type of printer or the type of media on to which your site is being printed, you should always use a percentage width (preferably 100%) for your site layout.
Other Considerations
In many cases, you may want to hide something entirely on print media. Navigation, for instance, often serves no purpose on printed media. Search boxes, breadcrumbs, and forms are other examples of elements that you may want to hide when printing. To do this, just add “display: none;” to an element in the print media CSS.
Week 6, Reading 1
500+ Truly Useful Resources of Free High Quality Patterns
* Pattern is one of the useful visual elements for web design.
* It is commonly used and seen in a website’s background.
* This link showcases a resource of High Quality Patterns of image files and pattern files for Photoshop and Illustrator which you can use for free.
http://blueblots.com/freebies/500-truly-useful-resources-of-free-high-quality-patterns/
* Pattern is one of the useful visual elements for web design.
* It is commonly used and seen in a website’s background.
* This link showcases a resource of High Quality Patterns of image files and pattern files for Photoshop and Illustrator which you can use for free.
http://blueblots.com/freebies/500-truly-useful-resources-of-free-high-quality-patterns/
Specificity 2
* There are four numbers that make up a specifity value: the first refers to inline styles, the second to IDs, the third to classes and the fourth to elements.
* Here are some example of CSS rules and their associated specificity values.
CSS RULE: p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 1
REASON: It has one element as a selector
CSS RULE: body p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 2
REASON: It has two elements as selector
HTML CONTENT: TAG p class="one" TAG
CSS RULE: p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: It has one class and one element as selector
HTML CONTENT: TAG p class="one" TAG
also TAG p class="two" TAG
CSS RULE: p.one, p.two {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: The selectors are being treated as two seperate rules
HTML CONTENT: TAG p class="one" TAG
CSS RULE: html body p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 3
REASON: It has one class and three elements as selector
HTML CONTENT: TAG p class="one" id="text" TAG
CSS RULE: #text {background-color:red;}
SPECIFICITY VALUE: 0, 1, 0, 0
REASON: It has one ID as a selector so it overrides all others
HTML CONTENT: TAG p class="one" id="text" style="background-color:red" TAG
CSS RULE: NONE
SPECIFICITY VALUE: 1, 0, 0, 0
REASON: An inline style overrides all embedded and linked CSS styles, however when trying to override specificity values it is better to try and use the ID method.
* Here are some example of CSS rules and their associated specificity values.
CSS RULE: p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 1
REASON: It has one element as a selector
CSS RULE: body p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 2
REASON: It has two elements as selector
HTML CONTENT: TAG p class="one" TAG
CSS RULE: p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: It has one class and one element as selector
HTML CONTENT: TAG p class="one" TAG
also TAG p class="two" TAG
CSS RULE: p.one, p.two {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: The selectors are being treated as two seperate rules
HTML CONTENT: TAG p class="one" TAG
CSS RULE: html body p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 3
REASON: It has one class and three elements as selector
HTML CONTENT: TAG p class="one" id="text" TAG
CSS RULE: #text {background-color:red;}
SPECIFICITY VALUE: 0, 1, 0, 0
REASON: It has one ID as a selector so it overrides all others
HTML CONTENT: TAG p class="one" id="text" style="background-color:red" TAG
CSS RULE: NONE
SPECIFICITY VALUE: 1, 0, 0, 0
REASON: An inline style overrides all embedded and linked CSS styles, however when trying to override specificity values it is better to try and use the ID method.
Subscribe to:
Posts (Atom)
