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.

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.

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/

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.

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.

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.

Print

* 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;}