DECO1400 Lecture 5

Very important in web design, or design in general to organise content well
Want to avoid information overload/cognitive overload of user
We can use organisation systems to solve this

Organisation System

An organisation system consists of schemes and structures
- Organisation Schemes Organising content in groups by common properties
- Organisation Structures Organisation by relationships
Examples of organisation schemes include:
- Exact organisation schemes - great for known item searching
- Ambiguous organisation schemes - reflects nature of language, which is imprecise. Can have overlap between groups of items
- Hybrid organisation schemes - a mix of the above two

Schemes

We can implement Exact organisational scheme as an alphabetical, chronological or geographic sort of items
- Alphabetical: List of research areas
- Chronological: List of news stories
- Geographical: Real estate listings
Ambiguous organisational schemes work best when we don't know what category something belongs in
- E.g. are Gluten Free Biscuits located in the biscuits section or the gluten free / health section
- Ambiguous organisational schemes can be implemented as a topical search, as is the case for Amazon - "Books & Audiobooks", "Music, Movies & Games"
- Can also be implemented as a task-oriented search e.g., when you go to a car sale website you search for the type of car that you want - input the relevant parameters
User-Specific ambiguous search
- Can display content to the user depending on their subcategory - different user interface for personal, business or corporate banking

Structures

Organising content by their relationships
Most common types are be hierarchy, hypertext and database
- Hierarchy such as the structure of an organisation. This organisation on the web can be confusing if there no direct link between two pages
- Hypertext such as links between pages

HTML

Flex Box

We can use flexible boxes (flex-box) to organise content on a page dynamically
A flexbox is comprised of a container and the flex-items within

<head>
    <style>
        #flex-container {
            display: flex;
        }

        .flex-item {

        }
    </style>
</head>
<body>
    <div id="flex-container">
        <div class="flex-item">
        <div class="flex-item">
        <div class="flex-item">
    </div>
</body>

There are several properties within a flexbox that we can set.
- flex-direction:
  - row (left to right)
  - row-reverse (right to left)
  - column (top to bottom)
  - column-reverse (bottom-to-top)
- flex-wrap:
  - nowrap (elements on a single line),
  - wrap (wrap onto multiple lines from top to bottom),
  - wrap-reverse (wrap onto multiple lines from bottom to top)
- justify-content:
  - define alignment along main axis - defines how to distribute free space

Grouping CSS Selectors

CSS selectors can be grouped for more concise syntax if you want to assign the same values

p, h1, .highlight {
    color: red;
}

There are different types of selectors:
- Descendant selectors: header h1 selects all h1 elements in header
- Child selectors: header > h1 selects all h1 elements which are immediate children of header
- Adjacent selector: h1 + p selects all p elements directly after a h1 element
Pseudo-classes for links can additionally define other behaviour
- a:hover defines the styling when an <a> tag is hovered on
- :visited defines the styling when a link has been visited
- :link defines the styling when a link has not been visited
- :active changes the style when clicked
- :focus changes style when in focus
When using these pseudo-classes, generally recommend setting global style for <a> first
Other pseudo-classes include :first-of-type, :last-of-type, :first-child and :last-child