===
Module leader:
General queries and admin issues:
Graeme Stuart: gstuart@dmu.ac.uk
===
- indent your code properly: 2 spaces!
- align opening and closing:
- HTML <tags></tags>
- CSS and JavaScript
{braces}
- lower-case folder and filenames
- be sure to complete the lab exercises
- read through the lecture and lab notes
let no = [!templates, !JQuery, !Bootstrap];
===
GIT and GitHub are used throughout the industry including major companies like Google, Linux, Microsoft, Apple, etc.
“repo” (short for “repository”) is a time-stamped store for your code to which you add and commit your code to the repo at regular intervals and push it to GitHub
- BlackBoard: detailed GitHub guide
- BlackBoard: Video walkthrough guide
Who still needs to get set up on GitHub Classroom?
GitHub classroom 1
If you use your own computer install GIT from here
- Go to GitHub classroom (you may need to log into your GitHub account several times)
- Find your P-number from the list. This generates a repo in the 'ctec3905students' group with some starter code
- Clone this repo to your working computer and
cdinto it - This is the private repo for your assignment code (accessible only for you and module staff)
GitHub classroom 2
You can now start work on your assignment and push your code commits to this repository—this will be marked
- Your GIT history is part of the marking scheme
- The starter files contain essential code required for the assignment
- If you have existing code please examine it carefully against the starter code files
- If necessary add your code to the starter files carefully
===
Whatever your needs or preferences, there’s almost certainly a way to access the web. Theoretically.
In reality, the web is a mess… accessibility options tend to be forgotten or stripped away, …though accessible websites and apps can… still be beautiful, innovative… user-friendly.
…This is a human rights issue. Disabled people need these options in order to access the web.”
Mischa Andrews: The inaccessible web
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”
Tim Berners-Lee (1997)
Web Accessibility Initiative announcement
Accessibility has been built into the web from the start
W3C (2005) Introduction to Web Accessibility
“the duty to make reasonable adjustments requires providers to ensure disabled people can access services …and… anticipate the needs of potential disabled customers…”
—adapted from Disabled access to websites under UK law
The Disability Equality Act (2010) is law—you could be sued for discrimination if your website fails to meet accessibility standards
See public sector international accessibility requirements (2018)
How you can address web access:
- Code accessibly, from
altimage attributes to semantic structure - needs incorporating from the start of a project
- Good IA and navigation help accessibility
- HTML5 semantic elements are crucial
- valid HTML5 code is important
- Use form field types and the
labeltag
Resources and research
- WebAim—see this site first!
- A11Y Accessibility project
- Aria use in HTML5
- Accessible Rich Internet Applications (ARIA)
- Notes on Using ARIA in HTML—see the 1st to 5th rules!
- How to Use ARIA Effectively with HTML5
===
Four basic principles:
- Proximity
- Alignment
- Repetition
- Contrast
(The reverse of ‘CRAP’)
PROXIMITY sets up visual cues that group similar items, suggesting how to ‘read’ content.
- Group complex content for legibility
- Display related items together
- Use common styles to connect similar items
Guardian website: “most viewed” news is grouped together, and there‘s a common menu style with varying section colours
BBC iPlayer website: proximity and style group related items
ALIGNMENT makes page elements seem part of a whole, creating a holistic feel to the various pieces of information.
- Everything should be placed thoughtfully in the layout
- Every item is connected visually with other page elements
A strict use of alignment on a former version of the Oslo-based design agency Heydays website gives a pleasing sense of coherence and simplicity.
ALIGNMENT: grids are the primary method for achieving alignment.
- The core text on the history and use of grids in design is: Khoi Vinh and Mark Boulton (2007) Grids Are Good
- Also see Vitaly Friedman (2007) Designing With Grid-Based Approach, Smashing Magazine
REPETITION provides visual and cognitive consistency across common design elements
- Repeat design themes throughout the interface
- Consistent sizing and proportions strengthen style
Use: global style rules at the top of your CSS before @media query breakpoints to style elements consistently e.g. colours, image widths (not height), matching heading styles…
CONTRAST
- Make distinctly different items look different
- Contrast makes content appear visually inviting
There are many ways to create contrast. For example:
colour, fonts, rules, column widths, etc.
- Javascript plugin site unheap.com uses bold colours
- A previous design for agency Touch used nice hover transitions (the current site is slow and annoying!)
===
- assemble your content in a separate folder
- store written content in plain text files
- keep unsized images outside your web folder
- design your mobile screens first
- think visually before diving into code
- map your content onto your wireframes
- let your content form the menu structure
- how will users navigate through your site?
From simple hand-drawn sketches…
To complete visual mock-ups…
…for complex interfaces in fine detail
Useful wireframe references - view the top one first:
- User Experience Design – The importance of wireframe
—Esmund Koh, 2015 - HealthConnect – Responsive Website Design (case study)
—Brit Zerbo, 2013 - 15 Beautiful Examples of Mobile App Wireframe Sketching
—Ben Bate, 2017
DO NOT be tempted by any "website template" adverts!! Templates (and "build a responsive website" tutorials) may look fine, but will not produce a good project. Your own code is more impressive :-)
===
If you’ve ever tried to use something and thought, “where am I supposed to go next?” or “this doesn’t make any sense,” you are encountering an issue with an information architecture.
—What is Information Architecture?
- The art and science of structuring and classifying websites/intranets/apps to help people find and manage information
- A discipline and community of practice bringing principles of design and architecture to online development
Entire university courses cover Information Architecture—search for "library science and information architecture"
In 1998 Peter Morville and co-author Louis Rosenfeld wrote Information Architecture for the World Wide Web
(4th edition 2015)
Known as The Polar Bear Book it is considered to be the essential text on the subject.
Information Architecture has origins in library science
- The development of “knowledge-organization systems”
- Study of how to categorize, catalogue, locate resources
So it's a kind of cognitive and visual data structure
Information Architecture uses Cognitive Psychology research
- Cognitive load: how much information we can process at any time—avoiding information overload (rule of 7).
- Mental models: the assumptions users have—information is easier to discover in familiar places.
- Decision making: the cognitive process of making a choice or selecting an option—IA helps make decisions by providing contextual information at key points.
The Magical Number Seven… George A. Miller (1956)
Complete Beginners Guide to Information Architecture
<style> .ia-diagram { position: relative; box-sizing: border-box; top: .6em; padding: 8px; width: 360px; height: 350px; background: #ccc; color: #666; float: left; } .ia-diagram div { position: absolute; width: 200px; height: 200px; text-align: center; box-sizing: border-box; border-radius: 50%; } </style>
- Users: who they are, what are their information-seeking behaviours and needs
- Content: volume, format, metadata, structure, labels (e.g. menus)
- Context: business model, aim of website, cultural background, constraints
the information backbone of a website
- Content inventory/audit
locate and identify and check site content - Information grouping
connect content with user-centered relationships - Taxonomy development
a controlled vocabulary throughout
Jennifer Cardello: The Difference Between IA and Navigation
What is Architecture?
Condensed from Cal Henderson, Building Scalable Web Sites (2006)
if buildings were like software, the architect would be involved in the actual building process, from … foundations … to … fixtures. …starting with a couple of rooms and basic amenities, people would… start living there before the building was complete. When the building work was about to finish …more people would turn up and start living there, too.
…new residents need new features. The architect would design these, augmenting the original design. But the current residents would continue using the house while it was extended, all the time complaining about the building work.
In fact… more people would move in while extensions were being built. When the modifications were complete, the the newcomers would request more changes.
The key… is planning for all this from the start. If thean architect started out by building a huge, complex house, it would be overkill. By the time it was ready, the residents would have gone elsewhere to live in a smaller house built in a fraction of the time.
If extending our house (website) takes too long, people might move elsewhere. We need start at the right scale and design things to be extended as easily as possible.
We're not going to get anything right first time. In the scaling of a typical application, every aspect and feature is probably going to be revisited and refactored.
That's fine—the task of an application architect is to minimize the time it takes to refactor each component, through careful initial and ongoing design.
===
Online colour scheme chooser: Paletton
===
