Web Application Design Patterns- P13: This is the type of book you’ll want to read with your entire team and a fl ip chart because every page will produce a list of actionable changes for the applications you’re developing. Pawan Vora has produced an amazing catalogue of the essential patterns for designing today’s web-based applications. | 346 CHAPTER 11 Accessibility link rel stylesheet href type text css media all style type text css @import url style FIGURE Two common approaches of referencing an external style sheet. About WaMu Locations Contact Us aAA search this site Your Accounts 3 jjer8 can change the text size by 1 essages Notifications Your Profile A Selecting one Of the text Options FIGURE Washington Mutual allows users to change the text size by clicking on one of the text options in the top-right corner of the page. earlier in this chapter . Then add presentation-related markup using style sheets such that the addition of style sheets does not limit the page s accessibility. KEEP PAGE MARKUP AND STYLE SHEETS SEPARATE Keep all style sheet declarations in external CSS files rather than embedding them in individual pages or presenting them inline with markup elements. Style sheet files can then be referenced using either the link or @import tag Figure . By keeping all style declarations in a separate file it s also easier to update one external file rather than go through every application page and make updates. USE RELATIVE UNITS FOR FONT SIZES TO ALLOW USERS TO RESIZE TEXT Using relative units such as em and keywords allows users to enlarge or reduce text size as needed in web browsers such as Firefox Safari and Internet Explorer. Although px pixels is considered a relative unit Internet Explorer version 6 and older doesn t allow text in the px-based layouts to be resized. Internet Explorer 7 however allows user to zoom in and out of the page this feature zooms in out the entire page not just the text. It s possible that some users may not know how to resize text using browser controls. Therefore consider providing users an explicit way to resize text Figure . ALLOW USER STYLE SHEETS TO OVERRIDE AUTHOR STYLE SHEETS User style sheets are CSS files created by users and are used to override author style sheets to make pages easier .
