CCT260 Exam

Responsive layout

* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {.column {width: 100%;}

Child Selector

- Used to select element that is a child of another element: ">" e.g. p>span {...} specified using a greater than character (>) between two selectors, matches any elements where the second element is a direct child of the first element

Any web content posted after January 1, 2012 must meet Web Content Accessibility Guidelines (WCAG) what?

2.0 Level A

Two Column Layout

<div class="row"> <div class="column"></div> <div class="column"></div></div> .column {float: left;width: 50%;}/* Clear floats after the columns */.row:after {content: "";display: table;clear: both;}

Image links

<img src="img/picture.jpg">

media queries

A CSS3 feature that detects the user's type of screen and sizes the output accordingly; instructions to tell browser to detect device and orientation

descendant selector

A compound selector made up of multiple individual selectors, which targets elements based on their nesting; every p that's inside at any level of article

Usability vs. accessibility

Accessibility aims to make the Web accessible by removing the barriers that make it difficult or impossible for people with varying levels of disability to use the Web. Usability can be measured by how well users, with or without disability, are able to understand, navigate and interact with the site. In addition to being efficient and effective, usability measures include user engagement, ease of use and error tolerance

AODA stands for

Accessibility for Ontarians with Disabilities Act

CSS Positioning

Allows you to remove an element from the flow of the document and place it wherever you want on the page. Once an element has been positioned, it ceases to interact with other elements on the page. So, you can't flow other content around it or use margins to separate it from other elements that remain in the document flow. The positioned element resides on a separate layer in front of the normal content. This introduces a third dimension that allows you to make elements overlap. static, relative, absolute, and fixed

factors of Accesible page design

Alternative text meaningful link text visual colour information dot rely on just colour use HTML rather than PDF, Flash, etc resizable text transcript of audio and captions of videos navigation able with keyboard alone works without java

What do captions do to help SEO?

Caption text is indexed by search engines, so it's important to consider keywords when producing the spoken content for your video(s). auto-captions do not get indexed by Google and therefore do not help Search Engine Optimization

What are the five standards in AODA?

Customer Service Information and Communication Employment Transportation Built Environment standards

pseudo-class selector

Dynamic selectors that change based on user interaction with the browser, such as hovering over a link, for example. Example: nav a, nav a:visited { color: #fff; } header li { list-style: none; } others include :link, :visited, :hover, :active, :nth- child This would make the anchor elements in the nav section be white and also stay white after they are visited.

external links

External Links <a href ="link">Check Out our Website</a> external links usually start with https:// target attribute used

semantic markup

HTML that reinforces the semantics (meaning) of information in webpages, rather than simply defining its presentation. (em strong, cite blockquote) should be sued sparingly

Why is relative font sizing better than absolute?

If the user increases the zoom on the browser all styles will stay relatively the same with respect to one another

Flexible Images

Images are deemed flexible when the image renders in native size, as long as the HTML container supports it, but when the browser window shrinks, the image scales to fit it.; img { max-width: 100%; }

Ethan Marcotte Three concepts for responsive web design

Media queries (@media all and (max-width:400px) { p { font-size:0.8em; } }), Fluid grids, and flexible images img { max-width: 100%; }

Dan Brown's Eight Principles

Object Principle, Choice Principle, Disclosure Principle, Exemplar Principle, Front Door Principle, Multiple Classification Principle, Focused Navigation Principle, Growth Principle

Information architecture checklist

Pre-Plan Information Architecture, Choose Your Content To Match, Organize Your Content, Document It and Write it Down, Implement Your IA Plan.

Mobile First

The technique of creating mobile websites first and then progressively enhancing them to create the desktop version (tablets, laptops, desktops, etc.); Design for mobile first - it's the bigger constraints, and for many user persona profiles, the most common form of interaction.

Writing effective alternative text is important to SEO True or False

True

Fluid Grid Layout

a system for designing layouts that will adapt to three different screen sizes: mobile, tablet, and desktop; Imagine you have four columns. To make this fluid, instead of specifying each as 200 pixel wide, you'd have to specify them 0.2083 %

Viewport

area of the User Interface where the objects are displayed; The rectangular area (measured in pixels) that is viewable on a device screen; Setting viewport tells browser to scale to full width at basic zoom levels <meta name="viewport" content="width=device-width, initial-scale=1.0">

Assistive Technology for web accesebility

array of devices that permit people with disabilities to improve their functioning; screen readers., text readers,

<a> element is inline or block?

both; div element allows you to click on whole block <a href =" blog.html/article_name> <div> <imgsrc="img/article1photo.jpg" alt="picture of a thing"> <p>some things about article name</p> </div> </a>

The box model

content, padding, border, margin

grid structure

guides that help you design a page; horizontal and vertical columns used to align elements; Instead of setting width of elements, look at grid structure - 12- or 16-column grid layout allows for flexible positioning that scales at different widths; be sure all columns add to 100%

is legislation that mandates how businesses and organizations provide accessible services to students, employees and community members with disabilities

is legislation that mandates how businesses and organizations provide accessible services to students, employees and community members with disabilities \

Information Architecture

the set of ideas about how all information in a given context should be organized; organization of information to support findability, manageability and usefulness from the infrastructural level to the user interface level.

What is the goal of the AODA

to be fully accessible by 2025

Structural markup is used for what?

used to define the overall feature of the document, not for visual emphasis