Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> The third type of layout that we're going to make is called a liquid or fluid width layout. This refers to the fact that these layouts aren't rigid and solid, but flexible, like water. Like elastic layouts, they're made with relative units, but their width is dependent on the user's browser window width. A bigger window means a bigger width. And it will scale smoothly down as the window is scaled down in size. We use the same steps to create the layout, so go to the File menu and click new. This time under the layout column, choose two column liquid, left sidebar, header and footer.
For Doc type, choose HTML 4.01 strict and leave layout CSS set to add to head and click create. Let's go straight into previewing this in our browser. Go to the document toolbar and click on the globe icon and select preview in Firefox. When we're asked to save the page, click yes and save the file as liquid.html in the chapter three exercise files folder, then click save. The first thing we'll do is resize the browser window.
However when we resize the width of the window this time, the entire width of the design changes to match. Pulling the browser window back out changes the design to be wider. Let's close Firefox now and go into Dreamweaver to look at how this is done. Open the CSS style panel and click on the all button then click on the plus sign next to the style element to show all the rules for this page. Select the second rule for the container DIV. Here, the width is set to 80 percent. This percentage is relative to the width of the browser window, so the design will always take up 80 percent of that width.
Click on the value and change the width to 60 percent. Now preview the page again. When asked to save changes, click yes. The page is now narrower, but if we resize the browser window, it still changes in width as well. The advantage in terms of accessibility for this type of layout is that the user can resize the window and change the design width to make reading more comfortable or otherwise fit their needs. There is a down side though. Although liquid layouts are just as simple to make as fixed width layouts in terms of their initial structure and CSS, they start becoming more complicated when the design is very complex or when complex content is introduced into the design.
This is because you have to make sure that the graphics of your design hold together at various sizes and you have to make sure that content doesn't overflow its containers. These are all issues that can be successfully addressed with CSS, of course, but they require a higher level of skill and comfort with the language. Also, some designs and types of content just don't work well with liquid layouts, such as if you have a page full of large fixed width images that would overflow their containers if the design became too narrow, so there may be times to turn to fixed width ones instead.
For the rest of this title though, we're going to stick with this liquid layout and work on customizing it to further improve its accessibility. In the next movie we'll start that customization process.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.