Goal-oriented Design for the Web
by Scratch Media
* Understanding goals is a critical factor in the success of any design project.
* This article discusses techniques to help discover the designer’s own goals and gain an insight into what their target audience really wants.
* It aims to help the designer get a clear picture of their purpose, to understand the key goals of their target users and start to visualise a high-value solution that ensures everybody wins.
* Its contents include:
1. About goals: Why goals are important.
2. Your goals: Identifying your personal goals will help you to achieve them.
3. Your site's goals: Identify your web site's goals
4. Users' goals: The importance of understanding users' goals when designing web sites and applications, introducing personas as a design tool.
5. Win-win solutions: The best sites are consciously planned to deliver win-win solutions that deliver both users' goals and achieve the site's goals.
6. Personas: Why using personas in your design process helps avoid common mistakes and creates a better product.
7. The Site Persona and Dialogue Process: Two more powerful tools for modelling the interactions on your web site. Site personas represent the site's brand and goals. The Dialogue Process is a way of designing interactions as conversations between user personas and the site persona.
Saturday, September 5, 2009
Week 7, Reading 1
7 Quick CSS Enhancements for Better User Experience
by David Walsh
Seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.
Change Text Highlight Color
.::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
2.::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you’d like!
Prevent Firefox Scrollbar Jump
1.html { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn’t reach below the fold, thus creating an undesireable “jump.” The above snippet prevents that.
Rounded-Corner Elements
1.input { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
Print Page Breaks
1..page-break { page-break-before:always; }
Don’t forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.
Attribute-Specific Icons
1.a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.
CSS Pointer Cursors
1.input[type=submit],label,select,.pointer { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.
display:block Links
1.#navigation li a { display:block; }
When you’ve built a navigation menu with UL/LI/A elements, be sure to set each anchor ’s display property to “block” so that the user doesn’t necessarily need to hover over the anchor’s text for the link to work.
by David Walsh
Seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.
Change Text Highlight Color
.::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
2.::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you’d like!
Prevent Firefox Scrollbar Jump
1.html { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn’t reach below the fold, thus creating an undesireable “jump.” The above snippet prevents that.
Rounded-Corner Elements
1.input { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
Print Page Breaks
1..page-break { page-break-before:always; }
Don’t forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.
Attribute-Specific Icons
1.a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.
CSS Pointer Cursors
1.input[type=submit],label,select,.pointer { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.
display:block Links
1.#navigation li a { display:block; }
When you’ve built a navigation menu with UL/LI/A elements, be sure to set each anchor ’s display property to “block” so that the user doesn’t necessarily need to hover over the anchor’s text for the link to work.
Cursor
* The cursor property controls the appearance of the cursor on interactive websites.
* If we had the following included in our CSS: #box {cursor:move;} when the user places their mouse over the div with the id="box", the cursor would change to a plus sign with arrow heads signifying that the div would be dragable.
* There are a whole bunch of different values for the cursor propety: auto; crosshair; default; e-resize; help; move; n-resize; ne-resize; nw-resize; pointer; progress; s-resize; se-resize; sw-resize; text; w-resize; and wait.
* If we had the following included in our CSS: #box {cursor:move;} when the user places their mouse over the div with the id="box", the cursor would change to a plus sign with arrow heads signifying that the div would be dragable.
* There are a whole bunch of different values for the cursor propety: auto; crosshair; default; e-resize; help; move; n-resize; ne-resize; nw-resize; pointer; progress; s-resize; se-resize; sw-resize; text; w-resize; and wait.
Formatting
Text-align
* Can be used to make your site look more professional, e.g. by using the justify value.
* Other values for this property include left, right, inherit and center.
Text-decoration
* Used mostly when formatting hyperlink elements.
* Has values such as overline, underling and line-through.
* You can combine your text-decoration values, e.g. p {text-decoration:overline underline;}
* Be careful if you remove the underline from a hyperlink as the everyday user is used to seeing it there and might not recognise the object as a hyperlink if it is removed.
Letter-spacing
* This property works by allowing us to enter a length value IN ADDITION to the default value of spacing between letters.
* The value can be a positive amount to increase spacing, or a negative amount to decrease spacing.
* If you want to return to the default amount simply use the value {letter-spacing:normal;}
Word-spacing
* This works in a similar way to letter-spacing in that you can have both positive and negative values.
* However be aware that the letter-spacing and word-spacing properties CAN be affected by the {text-align:justify;} property - it depends on the user agent/browser.
Text-transform
* This property allows us to alter how the text would appear in the normal flow of the document.
* It has a number of values, including capitalize, inherit, uppercase, lowercase and none.
* Capitalize means make the first letter of every word a capital, however this is dependant on how a browser determines what is and isn't a word and this may vary from browser to browser.
* Can be used to make your site look more professional, e.g. by using the justify value.
* Other values for this property include left, right, inherit and center.
Text-decoration
* Used mostly when formatting hyperlink elements.
* Has values such as overline, underling and line-through.
* You can combine your text-decoration values, e.g. p {text-decoration:overline underline;}
* Be careful if you remove the underline from a hyperlink as the everyday user is used to seeing it there and might not recognise the object as a hyperlink if it is removed.
Letter-spacing
* This property works by allowing us to enter a length value IN ADDITION to the default value of spacing between letters.
* The value can be a positive amount to increase spacing, or a negative amount to decrease spacing.
* If you want to return to the default amount simply use the value {letter-spacing:normal;}
Word-spacing
* This works in a similar way to letter-spacing in that you can have both positive and negative values.
* However be aware that the letter-spacing and word-spacing properties CAN be affected by the {text-align:justify;} property - it depends on the user agent/browser.
Text-transform
* This property allows us to alter how the text would appear in the normal flow of the document.
* It has a number of values, including capitalize, inherit, uppercase, lowercase and none.
* Capitalize means make the first letter of every word a capital, however this is dependant on how a browser determines what is and isn't a word and this may vary from browser to browser.
Indent
* Some CSS properties give us a finer control over how our text is rendered in the browser.
* The text indent property allows us to place an indent in the first line of a block of text.
* The text can be indented from both the left and the right.
* For example p {text-indent:1.5em;} would give us an indent of 1.5em.
* We can also use pixels and points as values, as well as % which would relate to a percentage of the width of the block of text.
* This can be very handy should we want to hide things like structural headings from the average visitor that we still want to be read by screen reading applications.
* We do this by giving the desired content an indent of say -9000px.
* The text indent property allows us to place an indent in the first line of a block of text.
* The text can be indented from both the left and the right.
* For example p {text-indent:1.5em;} would give us an indent of 1.5em.
* We can also use pixels and points as values, as well as % which would relate to a percentage of the width of the block of text.
* This can be very handy should we want to hide things like structural headings from the average visitor that we still want to be read by screen reading applications.
* We do this by giving the desired content an indent of say -9000px.
Pseudo Class 2
First-of-type
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.
Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.
Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.
Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.
Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.
Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".
Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.
Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.
Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.
Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.
Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.
Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.
Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.
Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".
Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.
Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.
Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.
Pseudo Class 1
* NOT TO BE CONFUSED WITH PSEUDO ELEMENTS.
Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.
Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.
First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.
Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.
* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.
Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.
Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.
Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.
Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.
First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.
Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.
* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.
Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.
Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.
Generated Content
* 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.
* 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.
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.
Specificity 1
* Specificity determines which CSS rules are applied (and which rules are ignored) by the browsers by deciding which rules are more important and which are not.
* If we understand the rules of specificity clearly then we can spend less time hunting for bugs when creating a website.
THE RULES OF SPECIFICITY
1. Specificity determines which CSS rules are applied by the browser.
2. Specificity is usually the reason why our CSS doesn't apply to some elements even though you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with the higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: in line styles, ids, classes and elements.
6. When selectors have EQUAL specificity values, the rule that appears last in the document is the rule that is applied.
7. When selectors have UNEQUAL specificity values, the more specific rule is applied.
8. Rules with more specific selectors have greater specificity.
9. Rules stored within an embedded style sheet have greater specificity than other rules associated with the document.
10. Rules embedded within the HTML of the document (in line styles) have greater specificity than other rules associated with the document.
11. ID selectors have higher specificity values than attribute selectors.
12. You should always try to use IDs to increase specificity.
13. Any universal selectors or inherited selectors have a specificity value of 0, 0, 0, 0.
* If we understand the rules of specificity clearly then we can spend less time hunting for bugs when creating a website.
THE RULES OF SPECIFICITY
1. Specificity determines which CSS rules are applied by the browser.
2. Specificity is usually the reason why our CSS doesn't apply to some elements even though you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with the higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: in line styles, ids, classes and elements.
6. When selectors have EQUAL specificity values, the rule that appears last in the document is the rule that is applied.
7. When selectors have UNEQUAL specificity values, the more specific rule is applied.
8. Rules with more specific selectors have greater specificity.
9. Rules stored within an embedded style sheet have greater specificity than other rules associated with the document.
10. Rules embedded within the HTML of the document (in line styles) have greater specificity than other rules associated with the document.
11. ID selectors have higher specificity values than attribute selectors.
12. You should always try to use IDs to increase specificity.
13. Any universal selectors or inherited selectors have a specificity value of 0, 0, 0, 0.
Display
* The display property allows us to manipulate the type of box an element generates.
* We can use the display property to create a menu system by changing the list elements from block elements to inline elements.
* We do this by adding the rule: #nav li {display:inline;}
* Not only will the elements now be listed horizontally not vertically, the majority of browsers also remove the numbers that denote the positions in the list (if using an ordered list).
* To ensure this is done by ALL browsers, add in the rule list-style:none;
* We can also force inline elements to display as block elements, eg. b {display:block;}
* NB: The element has not changed from being an inline element to a block element, it has just changed its BEHAVIOUR.
* {display:none;} is a very handy rule for a variety of reasons:
1. to create menu systems (see above)
2. for pop ups
3. to hide elements on the screen that you want to appear when the page is printed.
* We can use the display property to create a menu system by changing the list elements from block elements to inline elements.
* We do this by adding the rule: #nav li {display:inline;}
* Not only will the elements now be listed horizontally not vertically, the majority of browsers also remove the numbers that denote the positions in the list (if using an ordered list).
* To ensure this is done by ALL browsers, add in the rule list-style:none;
* We can also force inline elements to display as block elements, eg. b {display:block;}
* NB: The element has not changed from being an inline element to a block element, it has just changed its BEHAVIOUR.
* {display:none;} is a very handy rule for a variety of reasons:
1. to create menu systems (see above)
2. for pop ups
3. to hide elements on the screen that you want to appear when the page is printed.
* When designing a website, it is important to consider creating a CSS style for print media.
* Browsers already have built in support to seperate screen CSS from print CSS.
* However if the designer has created a seperate style sheet for print media then you may see a completely different outcome when you print a page.
* The purpose of this is to optimise our style sheets for print media content.
* If your website contains information that would regularly be printed by the user then you should include a style sheet for printed media.
* There are two ways of doing this:
METHOD 1
Create two CSS documents - one for screen CSS and one for print CSS - and link them both to your HTML document (inside the link tags you would have media="screen" for the first one and media="print" for the second one).
NB: We can specify more then one form of media for a single style sheet by having either media="screen, handheld" or media="all".
METHOD 2
Create the styles with embedded CSS by having @media screen / @media print / @media screen, print as your selectors - as you would expect, styles for screen only go in the first set, styles for print only go in the second, and styles for both go in the third.
* 3 tips for optimising your document for print.
1. font-size: use ems or % for screen, use points for print (1em or 100% = approx. 11 or 12pts)
2. page width: if your site has a fixed width it doesn't translate well to browsers when they print it (can be shrunk or cropped) so for print media set the width to 100%.
3. remove menus: when printing a web page, the menu systems are just a waste of ink so remove them by adding the rule #menu {display:none;}
* Browsers already have built in support to seperate screen CSS from print CSS.
* However if the designer has created a seperate style sheet for print media then you may see a completely different outcome when you print a page.
* The purpose of this is to optimise our style sheets for print media content.
* If your website contains information that would regularly be printed by the user then you should include a style sheet for printed media.
* There are two ways of doing this:
METHOD 1
Create two CSS documents - one for screen CSS and one for print CSS - and link them both to your HTML document (inside the link tags you would have media="screen" for the first one and media="print" for the second one).
NB: We can specify more then one form of media for a single style sheet by having either media="screen, handheld" or media="all".
METHOD 2
Create the styles with embedded CSS by having @media screen / @media print / @media screen, print as your selectors - as you would expect, styles for screen only go in the first set, styles for print only go in the second, and styles for both go in the third.
* 3 tips for optimising your document for print.
1. font-size: use ems or % for screen, use points for print (1em or 100% = approx. 11 or 12pts)
2. page width: if your site has a fixed width it doesn't translate well to browsers when they print it (can be shrunk or cropped) so for print media set the width to 100%.
3. remove menus: when printing a web page, the menu systems are just a waste of ink so remove them by adding the rule #menu {display:none;}
Clear
* If we have a website that has a main container and a sidebar container but we do not know how much content will be going in each container, problems can occur when we add a footer container.
* We need to make sure our site is flexible and can adapt.
* When we want to make sure that the footer always goes to the bottom of the page we use the clear property.
* The clear property has three values:
1. clear:right; (the footer will clear everything on the right)
2. clear:left; (the footer will clear everything on the left)
3. clear:both; (the footer will clear everything)
* It does this by taking the top margin property and setting it to the size it would need to push it down below the other elements.
* NB: If you want to add a gap between the lowest cleared element and the footer you must add a bottom margin to the cleared element.
* We need to make sure our site is flexible and can adapt.
* When we want to make sure that the footer always goes to the bottom of the page we use the clear property.
* The clear property has three values:
1. clear:right; (the footer will clear everything on the right)
2. clear:left; (the footer will clear everything on the left)
3. clear:both; (the footer will clear everything)
* It does this by taking the top margin property and setting it to the size it would need to push it down below the other elements.
* NB: If you want to add a gap between the lowest cleared element and the footer you must add a bottom margin to the cleared element.
Shorthand
* We can use shorthand methods to write our CSS styles more quickly and also make them easier for editing, for example:
LONGHAND
padding-left:100px;
padding-right:90px;
padding-top:80px;
padding-bottom:70px;
SHORTHAND VERSION 1
padding:80px 90px 70px 100px;
(The order goes clockwise from the top)
SHORTHAND VERSION 2
padding:80px 90px;
(The order is top/bottom, right/left)
* The exact same principle works for margins.
* The basic principle also works for border but is a little more difficult.
VERSION 1:
border-left-width:10px;
border-right-width:20px; (1 rule per side)
VERSION 2:
border-width:10px; (1 rule for all sides)
VERSION 3:
border-width:10px 20px 30px 40px; (top/right/bottom/left)
VERSION 4:
border-width:10px 20px; (top/bottom, right/left)
* The above principle can be applied to border-style and border-color.
LONGHAND
padding-left:100px;
padding-right:90px;
padding-top:80px;
padding-bottom:70px;
SHORTHAND VERSION 1
padding:80px 90px 70px 100px;
(The order goes clockwise from the top)
SHORTHAND VERSION 2
padding:80px 90px;
(The order is top/bottom, right/left)
* The exact same principle works for margins.
* The basic principle also works for border but is a little more difficult.
VERSION 1:
border-left-width:10px;
border-right-width:20px; (1 rule per side)
VERSION 2:
border-width:10px; (1 rule for all sides)
VERSION 3:
border-width:10px 20px 30px 40px; (top/right/bottom/left)
VERSION 4:
border-width:10px 20px; (top/bottom, right/left)
* The above principle can be applied to border-style and border-color.
Important
* The important rule is mainly used for debugging.
* It is called into play when we have a specificity conflict in our CSS.
* A rule with the important property will always be applied no matter where it sits in the document.
* The important rule overrides any specificity conflict as important has the highest possible specificity value.
* If two styles have equal specificity then the latter rule will always apply.
* However if we have p {color:#0c0 !important} then this rule will now be applied.
* If you have a rule that's not being applied, use the important rule to find the specificity conflict.
* If it doesn't fix it then chances are you just have a spelling mistake or you have got the name of the selector wrong.
* NB: Use the important directive to debug but DO NOT leave it in the style sheet for deployment as it will cause you problems further down the line - find the problem using the important rule then fix it using specificity.
* It is called into play when we have a specificity conflict in our CSS.
* A rule with the important property will always be applied no matter where it sits in the document.
* The important rule overrides any specificity conflict as important has the highest possible specificity value.
* If two styles have equal specificity then the latter rule will always apply.
* However if we have p {color:#0c0 !important} then this rule will now be applied.
* If you have a rule that's not being applied, use the important rule to find the specificity conflict.
* If it doesn't fix it then chances are you just have a spelling mistake or you have got the name of the selector wrong.
* NB: Use the important directive to debug but DO NOT leave it in the style sheet for deployment as it will cause you problems further down the line - find the problem using the important rule then fix it using specificity.
Subscribe to:
Posts (Atom)
