Design considerations Unit 14 Website Design HND in Computing and Systems Development

Understand web design concepts Accessibility: features eg alternative text, resizable fonts, support for screen readers, adjustable fonts;

Understand web design concepts current standards and legislation eg Disability Discrimination Act, Data Protection Act, e-Commerce Regulations Act, Computer Misuse Act, W3C validation, copyright and intellectual property rights

What is web accessibility? Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. http://www.w3.org/WAI/intro/accessibility.php

WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Applications Suite A way to make applications and content more accessible to people with disabilities. Especially helps with dynamic content and advanced user interface controls: Ajax, HTML, JavaScript, and related technologies.

Page sections and assistive technology Identify distinctive page sections such as navigation, main content, headers, and footers. HTML5 <header> HTML5 <nav> HTML5 <main> HTML5 <footer> HTML5 <aside> (identifies complimentary content) <div role="search"> (for search fields) Task: Create a simple page which features each of the above. http://www.w3.org/WAI/tutorials/page-structure/sections/

Headings When stepping down through headings, skipping levels should be avoided. An <h1> is followed by an <h1> or <h2> An <h2> is followed by a <h2> or <h3> etc. When stepping up through headings it is perfectly legitimate to skip any number of levels. <h1> is the most important section on your page. Anything in <h1></h1>tags will be given higher priority by search engine robots.

Content structure Write text in paragraphs <p> Use lists where appropriate Unordered list <ul> and elements of <li> Ordered list <ol> and elements of <li> You can nest lists Wrap figures, tables etc in <figure> and label with <figcaption>

Task Add to your web-page. It must have: <h1>A main heading</h1> <h2><h3?>sub-headings <ul>an unordered list <li> <ol>An ordered list <li> <figure>a figure or table with a <figcaption> caption

Styling Modern styling uses CSS Cascading Style Sheets External embedded In-line id if unique on page # Class if repeated . { : ;}

Task Modify your page. Create different regions – some classes, some ids Change the default h1 style Change the default anchor styles a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

Visual clarity The main content’s headline should have a distinct visual style that invites the reader to look at the main content first. All headings should be styled differently to the body text. Separating key sections of the page using background colours or borders can also help users to separate main from auxiliary content.

Text The user needs to be able to resize the text to 200% of its size anywhere on the page, without the text being cut off or overlapping other text. The font size should be defined in relative units, such as percentages, em or rem Organise on left side Do not justify or centre (difficult for dyslexics) A line of text should not exceed 80 characters

Em & rem Flexible, scaleable units Translated into pixels by browser, based on font-size of design. E.g. .examp { font-size: 16px; padding: 1em;} becomes padding:16 px .examp2 { font-size: 160px; padding: 1em;} becomes padding:160 px Rem uses the font-size of the root element of the page Em uses the font-size of the element it is in; this can be affected by inheritance.

Em & rem If no font-size is set for the root element, then the browser sets it The user can set it The normal default, if not set, is 16px Rem allows user control – every rem measurement is changed according to the user’s setting of the browser When designing assume the browser default is 16px – this is the most commonly used setting. http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

Em & rem & % Use rem unless you need the font sizes to be base on something other than the root size – this gives the user control and flexibility Use % for column widths But! Set the max-width using rem Eg .container { width: 100%; max-width: 75rem; } Only use fixed units if the element would break if scaled! http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

Task Modify your styles to use em, rem and % as appropriate