Introduction to Internet Technologies and Web Programming Lecture 6

Introduction to Internet Technologies and Web Programming Computer Science 103 Boston University Taymaz Davoodi Lecture 6 Overview: Ø Visual Hagiarchy and Design for Low vision ØTwo column layout (Media Queries & Flex-Box) First, we need to define usability Usability is “ma...

Introduction to Internet Technologies and Web Programming Computer Science 103 Boston University Taymaz Davoodi Lecture 6 Overview: Ø Visual Hagiarchy and Design for Low vision ØTwo column layout (Media Queries & Flex-Box) First, we need to define usability Usability is “making sure that something works well: that a person of average or even below average ability and experience can use the thing—whether it’s a Web site, a fighter jet, or a revolving door—without getting hopelessly frustrated.” —Steve Krug ØYou are asked to do the following Don’t Make Me Think üYour web page must demonstrate appropriate use of contrast, visual hierarchy, whitespace, and color. üWhat does this mean? Good Visual Design Promotes Usability ØThe primary purposes of graphic design is to create a clear visual hierarchy of contrast, so you can 1. see at a glance what is important and what is peripheral. 2. define functional regions of the page. 3. see the structure in the content by grouping the elements that are related. —"Visual Design," Web Style Guide Characteristics of Visual Hierarchy ØThe most important things are the most prominent. ØThings, that are related logically, should also be related visually. ØThings that are “nested” visually must show what is part of what. –Steve Krug Don’t Make Me Think Tools for Creating Visual Hierarchy ØHow do we distinguish between important and unimportant, related and unrelated? ØUse contrast in: üTypeface (font-family) üType style (font-style, font-variant, font-weight, font-size …) üType spacing (letter-spacing, word-spacing …) üColor (foreground & background colors) üWhitespace (padding/margin) üPlacement on page Whitespace ØOne tool for creating visual hierarchy ØBetter name might be “empty space” – doesn’t have to be white ØHelps user distinguish important areas ØHelps user perceive the page structure ØDo this: üAn Event Apart: www.aneventapart.com ØNot this: üShop Fences: http://www.gatesnfences.com/ Designing for Low Vision vWeb accessibility includes designing for: ØPeople who are blind üAlt text for images üGood link text for hyperlinks ØPeople with low vision ØPeople who are color blind ØPeople who are deaf Designing for Low Vision ØWhat is low vision? “A condition in which a person's vision cannot be fully corrected by glasses, thus interfering with daily activities.” –WebAIM: Visual Disabilities – Low Vision ØWhat assistive technology do people with low vision usually use? üThe most common technology that people with low vision use is the screen magnifier üCommon screen magnifiers include ZoomText and MAGic. ØWhat web developing techniques are available to accommodate people with low vision? üHigh Contrast Designing for Low Vision 1.Use true text as opposed to text in graphics ØLooks better when enlarged ØAllows users to change color contrast if they wish 2.Maximize color contrast of web pages ØIncludes text against background on pages ØAs well as text against background in graphics 3.Use flexible width (percentages instead of pixels) in layout ØAvoids the need for horizontal scrolling Designing for Low Vision ØMaking your web pages easy to read by ensuring visual contrast between foreground and background colors. ØWe will use the WAVE tool from WebAIM to identify web pages with good and not-so-good color contrast and identify the particular color combinations that do not meet the standards. ØA good design regarding low vision is not supposed to have more than 10 color contrast error. ØLet’s check The Washington Post website to see … http://wave.webaim.org/ Designing for Low Vision vWeb accessibility includes designing for: ØPeople who are blind üAlt text for images üGood link text for hyperlinks ØPeople with low vision ØPeople who are color blind ØPeople who are deaf Designing for Low Vision ØWhat is low vision? “A condition in which a person's vision cannot be fully corrected by glasses, thus interfering with daily activities.” –WebAIM: Visual Disabilities – Low Vision ØWhat assistive technology do people with low vision usually use? üThe most common technology that people with low vision use is the screen magnifier üCommon screen magnifiers include ZoomText and MAGic. ØWhat web developing techniques are available to accommodate people with low vision? üHigh Contrast Designing for Low Vision 1.Use true text as opposed to text in graphics ØLooks better when enlarged ØAllows users to change color contrast if they wish 2.Maximize color contrast of web pages ØIncludes text against background on pages ØAs well as text against background in graphics 3.Use flexible width (percentages instead of pixels) in layout ØAvoids the need for horizontal scrolling Designing for Low Vision ØMaking your web pages easy to read by ensuring visual contrast between foreground and background colors. ØWe will use the WAVE tool from WebAIM to identify web pages with good and not-so-good color contrast and identify the particular color combinations that do not meet the standards. ØA good design regarding low vision is not supposed to have more than 10 color contrast error. ØLet’s check The Washington Post website to see … http://wave.webaim.org/ From a One Column to a Two Column Layout, using Flex-Box From a One Column to a Two Column Layout, using Flex-Box, and Media Queries. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ nav ul{ display: flex; flex-direction: column; justify-content: space-around; list-style: none; padding-left: 0; } Next step ØWhat if you want more than one column? Header Header Header Nav Nav Nav Main Content Main Content Main1 Main2 Main3 Footer Footer Footer A Demonstration for Two Column Layout Header tag Another div tag with id container to wrap up Header nav and main. Nav tag A div tag with id Nav Main Content main-content Footer Footer tag A Demonstration for Two Column Layout Header tag Header width: 30%; width: 70%; Nav tag A div tag with id Nav Main Content main-content Footer div tag with id container width: 100%; Footer tag A Demonstration for Two Column Layout A question: Why do we need the div tag with #container? Another div tag with id Header tag container to wrap up nav and main. Header Nav tag A div tag with id Nav Main Content main-content Footer Footer tag A question: Why do we need the div tag with #container? ØWe have to apply Flex-Box property to a parent tag ØIt is important to make columns with the same height. ØUsing the same background color for the shorter column and #container helps to visually make equal height columns. Equal Height Columns Technique: Media Queries ØMedia queries invoke lines of CSS only if the browser meets certain criteria. Examples: @media screen and (max-width: 768px) {.... wide or narrower */ } ØIn media queries, screen is the "media type" max-width is the "feature" and 768px is the "value" Technique: Media Queries More than 520px Ø A CSS sample for responsive 2 column layout: Header #container{ display: flex; flex-direction: row; Nav width:100%; Main Content } nav{width:30%;} main{width:70%;} Footer @media screen and (max-width: 520px){ Less than 520px #container{ display: flex; Header flex-direction: column; Nav width:100%; } nav{width:100%;} Main Content main{width:100%;} } Footer Media Queries: Some Examples https://codepen.io/azadeh83/pen/GYmBpv https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaq ueries_fontsize https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaq ueries_hide Typical Uses of Media Queries ØChange font sizes ØSuppress navigation / show hamburger menu ØHide search box ØReduce number of columns in layout ØPush widgets and sidebars to the bottom of the page Some of the things we can do with @Media Queries Øchange font sizes Øsuppress navigation / show hamburger menu Øhide search box Øreduce number of columns in layout Øpush widgets and sidebars to the bottom of the page