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