Recent Titles in Writing Today How to Write about the Media Today Raúl Damacio Tovares and Alla V. Tovares How to Write Persuasively Today Carolyn Davis

Karl Stolley

Writing Today

Copyright © 2011 by Karl Stolley All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, except for the inclusion of brief quotations in a review, without prior permission in writing from the publisher. Library of Congress Cataloging-in-Publication Data Stolley, Karl. How to design and write web pages today / Karl Stolley. p. cm. — (Writing today) Includes bibliographical references and index. ISBN 978-0-313-38038-9 (hardback) — ISBN 978-0-313-38039-6 (ebook) 1. Web sites—Design. I. Title. II. Series. TK5105.888.S76 2011 006.7—dc22 2010051317 ISBN: 978-0-313-38038-9 EISBN: 978-0-313-38039-6 15 14 13 12 11 1 2 3 4 5

This book is also available on the World Wide Web as an eBook. Visit for details. Greenwood An Imprint of ABC-CLIO, LLC ABC-CLIO, LLC 130 Cremona Drive, P.O. Box 1911 Santa Barbara, California 93116-1911 This book is printed on acid-free paper Manufactured in the United States of America

To Patricia Sullivan


ISSUES AND CHALLENGES Chapter 6 Chapter 7 Chapter 8 Accessibility Usability Sustainability ix xi xxi 3 13 25 33 43 57 69 81 . WHAT AM I WRITING? Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Why Write for the Web? Reading the Web Creating Web Content Standards-Based Web Pages Preparing to Write and Design PART II.CONTENTS Series Foreword Preface Acknowledgments PART I.

STRATEGIES FOR SUCCESS Chapter 9 Structured Content: XHTML Overview 91 103 121 133 147 159 177 189 205 225 235 Chapter 10 Presentation and Design: CSS Overview Chapter 11 Rapid Prototyping Chapter 12 Writing with Source in a Text Editor Chapter 13 Page Metadata Chapter 14 Page Branding Chapter 15 Navigation Chapter 16 Text Content Chapter 17 Page Layout Chapter 18 Multimedia Content Chapter 19 Performance and Interaction PART IV. PROBLEMS AND SOLUTIONS Chapter 20 Site Architecture Chapter 21 Reusing and Dynamically Generating Content Chapter 22 Dynamic Sites in WordPress Chapter 23 Going Live Chapter 24 Tracking Visitors.viii CONTENTS PART III. Sharing Content Resources for the Future Glossary Index 249 257 267 275 281 289 295 299 .

such as how to design and write Web pages and how to write persuasively. Others look more closely at particular topics. the media.SERIES FOREWORD Writing is an essential skill. and many particular situations in which writing is fundamental to success. There are many different types of writing. and general readers write effectively for a range of audiences and purposes. Business people need to express goals and strategies clearly and effectively to staff and clients. Each book then looks at general strategies for successfully addressing those issues. The guides in this series help students. the books in this series offer a wealth of practical information for anyone who needs to write well. Grant writers need to target their proposals to their funding sources. Corporate communications professionals need to convey essential information to shareholders. This is followed by a study of the issues and challenges central to that type of writing. Students need to write well for their coursework. Each book in the series begins with an overview of the types of writing common to a practice or profession. each volume closes with a bibliography of print and electronic resources for further consultation. and it presents examples of specific problems and corresponding solutions. and other interested parties. Some books in the series cover topics of wide interest. Concise and accessible. professionals. such as how to write about the media. Students at . Finally.

or idea will welcome the methods conveyed in these texts. opinion. . and anyone who needs to express a complaint. business professionals will value the practical guidance offered by these handbooks.x SERIES FOREWORD all levels will find the advice presented helpful in writing papers. question.

390 B. Contrary to how software companies market their products. .1 First. But what this book will do is provide you with just about everything you need in order to learn everything you need to know to write and design for the Web. ca. in that top to bottom.PREFACE The arts are made great. a disclaimer. From the visual designs of your pages. the Web is language. Language that you can learn to read and write. the Web is nothing but language. the software you can afford to buy. not by those who are without scruple in boasting about them.C. —Isocrates. the ability to write and design and communicate effectively on the Web is not determined by how much money you have. The Web is unique among all forms of digital communication. or the whims of a particular computer company. to the Web servers that deliver your pages to readers. This book will not teach you everything you need to know about writing and designing for the Web. No single book can. And those who wish to be rhetorically successful on the Web must command the languages and accompanying concepts behind the languages in order to best communicate with the unique audience for any given Web site. to the structure of your pages. but by those who are able to discover all of the resources which each art affords.

2 Rhetoric also suggests how to establish the best form to say something in. and there are interesting historical reasons for why that negative sense of rhetoric is so common. And it is rhetoric—not technology alone—that has informed and guided the writing and design advice in this book. Now.” My PhD is in rhetoric. or available means. generative art of communicating with other human beings. of course. And all of the Web’s affordances are derived from language: the language of the content you post to the Web (your text.” Rhetoric.xii PREFACE It is determined by how well you can command the languages of the Web to best communicate with the audience you are hoping to reach through your Web site and other forms of digital identity that you establish on the Web. for most of us. But the Web also has its own languages. negative usage: politicians in particular thoroughly enjoy attacking one another for spouting “empty rhetoric” or “heated rhetoric. audience. the popular usage of the word “rhetoric” is unfortunate.500-year-old tradition known as the art of rhetoric. even page design). better known as JavaScript. But the challenges of writing for the Web are just a recent development in the more than 2. multimedia. You can even use language to control Apache. All of these issues—development. and I often tell my family and friends that it’s the dirtiest word for which you can get a PhD. the Web is a commonplace technology. you are probably more familiar with the word “rhetoric” in its popular. RHETORIC AND TECHNOLOGY Even though. the available means for developing something to say. is a productive. images. and beliefs. and context— are central to maximizing the affordances. All joking aside though. in its better sense. as it is expressed in Aristotle’s Rhetoric. and to deliver the form appropriately for a particular audience in a particular context of time. and ECMAScript. and for supporting what they say. including the Extensible Hypertext Markup Language (XHTML). but suffice it to say that there are also positive meanings of “rhetoric. . values. form. Cascading Style Sheets (CSS). it is still tempting to think of it as an entirely new form of communication. of Web communication. The art of rhetoric enables people to discover.

And that’s where the long-term challenge of Web design lies. On the Web. or more customers for your business or members of your club) is a matter of good content. But they might also find you via your Twitter account or a bookmark of your site that someone has posted to Diigo. THEY’LL CALL YOU But here’s the trick with the Web: you rarely get to actively contact your audience. but now you must work to maintain their attention: not just for the length of their visit to your site. your rhetorical work has only just begun. but providing an experience that merits return visits (or job offers. Anyone can post a site. and masterful use of the technologies that make up the Web. we have to write so as to make sure that we are found. and connecting with. such as Google. it’s all a matter of good rhetoric. human beings. In other words. You’ve been able to attract your audience’s attention. DON’T CALL THEM. But the techniques and approaches that this book offers are also grounded in a particular view of human relationships to technology: writing and designing for the Web is not just about helping .3 to better deliver your content across the Web. though. good design. Most of the time. your audience has to find you—usually through a search engine. in addition to writing for. but for as long as you continue to maintain your site. Learning the rhetoric apart from the technologies and languages will leave you at the mercy of whatever technology you can afford (or person you can afford to hire) to build your Web pages for you. But learning technologies apart from rhetoric will gain you nothing more than technical proficiency. the way you do with an email or an instant message. and anyone can draw people to that site. KNOWLEDGE AND VOCABULARY Writing and designing for the Web is an important end in itself. And that means writing for other computers. like search engines.PREFACE xiii the world’s most popular Web server. or admission to school. Once a human being has found your site.

poker. or Web designers—you have to know or be willing to learn the words that that community uses in addition to engaging in photography. your college major. ESSENTIAL TOOLS AND TECHNOLOGY In addition to the knowledge and words. CSS. One thing you will notice about this book is that it does not shy away from the technical knowledge and vocabulary surrounding Web writing and design. Two examples of that are open-source blogging software such as WordPress4 and the Microformats. Writing for the Web is no different: its terms may be unfamiliar and technical. and use them to talk and collaborate with others on Web projects. college major. which is helping to make the information on Web pages easier to share and use away from the Web. or classroom. . Web design and development is just another domain of knowledge. football fans. and talk about them. and a Web browser. knitters. too.xiv PREFACE you to work differently with Web technologies. but you know technical terms from other domains already. poker players. People work together to establish new practices and technologies for communicating on the Web. or classes you have taken: in each of those areas. writing for the Web is a community activity. carpentry. you have to know the tools that a community uses: in the Web’s case. Think for a moment about your hobbies. and JavaScript—that people write with when they write for the Web. carpenters. but about deepening your understanding of them to change how you think. medical doctors. a search engine.org5 community. search the Web for them. But in order to join or even simply benefit from the knowledge of any community—whether photographers. you have acquired specialized knowledge and technical words to talk about different subjects in ways that are more sophisticated than someone outside of your hobby. learn. There is a very good reason for this: more than any other form of digital writing. This book does not expect that you know these terms already. or whatever activity the community is known for. and a few generic pieces of software: a text editor. but it will help you learn them. the tools are the languages— particularly XHTML.

Writing must always be revised. my philosophy toward learning digital communication technologies is simple: learn them right and learn them well the first time.PREFACE xv However. And on the Web. you have to understand how to write with the Web’s languages. more advanced forms of Web production. It never comes out perfectly the first time. things other than writing will also need revision: for example. WYSIWYGs fail at supporting revisions to pages. your design might work in one Web browser. And even if the software’s brand name continues to exist. Web page revision is not—unless you understand how you wrote the page initially. you can download a WordPress template of someone else’s design. CSS. such as Microsoft FrontPage or Adobe Dreamweaver. then your abilities will be dependent on the continued existence of that software. It was exactly those three problems that I encountered in my own Web design work that led me to develop new methods to teach my students to design Web pages the way I write about in this book. JavaScript—then you will always know how to build Web pages. there is no WYSIWYG system for WordPress templates. the company behind it may radically restructure the software’s interface and features— and you’ll find yourself a beginner all over again. regardless of what software you have available. but not another. (True. to build a custom template for a WordPress site. this book does not teach Web writing according to one particular piece of software. If you want. software packages for creating Web pages fail to prepare you for other. Learning . for example. but that diminishes the rhetorical impact your site would otherwise have if it featured your own unique design. If you know or are willing to learn the languages of the Web— XHTML. Web page creation is relatively easy. That said. if you learn how to create Web pages only according to one piece of software. • Second.) • Third. and it outright discourages the use of whatyou-see-is-what-you-get (WYSIWYG) software packages. because WYSIWYGs fail Web writers at three important things: • First.

and a good Web browser.) I have also created a Rapid Prototyping Kit (RPK) that is available as a free download from this book’s companion Web site. Firefox will provide an initial real-world view of your Web pages and. all of which are available as free downloads. CSS. The RPK will help you start building your site and its pages with confidence. you can then begin to shape not just what but how someone will read your pages. while . about your content. (However. You may also find. coupled with the concepts for thinking and talking about them. There are suggestions for each later in this book. you are also writing. • A search engine is your portal to XHTML. in the future. the approaches to Web writing and design suggested in this book will help you to minimize differences from browser to browser. and JavaScript references and guides (so you don’t have to memorize everything about those languages) and your means of discovering the many communities of people who are devoted to the art of writing and designing for the Web. But not only are you writing the content of a page that someone else will read. And when you learn to write in the Web’s languages. The only tools you absolutely have to have to build a Web site are a Web-friendly text editor. as I have. or changes to existing ones. As a solid development browser. in the Web’s languages. a search engine. a good Web browser—I recommend Mozilla Firefox—is the last essential piece of technology you need. A chapter toward the end of this book lists some trustworthy references and helpful communities to get you started. • A Web-friendly text editor is where you do your writing. will make it even easier for you to pick up other languages.xvi PREFACE the languages of the Web. it is the view of your Web page where you do your work. with the help of some add-ons (also free). will help you to refine your page’s construction and design before you test them on as many other browsers and devices as you can. that writing about your content in XHTML and CSS even helps you refine the content itself to better reach your audience. • And finally.

ORGANIZATION OF THIS BOOK This book is a complete approach to Web writing and design: it takes you from learning to read the Web like a writer and designer. using site statistics packages. any successful Web site will depend on the solid construction of individual pages. • “Strategies for Success” covers essential techniques and strategies that you need to write and design individual Web pages. and making . customized Web site—even a custom-designed WordPress blog. if you’re interested. and sustainability. and navigation.PREFACE xvii still giving you plenty of flexibility to tailor your site for the specific needs of your audience. up through posting a complete. The book itself is organized into a few key sections: • “What Am I Writing?” looks at the rhetorical situation of the Web. WordPress. including page elements such as branding. Because a Web site is basically a collection of pages. It also looks at setting up and customizing a popular open-source blog package. This section concludes with a chapter on tracking visitors. • “Issues and Challenges” presents the guiding principles for making informed decisions about every component of your site—from bits of text and images on individual pages to the navigation and architecture of your entire site—with regard to the issues of accessibility. particularly why an online identity that you develop and control is essential to have—and possible to establish even before you begin to build your Web site. to power your site. All three issues are key to building a site that reaches the widest possible audience while giving you the freedom to constantly revise and improve (rather than simply maintain) your site over time. such as developing a site architecture and employing methods to display repeated content (such as branding and navigation) over multiple pages from a single file. • “Problems and Solutions” moves to the challenges surrounding construction and maintenance of an entire Web site. text and media content. usability.

6 The examples I’ve provided from my work are not necessarily great. as well as on the companion site. and why. which are available via this book’s companion Web site. I can talk honestly and accurately about how they were made. I’m just as likely to showcase something that I’ve done previously that was bad design as I am to show off an example that was good. . and whether opinions expressed are based on empirical or theoretical values. because I subscribe to graphic designer Paul Rand’s view that words about art and design are best explained in the presence of the artist’s work. • And finally. A NOTE ABOUT SCREEN CAPTURES To add visual interest and to illustrate certain concepts or techniques. because the examples are of my own making. so as to broaden your identity across the Web. there are links to some amazing Web design galleries that you should browse for examples that are far more inspiring than mine. The reader. it will necessarily cover many technical topics and terms. then. The limitations of print being what they are. I encourage you to look at the live versions of all screen captures. A glossary is provided to help you manage the book’s many technical words and concepts. and some suggested Google search terms to help you discover even more resources. It also lists links to galleries of Web design to peruse for inspiration. In fact. These are all of my own making.xviii PREFACE material that you post to your site easier to share with others on Facebook and elsewhere. Because this book is about Web design. can more readily understand what the writer is talking about. I have included screen captures of different views of Web pages throughout the book. In the “Resources for the Future” section. But in all cases. “Resources for the Future” provides a topical list of additional print and digital publications to consult to extend your knowledge of writing and designing for the Web.

• up-to-date instructions for working with different technologies. so that you can better test and design your pages before going live. Next. extending your identity and reach across the Web. read through Chapters 21 and 22. planning and building your own basic pages. learning at every download the RPK and. of course. If you’re enthusiastic about the idea of running your own WordPressdriven site. Chapter 24 will guide you in ways to both technologically and legally simplify how others may share your content. with Web editor and Web site handy. so that you at least expose yourself to some of the key concerns of Web writing and design. and sketching out page designs for your Web site. Then. read quickly through the “Issues and Challenges” section. You can. save those for later and look at Chapter 23 and how to go about publishing your Web site to the open Web. read this book straight through. You will also want to use your browser to open this book’s illustration. and • notes about any corrections or modifications to the content of this book. • live versions of the examples in this book (plus others). But I suggest you begin with the “What Am I Writing?” section. with your text editor and Web browser handy. browser open.” As you get down to the work of building your site. Refer also to the Web-available instructions mentioned in that chapter for getting your own local Web server set up on a USB drive. start working through the “Strategies for Success” section.PREFACE xix HOW (AND WHERE) TO READ THIS BOOK I have written this book in an environment similar to what I hope you’ll read it in: near the computer. fixing any mistakes (we all make them!). Finally. otherwise. The companion site features • a Rapid Prototyping Kit (RPK) for building your Web site.and example-rich companion Web site at http://sustainableweb design. . You might want to revisit the “Issues and Challenges” section before moving on to the early chapters of “Problems and Solutions. and ready to try new things. work through Chapter 20 to learn how to develop an organized architecture for your site.

169. http://wordpress. http://news. WordPress. 2 of Isocrates. http://microformats. “September 2009 Web Server Survey.netcraft. Paul Rand. Design. server_survey. G. xii. R. 3.html 4. trans. 1929). trans.” Netcraft. Loeb Classical Library (Cambridge: Harvard University Press. Microformats. .org 6.xx PREFACE NOTES 1.” in vol. “Against the Sophists. W. 2009). in The Rhetoric and Poetics of Aristotle. CT: Yale University Press. 1984) 5. (September 23. 1993). and Chaos (New Haven. Aristotle. Isocrates. Nordlin. Roberts (New York: The Modern Library. 2.

and April Wedekind. Kelly Schaefer. to the first group of undergraduate students to whom I taught standards-based Web design in a multimedia writing course—and to David Blakesley. who encouraged me to teach the course while I was a graduate student at Purdue University. Thank you also to Chris Pederick (chrispederick. I am still grateful. who offered thoughtful responses to this book’s earliest draft chapters. Freddrick Logan. And I am also grateful to the graduate students in technical communication and information architecture at Illinois Institute of Technology. who expressed enthusiasm and encouragement while reading the draft form of this book in our Web design class. for his work on this project. and to Erica Dekker and Susan Mallgrave for their comments and corrections when the book was nearly complete.ACKNOWLEDGMENTS This book is largely the product of teaching students who put an incredible amount of trust in the unorthodox thing I encourage them to do: abandon the constraints of software and learn to write the Web by hand. I offer special thanks to Laurie Riley. Many thanks to the Mozilla Foundation for its policy allowing writers to reproduce screen captures of the Firefox Web browser and to Frank Hecker for answering my questions about the Mozilla Foundation’s policies. many years later. not as programmers. In particular. but as writers and for creating and maintaining the Web Developer Add-on for Firefox and for permitting me to showcase it in screen shots throughout this . I also thank my graduate assistant.

for her love and her seemingly boundless capacity for patience and understanding as both a partner and a collaborator. I also thank my brother. but you know who you are. my editor at Greenwood/ABC-CLIO. More than that. Nancy DeJoy has my profound gratitude for her constant encouragement and friendship. I reserve my deepest thanks and gratitude to my wife. Any list of names risks being incomplete. and technical communication. Colin Stolley.xxii ACKNOWLEDGMENTS book. I am also grateful to Bill Hart-Davidson and Janice Walker. whose pioneering work in digital writing and rhetoric continues to inspire me to pursue the line of research that led to this book. I am forever indebted to my mentor Patricia Sullivan. I express my sincere thanks to George Butler. software-neutral approach to Web design. who served as the manuscript’s reviewers. And this book would not have taken the shape it has without my many colleagues and friends across the fields of rhetoric. past and present. Amy. I am grateful for the support of all of my colleagues at Illinois Institute of Technology in the Lewis Department of Humanities. who answered my questions about both computer science and the law and the intersection of the two and offered invaluable suggestions and guidance throughout this project. See you on Facebook or Twitter. where we both worked on our separate projects. for their thoughtful criticisms and encouraging feedback. Pat is a dear friend whose wisdom is matched only by her generosity and unwavering dedication to her students. Many thanks also to Don Ho for his work on Notepad++ and for likewise permitting me to use screen shots of Notepad++ to illustrate Web writing. who approached me to write this book for Greenwood’s Writing Today series and who was receptive to the idea of a book that would take a rhetorical. . More than a few of this book’s chapters were drafted in Nancy’s kitchen. computers and writing. punctuating periods of quiet with spirited conversation as we shared and responded to each other’s writing.

and some of the best software for building Web pages is available for free on the Web—thanks to many thousands of volunteers devoting their time and effort to building quality free and opensource software. On the Web. As we will see. and how they are made now according to what are called Web standards.PAR T I WHAT AM I WRITING? This section prepares you to begin writing on the Web. Reading is the counterpart of writing. The remainder of this section involves preparing content for your Web site. we write to be found—an idea the first chapter explores in depth. . As with all other parts of this book. building great Web pages is more than what any one piece of software can do. including a chapter with a brief history of how Web pages were made in the past. and the second chapter suggests approaches and tools for reading the Web like a writer and designer. this section concludes with a chapter about setting up your own custom environment to write. you will stand to benefit most if you read with a computer nearby so you can try some things out and learn in a more hands-on way. along with simple things you can do to immediately begin establishing or improving your Web presence. Finally. which guide the design advice in this book. design. and test your pages.


You might even want to search for alternate spellings of your name: in Catherine’s case. to search first and last names appearing in sequence) . of course!). search for both (with your last name. Be sure and try variations on your name. well-rounded identity. When I ego surf. If your name is Catherine. or for a business or organization. WRITING TO BE FOUND Whether you are building a Web site for yourself. Do a Google search for yourself right now (also known as ego surfing). the results that show up in Google and other Web search results are far from ideal in conveying an accurate. I also routinely search Google and Google’s Blog Search for combinations such as: • Karl Stolley • "Karl Stolley" (with quotation marks. Katherine and Kathy. You probably already have reasons for writing for the Web. but you sometimes go by Cathy. custom online identity that you control. But this chapter offers some ideas about writing for the Web that will help you strengthen and clarify your own sense of purpose in establishing or improving your Web presence. for example. there is no more important reason to write for the Web than to build a stable. And yet for many people. It is no secret that schools and employers search the Web for their applicants’ names as part of their admissions or hiring process.CHAP TE R 1 Why Write for the Web? The fact that you are holding this book in your hands (or displaying it on your screen) might tempt you to skip this chapter.

but vastly different (and sometimes morally suspect) interests and backgrounds. it might be even more frustrating to discover that it does not appear as the number one ranking for your name search on Google. Scattered. People with multiple Googlegängers will want to whittle down the results. or perhaps the school you attend. As you look at the list appearing with your name. And if there are results. There may be no results for your name at all. ask yourself what potential customers or members would think. For example. a potential college or graduate school think of these results?” If you’re working on a Web site for a business or a club. confusing. In all of those cases. You might find yourself on a missing classmates page in the alumni area of a college or university Web site. may see results for dozens. You might even find that some well-meaning relative tagged you in an unflattering photograph on Flickr. Or perhaps you used your real name when replying to an online forum about troubles with the type of car you drive. to search last name first. or even in the top ten. I will search for these variations: • Dr Stolley technical communication • Professor Stolley Illinois Institute of Technology Even for people with uncommon names. The methods for writing and designing Web pages presented in this book will help you to establish your Web presence and likely improve your site’s ranking in Google and other search engines. random results are frustrating.4 HOW TO DESIGN AND WRITE WEB PAGES TODAY • "Stolley. ask yourself: “What would a potential employer. like Jim Smith. they may be scattered. the results do not point positively to one page or another that fully and accurately represents you. your employer. even hundreds of so-called Googlegängers: people with the same name. the search results may not be encouraging. Karl" (with quotes. job title. Try adding to your name the city where you live. . occupation or professional field. and downright goofy: perhaps you were quoted in a story for a school or local newspaper. and searching the Web for its name. as some pages list names that way) What kinds of results appear for you? People with common names. And if you have your own Web site already.

Just because Uncle Jimmy willingly posed for that wacky picture at the family reunion doesn’t mean that he wants his coworkers to see it on Facebook (and then print it and hang it up all over the break room at work). and other horrors of life on the Web. Be very careful about choosing security questions whose answers are available online. coworkers. But there are some simple things you should do to establish an online presence while keeping yourself safe: • Never post or reveal anything online that you wouldn’t want to appear on a billboard next to a busy highway. and keep them obscure: “What was your family language word for milk?” or “Where do you think you lost your favorite toy in third grade?” • Visit http://www. “Left the kids at home by themselves”. Too bad I’m at work. colleagues—that they wouldn’t want on a billboard or seen by their mothers. one of the best first steps for establishing an online identity is to begin microblogging.” • Many sites—from banks to email providers—feature “security questions” meant to aid you in accessing your account should you forget your username or password.WHY WRITE FOR THE WEB? 5 STAYING SAFE ONLINE Everyone’s heard news stories of identity theft. WRITING TO ESTABLISH AN ONLINE IDENTITY Whether you have a Web site or not. There are a few sites that support this activity. then reword it as “Never post or reveal anything that you wouldn’t want your mother to see. • Don’t reveal information about yourself (or others) in Tweets or Facebook status messages that could endanger you. or your property: “Walking home alone late at night along Lincoln Ave”. choose that option. (If that doesn’t bother you. never post or reveal anything online about others—your friends. or to let them act as a deterrent for building a Web presence. your family. family.1 Twitter will help you to establish a Web presence by frequently answering the question “What’s happening?” in 140 characters . although perhaps the most popular is to learn more about online and computer safety. or “New computer was left at the back door of the house. stalking.”) • Even more important.onguardonline. There’s no need to recount them here. avoid security questions like “What is your city of birth?” or “What is your high school mascot?” If a site allows you to write your own security questions. If you have listed your hometown or high school in an online profile.

but only time and your own consistency (e. too. To keep your accounts secure. is a strategy for creating rocksolid passwords: • Use an acronym derived from song lyrics. to post is to tweet. though. YDcttroap might become YDc++r0ap. Remember. as they do on Twitter). Registration on Twitter is quick and free (see the “Controlling Your Name” sidebar for help choosing a Twitter username). too. and computer account logins. You can post to Twitter via its Web site. This technique works well not only for Web services like Twitter. riding on a pony” becomes ydcttroap. “Yankee Doodle” has uppercase built in: YDcttroap.and symbol-swapping memorable. mix in some uppercase letters (I prefer to do this at the beginning or end of a password). But Twitter might seem ridiculous to those who haven’t tried it: What possible good can 140-character microblog posts do for establishing an online USERNAMES AND PASSWORDS One problem with using yourname for your usernames is that it’s not terribly hard for anyone to guess (then again. throw in an exclamation mark at the beginning or end: !YDcttr0ap The acronym will make the password easy to remember.6 HOW TO DESIGN AND WRITE WEB PAGES TODAY or less. the username itself. In Twitter-speak. adjust accordingly). and a zero replacing the lowercase O. or stand-alone clients like TweetDeck. .2 It is also possible to post to your Twitter account from just about any kind of mobile phone. It’s now conventional wisdom to avoid using dictionary words. • Swap out letters with numbers and symbols (note that some services disallow certain characters. home wireless networks. a line in a poem. with plus signs replacing the Ts. • Unlike usernames. “Yankee Doodle came to town. treating letter Os as zeros) will make number. then. that the longer the password. the better. • If you have no other nonalphanumeric symbols.. but for securing online bank accounts. you need to use very strong passwords.g. or an all-number password. which I prefer to keep all lowercase. Here. or some other phrase that you’ll remember easily. special add-ons to your Web browser. neither are usernames that become part of URLs.

or what I call living content. and many others use Twitter’s RSS feeds to publish their latest Tweets to their own custom Web sites. An essential part of Twitter is following others’ tweets and. in other words. causes multiple sites to update simultaneously for these individuals. Brevity is key to Web writing. Updating Twitter. . you might also consider establishing a Facebook account. and not just their Web pages. A single act of writing keeps multiple online presences fresh with living content. publish (just about) everywhere and often. It’s much better to post your perspective on issues you care about. Yes. because no one has time. you can announce to Twitter that you’re eating a sandwich or walking the dog. it is easy to update often and without the extended efforts required of full-on blogs or Web sites. others following yours. In addition to Twitter. Pages that appear not to have been updated for some time are suspect to Web audiences and might seem to have been abandoned. Nothing is more important to Web audiences than fresh content and signs of life. Building networks of connections with other humans. is an essential part of being found on the Web and establishing an identity that is not an island unto itself. so maximum rhetorical impact has to be achieved in few words. • Write once.3 Both Twitter and Facebook will make it easy for you to announce your new or redesigned Web site when the time is right. Frequent use of Twitter will help you learn the art of minimal expression. • There is more to connecting on the Web than linking to pages. Some people use their Twitter account to update their Facebook status. • Frequent activity is essential to any Web presence. by posting interesting things. With Twitter’s 140-character limit. But that’s not terribly interesting.WHY WRITE FOR THE WEB? 7 identity? The answer lies in many little lessons that Twitter teaches about Web writing in general: • Be interesting. No one has time. or share the thinking side of your professional work or even your hobbies. • Get to the point.

yourname may not be available. and . *Namechk. The reason is simple: a Web search for a particular person is going to include a first and last name. yourname. Consider these alternatives with the example name of Jane Amy Smith: • jane-smith (addition of a hyphen) • jane-a-smith (middle initial plus hyphens to improve readability) • jane-amy-smith (middle name plus hyphens) Notice that in all of those Of course. • Don’t include the place where you live (people move. diigo. • Facebook ( . having both in the URL or username may very well improve the ranking in search. . Whatever variation you flickr. • Google (used with Gmail and other Google services. e.8 HOW TO DESIGN AND WRITE WEB PAGES TODAY CONTROLLING YOUR NAME Control as many accounts and register as many domain names of your name or your organization’s name as possible. “Jane” and “Smith” were parts of the URLs/ usernames.g... even if they go unused.. see Chapter 5) • Twitter (e.. note that Flickr and other services may require additional steps to claim URLs/usernames) • MySpace. yourname. http://namechk. your.g.. if your name is common • Diigo (e. Here are other guidelines for those unable to register yourname: • Don’t add numbers corresponding to your birthday or birth month/year (see the “Staying Safe Online” sidebar).com/ keep it readable and memorable. jane-smithplumber).. in my case it would be karlstolley): • The .g. facebook. but here is a starter list (I use yourname as an • Yahoo! (used with Flickr and other Yahoo! services.g. after all).. yourname.g. Sites like Namechk* let you check the availability of usernames over hundreds of sites and services all at Top Level Domains (TLD) of your name (e. e. but career changes are commonplace.g. professions or job titles might makes sense (e. • For some. particularly “My URL” (e.g.

or workplace. . or workplace entirely— unless it’s the kind of news that someone could be given an award for and that has been announced elsewhere first. .WHY WRITE FOR THE WEB? 9 But Twitter will allow you to start establishing a presence in Google search results immediately (provided you do not elect to protect your Tweets). be sure to link to his site. Simply stated. I have a simple rule about this: never refer by full name to someone who does not have a Web site. such as Diigo. . you may find yourself referring to friends and colleagues by name. in addition to Twitter and Facebook • Photo sharing sites. such as Picasa and Flickr • Video sharing sites. If someone blogs or Tweets under an alias. or who is not a public figure or published author. if someone does have a Web site and you are positively referring to him by name. school. Facebook. You need to go out and find others. let you share bookmarks to things you find on the Web • Social networking sites. This helps strengthen the other person’s Web presence. school. Flickr. My own preference is to avoid referring to family. Beyond microblogging. such as LinkedIn. there are other general categories of Web sites where you can begin to establish your online presence by registering and using an account: • Social bookmarking sites. But being found requires more than good search rankings. It is also good practice to avoid referring to conflicts or sensitive situations in your family. MySpace) come to shape the identities of others who have not established their own Web presence. even if you withhold names. and your own kind treatment of others. Twitter. with luck. MySpace. At the same time. such as YouTube and Viddler WRITING TO CONNECT WITH PEOPLE A central idea in this book is that you write and design for the Web in order to be found. Once you begin to write and design for the Web. too. not her full name. refer to her by her alias. Don’t let your Web site or social media account (Twitter. they will link back and do the same for you. DO UNTO OTHERS .

particularly through comment functions available in most blogging software. which will help you see how others have worked to establish an identity for themselves. And once you have your own Web site. Facebook. (Chapter 24 will talk about server statistics and other means for getting a sense of who is visiting and linking to your site. and interested by your Tweets. to share the address to their own Web sites. particularly if it includes a blog component (see Chapter 22). When you do have your own URL. But such sites are just a start. Diigo—can be used for lifestreaming:4 announcing new content. and so on at your Web site. we write to be found. you can search for the names of your friends. in particular. . professions.10 HOW TO DESIGN AND WRITE WEB PAGES TODAY and other social Web sites allow you to do this through direct “follow” or “friend” relationships. a custom Web site is still a crucial component of your online identity and presence. as are other social media sites that allow you to connect with other people. and on many blogs. Just as you searched for your own name in Google and other search engines above. present terrific opportunities for connecting with others. There are less structured ways of connecting with others. your many other online presences—Twitter. or careers and the words “personal Web site” or “blog.) NEXT STEPS On the Web. Some of them may have Web sites and blogs. too. The next chapter will address the important rhetorical skill of reading the Web. add it to your Twitter profile. site changes. If you don’t yet have a Web site that you control. Twitter is a great first step to establishing an online presence. Comments allow readers to add reactions and indicate interest in others’ writing. you can always share your Twitter address when you comment on a blog post. Readers intrigued by your comment on someone’s blog. Finding new people is as simple as searching for interests.” Blogs. to audiences you share a closer connection with already. Once you have a custom Web site. peers. regularly linking to others’ sites or blog posts and portfolio items helps you to establish even more connections with other people. too. and colleagues. could easily follow the link in your profile to your Web site.

com 4. “Lifestreaming. Twitter.wordspy.” Word 3. 2. http://www.asp .com/ words/lifestreaming. TweetDeck. Paul McFedries. Facebook. http://twitter. http://www.WHY WRITE FOR THE WEB? 11 NOTES 1.facebook.


It is important that Web writers and designers appreciate just how differently a page may appear under certain circumstances. Someone using a mobile phone to view the Web will see still another view. but will hear it read aloud instead. the resolution of its screen. . And a person with low vision might not even see the Web.CHAP TE R 2 Reading the Web Every view of the Web is unique. but as a writer and designer. But the purpose of this chapter is to help you learn to view and read the Web not as a casual user. Understanding these differences from a reader’s perspective will make you a much more effective writer and designer when it comes to creating pages that work optimally in many different browsing environments. but rather one of its strengths. and certainly its Web browser. the fonts it has installed. depending on such technological conditions as the type of computer. (That means abandoning any attempts to make all experiences of a Web site exactly the same. The goal of every Web writer and designer should be to capitalize on the differences and needs of a wide range of readers to make each unique view as great as possible. and every view of the Web should be unique. Someone viewing a Web site on an Apple computer with the Safari Web browser will see a very different view of a Web page compared to someone on a Windows computer using Internet Explorer.) Much of this book consists of guidance for writing and designing to those differences. this is the most important lesson to learn: every view of the Web is unique. This is not a failure of the Web. For new and seasoned Web writers and designers alike.

and Linux) • Mozilla Firefox (http://www. But Web writers and designers need to go beyond their own habitual browser use and look at the Web in many different • Chris Pederick’s Web Developer Add-on for Firefox (https://addons Windows Users • Internet Explorer 8 or above (IE) • Microsoft Expression Web SuperPreview (For testing multiple versions of IE) (http://expression. install some or all of the following free browsers and tools: All Users ( unix _ open _ source/lynxtextwebbrowser. A WEB-READING TOOLKIT To read the Web (and later to test your own designs) in as many ways as possible. • Lynx for Windows (http://home.mozilla. using multiple browsers (see the sidebar “A Web-Reading Toolkit”).apple.aspx) • Safari for Windows ( • Google Chrome (http://www. .html) If you cannot install software.14 HOW TO DESIGN AND WRITE WEB PAGES TODAY READING WITH MULTIPLE BROWSERS AND DEVICES Many people access the Web using the browser that came installed on their computers: for Windows for Mac users.mozilla. try a Google search for “browser emulator” to find sites that offer approximations of the views provided by different • Opera browser (http://www. this means Microsoft Internet Explorer. kwok/lynx/) Mac Users • Lynx for OS X (http://www.

In many respects. is a proprietary browser. One Web There are dozens and dozens of Web browsers available: Mozilla Firefox and Opera are two browsers that can be used on Windows. Safari has both its native Mac OS X version and a Windows version. and which are unique to different operating systems and mobile devices. like Microsoft’s Internet Explorer and Apple’s Safari browser. and Linux operating systems. I prefer Chrome for most of my daily use: reading my Gmail account. and Internet Explorer. Mac OS X. Because Firefox is open source. Few Engines. such as Chris Pederick’s Web Developer Add-on that’s used throughout this book. Google Chrome. Many Browsers. Opera. Internet Explorer has only been available on Windows machines since its version 6. people have built many excellent Web design add-ons for it.3 and Microsoft’s Trident engine.READING THE WEB 15 Try making yourself use a different browser every day for a week or so. posting to Twitter. And on all computers. Firefox and Chrome. I prefer Safari (whose WebKit engine is also used in Chrome). Konqueror is a Linux-only browser. Mozilla Firefox is also what is known as an open-source browser: Firefox’s source code is openly available to everyone. Mozilla Firefox. say. each browser will have access . for example. Opera. browsers based on Gecko and KHTML/WebKit generally display Web pages very similarly. You may even find that different browsers are better for different activities. Linux). Try alternating between. meaning that most of its code is kept secret and is developed almost exclusively by each company’s employees. On Windows computers. and managing my Web sites. Mac OS X.2 the WebKit engine (used in Apple Safari and Google Chrome).1 The good news for adventurous readers of the Web is even better news for Web designers: most Web browsers use one of three rendering engines: Mozilla’s Gecko engine. particularly with sites you visit every day. tend to display pages the same way. although depending on the operating system (Windows. A look at the Wikipedia page that lists Web browsers will give you a rough idea of just how many browsers there are. But unlike Firefox and Opera. some browsers are designed for only one or two operating systems. On Mac. I rely on Firefox for Web design and development. It is also developed and tested by a large group of volunteers and a smaller group of paid individuals working for the Mozilla Foundation.

has the purpose of establishing her as part of a particular community on the Web. successful Web sites have some type of general. through links to blogs that she reads. but it also. “Your browser is not supported. is used in Internet Explorer and AOL Explorer. but it is an eye-opening experience to see just how many Web sites are still designed to work only on specific browsers. Sometimes a site’s authors deliberately inject their site into a particular context. Yet as obvious as a site’s controlling purpose might be. thanks. The controlling purpose of the Gmail or Hotmail sites is to enable people to access and read their email accounts. For example. you will see that some Web sites take a hostile approach to readers who aren’t using a specific browser. A site’s purpose is always situated in many contexts: a charitable organization’s Web site is situated in a broad context of interested supporters and of other Web sites maintained by similar organizations. A personal blog may have the controlling purpose of offering its author a platform for expressing her views. for example. if a particular charity . even through design. ASSESSING PURPOSE AND CONTEXT Like any other piece of writing (or design). The purpose of a portfolio Web site. from graphic design to a specific political position or issue. is to promote its creator’s work. It’s not uncommon to encounter Web sites ranging from banking sites to university and corporate intranet/Web portals that demand that visitors use a specific Web browser. If you regularly change up your browser use.16 HOW TO DESIGN AND WRITE WEB PAGES TODAY to different fonts (see Chapter 10). which tends to be the most unpredictable. People attempting to view the site with the “wrong” browser may be greeted with nothing more than a message stating. there are often other purposes at work. But such sites also have the purpose of generating ad revenue and alerting users of other services on the site. The Trident engine.” Gee. A collaboratively written blog may have the purpose of advancing views on a particular topic. The approaches to Web design in this book emphasize designing in a browser-neutral way. The technology and standards exist for browserneutral design (see Chapter 4). controlling purpose.

The short notes area that Diigo offers for posts is a good way to briefly summarize why the site is enjoyable or inspiring. Magazines. Design also plays a role in conveying purpose and context. challenge yourself to identify its purpose and context.READING THE WEB 17 KEEPING A DESIGN JOURNAL It’s a good idea to maintain a record of sites that you’ve visited and found to be instructive and inspiring. • An HTML or word processor file stored on your computer. and other media. They’re very useful for cutting and pasting ideas from printed matter. (Whether that design choice would increase donations is another matter. This is great for keeping track of inspiring sites. The next sections offer lists of questions to consider for reading according to content. These can be found for cheap at most bookstores. even DVD menus and title sequences to movies and television shows can all be sources of ideas. . supports high school athletes from underprivileged backgrounds. images. I never post negative comments about people’s sites on Diigo. as you design and write: • A blank. and performance. billboards. I use a dedicated “design inspiration” tag in my account. and keeping notes about designs that you find. sketching out your own ideas. it might design its site to look something like ESPN. as does the performance of the site. But design ideas and inspiration can come from many places. including screenshots and clickable links back to the site. Consider keeping one or more of the following kinds of design journals as you read and. but I’m brutally honest in the HTML file that I store on my computer. later. A digital file helps you keep notes about ideas that didn’t work. Sometimes the purpose is expressed in the site’s content: writing. Such a design choice would help to put the organization in the context of sports and sport Web sites. when that is helpful. • A Diigo or other social bookmarking account. An overly lavish Web site design could conceivably hurt a charitable organization if it appears that donations are all spent on Web design!) When reading a Web site. bound sketchbook.

consider the same questions as for the photographs above. or does it appear choppy? Is it paced in such a way that it can be read (if it includes text) or comprehended? If the media includes sound. long and complex. or some mixture of the two? Does the site offer contextual links in its text? Are the links to other places in the site? Or to external sites? • Photographs: What kinds of photographs or other images are presented on the site? Do the photographs appear to be part of the site’s content? Or are they part of the overall design? If the photographs are meant as content. does the video or animation run smoothly. thumbnail-sized photographs link to larger versions of the same image? • Video and Media: If a site includes video or animations and other media. are they presented in a way that makes their content clear or interesting? Are they highly compressed? Pixelated? Distorted? Do small.18 HOW TO DESIGN AND WRITE WEB PAGES TODAY Reading for Content Reading for content is the most obvious way to read the Web. too. made clear? Does the site use icons or text links for controls. or both? • Layout and Design: Layout and design are a kind of content. does the sound sync with the moving image? Is the sound too loud or too soft? Distorted or crystal clear? • Controls: Are the labels on the site’s navigation area(s) accurately descriptive of the pages they link to? Are the functions of other page controls. Are text. It’s probably how you read it already. photos. such as those for printing or emailing the page. Here are some more specific questions to guide you in thinking about the effectiveness of different Web sites’ writing and design choices: • Text: How long are the chunks of text on the site? Does the site make use of headings and bulleted or numbered lists? Are the sentences punchy and direct. readers may tolerate terribly designed Web sites if the site’s content is still good. Content is the most important aspect of any site. and media arranged in a way that makes sense for the site’s purpose and context? What impressions do the site’s colors convey? Does the design seem to support the . Also.

READING THE WEB 19 content of the site—or to contradict it? Does the design affect how credible you believe its author/designer to be? Reading for Design Effective Web sites carefully knit their designs and content together. shape. that makes you want to read? Are fonts sized and colored appropriately to ensure the text is readable? Does the text stretch across large areas of the screen? Or is it contained to narrower columns? • Photographs: Are photographs and other art part of the site’s design? Do they compete for attention with the rest of the site’s content? Are the photographs presented in true-to-life color? Or are they monochromatic? Do colors in the photographs appear in other site design elements—font colors. borders. and texture seem to fit with the rest of the design? • Layout and Design: Is the design inviting? Does it encourage you to explore the site’s other content? Would you estimate that the design is original or a template taken from somewhere else? Does it seem like the site’s designer had content in mind while making the design? If the design appears to be custom. shaded areas? • Video and Media: Have the edges of video and media been integrated with the design of the site? Or are they simply placed on the page with a stark border between the video/media content and the page design? Are there buttons for pausing/ playing the media? Do they match the rest of the site design in terms of their shape and color? • Controls: What is it about the site’s controls that make them clear (or not) as navigation? Do the site’s controls stand out from the rest of the design and content. • Text: Are pieces of text presented in a way that is inviting. On such sites. or are they integrated? If there are icons or buttons on the site. but they will love well-designed sites with great content. Users might tolerate sites with solid content but poor design. the design is clearly much more than a simple container for holding content. do their colors. Rather. it reinforces or adds interest to the site’s content. do you think that its creator spent a great deal of time on it? .

italic. like scrolling down the page. or the same window? • Layout and Design: How quickly does the page content appear with its full layout? As the page loads. both in length and in screen presentation? Has the text been overstyled with bold. particularly sounds. and then jump into place elsewhere? . and so on. stopping. that play automatically when you load a page? Are there controls for starting. is it easy to control them with your mouse? Are the movements or pop-ups distracting? Or do they clarify events that are happening as you use the site? Do links open up in new windows. simply because readers expect pages to load quickly. seem choppy or slow? • Controls: Do site navigation controls behave predictably? If there are any movements or pop-ups involved. do items appear one place on the screen. text to be readable. • Text: Is the text readable. But where they reveal their weaknesses is often in performance: pages and/or images that take a long time to load. or skipping any media elements? Does the presence of media elements make other actions. or slow-moving animations that seem to stop time itself and make the whole site feel like it’s made of molasses. navigation and other controls that behave unpredictably. and underline all at once? Are there typos or plain old bad writing that slow down your reading? Do contextual links take you to misleading places? • Photographs: Are photographs sized appropriately? Are they worth the download time? Does the site have physically small photographs that seem to take forever to load? Do the photographs have an appropriate amount of detail and clarity for the subject matter that they convey? • Video and Media: Do video and media elements stream? Or must you wait for the whole file to download before it begins to play? Do Flash movies contain some sort of preloader to indicate download activity while you wait for the movie? Are there any media elements.20 HOW TO DESIGN AND WRITE WEB PAGES TODAY Reading for Performance Some sites are absolutely striking to gaze at on the screen. High performance rarely reveals itself the way poor performance does.

For a more nuanced way of looking at a site with certain features disabled. image display. and even disable the page’s CSS. With CSS off. you can choose to disable any JavaScript on a site. If JavaScript is disabled and content disappears. one that would be useful to someone without the ability to view the site’s images? • Video and Media: Is there any alternate content offered for video and other media. “Breaking” a page in those ways gives you more than a view similar to users without JavaScript.2).4). It also gives you hints as to how a page has been made: if you turn off CSS. it is instructive to view sites in the Lynx browser or a Lynx emulator. Viewing a site as text only will give you a sense of what will be read aloud to lowvision readers. it means the page’s author used outdated. graphical browsers like Firefox. the site’s author probably uses JavaScript to generate content rather than placing the content directly in the HTML where it belongs.READING THE WEB 21 As you move from one page to another in the same site.” or does the design appear to be almost static. when they visit a site. and the page’s design barely changes. install the Web Developer Add-on for Firefox. Safari.3 and 2. with only the content changing? Reading by Breaking In addition to looking at sites in modern. particularly when the site is viewed . and in what order. • Text: Do the site’s headings and lists still appear to be headings and lists in default styling in Lynx or with CSS disabled? Are all contextual links still clickable and usable in the absence of JavaScript? Does the text refer to any missing photographic or media content in a way that makes the site confusing or unusable? • Photographs: Does alternate text appear for missing photographs? Is the text a meaningful alternative.1 and 2. and Opera. for example. or CSS. HTML-based methods for designing the pages (see Figures 2. With it. Lynx will also reveal what some mobile phone browsers may render. does it take a long time for the page to be “redrawn. which provide text-only views of a site. there should be no design other than default browser styles (see Figures 2. disable the display of images.

2 has CSS disabled. Figure 2. Because the design used outdated HTML properties. An old course Web site that I created with HTML-based design.Figure 2.1. it is virtually identical when CSS is disabled. but with CSS disabled.2. Figure 2.1. The same design as Figure 2. 22 . but the design is basically the same.

All that is left is the default browser styling—evidence of a modern.4. about a year after the one in Figures 2. CSS-based design.3 A course Web site that I created with CSS-based design.3. Figure 2.Figure 2. leaving no traces of the design. 23 . but with CSS disabled.2. The same design as Figure 2. Figure 2.4 has CSS disabled.1 and 2.

Wikipedia. plus some of the gallery sites suggested at the end of this book—will help you to develop a sense of the range of approaches to building Web sites. Reading a variety of sites for design and performance will also help you get inspired to start working on your own design. paragraphs. and lists clear? Or does text run together or seem to be spaced in strange ways? When disabling CSS.” http://en.wikipedia. The WebKit Open Source Project.24 HOW TO DESIGN AND WRITE WEB PAGES TODAY in Lynx? Does disabling JavaScript cause Flash movies to no longer display/load? Are there links to download the media for viewing/hearing outside of the browser? • Controls: If JavaScript is disabled.mozilla. “Gecko. do you see alternate text for buttons or other controls? • Layout and Design: Even in Lynx. “List of Web Browsers. is a page still useful in terms of the order the content appears in? Is the page useful/ navigable in mobile . create its design. and so on? Are image galleries still browseable? If images are List_of_web_browsers 2. Mozilla Developer Center. But content is still the most important aspect of a site. is it still possible to navigate the site? Do any page functions cease to operate in terms of printing.” https://developer. or ensure its performance. are headings. But reading a variety of Web sites—the ones you use everyday. or when using the “Small-Screen Rendering” in the Web Developer Add-on (found under the Miscellaneous menu)? NEXT STEPS There is no one best way to write a site’s content. we will look at how you can begin gathering and creating content for your Web site while you begin to learn the Web writing and design technologies covered in “Strategies for gecko 3. In the next chapter. http://webkit.” NOTES 1. sharing.

That is why all media elements—image.”2 Written content can also be read aloud or presented as Braille. that will guide the dimensions for sizing your images. site designs emerge more organically from their real content. and so on. audio. in formats that are Web friendly. Specific aspects of content creation and revision will be explored in greater detail throughout the rest of the book. but rather searches on “captions. and video—should have text equivalents. . search engines index and allow people to search the writing of your page. Designs. and therefore made accessible to readers requiring assistive technologies. and preparing the written. descriptions. creating. such as Lorem ipsum text. This chapter is an overview to preparing content for the Web. audio. in turn. and other contextual information. will shape how your content is prepared: if you have a content area that is a certain number of pixels wide. Image searches aren’t image searches at all. Even if you are a photographer or a visual artist. WRITTEN CONTENT The written content of your site is crucial to your site being found and accessible.CHAP TE R 3 Creating Web Content The content for your site is essential to have on hand when designing Web pages. photographic. and video content for your Web site immediately.1 stock photographs. But the ideas here will help you to start gathering. Although you can work with dummy content.

free .gimp.) .fr/avidemux/). (http://audacity. rich description. surprisingly feature-rich and customizable graphics package. That approach to writing pays big dividends on the Web: it helps your ranking in Web searches on key terms. Posting to Twitter is a great way to learn to write more directly: How expressive can you be in 140 characters or less? In addition to a direct style. such as Windows Movie Maker or Apple’s iMovie. if you don’t have your own computer.) A Google search for these and other open-source media applications will also point you to portable versions that can be run on a USB drive. written content should be rich with keywords that you think your intended audience might plug in to search engines. Writing teachers always teach students to write with thick. Web audiences typically expect a Web site’s written content to be direct and to the point.sourceforge. UTF-8. It is a solid. there is nothing wrong with composing your text (but not your XHTML or CSS) in a word processor. even thousands. I personally prefer Audacity to all but professional-grade audio products. While it doesn’t have a lot of effects or bells and whistles. and video can cost hundreds. see Chapter 9. AND VIDEO Software for editing photos. Mac. (Your computer may also come with video editing software. and Linux: • Image editing with GIMP: The unfortunately named GIMP stands for GNU Image Manipulation Program. It requires a plugin to output audio to MP3. of dollars. and work on Windows.26 HOW TO DESIGN AND WRITE WEB PAGES TODAY OPEN-SOURCE SOFTWARE FOR IMAGES. in your XHTML. (http://fi xounet. straightforward video • Video editing with Avidemux: A simple. while also helping you to better communicate with your readers. All of the software listed here rival or best commercial-grade software. (http://www. Although I prefer to compose most Web content directly in my text editor. audio. The good news is that there are many good free and opensource alternatives to expensive software. with plenty of headings and lists to make the content • Audio editing with Audacity: A fully featured audio editor. (Just be sure that you use the Unicode character set. that can be a plus if you’re just learning to cut and edit video. but otherwise has everything necessary for preparing audio for the Web. AUDIO.

CREATING WEB CONTENT 27 Keep in mind the following if you decide to write in your word processor: • Do not waste time doing a lot of formatting in the word processor.) Regardless of where you write. • Separate headings and list items with extra lines of empty space by using the Enter key. • Do not post word processor documents on your site. In most cases. you might be tempted to post and link directly to a word processor document. as the bullet itself often gets translated to an asterisk (*) when it’s pasted into a text-only environment. If you are creating a portfolio or thinking of posting forms for a small business Web site. Mac users can create PDFs using the built-in features of the OS X operating system. but that markup can be a real pain to edit later. Windows users need either the full Adobe Acrobat software. prefer direct sentences and paragraphs and make good use of headings and lists. However. You’ll be pasting your text directly into XHTML. so any formatting is going to be lost anyway. Some WYSIWYGs try to be helpful by retaining markup to the text copied from word processor documents. use it. If the visual formatting in the word processor helps you write. • Do not import images into your word processor documents. it is better to publish word processor documents in Portable Document Format (PDF). which has no visual properties of its own. or an open-source alternative like PDFCreator. paragraphs. and then post the PDF to your Web site. But be careful of copying bulleted lists from word processors.3 (See Chapter 6 for more information about accessible Web file formats. • Paste any word processor text into the “code view. like a Web editor. though. Images must be treated in a particular way for the Web (see Chapter 18). Lines of white space will be useful when you go to add your XHTML markup later. An empty line of space between headings. and lists is more than enough formatting. you might make a note of it in your word processor file for future reference.” if you are using a WYSIWYG Web editor. if you know of an image you want to accompany your text. Headings and lists help .

• A good quality microphone. digital zoom is not terribly useful). The quality that even cheap digital cameras provide is often more than enough for Web purposes. and illustrations. some of which plug directly into your computer with an onboard USB connection. Here is a list of essential equipment that you should consider purchasing. Computers are very good at capturing audio that sounds great. Good scanners are available for around $100. But in a pinch. . • A digital video camera. Image quality is a matter of the ESSENTIAL EQUIPMENT Capturing images and perhaps audio and video is key to developing original media content for your Web site. Stores that cater to musicians usually have a better selection of microphones available than electronics retailers. CONTENT IMAGES Content images. including photographs. There are also inexpensive video cameras available. provided you have a quality microphone. look into purchasing a condenser microphone that comes with its own power source. You may even discover that your school or public library has some of this equipment available for your use: • A digital camera. in bytes. usually an onboard battery (just remember to power it off when you’re done recording). or help them find the specific content returned by a Google search. scans. For recording the human voice. a low-quality scanner is more than enough for scanning in artwork and printed matter. especially if they aren’t bundled with a printer/fax machine. images must be prepared for the Web in particular ways. even a cell phone camera or a Web cam can get you started. of an image file and its quality. try to find a scanner at your school or library. Like all media content. Look for cameras that have a high optical zoom (3× or above. a rechargeable battery. Preparing images for the Web is a compromise between the size. and removable memory cards.28 HOW TO DESIGN AND WRITE WEB PAGES TODAY readers navigate a page quickly to get a sense of its content. can help a Web site’s content spring to life. If you only have a few things to scan. For Web purposes. Many digital still cameras come with some sort of limited video capability. • A scanner.

and resizing (sometimes called resampling). in case you ever need to re-edit them. But Web images display independently of any DPI or PPI setting: 72dpi or 96dpi are both common settings for Web images. and other visual properties of images. What matters in the screen display of Web images is actual pixel dimensions: an 800-pixel-wide by 600-pixel-tall image will display in a Web browser as 800 by 600 regardless of whether the file’s DPI is set to 300 or even 1. which helps you cut off the edges of a photograph. Here are some basic approaches to preparing your images for the Web. rectangular splotches at high compression rates.jpg) images. which should be saved in either JPEG or PNG format (see Chapter 18 for more about loading media onto your pages): • Learn to use the crop and resize functions in your image editor. High compression means lighter files and faster downloads. the two most important features you should learn are cropping. • Different photographs will look best at different compression rates. brightness. Most image editors have dots per inch (DPI) or pixels per inch (PPI) settings alongside their resize function. they must be resized.CREATING WEB CONTENT 29 dimensions (in pixels) of an image and in the case of JPEG (. most image editors offer some type of slider that varies the compression of JPEG images. Most image editors have filters for all sorts of visual effects. which removes some data from an image to reduce its file size. but the setting only has an effect when the image is printed. But keep all of the original image files. compressed. • Images for the Web display according to their actual pixel dimensions. will get ugly. and otherwise edited first. and all of them have controls for adjusting the contrast. Images . which has a large area of roughly the same color. Always keep copies of your original photographs and scans. When you go to save your image. But to start. which reduces the dimensions of an image to Web-appropriate sizes. And image quality varies under the same compression rate: a picture of the sky. a matter of image compression. Photographs and images that come off of a digital camera or scanner are almost never Web ready. so coordinate those with your layout. but at the expense of image quality.

Get to know your image editor and the way it compresses different images. posting video on YouTube is an ideal solution (Chapter 18 lists other. Be sure also to record and prepare your MP3 audio at a 44. however. 64 kilobits per second (kbs) will provide adequate sound quality. the larger the sound file. it is essential that sound syncs with motion. the videos are stored and transferred from YouTube’s servers. and there are no savings in file size with MP3s when you lower the sample rate. http://sustainablewebdesign. while MP3 is a proprietary file although 128 kbs often sounds noticeably better.php/mp3secrets/. see http://www. similar sites for video hosting).com/book/. for voice applications. Audio Content Audio content destined for the Web should be prepared in MP3 format. like black letters on a white street sign. will get little “sparklies” and other compression artifacts around the high-contrast area. the higher the bit rate. Video Content Video content is the most complicated material to prepare for the Web. Preparing MP3 audio files is a complex matter. MEDIA CONTENT: AUDIO AND VIDEO The focus on this book is textual content and images. See the book’s companion Web site for recommended reading about audio and video. but here are some basic settings that you should use: output your files as 8-bit stereo sound. For most purposes. simply because that sample rate is supported by Flash and other players.1 kHz sample rate.blogarithms. First. You can find examples of image treatment at the book’s companion Web site. Perhaps the most important setting on MP3 files is their bit rate. it is also widely used in all sorts of desktop and portable digital audio players. However. In addition to shooting and editing your video.30 HOW TO DESIGN AND WRITE WEB PAGES TODAY with high contrast details. here are some rough guidelines for working with audio and video. not . For a technical but all-in-one discussion of this.

NOTES 1.” http://www.” tube. 2. maintaining a YouTube account is yet another way to establish your presence on the 4. and why standards for Web writing and design are so important. “Getting Started: About Google Images. or the amount of data your server can serve at any one time. PDFCreator. http://sourceforge. NEXT STEPS The work of writing and designing your pages depends on the real content of your site. http://www. though be sure to consult their documentation on making and posting videos. or as a future improvement. Now that you have some idea of how to prepare for the Web the content you should be gathering and writing. YouTube also does a generally outstanding job of behind-thescenes compression and resizing of video. it’s time to look at what a Web page is.) For testing purposes. 3. Lorem ipsum. “Making and Optimizing Your Videos.CREATING WEB CONTENT 31 yours.lipsum. (See Chapter 18’s discussion of JavaScript and the SWFObject 2. which addresses this . Because YouTube allows you to set up a profile that can include a link to your Web site. you may be able to attract YouTube users to your site. The only problem with YouTube is that the code it provides for embedding videos on your Web site does not adhere to Web standards. Google Web Search Help. on your own server. the history of how pages have been made. You can swap it out with the JavaScript-based solution before your site goes there is nothing wrong with cutting and pasting the YouTube code.4 Finally. This keeps you from expending large amounts of bandwidth.


of course. not only do Web standards not stifle creativity. watch trash TV or high-brow documentaries. Its aim is to make the use of Web languages and protocols uniform across different user agents (UAs). an international organization of people associated with technology companies and universities. is there any room for creativity? The answer. Think for a moment about some of the standards that people have come to rely on. they actually encourage it. and even some standards for .” In fact. We also have standardized weights and measures. traffic signals and signage. a fancy phrase for Web browsers and other devices that access the Web. just as are the threads for light bulb fixtures. and play blues or heavy metal. This chapter covers the guiding principles behind well-built pages to deliver your content according to Web standards. a television set. Web standards are guidelines issued by the World Wide Web Consortium (W3C). Now. and the USB connectors on computers. That one standard frees you to make mojitos or milkshakes. If everyone is to follow Web standards. In Chapter 3 we covered some of the basics of creating and gathering content for your site. the idea of “standards” may seem contradictory to an activity as creative as Web design. standards for television and radio signals. The design of electrical sockets is standardized. You can buy any kind of electronic device you want—a blender.CHAP TE R 4 Standards-Based Web Pages So far we’ve looked at reasons for writing on the Web and a few approaches to reading the Web with a designer/writer mindset. a guitar amplifier—and not have to worry that its plug won’t work in the socket where you live. is “Yes.

Standard this sentence is not (unless Yoda you are). structural you’d probably be a hermit who’d never leave the solitary. use server-side includes (see Chapter 21). and never allow the Flash chili pepper to be eaten by itself (see Chapter 18). . Instead of frames.34 HOW TO DESIGN AND WRITE WEB PAGES TODAY WHAT YOU WON’T LEARN IN THIS BOOK Here is a brief list of Web design practices that you won’t learn in this book. But always give people the option to omit it. don’t walk. invisible GIF spacers are the chewing gum and chicken wire of shoddy Web design. Treat Flash like a chef treats an extremely hot chili pepper: used in moderation in the right dishes for the right people. spoken and written language: This is a standard sentence. Instead of HTML tables. If you had to install a different kind of electrical outlet for every device you own. it adds layers of excitement and complexity. visit http://www. away from anyone who suggests any of the following: • HTML tables to design pages. use CSS layout techniques (see Chapter 17). learn different traffic-signal patterns from city to city. For a crash course in these and other problem practices on the Web. These are practices as outdated as the belief that the sun revolves around Earth. • Invisible GIF image spacers. . • “Save As HTML . • Adobe Flash for site design. candlelit comforts of home. • Frames and framesets. Often used in tandem with HTML tables. . HTML tables are good for one thing: marking up tabular data. Tables for layout present significant accessibility issues and make a page harder to repurpose or redesign later. or learn to speak a different language for each individual human in your neighborhood. Just because the option is there doesn’t mean it should be used. but they are as appropriate for building Web pages as chainsaws are for fixing eyeglasses. Word processors are great for their intended purpose of word processing. Another accessibility nightmare. run. frames are artifacts from an era before Web servers could easily include content shared over multiple pages. Used for their intended. Instead of image spacers.webpagesthatsuck. use CSS layout techniques (see Chapter 17).” in a word processor.

both the software and the document it produces is closed source. Web pages are made up of content and sets of instructions for presenting content.STANDARDS-BASED WEB PAGES 35 WEB PAGES ARE SETS OF INSTRUCTIONS Like many digital formats. By contrast. photo editors. we send emails or instant messages. the blank box or page you type in lends itself to the impression that what you write is all that there is to your document. However. Web pages in HTML and CSS are all open source: go to your favorite Web browser and chose View > Source. or post on Facebook and Twitter. In many cases. writers and designers don’t often have to think about the instructions that present digital content. or that when you hit the bold button in your word processor. and never give the underlying code a second thought. Or at least that’s what we do until something goes wrong. We write our documents. Web Design: A Pessimist’s View Everyone has a story about a digital file that gets messed up: a word processor document that mysteriously puts a bullet point next to what ought to be a paragraph. those errors and thousands like them often originate in the instructions that get passed to a program to read the contents of a digital file. email programs. But below the deceptively simple surface of a blank email or document is an entirely different kind of writing: computer language. Software dubbed as “What You See Is What You Get” reinforces this impression. the text displays as bold and is saved and printed that way. Although it is tempting and sometimes the most logical thing to assume that the software has simply gone crazy. and many other kinds of software and the files the software generates. An email message whose punctuation appears as question marks. Most of us rarely think about that language beneath the surface. and hand them off. print them out. When you write a word processor document or even an email. there is no hope for a human who wants to fix the file’s instructions herself. and you will . meaning that its code cannot be viewed or edited directly by a human being. In the case of most word processors. That language does things like ensure that the email address in the To: box is where the email is ultimately sent.

1). but take heart: Web pages no longer have to be this complicated. It’s usually just horrifying: miles and miles of unintelligible code appear on even the simplest-looking Web sites. . digital writers may have no choice other than to start their projects over from the beginning.1. too—although your changes will only appear if the page is yours and you have access to the server where it is stored. not a human being. Don’t stare at it too long. But in many such cases. Computers are tireless. The trouble is.36 HOW TO DESIGN AND WRITE WEB PAGES TODAY see the instructions that cause any given page to display as it does. when computers misbehave or do something that someone does not intend (like adding mysterious bullet points to a document). Figure 4. the code that makes up a site has been created by a computer. and they will continue to carry out those instructions without complaint or sign of fatigue. choosing View > Source on many Web pages is not a comforting. Open-source. Don’t Send a Machine to Do a Human’s Work Unfortunately. but you can edit it. And not only can you view open source. feel-good experience (see Figure 4. standards-based Web design helps you avoid ever having to start over like that. Source from an old Web page of the author’s. They are not unlike the broom in The Sorcerer’s Apprentice: give computers a set of instructions.

Without HTTP. At the same time. and other key standards.” that wrote the W3C “recommendations” for XHTML. The idea behind Web standards is that no one company or browser manufacturer controls XHTML. all browser manufacturers should support those standards in their browsers (and all modern browsers do. particularly Cascading Style Sheets (CSS). and designers can be relatively certain that their pages will display and function acceptably in any browser. it would be impossible to reliably transmit a Web page from a server to a Web browser. . The trouble is that what the WaSP calls “standards” are actually issued under the term “recommendations” by the W3C. pressured Netscape and Microsoft to adopt the W3C’s specifications for the Web’s many languages and protocols in the design of their browsers. CSS. The rest originated with limited or nonexistent support for Web standards. Note that “acceptably” is very different from “exactly the same.” which will be an important distinction when you begin to work with CSS. NOT SOFTWARE OR BROWSERS Many of the bad habits that make for poor Web design (see the sidebar “What You Won’t Learn in This Book”) originated with Web designers designing with bad software or to a specific browser.1 WaSP. Certain standards have been well supported since the beginning of the Web. That means a Web page can be authored in a browserneutral way. Representatives from both Netscape and Microsoft served on the committees.STANDARDS-BASED WEB PAGES 37 DESIGNING TO STANDARDS. to varying degrees). the term “recommendation” had limited influence.” a term promoted by a grassroots movement formed in 1998 called the Web Standards Project (WaSP). or “working groups. a group of influential Web designers who had had enough of browser-based design practices.3 Yet both companies often ignored the standard specifications that they had helped to write. But these bad habits continue because some Web designers (and their teachers) are unaware of advances in how the Web can now be written and designed. These advances in Web design fall under the umbrella term of “Web standards. or any other Web language. including the Hypertext Transfer Protocol (HTTP) behind the http:// string that appears with Web addresses. In the heated battle between Microsoft and Netscape in the 1990s known as the “browser wars” (see Berners-Lee for a history2). CSS.

(Even now. though some browsers are more standards compliant than others. if something strange or unexpected happens when viewing your Web pages in a browser.w3. which involves using a validator to check the code of your Web pages against the rules for the languages you have used. including XHTML and CSS. among other standards. . the CSS Validation Service gives you multiple options for checking your CSS. no browser follows all W3C standards to the letter. With the stable releases of Internet Explorer 6 (IE6. There are two validators that you should use throughout your project’s development: • The W3C Markup Validation Service (http://validator. As with the Markup Validation Service.) But by 2002.w3. then validate the CSS. WaSP changed all of that through years of tireless activism.38 HOW TO DESIGN AND WRITE WEB PAGES TODAY VALIDATE THIS! One interesting benefit to designing your pages according to Web standards is that there is an external. You will learn more about working with the validators in the “Strategies for Success” portion of this book. This method is known as validation. If the XHTML is valid. in 2002). offered by the W3C. Should have. • The W3C CSS Validation Service (http://jigsaw. or even copying and pasting your HTML directly into the validator. That is not to say that IE6 and NN6 implemented Web standards precisely. This service. allows you to validate your HTML either by inputting a URL. both leading browsers provided viable support for W3C standards. some Web designers continued to rely on oldfashioned practices (see the sidebar “What You Won’t Learn in This Book” for examples). both browsers followed the W3C’s specifications for HTML and CSS closely enough that browser targeting and browser-specific pages should have become a thing of the past. in 2001) and Netscape Navigator 6 (NN6. Unfortunately. uploading an HTML the first thing you should do is validate your XHTML (even if you suspect a problem with your CSS). despite improvements in Web browsers’ standards nonvisual method of assessing just how compliant your Web pages are with the standards. Web designers could begin to design and write Web pages to the “recommendations” of the W3C. including XHTML and CSS. As you are writing and designing.

A standards-based Web page. both with and without JavaScript. Web standards guru Jeffrey Zeldman describes these components as structure (XHTML). people confuse this point often: “Java” is not short for JavaScript.. providing a short preview of the page the navigation hyperlink links to) The JavaScript component that Zeldman labels “behavior” I prefer to call “performance. which tend to fall outside of what would normally be considered “behavior.” So the three-pronged approach to Web design described in subsequent chapters emphasizes structure. you will learn exactly what the rules of XHTML are. as the standard is issued by ECMA (formerly the European Computer Manufacturers Association. presentation (CSS).5 XML is one of the more widely . presentation. the W3C issued the first recommendation for Extensible Markup Language (XML). But for now. is an essential part of solid Web design.” I do this because how a Web page performs. it is only necessary that you understand that standards-based Web design consists of three primary components. and performance.4 JavaScript is formally known as ECMAScript. Structure: The XML Recommendation and the Birth of XHTML In February 1998. but an entirely different language). And page performance includes factors such as user viewing preferences and computer speeds.g. and how CSS works to add striking designs to structured content. but which now goes only by the acronym ECMA). is made up of three separate parts: • Structured content in pure XHTML (e..g..g.STANDARDS-BASED WEB PAGES 39 WEB STANDARDS: A THREE-PART APPROACH Later in the book. then. and behavior (JavaScript). a hyperlink in a site’s navigation) • Visual (and even audible) design in CSS (e. But JavaScript is the generic name that Web designers use (also. the styling of the hyperlink in the site’s navigation) • Advanced functionality and enhancement in JavaScript (e.

This book promotes the use of XHTML (specifically.6 XHTML is the HTML language rewritten according to XML’s rules.” http://wiki. called HTML5. the language from which the original HTML was created.” http://www. What is interesting about HTML5 is that its specification originated in 2004 outside of the W3C by a group that dubbed itself the Web Hypertext Application Technology Working Group (or WHATWG). “FAQ. “HTML5: A Vocabulary and Associated APIs for HTML and XHTML.0 Strict) and only refers to “HTML” in historical senses (although see the sidebar “HTML5”).” in XML-speak) that enable people and computer applications to share structured content with one another. will prepare you to pick up HTML5 TR/html5/ **WHATWG. Old practices in writing HTML resulted in messes like: <FONT face="Arial. as this book advocates.* It is intended to be the successor to HTML 4. There are also HTML5 resources on this book’s companion site. Although it is possible to write pages in HTML5. http://sustain ablewebdesign.whatwg. HTML and XHTML are the same language.0. free from any visual presentation. In many ways. *W3C. In addition to drawing upon XML’s simplicity and consistency. XHTML also reflects the spirit of XML. which is to provide structured supported standard Web languages in existence.** Learning XHTML 1.w3. XHTML 1. Helvetica. sans-serif" color=#cc6600 size=7> The World Wide Web </FONT> . XML is actually a standard set of rules for creating other languages (called “applications.01.0. But XML’s rules are much simpler and more consistent than SGML’s. the specification is still largely in The most important XML application for Web purposes is XHTML 1. But despite being called a language. if you decide to use it rather than XHTML 1.40 HOW TO DESIGN AND WRITE WEB PAGES TODAY HTML5 There is a new specification for HTML in development.0. which appeared as a W3C recommendation in January 2000.

rewritten according to the rules of XHTML: <h1> The World Wide Web </h1> XHTML is used to do nothing more than provide meaningful structure to all of a page’s text content and any media elements such as images. Helvetica. and size from the old “tag soup” HTML. which helps Web browsers build your pages in the browser window very quickly.” as seen above. all of which use the exact same XHTML. Have a look. And CSS can change more than just the visual design of a page on screen. Presentation: Widespread Browser Support for CSS Visual design used to be handled in nonstandard HTML “tag soup. Web designers now write with the CSS design language. font-family: Arial. The most famous demonstration of this is the CSS Zen Garden. . CSS also allows you to control the look of your entire site from one CSS file. CSS can be used for assistive technologies. Changes to that file—for example. To redesign a site involves nothing more than changing the CSS file. removing needless items like site navigation or making visible detailed copyright information. font-size: x-large. audio.STANDARDS-BASED WEB PAGES 41 Here it is. too. This also makes sites load faster: the CSS instructions only have to be downloaded once. } One thing that makes CSS a better alternative to HTML-based design is that CSS can completely change the look of a site without a designer having to rewrite the site’s XHTML. The “Strategies for Success” portion of this book offers guidance in building structured content in XHTML. To add the fonts. changing headings to appear in purple rather than red—are instantly reflected across your entire site.7 The Zen Garden is a showcase of CSS-based designs. often in a separate file: h1 { color: #C60. sans-serif. and video. color. you’ll be amazed. CSS can also be used to specify how a page looks when printed.

(Berkeley. design. “Extensible Markup Language (XML) 1. 7. 2007). 5. 103–21. The Web Standards Project.” http://www. For more about JavaScript and the DOM. Designing with Web Standards. and publishing environment that supports writing and designing with Web standards. JavaScript works primarily with the Document Object Model (DOM) to change what happens when a link is clicked. 91–93. Performance: JavaScript and the DOM In standards-based Web design.” http://www .” http://www. to reveal hidden parts of a navigation bar.w3.0 The Extensible HyperText Markup Language (Second Edition): A Reformulation of HTML 4 in XML 1. That is why CSS can be said to handle “presentation. or even to change a page design for extremely widescreen views of 2. “XHTML™ 1.csszengar den.” a term that this book will use. http://webstandards. JavaScript coupled with the DOM is often called “DOM Scripting. see Chapter 19.0. 3.42 HOW TO DESIGN AND WRITE WEB PAGES TODAY Special CSS properties exist for changing how a Web page sounds when it is read aloud. the next chapter prepares you to write and design by helping you set up a custom writing. For more on CSS. TR/1998/REC-xml-19980210 6.” Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web (New York: .0. CA: New Riders.” which includes the more specific term “visual design. NOTES 1. CSS Zen Garden. see Chapter 10. 53–57. Jeffrey Zeldman. CSS is limited primarily to visual design for screen and print. “Competition and Consensus. W3C. NEXT STEPS Now that you have some sense of where Web standards came from and why they are necessary for Web designers to know. W3C. Tim Berners-Lee with Mark Fischetti. “The Beauty in CSS Design.” However. in this book. 2nd ed. Weaving the Web. 2000).

there is also a list of editors that I recommend at the end of this section. simply have no for-pay counterparts. Some of the best Web development tools—such as the Firefox Web Developer Add-on. SELECTING A WEB-FRIENDLY TEXT EDITOR To write text content and XHTML. TextEdit. JavaScript. as with the Web Developer Add-on. then. CSS. . almost everything else you need to start writing and designing Web pages can be downloaded from the Internet for free. Although either of these can be used in a pinch. too. Or. you will want to set up an entire environment for building your site.CHAP TE R 5 Preparing to Write and Design Designing and writing Web pages isn’t a job for one piece of software.3 all of which you can run on a USB drive—are available for free and are better than their forpay counterparts. mostly because WordPad and TextEdit lack syntax highlighting.2 and the XAMPP Web server. they are not well suited to writing XHTML and CSS. Here.1 the Notepad++ editor. just as Mac OS X comes with its own editor. but never use this to edit files for the Web). But don’t let the free price tag fool you into thinking that “free” means lower quality than expensive software. Although you will have to purchase a domain name and Web hosting. Windows comes with a text editor called WordPad (it has Notepad. and later PHP requires nothing more than a text editor. are features to look for when choosing a Web-friendly text editor. meaning that they display all text in black. instead.

one for each operating system. There are numerous Web sites that list portable applications that you can download.) • Syntax ( lets you download an entire suite of applications. using different colors. text editors. PortableApps. audio editors. or via the Applications page. portableapps/). or even if you have no computer of your own but rely on school or public libraries for computer access. portable applications enable you to use the same applications wherever you go. though). but it suggests XHTML tags and CSS properties as you type or on a particular key command. the best collection of portable applications that I have found is housed at FreeSMUG. but these two sites offer extensive lists: • For Windows. download individual applications. • Function reference/completion is a feature not available in all Web (http://portableapps. or functionality that recognizes XHTML tags and other language features. and so on. . which displays a line number next to each line in your XHTML and CSS (note that the numbers are not part of your XHTML and CSS files. (Note that if you switch between Mac and Windows computers. • For Mac. you might have to keep two copies of each application. Note. This feature is very useful for correcting errors discovered in XHTML and CSS validators. Portable applications are software programs that you can run on a USB drive (sometimes called a “thumb” or “jump” drive) or even an iPod. A 2GB or larger USB drive provides sufficient space to install your own set of applications and take them wherever you go. and much easier to find errors in your code. Different editors highlight XHTML and CSS in different lists portable versions of just about every kind of software you need to do Web development: image editors.44 HOW TO DESIGN AND WRITE WEB PAGES TODAY PORTABLE APPLICATIONS If you work with different computers at home and at work. • Line numbering. but the coloring does: it makes XHTML and CSS easier to read. which report errors by the line they appear on. The colors do not matter. and colors them according to their purpose. however.

5 A solid stand-alone FTP/SFTP program for Mac is CyberDuck. It has a built-in FTP client. and Linux) hide file . With those features in mind. Many operating systems (Windows. • Mac OS X: TextWrangler is a great free editor. try WinSCP. 10.PREPARING TO WRITE AND DESIGN 45 that some Web editors with this feature may suggest nonstandard tags. of course. here are the free and open-source Web editors and FTP/SFTP clients I recommend to my students: • Windows: Notepad++ makes writing XHTML and CSS very simple through syntax highlighting and other features. and 19). This is critical.4 If you plan to use the lunch hour at work to do Web development and/or if you want to use the program on a public computer in a library or a cyber cafe. Notepad++ can be run from your USB drive (see the “Portable Applications” sidebar). so always have a Web-available language reference with you as you work (see Chapters 9. NAMING AND ORGANIZING FILES AND FOLDERS File naming and organization is essential to keep yourself sane while developing your Web site. but there are plenty of stand-alone FTP/SFTP clients available. Just keep in mind the features listed above if you choose to use a different one. and to make sure that you have meaningful URLs on your site that are easy to share. there are hundreds more that a Google search for Web text editor and SFTP client will turn up. but if your Web host requires SFTP.6 You are not limited to these. Follow these rules to make your files and folders Web ready: • Show file extensions in your operating system. • A built-in File Transfer Protocol (FTP) or Secure File Transfer Protocol (SFTP) client makes it easier to move files from your computer or USB drive to your hosted Web space. Mac. Not all editors have an FTP client built in. also with a built-in FTP client.

meaning that MyFile.46 HOW TO DESIGN AND WRITE WEB PAGES TODAY extensions by default. • Never use spaces in file and folder names. when in reality it’s been saved as myfile. Instead of spaces. and the hyphen.htm.” “current. photo02. numbers.html file extension.. Do not use any other symbols or punctuation in your file names. I recommend using .htm is preferable to my-completeresume.htm will one day not be new. Serialized file or folder names should begin with one leading zero (e. you’ll see only myfile.g.htm is different from myfile. • Never use “new. resume. etc. &. But spaces cause trouble on the Web.htm. as are hyphens. as almost all of them (?. htm on a computer translates to research%20inter ests.txt! Do a Google search for “show file extensions” and the name of your operating system to learn how to reveal file extensions on your computer.htm or . new-photos. =.jpg) if you expect less than 1. or two leading zeros (e. you and your audience never have to guess the capitalization on your site’s URLs: there is none. photo01.htm in a Web browser. +. but not both. Numbers are safe.jpg.htm on XHTML .000 items. All operating systems allow spaces in file and folder names.g.htm. Consistency is key to staying sane. • Use numbers with one or more leading zeros. • Use .. photo001.) have special meaning to Web servers. My resume is at myname dot com slash resume dot htm.htm • Make file and folder names as short. and memorable as possible. That helps organize the listing of serialized files in FTP clients and other file and folder views on your computer. By always using lowercase letters. You might also think you’re saving a file as myfile.htm or even my-resume.” or other references to time or versions in file names. use hyphens: research-interests.htm listed in your folder.” “old. direct. Most Web servers are case-sensitive. • Use only lowercase letters. You want to be able to tell someone.jpg) if you expect less than 100 items. A file saved as research interests.htm. So rather than seeing myfile.

Be sure to follow those rules for your XHTML and CSS files and your image. Mac. specifically: • audio: A folder for storing any audio content for your site. The Rapid Prototyping Kit (see Chapter 11) uses these folders: • css: A folder for storing all of your site’s . It doesn’t have more advanced . • gfx: A folder inside of css. By “graphics. always use . • media: A folder for storing all of the media content on your site. it is available to everyone. SELECTING A BASELINE DEVELOPMENT BROWSER The next most important piece of equipment in your custom Web design setup is a baseline development browser.” I mean images that are part of the design and referred to in the CSS.css. • swf: A folder for storing any published Flash movies that appear on your site.PREPARING TO WRITE AND DESIGN 47 ESSENTIAL FOLDERS Keeping organized is essential to managing the many components of a Web site. The media folder contains five different folders to help you keep your content organized. • video: A folder for storing any video content that appears on your site. audio. and Linux systems. Because Mozilla Firefox runs on Windows.js. • pdf: A folder for storing any PDF files that your site’s pages link to. too. files. and other media files. but if you opt to use . I recommend Mozilla Firefox. The folder is called img as a reminder to you that these are images used with the XHTML <img /> (image) tag (see Chapter 18). One shorthand summary: name files and folders as though you have no shift key or space bar. Again.html. Photographs and other content images are stored in the media folder (below).css files. JavaScript files should all end in . set your operating system to show file extensions. • img: A folder for storing any photographs and other content images. CSS files should all end in . which is for storing all of the graphics for your site. • js: A folder for storing all of the JavaScript files for your site.html.

And because Firefox is an open-source Web browser. are tailored specifically for Web development (see Figure 5. that Mac’s Safari has. limiting early development to one good browser is a wise choice.org7). but just right. Web development is a complex activity.48 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 5. Internet Explorer’s oddities are easily and sustainably fixed using conditional comments to load a few additional CSS styles (see Chapter 23). Rather. Pederick’s Web Developer Add-on lets you do things like edit CSS and see your changes instantly in the browser.1. Firefox is the Goldilocks choice: not too advanced. like Chris Pederick’s Web Developer Add-on. Note that using Firefox as a baseline development browser does not mean a return to designing for one specific browser. . but it is free of the odd bugs that Microsoft’s Internet Explorer is notorious for (see QuirksMode. Many of these add-ons. not too buggy. in terms of CSS and DOM Scripting.1). a large developer community has developed all kinds of add-ons for Firefox. particularly for CSS3. standards support. My experience has been that Safari will handle everything that Firefox will.

9 BUYING A DOMAIN NAME AND WEB HOSTING The last key component of a Web setup is your domain and Web hosting. you can look into certain browser-compatibility services. according to Net Applications’ Net Market Share statistics8). which provide a snapshot of how your page appears in IE browsers. you will want to have multiple browsers available to check your site in. is more like the house. Anyone can go to the hardware store and order a mat that reads “The Smiths. to test Internet Explorer. Windows computers are everywhere. Check with your local library or even your friends and family. but they are often confused. In a pinch. Once your site is almost ready for posting to the Web. such as IE NetRenderer. your site is located at a numeric address. there are a few free ones. so that is why it’s important to buy the “welcome mat”—the domain name—that you want to use to direct people to your “house”— the contents of your Web site.PREPARING TO WRITE AND DESIGN 49 SETTING UP MULTIPLE BROWSERS FOR TESTING Although Firefox’s popularity is growing (with about 24% market share compared to IE’s 60% share in 2010. However. or perhaps a URL created by the hosting company. short of running Windows on the Mac itself. • Your domain name is sort of like a welcome mat for a house. there are many other browsers in the world. With most hosts. It is the actual server space where your files are stored and perhaps where you run blogging software like WordPress. These are two very different things.) The one key problem for Web designers who use Macs is that there is no way.” But throwing it in front of a random door doesn’t get you the house! • Your Web hosting. then. though. (See the sidebar “A Web-Reading Toolkit” in Chapter 2. Neither a numeric address nor a hosting company’s URL is particularly memorable. While most services cost money. Someone is bound to have a Windows machine. .

When you own your own domain name and your own hosting. the host wants to keep your business. e. The URLs of free Web accounts tend to be something like http://example . limit yourself to posting a nice standardscompliant page linking to the site you host at your own domain. your identity should no longer be associated with the school or employer (they will probably delete your account and along with it. I will not recommend one particular site over another. the identity you’ve established in search engines). Thank the school or business for their generosity.50 HOW TO DESIGN AND WRITE WEB PAGES TODAY SCHOOL/BUSINESS WEB ACCOUNTS Many colleges and universities. • The URLs are ugly and are a pain to work with. When you purchase hosting. When that happens. Avoid these. JavaScript. This happened to me when I was in graduate school. making the URL even uglier. but buy your own domain and hosting. most do not make a database available to you. • Universities may change the URL structure for accounts at a moment’s notice. provide free Web accounts to students and employees. If you do anything with a free account. There are numerous domain name registration sites on the Web. http:// example. People graduate or change schools. changing schools or jobs will not impact your Web but do consider the following cautions when choosing a company to register your domain name: . • Free Web accounts rarely have advanced Web server features. and sometimes the tilde (~) gets encoded by other Web sites or email programs as %7E. and media files on free accounts (and sometimes. my university one day stopped supporting certain features that I’d been suggesting to colleagues and students. That makes using root-relative paths impossible (see Chapter 20). CSS. or disable certain features. and even some high schools and businesses. You can usually only store XHTML. and many do not even allow you to run PHP or other serverside scripts. Here’s why: • Your Web identity should be independent of your school or employer. and they certainly leave their jobs. so those types of unpleasant surprises are almost unheard of. all of whom had their sites break. only a few megabytes’ worth).

or . and that’s it. Most reputable hosting will be somewhere within that range. it invites abusive customers. anywhere from 1 to 10 gigabytes (GB) of storage is more than top-level domains (TLDs) that you buy—and do buy all three of those TLDs together. While . Keep those two transactions separate. but it invites abuse from people posting huge music or photo collections. • Buy your domain name from one company. 500GB of transfer a month is plenty for most sites—and find out in advance how much the company charges for overage fees beyond your allotted data transfer. which may slow down the same server your site is on.PREPARING TO WRITE AND DESIGN 51 • Never pay much more than $10 a year for each of the . • Never opt in to any promises of search engine optimization or other services that registration (or hosting) companies may offer. Here are some general things to know as you select a Web host: • Hosting generally runs between $5 and $20 a month. and your hosting from another. . Look through those sites: note how fast they load in particular. • Large or unlimited storage is not necessarily a good thing. There are also thousands of Web hosting companies to choose from. if you can afford it. A terabyte of storage might sound like a good thing. Generally. My suggestion is to avoid this. Beware of hosting that’s cheaper than $5 a month. Many Web hosting companies invite you to register your domain name with them or to transfer registration for a domain you purchased elsewhere. Most Web hosts showcase Web sites that are hosted on their servers. Unlimited storage might also be used to deflect customers’ attention from less attractive features of the hosting service. Register your domain. the old rule of “You get what you pay for” applies. buying your domain name from your Web host might make it difficult for you to move to other hosts in the future. and you will never have to worry about losing your domain name to a bad hosting • Unlimited transfer or traffic can also be a bad thing.

This feature lets you customize certain aspects of how your Web site and Web server function. Watch out for hosts that are still only offering PHP 4. if all of their featured sites load slowly. good hosts will offer PHP 4 and 5. • Email accounts (most hosts offer this). but most require you to ask for it. Shell access lets you access your server to run certain commands and is important to have for setting up certain blogging. but encourage you to use 5. .htaccess. So what features do you look for? Here are some baseline hosting features for the long-term growth of your site: • Linux or Unix-based servers. but FTP transmits your password in the clear (without encryption). look for hosting elsewhere.” and is often found with hosts that also grant SSH access. Hosts generally offer FTP access. Depending on your needs. SFTP stands for “Secure FTP. • SFTP access. you might also consider whether a host offers: • Log files and server statistics. Be sure you can have at least three databases. • PHP 5. wiki.1 database. which can be a security risk to your site. or content management system software. this information can be hard to determine for some hosts.52 HOW TO DESIGN AND WRITE WEB PAGES TODAY slow-loading pages on one or two of the sites may not necessarily be the host’s fault. • Secure Shell access (also known as SSH). A Google search for the hosting company’s name and “operating system” can often help you discover this information. Some hosts enable this by default. • The Apache Web server with support for per-directory configuration files using . • MySQL 5. so look hard. or what search terms they used to find it (see Chapter 24). These will be useful if you decide to run blogging or wiki software. these can help you see who’s linking to your site.

IE NetRenderer. baseline development browsers. • Hosting multiple domain 3. Chris Pederick.quirksmode. this will allow you to host your own Web site and perhaps NEXT STEPS Now that you have an idea of the basic tools and services required for Web writing and design. XAMPP. .html 4.mozilla. http://www. In the next few chapters. CyberDuck. which is essential for e-commerce. “Browser Market Share.” http:// 6. know that you’ll discover your own preferences as you write and design your pages. https://addons . http://winscp.PREPARING TO WRITE AND DESIGN 53 • Email lists (essential for business and organizational Web sites).org/en/xampp. we will look at accessibility.apachefriends. and even Web hosts will not harm your site (although you may have to relearn some things). Net Market 2. such as a community organization you belong to. Finding a setup that works for you and that you’re comfortable with is essential. Notepad++. http://www.hitslink. http://cyberduck. No one understands these things immediately. Web Developer Add-on for Firefox. Net 8. and sustainability—a trio of important concerns that everyone writing and designing for the Web needs to 5. http://notepad-plus. • Secure socket layer (SSL).sourceforge. At the same time.aspx?qprid=0&qptimeframe=Y 9. NOTES 1. give yourself time to learn all about the setup you choose. http://www. usability. The great thing about standardsbased Web design is that switching text editors. WinSCP. http://ipinfo.


usability. usable. unusable. at every step of the process. but can actually help you clarify your work to yourself as you write and design. Here is a brief overview of each of the three concerns: • Accessibility. . on ultra widescreen desktop computers and miniature cell phone screens. and/or unsustainable site is usually a recipe for rhetorical disaster. Rather than simple matters of assessment. with keyboards. All three issues are often treated as matters of assessment (is this site accessible? usable? sustainable?) and are therefore considered only after the completion of a site. and sustainability provide powerful guides to the choices you will have to make throughout the process of Web writing and design. While having an accessible. accessibility. and sustainability. and sustainable does not have to be a thankless chore. and sustainability in every choice that you make. ongoing challenges. Although accessibility is often discussed in terms of addressing only the needs of disabled people. use. accessibility is about equitable access for all. usable. And as we will see. However. having an inaccessible.PAR T II ISSUES AND CHALLENGES Accessibility. The writing and design advice given in this book urges you to consider access. Contemporary Web sites must work on fast and slow Internet connections. and sustainable site is no guarantee of rhetorical success. regardless of physical abilities or means of access. Those are the three overarching and interrelated issues that largely determine the rhetorical success of a Web site. making a site accessible. all three concerns present long-term. usability.

Sustainability is also about the access and use of a site as the site grows. Still. Sites must also be accessible to search engines. usability helps you earn the good will and attention of your audience. • Usability. Refer to them often as you work on the design of your site. but they like fun and pleasing things even more—Web sites included. But what if the site grows to 50 pages? Or 500? Each of those issues will be treated in the next three chapters. Usability is often associated with “usability testing.” where trained experts observe targeted users interacting with a Web site. as when site navigation has confusing or even misleading buttons. • Sustainability.” . Digital technologies change quickly and without much notice. Certain writing and design choices may be accessible and usable on a site of only five pages. A site that is accessible and usable today must continue to be so. If user expectations are not met.56 HOW TO DESIGN AND WRITE WEB PAGES TODAY touchpads/touchscreens. and mice. But usability is not function alone: people like things that function well. But usability can also inform your approach to designing for site performance and user expectations. or your content will never be found or indexed for others to find in a Web search. A site that takes forever to load or otherwise performs poorly makes its use difficult or impossible. there are certain design practices and choices that will better future-proof your Web site. users may become frustrated with the site and leave. and as you work through some of the technical matters in the chapters in “Strategies for Success. or scales. it is true. Beyond simply ensuring that users can complete a task.

The WAI’s introduction to accessibility declares that “Web accessibility means that people with disabilities can use the Web. or that disabled people represent such a small minority of users that their needs aren’t worth taking the time to design for.2 The fact is that 57 percent is no minority. And if a Web designer believes that disabled people do not use the Web. But this chapter reframes accessibility in a much broader scope and shows that accessibility can actually encourage creativity. WHAT IS ACCESSIBILITY? Accessibility is a Web standard. similar to XHTML and CSS (see Chapter 4). because it can easily be misunderstood as forcing unacceptable limits on artistic creativity or even promoting a bleeding-heart political agenda. but as a product of serving the needs of all people. not limit it. and that this percentage is all but certain to increase as the population ages.CHAP TE R 6 Accessibility Some Web designers dislike the word accessibility. The accessibility and .”1 That’s a very limited definition. But a remarkable study from 2004 found that some 57 percent of working-age adults in the United States benefit from accessible technology. odds are that designer will skip over accessibility matters entirely. yes. Accessible design addresses the needs of disabled users. We will also see that accessibility is not beholden to any political agenda. The World Wide Web Consortium has a group dedicated to accessibility: the Web Accessibility Initiative (WAI). but rather a rhetorical one: accessibility maximizes the potential size and range of a Web site’s audience.

org/ WCAG/): Released as W3C Recommendation WCAG 2. Section 508 is specifically about information technologies.3 Accessible design accounts for the full range of conditions of user accessible design techniques presented below aim to make sites available to all users.0 in December standards.w3. which was meant to end discrimination based on physical ability within the federal government and federally funded agencies. as well as technological conditions. *Joe Clark. Because of this. the design community has reacted quite negatively to it.section508. Although primarily oriented toward addressing the needs of disabled people. as when a particular human condition (such as low vision) necessitates a technological condition in the form of an assistive technology (such as a screen reader). While Section 508 is not applied as law to nongovernmental Web sites. such as physical or sensory abilities. and so on. “without special adaptation or modification” and regardless of their computer equipment or physical ability. WCAG is a very technical document.alistapart. In certain cases. the Section 508 guidelines and technical standards (http://www. . an organization that publishes a wealth of information on accessibility. such as computer equipment. as in Joe Clark’s article “To Hell with WCAG 2. is one of the primary advocates for Web accessibility. 2006).”* • Section 508 (http://www.htm) are still useful to consider when building an accessible Web “Section 508” refers to a 1998 amendment to the Rehabilitation Act of 1973. • Web Content Accessibility Guidelines (WCAG) (http://www.58 HOW TO DESIGN AND WRITE WEB PAGES TODAY ACCESSIBILITY STANDARDS There are three key resources for accessibility on the The WAI. it is worth your time to explore each of these: • Web Accessibility Initiative (WAI) (http://www. such as government Web sites. network connection speeds.w3. No.” A List Apart: For People Who Make Web Sites. human and technological conditions are closely related. 217 (May 23. User access is determined both by human conditions. http://www.access-board. “To Hell with WCAG 2.

without the need for adaptation or specialized design. those bumps are a lifesaver during icy Chicago winters. If the sloping sidewalk example were like a universally . In the digital medium. where one design serves all and is the same for all. Access conditions are states that design should account for. As an added effect. but cannot alter. conditions of access—both human and technological—are nonnegotiable. In Chicago. travelers pulling roller luggage. cannot leverage the technologies of the Web to transform the computer someone uses to read the Web. The Center for Universal Design’s Universal Design Definition reads: The design of products and environments to be usable by all people. and klutzy people (like me) who tend to trip a lot. the Web is in a class by itself in terms of supporting design techniques that lend themselves to universal design: one single page or one site serves the needs of all users. reddish cement plates with large round bumps are embedded into the slopes. But sidewalks are a physical medium and therefore bound to the limitations of the physical world. any more than they can change someone’s physical or sensory abilities. to the greatest extent possible. They are states. because of their red color. but also parents pushing strollers. Not only does that design serve the needs of people in wheelchairs. the plates add a little visual interest to what would otherwise be the drab gray of city sidewalks. Certain cities enhance sloping sidewalks with special materials that both signal the sloping sidewalk’s approach and prevent slipping and falling in icy weather. Universal design. but it serves each user differently. where I live. Web designers. in its best forms. no matter how talented. ACCESSIBILITY AS UNIVERSAL DESIGN I prefer to treat accessibility as synonymous with a design approach known as universal design. down to street level. attempts to serve the needs of all users through a single design—rather than through multiple designs tailored to different users.4 One classic example of universal design is a sidewalk that gently slopes into the curb.ACCESSIBILITY 59 But in almost all cases.

for printing.60 HOW TO DESIGN AND WRITE WEB PAGES TODAY designed Web site. specialized versions of pages that are geared for particular devices. using whatever assistive technology they need. but rather that any content must be presented in XHTML (or another flavor of HTML). no Flash plugin. So while you may encounter advice from accessibility advocates who suggest creating separate. text presented in well-structured XHTML is the only content that you can rely on to be accessible. in that you can post just about any type of digital file you’d like to the Web. That does not mean that designers are limited only to XHTML and text. or for people with specific disabilities. In terms of file formats and content. But . the sidewalk would actually change its properties. and according to any personal preferences (no JavaScript. to be conservative in content construction. among other things. To be liberal in your treatment of site visitors. to best accommodate the needs of each pedestrian. What has become known as Postel’s Law can guide. or GIFs. you as a Web designer must be conservative in how you build your site. ACCESSIBLE DESIGN APPROACHES BEGIN WITH FILE FORMATS The Web is an equal-opportunity storehouse. PNGs. your choice of digital formats for the Web:5 Be conservative in what you do. Most graphics packages can save images in dozens and dozens of formats. On the Web. standards-based Web design enables you to create a single page that anticipates and addresses the access conditions of all users. Web-enabled devices. automatically. build pages with the following: • Content structured in XHTML. • Images presented as JPEGs.6 “Be liberal in what you allow others to do” is a foundational usercentered principle for Web writers and designers: people should be able to visit your site with whatever browser or device they choose. because XHTML is the only format that all Web browsers. and assistive technologies can render. though. But just because you can post any type of file does not mean you shouldn’t be thoughtful and selective about what you do post. having text enlarged). be liberal in what you allow others to do.

Adobe Acrobat Reader). as GIFs are limited to 256 colors. or other software required to view your files. anything beyond XHTML text and the three common image formats must be treated carefully. The same problem affects PDFs. (See Chapters 3 and 18 for additional information about image formats. Acrobat Reader.g. The challenge is that no content other than XHTML text and common image formats can be viewed directly in most browsers without the use of a plugin (e. Remember. or without a certain level of sight or hearing.. and audio and video files. It’s not that your site cannot use those formats. and Adobe Flash. be sure to alert users which links point to those kinds of files. too. worse. So keep your crucial content in XHTML. You should also include links to download the Flash Player.ACCESSIBILITY 61 there are only three that work reliably in all Web browsers.. And that is it for the conservative list. I have learned from observing students in my Web design classes that this is probably why some designers see accessibility as such a pain: if addressed only after a design is otherwise in place and ready to go. not all users will be able to install software. as far as content goes. including some very popular formats. building back toward accessibility only slows you down and. perhaps by placing the file format in parentheses. such as word processor documents and PDFs.g. the Flash Player) or other third-party application (e. too: without the appropriate application. though. it will be unable to access word processor documents posted to the Web. If a mobile phone does not have a word processor application on it. sound and video files. However. . JPEG and PNG images are generally preferable to GIFs. What’s missing from this list? Plenty. BUILD FROM ACCESSIBILITY. countless Web sites do. Flash.) All content images should have alternative text in XHTML. people may not be able to access those formats. If you must post PDFs or word processor documents. NOT BACK TOWARD IT One of the mistakes both beginning and advanced Web designers make is to delay accessibility considerations until a design is almost completed.

without punishing users who cannot. (The old site had many.7 • Progressive enhancement is the design approach: each component of a Web page builds on another: rather than putting design instructions directly in XHTML. Then the design component.1 and 6. graceful degradation. Note that an XHTML-only device. Rather. there were actually plenty of design images on the site. there are two related concepts that are instructive for building from accessibility.) In truth. graceful degradation enables an optimal experience for an XHTML-only device. Let me share an example of graceful degradation: After redesigning a major online writing lab Web site. Users with CSSenabled browsers have a progressively enhanced experience.1) degrades gracefully for text-only display. is layered by capable Web browsers on top of the XHTML.2 show how a design-image rich site (Figure 16.css file. most read CSS. for example. Figures 6. Particularly among Web designers who work with DOM scripting (see Chapter 19). are a different matter. That the student thought there were no design images on the site is exactly what she should have thought (content images. you build a really solid structure for your content in XHTML. will not provide what seems to a user to be a degraded experience. however.62 HOW TO DESIGN AND WRITE WEB PAGES TODAY might force you to scrap design components that represent a significant investment of time and effort. and not back toward it: progressive enhancement and its user counterpart. and made it difficult for her to use. written in CSS and kept in its own separate . I received an email from a blind student who wished to express her gratitude that the new site contained no design images. the difference was that the new site presented them in such a way that they would improve the experience of users who can benefit from a graphical display. • Graceful degradation is the corresponding user experience: all browsers read XHTML. users must be made aware of those if they cannot view them). But users with XHTML-only browsers are not punished by the presence of CSS if the site “degrades” to XHTML-only presentation. . such as a screen reader.

The same page as Figure 6. .1.1. A flyer the author created to promote a course.2. The page makes extensive use of CSS background images. but viewed in Lynx.Figure 6. with no intrusion by the graphics in 6. Figure 6. All of the content is there.1.

But it is a very liberal approach in its view of what users should be able to do: let them view the page in whatever browser or assistive technology they have available. progressive enhancement approach to design. though. then. . (We saw those accessibility tests in action in Chapter 2. add design in CSS. and accessibility-minded uses of CSS and JavaScript. and your visitors should have few problems accessing it. too. are some additional.) If the site content and controls are still accessible under all of those conditions. or in certain cases. accessibility attributes in XHTML. While this chapter has discussed them in the abstract. JavaScript. be liberal in what you allow others to do. In-Page Navigation For people who routinely browse the Web on desktop and laptop computers. congratulations: your site gracefully degrades. later chapters will treat file formats and progressive enhancement much more concretely. or any combination thereof. Continue to test your site over time. is how you should design: start with a solid foundation of content marked up in XHTML. CSS. this chapter has looked at file formats and a general. In many ways. and finally. Progressive enhancement returns us to Postel’s Law from the last section: Be conservative in what you do. moving through the contents of a single Web page is usually a simple matter of using the scrollbars on the browser. add any advanced functionality that your site needs using unobtrusive JavaScript (see Chapter 19). the scrollwheel on a mouse. concrete features you can add to pages to increase their accessibility: in-page navigation. graceful degradation is what you should test for: view your site in Lynx. Once you have designed with progressive enhancement in mind. or in Firefox with the Web Developer Add-on. GOING FURTHER: ACCESSIBLE ENHANCEMENT So far. the touch pad on a laptop. what I advocate in terms of accessible design is a very conservative approach: it is not about using some trendy method to design pages. which allows you to disable images. Here.64 HOW TO DESIGN AND WRITE WEB PAGES TODAY Progressive enhancement. apply them to your own site. and consider providing your email address or another means for visitors to contact you in case they encounter accessibility problems.

whether of assistive or mobile devices. Sites that use that technique enable assistive technologies to read aloud the contents of the accessible navigation. but some may limit . using a technique discussed in Chapter 14. while keeping the page from being cluttered by another navigation element that would be unnecessary for people experiencing the page graphically on a desktop browser. In the RPK. To account for this. the idea behind including it is to inspire confidence in users.) There are some different options to addressing the limitation of alt. given that. is very limited in length. most browsers will display title attribute text as a tooltip. such as the main content area or the site navigation. These accessible links save users with screen readers from having to listen to all of a page’s content before they can access the navigation or. the first is the title attribute.ACCESSIBILITY 65 On certain devices. CSS can be used to hide the accessible navigation from view. Accessibility Attributes The most well-known accessibility attribute in HTML and XHTML is alt. Your XHTML will not validate if you do not have an alt attribute on all of your images (attributes and other parts of XHTML are discussed in Chapter 9). In the Rapid Prototyping Kit (RPK. scrolling down long pages might be difficult or time-consuming. well. the content area immediately follows the accessible navigation. which provides alternate text for content images loaded in the image tag. (That’s 40 fewer characters than a Twitter post allows. see Chapter 11). that they can control their browsing experience and get right to the part of the page that they seek. conversely. to jump to the content without having the navigation read aloud first. It. There are two links that allow a device to jump either to the page content or the site navigation. <img />. For graphical browsers. such as screen readers and some mobile phones. you can see the issue here: 100 characters (not words) will not come close. it might seem silly to have a “Skip to Content” link. too. the header area of the XHTML includes an unordered list with a class of accessibility. However. alt text is supposed to be limited to 100 characters.8 Given the old cliché says that a picture is worth a thousand words. it’s preferable to design sites that have a short accessible navigation area near the top of each page that allows users to jump to major sections of the page. However.

But that enhancement also serves any low-vision students who need an easy way to view the site in larger font sizes. It’s also possible to refer to alternate CSS files on your pages. CSS and JavaScript to Enhance Accessibility CSS and JavaScript do not have to be stumbling blocks to accessibility. There is another attribute.66 HOW TO DESIGN AND WRITE WEB PAGES TODAY the text to 85 characters. For example. my preference is to run the tab index on the navigation items. There are two attributes that can be added to the anchor tags to assist users in activating page navigation and other important links: tabindex and accesskey. usually in the navigation area.4): it makes it easy to enlarge the text for projecting during class. a technique that’s mentioned in Chapter 10 . See the book’s companion Web site at http://sustainableweb design. especially given that not all assistive devices support it. which allows devices to follow a link to a complete Web page with a longer description. CSS enables you to design text to be far more readable than the default styling Web browsers apply. The image tag is not the only XHTML tag with special accessibility for examples of using those two attributes to increase the accessibility of your links and navigation. CSS and JavaScript can actually enhance the accessibility of a Web page for users with capable browsers.3 and 6. • accesskey is an attribute that allows someone to use a keyboard combination to activate a particular link. Chapter 18 suggests other ways to prepare images and other media with additional text for all users. I use JavaScript in tandem with CSS on my course Web sites for just this purpose (see Figures 6. Used appropriately in the right circumstances. And JavaScript allows you to add simple mechanisms that. although arguments could be made in favor of eliminating this entirely. increase the font size on your pages. long description (longdescrip). Maintaining separate pages of description for each of your images is not a very manageable solution. for example. though. • tabindex helps change the order in which links are activated by using the Tab key on the keyboard.

but also aids in projecting content in the classroom.Figure 6. Notice the sidebar disappears in this mode. Figure 6. DOM Scripting makes the course site more accessible for lowvision visitors.4.3. The course site for the author’s Web design course. .

” http://www. In the next chapter. Jeremy Keith. Ironick. “New Research Shows 57 Percent of Adult Computer Users Can Benefit from Accessible 2003). http://ironick. “Introduction to Web Accessibility. NOTES 2005/05/my_history_of_t.html 6. “HTML Test Suite for WCAG 2. Internet Protocol (1979). W3C Web Accessibility Initiative. “My History of the (Internet) Robustness Principle.mspx 2005).” http:// . “Universal Design Principles. MA: Rockport Publishers.0: Test 3—Image Alt Text Is Short” (2005). CA: Friends of Ed/Apress. NEXT STEPS Accessibility and universal design form the foundation for a rhetorically effective Web site. http://www . The Center for Universal Design. but ensuring equitable access to a site is only the first step. we will look at usability-driven design approaches for creating usable sites. 8.ncsu.html . 4.typepad.w3.txt” http://www. Designers and writers must also be concerned about how and under what conditions users use Web sites. and Solidarity (2005).php 2.w3. Microsoft PressPass.68 HOW TO DESIGN AND WRITE WEB PAGES TODAY and presented with examples at the book’s companion site. Information Sciences Institute. W3C. William Lidwell. Universal Principles of Design (Gloucester. Irony. Kritina Holden. http:// DOM Scripting: Web Design with JavaScript and the Document Object Model (Berkeley. and Jill Butler. 85–86. http://www.” Ironick: Contingency. too.

we saw that accessibility is a matter of designing to account for states or conditions of user access. and how to get to other areas. But it is futile to design for usability if a site is inaccessible. To determine whether Web sites are usable involves usability testing. extended usability test may not be feasible. Examples of actions are users following links or navigation buttons to find material on your site or even resizing a browser window to view other applications (like an email program) while looking at your site. Usability is about conscious (and unconscious) actions that a user can or might take on a Web page or Web site.CHAP TE R 7 Usability In the last chapter. usability builds on accessibility. But if the only way to get into that building is by a staircase. Wayfinding enables users to establish a sense of where they are in your site. all of the usability features in the individual rooms are essentially pointless. whether by a result for your site in a search engine or through your site’s navigation and contextual links. . Access is about conditions. For example. Findability is a user’s ability to find relevant information. For individuals designing Web sites on their own. if necessary. a formal. However. usability is a matter of designing to account for user behaviors. By contrast. an architect might design the rooms of a building to be maximally usable to people in wheelchairs by making wide doorways and placing light switches lower on the wall. But as Steven Krug suggests. the primary usability concerns of basic Web sites come down to findability and wayfinding. where usability specialists observe actual users interacting with a site.

”4 Designers should aim to build a site that not only supports the easy accomplishment of a meaningful or valuable action—commenting on a blog post. But usability can also include emotional dimensions of a Web site. AND OPERATIONS I’ll come right out with an embarrassing truth: Web writers and designers (including me) build sites with a wild fantasy in mind. They will turn off their music and close their instant messenger clients. usability and usable design principles can inform how you write and design for the Web from the very earliest stages. a family member—is better than testing it on none.70 HOW TO DESIGN AND WRITE WEB PAGES TODAY testing your site on even one user—a friend. concerns an interface’s ease of use and methods for improving ease of use.) Testing has its place.1 Jakob Nielsen notes that most serious site usability problems can be discovered by testing on five users. Users perceive designs that are beautiful or fun as being easier and faster to use. locating an informational page about a site—but that makes the user’s experience of actions enjoyable.5 DESIGNING FOR ACTIVITIES. maximizing their browser windows to really immerse themselves. experiencing the site as the sole focus of their attention. even if laboratory experiments reveal that a utilitarian design and an emotional design allow people to accomplish the same task in the same amount of time. “Usable designs are not necessarily enjoyable to use. WHAT IS USABILITY? Usability.2 (The end of the chapter will suggest ways for you to conduct your own mini usability tests. ACTIONS. and whether it does something useful or valuable for those users. As usability and emotional design expert Donald Norman has observed. Nothing will interrupt or otherwise come between them . The fantasy goes something like this: Visitors will open their browsers and go straight to my Web site. However. in its most general sense.3 The key questions usability experts ask is whether a design is easy for its intended users to use. or the same amount of effort.

• Activities are carried out through the next level of the hierarchy. But the points they sometimes forget to consider . three-tiered hierarchy for thinking about user behaviors: • At the top of the hierarchy is the user’s activity. which is always motivated by some objective (e. using the Web to find the best price on a DVD. I have seen many beginning Web designers struggle with thinking about user activity.6 A basic component of activity theory is a flexible. reading to decide whether the result is relevant. But designing to that fantasy seems to happen a lot. exploring relevant results. individual actions (searching on Google.. operations (typing. clicking. beginners are focused only on generating content. what they do there and how. Designers operating under that fantasy incorrectly assume that everything on the site will be found eventually.g. That never happens. • And individual actions themselves are often executed in part at the lowest level of the hierarchy. They will read the pure poetry of every single word.USABILITY 71 and a pure experience of this incredible Web site. judging by writers and designers who unselectively post tons of content and design poor navigation. or Professor Smith’s office hours). we can use a framework that’s become popular in human-computer interaction. They may have a lot of really good ideas for the content they want to present. To develop a more realistic picture of why users visit a site. reading pages on promising sites closely). follow every link with deep interest and fascination. which are normally carried out unconsciously. and some equally interesting ideas for their design and interfaces. These imaginary visitors will thoughtfully consider the site’s craftsmanship. pausing to reflect on the gorgeous photographs and stunning design choices. Actions always have a particular goal: returning search results. and basically spend as much time reading and thinking about the site as I spent writing and designing it. Most often. a chili recipe for dinner. scrolling). clicking a link to explore a result. simply because they also assume their users will look at everything. called activity theory.

unless they’re using a site such as StumbleUpon.7 And even if they do use such a site. For individual portfolio sites and blogs. More randomly. To arrive at user activities unique to your site. the better. it’d be great if everyone in the world flocked to your Web site. though. arriving at your Web site is a product of some broader activity: a job search. But they won’t. Clubs and organizations would list current and potential members. school admission committees. which attracts the attention of someone else looking to fix the same problem. donors. they are still engaged in a specific activity (finding new and interesting Web sites) that might lead them to your site. ACTIVITY: WHO ARE YOUR USERS? WHY ARE THEY AT YOUR SITE? Users rarely show up at any Web site randomly. or just trying to fix a phone. what tasks those users will want to complete. For example. it’s essential to develop a realistic list of groups of your site’s potential visitors. which exists to show users random but potentially interesting Web sites. A new customer might find your site by following a link from an online review of your businesses. The more specific the list of people. joining a club. you might have written a blog post about a problem and fix for the mobile phone you own.72 HOW TO DESIGN AND WRITE WEB PAGES TODAY are who their users are. and even employees. For businesses. and so on. an employer looking to hire qualified candidates in your area of expertise might turn up your resume in a Google search. and the broader activity that the users are engaged in that leads them to a particular site. A potential member of your club might enter your URL from a flyer or postcard. hiring a business professional. And it would be impossible to design a site that appeals to everyone while still meeting your own goals for the site. Activities are defined by the broad objective that people are looking to accomplish when they visit your Web site. shareholders. In each of those cases. So “everyone” is not a useful category of users. . the list would include customers. or even fellow hobbyists or colleagues in your profession/field. more concrete groups of people might include employers.

this type of behavior is pretty rare. and refinding something found before. Some Web sites include a site index page. which is an alphabetical hyperlinked listing of every single page on the site. you will want to think about the explicit objective that each kind of visitor might have and develop an action list with items like: • Potential employers finding my resume • Like-minded hobbyists contacting me • School admission committees seeking a list of my recent projects • Customers viewing how much our business charges for products and services • New club members printing and mailing membership and payment forms Just like the “everyone” audience category.8 Finding Everything That There Is Again. ACTIONS: WHAT ARE YOUR USERS DOING? Activities are always made up of individual actions. finding a specific thing. Keep your list to specific and reasonable objectives. and then individual users search on what the search engines have found. The individual actions a site visitor takes is the primary concern of usability. if ever.USABILITY 73 From that list. Google and other search engines are left to handle this type of search. finding a few quality things. Unless you have a very small site (or a stalker). like the fantasy scenario above. And the most common actions that occur on a Web site can be broken down into Morville and Rosenfeld’s four general types of information-seeking behaviors: finding everything. “Employers looking at every last page of my Web site. Other sites duplicate the spirit of a site . it’s tempting to say. happens.” But that rarely. A site index might be useful as a last resort for someone trying to find something or to see a list of everything. do not bank on anyone looking at every single thing on every single page.

rather than listing every item in the portfolio as part of your navigation. you might have a navigation item that links to an overview of your portfolio. Finding a Few Quality Things Finding a few quality things is a more typical behavior. Customers don’t have the time or interest to see every single item that an online electronics shop sells. users might encounter a compelling overview page that uses thumbnail images and persuasive written descriptions that entice users to click. trying to cram everything into the navigation often results in fly-out or pop-up menus that try (and often fail) to manage the information overload. and instead prefer a few that fit their needs and price range. On small sites. As part of providing wayfinding. Even photography enthusiasts rarely want to see every photograph someone’s ever taken—just a few compelling ones.74 HOW TO DESIGN AND WRITE WEB PAGES TODAY index by linking to every single page from the navigation area. you might visually highlight the Portfolio item on your site navigation whenever someone is viewing any page related to your portfolio (see Chapter 15). By providing wayfinding devices such as visual cues in your navigation. But a oneor two-word navigation item. you can encourage users to explore other areas of your site simply because they can be confident of where in your site they are. But on sites with more than a few pages. . For example. you lead users to that particular area of your site. because finding everything is such a rare user goal. A compelling. Designing for this kind of user behavior can help determine what to include in your site navigation. it is better to concentrate your design efforts to address more common behaviors. “Resume” or “Design Portfolio. an exploratory behavior. which is key to supporting the goals of browsing-like behavior.” may not be enough to entice otherwise curious users to click. Chapters 15 and 20 will present approaches to simplifying navigation and building a shallow architecture that make those kinds of workarounds unnecessary. in large part. linking to every page from the navigation may not be an issue. but have at least a vague idea. Finding a few quality things is. Once there. Besides. That type of information-seeking behavior is especially common when users are not exactly sure what they’re looking for.

Web site statistics. even something recommended by someone else. sometimes reveal that this behavior begins with a Web search. The presence of site navigation and home links (and a compelling design) may actually transform visitor behavior from seeking a specific thing. to finding a few more quality things. usually in your site’s branding (see Chapter 14). I often find that people have searched Google for my name plus “vita” or “curriculum vitae. A site with attractive previews and promotional content may even alter a user’s actions. which many Web hosts provide (see Chapter 24). Such a user might want to move back up to your site’s overview pages or home page. Sometimes users will be so moved and interested by site content that they will share it as a link on Twitter or Facebook. A link to your home page on every page. Links to these kinds of specific pages should appear in most sites’ navigation areas. Users also expect some means for contacting the person or people behind a Web site. Finding a Specific Thing Users are sometimes looking for a specific thing. visitors to a business’s Web site might discover a product or service that they didn’t even realize that they wanted or needed previously. .” which are the words for an academic resume. Other examples of known items that users often expect include About and Contact pages. if you’re a designer—elsewhere on your page might be more appealing. that may result in a new user visiting your site on someone else’s recommendation. simply because the content of the image may fit better with the vague idea of what a visitor to your site is looking for. A home page may even have a brief About Us or About Me blurb that links to the full About page. Creating a usable design for that kind of behavior involves helping users to find what they know (or reasonably expect) appears on a given Web site. business. may also benefit curious users. or organization a Web site represents. An About page may be a history or biography that offers more information about the person. A site navigation that uses wayfinding devices to indicate the general area of your site that a visitor is in provides a necessary sense of You are here (see Chapter 15).USABILITY 75 hyperlinked image—such as a sample from your design portfolio.

(That is why I advise against things like randomly displaying one of a set of images on a page. they bookmark it to return for future reference. We’ve all had the frustrating experience of vaguely remembering a really interesting page or site. and navigation items. or when text is difficult to read because it’s too small or not run in a high enough contrast with a background color or image. This is where whole-page design and especially site branding comes into play (see Chapters 14 and 17). Visual cues. but it is probably more fun for the designer to create than the user to experience on return visits. Each of those are examples of the unconscious operations that support actions on a page. like being able to comfortably read the text of a page (see Chapter 16). In a breakdown. It’s a fun thing to design. such as a memorable image or color scheme. Given an information-seeking behavior like finding a few quality things. Not always. Add to that list more passive operations. A strong visual design can help to cue users as to whether they have been to your site or a particular page on your site before. Using the Tab key to move through the links on a page. and that sites like Diigo are so popular: when someone finds something useful on the Web. to avoid clicking the wrong link. though.76 HOW TO DESIGN AND WRITE WEB PAGES TODAY Finding a Thing Found Before There is a reason that most Web browsers have a bookmarking function. users experience a breakdown. Everyone’s had the experience of going to a site whose navigation required very precise mouse positioning and clicking—either to activate a desired link or. something that usually happens more or less unconsciously suddenly requires concentration and mental effort.) OPERATIONS: HOW DO YOUR USERS DO WHAT THEY DO? Clicking on contextual links. or see an image clearly because it’s not overly compressed or run at a dinky size (see Chapters 3 and 18). thumbnail images. but not having any exact record of what or where it was. can also help users to remember a page previously visited. When an item is difficult to click or simply not clickable. a difficult-to-click navigation bar might be enough to make a user leave a site. . because of a densely packed navigation. Entering text in a text box.

a second (and third and fourth) round of testing will reveal other issues that were missed the first time around. particularly for an everything-seeking behavior. and test again (even if it’s on the same friend or colleague who’s agreed to help you out). With your improvements. Prefer large. If users can be sloppy—that is. One of the things that Krug recommends is iterative testing. have them add site:example. don’t just test once. Provide a few different scenarios for users: “You’re an employer seeking resumes of people in my profession”. and images. FOUR QUICK BUT USEFUL MINI USABILITY TESTS Stephen Krug’s book Don’t Make Me Think! is a great resource for conducting your own basic usability tests (I especially recommend his chapter “Usability on 10 Cents a Day”). actually begins in a search engine. This test. and key terms that you should include in your site’s text.9 It’s also important to test throughout your design process. asks users to begin from a Web search. which are oriented around the four information-seeking behaviors above: • Finding everything that there is.USABILITY 77 The easiest way to build a site that’s usable on the operational level is to let users be sloppy. perhaps by employing DOM scripting (see Chapter 19). and asking why. But the usability of a site.” Watching what sites they click on. (A test I often do is to see if I can mouse over page controls by moving my mouse with my elbow. make changes. if possible. which offers less control than my hand. with the ability to increase the font size further without breaking the page’s layout. but test. can provide insight for how you should structure your pages. if they aren’t constantly encountering breakdowns—they can better focus on their goals and actions. which is only effective on sites that have been indexed by Google and other search . Most usability tests begin by showing a user the site you want to test.) Provide high-contrast text run in a comfortably large font. clickable areas on links. navigation items. If you want to limit your test user’s results in a Google search. “You’re a college freshman looking for information about the chess club. Here are some simple usability tests.

perhaps with a scenario like. its membership.g. If your test users are close friends or colleagues.. or information about your club. like a particular item in your portfolio. too). This test begins on your site itself. as though taking a long time is their fault—not your site’s). and what they would do there. specific things and then—assuming that first test didn’t go disastrously—have them refind the first thing you asked them to. .78 HOW TO DESIGN AND WRITE WEB PAGES TODAY along with the search terms to limit results to a specific site (e. If yours is a portfolio site. Otherwise. its presence might unnecessarily stress your test users. But if you make it clear that you know there are issues to be improved. sites are always. • Finding a thing found before. You can also conduct a more open-ended to some extent. • Modify the tests above to match your specific site. have your test users find a few different. though. they may not want to criticize the site for fear of hurting your feelings. “If you were a potential customer. or a Contact page. your test users will likely understand that they can help you more by sharing suggestions and criticisms than by telling you how awesome your site is (although that’s nice to hear. try repeating the test. so casually keep an eye on the clock of your computer or phone (do not use a stopwatch. what would you look at to decide whether to buy from us?” • Finding a specific thing. You might ask a user to find items from your portfolio. Have your users find something a little more specific. • Finding a few quality things. With this type of test. works in progress) and that you need help to improve it. Have your test users locate your resume. If you’re working with someone who tested your site previously. and how to become a member. an About page. TIPS FOR YOUR TESTS • Explain that your site is a work in progress (regardless of what stage it’s in. time might be important. vita site:karlstolley. think about your expectations of why users would come to your site in the first place.

“I really think you should have a big photograph of yourself on your site. anonymous usability testing of all of your site’s users. and have them examine or try out your revised designs. You might even find that some people will share design suggestions as you work. usability. or a newscaster. and operations. In the next chapter. someone might say. at least once you get more skilled writing and designing pages. . Regardless. but the writing below it doesn’t seem to be what I want”—can be especially helpful for you to reconsider some of your design and writing decisions. we look at sustainability. You shouldn’t necessarily follow the suggestions exactly. To do a certain kind of long-term. “I’m surprised that image isn’t clickable”.USABILITY 79 • Ask the people you have try out your site to talk aloud. more uniquely you. For example. and other writing and design issues over time and as your site grows. Among usability professionals. NEXT STEPS Designing a usable site means accounting for different user activities. that’s probably not essential. all built on a solid foundation of accessibility. it’s common knowledge that what users say and what they do are often quite different. A photograph may or may not be the way to achieve that particular goal. but you might think about their subtext. actions.” Unless you’re a model. which concerns accessibility. have a look at some of the sections on click tracking and other analytic tools in Chapter 24. Listen to what they say. asking test users one question—“Why?”—can usually help you determine why they’re offering the advice that they are. But what they say aloud—“I expected a navigation button for that”. a theater major. • Try doing quick revisions while the test users are with you. but what your test user might be implying is that your site needs to be more personal somehow. “This heading really grabbed my attention. but also watch what they’re doing.

html 3. Victor Kaptelinin and Bonnie A. Information Architecture for the World Wide Web. Jakob Nielsen.” http://www . (Sebastopol. “Usability 101: Introduction to Usability. CA: O’Reilly Media. 2006). Nardi. 17–18. Don’t Make Me Think! A Common Sense Approach to Web Usability. Peter Morville and Louis Rosenfeld. 2. StumbleUpon. Donald A. Emotional Design. CA: New Riders/Peachpit Press. 7.80 HOW TO DESIGN AND WRITE WEB PAGES TODAY NOTES 1.useit. 6.stumbleupon. Acting with Technology: Activity Theory and Interaction Design (Cambridge. Jakob Nielsen. 8. 2000).com/alertbox/20030825. 2006). . (Berkeley. 5. Krug. 35–38. MA: The MIT 8.html 4. “Why You Only Need to Test with 5 Users” (March 19. Don’t Make Me Think!.useit. Steven Krug. 2006). 2004). 134. 3rd ed. http://www. http://www. 9. Emotional Design: Why We Love (Or Hate) Everyday Things (New York: Basic Books. 135. 2nd ed. Norman.

accessibility. without compromising their future needs. sustainability determines how well and how easily you are able to develop and refine your site over time. Usability requires designing for behaviors. Sustainability considers designing for conditions and behaviors in two dimensions: time and scale. WHAT IS SUSTAINABILITY? Sustainability is often referred to in the context of the natural environment. Unlike accessibility and usability. .1 It is not a major effort to rework this statement with regard to Web design: sustainable Web design meets present needs of a site’s creator and users. Their definition of sustainability reads: Development that meets the needs of the present without compromising the ability of future generations to meet their own needs. which are inherently user-focused in that your own ability to access and use your site is only one small part of a broader picture. and usability of a sustainable site are easier to revise and improve. also known as the Brutland Commission. ensuring the best content and experience for site users.CHAP TE R 8 Sustainability Accessibility requires designing for conditions. one might say that sustainable Web design meets present needs while also planning for future needs. Going a step further. However. a sustainable site also ultimately benefits users: the content. One of the more widely quoted definitions of sustainability comes from the 1987 meeting of the World Commission on Environment and Development.

whether that heading appears big and purple or small and gray is another matter. it prepares your site for change. A sustainable Web site is possible. Writing XHTML that describes the structure of your content. It is not enough for a page or site to be built (a present need). and not its visual presentation. even for something as basic as carefully naming files and folders as described in Chapter 5. So are choices that help develop a sound site architecture. Sustainable Web design does not resist change. More than anything. opting to follow fads and trends or the easy path of using a WYSIWYG editor to build pages. The advice in this chapter and the rest of this book is intended to help you to make your site sustainable by making it maximally useful over scale and time. From file formats to computers themselves. as described in Chapter 20. contributes to the long-term sustainability of your site: the structure of content is generally more stable than its visual design. designing a sustainable site requires careful planning and organization. A heading is always a heading. sustainable Web design should not be misconstrued as a guarantee of indefinite stability and permanence.82 HOW TO DESIGN AND WRITE WEB PAGES TODAY Unfortunately. and likely into the future—while also providing plenty of room for writers and designers to make adjustments to their sites in the future as the conditions on the Web continue to evolve. IS A SUSTAINABLE WEB SITE EVEN POSSIBLE? That all might sound good in theory. However. And a sustainable site certainly cannot be built without planning for the future. And yet everyone has had experiences with the relentless change surrounding digital technologies. . there does not seem to be anything about digital technologies that approaches the kind of stability and permanence that “sustainable Web design” seems to imply. Thoughtful choices are essential. people who write and design for the Web (and other digital media) have tended to ignore sustainability at every turn. but it is not necessarily something that can be built intuitively. rather. It’s actually more of an attitude toward inevitable change: sustainable design involves making choices that will work now. it should also conform to Web standards and be easy to revise and improve the page over time and as a site grows (future needs).

10. a record also serves the purpose of keeping everyone informed of everyone else’s changes. and reusing content as much as possible. a text or word processor file. It concludes by looking at the role of standards and open-source libraries in further pursuit of a more sustainable site. Remembering what you’ve done on a site or a page is crucial to sustainable design. Keep a Record of What You’ve Done What was I thinking? That’s the question that I often ask myself when preparing to redesign a Web site from a past course or project. CSS. were little more than a record of changes to a Web site. see the sidebar “Using a Content Versioning System (CVS)”). There are two basic things that you should do to help yourself remember what you’ve done on your site: • Keep a wiki. . the details about Web sites that you have created are certainly not among them. In cases where you are collaborating with multiple people on a site. regardless of whether the record appears on the site itself or in a notebook somewhere. Retracing your steps and being able to answer for why you made a particular design choice helps you to keep your site consistent. any sustainable site should have a record of its development over time. and 19). while preventing you from having to reinvent the wheel when an old challenge surfaces that you already figured out how to solve.SUSTAINABILITY 83 SUSTAINABLE DESIGN TECHNIQUES The rest of this chapter consists of practical approaches to building a sustainable site: keeping records of your work. While that particular use for blogging does not seem to be as common anymore. Some early Web logs. naming and organizing all of the elements of your site. and JavaScript to describe what you have written (see Chapters 9. or even a notebook where you make notes of your design activity and choices (also consider using a content versioning system. • Use the comment syntax in XHTML. favoring directly editable content. or what we now call blogs. But of all of the things in life that are worth committing to memory.

karlstolley. or writing classes and IDs in your XHTML.* Essentially. There are a number of systems available. called “Git for Writers. A CVS does not do this automatically. but rather requires you as the writer to periodically commit changes to the repository. Some of my graduate students and I are also working on a more in-depth guide to Git. Git and other CVS software lets you do that in a few keystrokes. In addition to keeping a log of your site’s changes. Call It Like It Is Whether you are choosing a domain name. “Git Tutorial” (October 16. plus images and other media. *Git: The Fast Version Control System. . a CVS such as Git establishes a repository of the files for a Web site or other digital project. and JavaScript source. and allows you to build a record of the changes you make. including XHTML and CSS files. in case you are looking for additional examples of commenting. I have written a basic tutorial for using ***Gewgaws Lab. “Git for Writers” (April 21. and maintain a consistent naming style across all of your site’s elements. the best thing that you can do is to name things to reflect what they are. Chapter 12 describes some basic commenting are also filled with comments. KarlWiki.84 HOW TO DESIGN AND WRITE WEB PAGES TODAY USING A CONTENT VERSIONING SYSTEM (CVS) A type of software known as a content versioning system can extend your record-keeping of changes to your site over time. or wish to return to an earlier version of your project. 2010). If you make a mistake. http://git-scm. naming files and folders. Not only does this help preserve your own sanity. CSS. 2009).com **Karl Stolley. it’s very important to write comments in your XHTML. You can see the Git repository and history for this book’s RPK at http://github. although one of the more flexible of these is Git. http://wiki. but it can help to teach others who are impressed by your site and want to learn how to do something the way that you have.”*** which is both an introduction to Git and an approach for using Git to collaborate with others on Web sites and other projects.** including instructions for installing Git on different types of computers. and the Web-available examples that support this book at

jpg. such as photo001. too. little is gained by calling your resume page res. tag headings with heading tags. in basic Web sites. the “call it like it is” rule also applies. . But it’s also not good practice to truncate or abbreviate file and folder names. Even on a basic tag level. In terms of scale. When it comes to the structure of your XHTML pages. Take extra care in naming classes and IDs. photo20. it is reasonable to expect that the page will have information or the means (such as a form) for contacting the site’s owner or organization. and you want people to link to your site—but if pages move or disappear without warning when you move or rename files. lists with list tags.htm.jpg. photo003. You want your site to be found. or where something is with respect to the rest of your site. It is important that your URLs remain constant and functional over time. or serialized. and Everything in Its Place Being able to quickly find a file that you need to edit helps you simplify your work toward a sustainable Web site. it’s never good practice to use words like “new” in file names. too.SUSTAINABILITY 85 As the file-naming advice offered in Chapter 5 suggests. it reflects poorly on the person doing the linking. Both for you as the creator of a site and your visitors. URLs are created based on folder structure and file names. A Place for Everything. Otherwise. name it promotional-content or some other name that describes the content’s structure and purpose. not to mention it reflecting poorly on your own site. What in your current design is a big purple box may not be in a redesign. If the URL reads http://example. not its design (see Chapter 9). and so on.jpg. photo10. and discipline yourself in its maintenance by saving files in their designated places. Take the time to develop a good site architecture (see Chapter 20). that the content of a page matches what its file name suggests. photo002. file names should begin with leading zeros. any numbered.jpg will be listed next to photo1. So rather than naming a class or ID something like big-purple-box.jpg. call it resume. So be sure. as nothing remains new over time. jpg.jpg near photo2. file names in URLs provide additional clues to whether something should be clicked on.htm. This helps keep the listings of serialized files more readable when you are managing your site’s files. and so on.

such as WordPress (see Chapter 22). you just connect all of your site’s XHTML pages to one shared CSS file. The files will have to be changed on your computer and then uploaded through the CMS. To maintain a consistent design across your site.pdf or . if you rely on file uploads of PDFs or word processor documents. sensible place the first time around. However. but dozens or hundreds pose a serious sustainability problem.2 to redirect old URLs to new and active ones. republish it as the . While those techniques are outside of the scope of this book. With XHTML. and all other plain-text-based files. you can edit your content using any good Web browser. like stuff/ or res. . http://sustainableweb design. instead. CSS.86 HOW TO DESIGN AND WRITE WEB PAGES TODAY For example. such as using the Apache Web server’s URL rewrite module. Again.swf. this is a matter of scale: one or two PDFs may not be too much to such as Flash and PDF. you only need access to a text editor to do your edits before moving them to your Web server. Favor Content That You Can Edit Directly There are certain types of files.htm and later opt to rename it to something more meaningful. they do add a degree of flexibility for handling links to old URLs should you need to construct a new architecture for your site. using a CMS will not make maintaining the content in those files much easier. See this book’s companion site for additional information. Don’t Repeat Yourself The idea behind CSS is that you can keep all of the design instructions for all of the pages on your site in one file (see Chapter 10). If you use a content management system (CMS). you must do your editing in one software program or file. There are some advanced techniques. if you choose to post a vague folder or file name. and post that published file to the Web. that you cannot edit directly (at least not to a great extent). Making a site-wide change to the design is then only a matter of editing that one CSS file. so be sure to both name things and place things in a thoughtful. to maintain a dynamic site. you risk making links to the older name obsolete. JavaScript.

Follow Web Standards The Web design advice in this book adheres to standards for XHTML 1. for yourself.0 Strict. one XHTML file for screen. too. as in this book. in other words. and then repeated over multiple pages using a server-side language like PHP (see Chapter 21). the Document Object Model and other technologies whose specifications are maintained by the World Wide Web Consortium (W3C). There’s no need. You can. you have to fix it in as many different files as you maintain copies. As soon as you introduce multiple copies of the same content. The Web is unique in its standards’ longevity. still write in HTML 4. Even when new versions of standardized languages appear. the older versions can continue to be used. XHTML 1.01—and even as HTML5 stabilizes. See the book’s companion Web site at http://sustainable webdesign. should you want to make a change or should the Web-authoring software company go out of business. for example. navigation. and the stable parts of 3. you increase the labor involved in even the smallest changes. you’re also actually learning parts of HTML5.0 Strict. using CSS and the media attribute. But that introduces accessibility issues. Following standards is an important practice that advances for more information on HTML5. to have one XHTML file for print. redesigned one. 2. both for users of other browsers and. you can style one XHTML page to display differently on different devices or when the page is printed. any content that you repeat over pages—your heading. (And here’s a little trivia: by learning XHTML 1.SUSTAINABILITY 87 publishing an entirely new design is accomplished by replacing your old CSS file with a new.) The alternative to following standards (and it’s not really an alternative. if a site is to be accessible and sustainable) is to follow the quirks of a particular browser or piece of Web-authoring software. even brief “About Me” text—can also be kept in a single file. If you find a typo. Like your design. in the future.0 Strict will still be going strong. . and so on. Cascading Style Sheets 1. But even the page-specific content you mark up in XHTML should also appear only in one place. many software programs will stop reading previous versions of their own file types over time.

http://httpd. your site itself improves.88 HOW TO DESIGN AND WRITE WEB PAGES TODAY Build on Top of Open-Source Libraries Another way to keep a site sustainable is to build on top of actively developed open-source frameworks and code. even thousands. NEXT STEPS Sustainable Web design isn’t magic. thanks to the work of hundreds.html . Apache HTTP Server Version the RPK builds on the jQuery JavaScript library (see Chapter 19). It just requires thinking carefully about a lot of choices.2. you entrust that work to the developers of jQuery. http:// www. In other words.un-documents. rather than you writing the JavaScript that does that kind of work. And even the RPK builds on other libraries: for handling DOM scripting. Report of the World Commission on Environment and Development.apache. In the next section of the book. “Strategies for Success. up-to-date. such as naming things. of people who are constantly working to improve the library or framework.” we will see the issues of accessibility. “Apache Module mod_rewrite” (2009). “Towards Sustainable Development. And so long as you keep your copies of any libraries or software. that are easily overlooked and taken for granted.” Our Common Future (1987).2/mod/mod_rewrite. such as WordPress. and sustainability in action as you get down to the work of building your site. jQuery does things like make your JavaScript work uniformly across all modern browsers—while also protecting users whose old browsers might mangle advanced features of your pages. The Rapid Prototyping Kit (RPK) is one example of this. Among other things. NOTES 1.htm 2.

changes to one part of your design. and JavaScript. XHTML describes the structure of writing and allows writers to specify which pieces of text are headings. may cause you to change another part. step-by-step process. This section invites you to dive in and work on your own writing and design. XHTML and CSS are actually languages that describe writing. So far. the line-spacing of paragraph text. or items in a list. . The key to creating your pages is flexibility. from what is more traditionally considered writing. such as the navigation. Although the form of a book requires ordering chapters. and vice versa. CSS complements the structural descriptions you write in XHTML by helping you describe the appearance of writing: the colors and sizes of headers. know that Web writing and design is never a linear. be ready to make changes. And that will involve learning to write with the languages of the Web: XHTML. and even the position of an item on the screen or the printed page. But it would be a mistake to think that writing with the Web’s languages is a separate category. we’ve looked at Web writing and design concerns at a fairly high level. CSS. paragraphs. or even a separate activity. XHTML also enables writers to load an image or a piece of multimedia (often with the aid of JavaScript) and to provide supplementary textual content both for search engines and low-vision users.PAR T I I I STRATEGIES FOR SUCCESS This section of the book covers the construction and design of individual Web pages. such as the content area. Changes in content may inspire you to change your design. in a somewhat abstract way.


You might have a beautiful picture to hang on the wall where you live. XHTML is a language that does nothing but describe the structure of writing and the location of media content. CSS would be the house’s design and decorations. The chapter also looks at two attributes—class and id—that you can use to provide additional structure that describes content that’s unique to your pages. <head>. The key idea behind XHTML is that content should be described structurally. And JavaScript would be the house’s appliances. and <body> tags that all XHTML pages require. then XHTML would be its foundation and structural walls. XHTML can only describe the structure of a Web page’s content. This chapter introduces the basic concepts behind writing your content in XHTML and the global structure of the <html>.CHAP TE R 9 Structured Content: XHTML Overview If a Web page were a house. You can’t use XHTML to calculate the answers to math problems or to instruct robots to attack your enemies. using a language that is separate from visual presentation . but if the walls are so weak that they crumble when you try to hammer in a nail. regardless of its beauty. XHTML DESCRIBES THE STRUCTURE OF WRITING XHTML is an acronym for Extensible Hypertext Markup Language. Content structured in XHTML is the most crucial part of any Web page: it is the framework that supports both the design and interactivity of a page. hanging the picture will be impossible.

and in print another. paragraphs are marked with paragraph tags (<p>). too. structure on the Web is not indicated visually in XHTML. refer to different CSS files so as to display on screen one way. Structured content can. TAGS ARE LIKE QUOTATION MARKS An easy way to understand how XHTML tags structure writing is to compare tags to quotation marks. even to nonvisual devices such as search engine spiders and screen readers. . using multiple mediaspecific style sheets. That is a common way of thinking when we write. numbers. This allows your structured content to be interpreted and reused by Web browsers and other devices and. and distinguishable from running paragraph text. bold. and adding color. bulleted lists.92 HOW TO DESIGN AND WRITE WEB PAGES TODAY and design. for example. Yet as we will see. XHTML is challenging to write only because we are used to thinking about the structure of writing in visual ways. The idea that a combination of design choices adds structure to the document may never enter a writer’s mind. structured XHTML is essential to creating CSS-based design and adding page enhancements with JavaScript. Headings are marked with heading tags (<h1> through <h6>). like the XML rules it is based on (see Chapter 4). structure is essential to making a Web page maximally accessible. which might be indented differently from paragraphs. For that reason. Headings are often large. presented in different ways for different devices and people. paragraphs. A word processor allows writers to highlight a piece of text and change its appearance: making it bold. When you flip through a magazine. and other common structural features because of their visual design. Screen readers and other adaptive technologies can use XHTML to provide a meaningful experience for low-vision users. or even images next to short chunks of text. you recognize headings. Lists feature bullets. changing its font and size. XHTML. provides writers with tags to describe the structure of their writing. But on the Web. items in a list are marked with list item tags (<li>) and list items are grouped as either unordered (bulleted) lists (<ul>) or ordered (numbered) lists (<ol>). without the interference that visual design might bring if design were blended in with the XHTML.

XHTML tags obey the same rules as quotation marks. " XHTML tags are a lot like quotation marks. Computers and Web browsers are not nearly as smart as humans." Not I said. or the text becomes confusing: "The Road Not Taken by Robert Frost is one of America's most beloved poems. . "XHTML tags are a lot like quotation marks. the title of a magazine article.STRUCTURED CONTENT 93 Quotation marks do not make text especially beautiful. We rely on context and prior knowledge to make such distinctions. ask what you can do for your country. They must be told exactly what something is: the purpose of XHTML tags is to describe the structure of writing.”)." Despite quotation marks looking the same. adjacent to the material they mark and without any spaces: I said. XHTML. at least on its surface. . 'The Road Not Taken. can be seen as a set of fancy quotation marks that . literate humans usually can distinguish whether the quotation marks are structuring a title (“The Road Not Taken”) or a line from a famous speech (“Ask not . A quotation mark sets off text to indicate structural differences in writing: the speech or writing of another person. Quotation marks also appear in predictable ways. they function only to indicate structure. " Once a quotation mark opens. or perhaps an unfamiliar word or phrase.'" Quotation marks also look the same regardless of the content they mark: "The Road Not Taken" "Ask not what your country can do for you. there is another important rule: the single quotation marks must close before the doubles: "Tonight I will read you a poem by Robert Frost. it also must close. And if single quotation marks appear within double quotation marks.

” I might structure the title as a first-level heading (<h1>): <h1>Simple Rules for Using XHTML</h1> Structurally. such as the line break (<br />) and image (<img />) its structural meaning will always be the same. Every tag that opens must close. in other words. in Times New Roman or Arial. (The XHTML files in the Rapid Prototyping Kit.) 2. the rules of XHTML are: 1.w3. Regardless of how the heading is visually designed.0 Strict DOCTYPE. . All of these rules will become clearer over the course of this chapter and the rest of the book.2 But briefly. (Just like quotation marks. THE SIX RULES OF XHTML There are only 6 rules that you must follow when writing XHTML. For XHTML 1. This helps markup validators understand the type of XHTML that you write on your Web pages. this text is a first-level heading regardless of whether the CSS designs it to appear big and purple or little and green. If I write an article as a Web page and its title is “Simple Rules for Using XHTML. If <p> opens. </p> must follow. do not surround text and are therefore self-closing: rather than having an opening and closing tag.0 Strict//EN" "http://www. such as the one at HTML Dog1 or SitePoint. which is reserved for older. just be sure it appears as the first line of all of your XHTML documents.0 Strict. the DOCTYPE declaration is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. RPK. The DOCTYPE declaration also prevents Web browsers from rendering a page in quirks mode. they self-close with a space and a (forward) slash: />.dtd"> It’s not necessary to understand what all of that means. Every valid XHTML document’s first line must be a DOCTYPE declaration. all use the XHTML 1. It’s also good practice to keep an XHTML reference handy.) Some tags. or whether it even appears visibly on the page at all. a closing tag.94 HOW TO DESIGN AND WRITE WEB PAGES TODAY lets writers explicitly describe the structure of writing. nonstandard Web pages.

which are separated by a space. tags sometimes have multiple attributes (in that case. or tag name.STRUCTURED CONTENT 95 3.</p> (<p> opens.) 4. and must not contain spaces. and some attribute-values. is address. attribute. For example. nonsense bit of XHTML that illustrates the element. All attribute-values must appear in quotation marks. src and alt).3 you . and attributes from other attributes: <h1 class="running-head"> 6. and that attribute’s value is office. spaces are used to separate elements from attributes. must be lowercase letters. Except for special values. </strong> closes. 5. use the <strong>strong tag</strong>. There should also never be a space between the equals sign and the opening quotation mark. all <img /> (image) tags require an alt attribute for alternative text that users will see or hear on devices that cannot display images.jpg" alt="Photograph of the apple pie I baked. Tags close in the opposite order that they open. it has one attribute. then </p>. office can also be called an attributevalue. Never begin a class or id value with a number or punctuation." /> As that example also shows. <address class="office"> the element. All class and id values must begin with a letter. All tag elements and attributes. just like single quotation marks inside of doubles: <p>To structure text that will be bold. then <strong>. class. and value parts of the tag: <element attribute="value"> So in this example. Not all attribute-values must be lowercase. immediately following the equals sign. Here’s an illustrative. such as microformats. The attribute value for the alt attribute should actually be a descriptive phrase or a sentence: <img src="apple-pie.

While there are some important attributes . But stripping away everything else. you’ll be certain that you’ve named your class navigation. Also. let’s examine the global structure of all standard XHTML pages. The Root Tag: <html> Except for the DOCTYPE declaration. each of which is separated by a space. Keeping those six rules in mind (refer back to them if you need a refresher later). not Navigation.96 HOW TO DESIGN AND WRITE WEB PAGES TODAY must invent class and id values yourself. Let’s walk through these so that you can begin to build a mental model of the structural blocks required for all XHTML pages. particularly when you are writing CSS to design your XHTML: by consistently using only lowercase letters. a paragraph tag could have the classes of “first” and “summary”: <p class="first summary"> For that reason. Other characters are allowed. you cannot use spaces when creating class names (or IDs). But keeping everything lowercase will do good things for your sanity. including capital letters. THE GLOBAL STRUCTURE OF WEB PAGES The chapters that follow look more closely at the function and structure of the different components of XHTML page structures. in ways that describe the content (not the visual design) of your pages: <ul id="navigation" class="active"> Classes and IDs also should only contain lowercase letters and the hyphen. including the <!DOCTYPE> declaration. For example. XHTML source looks like this: <html> <head></head> <body></body> </html> Each of those tags can appear only once per page. XHTML pages are entirely contained by the <html> tag. some attributes allow writers to specify multiple values.

and that it uses the character set utf-8. either in their browser or in a service like Diigo. Be sure to always include a meaningful title (see Chapter 13). Most of the work of writing and building the content of your pages happens inside the . the <head> must contain two basic but important tags (both of which appear in the RPK’s XHTML files).STRUCTURED CONTENT 97 that should appear in the <html> tag. The second tag that must appear in the <head> is a <meta> tag with a particular set of attribute-values: <meta http-equiv="Content-Type" content="text/html. The first tag is <title>. <html> is divided into two parts: <head> and <body>. the <html> tag is sometimes referred to as the root element of all Web pages. hyperlinked text for your page that will appear in a list of search results. Note that it’s not uncommon to see sloppily constructed Web pages whose title reads Untitled Document. this is the tag that contains the title for the Web page. This helps browsers to accurately render the type of content that your XHTML page contains. It is the tag that contains all others. Metadata in the <head> Tag Appearing before the <body> tag of every XHTML Web page is a <head> tag. We will look at these and other <meta> tags in subsequent chapters on metadata (Chapter 13) and sharing (Chapter 24). text/html. Page Content in the <body> Tag All of the content of a page that you expect to be visible in a browser’s viewport must appear inside the <body> tag. its primary structural function is to serve as the tag that groups both the <head> and <body> tags. In this case. At minimum. Because of this. But page content does not appear immediately inside the <html> tag. Whatever you write there appears in the title bar or tabs of most Web browsers. It is also the clickable. the content attribute tells search engines and Web browsers that the page content that follows is of a particular type. and as the label for pages that people bookmark. Instead. charset=utf-8" /> The first attribute-value pair of http-equiv describes the page’s content type to search engines and browsers.

paragraphs. But sometimes.htm"> latest projects</a>. Consider this XHTML fragment: <body> <h1>John Smith's Home Page</h1> <h2>Portfolio Overview</h2> <p>Read all about <a href="portfolio.</p> <h2>Latest Projects</h2> <p>Read all about my <a href="latest-projects. and lists.htm">Home</a></li> <li><a href="resume.htm">my portfolio</a>. Subsequent chapters break down the typical contents of Web pages to help you better organize and design your page content inside of <body>.98 HOW TO DESIGN AND WRITE WEB PAGES TODAY <body> footer. IDs are often used for describing a page’s major structural features: navigation. or unique ID. class and id both serve the same basic purpose of providing additional structural information. header.</p> <ul> <li><a href="index.. can only be used once per page. XHTML includes two structural attributes for additional structural description: id and class..htm">Resume</a></li> <li><a href="contact. ADDING ADDITIONAL STRUCTURE THROUGH ID AND CLASS The basic XHTML tag set goes a long way to establishing meaningful structure for your page content (see Chapter 16). but they are used in different contexts and follow different rules. Uniquely Identifying Pieces of Structure with id A particular id value. you need to describe your content’s structure more specifically than just as headers. often in conjunction with the division tag.. content.htm">Contact</a></li> </ul> <p>All site content is licensed for use under a <a rel="license" href= "http://creativecommons.0/us/"> .. <div>.

htm">Contact</a></li> </ul> <div id="footer"> <p>All site content is licensed for use under a <a rel="license" href="http://creativecommons. structural form.htm">latest projects</a> .. </p> </body> 99 In that basic. a site navigation (the unordered list).htm">my portfolio</a>. the page’s source might look like: <body> <div id="header"> <h1>John Smith's Home Page</h1> </div> <div id="content"> <h2>Portfolio Overview</h2> <p>Read all about <a href=" /3..0/us/">Creative Commons Attribution 3.. and structurally named id attributes to distinguish the different sections. there is nothing indicating the different content areas of the page. or a footer (the Creative Commons license).</p> </div> <ul id="navigation"> <li><a href="index. With the addition of some <div> tags.STRUCTURED CONTENT Creative Commons Attribution 3. whose purpose is to group page content into divisions.</p> </div> </body> .htm">Home</a></li> <li><a href="resume. such as a page header..0 United States License</a>. a main content area.htm">Resume</a></li> <li><a href="contact.0 United States License</a>.</p> <h2>Latest Projects</h2> <p>Read all about my <a href="latestprojects.

especially <cite class="film">The Two Towers</cite>. </p> Like unique IDs. Most browsers will scroll to the hash-referenced area of the page automatically. R. we could write a URL like http://example . regardless of the tag it has been used with. they . use the class attribute to add additional Suppose you cite different types of materials in your page and want to structurally identify the types of material (perhaps so that you can style them differently in CSS). Also note that you can use add the hash (#) followed by a unique ID in your URL to point a visitor to a particular part of your page. adding the relevant class to the <cite> tag: <p> I enjoyed Peter Jackson's <cite class="film">Lord of the Rings</cite> films. because the <ul> tag on the site navigation already groups the list item tags. Repeated Structures with class Once an id value has been used on an XHTML page. it has become conventional to use the <cite> tag to structure titles of materials that you refer to or quote from. to point someone’s browser to the site navigation in the example above. For example.100 HOW TO DESIGN AND WRITE WEB PAGES TODAY Note that in some cases. R. you can add classes to any tag requiring more specific structure. however. the easier your pages will be to maintain. The lesson here. but as we will see in the coming chapters. but I do not think that they were as good as the original <cite class="book">Lord of the Rings</cite> books by J. Associating Similar. is never to use or add a <div> tag if there is a more suitable structural tag available. The less XHTML you write. For example. <div> tags have to be added to structurally group areas of your page. it cannot be used again. I put the id attribute directly on the <ul> tag. Note that the class and ID names do not appear in a browser view of your Web page. For structural elements that might appear more than once. which will be made clearer in Chapter 16’s treatment of XHTML tags for page content. You might invent a class called film and another called book. Tolkien.

It’s best to use <div> tags sparingly. always opt for structurally descriptive names: e. Div-itis and Class-itis It’s all too easy to get carried away and start adding <div> tags and classes all over a page. Naming Classes and IDs When naming classes and IDs.STRUCTURED CONTENT 101 can be very useful when applying additional CSS styles and advanced DOM Scripting. If you catch yourself writing something like <div class="heading-one">. too. Classes and IDs always begin with a letter.g. The content’s presentation as a sidebar. rather than adding the class to every single list item. paragraphs. Your XHTML will not validate if you begin a class or ID name with a number. and lists. paragraphs. and only to group more structurally descriptive block tags (headings. think. results in too much meaningless or redundant markup. may change if the CSS and design changes. stop. or as a blue box. and use the <h1> tag instead. but its structural function as supporting the page’s main content will not change. see Chapter 16). it would be better to add it on the <ul> tag that groups all of the list items: <ul class="favorite-foods"> <li>Pizza</li> . and are best limited to lowercase letters a-z and the hyphen. supporting-content instead of sidebar or bluebox. and lists—a practice that completely misses the point of using structural XHTML. For example. <div> has no structural value other than to group related pieces of XHTML content into divisions.. Some sites are made up almost entirely of <div> tags—even for marking up headings. writers sometimes write markup like: <ul> <li class="favorite-foods">Pizza</li> <li class="favorite-foods">Cheeseburgers</li> <li class="favorite-foods">Cake</li> </ul> In that case. Class-itis.

” http://reference.102 HOW TO DESIGN AND WRITE WEB PAGES TODAY <li>Cheeseburgers</li> <li>Cake</li> </ul> That will keep the page’s markup lighter. NOTES 1. SitePoint. and sustainability of Web sites. and the major structural features of every XHTML 2. and easier to revise. which you can begin to write while you develop your skills with XHTML. The next chapter will introduce 3. “HTML Tags. See also the chapters in the “Issues and Challenges” section to review XHTML’s importance to the . “HTML Reference. NEXT STEPS This chapter has covered the basic rules of XHTML. easier to read. http://microformats. I’ll say it again: the less XHTML you write. HTML Dog. the better. usability. while still being descriptive of your content.sitepoint.” http://htmldog.

The “cascade” in CSS refers to the ability of styles to come from multiple sources (files. CSS controls the look of content structured in XHTML. Figure 10. you want all of your text on a page to be in Arial font.and font-related. <p> inside of <body>.. page layout to textural and other design images. because the CSS font-family property is inherited. the <body> tag) to their children (e. If. From typography to color. with the exception . a browser has to layer CSS over an XHTML file. with the more specific style being applied. plus the default browser styling—which should be removed using a reset CSS file.2 shows the default browser styling. CSS cannot be viewed directly (all you’ll see is the CSS source itself).g. see Chapter 11). A primary capability of CSS is inheritance. which refers to the abilities of certain style properties to transfer from parent elements (e. familial relationships are covered later in this chapter).1). which is the parent (or ancestor) element of all content on an XHTML page. you do not need to specify Arial for each and every tag.CHAP TE R 10 Presentation and Design: CSS Overview Cascading Style Sheets (CSS) enable the visual presentation and design of Web pages. selectors. for example. That means you must have your structural XHTML in place before you can test your design work in CSS.g. While you can look at an XHTML file directly in a Web browser. although the majority of inherited properties are text. A good CSS reference will let you know whether a given property is inherited or not.. which will provide default styling (Figure 10. you can just specify it on the <body> tag.

Figure 10.1. with the browser’s default styling.1. but with Arial font on the body selector in CSS. A sample of XHTML. .2.Figure 10. The same sample as Figure 10.

border: 10px solid red. sans-serif. Arial.g. or style declarations. and value to show their positions in the style declaration): selector { property: value. /*For styles that take a single value. value. while others can take multiple values. e. Some properties take a single value.. . } CSS STYLE DECLARATIONS A CSS file is nothing more than a list of styles. Properties and values are all grouped with a selector using curly braces. */ property: value. color: blue. */ } Style declarations. property. { }. can contain many different property-value combinations. font) will be set and what value it will be set to (e. /*For styles that take multiple values.. /*Commas separate values ordered by preference.. which determine what style property (e. A Web browser then attempts to match those styles to the structures in your XHTML document.g.. as above. . then. The basic form of a CSS style declaration. font-family: Verdana.g. and each property-value combination ends with a semicolon. text color. value.g. is something similar to this pseudo-code (using selector.PRESENTATION AND DESIGN 105 of this style declaration for the <body> tag—which is inherited by all text on the page: body { font-family: Arial.. sans-serif. e. */ property: value value value.. CSS styles comprise three parts: selectors. which determine what structural parts of the XHTML document will be styled.g. and properties and values. e. blue. Verdana).

” “the closets in the master bedroom. you could style that class as either . For example. just to help myself remember more about what I’m styling.g. Element Selectors The most basic CSS selectors are XHTML tag elements (sometimes called type selectors). Class selectors begin with a . Using the house metaphor from the XHTML chapter.” Except instead of referring to rooms in a house.. <p class="warning">). like <body> or <p>. } or div#footer { background: gray. to set all paragraph text to appear in blue. you’d write in CSS: p { color: blue. The only thing to remember is that while XHTML puts the element in angle brackets.” “the upstairs bathroom. to set the background color of your footer to gray (and assuming your document has <div id="footer">). in CSS the element appears by itself: body or p. } Either method works. CSS selectors refer to tags and tag relationships in your XHTML source. and the selector will style that particular tag the way you specify. wherever it appears on your page. } ID and Class Selectors IDs and classes can also be selectors.warning { color: red. } . your CSS would be either: #footer { background: gray. I prefer to put the element with the ID. perhaps on a site with instructions for doing something that might be potentially dangerous (such as operating a power saw). If you had a class called “warning” (e.106 HOW TO DESIGN AND WRITE WEB PAGES TODAY BASIC SELECTORS Selectors in CSS describe the XHTML structure that will be styled. Any XHTML tag can be a selector in CSS. For example. (dot) and ID selectors begin with a # (hash). CSS selectors are like instructions to interior decorators for what they should decorate: “the fireplace.

warning { color: red. . The following selector will style all child <li> tags of <ul id="navigation">. of the parent element. each separated by a space. or direct descendant. you could just refer to the a element selector: a { text-decoration: none. children. CSS (like the DOM. you could write a descendant selector: ul#navigation a { text-decoration: none. The selector styles the last element listed. } Adding the tag element to the class selector can give you finer-grained control over the look of your page. such as list-style-type. as well as ancestors and descendants. } All anchor tags (<a>) inside of <ul id="navigation"> will appear without the default underlining of hyperlinks. siblings. For example.PRESENTATION AND DESIGN 107 or p. The child selector is most useful for noninherited CSS properties. Descendant Selectors Descendant selectors are formed by a list of at least two elements or classes/IDs. particularly if you use the same class on different XHTML tags. depending on the tag the class appears on. RELATIONSHIP SELECTORS CSS selectors can also be formed based on the relationships between elements in XHTML pages. To remove underlining from all links. see Chapter 19) relies on relationships in terms you already know from your family tree: parents. Child selectors are written by putting an angle bracket between two elements.3). but want to style the class differently. to style all of the anchor tags (links) in the navigation so that they are not underlined (Figure 10. Other links on the page will still have an underline. } Child Selectors Child selectors are a more specific form of descendant selector intended to style an element only if it is a child.

For example.4 that the immediate children of <ul class="colors"> have no bullet points.</p> </div> . } You can see in Figure 10. if someone wanted a paragraph appearing immediately following a heading two (<h2>) tag to run in bold.3.colors > li { list-style-type: none. Sibling Selectors Sibling selectors target adjacent XHTML elements that share a parent. but not the <li> tags of any more deeply nested lists (which would be descendants. but the grandchildren still do. see Chapter 16): ul. the sibling selector. In this example. +. } One limitation of the sibling selectors is that you can only target the sibling appearing after the first. That is. accomplishes this: h2 + p { font-weight: bold. if this were the XHTML: <div id="content"> <h2>My Header Two Tag</h2> <p>My paragraph text. only the anchor tags that are descendants of the navigation list have their default underlining removed. but not children.108 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 10.

html the sibling selector would allow us to style the paragraph element. the first selector gets one point. http://www. When multiple selectors match the same element. } a.external { /*Styles here*/ } whose point value would be 112 (two elements. and IDs in a selector get 100 points. Multiple selectors can refer to the same elements.* Along with that. essentially. So in the examples above. the style with the most points in this system—is the one that gets applied to the matching XHTML structure. not blue—even if there were an <a class="external"> match within <ul id="navigation">. to style that would require a selector like ul#navigation a. } The first selector styles all link text blue. The more specific style—that and the third gets 102 points (an element plus an ID plus another element). } ul#navigation a { color: green. But given that all three styles ultimately refer to <a> in the XHTML. how does a Web browser know to style the external links red and all other links blue—given that the selector in the first style is supposed to style all of the links on the page? Selectors have different levels of specificity in CSS. the second gets 11 points (element plus class).” That’s just a limitation of . for example. classes in selectors get 10 points.PRESENTATION AND DESIGN 109 SELECTORS AND SPECIFICITY The “cascade” in Cascading Style Sheets refers to the method by which a browser applies one of a competing set of styles.stuffandnonsense. Clarke’s post refers to a point system for calculating specificity.external { color: red.” Stuff and archives/css_specificity_wars. but not the heading-two element. and one ID) and therefore more specific. while the third styles links in the navigation green. “CSS: Specifity Wars. the second styles links with an external class as red. elements in a selector get one point. we can say in CSS “style paragraphs appearing immediately after heading-two” but not “style heading-twos appearing before a paragraph. one class. Andy Clarke has a fascinating blog post that uses Star Wars characters to illustrate selector specificity visually. That’s why the navigation items in the list of styles above will appear green. the selector with the most points determines how the element is styled. That is. a { color: blue. *Andy Clarke.

more deeply nested lists still have their bullets.warning { color: red. it might just be better to add a class to it in your XHTML when it appears before paragraphs (if there is something structurally special about the heading two in that situation). there is no difference between . *. That is. but there are always other solutions. Universal Selector One final selector worth mentioning is the universal selector. } . (However. } will style all text on the page to make it appear green.110 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 10. sometimes called the wildcard selector. Used by itself. because color is inherited.4. CSS.warning { color: red. for example. it will style all elements on the page. Using the child selector. * { color: green. only the first children of this list appear without bullets. the wildcard selector is implied. To style that heading two.) For both class and ID selectors. } and *. it is generally better to set it using the body element selector.

for more specific parentchild relationships (e. A match is what triggers a Web browser to apply the style. </p> only the first <strong> tag (marking “an example”) is a child of <p>. use the wildcard selector: p * strong { /*Style information*/ } That would style all strong tags that are grandchildren of paragraphs: meaning. Rare. both selectors would apply the same styles to the XHTML above.g. The other two are children of other tags (<a> and <em>). to style a paragraph that is an adjacent sibling of a heading-two tag that is a child of <div id="content">. you’ll probably be relieved to know that it’s rare to have to write such complicated selectors. in those two cases. so long as they match actual familial relationships and structural components in your XHTML. (See the “Selectors . We could also use the child selector.. For example. but possible. For example. provided that div#content is not a child of the body tag. To style the strong tags that aren’t children of <p>. that only one element appears between p and strong): p > * > strong { /*Style information*/ } However. if a page contained the following XHTML: <p> This is <strong>an example</strong> of <a href="example.htm">styling the text in <strong>this strong tag</strong></a> <em>as well as <strong>this strong tag</strong></em>. there must be one or more descendant elements between p and strong for this style to be applied. rather than the descendant selector. Combining Selectors You can write selectors as descriptively and specifically as you like.PRESENTATION AND DESIGN 111 The wildcard selector is at its most useful in relationship selectors. the CSS selector would look like: body * div#content > h2 + p { /*Style information*/ } However.

such as all of the headings: b. any distinct styles for a given selector could be handled by additional selectors in the same style sheet. } Then. for example. h1 has already been styled bold. } /*Already made bold above. for example. strong. The long way to do that would be to write two separate style declarations: b { font-weight: bold. which will be useful knowledge if you have to write complex selectors. which are most often used for styling link text appearing inside the <a> tag: • :link styles a link in its unvisited state • :visited styles a link that has been visited • :hover styles a link that is being moused over.*/ Pseudo-Class Selectors CSS provides five special pseudo-class selectors. } But by using the comma. h2.112 HOW TO DESIGN AND WRITE WEB PAGES TODAY and Specificity” sidebar above. The comma enables designers to style many additional elements to appear in bold. which styles a link that has been.) Grouping Selectors There are times when you might want multiple structural features in your XHTML to be styled the same way. h4. } strong { font-weight: bold. h5. and should usually be combined with • :focus. h3. h6 { font-weight: bold. for example. but to make it purple (as well as bold) requires only another style declaration that contains only the color property: h1 { color: purple. h1. both the <b> (bold) and <strong> tag might be styled as bold by your CSS. both selectors can be styled together. tabbed to by a keyboard • :active styles a link during the brief moment that it has been activated by a mouse click or pressing the Return key on the keyboard .

CSS properties enable you to change fonts and font sizes. If no match is found. } a:hover. once you’ve begun to design your site. and color. You can also set the amount of space between lines of text. serif. For accessibility purposes. Fonts and Text A basic capability of CSS is styling text. if the style is font-family: "Times New Roman". it will use whatever it has to match the generic font style mentioned at the end of the list. always be sure to specify a generic font alternative at the end of all lists of fonts: serif. a style sheet might have a cluster of styles like: a. but here are some of the more common properties to get you started. if the computer the browser is running on does not have Times New Roman but does have Times. hovered/active links underlined and green.PRESENTATION AND DESIGN 113 So to make links green and no underline. Times. as well as setting styles such as bold. For example. } a:visited { color: red. if it doesn’t have Times either. but place the comma outside the quotation marks). italic. References at HTML Dog1 or Sitepoint2 are essential to have on hand as you write CSS. the Web browser will keep moving through the list until it finds a match on the user’s system. text-decoration: none. and visited links red. • font-family: The font-family property takes a list of fonts.a:active { text-decoration: underline. } :hover and :focus also work on XHTML elements in forms for entering user information. .a:link { color: green. the Web browser will display Times New Roman (which is placed in quotation marks because of the spaces in the font’s name. it will use Times. COMMON CSS PROPERTIES AND VALUES There are hundreds of properties in CSS for designing the look of XHTML pages. it will display whatever serif font is available on the system.

but you don’t want bold on strong inside of an anchor tag. #FFFFFF for white) or the RGB value using rgb(255. you’d write: a strong { font-weight: normal.g. }.. Normal is often used to reset a bold style inherited from another selector. or monospace. ul. • font-weight: Font weight can be specified as a number in multiples of 100. makes text double-spaced. or normal. write the hexadecimal number for a color (e. or green). points (pt) are used for print style sheets.255). pixels (px).. use the textindent property and a value in pixels or ems. and large.5. • line-height: Line height can be expressed as numbers without a unit. For example. but is more often specified as bold. strong { font-weight: bold.citation li { text-indent: -50px. makes text one-and-a-half-spaced. which makes the font appear normal (not bold). You can find a current list of commonly available fonts at this book’s companion Web site.5). although that may cause problems if a user tries to resize the text on your site. • color: The color property specifies text color. To mimic a hanging indent (see Figure 10.g. red. or normal for nonitalic text. Screen style sheets can use keywords. line-height: 2. run a negative number for text-indent and then the same but positive value for padding-left. for italics. is set to bold. by itself. • text-indent: To indent the first line of text. which would also produce white. } • font-style: Font style is usually either set to italic. which makes the font appear bold. You can also use pixel units. To gain better control over color. if the strong tag. You can write color keywords like those found in small boxes of crayons (e. padding-left: 50px.255. • font-size: Font sizes can be set in a number of different units. medium. blue. line-height: 1.114 HOW TO DESIGN AND WRITE WEB PAGES TODAY sans-serif. or ems (em). for example. http://sustainablewebdesign. such as small. } . percentages (%).com/book/.

and color of a border. or border-left. Although we will look more closely at the CSS box model in Chapter 17. list items. Example of a hanging indent on a paragraph at the bottom of the screen. To set only the borders of one edge. and Margin Block level elements—such as headings. while margin will move the box away from other elements on the page. lists. • border: Border is a shorthand property for specifying the width. they are as tall as the content they contain. paragraphs.PRESENTATION AND DESIGN 115 Figure 10. style. Padding. Padding can take a single value to add the same amount of padding to all sides of . Boxes: Borders.5. and divisions—are by default displayed as boxes. use border-top. border-right. that is. • padding: Padding increases the distance between the content in an element and the edge of the element. ordinarily. but block-level elements always take up the entire width of the screen regardless of their content. for now it’s important to know that border and padding will add to the size of a box whose width or height you specify. or from the edge of the browser window. borderbottom. references or works cited should be in list items in ordered or unordered lists.

they are like small boxes of crayons. whereas other browsers will expand the height to fit the content. width is specified quite often. yellow. The third method.) The first two numbers are the red value. green. and the third two are the blue value. margin and padding appear to do the same thing (increased space). but margins are transparent. a background. but can now use any of the millions of color combinations enabled by hex colors. whether you are coloring text. The second method is to use hexadecimal numbers for red. This is usually done in image replacement situations (see Chapters 14 and 17). especially to help build page layouts. is to specify RGB color in decimal numbers (0 to 255). The first method is to use color keywords. instead of using the hash (#) as on hex numbers. you will also see a 216-color “Web-safe” palette. • height: It is possible to set the height on an element. or it can take four values in “trouble” order: Top Right Bottom Left (TRBL). The problem with height is that some browsers will maintain the height you specify. which give you very limited control of color. or hex. or from the edge of the browser viewport. • width: By contrast. This method works very well across operating systems and Web browsers.116 HOW TO DESIGN AND WRITE WEB PAGES TODAY COLOR AND CSS There are three common methods to specify colors in CSS. RGB requires this form: rgb(255. a hexadecimal value is made up of six hexadecimal. So to set a color to the brightest purple (red and blue). Designers used to be restricted to those 216 colors.0. the content.255). (Hex numbers run 0–9 and continue A–F. • margin: Margin increases the distance between the element and other elements on your page. allowing you to specify red. and blue (RGB) color values. Without a background color or background image. It is usually best practice to set widths on a containing division or ordered or unordered list. even if the content is longer/ taller. or a border. numbers. rather . which is supported in all contemporary browsers. blue. a hex value of #FF00FF would be required. green. the second two the green value. and other basic colors in your CSS. A Google search for hexadecimal color palette will turn up dozens of pages that show the hex values for colors.

Chapter 17 looks at building CSS layouts using these properties: • position: There are three common values for positioning elements: static. however. bottom. which were once created with HTML tables. or left of either the browser window or its positioning context. Layout and Positioning The most advanced use of CSS is to create entire page layouts. right. left: Each of these four values can place an absolute. right. elements that have their width specified will add any padding to the total width.or relative-positioned element a certain distance from the top. ul#navigation { width: 200px. which is the default position of elements as they appear in source order and therefore the document flow. • float: Some Web sites use floats to create their layouts. sometimes to the effect of moving things off screen (such as a navigation intended for users of screen readers). But floats do come in handy for some forms of horizontal navigation bars. because they are layered over a page’s structure—not part of it. Negative values can also be used. As with height. or when you have images or other media that you want other content to flow around. padding: 20px. . So for example. which removes an item from the document flow. CSS layouts are much more flexible than tables.PRESENTATION AND DESIGN 117 than individual elements. which is usually specified for setting a positioning context other than the whole browser window for absolutely positioned items. bottom. } will result in the navigation appearing 240 pixels wide (200 width + 20 left padding + 20 right padding = 240). positioning is a much better alternative. and relative. absolute. • top. as tables were.

or to background-repeat: repeat-x.. so as to keep text readable in the absence of images. Design images let you put the finishing touches on a design. CSS background images keep design images independent of your page content. which may be an accessibility issue). To specify a background image (and a color for imageless devices). while display: inline. you can set background-repeat: no-repeat. • background-image: You can also specify a background image on any element. such as <strong> or <em> usually appear. causes the item to disappear from view (potentially also to assistive technologies. causes an item to appear as a block element. But unlike images loaded in the XHTML <img /> tag. specify the color: background: green. as well as <body> and even <html> to set a background color for your entire page. will make an item appear like an inline element. Design Images and Textures Background colors help you to add visual interest to your pages. background-color can be specified using color keywords. • background-repeat: By default. • background-color: Like color. • background: You can also use the shorthand background property. or while the image loads. However. even its design images. redesigning your site. to tile only vertically. or the RGB numbers. background images tile horizontally and vertically to fill an entire element. or background-repeat: repeat-y. it’s also a good idea to specify a similar background color to the image. to tile horizontally.118 HOW TO DESIGN AND WRITE WEB PAGES TODAY • display: Display is a versatile property for setting how and whether an item displays. hexadecimal numbers. Just be sure you have high enough contrast between your text and background to keep your pages readable (see Chapter 6). You can specify a background color on any element. for background images that are textures suitable for appearing behind text. for an image to appear only once. the shorthand is background: green url . to set only a color. is just a matter of changing your CSS. display: none. display: block.

HTML Dog. Again.jpg'). "CSS Properties. cssproperties/ 2. especially for shorthand properties like background and border.PRESENTATION AND DESIGN 119 ('tiled-leaves. we will get to work with the Rapid Prototyping Kit (RPK) and. be sure to have a CSS reference nearby.. To get started. . in Chapter 12.sitepoint ." http://htmldog. SitePoint. it will be easier to see how both XHTML and CSS can be used to build different parts of your pages: the branding.” http://reference. explore writing with source in a text editor. NEXT STEPS Now that you’ve had an introduction to CSS and have a list of some (but certainly not all) of CSS’s properties. “SitePoint CSS Reference. NOTES 1. and so on.


Keep in mind that a Web site is never really finished. Rather than trying to draft the perfect site before going live with it. there are just periods of time when it may not change as much. sketches.CHAP TE R 11 Rapid Prototyping One of the better ways to stay motivated to complete your Web site is to make visible progress on it quickly. sketching out a rough layout. BENEFITS OF RAPID PROTOTYPING Some books advise you to spend long stretches of time developing wireframes. part crash course. and adding design features in CSS. It’s better to avoid throwing away work. This chapter looks at the benefits of rapid prototyping and the basic steps of building a Web page using the RPK: gathering content. structuring content in XHTML. will aid you in building a site with solid. mockups. Then you . But consider this chapter part road it’s better to get something together that works basically the way you want it to. and better still to be doing things that directly reveal the possibilities (and limitations) of Web design with XHTML and CSS. Those steps will be explored further in subsequent chapters. and other kinds of throwaway prototypes that aren’t part of the final project. available as a free download at http://sustainablewebdesign . my preference is to get to the work of actually building a site as quickly as possible. The Rapid Prototyping Kit (RPK). While those types of development tools have their place and their benefits. standardscompliant pages.

of course. I often keep in mind the words of Eric Raymond: “You often don’t really understand the problem until after the first time you implement a solution. But handwritten. including commercial sites. which is why I have created the RPK: a collection of files and folders to help you build rapid prototypes for your Web site. and edited and revised even more quickly. Put another way. throw it away and start anew. THE COMPONENTS OF RAPID PROTOTYPING One of the reasons that WYSIWYG Web editors are so popular is that they enable people to build pages quickly. skeletal shell for putting together almost any type of Web site. What makes it prototype-like is your attitude: if something doesn’t work. standards-compliant pages can be written quickly. but they are pages. have some content on hand and ideas in mind as you begin to rapidly prototype your Web site. when I am building a new site.”1 Rapid prototyping requires three things: • The RPK.122 HOW TO DESIGN AND WRITE WEB PAGES TODAY can devote yourself to the site’s ongoing improvement and expansion over time. I call it prototyping. and serve as all-in-one development environments. modify it. lightweight. I have released the RPK under a permissive open-source license. or easily revised. but this activity builds more than a throwaway prototype like you would get from wireframing or mockups. The pages that WYSIWYGs spit out may not be standards-compliant. which is a flexible. too. The best preparation for building a Web site is to gather and create as much of the site’s content as possible (knowing. Otherwise. It is actual content that drives the design of your site. that content will change over time and based on your design).” For this reason. . As Chapter 3 urged. This is the real work of building your site. “be ready to start over at least once. so you are free to use it for any kind of site. These files and folders will help you transition from the sketching and planning aspects of your site development to full-on site creation.

templates. with modifications as necessary (which is exactly the point of the RPK: it’s a start. including the site that supports this book. there are versions available for Linux and Mac. But if you’re looking for an open-source program for creating and extracting ZIPs and other compressed/archived files. plugins. • A development notes any changes. I started working to build a kit that would put a lot of things in place that I would otherwise be writing from scratch. So in all of my XHTML sites. but you will still have to modify it to suit your own needs). which expects only steady progress and learning (and lots of mistakes). That is actually how the RPK came to be: instead of reinventing the wheel for each of my Web projects. and customize the kit on any operating system ( PROTOTYPING 123 EATING MY OWN DOG FOOD Many open-source projects try to live by a phrase that I have come to love: “Eat your own dog food. I frequently make subtle improvements to it. most operating systems have a built-in utility for unzipping files. etc.) for others should use the materials themselves. Mac OS. Linux) using any good text editor. (Because I use the RPK in my own Web design work.1). The companion site at http://sus tainablewebdesign.” The idea behind this phrase is that people who create digital materials (software. you might consider 7-Zip. THE RAPID PROTOTYPING KIT The Rapid Prototyping Kit is nothing but a small collection of files and folders for quickly building a Web site (see Figure 11. which should be comfortable for you to use but experimented with as part of learning (see Chapter 5). not perfection or instant mastery.2 Although 7-Zip is a Windows program in origin. • A long-term attitude toward writing and designing for the Web. too. I have eaten my own dog food: they are all based on the RPK. You can download it from the Web site as a ZIP file (. manipulate. although the . You can open.

the Rapid Prototyping Kit includes folders for every kind of site content that you might wish to post. or even html/ once you get to the point of uploading your site (see Chapter 23). which is discussed in Chapter 20). which are described below. this is a view of the contents of the htdocs/ folder. especially if you build and test your site using the XAMPP Web server (see Chapter 20).) The Rapid Prototyping Kit Folders Once you extract the RPK’s ZIP file. version of the RPK used in this book will always be available. Below is a rough outline of the RPK as of the writing of this book. htdocs/ contains several folders as listed in the “Essential Folders” sidebar in Chapter 5. You can browse the RPK’s files on the Web. The htdocs/ folder is a root Web folder.124 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 11.1. In addition to two XHTML files. you will find a folder called htdocs/ (named for easy use with the XAMPP Web server. In short. But for development and experimenting purposes. . Depending on your Web host. httpdocs/. you might need to transfer the contents of this folder to www/. which contains all of the files and folders that make up a Web site. htdocs/ will be fine.

htm is what will help you begin to structure your site’s page content immediately. content. share a few common areas: • A header with the site name and branding • A content area that may consist of one or more subdivisions of content • A navigation bar or menu to help users find their way to other pages on the site • A footer area with copyright and licensing information and other information about the page or site The next several chapters are devoted to breaking down and considering the purpose and potential design approaches to those structures. footer—would make sense and be useful even if there were no design elements on the page.htm. or if the page were being read aloud to a low-vision user (see Figure 11. navigation. This file is named prototype.htm file also reflects a sensible source order. For example. The Rapid Prototyping XHTML Files In addition to a folder structure intended to help you organize your site’s content. it may surprise you that the navigation appears so far down in the source order of the page.) Composed mostly of <div> tags and some accessibility features. Most Web pages.RAPID PROTOTYPING 125 (Chapter 20 provides guidance for adding your own folders to structure and organize your site architecture. most Web sites feature their navigation areas near the top of the page. (There is also a file. . prototype.2). regardless of their purpose. meaning its ordering of content divisions—header. it provides workable solutions to keep the contents of your site organized. and enable you to build CSS over the top of that structure for a standards-compliant page design. After all. With CSS positioning. The prototype.) The RPK’s folder structure can be changed as needed. the RPK includes an XHTML file containing a global structure for all site pages. prototype-with-comments. but if you are new to Web design.htm. which are shared across all pages in your site. that has the same structure but that explains in detail all of the prototyping features.

It gets rid of all the margin . the Web browser itself is actually styling the page with its own built-in set of CSS styles (see Figure 11.htm visible in the Notepad++ editor. The Rapid Prototyping CSS Files One of the reasons I’ve found that beginners struggle with CSS design is that it’s often a toxic mix of designing for a page. That is why the RPK contains the Yahoo! Reset Min CSS file (reset.3). however.4). text-only users (who can jump down the page to the navigation using special accessibility links discussed in Chapter 14).css). And that makes cross-browser CSS design unnecessarily frustrating. even for simple things like styling text. A part of prototype. but against the browser. it is possible to place the navigation wherever you would like it to appear on the page—while keeping the source order friendly to search engines and low-vision. every browser is a little different in its default styles. revealing the file’s source order. When you view a plain XHTML file. without any of your own CSS styles. And as luck would have it.126 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 11.3 which has the effect of removing any styles that might be added by a Web browser (Figure 11.2.

htm looks like without any styles of its own. The same page as Figure 11. Figure 11.Figure 11.3. .4.3. but with the Reset CSS in place. and therefore styled by the Firefox’s default CSS styles. This is what prototype.

italics back on the italic.5. or lists. If you need bullets next to your unordered lists. . and puts a dotted border back on the acronym and abbreviation tags.css that adds back some of the common styles that the Reset CSS removes (see Figure 11. The idea behind this is that you are now free to style your page exactly as you want it to appear. Specifically. The basic lesson from the Reset CSS is that you have to specify everything about your design—even things like bold on tags where you would expect bold. paragraphs. which also lack even bullets.4. Everything else is completely unstyled: there is no space around any of the headings.128 HOW TO DESIGN AND WRITE WEB PAGES TODAY and padding around elements. you have to specify them in your CSS. This is how prototype. To account for that.3 and 11.5). htm will look when you first open your own copy. and cite tags. removes all of the font sizes on the different headings. If you do not wish to use the base styles. and even removes bold and italic styling from tags that would otherwise be bold and italic in most browsers. emphasis. remove or adjust them. the RPK also includes CSS at the top of screen. It’s potentially Figure 11. it puts bold back on the headings and the bold and strong tags. but with some base CSS styles added back in after applying the Reset CSS. for example. The same page as Figures 11.

htm so that you can . If. WRITING AND DESIGNING WITH THE RPK Chapters 12 through 18 cover the specifics of working with different parts of your pages.js that are useful for all kinds of sites and that are explained in Chapter 19. For adding those and other custom styles. there is a screen. no problem.js. your content may force you to rethink your page design. where you can write the JavaScript for your own site. 14. every writer should address each of these tasks as part of Web writing and design. and preparing some images and media (see Chapter 3). branding and rough navigation. site. Note that this is rarely a linear process. jquery/. but here is a rough outline of how to proceed in your Web writing and design using the RPK. I have included some functions in site. and 15) and save it as my-prototype. and navigation chapters (Chapters 13. But if you do want bullets. and vice versa.css file that is empty except for the base styles mentioned above and some useful selectors (see Chapter 10) for styling particular content areas and structural features found in prototype. you can be more confident that they will appear as you intend across standards-compliant Web browsers. branding. for example. with or without the RPK: • Generate and gather your text and image content.htm file according to the guidance in the metadata.htm. yes. • Set up your basic metadata. will allow you to accurately describe the structure of your page content as discussed in Chapters 16 and 18. You will need to have structured XHTML available before you can test your design work in CSS. inside of the js/ folder and a JavaScript file. Still. Edit the prototype. for example. They’re not there anyway. Rapid Prototyping JavaScript Files There are two JavaScript files in the RPK: the jQuery JavaScript library.4 which has its own folder. but only if you want those and other design features to appear. so drafting your page content.RAPID PROTOTYPING 129 extra work to add bullets. you want no bullets next to your navigation list.

paragraphs. not the site’s actual look: Where will the header and footer appear? The navigation? Your content and subcontent areas? Your rough sketch will guide your work in Chapter 17 on page layout. Use an image editor to build in textures and background images. start tagging it with XHTML. I recommend starting with an “About Me”–type page. but it is often very different from the content pages of a site. and you had to slide things around in order to get the picture to look the way it’s supposed to. Use CSS to position your page elements. Be prepared to adjust your typography later on to maximize readability according to your page layout. but its contents will also help you to figure out what other pages to include in your site. reusable set of shared content features. particularly widths. Mark up your text and image content in XHTML. As Chapter 17 demonstrates. Once you have a rough draft of your content. Choosing fonts and font sizes.) Develop a representative page from your site. not only will that likely be representative of your site’s other pages. CSS layouts are basically illusions. Begin to develop site typography. and lists (see Chapter 16). as well as line heights. The urge that most designers have is to start with the home page.130 HOW TO DESIGN AND WRITE WEB PAGES TODAY • • • • • • create pages based on your own starter page that has most of your shared page features in place. for the different elements on your page. where there were nine spots for eight pieces of an image to go. sort of like the little slider puzzles you may have had as a child. just because a font is on your computer does not mean it will be available on others. (See Chapter 21 for building a more dynamic. A current list of fonts that are safe to use on the Web is available at http://sus and finalize dimensions. particularly its headings. This is mostly about geography. will help you to get your page into a shape that makes it readable and lead you to creating a site style guide for text (see Chapter 16). This is where you work to really . Sketch out a rough layout for your site.

RAPID PROTOTYPING 131 build the look and feel of your pages. too. Beginners in my Web design classes tend to write way more XHTML markup and CSS styles than are necessary. • Think about relationships between your page elements. }. and expect that interesting pages will have lots of markup and CSS styles. always in draft form. where two or more tags mark the same content. you can use your image editor to create a striking design. You will want to make changes to your content as your career progresses. I think this happens because they are nervous about working in these new languages. Cultivating a Long-Term Attitude toward Site Development A Web site is. Once you know you are able to get your page elements to roughly where you want them. That is not true. One of the strengths of both CSS and JavaScript is their leverage of relationships between page elements. to some extent. which makes a site much easier to revise and maintain.</strong></p> text is all in But when you see that kind of markup. and you will want to update it. or as your business or organization develops over time. For example. The guidance in the chapters that follow will show you how to write lean source. though. perhaps there is a paragraph you want to display entirely in bold. Here are some basic habits to cultivating a long-term attitude toward site development (see also Chapter 8 on sustainability): • Write as little source as possible. so you write something like this: <p><strong>This paragraph’s bold. it’s time to rethink your strategy. One alternative to that use of the <strong> tag is to add a class to the paragraph. Your design might start to look dated. Don’t forget to remove the unnecessary <strong> tags from your markup. . like <p class="important"> and then in the CSS specify p.important { font-weight: bold.

which the next chapter .html 3. If you’re comfortable working with a text then move to the specific. The advice above suggests to begin site design by working with a representative content page from your site. your Web writing and design skills depend on your exercising them every so often. 2. “YUI 2: Reset CSS.7-zip. Yahoo! Developer Network. jQuery. revised and expanded ed. NOTES 1. as your schedule allows. 7-Zip. (Sebastopol. Coming back to your site regularly. you can design pages that are slightly different. Chapter 13 suggests using a class on the body tag to give you a hook to style different types of pages. NEXT STEPS To build and edit your pages with the RPK requires only a simple text editor. http:// jquery. while maintaining lean source and a single CSS file. Do More JavaScript Library. such as the home page. The Cathedral and the Bazaar: Musings on Linux and Open Source by an Accidental Revolutionary. Eric S.” http://developer .com/yui/reset/ 4. you may want to skip ahead to Chapter 13. jQuery: The Write Less. 2001).132 HOW TO DESIGN AND WRITE WEB PAGES TODAY • Think about the general. • Devote a little time every week or so to improve something on your site. From that.” http://www. this helps you think about what most pages will include structurally and how they will be CA: O’Reilly Media. “Download. will keep your current skills fresh—and help you to learn new ones (see the “Resources for the Future” section for material that will advance your abilities beyond this book and keep you current on the latest and best approaches to Web design). 25. Like any other skills.

1). you know that sometimes. The WYSIWYG acronym’s popular usage aside. And that means that. The important thing about a text editor. nothing you write and nothing about your Web pages is hidden from view. A paragraph gets a bullet point next to it.CHAP TE R 12 Writing with Source in a Text Editor If you’re used to writing in a word processor or a WYSIWYG Web editor. even alarming: word processors and even email programs have conditioned us to write with a lot of machine assistance. one of the first things that may strike you about writing in a simple text editor like TextWrangler or Notepad++ is the relative lack of buttons and other screen clutter (see Figure 12. with even a little bit . If you’ve ever used a word processor. but again with no apparent or apparently fixable reason. And that’s what you do in an editor: you write. For no apparent reason. like the Web pages that you create with it. what matters most is what you write yourself. in an editor. what you see really is what you get—at least in terms of the sets of instructions that browsers turn into Web pages. weird things happen. this lack of buttons can be disorienting. particularly for formatting. In the text editor. Most people confronted with such a situation will just start a new document from scratch—or live with the weirdness. and nothing you do to appease and reassure the software seems to remove the bullet point. A paragraph changes font right in the middle. is that there are no hidden mysteries. At first. In a text editor. But the text editor’s simplicity is actually a good thing.

or on your Web server via an FTP program. of source literacy. in most situations.css . that is. it’s important to understand that there are many different views of the same Web page. open and empty. The Notepad++ editor. The text editor is very good at managing its particular view of the page’s source. MANY VIEWS To understand why someone would want to roll back to a piece of software as primitive as a text editor.2). when something is wrong with one of your pages. to separate the languages that make up your pages into individual files: CSS in . you have maximum control over your pages. It is best practice.134 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 12. But there are three views to monitor as you write your pages and build your site: • File View: The listing of files and folders provided by your computer’s operating system. the list of files that make up your Web page or Web site (see Figure 12.1. you can be certain that it’s something you can fix. More important. is the file view. ONE PAGE.

Looking at the source of other pages on the Web is a great way to learn how other people build pages. as discussed in Chapter 2. and so on (be sure that you have configured your operating system to show all file extensions. as displayed by the operating system: in this case. you are looking at the file’s source view (see Figure 12. unique view of a given Web page. the link between the two actually works (see the discussion of links and paths in Chapter 20). a CSS file. each browser or mobile or adaptive device provides a different. You can also access the source view of any page on the Web by choosing something like View > Source from within a Web browser. like an XHTML page.js files. . However.3). like an image. files. see Chapter 5). an XHTML file. to another file. The file view also guides you in how to write URLs so that when you write a reference from one file.4). • Source View: When you use your editor to open up an XHTML or CSS file.WRITING WITH SOURCE IN A TEXT EDITOR 135 Figure 12. and a PNG image file.2. The file components of a simple page. the browser view is how pages display or render in a browser itself (see Figure 12. • Browser View: This is how we usually experience Web pages. JavaScript in .

. thanks to the instructions in the XHTML file. which references the CSS and image files. The source view of an XHTML file. which links to the CSS file on Line 6 and the image file on Line 17. The image file is actually a screen shot of the file view in the Ubuntu Linux operating system.Figure 12.3. Figure 12. The browser pulls all the files together.4.

5. source. screen resolutions. A missing angle bracket on line 16 causes Notepad++’s syntax highlighting to colorize all of the following text as though it were a tag. But regardless of those details. though. makes writing XHTML. better known as syntax highlighting. source. Windows. depending on details such as your operating system (Mac OS. SYNTAX HIGHLIGHTING Good text editors can provide more than views of source in simple black and white text. CSS.WRITING WITH SOURCE IN A TEXT EDITOR 137 Each view—file. Available fonts. Good editors will Figure 12. Despite their general lack of features. Linux). . then study your source more closely. and your content more comfortable and efficient. your editor (TextWrangler. and your browser (Firefox. and browser—will be slightly different. Syntax highlighting provides a set of visual cues about the contents of your files. Colorized text. and even display types (LCD panels or older CRT displays) all affect views. what each view represents in terms of your site’s files. JavaScript. page rendering is the same. one feature that any good text editor will have is syntax highlighting. Notepad++). To fix these kinds of errors. Safari). watch for the line at which they start. Chrome.

g. coloring tags blue. which visually wrap text onto new lines in your text editor’s particular view of the file. similar areas of the page—look for the spot at which the change begins. What does matter is the differences in color from one feature of your source (e. text content). without breaking the text onto the next line. and so on.5). The other option is to create hard breaks by hitting the Enter/Return key on your keyboard. Source formatting. SOURCE FORMATTING Unlike word processors. tags. which format text to a particular printed page size. with tags colored differently from the text content that the tags structure. attributes) and another (e. If you view the file’s source in a browser.. if you forget to put a closing angle bracket on a tag. green. the colors for tags or attributevalues will colorize everything that follows as a tag or attribute-value (see Figure 12. is a necessary skill that you will develop over time as you work with your editor..g. But soft breaks are not saved with the file itself. If you begin typing a paragraph or long sentence in an editor.138 HOW TO DESIGN AND WRITE WEB PAGES TODAY display XHTML files.. or a closing quotation mark on an attribute-value. For example. text editors have no associated page or screen size.g. Hard breaks are special characters that are stored . It’s more than likely that you will find the source of the problem nearby. If the syntax highlighting of a page suddenly stops changing over a large stretch—or otherwise looks different from other. Attributes and attribute-values may be colored differently from the tag element. The colors for syntax highlighting vary from editor to editor (e. it will often continue on the same line for as long as you keep typing. Some editors will create so-called soft breaks. it will appear as one 10-mile-long line. Line Breaks There are a couple of different options for handling line breaks. or the style of line breaks and indentation you use to keep your source readable. or purple). This is an important way to track down the simplest and most common errors that most of us create when we write Web pages. the individual colors do not matter. for example.

but suffice it to say that the preferred break for files destined for the Web is the linefeed character. If you open up older files. these break the lines of your source for anyone viewing it (including people who choose the View > Source option in their Web browser). including Newline .WRITING WITH SOURCE IN A TEXT EDITOR 139 in a file. between Windows. but running out to 100 characters is fine. such as OS X and Linux. Mac OS. here goes: Carriage Return and Line Feed. and change the current file to Unix. is the double character inserted by Windows editors. Most Windows editors. CR+LF. Line length is. what it results in most often is text files appearing double-spaced on LF systems. Your editor can probably set up a visual onscreen guide to show you where the 80or 100-character mark is. including and especially the Linux or Unix-like operating system that will probably be run by your Web host.) For those troubled few who find this discussion fascinating. and Linux. This is primarily a Windows issue. too. you’ll find a piece of living history. or might move. It is preferable because it works well across all operating systems. AND CR: THE MOST BORING SIDEBAR IN THE BOOK So I have been telling a little bit of a lie so far. There is one thing that you cannot see in a text editor—or that you usually don’t see. If you’re struggling to stay awake. you can always choose Edit > EOL Conversion. In Notepad++. LF. Make sure you choose Unix as the default format. allow you to specify what character should be used for new lines. go to Settings > Preferences and then find the New Document/Default Directory tab. (EOL means “end of line. in source formatting as in page design. you can skip back to the main text. It is tradition to put hard breaks in source files after 80 characters. (CR by itself is basically ancient.wikipedia. so you know when to hit Return. a matter of reading comfort. LF. consult the Wikipedia page for Newline: http://en. or CR+LF. But if you’re interested in a little history/trivia. as Chapter 5 suggested. the details are below.”) Doing so will make work easier for you and your collaborators if you move. unless something has gone very wrong: the special character that different operating systems put in text editors when you hit the Enter key for a line break. although if you want to fire up your old Apple II or even a Mac OS 9 machine.

white space (spaces. spaces. hard breaks) in XHTML source (Figure 12. Indentation Another means for making source more readable is to use indentation. Tab characters are easier to delete and reformat than a whole bunch of spaces—plus it’s usually possible to tell the text editor how wide to Figure 12.6) is not reflected in the browser’s rendering of your page (Figure 12. as you can change this to whatever you wish.) Format your source in the source view of your editor however you’d like. Look through your editor’s preferences. to indent paragraphs. tabs. and line breaks in the source. while others will insert actual tab characters. Some text editors will insert multiple spaces for each strike to the Tab key. . Except in a very specific instance (the <pre> tag).6. The same paragraph. use the CSS text-indent property. formatted three different ways using tabs. (This means that inserting a tab or five spaces at the beginning of a paragraph will not indent your paragraph. it will render the same in a browser view.7).140 HOW TO DESIGN AND WRITE WEB PAGES TODAY You can also put in breaks whenever it helps make your source more readable.

CHARACTER ENCODING: UTF-8 WITHOUT THE BYTE ORDER MARK (BOM) Another invisible matter your text editor will handle is your text file’s encoding. except you should actually choose “Encode in UTF-8 without BOM. which are common default encodings). . Despite the differences in source formatting shown in Figure 12.” which sounds right.WRITING WITH SOURCE IN A TEXT EDITOR 141 Figure 12. most editors provide some way to convert encoding to UTF-8 without the BOM. while you should specify UTF-8 as the encoding in the metadata for your XHTML pages (see Chapter 13). though. have an Encoding menu. and without a pesky little creature called the Byte Order Mark (BOM). if you accidentally save a file with the wrong encoding. such as Notepad++. Watch carefully. Notepad++ has an option for “Encode in UTF-8.” Check also for setting up the default encoding of your files in some kind of Preferences menu in your editor. you must make sure that your text editor is actually encoding UTF-8 (not ANSI or ASCII.6. Most editors. all three paragraphs display exactly the same in the browser view.7.

} How your format the source for your XHTML. but that makes source more readable and understandable over time. } Some Web designers even like to indent selectors to visually track which styles appear within other styles: div#content { width: 500px. But you can find passionate. But it will have a major impact on your ability to collaborate with others. } div#content p { font-size: 14px. by the way. } div#content h2 { font-size: 26px. font-size: small. </p> </div> Likewise. and even how easily you are able to read and understand your own source later. because in most cases. sans-serif. here is a heading two and paragraph tag nested inside of a division tag: <div class="tip"> <h2>Indentation Makes Source Readable</h2> <p> However.) Whether by tab characters or spaces. (The RPK is indented using spaces. CSS. Arial.142 HOW TO DESIGN AND WRITE WEB PAGES TODAY display a tab. } div#content p a { color: green. indentations and line breaks can help make CSS source more readable: body { font-family: Helvetica. . some text editors require you to do your indentation manually. COMMENTING ON YOUR SOURCE Another feature that has no effect on page display. is comments. indentation makes XHTML more readable by making nested tags even more clear. and JavaScript is up to you. it has no impact on how your pages display. almost religious discussions across the Web where people debate indents-as-spaces versus indentsas-tabs.

that close the comment. but it will also help you to think through what you are doing. (However. In XHTML. If you describe. Many teachers will tell you that they never really learn a subject until they’ve taught it to . in the comments. what your source means and what you intend it to do. For example: <!--Here is a comment in XHTML. To help make your pages more sustainable.and end with -->. you will deepen your understanding of how Web languages work. you can also write comments to your source. it’s wise to get into the habit of commenting on your source. So in addition to formatting your source for readability using line breaks and indentation.) CSS and JavaScript both use a slash-star (/*).--> XHTML comments are not rendered on your page in the browser. hide links that are used to skip to different page sections*/ Here are some general tips for writing useful comments: • Write comments as though you were trying to teach or explain what you’re doing to someone else. it is actually the two hyphens. too): a. This is a hard habit to break for those of us who use two hyphens in email to mimic an em dash. so do not use a double-hyphen in your comment text itself. --. nor is the browser affected by their contents. When written well.WRITING WITH SOURCE IN A TEXT EDITOR 143 Every computer language has some sort of syntax for writing comments that is meant for humans.skip { display: none. comments begin with <!-. } /*For fully graphical screen displays. star-slash (*/) pattern to start and end comments: /*Here is a comment in CSS*/ /*Here is a comment in JavaScript*/ Writing Useful Comments Writing useful comments is an art of writing all its own. not computers. comments can explain aspects of your source (you can also throw in line breaks and tabs on your comments. Not only will comments make it easier for you to edit your pages in the future.

Writing comments that attempt to teach and explain will help others who might look at the source of your pages— and it will help your future self. A better approach is to refer to actual structural features that can be found using a text editor’s search function: <!--This closes the <div id="gallery"> tag from above:--> </div> • Ask questions or set to-do lists for yourself or others you are working with. for example. But few of us can remember that #FF3399 is hot pink. • Provide human-readable information to accompany information for the computer. who will probably have forgotten why some feature of the page was written to begin with. <!-Can someone please check the XHTML . Consider a comment like: <!--This closes the <div> tag from line 15:--> </div> It will only be true so long as no lines are added or removed before line 15. you usually specify colors by numbers—either hexadecimal or RGB (see Chapter 10).144 HOW TO DESIGN AND WRITE WEB PAGES TODAY others. Some designers even write color references at the top of their CSS so they know which numbers to write: /* Colors in #339900 – #FFCC33 – #993300 – */ this Design: Deep Green Sandy Orange Deep Red • Be careful about referring to line numbers in your comments. Having a question or to-do item in with your source is just more convenient than having it stashed away in a notebook or an email. In CSS.

you prepare for testing and possibly further revision. But the long-term benefits to your sanity outweigh the inconvenience. --> 145 • When you update the source. an ongoing process of learning. or any other machine reading the source: p { width: 100px. Commenting Out Problem Code Comments can also be used if you have some sort of problem with your pages. you could just delete the problem source. it can be time-consuming to update the explanation that goes with each change you make. it’s probably better if you delete it. their effect is the same: to hide the content from the browser. if you determine that the source you’ve commented out will never be revised.*/ } /*The padding is changing the width. But by just commenting it out.WRITING WITH SOURCE IN A TEXT EDITOR below? It's not validating for some reason. Comments can contain source code just as easily as human-readable messages. so I've commented it out for testing purposes. As you work on your pages and read through the remainder of this book. and using comments to explain to yourself what it is that you have written. like all aspects of Web writing and design. keep in mind the practices suggested in this chapter—particularly indenting and formatting your source. the validator. while keeping the Web browser from reading problem source as you test.*/ Yes. and you’re trying to isolate the problem. (Although eventually. but I don't understand the error output from the validator. Like all commenting practice. update the comments. Trust me. The remaining chapters in this section of the book get into the specifics of individual components of page writing and design. We will set . /*padding: 50px.) NEXT STEPS Working with your text editor is.

we look at how to build a usable site navigation (you will also want to revise it as you work through the site architecture chapter. The chapter on page layout brings the content. In the navigation chapter. and the chapters on multimedia and performance and interaction will look at ways to enhance your pages for cutting-edge devices—while still meeting the accessibility needs of all users. and navigation elements together. Chapter 20). branding.146 HOW TO DESIGN AND WRITE WEB PAGES TODAY up and inspect some basic page metadata before delving into page content and text styles. . The chapter on branding will look at the headers and footers that appear on all of your pages and some interesting CSS techniques for image replacement and hiding elements.

advanced metadata topics for sharing your content in Chapter 24. which all browsers understand. which is used in the RPK’s XHTML files and appears at the very top of each XHTML page. there are some additional. Search engine spiders. This book advocates the XHTML 1. both of these attributes take the value of en. appear in CSS or JavaScript files. which in turn improves your site visitors’ experience. every page should begin with a DOCTYPE declaration.0 Strict DOCTYPE. however. (The Library of Congress has a . (It does not. which newer browsers understand. For English-language Web pages. and even sites like Facebook and Diigo can make use of your pages’ metadata. and two tags that specify the language of the page: xml:lang. that should be obvious— but I’ve seen more than a few beginners put DOCTYPE declarations in their first CSS files. DESCRIBING THE CONTENTS OF YOUR PAGES As we saw in the basic rules of XHTML in Chapter 9.CHAP TE R 13 Page Metadata Well-written XHTML pages include a variety of metadata.) The <html> tag in XHTML strict should have three attributes. Web browsers. This chapter looks at essential metadata for describing the contents and construction of your site’s pages. xmlns which specifies the XHTML namespace using the XHTML specification’s URL as its value. those that don’t trigger what is known as quirks mode rendering in browsers. and lang. which is information about the contents of each of your pages. one.

I add a unique ID of karlstolley-com. For example. the W3C specifies that you must use the two-letter code.148 HOW TO DESIGN AND WRITE WEB PAGES TODAY page that lists all of the language codes according to the two-letter ISO 639-1 and three-letter ISO 639-2 standard. has a particular Multipurpose Internet Mail on each of your pages will allow visitors to write custom CSS to change how they view your site.5) Web servers share . MIME type. my completed <html> tag looks like: <html xmlns="http://www. (Search the Web for lists of MIME types.4 THE HEAD AREA: PAGE METADATA Although none of the content in the <head> area of a page is displayed in the browser viewport. known as a CSS signature. and the links to your site’s CSS and JavaScript" xml:lang="en" lang="en"> The RPK contains one additional attribute-value pair on the <html> tag: a unique ID whose value should be the domain name of your Web site. the Web site Webmaster Toolkit maintains a very good" xml:lang="en" lang="en" id="karlstolley-com"> Adding that unique ID. a metadata-rich <html> tag opening a Web page written in English will look like: <html xmlns="http://www. often by using a browser plugin such as Stylish for Firefox.2) So. my Web site’s domain is karlstolley. the title of your pages. if you are writing a page in a language other than English. as dots are not allowed in ID or class names. Specifying the Content Type Almost every kind of file. from Word documents to JPEG images.1 If both two-letter and three-letter codes are listed for the language you are writing in. So.w3. the head affects the display of page content in the <body> area. on all of my site’s pages. replacing the dot with a hyphen. or more simply. The most important metadata to include in the <head> specifies the character set of your text content.w3.

character set. however. such as Web browsers. the content type should actually be application/xml+xhtml. or charset. charset=utf-8" /> The other crucial value in that tag. because certain browsers do not understand that content type. (Note that in XHTML. so that content can be displayed correctly and by the appropriate software application. The basic HTML MIME type is text/html and can be used with XHTML.1. the content type must remain text/ html for the time being. which is a limited set of characters used by older computers (see Figure 13.) Your Web pages should all have a <meta> tag that reads: <meta http-equiv="Content-Type" content="text/html. . UTF-8 is a much larger character set and lets you use fancy Figure 13. Mismatched character sets cause special punctuation marks and symbols to display as clusters of garbage characters. is the UTF-8. or Unicode. in addition to the text/html MIME type.1).PAGE METADATA 149 MIME type information with other computers and software. Older Web editors often set a default character set of ISO-8859-1.

. which must be done in addition to specifying utf-8 in your XHTML documents. Figure 13. and your site should not have any problems like that. you can include text with special characters without having to use XHTML entities. and other character enhancements that word processors often add to text (see Figure 13. BOM). em dashes. By specifying the UTF-8 character set and setting your editor to properly encode the XHTML file (UTF-8 without the Byte Order Mark. See Chapter 12 for a discussion of setting your text editor to encode your text files as UTF-8 without the Byte Order Mark (BOM). Specify utf-8 as described in this chapter.150 HOW TO DESIGN AND WRITE WEB PAGES TODAY typographer’s quotes (instead of straight quotes).2.2). UTF-8 also makes it possible to write special characters from languages other than English. like Welcome to Jim?s Web site the root of the problem is usually a mismatched character set. MISMATCHED CHARACTER SETS If you’ve ever gone to a Web site where most of the punctuation appears as question marks or empty boxes.

on browser tabs (on browsers that support . &quot. they are not easy to remember. The text you write there appears in the title bar on most browsers. RSS is limited to a much smaller collection of entities. But entities may make your content less portable. to display < &gt. However.PAGE METADATA 151 Character Entities The XHTML specification allows for particular character entities. because it is used to indicate the start of an entity (using the ampersand by itself with throw an error in the XHTML validator. SPECIFYING A PAGE TITLE The first piece of human-readable content on your pages is written in the <title> tag. which a browser will display as a special character. For other characters. With a good entity reference. and the straight apostrophe. any XHTML entities beyond that collection will probably cause your feed to malfunction.. &apos. although they are essential for use in JavaScript or in your <meta> tags for sharing (see Chapter 24) unless you use the typographer’s (sometimes called “smart”) quotation marks—along with the UTF-8 character set. for example. particularly if you are reposting your content as an RSS feed. then. to display > &amp. are the three characters for which you must use entities: &lt.. to display & There are also entities for straight double quotation marks. XHTML entities are worth avoiding for a few reasons: first. The only case where you must use entities is for angle brackets. These. To display a copyright symbol in the browser. You can just use the character directly in your source. and the ampersand. too). you could write the XHTML entity &copy. most word processing programs will create these characters automatically (such as typographer’s quotes. you do not need to use XHTML entities except the three listed below. which would be interpreted as part of XHTML tags. or even the copyright symbol if you type (c)).. You rarely need to use those. With the UTF-8 character set. you can go to the character map or other listing of characters on your computer.6 that may not be a problem.

I prefer to put the unique page title first. followed by the site name: <title>Title Bar Example – Sustainable Web Design </title> The reason for the page-before-site order is that the contents of <title> tags may be shortened in browser tabs. .3. particularly if someone were to have more than one tab opened to a page on my site.) Figure 13. The title tag should contain both the specific title of each Web page plus the name of your site. The contents of the <title> tag appear in Firefox’s title bar and on the tab. but it’s important to dream. and in browser bookmarks. or site title then page) is a matter of personal preference.152 HOW TO DESIGN AND WRITE WEB PAGES TODAY tabbed browsing).3. The content of the <title> tag is also the clickable link in the results list of most search engines. Which order you put them in (page title then site. (See Figure 13. and I prefer to have the unique part of the page title visible. Not that that happens with my site.

In addition to branding your pages with your site’s name in the <title> tag. Both 32px and 64px work well because they are multiples of 16. it is important to save the file at 16px by 16px. Some symbols. and more recently. the double-angle quote (»). See http://www.webaim. you may have to use some kind of conversion utility if your graphics editor will not save as . or with your page listed in a series of browser bookmarks. my . While it is possible to store favicons in a default location and in a default format that will be picked up by some Web browsers. “fave icon”). on the tabs of some tabbed browsers. you can also specify a shortcut for other tips on designing pages that will work with screen readers. or what’s more commonly referred to as a favicon (pron. (If you wish to use ICO. However. you run into the problem of identifying your site uniquely to someone with multiple tabs open in her browser. so most Web designers will create the icon at 32px by 32px. However. which means that their reduction down to 16px will be clear and crisp. or sets of colons (::) can be trouble for users of screen readers.) When creating your favicon. LINKING TO A SHORTCUT ICON OR “FAVICON” If you find that you prefer to put a unique page title before your site name in your <title> tag. and reduce the image dimensions down to 16px by 16px. it is difficult to design a good favicon at that size. A favicon is a small image that provides a branded icon for your site. JPEG. more recently. PNG.PAGE METADATA 153 DON’T DESIGN TITLES WITH PUNCTUATION Web writers sometimes use punctuation to visually separate the title of the page from the site name. Writing titles with a single colon or a hyphen is a more accessible way to subdivide the portions of the content you put in the <title> tag. such as the pipe (|). These often appear in browser address bars and. or even 64px by 64px. It is possible to specify a favicon that is in any number of formats: the original ICO format or common image formats including GIF. Internet Explorer—even as of version 8—only displays the ICO format. which may pronounce or describe the symbols.

it traps the CSS and JavaScript in individual XHTML files. One method is to use the <script> tag for JavaScript and the <style> tag for CSS in the <head> area of your Web pages. this keeps pages uniform and revisions to your design a simpler activity than if you write the same JavaScript or CSS in each XHTML page. • By sharing the same set of . your <head> should include the full URL to your icon in a <link> tag: <link rel=" icon" href="http://example.js or .css files across your pages. Those allow you to write JavaScript or CSS code directly in your XHTML file.g. your site visitors’ Web browsers only have to download each . e. To design and enhance XHTML pages with CSS and JavaScript.png" type="image/png" /> <!--For Internet Explorer. image/gif for GIF favicon. A better method (and the one advised in this book) is to keep your JavaScript and CSS in separate files. you must use XHTML to refer to your CSS and JavaScript. So to explicitly state the location and type of your favicon. and link to them from the <head> area of each of your XHTML pages.ico" /> If you opt to use PNG or another format.js and . no type must be specified--> <link rel="shortcut icon" href="http://example.. it must have the proper MIME type associated with favicon.css file will be reflected across your entire site.154 HOW TO DESIGN AND WRITE WEB PAGES TODAY preference is to specify the location explicitly in the link tag. There are two important advantages to linking to JavaScript and CSS files: • Changes to a shared . LINKING TO CSS AND JAVASCRIPT FILES XHTML pages are only the structured content of your site. The <head> area of your XHTML pages provides two different methods for enhancing your site with CSS and JavaScript. Although that method can be helpful for quick drafts and tests. Favicons are important enough to site branding that I prefer not to leave their appearance to default browser behaviors and therefore to chance. That method therefore fails to scale with your site—and makes revisions to design and scripting more time-consuming and repetitive.

even though the concept behind linking to CSS and JavaScript files is the same. text/css is the MIME type for CSS).js or . for example.css file has been downloaded. however. the Rapid Prototyping Kit (RPK) loads three different style sheets for the screen using this method (see Chapter 11). you must use the src (source) attribute instead of href: .PAGE METADATA 155 file once. it is essential to tell browsers what type of script you’re linking to.css" media="screen" /> Note that you can load multiple style sheets on a single XHTML page just by adding additional link tags in the <head>. they each use different XHTML. when linking to external scripts. no matter how many pages on your site they view. to link to the script. while the media attribute allows you to specify whether the style sheet is for the screen. Linking to JavaScript Linking to JavaScript files is done using the <script> tag (as with the on-page method of writing JavaScript described above). shared design and scripting files dramatically improve your site’s performance. Like the <link /> tag for CSS. for printing. A complete link to a style sheet for screen design looks something like: <link rel="stylesheet" type="text/css" href="/css/style. Linking to CSS Links to CSS are created using the self-closing <link /> tag with some special attributes: rel="stylesheet" tells the browser the link is to a style sheet and type="text/css" specifies that the style sheet contains CSS instructions (and yes. Once the . However. However. the browser caches the file—meaning it makes a copy on the visitor’s computer. On slow Internet connections or mobile devices. because only the XHTML and content of subsequent pages have to be downloaded. the <script> tag opens and closes but remains empty. or other formats. That speeds up the performance of your site. The href attribute points to the style sheet’s location. In one of the little idiosyncrasies of XHTML.

For example. a resume page would probably be linked from a Resume item in the site navigation. Chapter 15 notes that you can even use body classes as part of wayfinding (see Chapter 7) by styling the navigation according to which area of your site a user is viewing. note that there are opening and closing tags for <script>. For example. if your site has a portfolio area. if there were something special that you wanted to do stylistically.home div#header { /*Styles for header on the home page*/ } You can also use the different elements from the navigation as classes for other site pages. Chapter 19 will also show how JavaScript can automatically add additional classes on the <body> tag. which holds all of the visible content of your page. even though they surround no content.and JavaScriptenabled users*/ } You can also use JavaScript to add other classes for users viewing sites on wide screens. that page could take <body class="resume">. the RPK adds a hasjs class to <body> if a user has JavaScript enabled: body { /*Body styles for all CSS-enabled users*/ } body. A class on the body tag gives you an extra structural hook to design pages in major parts of your site differently.js"> </script> Again. your CSS can use the home class as a hook (see Chapter 14): div#header { /*Styles for header on all pages*/ } body. you could add a class of home or overview: <body class="home">.hasjs { /*Body styles for CSS.156 HOW TO DESIGN AND WRITE WEB PAGES TODAY <script type="text/javascript" src="/js/site. Then. on the home page of a site. all of those pages could take <body class="portfolio">. such as present a larger branding header on the home page. that class can be yet another selector in CSS that . THE BODY TAG One last piece of valuable metadata is a class on the <body> tag.

Chapter 24 looks at a few additional things to place in the <head> to make your content easier to share. Remember. NOTES mime-types.mozilla.” Add-ons for national/articles/language-tags/RFC3066. Once you have done that. beginning with the branding shared across all of your pages. “CSS Signatures” (September 28.incutio. NEXT STEPS This chapter has covered some of the basic metadata that should appear in your XHTML’s <head> area. In the next chapter. 6th ed.w3.loc. “MIME Types.html .com/html/extras/entities. “Stylish. so long as they degrade gracefully (see Chapter 6).shtml 6.” http://www.” HTML. http://archi vist.PAGE METADATA 157 enables you to style your page to take advantage of wide screens or other viewing conditions. “Language Tags in HTML and http://www. Eric A.. as well as a class on the <body> tag. Meyer. “Character Entity References in HTML 4 and XHTML 1.” http://www. and CSS.webmaster-toolkit.php 2.” http://www. Elizabeth Castro. “Codes for the Representation of Names of Languages. XHTML. though. W3C. https://addons. that it’s always best practice to design your pages to be accessible and usable without JavaScript. (2002).org/ en-US/firefox/addon/2108 5. we will get to writing something more interesting: the visible content of your pages. 2002). Webmaster Toolkit. though.elizabethcastro . you can go back and progressively enhance your pages. Library of Congress.html 3. Jason Barnabe.


where they typically refer to the very top (header) and bottom (footer) of a page. the header should provide a list of links for visitors using devices with limited or no visual display to skip to the navigation and perhaps other areas of your pages. Navigation (covered in the next chapter) also plays a role in branding.CHAP TE R 14 Page Branding Branding identifies a page as belonging to your site. However. These links make the page more accessible on mobile and assistive devices. while structurally your header appears at the beginning of your XHTML source and the footer at the end. The header is also a place to offer a logo or logotype (your site’s name presented in a unique font. but might be hidden from view on fully graphical browsers. Most sites also clarify their purpose to visitors by including a short description of the site. . CSS enables you to create page designs that display the header and footer in other places. the branding of Web pages also depends on the structure and design of the whole page. the header and footer serve important and unique branding functions: • The header is the place to provide a consistent label for your pages. usually by writing your site name in an <h1> tag. Regardless of their location on a designed page. to aid accessibility. usable architecture. also known as a tagline. Although branding is usually associated with logos and color schemes. The terms “header” and “footer” come from print design. both visually and by representing your site as having a sensible. Finally. including headers and footers that are consistent from page to page. perhaps as an image) and to have that logo link back to the home page of your site.

pages’ headers and footers the same. Some Web pages may have CSS that presents a more prominent header area. For all other headings. which is the first major structural unit of the XHTML source inside the <body> and <div id="page"> tags. For strong branding. But it’s generally a good practice to design" rel="home">Site Title</a> </h1> <p class="tagline">Site Description</p> <ul class="accessibility"> <li><a href="#navigation">Jump to Navigation</a> </li> <li><a href="#content">Jump to Content</a></li> </ul> </div> In the Rapid Prototyping Kit. a description or tagline. and therefore build your reputation and identity across the Web (see Chapter 24). such as on the home page of a site. which makes it easier (and legal) for people to share and reuse your content. . The footer may also be used to provide links to validate your XTHML and CSS and perhaps to promote any libraries or software you use to create and maintain your site. <div id="header"> <h1> <a href="http://example. your name is a great choice for a site title. and accessibility links for jumping to different areas on the page. and <h3> for subheadings (see Chapter 16). if not all. Site Title The site title belongs in an <h1> tag and should probably be the only use of the <h1> tag on your site. your header and footer should be structurally and perhaps visually identical across all of your pages. If you are building a site to promote yourself. the header appears in <div id="header">.160 HOW TO DESIGN AND WRITE WEB PAGES TODAY • The footer often features site credits and perhaps a link to a Creative Commons license. use <h2>. THE HEADER The most basic page header will include the title of the site.

” to the site title. Microformats change that. If you’re creating a page for a business. such as add additional information about its home page. this link will include the full URL to your home page. a link to a Creative Commons license is indistinguishable from any other kind of link that appears in <a href=" ">. . It’s unnecessary to add obvious phrases like “Home Page of . if you are primarily running a blog on your site. club. For example. but XHTML on its own has no capacity for expressing the meaning of content. In addition to the <h1> tag. The site title in the header area complements the <title> tags in your pages’ <head> area. . then use that name for the site title. A link to a Creative Commons license can include rel="license" in the <a> tag. Usually. it’s an established convention on the Web to also link the text of the site title to the home page of your site. you might use the title you’ve given to your blog (see Chapter 22). but that it actually means that the page where the link appears is licensed under a specific Creative Commons license. indicating to search engines and computers that understand the rel-license microformat that the link not only takes someone to another destination. So for example. while adding a visible title on your page. Placing your name or that of your organization or business in a heading-one tag may also help your rankings on Google searches for your name or organization.PAGE BRANDING 161 However. . or other organization. For example.” or “Web site for . as it lets you do some unique things with your site title. you can use the rel-home microformat to indicate that the link on your site title points to your home page:1 MICROFORMATS XHTML describes the structure of">Karl Stolley </a></h1> This is one of the only cases where writing a link with your full site URL is necessary. . on my Web site. Anyone who wants to return to your home page can simply click on your site title in the branding area. . I have: <h1><a href="http://karlstolley. You can learn about many other types of microformats at Microformats.

It may even help you clarify your own sense of purpose and guide how you select and organize appropriate content for your site. consider describing your line of work or expertise.” Accessibility Links Because the RPK places the site navigation in the list <ul id="navigation"> (see Chapter 15) and page content in <div id="content"> (see Chapter 16).” Business and organizational Web sites might describe their business/ organization and clientèle or membership: “Serving the insurance needs of Northern Wisconsin”. Inc. “Assistant to the regional manager for Dunder-Mifflin.” Be wary. The RPK suggests writing the tagline inside of a paragraph tag with a class of tagline. On personal sites. For blog sites. or if you are using your site to support your job search. “Salt water aquarium enthusiast and consultant. “A blog about knitting for fun and profit. not to mention that a search on the company name may return your site. “An online community for sharing the best barbecue recipes”. the accessibility links in the RPK . rather than your job title and" rel="home"> Karl Stolley</a></h1> Site Description or Tagline A tagline briefly conveys your site’s content or purpose to visitors. “Engineering student at State University”. about including your company name: some companies have restrictive policies about employee Web sites.” A professional site may instead use your job title as the tagline: “Associate Mechanical Engineer at High Tech.162 HOW TO DESIGN AND WRITE WEB PAGES TODAY <h1><a href="http://karlstolley. Inc. a tagline is useful to include.”. in the header area of your XHTML document. “The official computer club for students at Big Brain University. the tagline should be a description of you: “Professional photographer in Seattle. though. Whether you’re building a personal or professional site for yourself or a site to promote your club. If those are concerns. <p class="tagline">. Washington”. a tagline can clarify the purpose and content of the blog: “Tracking news and views of interest to greater Chicagoland area residents”. “Fishing tips and tricks for the weekend warrior”.

. if you have your navigation marked with id="navigation". echoing and reflecting one another. the URL http://example. you can design your page header to spark visual interest in your page and visually establish strong branding. allow mouseless users (such as people on mobile phones) as well as users relying on screen readers to quickly jump to different areas of your page—without having to scroll through or to listen to unnecessary information.2).PAGE BRANDING 163 header point to #navigation and #content. Those links. known as fragment identifiers. as in this view of a page as displayed in Lynx. . Accessibility links are important in mouseless.htm#navigation will instruct a Web browser to scroll to that portion of the page (see Figures 14. page elements are usually best designed together.1 and 14. but here are some simple styling techniques that you can try Figure 14. As Chapter 17 will show. for example. One of the features of unique IDs is that you can reference them in URLs that instruct Web browsers to automatically scroll to a specific part of the page. STYLING THE HEADER Even with the simple contents of a site title and tagline. text-only environments.

3).2. Styling the Accessibility Links The first thing to do in styling any part of your pages is to hide anything you don’t wish to appear for users of graphical browsers.css file. setting the left: property to an extremely large negative pixel value basically . which removes them from the document flow (see Figure 14. One method to hide the links is to use display: none.: ul. may also hide the links from screen readers. An alternative method to hide the accessibility links from screen view (while keeping them accessible to screen readers) is to position the accessibility links absolutely. Activating the “Jump to Navigation” link takes Lynx users straight to the navigation. } The trouble with that method is that display: none. Then. out as you learn to design with CSS while you craft the branding for your site. Chapter 17 provides additional discussion of document flow).164 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 14. which you can hide from view with a little CSS in your screen. such as accessibility links (see Figure 14.4.accessibility { display: none.

and the rest of the page jumps up to where the accessibility links were. . just to show the space that it fills by default.4. the accessibility link area shrinks to fit the text of the links.3. The accessibility navigation is outlined here in black. Figure 14.Figure 14. Positioned absolutely.

/*Remove from document flow and prepare for positioning*/ /*Move way off to left. Adding a border on the bottom of div#header.6). for example. browser will not create a horizontal scroll bar*/ } Styling the Whole Header Area The <div id="header"> tag that contains your site title and tagline provides a block for styling the overall look of your header. .5. left: -10000px. A large negative left value effectively hides the accessibility navigation from view and does not affect the remaining visible page elements.5): ul.166 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 14. hiding them from view (see Figure 14. while distinguishing the header from the rest of your page (see Figure 14. div#header { border-bottom: 5px solid black.accessibility { position: absolute. moves the accessibility links way off to the left of the screen. } is a very basic way to add the smallest bit of visual interest.

a contrasting color on the text: div#header { background-color: #000.6. /*Set the background to black*/ color: #FFF.PAGE BRANDING 167 Figure 14. There is nothing wrong with using borders and background colors to design a basic header. Another simple design choice is to specify a background color on div#header and. Adding a border to the header adds a bit of visual interest and distinguishes the header from the rest of the page. which behave very similarly to background colors in that descendant elements (like the site title and tagline in the header) appear to have transparent backgrounds. if needed. /*Set the text to white*/ } As you can see in Figure 14. because no specific background color has been set on the site title or tagline. but sites that want to establish an even more unique design often employ background images. You might echo this simple design choice by adding a border to the top of the footer area. as described below. Figure 14.8 shows the header with a simple background image .7. they appear as transparent—sharing the black background set on div#header.

png').1.168 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 14. /*Always show the image at the very bottom*/ background-color: black. only one background image can be attached per XHTML element. /*Tile the image horizontally only*/ background-position: bottom left. as of CSS 2.g.*/ } Even more complex effects can be achieved by designing background images that anticipate other content areas. div#header { background-image: url('gfx/header-tiledbackground. /*Background color in case image is ever broken*/ color: white. /*Load the image*/ background-repeat: repeat-x. e. so to have. but that is tiled horizontally to fill the entire width of the header. A background color on the header appears to be shared by the site title and tagline. which are transparent (unless assigned their own background color).7.. /*Text color set to white. that is only a few pixels wide. for .

use other elements and some of the CSS positioning tricks discussed in Chapter 17. This is usually not desirable. you might write: div#header h1 a { color: inherit. Styling the Site Title Because the site title is usually a link. it will appear the same as all other links on the page. a unique top and bottom image on the content area. /*Share the color set to the rest of #header*/ text-decoration: none. } . /*No underline*/ } Then. Using its structure as a child of h1 inside of #header. just work with the h1 descendant selector of div#header: div#header h1 { font-size: 200%. particularly if your links are just blue and underlined. it will be clear why this is done with an image. example. The border at the bottom of this version of the header is achieved by tiling a background image horizontally.8. In Chapter 17. rather than a CSS border property.PAGE BRANDING 169 Figure 14. to size the text to appear larger.

/*Don't tile*/ display: block. maintains an exhaustive list of image replacement techniques at http://www.170 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figures 14. so that the image is clickable). set height and width of the XHTML element it’s loaded on to match the image (in the RPK’s case. it’s generally better to use background-image: or the shorthand background: property to have CSS load your image as the background of one of your XHTML revised-image-replacement/ that show the many ways you can replace XHTML text with images. That approach should keep the text accessible to screen readers. What image replacement does is use CSS to set a background image on an XHTML element together with some method of hiding the XHTML text from view. if you use it in the sense of “Have a look at this picture of something” and would have it appear in all cases— including when your page is printed—the <img /> tag is your best choice. One way to do this is to load the image in CSS. of CSS Zen Garden fame. with something as unique and important as the site title. background-repeat: no-repeat. Dave Shea. and then set the CSS text-indent property to a large negative number to effectively pull the text off the screen (see Figure 14. But when an image is a part of your design. that is. div#header h1 a { background-image: url('gfx/logotype. For example. /*Pull text off of screen*/ } CSS IMAGE REPLACEMENT CSS provides an alternative to loading images with the XHTML <img /> tag. When an image is part of your content.9). you can use one of a number of CSS image replacement techniques. using the div#header h1 a selector. To add a logo or logotype.6 and 14. .7 show those styles as they appear on the site title.mezzoblue. Of course. /*Show anchor as a block*/ text-indent: -10000px. simple styles like this are often not enough to uniquely and memorably brand your pages.png').

it will be fixed in the next section. THE FOOTER Closing out the RPK’s branding XHTML is <div id="footer">. license. <div id="footer"> <p class="credits"> Site information.10 also shows the tagline styled using a left margin to suggest a second column adjacent to the image-replaced header. it has been run in italics. credits. Image replacement on the site title. You might also hide the paragraph from view. You can style it as you would any other paragraph text (see Chapter 16). although it also includes a tagline class.10. a large negative text indent pulls the XHTML text off of the screen. and include the tagline text as part of your header image. </p> . Note the tagline text running along the bottom.9. Figure 14. using the method for the accessibility links above. in Figure 14.PAGE BRANDING 171 Figure 14. leaving the background image unobstructed. the tagline is the only paragraph inside of div#header. Styling the Tagline In the RPK.

” may be added. Adjusting the left margin and top padding on the site tagline gives it a more prominent place in the header. web-available sites:--> <ul class="validators"> <li><a href="http://validator.172 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure check/referer" title="Validate this page's CSS"> CSS</a></li> </ul> </div> It’s useful to include information in your footer about the design and content of your pages. If you wish to allow others to use your content or design. you should read Chapter 4 of Title 17 of the United States Code2 and . A line such as “Page design and content by Jane Smith.w3. you can also add a link to a particular Creative Commons license (see Chapter 24).10. For information about copyright uri=referer" title="Validate this page's XHTML">XHTML</a></li> <li><a href="http://jigsaw. <!--These links only work on live.

Pederick’s Web Developer Add-on for Firefox will upload your files for you. For information about handling validator errors that you encounter. Chapter 37 of the Code of Federal Regulations3 and consult with a lawyer for additional details. in other words). Before you post your site and as you revise. You can even reuse your header image and flip it upside down in your image for CSS.11). These images can be loaded either in your CSS or in an XHTML image tag. although note that these only work when your pages are posted to a live URL on the Web (they will not work in a localhost you might just put a bordertop: 1px solid black style on your div#footer. see Chapter 16 and this book’s companion site.w3. If you choose to license your content under Creative Commons. STYLING THE FOOTER A simple way to style the footer is to make it the inverse of your header: in the border-only example from above. which might echo the tagline styling of your site. you can choose from a number of images that Creative Commons provides for showing that your content is licensed.w3. use the Validate By File Upload feature at http://validator . choose to Validate Local CSS or Validate Local HTML in the Tools menu. one suggestion is to style it as a kind of fine print. Styling the Site Credits You can style your site credits however you would like. http://sustainablewebde for XHTML and http://jigsaw. of course. and reuse it on the footer (see Figure 14. Alternatively.PAGE BRANDING 173 VALIDATE WHILE YOU WORK The RPK includes validation links for XHTML and CSS. the benefit .

gether nicely.12. Reusing the border image from the header ties the page to- Figure 14. but CSS controls its presentation by displaying it as a block on its own line. .11. The Creative Commons license image is loaded in XHTML’s image tag.Figure 14.

Copyrights.” Code of Federal Regulations. as a hook to style any differences on particular 2. 3. In Figure 14. §§ 401 et seq.2. save your my-proto type.S. although you can use a class on the <body> tag.css if you’ve also written styles for your work so far. Code 28. The next chapter will cover another piece of content that should be consistent from page to page across your site: the § 202.PAGE BRANDING 175 of opting for an image tag is that the image will print along with your content (by default. .12. U. “rel-home. NOTES 1. title 37. background images will not print—and some browsers do not allow background image printing at all). CSS allows you to control their position with respect to other elements. as Chapter 13 suggested. Even when images are loaded in XHTML. Microformats. the comparatively large CC license icon is offset from the rest of the footer content using a little bit of CSS (see Chapter 17). Trademarks. even in paper form. NEXT STEPS Once you have written your header and footer. A printed license icon would help clarify how your content is licensed.htm file and screen. The content and structure of your header and footer should remain more or less the same across all of your pages. and Copyrights. “Patents.” http://microformats.


it may become less usable for your users. baking). It can also contribute to wayfinding. if you have too many items in your navigation. And even if users do not click on every item in your navigation. such as milk. at the very back of the store. one by one. Neither do navigation areas encourage visitors to explore your Web site. but rather general types of items (soup. Supermarkets don’t list every single item for sale in the aisle. it would probably take shoppers longer to read all of the signs in the store than it would to walk the aisles. One way to begin thinking about the design of your navigation area is to compare a Web site’s navigation to the signs over the aisles at your local supermarket. If the signs did list every single item. by highlighting the navigation element that represents the section of the site a user is currently viewing. Although structurally it is nothing more than a list of links. While it may be tempting to build a navigation that includes a link to every single page on your site. It’s important to complement your site’s navigation area . pasta) or categories of items (cleaning supplies. To get people to shop beyond their lists or habits. site navigation can be designed many ways so long as it simplifies how users move around the different areas of your site. it should still give them a sense of what your site contains and how its contents are organized. But there is another important lesson about navigation that can be learned from supermarkets: signage on their aisles probably does not do much to entice shoppers to buy things.CHAP TE R 15 Navigation Navigation is a key feature found on almost every Web site. supermarkets often feature sale displays at the end of aisles and even place staple groceries.

site navigation is nothing more than a list of links.178 HOW TO DESIGN AND WRITE WEB PAGES TODAY with features like promotional sidebars to encourage exploration.htm">About</a></li> <li><a id="nav-contact" href="/contact. too. sites should strive for a shallow architecture. regardless of how you want it to appear. which can be complemented by a corresponding simple navigation area that suggests how your site is organized and what kinds of content the site includes (rather than a massive navigation area with links to every single page). The second challenge is to develop a visual design that is easy for users to scan with their eyes and that does not take a lot of finegrained effort to click on. Yes. That is exactly how you would write your navigation in XHTML.htm">Portfolio</a></li> <li><a id="nav-about" href="/about. as we’ll see below. STRUCTURING AND NAMING YOUR NAVIGATION ITEMS As Chapter 20 urges. In XHTML. lists display vertically.htm">Resume</a></li> <li><a id="nav-portfolio" href="/portfolio. There are two basic challenges to writing and designing your site navigation. even a well-designed navigation area may not be enough to interest all visitors to look around. but with CSS. The XHTML for a very basic navigation area for a personal site might look something like this: <ul id="navigation"> <li><a id="nav-home" href="/">Home</a></li> <li><a id="nav-resume" href="/resume. by default. considering how the navigation as a whole represents the content on your site. you can design the lists to display horizontally.htm">Contact</a></li> </ul> . The first challenge is to come up with brief labels for each item.

One navigation area is enough. Sometimes multiple words are unavoidable. who may not immediately understand that both navigation areas contain the same items. However. though. Navigation labels with multiple words necessarily have spaces between the words. as in the RPK). . if your navigation is at the top. But it’s always possible to avoid pronouns that often appear in navigation items. if your pages are getting so long that you feel it necessary to include a link that scrolls back to the top. The anchor tags in the navigation also have unique IDs that match the labels but are prefixed with nav-. such as ONE NAVIGATION AREA IS ENOUGH I’ve sometimes seen my Web design students replicate their navigation at the top and the bottom of every page.NAVIGATION 179 Note that in that example. They seem to do this especially if their pages get really long. because you can pack navigation items closer together. with the exception of Home. I make it a personal challenge to try and develop single-word navigation labels.. Whenever I design Web sites. One could even argue that two navigation areas. if you use <div id="page">. may confuse users. Single words are easier to style. particularly in horizontal navigation areas. Navigation item labels that match your file names will help keep your navigation manageable as you build your site. add an anchor link to the end of your content that scrolls to the navigation of your page (e. which Chapter 14 suggested including. or <a href= "#page"> to take people to the very top of the page. <a href="#navigation">Back to Top</a>. it might be time to revise your page for length—or split its content up over multiple pages. But they will also inspire your visitors’ confidence that the label in the navigation is reflective of the page it links to. If you are concerned that scrolling up to your navigation will be a problem for your visitors. Those will be used with the CSS to enhance wayfinding in conjunction with classes on the <body>.g. so the space between individual navigation items must be noticeably larger. the navigation labels match the file names in the links. particularly if they contain a lot of items.

Whether you label this “Home. For a personal Web site. Maximizing the Clickable Area Regardless of whether your navigation will be designed horizontally or vertically.” making “Contact Us” similarly redundant. the anchor tag only makes clickable the actual text in the link. a portfolio of work. And in addition to a home page link on your logo or branding (see the previous chapter). navigation might include links to key pages. and perhaps a page of contact information. It’s not uncommon to see Web sites that have navigation like that in Figure 15. if it’s your resume on your site.” “Overview.1. where there is a large box with a comparatively small clickable area for each item. including whether you will design a vertical menu or a tabbed/ horizontal navigation bar. Even though an unordered list displays vertically by default. such as a resume. perhaps mimicking a set of tabs. By default. but “Home” is short and sweet and something of a convention on the Web.” “our.” and so on. it’s always important to maximize the clickable area of your individual navigation items. “My Resume” is redundant. DESIGNING THE LOOK AND FEEL OF YOUR NAVIGATION Another challenge is designing the visual look and feel of your navigation. as well as an About and Contact page. Business Web sites will want to include their core products or services in the navigation. it’s never a bad idea to include a navigation link to the main page of your site. Make it easy for all customers to contact you by placing a link right in the navigation—rather than off of a page deeper in the site. but also for current customers who may have some sort of issue that needs to be resolved. Contact pages on business sites are not just for new or potential customers.” “us. “Resume” will suffice. that reduces the total area that is clickable and makes clicking on a link an unnecessarily delicate action. you can design your navigation to appear horizontally. For groups and businesses.180 HOW TO DESIGN AND WRITE WEB PAGES TODAY “my. “About” and “Contact” will imply an “us. an about/biography page.” or “Main” is up to you. . If you stick with single-word navigation items. with a little CSS.

the hover effect should be visible for keyboard users tabbing from link to link. /*Padding is also clickable*/ background-color: gray. and when those categories are clicked on or hovered over. Furthermore. } Larger clickable areas make using your site navigation less laborintensive for visitors. an overly complex navigation may keep users focused on only one small (and uninteresting) part of your pages. In Figure 15. show more options. That includes users of the Apple iPad and other touch screens. ul#navigation li a:focus { background-color: white. it is possible to create much larger clickable areas: ul#navigation li a { display: block.2. that makes the work of browsing a page more labor-intensive. by adding the :focus pseudo-class to your selector. The problem is. but requiring a mouse is probably a bit much to ask—and may make your navigation inaccessible to mouseless users. navigation that reveals additional items on a mouse over—may seem to be a great choice on the surface: present basic categories of navigation. too: ul#navigation li a:hover. Pop-up navigation—that is. } . you have entire pages to engage people’s attention. because they can be much sloppier with their clicking. That change in background color is achieved with the :hover pseudo-class.NAVIGATION 181 POP-UP NAVIGATION: JUST SAY NO It’s far easier for users to browse with their eyes than their mice. /*Treat links as blocks*/ padding: 20px. people generally don’t mind scanning with their eyes. you can see that hovering the mouse changes the entire box’s color. By increasing the padding on anchor tags (and by displaying anchor tags as blocks rather than their default inline display).

. Even though there is a generous box for each navigation item. Using CSS.2. Figure 15. and is therefore much more permissive in terms of where users can click.Figure 15.1. each navigation item has a much larger clickable area. only the text is clickable.

At the same time. (Some browsers will provide a dotted border to indicate clickable items for keyboard users. the “About” link in the navigation appears styled on the “About” page the way it appears when hovered over on other pages. so there is already some indication that an element is clickable. but bold and italics as well as border widths. and therefore does not benefit from a pointer that changes to indicate whether an item is clickable. You will often see Web sites that duplicate the hover/focus state of their navigation as the normal link state for the link on a given page. Those shifts may cause all of your page content to jump around. The second is when someone is using a keyboard to navigate links.NAVIGATION 183 EASY ON THE :HOVER STYLES Don’t go crazy adding a lot of styles to the :hover selector. ul#navigation li a:focus. but the border is sometimes difficult to see. this includes not just font sizes. http://sus tainablewebdesign. Wayfinding Made Simple If you include a class on the <body> tag for different pages or areas of your site. and margins. you can use descendent selectors to style the link in the navigation that matches that area of the site.) Hover properties that change text or background colors generally work well. The first is when clickable elements are very close to one another. What you should avoid at all costs are hover properties that change the size or width of contextual link text or navigation elements. Mouse pointers already change over links. as do hovers that change background images by altering the backgroundposition: property (see the book’s companion Web site. . and resume. In other words. and if you put a unique ID on each link in your navigation. hover properties are helpful in two situations. such as in a navigation bar. such as home. your CSS can include a style declaration like this: ul#navigation li a:hover. a hover effect can clarify which navigation item will actually be activated upon clicking. particularly for contextual links in your site’s content. Adding to the hover/focus styles above. about.

184 HOW TO DESIGN AND WRITE WEB PAGES TODAY body. For sites with only a few navigation items. body. http://sustainablewebdesign. your design tasks— other than maximizing the clickable area as described above—are mostly about integrating the navigation with the rest of your design. on the about page. body. the about link’s background will be white. You can see this technique in action on the navigation at this book’s companion site. } The links in that navigation will still have a white background when moused over or focused via the keyboard. items display vertically by default. Designing Horizontal Navigation It is not uncommon to encounter Web sites that present navigation as a horizontal bar or set of tabs. the link to home in the navigation will always have a white background. Designing Vertical Navigation Vertical navigation can easily accommodate an expanding navigation area—whether the navigation expands by the addition of more items or if a visitor wants to increase the size of the text on your site. And running horizontal . the resume link’s background will be white. The limitation to horizontal navigation is that it can only contain a few items before it becomes confusing: it’s generally easier to scan a vertical list of items than a horizontal one. But on the home page.about ul#navigation li a#nav-about.home ul#navigation li a#nav-home. and on the resume page. In each case. the design simply tells users “You are here” through a tiny visual enhancement. using bits of XHTML structure that are already in place. a topic that is covered in Chapter 17.resume ul#navigation li a#nav-resume { background-color: white. Because the RPK suggests that you structure your navigation as an unordered list. a horizontal navigation can be ideal—particularly on designs that need to have content areas as wide as possible (such as photography portfolios) and therefore can’t spare the horizontal space that a vertical navigation would

Float Method. less on right and left*/ background-color: #CCC. they will display nicely horizontally. say three or four. it remains part of the document flow. By floating all of the items in a navigation list and maximizing the clickable area. There are a number of methods for displaying list items in a horizontal line. /*Generous padding on top and bottom. /*Background color for the items*/ } . and they may wonder whether the items in the second line of navigation are less important. /*Put some space between items*/ } ul#navigation li a { display: block. the simplest and most flexible is to use floats. Automatic Width*/ ul#navigation { overflow: hidden. and they all use very short words. When an element floats in CSS. /*Maximize clickable area*/ padding: 5px 10px 5px 10px. a second line may becomes necessary—and will take a visitor even longer to scan. But if you wish to add many more navigation elements.NAVIGATION 185 navigation onto a second line is usually disastrous: readers don’t know whether to move their eyes horizontally or vertically. a simple horizontal navigation can be built in CSS like this: /*Horizontal Navigation. /*Necessary style for best handling floats*/ } ul#navigation li { float: left. /*Fix a float issue in older IE browsers*/ margin-right: 5px. on a single line. but allows other elements to appear next to it horizontally. If you only have a few navigation elements. /*Float items to the left*/ display: inline.

margin-right: 5px.3. horizontal lists. A horizontal navigation bar with buttons of different widths. Float Method. one can adjust the example above by adding a fixed width to the ul#navigation li selector (see the rendering in Figure 15. depending on how long the name of the label is (Figure 15.4): /*Horizontal Navigation. /*All buttons 100px wide*/ float: left. That particular method will create items or buttons (as they appear) of varying width. to the style declaration for ul#navigation li. . you can regain the centered-text appearance of the variable-width buttons from Figure 15. as in Figure 15.3). or if someone increases the text size on a page. depending on the length of the label text. display: inline.3.5 One word of caution regarding floated. } By adding text-align: center. though: if your layout is flexible.186 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 15. Fixed With*/ ul#navigation li { width: 100px. For uniformly sized clickable areas.

5.Figure 15. Figure 15. A horizontal navigation bar with buttons of the same width. A horizontal navigation bar with buttons of the same width and centered text.4. and the text aligned left by default. .



your navigation links may be broken onto a second line, making your navigation less usable by reducing how quickly someone can scan it with their eyes. Be sure to test your navigation under a variety of conditions, including multiple screen and font sizes, and on different operating systems.

Navigation is a simple list of links—and styling that list is itself not too difficult. By maximizing the clickable area of a short list of items that reflect your site’s content and organization, you will have the foundation for visitors to move quickly through your site. With your branding and navigation drafted, you should now have the essential, repeated parts of your page in your my-prototype.htm file. Rather than starting from scratch, you can now start writing each new page of your site with your branding and navigation ready to go; just open my-prototype.htm and choose Save As. . . and immediately name it about.htm or index.htm or whatever page it is that you’re about to build. (See Chapter 21 for ways to repeat your branding and navigation dynamically across all of your pages, in case you need to make changes to them.) The next chapter turns to writing the text content of your pages, including how you can develop your own style guide for writing markup to make writing with XHTML simple and even fun. Unlike branding and navigation, of course, content differs from page to page, and so it requires a writing approach that is more flexible, but that a style guide can make more consistent.



Text Content
Once you have established the XHTML structures for your page branding and navigation, you can reuse them across all of the pages of your site, perhaps changing the class on the <body> tag (Chapter 21 shows how to dynamically repeat the branding and navigation across all of your pages, to simplify site-wide changes to them). Where you spend most of your time creating new markup for your pages is in the content portion of your page. Branding and navigation can be structurally and visually constant across pages, but the structure of text content is almost always unique (unless you’re writing a Web site full of five-paragraph essays—and please don’t). This chapter walks through approaches to marking up your content in XHTML. It also suggests developing some basic site typography for your pages using CSS to create a site style guide to simplify your markup and design.

XHTML is meant to be flexible enough to allow you to mark up most common structural elements of Web content, particularly headings, paragraphs, and lists. You can mark up in XHTML as you write, or mark up your existing writing with XHTML. But it is useful to create a style guide for your site, especially when you begin to add classes and other special pieces of structure to your page content. A style guide is even more important when you are collaborating with others



on a site, so that pieces of content are marked up consistently and uniformly. The simplest way to write your style guide is to put together a page that includes all of the structural elements you use to mark up your page content, and provide a sample rendering using the site’s actual CSS by linking to the site’s CSS file. Then, any changes to your CSS will also change the style guide’s appearance. Save your style guide’s XHTML file as style-guide.htm for easy reference. While you can use Lorem ipsum text to show off the examples, it’s good practice to use the sample text to convey what kind of content should be marked up as paragraphs, lists, or any other structural pages for your site. That will help it serve as a refresher for your memory— and as guidance for any collaborators. The example style guide in Figure 16.1 also shows the XHTML markup required for each site style. Different pieces of this example style guide will be shown in figures throughout the chapter.

Figure 16.1. A site style guide can remind you and your collaborators of the available content styles, and even what the XHTML is to achieve them.



You can build a really solid Web page using only headings, paragraphs, and lists. Why? Well, most writing is made up of headings, paragraphs, and lists. Conveniently enough, there are three basic types of structural blocks in XHTML for marking up written content: headings, paragraphs, and lists. Blocks are nothing more than text that, in the absence of any fancy formatting (such as a plain text email), would probably be separated by empty lines:
Primary Colors There are three primary colors that occur in nature. They are: Red Yellow Blue

Marked up in XHTML, that little chunk of text could be described accurately with the heading, paragraph, and list tags:
<h1>Primary Colors</h1> <p>There are three primary colors that occur in nature. They are:</p> <ul> <li>Red</li> <li>Yellow</li> <li>Blue</li> </ul>

Let’s look at each type of block piece by piece.

There are six levels of headings in XHTML. <h1> is a top-level heading; <h2> a subheading; <h3> a sub-subheading, and so on. Stylistically, it’s



usually better to limit your use of <h1> to once or twice a page; <h2> can be used often, as can <h3>, provided that <h3> is used for subheadings that separate content under an <h2>. When using headings, though, remember that their purpose is to break up long stretches of text with meaningful labels. <h1> might provide the site title (as in the RPK). <h2> can mark up the titles of individual pages, whose major sections are subdivided by <h3> tags; the sections labeled by <h3> tags could then be broken up further by <h4> tags. Consider a concrete example. Imagine that John Smith used headings to mark up his resume; if we took away all of the content and left only the headings in his resume, we might see something like:
<h2>Resume for John Smith</h2> <h3>Objective</h3> <h3>Work Experience</h3> <h4>Industry</h4> <h4>Government</h4> <h3>Software Skills</h3>

Now it’s important to note that the indentations are only to enhance readability of the XHTML source code (see Chapter 12). Particularly for the two <h4> tags, indents also illustrate that the heading tags are used for further subdividing content, not for enumeration. (I once had an undergraduate student who kept adding more and more numbers to his headings each time he used one. When I told him there was no such thing as an <h27> tag, he took the news pretty hard. The most minor subheading in XHTML is <h6>.) Figure 16.2 shows a sample style guide’s styling of <h3>.

There is only one paragraph tag in XHTML: <p>. You should use the paragraph tag to describe actual paragraphs of text—and nothing else. If something is structurally a heading, do not use the paragraph tag. I also often see beginners misuse the paragraph tag like this:
<p><h2>This is So Wrong</h2></p>

I’m not quite sure why beginners tend to do that. I suspect it may be due to word processors displaying the paragraph mark, ¶, after every



Figure 16.2. This sample style guide runs <h3> tags in Georgia font (the rest of the body text is Arial) with a bottom border for visual interest.

break (including headings and lists). But reason it out, XHTMLstyle: if something is a heading, it’s a heading—not a paragraph. Paragraph tags should appear only when you have a need to describe content whose structure is an actual paragraph, not a heading or a list.

Lists are an extremely useful structural element in XHTML. In addition to helping readers quickly read through content, lists are also useful for marking up site features such as navigation and menus, and even for postal addresses and contact information. There are three types of lists in XHTML: ordered (<ol>), unordered (<ul>), and definition (<dl>) lists. Individual items in ordered and unordered lists are marked up with list item tags (<li>):
<li>Red</li> <li>Yellow</li> <li>Blue</li>

3. Consult Figure 16. . they should be grouped using the <ol> (ordered list) tag. if they are steps in a process. determine whether there is any specific order to the items: for example.3.194 HOW TO DESIGN AND WRITE WEB PAGES TODAY A good approach to marking up lists is to begin with the list items first. as with the primary colors. so you must specify them directly using the list-style-type: property on the individual items within the list. This sample style guide shows bullets on unordered lists and decimal numbers and uppercase letters on ordered lists. as shown in Figure 16. or an enumerated list of things. If the items are more or less in random order or if their order does not matter.css file in the XHTML. unordered and ordered lists appear without bullets or numbers. Then. group the list items with the <ul> (unordered list) tag: <ul> <li>Red</li> <li>Yellow</li> <li>Blue</li> </ul> Because the RPK loads the reset.

But nested lists must be structured in a particular way. and finally the list item tag that opened before Red closes. including when ordered lists are nested inside of unordered lists and vice versa. with two list items of its own: Crimson and Scarlet. you can create additional styles for nested lists. Nested lists are. As Figure 16. considered structurally to be a part of a parent list item. Nested Lists Lists can also be nested in XHTML. we could nest lists with synonyms for each color: <ul> <li>Red <ul> <li>Crimson</li> <li>Scarlet</li> </ul> </li> <li>Yellow <ul> <li>Lemon</li> <li>Gold</li> </ul> </li> <li>Blue <ul> <li>Navy</li> <li>Cobalt</li> </ul> </li> </ul> Notice that on Red. Then. meaning that individual list items can contain their own sublists (not unlike an outline for a term paper).TEXT CONTENT 195 your favorite CSS reference to learn about the many different types of bullets and numbers that can be applied to lists. the word Red appears and then a nested unordered list opens. that unordered list closes. the list item opens.4 shows. in XHTML. Taking the primary color example. .

org/. http://sustainablewebdesign. sometimes hundreds. Don’t wait until your pages are completely finished. try and fix it. it is important to regularly upload your files and check them against the W3C Markup Validator at http:// validator. . This sample style guide shows a few different styles for nested lists. you’ll find that your page only had an error or two. particularly when there is an error on your page. And don’t be surprised if you get errors. AND HOW TO FIX THEM As you are writing your XHTML pages.196 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 16. and then revalidate. of errors—even if there’s only a single one on the page.w3. causing it to report dozens. See the companion site for this book for additional help with validators. Look for the first error it reports. after all. VALIDATION ERRORS. particularly if you were cautious as you were writing the page to begin with—and checked them often in the validator. Early errors (like forgetting to close a tag near the top of the page) have a snowball effect on the validator. The important thing about validator output. particularly ordered and unordered lists nested inside ordered lists. So do not assume that the number of errors the validator reports reflects the reality of your page. Five times out of . is to worry only about the first error that’s listed. The validator is just a machine. errors are easier to catch if you get into the habit of validating after small sets of changes to your XHTML.

is behind the Web’s signature feature: the hyperlink. AND CITE Of course.htm">resume</a>. <p> Read the news at <a href=" index. not all writing is structured in blocks: some structure is limited to words and phrases.htm">resume</a>. you need not include the full URL. The first is to use a relative link: <p>View my <a href="resume. Anchor Tags The anchor tag. If you have a home page at http://example. but merely the path to the file. <a>.</p> The second way is to use a root-relative link: <p>View my <a href="/resume. for example. However. EMPHASIS. Whenever you are linking to a Web site other than your own. you can link to your resume from the home page in one of two">the Google News portal</a>. STRONG.</p> . so. For example. The path is everything that comes after the domain name. when you link to pages in your own .” The value of href is the address of the Web site or Web page that you want your text to link to. The anchor tag has one required—and very important—attribute: and your resume is at http://example. The anchor tag is used to turn phrases of text into links that can be activated to take a user to another page on your Web site or any other place on the Web. if your domain is http://example. </p> will create a hyperlink out of “the Google News portal” that can be clicked on or otherwise activated by a user. XHTML has a number of tags for structuring phrases within blocks. you must include the http:// prefix to the full URL.TEXT CONTENT 197 STRUCTURED PHRASES: the path is everything that comes after . or “hypertext reference.

g.htm) when linking to Web pages that are part of your own site. avoid using the full URL (also known as an absolute link. use the <cite> a root-relative link uses the site root as its starting point.</p> Figure 16. Chapter 20 will examine different kinds of links in greater depth. Web browsers use the <strong> tag to display text as bold text. and the <em> (emphasis) tag to display text as italic. .198 HOW TO DESIGN AND WRITE WEB PAGES TODAY The difference? A relative link uses the linking document as its starting point. exactly. e. the difference is between those two remains a matter of some dispute in the Web design community). However. and Cite By default. For titles of works. http://example . their structural names will also allows screen readers to read text in a strong voice or an emphatic voice (what. Emphasis. e... But other than on your site title (see Chapter 14). <p>Read the online Web magazine <cite>A List Apart </cite> for the latest developments in Web design. Strong.5. This sample style guide uses fairly common styles for phrase elements.

One basic example of this is using the <body> tag as a selector to set the base fonts and font sizes for your entire page. except in the header (which was styled more specifically in Chapter 14). but you can change them to appear however you wish.TEXT CONTENT 199 By default. the <cite> tag will appear in italic text. Figure 16. which has its own style elsewhere in the style sheet.6 shows all of the text rendering in Arial. not XHTML. sans-serif.5 shows a sample style guide’s visual design of phrase tags. font-size: small. INHERITED STYLES Cascading Style Sheets enable certain styles to be inherited. <em>. for example: body { font-family: Arial.css file in the RPK establishes the typical styles for strong. and cite. . its display is ultimately dictated by CSS. Inheritance Figure 16. emphasis. but as with <strong>.6. Setting the Arial font on the body tag causes all of the text on the page to appear in Arial—except the tagline in the header. and any other tag. The screen. } Figure 16.

For example. but it also makes changing the line height a matter of fixing that one line of CSS (as opposed to having to change the line height on every style). } Figure 16. the browser rendering your CSS will replace the inherited style with the new. you can set that on div#content: div#content { line-height: 1.7). The line height is inherited by all text in the content division. more specific style.7. Remember that it’s always better to write as little source as possible.200 HOW TO DESIGN AND WRITE WEB PAGES TODAY works on other selectors besides the body and can help you keep your styles short and lean. div#supporting-content { line-height: 1. if you wish to have a shared line height on all of the text in the content area on your page (see Figure 16. If you find that you want to alter styles that are inherited. .6.2. perhaps by setting a shorter line height on your supporting content text. } Not only will that keep all of your text looking uniform across the content area.

(Odds are you wouldn’t want to indent paragraphs in your header and footer. while you will probably use it in your content area.) The screen. } Figure 16. Descendant Selectors and Inheritance Descendant selectors provide better control over inheritance. write a more specific selector.TEXT CONTENT 201 Figure 16.8.8). . so that you set the styles for only specific areas of your page content.css file in the RPK has many descendant selectors for the content area already written for you to use. too (as it is in the RPK). With that style applied. whose line height would otherwise have been inherited.6 (see Figure 16. So rather than styling the paragraphs for your page content area using the p selector. rather than 1. it may also be in your header and footer. Think about the paragraph tag. all of your supporting content will have 1. such as div#content p { text-indent: 20px.9 shows that the descendant selector applies (in that case) the text indent only to paragraphs inside of div#content.2 for its line height. you’d move them with margin or padding instead. The line height on the supporting content (in the darker area) has been set to be tighter than in the rest of the content division.

202 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 16. Block Quotes The <blockquote> tag is an example of adding a bit of structure to paragraphs or long stretches of material quoted from another source. paragraphs in the content area are indented—in this case. Using the descendant selector. provide for the common defence. you will have unique pieces of content that should be treated differently from an ordinary heading. or list. paragraphs. promote the general .4—but the paragraph marking site credits in the footer is not indented. a paragraph showcasing phrase tags as we saw in Figure 16. in Order to form a more perfect Union. For example. and lists. insure domestic Tranquility. establish Justice.9. SPECIAL STYLES You can go a long way marking up blocks of content with headings. paragraph. But sometimes. <p>The United States Constitution opens with:</p> <blockquote> <p>We the People of the United States.

to appear on text-heavy pages to add visual interest. Suppose you wanted pull quotes. and secure the Blessings of Liberty to ourselves and our Posterity.TEXT CONTENT 203 Welfare. do ordain and establish this Constitution for the United States of America. or lists). Classes As we have seen in earlier chapters. A class can be called anything you like (though review the naming rules covered in Chapter 9). but <p class="big-box"> may not accurately describe future designs (or the page as it appears when printed). the descendant selector again comes in handy. paragraphs.10): p. This structural flexibility is useful for marking up page content. which are usually bits of text pulled from your own writing. you can style blocks of quoted material: blockquote { border: 1px dotted black. the better. /*Padding adds space between the text and border*/ } If you have reason to style a paragraph within a block quote differently from your other paragraphs. CSS can make it as big and boxy as you’d like (see the rendering of both block quotes and pull quotes in Figure 16. but the more structurally you name a class. more sustainable choice. You might want to style those paragraphs as a big box. Using CSS. XHTML allows you to write a class (or even multiple classes) on any tag. unique structural features for your content that can be styled using CSS. /*Dotted border*/ padding: 20px. . because it allows you to specify additional. simply refer to blockquote p in your CSS. Opting for <p class="pullquote"> is the better.</p> </blockquote> The <blockquote> tag requires that some other block-level tag appear inside of it (headings.pullquote { font-size: x-large.

The sample style guide’s treatment of block quotes and pull border: 1px dotted black. you can start to position all of the elements of your site to create the layout for the whole page. if it’s a list. which is what the next chapter will cover. Once you have some content together and your branding and navigation drafted.204 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 16. which can help you keep your markup consistent—even when you collaborate with others. Thinking about the general types of content on your site will help you to develop your own style guide. } NEXT STEPS Marking up text content is just a matter of being honest: if something is a paragraph.10. quotes. . padding: 20px. mark it as a list. mark it as a paragraph.



Page Layout
Put together your page’s branding, navigation, and content and you have your whole page. And while so far those elements have been discussed mostly in isolation, an appealing page layout must arrange all of the page elements in harmony. This chapter looks at building page layouts in CSS over well-structured XHTML.

In the past, Web designers relied on HTML tables for page design, because that was the only reliable cross-browser technique to create page layouts. That is no longer good practice, as tables for layout can introduce accessibility problems in addition to adding more markup to a page. Tables also lock page content into a particular design, and make creating alternate designs—such as for mobile phones—difficult or impossible. Web designers now use CSS positioning to create flexible layouts over well-structured XHTML, such as you have been writing in the previous chapters with the RPK. By default, all block-level elements (such as the various <div> and <ul id="navigation"> tags that form the major page areas in the Rapid Prototyping Kit) are displayed in the same order as they appear in the XHTML source, and take up the entire width of the screen (see Figure 17.1). The first step to page layout in CSS, then, is to determine which page elements must move far away from where they appear



Figure 17.1. Adding illustrative background colors to each major division of the document reveals that browsers display blocks to the full width of the screen and in source order.

by default. The second step is to move those elements into place, using CSS positioning, before finally moving other elements out of the way of positioned ones in order to create the illusion of a page layout. And that is really what CSS page layout is: an illusion of columns created by moving some things, and moving other things out of their way.

Rough sketches done on scrap paper are more than enough to start you thinking about page design. They do not have to be works of art; sketches only have to provide a rough representation of the content where you would like it to appear your page. Once you have done some sketching on paper, it may be helpful to create a mockup of your page in an image editor, so that you can get a better sense of how big things will appear on screen in actual pixel dimensions (see Figure 17.2).



Figure 17.2. A rough mockup of a page, created using an image editor.

Start with a Typical, Representative Content Page
Although designers might begin page designs by starting with the home page, the home page is often different from the other pages in a site. Designing by thinking first about a more typical content page will help you develop a design that works for most of your pages. From that general idea, you can work to build a home page that is different from (but complementary to) the typical pages of your site (see the sidebar “Modifying Designs for Special Pages”). As has been mentioned throughout this section of the book, you can almost never go wrong following this rule of Web design: begin by building things that represent a typical page or feature on your site. Whether that’s sizing images, determining a text content area’s width, or deciding to include JavaScript for an audio player in the <head> area of your pages, design to the general first—and to the specific later. With a representative content page sketched, you can turn the focus of your work to the home page and any overview pages that your site has. For example, you might have a portfolio as



Chapter 13 suggested placing a class on the body tag to distinguish different pages. If your home page’s body opens with <body class="home">, you can use that class as a hook in your CSS to create special home page styles. For example, if your header is 150 pixels tall on most of your pages, but you want it 300 pixels tall on home, your CSS might read: div#header { height: 85px; } /*85px tall on all pages*/ body.home div#header { height: 300px; } /*300 tall on home page*/ There’s no need, in other words, to modify the structure of an individual page element (e.g., by writing a special header ID for the home page XHTML) or to create a separate style sheet for the home page; all the styles can live in one CSS file, using the body class as a hook to target the appropriate pages automatically.

one part of your site that comprises an overview of your portfolio, which links to individual projects. You can even add unique classes such as class="home" or class="overview", or even class="portfolio-overview" on the <body> tag to help you make specific home- and overview-page adjustments in your CSS later. (See Chapter 20 for help making these kinds of architectural choices for your own site.)

Grids can provide a solid foundation for any design, even if elements violate the rigid columns on the grid to add visual interest. I often urge Web design students to focus on the rough, geographic areas of a page first, placing elements like the header, footer, navigation, and content and subcontent areas in relationship to each other. From there, thinking more carefully about the design of content in the different areas through sketching, image editor mockups, and prototyping will help you with additional details for your design.



Do a Google search for Web design grid system and you will find links to the work of many different Web designers who have released their own grid system that others may use. One of my favorite grid systems is Nathan Smith’s 960 Grid System, which includes templates for 12- and 16-column grids in the formats of a number of different image editors. It also includes a PDF file for printing out ready-made grid pages to sketch on. As Smith, the 960 Grid System creator, notes: “All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.”* Although the 960 Grid System and others like it include XHTML and CSS, they are usually not structurally meaningful the way the RPK is. So try working with some of the sketch sheets and column layouts, but stick to writing your own XHTML and CSS.
*Nathan Smith, 960 Grid System,

Even if you decide to try a simple two-column layout consisting of a 475-pixel-wide area for your content, and a 200-pixel-wide area for your navigation, separated by 25 pixels of space (as in this chapter’s example), a column structure will help guide you in your image editor mockup—particularly if you opt to enhance your pages with background images to give it a unique look and feel. Figure 17.3 shows an image-editor mockup of the page for this chapter; different areas were sliced from it and saved as separate image files to create the background images in the actual page. Note that the 700-pixel width of the design for this chapter was chosen only because it would work well for images in this book; as in Smith’s 960 Grid System (see “Grid Systems” sidebar), it’s common to build fixed-width pages that are closer to 1000 pixels across.



Figure 17.3. Another image-editor mockup, with images that can be used for the actual design.

CSS includes the position property, which is often used in conjunction with properties for dimensions (especially widths) and left-, right-, top-, and bottom-offsets to produce all kinds of page layouts from the same XHTML structure. By default, block elements are positioned by the browser statically (position: static;). Two other position values, relative and absolute, are what provide designers the ability to create compelling page designs. When you need to position something far away from where it appears by default, such as the navigation in this chapter’s examples, position it absolutely. Absolute positioning removes the element from the document flow—meaning that the rest of the page’s content behaves as though, for example, the navigation is simply gone (see Figure 17.4). To determine what needs to be positioned absolutely, compare where it appears in the normal flow of things (as in Figure 17.1) with where it



Figure 17.4. The navigation positioned absolutely, and over the content, which must be moved out of the way.

needs to appear (as in the sketches in Figures 17.2 and 17.3). Because this chapter’s example header is 85 pixels tall, and the design specifies a space of 10 pixels between the header and the navigation (and content), we write a style like:
ul#navigation { width: 200px; /*200px wide navigation area*/ position: absolute; /*Pull from flow to position*/ left: 0px; /*Keep with left edge of design*/ top: 95px; /*Appear 10px below 85px-high header*/ }

At this point, though, the page is a mess; the navigation and the content appear layered over the top of one another. So the next task is to move other elements out of the navigation’s way. In Figure 17.5, some left margin on the content area is all that it takes. This margin will also be the only sizing on the content area (that is, no width will

Figure 17.5. With the content pushed out of the way, a two-column layout begins to develop.

Figure 17.6. To create a layout with right-hand navigation is just a matter of a few CSS adjustments.



need to be specified for div#content; it will become clear why in a moment):
div#content { margin-left: 225px; /*200px nav + 25px between nav and content*/ }

The great thing about CSS-based layouts is that they are easily revised. Figure 17.6 shows roughly the same layout as Figure 17.5, but with the navigation on the right rather than the left (and with the content moved off to the right).

Refining the Whole Page Design
With the navigation and content areas looking roughly as they should, it’s possible to move on to the less drastic CSS to make the page design work. The rough sketch called for a 700-pixel-wide design; to achieve that, the CSS just needs div#page { width: 700px; }. With everything appearing inside the page division, the whole page is now 700 pixels wide. The content area, which is offset from the left by 225 pixels, automatically fills the remaining space (575 pixels wide, if you are keeping count); that’s why there is no need to specify a width on div#content. Because 700 pixels is a rather narrow design, it might appear better on larger screens if the page were centered horizontally, an effect achieved by adding margin: 0 auto; to the div#page style. But Figure 17.7 reveals a problem with that style: everything is centered except the navigation, which is still at left: 0px and therefore hugging the edge of the browser window. Here is where relative positioning becomes useful. The reason the navigation appears all the way to the left despite the centered page division is that, lacking a positioning context, the navigation is positioned with regard to the browser window. By adding position: relative; to the div#page style declaration, navigation will then be positioned with regard to the page division—not the window. That is, because the page division is now positioned, it becomes the positioning context for the navigation, meaning that the navigation’s left: 0px property will be the 0px position relative to the relatively positioned container (Figure 17.8).

Figure 17.7. Centering the page works for all of the nonpositioned elements; the navigation, which is positioned, is stuck on the left, though.

Figure 17.8. The navigation positioned absolutely, but with the container division as its positioning context.



Designing the Content Area
Suppose someone wanted to design this page’s supporting content as a second column within the content area, by making another 200-pixelwide column for the supporting content and positioning it absolutely (see Figure 17.9). While it would be possible to position the supporting content 95 pixels from the top, a more easily modified design would come from setting the content area itself as a positioning context:
div#content { position: relative; }

That way, any changes to the content area’s design (particularly its width and distance from the top of the page) would be reflected on the supporting content as well; see Figure 17.10. A corrective measure to the supporting content spilling over the footer would be to add more text or media content to the content area. But assuming some pages might need to be short, a designer could

Figure 17.9. Supporting content positioned absolutely; its positioning context should be the content area, rather than the page.

If there is more than 500 pixels worth of content.10. /*The main content area should be at least 500 pixels tall*/ } Figure 17. Note that the supporting content now spills over the footer. . the area will automatically expand. but with the content area as its positioning context. /*Move content out of the way of supporting.11 shows the page with the spill-over problem corrected. Supporting content positioned absolutely. add a minimum height of 500 pixels to the main content area in this design: div#main { padding-right: 210px. but use padding to keep background color*/ min-height: 500px.216 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 17.

css" /> <![endif]--> Visit QuirksMode. known as conditional comments. you need to load a style sheet that corrects some of the idiosyncrasies of IE. other browsers will see the content as just another XHTML comment. for example.PAGE LAYOUT 217 Figure 17. A minimum height on the main content area keeps supporting content from spilling over the footer. *QuirksMode.quirksmode.11.* for additional information on targeting IE using conditional comments. The form of conditional comments looks something like: <!--[if IE]> <link rel="stylesheet" type="text/css" href="screen-ie. CONDITIONAL COMMENTS Internet Explorer has a feature. conditional comments enable IE to load it.” http://www. Additional content in the main area would have the same effect.html . that enables you to target XHTML markup to particular versions of IE. “Conditional

Figure 17. The Figure 17. Positioned page with the branding and navigation styles from previous chapters.12. . the content area.1 you would have to add div#main { height: 500px. The design looks very boxy and does not seem to fit together very well. One of the easier ways to pull a design together is to tile an image on the background that anticipates. see also the “Conditional Comments” sidebar). But that is an acceptable workaround for IE’s inability to understand the min-height property. for example. } to an IE-only style sheet loaded via conditional comments (the RPK details their use in its screen-ie. you can begin to experiment adding in background images. Once your positioning is more or less in place. FINISHING TOUCHES WITH BACKGROUND IMAGES Background images help to make a design really shine beyond simple boxes.12 shows the positioned page along with the branding and navigation styles from previous chapters. such as Firefox. IE expands the value specified for height to fit longer content.css file. cut the content off.218 HOW TO DESIGN AND WRITE WEB PAGES TODAY Note that because of a problem with min-height in Internet Explorer (IE) prior to version 8. but other browsers.

the supporting content now appears beneath the main content (see Figure 17. the content area itself is too narrow to accommodate a second column. or areas of color that shift from one color to another. be sure to include background-repeat: repeat-x. use the repeat-y value).15). in your CSS style declarations that use tiled images (to tile vertically.14 is the supporting content. A background image to tile on the body to help pull the design together.14. Figure 17. With a few revisions to the CSS (including another background image with a gradient on the content area). is just one means for bringing one area (such as the header) into a polished-looking relationship with another area (such as the content).13 shows the background image that will tile horizontally on the example design in this chapter.) .PAGE LAYOUT 219 use of gradients. background images tile horizontally and vertically. (The space around the image is due to how Firefox displays images directly. as in Figure 17. Fixing What Doesn’t Work The major problem with Figure 17. Figure 17.13. by default. Remember that. to limit an image tiling on the horizontal axis only. This one background image addition helps pull the design together.

The page design with the background image from Figure 17. plus a gradient on the content area itself and a darker background color on the supporting content.14. A revised layout on the content area. .15.Figure 17. further improve the page.13 appears less boxy and more complete. Figure 17.

16. Tools like Chris Pederick’s Web Developer Add-on for Firefox also let you experiment with the design right in your browser window. First. it still looks boxy in Figure 17.16. . we can add a background image—actually the same background image as the original footer—to the html selector in CSS. position the footer absolutely: div#footer { position: absolute. Remember that there can only be one background image loaded per element in CSS 2. The footer as styled in previous chapters. Next. while one has been added to the <body> tag. the <html> tag has none. cause the <body> area to behave as though the footer no longer exists. like the header before the addition of the background image on the body. } All this does is pull the footer out of the document flow. So here’s a bit of CSS trickery to get the same effect from the header and body to work on the footer. the footer now appears over the <html> area of the page. Because of that. The footer also looks unfinished still.PAGE LAYOUT 221 That is a strength of CSS-based design: it’s possible to experiment with these kinds of revisions without ever touching the XHTML of a page. it looks unfinished. and Figure 17. and in this case.

it’s necessary to put some padding on its bottom.222 HOW TO DESIGN AND WRITE WEB PAGES TODAY have the image positioned at the bottom of the <html> element and repeated on the horizontal. remove the background image from the div#footer style declaration. /*Show image at bottom of html element*/ padding-bottom: 110px.17. (Once that’s been done. filling the entire page width just like we did for the header (see Figure 17. The footer positioned absolutely puts it over the top of the tiled image on the html area. even on longer pages*/ } Figure 17.17). The complete style looks like: html { background-image: url('gfx/footerbackground.) To make sure the image on html displays on longer pages. /*Make room for the footer. background-repeat: repeat-x. .png'). and ensure that the html area always displays. /*Tile horizontally*/ background-position: left bottom.

it is important to test them on a variety of screen sizes. The fix for this is an easy one.19): html { background-color: black. that would cause scroll bars to appear on smaller screens—falsely suggesting content below (when in fact only empty space would appear). . add a different background color (in this case. as the bottom of the page is white. effectively pushing the html area to the bottom of even very large screens.18. the page looks incomplete on larger screens. as the majority of the body area should be white (see Figure 17. Just to be safe.18 shows. So a better fix here is to set a background color of black on the html selector. } Chapter 19 will look at how DOM scripting can be used to alter your design for larger screens. The page looks incomplete because of the white area at the bottom. so the entire page background matches the black on the tiled background image. Although we could use the trick from earlier and set a min-height on the page. white) to the body selector. Figure 17. As Figure 17.PAGE LAYOUT 223 The Large-Screen Problem When designing CSS layouts. } body { background-color: white.

224 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 17. as with the header and footer examples in this chapter. Microsoft Developer Network. http:// sustainablewebdesign.aspx .” video. even on large NEXT STEPS Using CSS to position elements into a layout is a matter of creating the illusion of columns and boxes.19. A simple background color fix makes the page look more complete. also. You can find additional positioning techniques and solutions at the book’s companion Web site. The next chapter looks at adding images. NOTE 1. and other media to your pages. particularly as you work to include media like images and video that might need a wider area than your layout accounts for. “CSS Compatibility and Internet Explorer.85). But expect to return to your page layout often to make adjustments. when you work with background images that they sometimes work better on elements other than the element you’re actually trying to style.

http://sustainablewebdesign. as this chapter recommends). src and alt. as well as for Flash movies and Portable Document Files (PDFs). this chapter will suggest only the most accessible and sustainable methods for doing so. for example. including images. take advantage of the RPK’s folders or a structure like them to keep your media content organized and manageable. This chapter looks at how to display those media elements and integrate them with the design of your page. audio. and video. CONTENT IMAGES All content images—that is. there are two important attributes that it must include. there are many different ways to load media elements on your page. remember that Web-friendly formats include JPEG files (. and But because the precise details of those methods change frequently and are a little too complex to go into here in the book. “Have a look at this!”—should be loaded in the XHTML image tag. using YouTube for video hosting. In addition to the <img /> tag being self-closing. they are available at the book’s companion Web site. Particularly for audio and video. all images that appear on your pages when you mean. • src: the path to and name of your image file.CHAP TE R 18 Multimedia Content Chapter 3 provided an overview of gathering and preparing multimedia content. sometimes . If you decide to host media content on your own server (versus. audio.jpg. <img />. The Rapid Prototyping Kit (RPK) includes a media folder with subfolders for images.

the . . Web accessibility guidelines suggest that alt text be less than 100 characters. Explore these and other video-hosting sites (just do a Google search for video hosting ).jpeg). . it is good practice to include descriptive text somewhere on your page.” or even “A pie graph showing . http://www. and.png is preferable to . The benefit to this is not limited to reduced load on your server for transferring big video files. though usually . Never try and load TIFF files.gif. in November of 2010. and try them out for picture. D. or the native files from your image editor ( • Vimeo. to clarify the purpose of your video length or size limits. most important.vimeo.png). PNG files (. as well as a few words to describe its content. • alt: the short alternate text for your image. • YouTube. . and GIF files (.226 HOW TO DESIGN AND WRITE WEB PAGES TODAY OUTSOURCING MEDIA HOSTING While it is possible to host all of your multimedia content on your own site. so do keep it brief. Also.gif). the ability to load videos into your own Web pages: • Viddler. quality.” or “An illustration of .C. . and another place to link back to your Web site. http://www. </p> . .com/ Always check the terms of service for these and other video sites. you also establish an account that provides yet another way to build your identity on the Web.” to describe the nature of the image. sound sync. some sites prohibit commercial uses for free accounts—meaning that you probably cannot promote your business using them. By using YouTube or some of the other services listed below. .psd files from Adobe Photoshop).g. . . Markup such as: <p class="caption"> <span class="access-label">Photo caption: </span>We took this photograph of the Thomas Jefferson memorial during our visit to Washington..viddler. you might consider outsourcing your media hosting—particularly video—to a thirdparty service such as YouTube. such as in captions. I prefer to include the text “A photo of . .

Developing a Consistent and Attractive Image Presentation The <img /> tag must appear in some sort of block-level element. Note that you should never resize images with the height and width attributes. For example. That can keep your page content from moving around as the images load. while hiding (if you’d like) the obvious “Photo caption” label that would be made clearer in your design. a 200-pixel-wide by 300-pixel-tall image would be specified with width="200" height="300". consistent design. For example: <div class="photograph"> <img src="" height="300" width="400" alt="Add alt text"/> . The height and width attributes on your <img /> tags should always match the actual pixel dimensions of the images that they load. even before the image is done loading. One approach to designing around your images is to create a little chunk of XHTML markup for reuse each time you want to present an image. /*Move way left of the screen*/ } can provide additional image descriptions for all users. While height and width attributes are not required.MULTIMEDIA CONTENT 227 and accessible CSS for hiding the access label. The content divisions in the RPK address this issue. <img /> cannot be a child of the <body> tag. /*Pull from document flow*/ left: -10000px. they tell the Web browser to save the space for your images. The values are in pixels. such as: .access-label { display: block. do that with your image editor’s resize or resample function instead. but you can go a step further to structure and display your images with an attractive. but you do not put the pixel unit in the value. The <img /> tag should also include height and width attributes for your images. according to the XHTML specification. that is. /*Display as a block for positioning*/ position: absolute.

</p> </div> A little bit of CSS can turn that chunk of markup into a design that complements the photograph and its caption. images and their presentation elements (a containing division.1) uses the CSS float: property to enable caption text to appear alongside and. if the text is long enough. wrap around the image: div. /*Photos often show up well against darker backgrounds.228 HOW TO DESIGN AND WRITE WEB PAGES TODAY <!--Note the space before </span>:--> <p class="caption><span class="access-label"> Photo caption: </span> Image description.photograph img { border: 1px solid black. This example (see Figure 18. margin-right: 10px.caption { font-size: medium. /*Keep text away from the image*/ margin-bottom: 10px. this particular . } As with video.*/ color: #FFF..*/ } div. /*Allow for padding and border to total 700px*/ padding: 10px.photograph p. /*Give definition to lighter edges of photos*/ float: left. /*White text*/ width: 678px. /*Add a bit of padding*/ } div. a caption) must be sized to work with page layout..photograph { background: #333.. should the text wrap around. /*Also away from the bottom. /*Float image to allow text to appear alongside of it*/. font-weight: bold.

alternative content on all forms of media. For this reason.MULTIMEDIA CONTENT 229 Figure 18. For .1. usually in the form of descriptive text but There are examples of embedding accessible content in the <object> tag (for audio and video. covered next) at this book’s companion Web site. transcripts of any narration or dialogue. Additionally. Images should be large enough to be worth loading and looking at—while text content in the same area should not be so wide as to be difficult to read. SOUND Perhaps more than any other media element. sound must be treated with care if you’re not going to drive your audience away with it. http://sustainablewebdesign. Even minor design enhancements. work with your images as you develop your page design (see Chapter 17) until you have reached a design and an element-sizing scheme that are in harmony with each other. in the case of sound and video. can improve the presentation of photographs and other media— especially if they are used consistently. such as background colors and borders. it is essential to provide accessible. example image presentation would require at least a 700-pixel-wide content area.

and with the audio cranked. And they will be very wary of listening to any sound on your site in the future. in their offices. Other people prefer to have music playing on their computers while browsing the Web. computers will play other sounds besides yours. If the only way to stop sound on a Web site is to close it or go to another site. should they ever come back. There are many different plugins and players for sound (see “Audio Players” sidebar). Such an accommodating move can just about send people out of their minds with fright when music or operating-system sounds—like a new email alert—play at their higher levels. that is exactly what site visitors will do. including music and system sounds) will force visitors to turn up their speakers as high as they can. It’s also best to provide some mechanism to pause sound. but the best players will build unobtrusively over . Sound that is recorded at low levels (that is. People view Web sites at work. • Deadly Sin #2: Sound that cannot be stopped once it begins playing. in case someone needs to step away from the computer but would want to pick up where the sound left off. or other places where sound would be embarrassing or unwelcome if it started playing unannounced. here is a list of the Three Deadly Sins of misusing sound on the Web: • Deadly Sin #1: Sound that plays automatically when someone loads a page. rather than just stop it. If sound starts automatically. sound that is very quiet relative to other sounds.230 HOW TO DESIGN AND WRITE WEB PAGES TODAY that reason. Refer to the audio section in Chapter 3 and this book’s companion Web site at http://sustainablewebdesign. it creates either embarrassment or an unnerving field of sonic chaos—introducing the potential for people to justifiably hate your site. • Deadly Sin #3: Sound that is recorded at low to learn more about ensuring proper sound levels when you record and edit sound files. Pretty self-explanatory. poor old Uncle Ed’s ticker doesn’t stand a chance if he receives a new email or logs off his computer.

2 That has made Flash a very popular platform for delivering video. Going a step Even as HTML5 continues to gain in popularity. All of these players require the Flash player and JavaScript. http://1bit. at the very minimum. just link to the • WordPress Audio Player. YouTube. links to your audio files. and add a playlist and customizable player to the bottom of your page. and many other video-hosting services .markwheeler. so that JavaScript-less users can still download your audio files and listen to them on their own players: • Yahoo! Media Player. you can try out a number of audio players for your site that work using ordinary links to audio files. not surprisingly. http://wpaudioplayer. But in addition to enabling your users to download your audio for use on their own MP3 players.MULTIMEDIA CONTENT 231 AUDIO PLAYERS Somewhat remarkably.1 VIDEO AND FLASH Depending on the region of the world. allow someone to download the sound file and play it on whatever media player the person has Viddler. there are a few good choices for unobtrusive JavaScript-based audio players that use Flash: the Yahoo! Media Player is probably the easiest to add. That is. see the book’s companion Web site at http://sustainablewebdesign. <a href="/media/audio/ • 1 Bit Audio Player. there is no reliable way to play audio natively in most Web browsers (however. it will likely be necessary to provide audio players such as those for users of older Web browsers. Flash is reportedly installed on more than 90 percent (and up to 99%) of all desktop computers. mp3">. That will. HTML5 will eventually change that. but they also leave links to your audio intact. for example. put a play button next to them. to include sound on your page. You only have to link to it from the <head> area of your XHTML pages. http://mediaplayer. and it will detect all of the audio files you link to. Vimeo.

especially for interface elements such as the navigation. The old ratio is 4:3. refer to this book’s companion site for the latest information. to increase the visual appeal of your videos. so it is likely that other methods for delivering video—probably coupled with HTML5—will become more important to learn in the future. the newer ratio is 16:9. SWFObject is one of the better open-source JavaScript libraries for embedding Flash content in a way that is browser-neutral and standards-compliant.) Regardless of whether you’re loading Flash-based video or a Flash movie of your own construction. whereas a 16:9 video that is 640 pixels wide will appear only 360 pixels tall. using SWFObject to load YouTube videos. SWFObject is included with the RPK. (However. which is the ratio of widescreen televisions. However. if you have access to the proper software. Again. sites like YouTube will give you different options along these lines. As with images. you’ll need to determine the dimensions that you want your videos to appear at. new mobile devices are challenging the use of Flash. The next chapter looks at page performance and interaction enhanced by unobtrusive JavaScript.3 I also have provided examples and detailed instructions at this book’s companion Web site. The SWFObject markup is too involved to show here in the book. sometimes 16:10. but there are excellent tutorials available on. including background images. for example. . That matters if you are adding additional XHTML structure and CSS. NEXT STEPS This chapter has covered some of the core concepts and challenges of loading media content into your Web pages. as Chapter 19 shows.232 HOW TO DESIGN AND WRITE WEB PAGES TODAY use Flash to deliver video content. which is shared with older television sets. You can also. The aspect ratio matters because a 4:3 video run at 640 pixels wide will be 480 pixels tall. but note that there are two different aspect ratios that are common to video. author your own Flash animations for inclusion in your Web pages. you can accomplish animation by using JavaScript and a library such as jQuery.

“Embedding YouTube Videos the Standards Compliant Way—SFWobject 2. “Flash Player Version Penetration.” 2. Adobe. Heidi Cool. “How to Link.heidicool.html embedding-youtube-videos-the-standards-compliant-waysfwobject-20/ .wikia .” products/player_census/flashplayer/version_penetration.MULTIMEDIA CONTENT 233 NOTES 1.0” [sic]. http://www. Yahoo! Media Player.


however. Additional and more complex examples can be found on the book’s companion site at http://sustaina blewebdesign.” To help you begin to understand the capabilities of DOM scripting. enhancing pages for wide screens. but it makes possible the sort of rich Web applications and functionality that users have come to expect from sites like Facebook and This chapter covers only the most introductory. general approaches to working with DOM scripting. RPK). In more advanced uses of DOM scripting. we will see a small example of this by using jQuery . JavaScript may play a more active role in controlling CSS. all of the relationships that this book emphasizes remain the same: XHTML still structures content and CSS handles all design matters. JavaScript performs minor adjustments to the structure of the XHTML. and handling external links on your site differently from internal links. to go deeper in this area. I encourage you to read Jeremy Keith’s DOM Scripting and other DOM-scripting materials listed in “Resources for the Future. In each of the chapter’s examples.CHAP TE R 19 Performance and Interaction Enhancing the performance of your Web pages by adding behavior and interaction using JavaScript and the Document Object Model (DOM) is known as DOM scripting. The chapter introduces three basic but useful tasks that DOM scripting can be used for on your site: manipulating the DOM when JavaScript is present. DOM scripting is one of the more complex areas of Web design. this chapter explains the principles of unobtrusive JavaScript through approaches to writing with the jQuery JavaScript library (which is included with the Rapid Prototyping Kit. via the DOM.

but it requires writing a lot of code for some of the more common things that Web designers often want to do. And depending on how you load the script from Google. A key benefit of using a JavaScript library (sometimes also called a framework) is that it does the heavy lifting for the scripting of your site. scripts written from scratch JAVASCRIPT LIBRARIES There are a number of high-quality JavaScript libraries available under permissive open-source licenses. DOM SCRIPTING WITH A JAVASCRIPT LIBRARY Some books. like Keith’s DOM Scripting. known as ECMAScript. too. For that reason. using the Google Libraries copy may make your live site load faster if someone has already visited another site that also loads the library. or you can use a service like the Google Libraries API* and pull in the library that the service • Prototype: http://www. such as selecting some unique element from your page.1 JavaScript by itself provides a number of language features for writing scripts to enhance your pages.” http://code. “Google Libraries API— Developer’s Guide. certain Web browsers implement it differently. you can elect to host your own copy of your library at your site.236 HOW TO DESIGN AND WRITE WEB PAGES TODAY to animate the margins on a site navigation’s links in response to the mouse hovering and leaving the guide. *Google Code. While jQuery (http://jquery. will teach you to write unobtrusive JavaScript completely from there are other libraries out there that you might wish to explore: • MooTools: http://mootools. leaving you to write leaner. While it is usually beneficial to have your own copy of the library while you’re doing Web development on your computer (if only because you can work without an Internet connection). while there is a standard form of JavaScript.* they can manage updates to the library for you.prototypejs. Libraries that are updated frequently can also improve the performance of your site over time.html . Additionally. high-level is the library I refer to in this book and in the RPK.

com/. Take a familiar example: when you write CSS styles. or and its API is thoroughly documented at http://api.PERFORMANCE AND INTERACTION 237 often have to employ certain tricks to get all browsers to interpret the JavaScript the same way. the library’s API is like the buttons on a DVD player: you probably don’t need to know how. Libraries like jQuery simplify DOM scripting because they are developed and tested extensively on many different browsers.jquery. JavaScript can then manipulate the browser’s representation.jquery. jQuery provides a method for doing that called the ready event. And just as a DVD player comes with an owner’s manual that documents its functionality. the play or pause buttons on the player work—but you know what they should do when you press them. You also know that buttons only work in certain situations or under certain conditions: if a DVD is stopped. particularly more complex selectors like div#header h1. While writing JavaScript entirely from scratch is a useful skill. ANATOMY OF DOM SCRIPTING The DOM is how a Web browser represents the structure and contents of an XHTML document to itself.ready(function() . If you think of a library as being something like a DVD player. the pause button will not do anything. JavaScript libraries simplify DOM scripting by offering an application programming interface (API) to build your own custom scripts. for the purposes of this book. you rely on the browser to have a model or representation of <h1> inside of <div id="header"> so that the style you write in the CSS appears correctly when the browser displays the page. for example. for example. Additionally. That usually makes cross-browser compatibility much easier to achieve in your scripts. which is attached to the document object: /*JavaScript*/ $(document). the jQuery library’s general documentation is at http://docs. we will skip ahead to writing DOM scripts that are built using a JavaScript library called jQuery. jQuery scripts work best when run as soon as the DOM has finished loading.

we can set (rather than just read) the <h1> element’s contents.” Using that event and keeping JavaScript out of your XHTML are the most important factors in keeping your JavaScript unobtrusive. What that would do in the browser is first select all matching elements from the document (thanks to the jQuery dollar function. or at least very similar.html('DOM Scripting Is Awesome'). (However.238 HOW TO DESIGN AND WRITE WEB PAGES TODAY { /*Scripts are written here to run once the DOM has been loaded*/ } ). Those lines translate as. jQuery makes certain DOM scripting functions possible using selectors that are identical. Provided that that structure appears in your XHTML. for example.” regardless of what text the tag contained before. we could use jQuery and write a line of JavaScript like this. Properties are information about the object—the example above refers to the html() method.) If JavaScript isn’t available in a visitor’s browser. If. inside the ready event shown in the source above: /*JavaScript inside the ready event*/ $('div#header h1'). the element selected by $('div#header h1') is returned as an object by jQuery and the Web browser. there should be only one match for <h1> on pages constructed according to the guidance in this book. In computer languages. It completes the match using a descendant selector that we know from CSS (div#header h1). Methods are particular things that either object can do or can have done to it: by passing text to the html()method. $().). we wanted to use DOM scripting to put the text “DOM Scripting Is Awesome” in the <h1> tag inside of <div id="header">. the script never runs. that method will . which will find all of the <h1> elements inside of <div id="header">. “When the document object is ready. to CSS. used by itself. objects have two basic features: methods and properties.) The <h1> tag’s text will then read “DOM Scripting Is Awesome. (The examples in the remainder of the chapter must appear inside the ready event. do all of the things listed here. but the site must still be accessible to the JavaScript-less site visitor.

the concepts should become clearer in the working examples below. That line uses the dollar-sign function to select the <body> tag on a page (In a compliant page. if I wanted all paragraph . DOM SCRIPTING: IS JAVASCRIPT AVAILABLE? In most of my sites that use DOM scripting. For a purely illustrative example with little practical value.) Used alone.) The script then uses jQuery’s addClass method to add the hasjs class to <body>.PERFORMANCE AND INTERACTION 239 read a specific property: the text and any XHTML tags that <h1> contains. we would not use DOM scripting to set the text of XHTML elements. DOM scripting will be limited to manipulating classes on XHTML elements. because it’s only adding a class. Under most circumstances. which are then styled differently according to rules in the CSS. this line goes inside of the ready event): /*JavaScript inside the ready event*/ $('body'). Assuming that JavaScript is available and that the user’s browser understands the DOM (which jQuery checks for automatically). that line of JavaScript is not very exciting. of course. In the more practical examples that follow. (You can check that the class has been added by choosing the View Generated Source menu from the Pederick Web Developer Add-on for Firefox. In one example. you would write the text as you’d want it to appear directly in the XHTML itself. This may be all a bit much and confusing. you’d not even notice that the script has done anything—unless the class then becomes a hook for any advanced CSS styles that should appear in JavaScript environments. the <body> tag of that document will have the hasjs class once the script has run. But whether or not you are ready to agree that DOM scripting is awesome. there should be only one <body> tag. we will also preview the animation capabilities of JavaScript by progressively enhancing the link states on site navigation. I write a simple function that adds a class of hasjs (short for has JavaScript) to the <body> tag (again.addClass('hasjs').



text to appear in red when JavaScript is available, but black otherwise, my CSS file would include:
p { color: black; } /*Display paragraphs black*/ body.hasjs p { color: red; } /*Display paragraphs as red if JavaScript is available*/

A native object in almost all Web browsers is window, which can be used to determine—among other things—how large a visitor’s browser view-port is. (Of course, that depends on the visitor having JavaScript enabled.) As was discussed briefly in the layout chapter (Chapter 17), a problem with wide fixed layouts is that they create an irritating horizontal scrollbar on low-resolution screens. A parallel problem presents itself for wide screens when it comes to liquid layouts, which may not be easy to read on very wide screens because lines of text run out over very long lines. One solution to designing for both screen sizes is to develop two different layouts: one either a liquid (with widths specified as percentages) or narrower fixed layout (with widths specified in pixels) for small screens, and another a fixed layout for wide screens. Then, using a little progressive enhancement in JavaScript, style the widescreen layout for large screens by using another hook on the <body> to deliver the widescreen layout via CSS. The low-resolution layout should be the default; it seems safe to assume that someone with a low-resolution screen may be less likely to have JavaScript. Beyond that, a low-resolution layout (particularly a fixed one) will obviously be fully visible on a high-resolution screen. In other words, it would be a poor choice to have the default site layout geared for wide screens and use JavaScript to prepare a small-screen version. This little function, available in the sites.js file in the RPK, determines the width of the browser’s viewport using the window object and jQuery:
/*JavaScript*/ function rpkwidescreen() { var rpkwidth = $(window).width();



if(rpkwidth>1100) { $('body').addClass('widescreen'); } else { $('body').removeClass('widescreen'); } }

We can then refer to that function inside of the ready event by writing:
/*JavaScript inside the ready event*/ rpkwidescreen();

What that function does is determine the width of the window (width), in pixels; if it is greater than 1100 pixels, the script manipulates the DOM to add a widescreen class to <body>. Coupled with the “has JavaScript” function, widescreen views of the site will have a body tag that looks like <body class="hasjs widescreen"> once the page is loaded and the lines of the script have run. Perhaps the site specified a default layout, using the div#page selector in CSS, that is 700 pixels wide, as in the example from Chapter 17 (see Figure 19.1):

Figure 19.1. The layout as it would appear without JavaScript active (or JavaScript enhancement).



/*CSS*/ div#page { width: 700px; }

Just below that style, one could write a widescreen style, using the widescreen class as a hook:
/*CSS*/ body.widescreen div#page { width: 1000px; }

Depending on how the rest of the page is designed in CSS, that simple addition may be enough to improve the site’s appearance. In the case of the example from Chapter 17, the style declaration on the descendant selector with the widescreen hook is indeed all it takes to change the design (see Figure 19.2). There is one problem, however: in its current form, the rpkwidescreen(); function is run only once, when the page is loaded. Suppose someone changes the size of his browser window while looking at the site—either using the maximize button or dragging the corner of the browser window to make it larger or smaller. Either way, the window size has changed—perhaps to a wide screen size, perhaps to

Figure 19.2. Using the widescreen class that a bit of DOM Scripting adds to the body, the layout can be adjusted in the CSS to suit larger screens.



a small screen size. To account for changes in the browser window size, an additional line of JavaScript would be necessary:
/*JavaScript inside the ready event*/ rpkwidescreen(); /*Check the window size when the DOM is ready*/ $(window).resize(rpkwidescreen); /*Check again, whenever the window is resized*/

Using another event (resize), the rpkwidescreen(); function will run every time the browser window changes size. Resizes that are greater than 1100 pixels wide will result in the widescreen class being added to <body> (or being left on, if it already was added). If the window is less than 1100 pixels wide, the widescreen class will be removed if it had been added previously. The browser should automatically redraw the layout, if there is a change in size/class, using the appropriate instructions in the CSS.

Suppose you wanted to use CSS to style contextual links differently when they point to pages outside of your Web site. That can be done manually with each external link by giving it a class like ext in the XHTML. However, that is time-consuming and tedious work. (CSS 3 has a selector for this, but it is not well supported on all browsers; although jQuery will let us use that selector, as we will see below.) So a DOM scripting solution might be worth exploring. One thing that distinguishes external links from internal links is that external links must all be prefixed with the HTTP protocol string, http://; without that, Web browsers will actually ask the Web server for a file on your site. For example, <a href=" .com"> will cause a browser to look for a file named .com on your site; to write the external link correctly so that it points to the Google home page, the href attribute-value would need to be href="". DOM scripting excels at looking for and sorting out values in attributes; jQuery simplifies that process by supporting selectors found in CSS 3—even in browsers (such as Internet Explorer) that don’t yet



support them for use in CSS. So rather than write a special class for each external link in the XHTML, we could write a bit of DOM scripting that looks for all anchor tags whose href attribute begins with http://, and then add the ext class to each external link the script finds. Because contextual links are probably limited to the main content area (div#content), this script will use the descendant selector coupled with an attribute selector that looks for href values beginning with http://:
/*JavaScript inside the ready event*/ $('div#content a[href^=http://]').addClass('ext');

Adding a style declaration to the CSS could then color external links red by referring to the ext class that DOM scripting adds:
/*CSS*/ a.ext { color: red; }

Users without JavaScript will not experience any difference in your links, so if you think that it is critical for all users to be able to visually distinguish between internal and external links, the manual route of putting class="ext" on your external links in your XHTML source would be the better way to go.

The uses of jQuery we have seen so far have show only a little of the library’s ability. This final example will preview a bit more of its ability in handling simple animations. (To go even further with animation, you should investigate the official jQuery UI library.2) What we will do in this example is animate the margin-right: property on a navigation area’s links to make them appear wider when moused over. A pure CSS approach to this would have a simple :hover selector that reduces the margin-right: from, for example, 30 pixels to 0 pixels, resulting in the effect of the navigation item expanding when it’s moused over:
ul#navigation a { margin-right: 30px; } ul#navigation a:hover { margin-left: 0px; }



In fact, to progressively enhance your pages, you would want to leave that in place, so that JavaScript-less users would see an indication of which link they’re hovering over. But to enhance the hover effect, we can use the hover(); and animate(); methods in jQuery to provide a smooth animation. Rather than the CSS jumping from 30 pixels to 0 pixels of righthand margin in the blink of an eye, we can tell jQuery to make the transition over a period of time, using either keywords such as fast or slow, or a specific time value in milliseconds (one second is equal to 1,000 milliseconds). The DOM scripting for this looks like:
/*JavaScript inside the ready event*/ $('ul#navigation a').hover( function() { $(this).animate( { "margin-right": 0 } , "slow"); }, function() { $(this).animate( { "margin-right": 30 } , "slow"); } );

What those lines accomplish are first to select all of the anchor tags inside of <ul id="navigation"> and then add a hover event to them. The hover event in jQuery can take two functions: the first specifies what happens when a mouse moves over the element and the second specifies what happens when the mouse moves out and away from the element. The $(this) selector refers to the element selected originally (ul#navigation a), and it takes the animate(); method, which can animate any numerical property in CSS (such as widths, heights, margins, padding, and opacity but not—importantly—colors; you’d need to use the jQuery UI library or another plugin to animate colors). With that script in place, anyone mousing over the elements in this navigation who also has JavaScript will see the navigation buttons slowly become wider when they are moused over and slowly shrink

2005). Jeremy Keith. “Problems and Solutions.246 HOW TO DESIGN AND WRITE WEB PAGES TODAY FINDING SCRIPTS You can find all kinds of freely downloadable JavaScript code on the back to normal when the mouse moves away. http://plugins.” http://jqueryui. The next steps are for you to build in the rest of the pages of your site and prepare it for going live—topics that are covered in the next section. 2. *jQuery. NEXT STEPS This chapter concludes the strategies for success for building individual pages. jQuery Plugins. CA: Friends of Ed/Apress. Certain libraries.* But be judicious and test any plugins well on multiple browsers. “jQuery UI. A safer way to search for scripts is to look for ones that run with your JavaScript library of choice. including as many use outdated practices.jquery. But be very cautious of using just any old JavaScript. jQuery UI. Have a look at the working example at .” NOTES 1. the quality of scripts written by others varies widely. DOM Scripting: Web Design with JavaScript and the Document Object Model (Berkeley. even host plugin libraries that you can browse.

PAR T IV PROBLEMS AND SOLUTIONS This section of the book covers the problems and possible solutions that impact the architecture and launch of your live site. beyond the borders of your own site. The section concludes with a chapter on tracking visitors to your site and making it easier for them to share and repurpose your content in order to establish your reputation further across the Web. . It also introduces some of the dynamic approaches and systems (specifically WordPress) that you can use to help build and maintain your Web site.


To build a manageable Web site involves developing a thoughtful. how to find it. on Windows: file:///C:/Documents%20and%20Settings/username/ website/htdocs/index. scalable architecture for its pages—and a Web-like environment to test it in. and where they are relative to the rest of your site. This chapter looks at some of the choices you will have to make in developing your site’s architecture once you have a local Web server running to test it in.htm That causes serious problems for root-relative links (described below). as it helps you to easily locate and edit your pages. and link them to one another. and how the pages relate to one another.CHAP TE R 20 Site Architecture The architecture of a Web site is the organization of all its pages. A sensible URL structure and a site navigation that reveals the general contents of your site increase the likelihood that users will understand what’s on your site. which will go all the way back to the hard drive. Site architecture is equally important to your site’s visitors. A good site architecture matters to you as a site’s designer. The file URL also makes things needlessly confusing when it comes to designing . you’ll see the address bar display a long URL like this one. C:/. SETTING UP XAMPP FOR LOCAL DEVELOPMENT If you open a Web page directly in a browser using File > Open.

250 HOW TO DESIGN AND WRITE WEB PAGES TODAY your URLs. for example. before creating your own htdocs/ folder or copying the htdocs/ folder from the RPK. too.) When you go to upload your site (see Chapter 23). Although the word server may bring to mind a gigantic computer. however. (There is an htdocs/ folder that comes with XAMPP. as well as MySQL and PHP (which are necessary for running WordPress). One of the easiest ways to set up your own Web server for development and testing is to install XAMPP. http://localhost/. . And if you are using any PHP (see Chapter 21). But the pages that make up your site require an architecture. SITE ARCHITECTURE Chapter 5 and the Rapid Prototyping Kit (RPK) offer a folder structure for the different design and media components of your site. in case you need it but on Windows you basically only need to download XAMPP. You can then access your pages from your Web browser using a special URL. which can run on your own computer while you work up your site’s architecture as well as its design and content. htdocs. you also cannot test it in the simple file view. The solution to those problems is to set up a little Web server that runs on your computer—or even on a USB drive. (XAMPP is not designed to host your live site. you can just rename it to htdocs-original/. because running a Web server is required to interpret PHP in your pages. and click the xampp_start application in the xampp/ folder to have a fully operational local Web server.1 XAMPP is a distribution of the Apache Web server. unzip it to a USB drive. which is inside of the xampp/ folder. click on your links as the http://localhost/ URLs in your XAMPP installation. provided that you put your site in XAMPP’s root web folder. your actual domain’s URLs should function the same when you. like XAMPP. a Web server is actually software. You can think of localhost as a placeholder for your actual domain name.) I have posted on this book’s companion Web site instructions for setting up XAMPP (see http://sustainablewebdesign .

com/paintings/fruit. a file-only URL does not reveal anything about the user’s location within the larger structure of your site—or the context of a given page. either. but there are distinct areas of your site. That is. will not necessarily be grouped together in file listings.htm. But if the site grows to several dozen or more. which typically relies on databases and the Web server to mimic file and folder references Each of these types of architectures has its benefits and appropriate applications. depending on the size and type of site that uses them. Having all of your XHTML files located in the root of a site may not be a problem if there are only a dozen or so pages on your site. Scale presents another problem for a designer who dumps all pages into the root of a site. such as pages for individual portfolio items. if all of your pages are kept in the root Web fruit. which page can you better guess the contents of? The latter provides more than a hint and is the product of a folder-oriented architecture. Pages that are related to one another.htm files may make it difficult to find the page you want to edit. which are ordered alphabetically or by modification date. regardless of the site’s size.) Consider the difference between http://example. This keeps your URLs short and simple.htm. which places all of the XHTML pages of a site in the root Web folder • Folder-oriented architecture. users may become needlessly disoriented as well. having a massive list of all of the . which places related pages into separate folders off of the root Web folder • Data-driven architecture. in a pattern like http://example.SITE ARCHITECTURE 251 There are three types of architectures that are commonly used on Web sites: • File-oriented architecture. With a file-oriented architecture. (Navigation might help suggest context—but you shouldn’t put everything in the navigation. Simple: File-Oriented Architecture The most basic site architecture is created by saving all of your XHTML files right into the root of your Web folder. .htm and

com/ or http://example. and accessed at URLs like http://example . it will display in case you forget to save an index file in a folder where you have files that aren’t quite ready for the world. http://sustainablewebdesign. To prevent your Web server from doing that in indexless folders (such as your media folder).html index. all of your portfolio items.htaccess as well: Options -Indexes That should prevent people from snooping the files on your site. your portfolio can be located at http://example. . it looks for the . There are additional .htm when either the root of a site or a folder is requested (e. The benefit of folders is that users can cut down the URLs to move up to higher levels in a site.htm. htm in your root. If you do not create your own index file. rather than having a portfolio overview located at http://example. your Web server might list all of the files and folders in a given directory.htaccess file: DirectoryIndex index. thanks to the magic of the index file (see “The Index File” sidebar). For example. In other words. If you save a file named index.g.htm.. add this line to your .php If the server finds index. like a company newsletter that you designed.php versions of you may need to configure your Web server by adding a line that looks something like this to your .com/ book/.252 HOW TO DESIGN AND WRITE WEB PAGES TODAY Complex and Scalable: Folder-Oriented Architecture One alternative method for controlling the clutter of individual files in your root Web folder while also helping users orient themselves within your site is to create folders for each of your major site directives available at this book’s companion site. visitors to your site can go to the address bar in their browsers and delete the file name off of THE INDEX FILE Most Apache Web servers are configured to serve index. otherwise. but still see a listing of files.html or . Then. can be stored in the portfolio folder.htm index.

whether it points to actual files and folders. folder-oriented structure may make it easier for you to transfer your site to WordPress or another CMS’s control later. or later to an abstract reference in a database. resulting in a URL for the resume like on a WordPress site would not point to a resume folder. an overview page at resume/. You might save your resume. Representing those in navigation or promotional links becomes a challenge—as does sharing URLs in email and elsewhere. (See Chapter 22 for information about configuring WordPress and your Web server to use these so-called pretty URLs. WordPress uses the resume/ part of the URL to pull your resume out of its database. For example. for example. you can still use a shallow folder-style architecture. Being selective of materials for a site and coming up with a shallow architecture help prevent a site from becoming needlessly To link to resources within your site requires an . ARCHITECTURE. a URL is a URL. whether through site navigation or contextual links in your site’s content. AND NAVIGATION Site architecture matters also when it comes time to start linking your pages together.SITE ARCHITECTURE 253 the end of the URL and come upon. PATHS. as index. if you’re not yet ready to make the leap to WordPress. instead. opting for a consistent. for example.htm and place it in a resume newsletters/ represents a deep architecture. And that is what is meant by a shallow architecture and navigation: a long URL like http://example. your site’s architecture with that system can be entirely dynamic. http://example . Dynamic: Data-Driven Architecture If you decide to build a site using WordPress or another blogging or content management system (CMS). That being said. even for areas of your site that might have only one page. To Google and to your users.) However. presumably (or ideally) with overviews or landing pages at each level.

Absolute.example. In a site with a file-oriented architecture. and root-relative.htm. Absolute Links Absolute links (sometimes called absolute URLs or absolute paths) include your full domain name and the name of the page/resource. http://archive . for example. the absolute link to your resume might be http://exam ple. any absolute http://example.htm">view my resume</a>. Relative Links To make sites more portable. to link to your resume from a page in your . aside from the absolute link to your Web site’s home page in the header area of your pages (see Chapter 14). and Root-Relative Paths There are three types of paths that you can write for your links: absolute. for example.htm). you can use relative links. However. your resume. To keep Web sites portable and to make their development easier (especially using an XAMPP installation’s http://localhost/ URL).com/resume. which are links created relative to the current document’s place in the site architecture. where all files exist directly in the root Web folder. it’s usually not a good idea to use absolute links to pages within your own site: not only are they longer. or to take visitors to different pages. Relative. relative links are very easy to write: to link from any page in the site to.htm. but if you should switch domain names or set up archives of your site at a subdomain. Absolute URLs are what people commonly share in email and what must be used to link one Web site to HOW TO DESIGN AND WRITE WEB PAGES TODAY understanding of URL paths. For URLs in your links will no longer refer to items within the same version of the site. you would just write <a href="resume. which instruct the browser to load different resources from your site onto a page (images or other media. But if your portfolio were in one folder and your resume in another (and saved as index. it’s generally preferable to use relative or root-relative links. relative. as well as CSS and JavaScript files).

and perhaps against relative links themselves. of course. rootrelative links will only work during the development and testing of your site if you use something like XAMPP to run a Web server on your local computer. The .. because it starts from the root. you move closer to creating a site that is ready for posting to .edu/./ tells the server to move up one folder (out of portfolio/ and up to the Web root) and then down into the resume folder. so let relative links serve as another argument against a deep architecture.htm">. (However. It gets confusing pretty quickly. though. So add the root-relative link issue to the list of reasons why Chapter 5 urged you to buy your own domain name./ and so And.. they will no longer be portable if you decide to purchase your own domain name. it can always be found— provided that resume/ is in the root Web folder./.. and proceed to the full path relative to the root of the site. three would be .../resume/index. To move up two folders would be . NEXT STEPS As you begin to build a site architecture and test your pages using XAMPP. once you have added /~yourusername/ to your links. you would have to write <a href=". Root-Relative Links I prefer to write root-relative links in most situations. even if you have a very complex architecture: <a href="/resume/"> can be used anywhere.. Rootrelative links will work from anywhere in a site./..SITE ARCHITECTURE 255 portfolio folder. you’d need to prefix all of your links with /~yourusername/ to make them rootrelative—otherwise././resume/"> or <a href=". If you are using a Web account like you might get through your school or business and it has a URL structure like http://university. the root-relative links will point to (nonexistent) files and folders off of university. rather than relying on hosting from your school or employer.) There is one case where you cannot write root-relative links beginning with a slash. root-relative links always begin with a slash (/).. representing the root Web folder./.

apachefriends. which talks about transferring your Web site to the server space that you’ve purchased from your Web host.” http://www. skip ahead to Chapter 23.html . NOTE 1. “ . The next two chapters look at PHP and WordPress. Apache Friends.256 HOW TO DESIGN AND WRITE WEB PAGES TODAY the open Web. if you aren’t interested in those for the time being.

which all load the same CSS file in the <link> tag. As you begin to develop your site’s pages. you’re still left with uploading all 20 files to your live Web site (not to mention placing a lot of faith in search and replace). an alternative solution is to have a file that contains the repeated content and share it with all pages. Such content reuse. however. To reuse content or otherwise make your pages more dynamic involves some kind of preparation on the server. While you could try and use a search-and-replace function across your files.CHAP TE R 21 Reusing and Dynamically Generating Content One advantage to styling your Web site using a single CSS file is that your design instructions are shared over multiple XHTML pages. you face the unhappy task of changing your navigation 20 times. otherwise known as server-side scripting. and you need to make a change to your navigation. you will no doubt notice that there are many structural features in addition to the navigation— the <head> area of your XHTML and your branding. . for two examples—that are the same or almost the same from page to page. Static XHTML files (plus CSS and JavaScript) are rendered directly in the browser. But what about content? If you have a site with 20 pages. A change to one CSS file changes the design of your entire site. would require a different kind of design from the static XHTML pages that we have looked at so far. Rather than rewriting the same content on every page.

you’re not just purchasing storage space: you’re purchasing access to a Web server. prepare them. are prepared by the Web server. and JavaScript for users to experience your Web site. and then hand them to you. In this chapter. If you post an XHTML file to your Web site. And that’s important to remember. ketchup. The metaphor that I like to use is that Web sites made up of static XHTML pages are sort of like vending machines. a recursive acronym that stands for PHP Hypertext Preprocessor. it is the language that WordPress (see Chapter 22) and many other open-source Web software packages are written in. which can do much more than simply transfer files down to a visitor’s Web browser. CSS. the page on their machine is identical to the one on your server—not unlike when you see a candy bar in a vending machine. is a widely used open-source server-side scripting language. however. Nothing changes about the candy bar when it falls from its little slot and into your hands.1 PHP is great for building simple dynamic XHTML Web pages. and JavaScript so closely: no matter what you have going on behind the scenes on your server. Dynamic pages. there is no difference between a dynamic page and a static one: a dynamic page still appears in the browser as XHTML. but rather some mix of dynamic and static content. whereas dynamic sites are more like fast-food restaurants. PHP. Take that example to a Web server offering dynamic content: the server can assemble dynamic content from a number of different files before sending what appears to be a complete. put in your money. static page to your visitors. you are still offering XHTML. and why this book has looked at XHTML. it’s a process that’s instantaneous. and JavaScript. and someone accesses it. In fact.258 HOW TO DESIGN AND WRITE WEB PAGES TODAY When you purchase Web hosting. and a wad of raw meat. we will look at some basic uses of PHP that will prepare you to learn how to create and modify your own WordPress templates. . and hit the button for the candy bar. but what lives on your server is not the complete file as it will be seen by visitors. When you go to a burger joint. CSS. they don’t (I hope) hand you a bun. CSS. From the visitor’s point of view. they take those ingredients.

and they allow you to jump in and out of static XHTML. the PHP code appearing between the PHP tags. a file might contain: <p>The current year is <?php echo date('Y').htaccess for this purpose.htm or . but you decide to include PHP in them. to output the current year.html pages.REUSING AND DYNAMICALLY GENERATING CONTENT 259 WRITING PHP By default on most Web servers.htaccess in the chapter on WordPress.php extension. any files containing PHP must be named with a .htaccess files. ?>.php .htm . The server will interpret.) Check the specific documentation for your Web host as to what lines you must put into .htaccess file in your site’s root Web folder so that it contains a line such as: AddHandler application/x-httpd-php .</p> which during the year 2011 would appear in the browser’s source view as <p>The current year is 2011. Unless there is something wrong with the Web server. any files with PHP that you want the server to parse must have a . If you have a site with lots of . the page is nothing but XHTML. Different Web hosts require different instructions for parsing PHP in . but usually you must edit the . you don’t have to rename the file extensions from .</p> Again. or parse.html pages. PHP tags open with <?php and close with ?>.php.html (This line is included in the RPK’s .htm or . these are not the same as XHTML tags. from the visitor’s point of view.HTM FILES By default on most Web servers. there will be other examples of .php file extension (though see the “Parsing PHP in . To call PHP into action requires using PHP tags. .htm to .htaccess file.htm Files” sidebar). This is an example of why Chapter 5 suggested purchasing Web hosting from hosts that enable configuration with . For example. PARSING PHP IN . remove the hashes in front of it to use.

php. which might output Hello. at http://localhost/mysiteinfo. which outputs any text you’d like. function above. ?> and save it as mysiteinfo. Functions are made up of the function name. PHP also has what are known as language constructs.php). Just be sure to open and close your PHP tags. but use a different syntax—one that doesn’t use parentheses. depending on how the function itself was written. The most common construct is echo. and it took the argument of the name of someone to greet.. (As you will see when you begin to work with WordPress templates. PHP has both built-in functions.260 HOW TO DESIGN AND WRITE WEB PAGES TODAY visitors will never be able to detect which parts of your pages are static XHTML and which parts are created dynamically by PHP. we would write greet("Tom"). known as arguments.) Anatomy of PHP The majority of basic PHP involves writing or working with functions. that the function needs. just know that it’s there if you have a question about your Web server’s environment or configuration. they are sort of like functions.. We will look at examples of both below. Tom!. like the date(). if we had a function called greet(). That page can help you determine what your server has installed and whether it meets the requirements for running software like WordPress. you can jump in and out of PHP as many times as you’d like. PHPInfo doesn’t make for thrilling reading. and mechanisms to write your own functions. Pull it up in your Web browser (e. Simply write this in a blank text file: <?php phpinfo(). say Tom. as though you’d typed it into your Web pages PHPINFO PHP has a special built-in function that will give you all sorts of information about your Web server.g. and you’ll see all kinds of information about your Web server or XAMPP development environment (see Chapter 20). . For example. followed by open and closing parentheses where you would write any information.

\. you would type: <h1>Site Overview</h1> In PHP. but for me it comes down to laziness: “echo” is faster to type than “print. To do this. a very fancy word for the unfancy task of simply joining strings and variables together. Sometimes. When quotation marks appear inside of a string marked by quotation marks. However. ?> Their appearance in a user’s browser would be identical.REUSING AND DYNAMICALLY GENERATING CONTENT 261 yourself. it’s common to use quotation marks and apostrophes. you could write something similar to this: <?php echo "<h1>Site Overview</h1>". you need to use concatenation. and I don’t have to inconvenience my pinky to type “p. the differences between the two are subtle.” It’s one less character. ?> In the browser. you need to insert the contents of a variable into an echo statement. someone will see I've just read "The Road Not Taken" by Robert Frost. as when you are writing your own functions. when writing plain old English prose. In PHP. Escaping echo relies on quotation marks (single or double) to specify the contents of a string. For example.". if a script had a variable called $username . <?php echo "I've just read ###BOT_TEXT###quot;The Road Not Taken###BOT_TEXT###quot; by Robert Frost. (You will sometimes see a practically synonymous construct. print. they need to be escaped with a backslash.”) In XHTML. you concatenate using dots. as far as PHP is concerned. which is just a collection of characters. for example. Escaping the quotation marks just keeps PHP from being confused that the string is ending earlier than you intend.

The include(). you’d write <?php include($_SERVER["DOCUMENT_ROOT"]. .php").php file. So. For this reason. that short PHP script would output Hello there. any PHP instructions in it will also be executed by the server.php. ?> Viewed in a browser. is that by default. $username . echo "Hello there. called includes. The trick with include().262 HOW TO DESIGN AND WRITE WEB PAGES TODAY (variables in PHP always begin with a dollar sign). in your include function. Tom! It is good to see you again. which contains the location of your root Web folder.". your include instructions should transfer easily from your development environment to your live Web site. navigation. "/includes/navigation. " . it’s convenient to put files you want to include in their own folder. it looks for paths relative to your server root. for example. but by using the PHP document root variable. perhaps off of the Web root. That looks a little ugly. If the file you include is a . "! It is good to see you again. Then. followed by the includes folder and the file you wish to include. function. which will add the contents of any file you include to the page where you call include(). ?> wherever you want your navigation to appear. if you had a folder called includes/ with a file that contained only your navigation. it could be output as part of a greeting by writing: <?php $username = "Tom". Function One of the most basic but useful features in PHP is its include(). from. not your root Web folder. you’d use a PHP variable called $_SERVER["DOCUMENT_ROOT"].

to load your functions file. However. which should have text that provides a unique title for each page of your site. An important part of functions is that. or perhaps initials of your domain. The contents of the function itself are written between curly braces. but you’ll only need to use the include function once. probably at the very top of your page. To repeat content without including multiple files. all of which are prefixed with rpk_. they allow you to specify arguments. That can be handled by specifying an argument. To prevent your custom functions from conflicting with the functions built in to PHP. } . you can write a single PHP file that contains your own custom functions for each piece of repeated content. used the way it was above with the navigation file. will go a long way to making your sites more manageable by repeating shared content. as well as offer content that is slightly different from page to page.php.REUSING AND DYNAMICALLY GENERATING CONTENT 263 WRITING YOUR OWN FUNCTIONS include(). $title . For example. let’s say you wanted to write a function to display the <head> area on all of your pages. that must be specified when you actually call the function in your pages: /*PHP*/ function rpk_head($title) { echo "<head> <meta http-equiv=###BOT_TEXT###quot;Content-Type###BOT_TEXT###quot; content= ###BOT_TEXT###quot;text/html. I have written some custom functions in the RPK. $title. it can only output the complete content of the file. One of the elements in the head area of every page is the <title> tag. to use the function in a custom way on your pages. (You could write this function in a file you name functions. and an underscore. unlike simple included files. or bits of unique</title> </head>". charset=utf-8###BOT_TEXT###quot; /> <title>" . prefix the names of your custom functions with your initials. " – Example.) To write custom functions in PHP. you must write function followed by the name you want to give the function. You’ll still need to use include().

rpk_head("Overview"). particularly Ruby. the very basic <head> area here is only intended as a simplified example. you’d write something like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. while not as consistent or elegant as some other languages that are gaining popularity on the Web. ?> <!--End PHP. function on your XHTML page.php"). .0 Strict//EN" " it is important that you review any custom PHP that you have written from time to time. to actually call the rpk_head().dtd"> <html> <!--The <head> gets loaded in a dynamically in PHP--> <?php include($_SERVER["DOCUMENT_ROOT"] . That being said. resume static XHTML--> <body> A more complete function might also output the DOCTYPE declaration and any other repeated elements as part of the function rather than in the static XHTML as in the example above. However. and check any functions you’ve used against the reference at PHP. You can find additional functions in the RPK.w3. PHP AND SUSTAINABILITY PHP is an open-source language "/includes/ functions. However. see http://sus tainablewebdesign. and may eventually be removed from the language entirely.264 HOW TO DESIGN AND WRITE WEB PAGES TODAY Then. other functions will take their place—and the PHP. meaning that they are no longer advisable to use.2 PHP is widely used and can contribute to your site’s overall sustainability. Functions occasionally become documentation is very good about making replacement functions clear.

Ruby Programming Language. AND DYNAMICALLY GENERATING CONTENT 265 you can pretty much count on echo and include(). NOTES .net/ 2. http://php. NEXT STEPS This chapter has only scratched the surface of PHP. but it is enough to help you start work with the content in the next chapter on WordPress. PHP. WordPress is written in PHP and has many of its own functions available that you can use to build or edit a WordPress template. to be around well into the future.


such as site navigation. organizational. it can also be used to create. While WordPress’s primary function is as a blogging system. This chapter looks at WordPress.and folder-based architectures have trouble supporting that kind of growth. as it is delivered more or less as-is to site visitors. and that’s not always possible to set up on computers that aren’t your own.CHAP TE R 22 Dynamic Sites in WordPress As we have seen. The required FTP or SFTP access to a site may also complicate collaboration. . Collections of files also become more difficult to revise and improve if a site grows to hundreds or thousands of pages. even minor changes to all of your site’s pages can become needlessly time-consuming. or business sites. a popular open-source blogging and content management system (CMS). if you are building a site together with other people—unless you trust them with your SFTP password (and you shouldn’t. unless you are using PHP or another server-side language to include repeated page elements. and revise the kinds of pages found on many different kinds of portfolio. manage. One benefit of keeping a site as a collection of files like that is that the site’s content will require minimal maintenance. Finally. Web sites can be a collection of XHTML files. file. But there are drawbacks to sites that are collections of files: you have to have access to an FTP or SFTP client to upload changed files to your site. perhaps enhanced with PHP. they’ll goof something up and it’ll be your problem to fix).

though: if you opt to run your Web site with WordPress. In the case of WordPress. 2001). and Apache. You might also want to read Eric Raymond’s book The Cathedral and the Bazaar. Even as a user of WordPress. The techniques for WordPress templating in this chapter are a good first step in that direction. you need to make a commitment to regularly update your copy of WordPress so that you always have the latest. MySQL database. not only is the source available. and also that bugs and potential security issues are usually found and fixed very quickly. contributing to the documentation. A key idea behind open-source software is that its source is available for viewing and. You should also check before you purchase Web hosting that your hosting company regularly updates its PHP. Raymond. revised and expanded ed. Instead. visit the Open Source Initiative at http://opensource. That means that WordPress is more reflective of the blogging community that uses it. One word of caution. WordPress does not store your content in separate files (as you do when you create XHTML pages). WordPress also uses its database to store configuration settings and site but there is a large community of people who are actively working on the software. if released with a permissive license. UNDERSTANDING WORDPRESS AND SITE ARCHITECTURE Like many content management systems.268 HOW TO DESIGN AND WRITE WEB PAGES TODAY OPEN-SOURCE PROJECTS WordPress is an example of an open-source software project. The Cathedral and the Bazaar: Musings on Linux and Open Source by an Accidental Revolutionary. MySQL. In addition to storing site content. CA: O’Reilly Media. or even—if you get good enough—working on the WordPress source itself. you can contribute to the community by reporting problems. (Sebastopol. The only exception . WordPress keeps your content organized in a database. To read more about the open-source movement.* *Eric S. and Apache Web server and that the hosting company’s advertised versions meet the current WordPress requirements for PHP. most secure version. also for modification and extension.

So when people access blog posts or pages in WordPress. using Google’s site: syntax and the Codex URL. to search for pages in the Codex that talk about template tags. but check before you purchase hosting). though. • Use your browser’s Find function (Ctrl or Cmd + F) to wade through long pages. WordPress has a URL scheme that looks like http://ex open to consult on the particulars of PHP.wordpress. like Here are some other tips for reading the Codex: • Have PHP. So far. You can THE DOCUMENTATION: WORDPRESS CODEX The documentation for WordPress is called the Codex. (See the sidebar “PHPInfo” in Chapter 21 for determining your Web host’s server configuration.) Understanding that URL scheme requires a bit of a conceptual shift. and it is available at http://codex. where “21” refers to some record in the database. • If you are working to fix a problem with your site or template. the URLs are actually instructing WordPress to retrieve records from a database.php is set up the first time that you install usually indicates the presence of a folder called about/ in your root Web folder.1 you can set up WordPress to generate “pretty” URLs. if necessary). But if your Web host has enabled Apache’s mod_rewrite module (most do. although you can edit it in your text editor later. we have seen that a pattern like http://example . .com/?q=21. By default. the odds are that someone has had the same problem or question as you at some point.php SITES IN WORDPRESS 269 to that is the wp-config. I’d go to Google and search: template tags do not ignore posts in the WordPress forums. Although the Codex includes a search function. For example. Not so with WordPress and mod_rewrite. which is where it stores information about connecting to your database and some other information about your Web server and Web site (wp-config. which let you write URLs that are independent of files and folders. I often find it easier to search the Codex using Google.

but keeping the core WordPress files in their own directory makes updates easier. However.3 However. be sure to consult WordPress’s INSTALLING WORDPRESS WordPress is constantly revised and improved. but that can make upgrading WordPress tricky if you want to start with a clean installation on each upgrade (discussed at the end of this chapter). so in addition to the installation suggestions at http://sustainablewebdesign. By (the hosting site of Wordpress. consider using the media/ folder from the RPK.270 HOW TO DESIGN AND WRITE WEB PAGES TODAY even configure WordPress to automatically generate URLs according to particular patterns for different types of content. so that your WordPress blog would be accessed at http://example. such as wp/.5 It does an outstanding job of catching spam comments. • If you set up WordPress so that you can upload images and other media. .com/ book/.4 which will let you set up the Akismet plugin that comes with WordPress. WordPress stores uploads inside of the wp-content folder. • If you want to use WordPress to manage your entire site. consider installing WordPress in a dedicated folder. be sure to obtain an API Key from Wordpress. such as blog/. and keeps your site root folder more tidy.htaccess and index. you can install it in the site’s root Web and not for the rest of your site’s pages.php file into your site root. saving you the headache of filtering literally thousands of spam comments by hand. although you still retain the option to edit the URLs on each blog post or page that you create. You’ll have to move the WordPress . I have found that it is much easier to later update WordPress when it’s stored in its own folder off of the site root. perhaps with a wp/ subfolder where WordPress can keep your media uploads organized. • If you allow comments on your blog. here are some general points to consider when installing WordPress: • If you only want to use WordPress for a blog.

it looks for the specific page. (The complete details of the RPK WordPress template are at this book’s companion site. For example.php fallback as it does for all pages.php. but this is the basic set for a baseline template. I have also created a starter WordPress template based on the Rapid Prototyping Kit (RPK). absent that. per-category.php. which is the order of files that WordPress checks in your theme folder to decide which template to display for a given page. building a WordPress template from your design may be very easy: you may not have to touch the PHP templating files at all. The hierarchy moves from specific to general. so the good news is that if you have used the RPK for designing your XHTML pages.php. for displaying for displaying the home page of your site The template hierarchy provides mechanisms for specifying additional templates. with comments and a comment form • archive. for displaying the results of searches • 404. http://sustainablewebde sign.) The Template File Hierarchy To customize the content and look of your WordPress site. There is a “Visual Overview” of the template hierarchy at the Codex. WordPress will simply use the generic index. if WordPress is trying to display a page. or per-tag listings of posts • search.6 but here is a basic description of what you will find in the WordPress version of the RPK: • page.DYNAMIC SITES IN WORDPRESS 271 TEMPLATING WORDPRESS WordPress has a system for building custom templates. . for displaying individual pages • single. It uses the same structural blocks as the XHTML version of the RPK.php. for displaying individual posts.php file. for alerting users to a missing page • index. simply copy your CSS files into the correct place in the RPK template folder.php. it’s important to understand WordPress’s template hierarchy.

It’s also helpful to enter a few blog posts in WordPress and/or a few pages. • comments. which uses essentially the same XHTML markup from the footer area of the RPK’s prototype. templating for WordPress is not a whole lot different from working with the regular RPK— except that there is PHP intermingled throughout. the browser still receives XHTML that you can experiment styling using the Pederick Web Developer Add-on or other in-browser development tools. the post body. And because the RPK WordPress templates use the same structure as the plain XHTML version. Some of the information. • footer. and sidebar across all templates and display a custom comment form when necessary: • header. As you will discover by working with the files. Remember that. . footer. You may also find it useful to open the WordPress Edit Post page to edit an already-published post.php includes the navigation and room for any widgets you’d like your site to include. and so on) appear in the published post as viewed in the browser. the rest you can copy from your RPK prototype file.272 HOW TO DESIGN AND WRITE WEB PAGES TODAY Additionally.php includes the head area and header branding. no matter what system is running on the Web server. and compare their output in the browser (using View > Source) with the template files as they appear in your text editor. so you can see where the items in the WordPress Edit Post interface (the post title. your CSS from a static site built in the RPK should transfer quite easily. • functions. the date.php includes the footer area. there are files that are used to build the header. • sidebar. will be pulled from your WordPress database. such as the site title and URL. Editing and designing the CSS is no different from editing the CSS for static pages (although the RPK WordPress template does include some additional <div> tags for you to work with).htm file.php handles the list of blog post comments and the comment form.php handles any miscellaneous custom site functions in PHP that you wish to include (see Chapter 21).

a new copy will be uploaded with your upgrade. you want to go to your administration panel in WordPress and disable all of your plugins.DYNAMIC SITES IN WORDPRESS 273 UPGRADING WORDPRESS If you run WordPress or another blog/CMS package to power your Web site. among other things.php. this is not an issue). Finally. upgrading WordPress is not too painful of a process. you can do this by running mysqldump -umyusername -pmypassword wpdatabase > wpdatabase. it is essential to keep your site updated with the latest version.php where you modified the path to WordPress. outside of the WordPress directory. as well as all of the .” to learn about connecting to your hosting account and uploading files. “Going Live.sql replacing myusername and mypassword with your database username and password (though keep the –u and –p) and wpdatabase with the name of your WordPress database. If you have SSH access. back up your wp-content folder. I find it preferable to upgrade manually so as to retain control over and see firsthand the changes to my WordPress sites. Although WordPress has an automated upgrade system. First.php file and index. locate the database administration tool provided by your Web host to dump/export your database for backup. you can delete the remote folders wp-admin and wp-includes. Assuming you followed the recommendation above of keeping WordPress in its own directory and the suggestions at the book’s companion site. I prefer to delete all of the WordPress files on my server before uploading fresh copies. You can also delete xmlrpc. Using your FTP program. . your file uploads may appear (although if you specify an alternate location for the uploads. If you don’t have SSH access. Third. See the next chapter. You should also be sure to download copies of your wp-config. this is where. Second. should something go wrong with the upgrade). Pull a copy of wp-content down from your Web site using your FTP or SFTP client for archival purposes (that allows you to restore your WordPress installation.php files that begin with wp-. it’s important to back up your database.

“Apache Module mod_rewrite. The key details on moving your site—whether it’s a collection of static files or a WordPress installation—are covered in the next chapter.php and “API Keys. Apache HTTP Server Version Copy over your wp-config. “Using Permalinks. including uploading copies of the WordPress site to your hosting space.wordpress. “Installing stalling_WordPress 4.0. plugin. Wordpress.wordpress.” http://codex. upload the whole set of files to your 5. Wordpress.” http://codex.274 HOW TO DESIGN AND WRITE WEB PAGES TODAY Download a new copy of WordPress to your computer and drag in your custom theme.html 2.” http://codex. database-driven Web site.” http://httpd.” plates_Hierarchy .” NOTES 1. “Template Hierarchy. Then. “Going Live.apache. Wordpress. But it requires you do regular maintenance and upgrades over time. NEXT STEPS WordPress enables you to maintain a dynamic.” http://codex.php Permalinks 3.0/mod/ Akismet 6. too. “Plugins/Akismet. and upload folders (if they are not stored outside of the WordPress folder) to their appropriate locations in wpcontent. Wordpress.

• Check for links or images loaded from folders outside of your Web root folder and its subfolders: When you’re working on your own computer. if you have been using that for testing purposes. here is a list of things to check in all of the files that make up your site: • Check that you haven’t written any links that refer to your testing URL. you can link to pages or images anywhere . which should be your actual domain name and not http://localhost/.CHAP TE R 23 Going Live Once you have designed and tested your site locally using XAMPP (see Chapter 20) and it’s working to your satisfaction. going live should be a relatively painless task of copying the contents of htdocs/ to the root Web folder provided by your host. Assuming that you have been thoughtful in developing your site architecture by keeping everything in your htdocs/ folder. it’s time to publish your site to the Web by copying the files from your computer or USB drive to the space provided by your Web host. This chapter offers some checklists to run through before and after you upload your site. http://localhost/: Make sure that you have no domain names in links that point to your own pages (except for the link to your home page in the <div id="header"> area of your document. BEFORE YOU UPLOAD: A CHECKLIST Before you upload your site to your Web server.

Make sure. Locating FTP/SFTP Instructions for Your Web Host Every Web host is a little different in terms of how you access your account to upload files. com. These links. some registrar’s require each nameserver’s IP address. If you have a host that offers SFTP.276 HOW TO DESIGN AND WRITE WEB PAGES TODAY on your computer. if you have purchased your domain name from someone other than your Web host (as was recommended in Chapter 5). you will enter your Web host’s nameservers for your domain (nameservers are usually in the form of ns1. including the database’s name and the username and password to access it. Also. that you select a client that supports SFTP (see the “Selecting an FTP/SFTP Client” sidebar).com and ns2. so you’ll need to select an FTP client that supports passive mode. Do a Google search. and that links from your pages point there. Make sure that you find. Once logged in. which your host should provide for your information). . That’s how you ensure that your domain name points to your site at your hosted server space. will not work on the open Web.example. for example. Some require setting a “passive” FTP mode. which makes it easy for someone to break into your site. use that rather than FTP (even if the host offers both). and follow the host’s instructions carefully. however.example. read. also. additionally. it may take some time (around 24 hours) before your domain points to your actual site.php to refer to the database that you have set up with your Web host. you will need to go to your domain-name registrar’s Web site and log into the control panel they provide for managing your domain. Once you have changed the nameservers that your domain uses. FTP transfers your password without any encryption. • For WordPress sites: Make sure that you have specified your actual URL inside of the WordPress administrative interface and that you have also made any necessary changes in wpconfig. so be sure that you have moved all of your images into a folder inside of your Web root. Google for “nameservers” and the name of your Web host and “specify different nameservers” and the name of your domain provider to determine how to do this.

If you’re using is an excellent choice for Windows users and can handle almost any kind of FTP/SFTP connection that your Web host requires. as well as Linux. Better still. Finally.) . You’ll need to check your host’s documentation to determine where that folder is. (But do not transfer htdocs itself. Here are some flexible clients that you might try to example. or even html/ as their root Web folder. but that passes your files to your account based on your username.GOING LIVE 277 SELECTING AN FTP/SFTP CLIENT It is essential to select an FTP/SFTP client that meets the requirements of your Web is a very versatile FTP/SFTP client for Mac OS X. different hosts may specify www/. httpdocs/. And nobody wants that. unless you want people to access your Web site at http://www. • WinSCP (http://winscp. it acts just like another OS X folder window. so copying files from your computer to your server is no harder than copying files from folder to folder on your computer itself. you need to check the address you need to upload your files to. they are all free and open source. • FileZilla (http://filezilla-project. though. just like htdocs/ was the root Web folder in your XAMPP Web server (see Chapter 20). GETTING YOUR FILES TO THE RIGHT PLACE Every Web host specifies a root Web folder where you must place your files in order for them to be viewable at your URL. • CyberDuck (http://cyberduck. You will need to specify the correct address in your FTP/SFTP client. Sometimes you get an FTP address in the form of that uses your own domain name. You want to make sure that you transfer your files from htdocs to your host’s root Web folder. you usually just specify your domain name for the address: offers a free and open-source FTP/SFTP client for Windows and Mac. Sometimes this is a generic address for your host (such as ftp.

and everyone with server access can do to the file (read. But once your FTP/SFTP client indicates that your files have been uploaded. It offers a straightforward mechanism for seeing and changing which users on a system. Details on determining and setting file permissions are available at this book’s companion site.278 HOW TO DESIGN AND WRITE WEB PAGES TODAY FILE AND FOLDER PERMISSIONS Early in the book. can read and write files.html file in your root Web folder. try reloading the page. or not (see the “ you may have to change the permissions on your uploads folder to allow the Apache Web server user to write files there. you also have to make sure that your own user. or No WWW?” sidebar). can in turn download browser-uploaded files over FTP/SFTP. In order to enable browser uploads in WordPress. the one you access the server with to transfer files. http://sustainablewebdesign. write. for example. I suggested purchasing Web hosting from a company that uses Linux servers and that grants you secure shell (SSH) access. you want to see your own work when you go to your own domain name. and how fast your Internet connection speed is (even high-speed connections are usually slower for uploads than they are for downloads). And sometimes.htm file does not associated group. Also. it’s time to check out your live site for the first time by pointing your browser to your actual domain name’s URL in the form of www. Setting file and folder permissions is one area where SSH access is essential. it may take a little while to upload your site. Check your live site for the following potential problems: • Do your pages load? This is the most obvious check. and/or execute). . including the user the Web server runs as. depending on whether you’ve elected to use www.example. Many Web hosts will put a temporary index. AFTER YOU UPLOAD: A CHECKLIST Depending on how large your site is. if you see a page that appears to be from your domain registrar. If you do not see your own work or example. There are two parts to permissions: the username of the file or folder’s owner and the owner’s group and what the file or folder’s owner. so you may need to use your FTP client to delete that if your own index.

or not.*)$ http://%1/$1 [R=301. is up to you. is superfluous for Web sites. That’s why my site forces http://karlstolley. force the use of www. go back to your FTP client and upload it again. Whether you use www. uncomment the lines to use no-www or www on your Web server (these may cause problems on an XAMPP installation): • Force no www: RewriteEngine On RewriteCond %{HTTP _ HOST} ^www\. there is an alternate view. in their URL (if you try to go to http://google. just make sure that. for example.+)$ [NC] RewriteRule ^(. Anyone using www. these are available in the RPK .+)$ [NC] RewriteRule ^(. but not your design. people can access your site at either one.htaccess file. or allow users to use both. If you’ve done that already.htaccess. expressed by the community at http:// www. This can be as easy as pointing your browser to. Here are some instructions to put in an . you need to first check that the files were uploaded.L] • Force www: RewriteEngine On RewriteCond %{HTTP_HOST} !^www\. OR NO WWW? Some Web sites.(. onto the URL for you).GOING LIVE 279 . in Web URLs. you need to check the paths that load it in your XHTML file (see Chapter 20).org/ who urge the use of www.L] you will have to set up your domain to use your host’s nameservers as described is that www. www. try your site again in a few hours. shared with the people behind http://no-www. .com.%1/$1 [R=301. • Do your images and CSS files load? If you are seeing your XHTML pages.*)$ http://www. like http://www. or to access the site will be automatically sent to the correct. If the CSS file’s source does display. www-less URL. Google’s server will add the www.yes-www. My attitude.css and seeing if your CSS file’s source displays. If it doesn’t.

and uploading it to the proper location on your Web server with your SFTP client. UPDATING FILES Unless you do a major overhaul of your site. Thereafter. try clearing your Web browser’s cache.) The final chapter of the book will help you learn how to develop a picture of who’s visiting your site and how you can share your content to increase the reach of your identity across the Web. for example. try them out and make sure that everything is validating.280 HOW TO DESIGN AND WRITE WEB PAGES TODAY • Are your XHTML pages and CSS files validating? Particularly if you’ve included validation links in the footer. you likely also have the ability to upload files via your Web browser. You don’t want to lose your work! Making Copies of Browser Uploads If you use WordPress or another content management system. CD-ROM or other backups are also smart to maintain in the event that both your own computer and your Web server crash. make the necessary corrections and re-upload any problem files. it’s usually only necessary to upload your entire site once. That should be as easy as finding your computer’s copy of the file. NEXT STEPS “Going live” sounds a lot more interesting than it actually is! Copying files is pretty yawn-worthy—though it should be exciting to see your site at your own URL that you can share with the rest of the world. editing files on your own computer. If they fail to validate. Always keep both a local and a remote version of your site. (If changes don’t appear after you upload them. You’ll use these same steps into the future. checking them. you only need to upload files that you’ve made changes to. . It is important to regularly download copies of these files using your FTP/ SFTP client. and then uploading them before checking them again on the live site. will create its own set of folders to keep things organized) so that you can restore your site in the event of a server crash. Be sure to preserve the same folder structure the files are stored in on the server (WordPress.

This chapter looks at some of the popular tools for tracking site visits. Sharing Content To monitor and improve the growth of your site and online identity. you should make it possible for users to access your content away from your site. TRACKING VISITORS You can hang a poster up someplace but not have any idea who. To maximize the reach of the content you post on your site. But tracking visits is only part of the picture of building your identity on the Web. realize that visit numbers and page views are only one metric—and it some ways.CHAP TE R 24 Tracking Visitors. The Web is very different in this way. the Web browser the visitor used. most Web servers record certain information about the visit: the page being accessed. has looked at it. the visitor’s IP address (a unique number that identifies each computer on the Internet). though. if anyone. A well-designed site with few visitors but that helps to land someone a . the least important metric—of the impact your site has on your identity. and the date and time of the visit. you will want to track your site’s usage over time after it’s been uploaded and indexed by Google and other search engines. In addition to your Web server’s logging activity. you can set up third-party services—such as Google Analytics—to track visits to your site. and perhaps even allow them to republish your site’s content.1 Before you get too invested in site statistics. Each time someone accesses a page on your site.

But essentially: • A hit is any request for a file from your site. except that the file count does not include attempts to access files on your server that do not exist. the country from which the visitor accessed your site. If you have a page XHTML (one hit) that loads one CSS file (one hit) and three image files (three hits). and the top pages that people enter and exit on. and . So “hits” should not be confused with number of visits. but generally all . word processor . which is free and open source.php files are treated as pages (depending on the configuration of Webalizer. files are only the successful requests. be sure to purchase hosting from a Web host that provides a statistics program for you. files.html. So hits are all of the requests. one common program hosts install is Webalizer. as often as every day. Webalizer reports users by their IP address and uses that information to try and determine.) Webalizer automatically analyzes the log files on your server.2 (These programs can be tricky to set up yourself. but rather the total number of files requested. Hosted Statistics Programs: Webalizer Many Web hosting companies will provide you with Web site statistics programs. among other things. that. if someone tries to access something on your server that doesn’t exist. too. (Even more confusing. and what they are looking at and even clicking on while they are there.htm. Nevertheless. It also reports search engine terms people used to arrive at your site. it does not hurt to have a picture of who is accessing your site.) • A file is counted the same way as a hit. • A page differs depending on how Webalizer is configured. and pages on your site. will be recorded as a hit. or page views. The difference between these three can be somewhat confusing. Webalizer also reports hits. so if you’re very concerned about statistics. The log files are written to by your Web server each time someone tries to access something on your Web site.282 HOW TO DESIGN AND WRITE WEB PAGES TODAY job is much more rhetorically successful than a site that boasts tens of thousands of visitors but has little impact on them. visitors. one person’s access of that one page will be recorded as five hits. .

then. is the closest metric to actual pages that are looked at on your site. However.) One limitation to Google Analytics is that it only works when JavaScript is Remote Statistics: Google Analytics Google Analytics is one remote alternative to hosted statistics programs. The number of pages accessed.3 though . such as Webalizer.TRACKING VISITORS. For example. it will provide you with a small piece of JavaScript to place at the very bottom of each of your pages. Tracking User Interaction Both Webalizer and Google Analytics provide information that users are visiting your site. they do not provide information about what their activity looks like. http://sustainablewebdesign. you might know that people are visiting your resume page. (This is one more reason why using WordPress or PHP with includes makes managing your site easier—you can just add the Google Analytics code to your template or include file. SHARING CONTENT 283 or PDF files may also be counted as pages. But it’s not even that simple: Part of the problem with Webalizer— as with most statistics packages—is that it is limited in its ability to distinguish between an actual human being visiting your site and a search engine robot crawling your site to index it. see Chapters 21 and 22. so any visitors coming to your site with JavaScript disabled will not appear in your Google Analytics reports. though not necessarily). you only need to have an account with Google (such as for Gmail). but how are they arriving there? A button in your navigation bar? A contextual link in your home page text? One solution to answering those kinds of questions are services that track the geographic location of clicks on pages of your Web site. That makes it difficult to know whether you are racking up visits from people or search engines. once you set up your site with Google Analytics. To use Google Analytics. There is a for-pay service called CrazyEgg that does this. and you can find additional information about Google Analytics on this book’s companion Web site. Google provides documentation for them. Google Analytics reports are growing more interesting and complex all of the time.

it’s important to remember that statistics are not the whole picture of the impact your site has. Over time. That kind of information is helpful in improving a design: either make the element (photographs especially seem to draw clicks) clickable. at that time. including ClickHeat. Google Analytics added a beta version of a limited click-tracking service called In-Page Analytics. • What happens when you post new content? That 537 people visited your site on January 10 is interesting. and watching how that activity impacts site . however. contextual links. One of the more useful things you can learn through click tracking are elements that aren’t clickable but that users are clicking on anyway. Consider what might make those pages attractive. it only listed click percentages in little balloons next to particular hyperlinked items on a page. or come up with a design that does not invite clicking on nonclickable elements. here are some things to watch for: • What pages are drawing the most visits? Pages that are getting a lot of attention are worth looking at closely. How to Use Visitor Tracking Information Whether you’re running Webalizer.) What these types of services do is offer you a visual map of where on your page users are clicking. but what happened on January 8 and 9 (and 11)? Did you add some new content or make a blog post? Did you self-promote on Twitter? Keeping a log of your activity (or using the annotation feature on Google Analytics charts). as opposed to the heat maps provided by Crazy Egg and ClickHeat. shortly before this book went to press. or some combination of all three (and others). and use those observations to think about how you might revise and improve your other.4 (Also.284 HOW TO DESIGN AND WRITE WEB PAGES TODAY there are open-source alternatives that you can run yourself. ClickHeat. Did you write some interesting content that others are finding useful? Is there something unusual about the design or visual content of the page? There are often lessons to be learned about your audience by popular pages. and other areas. less popular pages. Still. a picture emerges of where in your design users seem most likely to click—your navigation. Google Analytics.

One of the ideas there was to use Google to establish a picture of who you are on the Web. that may seem counterintuitive: people who write Web sites should greedily want as many visits to their own site as possible. if someone has linked to your site. Think back to the first chapter of this book. but if you make it easy for others to use your content (and give you credit for the content. Twitter. a single public computer at a library may actually represent many different visitors. But the other part of sharing content is publishing it to your site with enhancements that makes it easy to share on social media Web sites. . or to new content—such as blog posts—and use that information to reward return visits to your site by regularly posting new material. right? Not necessarily. • Are people coming back? Google Analytics offers some very helpful tools to help you track return visits (though these are limited to visits from the same computer. SHARING CONTENT Knowing more about who’s visiting your site is interesting and helpful.TRACKING VISITORS. each of whom came to your site for the first time). • Where are people coming from? Webalizer and Google Analytics both track where your visitors came from. your content. when you did Google searches on your name. SHARING CONTENT 285 visits. your reputation extends across the Web—even if visits to your site do not increase measurably (though they certainly might). Why are they referring to your site? You might also notice that users are arriving from Facebook. Once your site is live on the Web. you can start to take advantage of the ability to share content. but the reach of your identity on the Web should be about more than page views on your site itself. which allow people to repost. and other social media sites. Enhancing your online identity is something you can do by making it easy for visitors to share your content. and perhaps modify. Part of sharing content is a matter of content licensing. Try and determine whether people are coming back to the same content. can be very helpful to making your site grow—and help you to reach more of your potential audience. Your site is one part of that. At first glance. go check out their page. and a link back to your site). perhaps under Creative Commons licenses.

• Commercial Use: Finally. you can specify whether your content may be used for commercial purposes. on your Web site. • Derivative Works: You can license your work so that it can be used only in its original form (no derivatives) or that people can alter. . Creative Commons licenses are one option to alert your visitors as to what they can and cannot do with your content. in turn. There are four basic features of Creative Commons licenses. the licenses “help you keep your copyright while allowing certain uses of your work—a ‘some rights reserved’ copyright. and you can pick and choose which features accompany how you license your work using the Creative Commons licensing tool:7 • Attribution: All Creative Commons licenses require that someone using your work give you credit for your work. If you take a great photograph. for example. you might additionally specify that they need to provide a link to your site. by licensing your content under Creative Commons. you can give people specific guidelines as to how your content may be used. with your name hyperlinked back to your Web site) somewhere on your Web site.g. or write some interesting text. license that derived work under the same license as your original work.”6 All Creative Commons licenses specify that people republishing or building on your work must give you attribution. In the words of the Creative Commons Web site. or build upon your work. • Share Alike: You can specify that anyone using or building upon your work (if you allow them to make Derivative Works) must. and someone wants to use it. Additional Creative Commons license permissions include the ability to remix or alter your content. You can specify how you would like attribution given to you (e.. to sell goods and services or to be sold itself. remix.5 The basic idea behind Creative Commons is that you gain more by being more permissive with your content.286 HOW TO DESIGN AND WRITE WEB PAGES TODAY Licensing Content One way to share content is a legal move: licensing your content under some form of content license. and to do so for commercial purposes.

9 Facebook Share specifies a few additional meta tags added to the <head> of your XHTML document: one for the title of the page (which should probably match the contents of the <title> tag in your <head>). of your site. more simply. called Facebook Share. and that it may not be used for commercial purposes. So Facebook Share metadata on a page titled “Please Share This” whose description reads “I want you to share this page” and has a thumbnail of thumbnail. description. You can also enable your visitors to share your pages. RSS enables other sites to repost or aggregate your content or individuals to read your content from a centralized location.8 But RSS is not the only option for sharing content. you should license the content in your RSS feed under Creative Commons." /> <link rel="image_src" href="http://example. and an optional <link> tag that refers to a thumbnail image of your page or. Metadata for Sharing Content Another way to make your content shareable involves particular technological moves.jpg" /> Someone can then easily post your page to Facebook. you should speak to an attorney. a description tag. or a social bookmarking service like Magnolia (which uses Facebook Share). or links to them. The most permissive Creative Commons license would allow derivative works and allow your work to be used for commercial purposes. . To be maximally flexible. like Google Reader. Really Simple Syndication (RSS) is one form of this and is often a feature built into CMSs such as WordPress. SHARING CONTENT 287 So the most restrictive Creative Commons license would stipulate that nobody is allowed to make derivatives of your img/thumbnail.jpg would look like: <meta name="title" content="Please Share This" /> <meta name="description" content="I want you to share this page. and the shared or bookmarked item will have exactly the title.TRACKING VISITORS. If you have questions about Creative Commons or other licenses. on Facebook and other social media services. however. A de facto standard of sorts has emerged for this.

and watch the companion site to this book. http://sustainablewebdesign. Facebook Developers. Google Reader. “ClickHeat. though you must add your own You can even add a Facebook Like button to each of your pages for sharing content directly on Facebook.labsmedia. NOTES 1. for updates and docs/reference/plugins/like 11.10 Other sites. Creative Commons. AddThis. “Facebook Share. Be sure to consult the “Resources for the Future” section of this book for suggested materials to learn more about Web design. http://www. “License Your Work.” http://creativecommons. just uncomment to use them. building a Web site is an ongoing process—and the material covered here only scratches the surface on any given . FINAL STEPS? THERE ARE NO FINAL STEPS This is the end of the book. http://www. such as AddThis.” http://creativecommons.mrunix. but only the beginning of your own activity developing an identity on the Web.html 5. http://www. http://crazyegg.” http://developers. The RPK WordPress template prepopulates the title and description. Creative 4. http://www. Facebook 2. Labsmeida. http://creativecommons. The choose/ 8. Creative” 10. (These metatags are available in the . CrazyEgg.facebook. Google what-is-cc 7. As has been stressed throughout this book.11 provide buttons for your site that enable one-click sharing of your content on a variety of different social media Web sites.288 HOW TO DESIGN AND WRITE WEB PAGES TODAY and thumbnail that you 6. “Like Button.facebook” http://www. “What Is CC?.

http://www. Below is a list of my favorites. and also provides tags in categories such as “colorful” or “clean” to help you browse other designs for inspiration.csselite. many of which I consult regularly in my own Web writing and design CSS Elite is one of many CSS galleries that is updated quite The CSS Zen Garden is not updated much anymore. but it is a rich and inspiring example of the design possibilities of changing only the CSS over an HTML page.Resources for the Future There are countless books and resources on Web design. . but the techniques and approaches in How to Design and Write Web Pages Today will prepare you to engage with these additional resources. do a Web search for “CSS design galleries” to find more. CSS Elite: CSS Gallery and Website Development Resources. CSS DESIGN GALLERIES There are many excellent CSS design galleries available on the Web. Most are written for advanced audiences. but it can be difficult to know which are worth your time to read. CSS Zen Garden: The Beauty in CSS Design.csszengarden . http://www . it has a browsable showcase of the latest designs.

WordPress > Support The best community to turn to in all matters for WordPress installation. WEB DESIGN MAGAZINES AND BLOGS The best way to stay current in your Web design and writing practices is to read magazines and blogs by leading Web designers. SitePoint Forums. . covering topics from hardcore development to design basics. A List Apart.290 RESOURCES FOR THE FUTURE Unmatched Style.unmatchedstyle. issues are published on the Web every other week. Topics range from standards documents to design practices. SkillShare Forum. Shea is one of many excellent A List Apart is one of the finest Web magazines out there. A quiet and generally welcoming community of Web professionals and amateurs. SitePoint. be sure you familiarize yourself with their posting policies—and that you’ve done your research (including searching their forums for a same or similar question as yours someone might have posted previously. Noise is a very influential blog on work Signal vs. and the big picture of Web design and development activity. use. COMMUNITIES Before posting to any community forums.alistapart. 37 Another fine CSS gallery that also features audio podcasts and a good blog. Dave. Noise. CSS Beauty. Shea. http://cssbeauty. http://www. do your homework before posting a question. Mezzoblue. http://www. WordPress.mezzoblue. http://cssbeauty. http://wordpress. A Web search for “web design blog” will turn up more like these. he is also the caretaker of the CSS Zen Garden. and A large and active community. Signal vs.

Bulletproof Web Design. 2006. classic book on standards-based Web design. Aaron. the principles are good. Berkeley. 2nd ed. 3rd ed. CA: Peachpit Press/New Riders. An extremely popular and useful book on Web usability. CA: New Riders. HTML5 for Web Designers. CA: New Riders/ Peachpit Press. Dive into A book. A classic work in information architecture and a must-read for creators of large Web sites. that covers a range of approaches to accessibility. The defining. 2007. although some of the examples are aging a bit. Don’t Make Me Think! A Common Sense Approach to Web Usability. A favorite of beginning and advanced Web designers. 3rd ed. Berkeley. CA: New Riders. Berkeley. and Beyond. Berkeley. Steven. Jeremy. Building Accessible Websites. Krug. 2009. CA: New Riders. 2008. Zeldman. Berkeley. Walter. 2010. Sebastopol. New York: A Book Apart. Dan. this book looks at building sites that work best under a wide range of conditions. 2002. also available as a free PDF or set of HTML files. and Louis Rosenfeld. 2nd ed. Keith. 2006. Covers a range of topics in site architecture as related to search engine optimization (SEO) and findability. CA: O’Reilly Media. Information Architecture for the World Wide Web. http://diveintoaccessibility. Designing with Web Standards. Mark. Peter. SITE ARCHITECTURE Morville. ACCESSIBILITY AND USABILITY Clark. .RESOURCES FOR THE FUTURE 291 WEB STANDARDS Cederholm. A classic text in accessible Web design. SEO. Building Findable Websites: Web Standards. Jeffrey. Joe. A compact but complete introduction to HTML5 that will be immediately accessible for anyone with knowledge of XHTML. Pilgrim.

Keith.292 RESOURCES FOR THE FUTURE CSS DESIGN Clarke.web standards. Resig. Jeremy. 2005. A thorough introduction to Another free curriculum that goes into advanced topics of server-side development and user science—from the perspective of Web standards.opera. A follow-up. Transcending CSS: The Fine Art of Web Design. CA: Peachpit Press/New Riders. Australia: SitePoint. Shea. Earle and Craig Sharkie. Holzschlag. jQuery: Novice to Ninja. this book pushes the envelopes of CSS design and is one of the best for exploring the practices behind CSS positioning. and Molly E. Greenwich. DOM Scripting: Web Design with JavaScript and the Document Object Model. Berkeley. to Shea and Holzschlag’s Zen of CSS Design. An advanced and thorough treatment of JavaScript by the author of the popular jQuery JavaScript library. thorough curriculum in standards-based Web design. John. Berkeley. Web Standards Project (WaSP) Interact. The Zen of CSS Design: Visual Enlightenment for the Web. JAVASCRIPT AND DOM SCRIPTING Castledine. One of the very best introductions to DOM scripting and object-oriented uses of JavaScript. CA: Friends of Ed/Apress. Dave. in some respects. TEACHING AND LEARNING Opera Software. .com/ company/education/curriculum/ A free. Curriculum. 2005. http://interact. An excellent (if advanced) guide to CSS design. 2010. Collingwood. including the jQuery UI library. using examples from the CSS Zen Garden. Andy. Opera Web Standards Curriculum. 2007. 2010. Berkeley. CA: Peachpit Press/New Riders. CT: Manning Publications. Secrets of the JavaScript Ninja. http://www.

Kritina Holden. An outstanding treatment of grid-based design in print and digital media. Gloucester. William. A treatment of grid-based design. Making and Breaking the Grid: A Graphic Design Layout Workshop. 2003. 2000. . 2004. Samara. Wilde. Grid Systems: Principles of Organizing Type. Judith. and Richard Wilde. Kimberly.RESOURCES FOR THE FUTURE 293 VISUAL DESIGN Elam. MA: Rockport Publishers. Timothy. New York: Watson-Guptill. specifically aimed at typography. The title says it all: a treasure of different. New York: Princeton Architectural Press. and Jill Butler. with discussion and principles of visual design. essentially universal design principles. Universal Principles of Design. A fun book of different visual design problems. MA: Rockport Publishers. Gloucester. 2002. Visual Literacy: A Conceptual Approach to Graphic Problem Solving. Lidwell.


Cascading Style Sheets: Standards-based Web design’s design lan- guage. usually as kilobytes (about 1. values assigned to attributes can be called attribute-values. child: The immediate tags nested inside a parent XHTML tag. versus the server side). attributes provide metadata on tags. Additional terms can be found at the book’s companion Web site http://sustainablewebdesign. such as JavaScript. byte: A measurement of file size. CSS.000 kilobytes). in <div id="navigation">. client-side scripting: Scripting languages. that run in a Web browser (the client side. common attributes include class and id. attribute-value: In XHTML.000 bytes). class: An XHTML attribute for adding additional structure that can be shared among a group of elements. and gigabytes (about 1. megabytes (about 1. strong is a child of p.000 megabytes).com/ book/. which the browser builds over the top of structural XHTML. navigation is the attribute-value. In <p><strong>Example</strong></p>. .Glossary Here are brief definitions of the most frequently used technical and design terms used in the text. attribute: In XHTML.

p is the parent of strong. the positioning context is the browser window. id: An XHTML attribute for adding additional structure to a unique element. element: The alphabetic contents of an XHTML tag. no matter how deeply. once per page. pixel: A common unit of measurement in Web design.296 GLOSSARY descendant: Any tag nested inside of any other tag. which is often manipulated and enhanced through JavaScript (see Chapter 19). versus older uses of JavaScript that were inserted directly into XHTML. a more generic version of child. the positioning context determines what an element is positioned with regard to. DOM scripting: JavaScript that manipulates the DOM. JavaScript (ECMAScript): A common scripting language for adding enhanced features to Web pages. In <p> <strong>Example</strong></p>. property: In CSS. a property is the visual aspect that a style will change. DOM. object: The primary unit in object-oriented programming. By default. parent: The immediate tags in which others are nested. . refers to an individual square of light on a monitor. PHP. positioning context: In CSS. objects have both properties and methods. font-family. method: A function that an object in object-oriented programming is cable of performing or being the target of. color. and width are all examples of properties. p is the element (and a valid CSS element selector). Document Object Model: The browser’s representation of an XHTML page. but parent elements that are positioned absolutely or relatively become the positioning context for any descendant elements. which can also be a selector in CSS. PHP Hypertext Preprocessor: A common server-side language for creating dynamic Web content (see Chapter 21). in the <p> tag. can be combined with the DOM and referred to as DOM Scripting.

server-side scripting: Scripting languages. . selector: In CSS. source order refers to the arrangement of contents in the source. XAMPP: An open-source. sibling: In XHTML. followed by content. style declaration: A unit of CSS including the selector to be styled. followed by a footer. validator: A service for checking XHTML and CSS files against the rules for their use. source order: In XHTML. portable Web server for testing purposes (see Chapter 20). standard language for structuring content on the Web. Web standards: A collection of technological specifications issued by the World Wide Web Consortium. value (CSS): The setting for a given syntax highlighting: An essential function of good text editors. }. the color property should be set to the red value: p { color: red. which colorize the text of different components of a language (and any textual content) to make source easier to read. a selector is what the CSS style will affect. the selector would be ul#navigation li. followed by navigation. such as PHP and Ruby. to change all list items inside of the navigation list.htm in the root Web folder can be accessed at http://example. siblings are any adjacent tags that share a parent. for example. and the International Organization for Standardization (ISO) used to guide the design of accessible and sustainable Web sites. to set text color to red. viewport: The part of the browser window where a Web page displays. that run on the server before being sent to the browser (client). header. ECMA International. Extensible Hypertext Markup Language: A common. and the properties and values the selector will be styled as. for example. XHTML.GLOSSARY 297 root Web folder: The folder on a Web host that holds the site files. a file named mypage.


229 – 30. 26 Audience. links for. See also Image replacement <blockquote> tag. 30. 225. 209. 58. See Site statistics Apache rewrite module (mod_rewrite). 86. 225 – 27. 156 – 57. 107. 284 – 85. structural hooks on. 162 – 66. 52. 58 – 60. 126. 26. 61. 208. 71 – 72. 112 – 13. 279 Apache Web server. 118. 25 – 26. See also Paths About pages. 117. 95. design. 16. 226 – 27. 72.INDEX <a> tag. See also WordPress Blogs. 199. 64 – 66. loading in CSS. 65 – 66. 97 – 98. See also Document flow Accessibility: CSS and. 125. 34. user conditions. 76 – 77 Adobe Flash. 28. 252. 130 – 31. 231 – 32 alt attribute. See also Attributes (XHTML) Analytics. 109. 221. 52. 175. See also Users Audio content. 230 Background images: designing with. 71. 221. 71. breakdowns. 56 – 57. 49. 215. 147 – 48. 243 Avidemux. 59 – 60. 159 – 60. 73 – 76. 197 – 98. 115 – 17. 30. 34. 118 – 19. 47. 161. 210 – 13. 148. 55 – 59. 71. 95. 20. three deadly sins. 78. universal design and. 76 – 77. 175. 129. 118. 26 Audacity (audio software). hierarchy. 10. 159 Attributes (XHTML): accessibility. 72 – 73. 162 <body> tag. 226 Activity theory: actions. 83. 41 – 42. See also specific attribute names Attribute-values (XHTML). 24. 202 – 3 Blogging software. 47. 60. 95 – 96. 225. 92. 96 – 97. activities. definitions. plugins and players. XHTML and. 230 – 31. on <html>. 218 – 24. 10. 25. 167 – 70. See also Cascading Style Sheet (CSS) properties: boxes and borders . 65. 239 – 43 Box model (CSS). 207. 97. 7. 183 – 84 Absolute positioning. 113 – 14. 61. 86. 189. 253. 164. 183 – 84. 64 – 65. versus <img /> tag. 41. 86. 269. 75. 183. 69. 61 – 68. use. 250. operations. 103 – 5. 66 – 68. 7. 268 – 69. 278 Assistive technologies.

pseudo-class. 218. style declarations. 42. 125. 59 Character encoding: metadata. 5 – 8 Diigo. 45. structural use. 217. 114. impact on others. 117 – 18. 160. 272 DOCTYPE declaration. 132. 75 – 76. 103. 125. 100 – 101. 153 – 54. 156 – 57. 87. 21. 111 – 12. 86. 106 – 7. Images: as content. specificity. 235 – 36. 98 – 100. 277 Design inspiration. 210 – 11. 126. 83. 17 Development environment. 257 – 58. comment syntax. inheritance. 185. 86 – 87. See also DOM scripting DOM. 122 – 23. 58 Clarke. 267. 95 – 96. 119. 9. hover. 217 – 18 Contact pages. 272 Browser. hexadecimal. See Web browser Cascading Style Sheets (CSS): accessibility. 96. 17. 129 – 30. 105 – 12. 180 Content. 147 Disability. See Audio content. 97. 48. 141 Character entities. 115 – 17. 103 – 5. 144. universal. repeating. 43 – 45. 113. Andy. 195. 83 – 84. See also Character encoding. 105. 78.300 INDEX CMS. 41 – 42 Cascading Style Sheet (CSS) properties. 171 – 75. 264 Document flow. 285. rgb() syntax. 208. 284 Click tracking. 257. 286 – 87 CSS. 109 class: class-itis. 173 – 75. 103. naming. text files. 151. 79. 210 – 18 Cascading Style Sheet (CSS) selectors: complex. 117. relationship. 175 CyberDuck. header. 221 Document Object Model. browser defaults. selector specificity. 8 – 10. 183 – 84. 151. 76. 109. See also Accessibility <div> tag. 149 – 50. 113 – 15. 66 – 68. Video content content attribute. 116. 107 – 10. 159 – 60. 183 – 84. 84 – 85. 55 – 59. 283 – 84 . W3C recommendation. element. 164 – 66. 94. Joe. 142 – 45 Conditional comments. 28 – 29 Digital identity: establishing. 203 – 4 ClickHeat. 101 – 2. 110 – 11 Center for Universal Design. 183 – 84. 198 – 99 Clark. ID and class. usernames. 41. Unicode character set (UTF-8) Chrome (Web browser). 143. 113 – 19. See Content management system (CMS) Color: CSS keywords. 47 – 49. 172. 66. See Google Chrome <cite> tag. 260. 148. 172 – 73 Creative Commons licensing. 109. 257. 101. 105 – 6. shared. See Document Object Model Branding: features. 112 – 13. layout and positioning. 84 Copyright. See Page layout CSS Zen Garden (Web site). backgrounds and images. 116 Comments in source code. 118 – 19. 205. See Disabled people Disabled people. signature. 101 – 10. 147. fonts and text. 97 Content management system (CMS). linking to. 42. 159 – 71. Text content. 75. 262 Digital cameras. 116. language references. See Cascading Style Sheets (CSS) CSS layouts. 275 Content versioning system (CVS). 154 – 55. 3 – 10. 253. 160 – 61. boxes and borders. references in CSS source. 146. 5. footer.

29 Dynamic content. 49 – 51. See Mozilla Firefox Flash. 151. 62. external links. 92. 228 Fonts: alternatives in CSS. Paths . See GNU Image Manipulation Program Git. 86 – 87. 161. 77. 267. Site architecture. 134. 160. 143. 276 – 80 301 GIMP. 239 – 40. 114 Frames and framesets. 70 Errors: isolating problem code. JavaScript libraries and. 259. 3 – 4. 147 – 48. 134 – 37 File formats. 151 – 56 Heading tags. 155. 26 Google Analytics. See also Navigation. 253. sustainability. 138. <link> tag. 207 – 8 <h1> tag. uploading and updating. See also Heading tags Hover styles. 208 – 10 <head> tag.htaccess. 232 HTTP. 240 – 43. 94. 39 – 41. 285 – 88 Favicon. 236 Google Web search. URLs and. 279. 39 – 41 Extensible Markup Language (XML). 62. W3C recommendation. 270. available. hosting and. 197 – 98. 52. 7 – 10. 150. 53. 257 – 59 ECMAScript. 254. See Cascading Style Sheet (CSS) properties: hover href attribute. 198 – 99 Emotional design. 88. Wayfinding Firefox. 243 – 44. 45 – 47. 45 – 46. 137 Google Libraries API. 250. 60 – 61. 236 – 37. 72. 84 – 85. 243 – 44. 101. 14 – 15. widescreens and. See also Progressive enhancement Grids and grid systems. purpose. See Root Web folder HTML entities. 45 – 47. 25. 91 – 92. 221 – 24 HTML5. rules. purchasing. See Hypertext Transfer Protocol (HTTP) Human-computer interaction (HCI). 111. size units. 69. 96 – 97. 117. 97. 124 – 25. 71 Hyperlinks. 235 – 36. 75. See Adobe Flash Floats (CSS). 82. 82. See also jQuery Dots per inch (DPI). 9 – 10. 191 – 92 Home page. 13. 64. 112. 8. 278 – 79 DOM scripting: described. 277 – 80 FileZilla. 52. 283 – 85 Google Chrome. 281. See also <a> tag. 87. mismatched character sets. 40. 34 FTP/SFTP. 113 – 14. 273. See Character entities <html> tag. 231. 157. 277 Findability. See <a> tag Hypertext Transfer Protocol (HTTP). See also Apache Web server htdocs/. 101. 37 . 96 – 98. 196 Extensible Hypertext Markup Language (XHTML): comment syntax. 185 – 88.INDEX Domain names: choosing. validator. 84 GNU Image Manipulation Program (GIMP). 92 Facebook. 160 – 62. 92 – 96. 114. 145. 47. essential. detecting JavaScript. global structure. See JavaScript Ego surfing. naming and organization. 3 – 4 <em> tag. See also Search engine optimization Graceful degradation. 44. 173. 16. 42. 5. 153 – 54 File extensions. 276 – 77. 148 – 50. 252. 86 Files and folders: consistency.

Steven. 227 – 29 Index file (index. Video content <meta> tag. 156 – 57. 252. 30. 114. 278 Information architecture.302 id (XHTML): CSS signature. 225 – 29. 47 – 48. 148 – 49. 24. See Audio content. 243. See List tags: <li> Line breaks. 97. Video content Multipurpose Internet Mail Extension type (MIME type). 43 – 45 media attribute. 73 – 74. See Microsoft Internet Explorer ISO. 275. <ul>. 173. 268 Nameservers. 246. 148 – 56. 52. <body> tag and. 13 – 15. See also Conditional comments Microsoft Windows. 97. 77. <ol>. 110. See Apache rewrite module MooTools. CSS design and 28 – 30. 138 – 40. as content. See also XAMPP Web server Lorem ipsum text. index . See also DOM scripting jQuery. 21. 38. unobtrusive. 225 – 26. 64. 173. sharing. 154. 287 – 88 Microblogging. Jeremy. animation. 87. 249 – 50. 230 – 31 Multimedia content. libraries. 260. 236 – 37. 5 – 9. 287.htm. 147 – 48. 52. 277 MIME type. 139. 162 – 63 Image replacement. 156 – 57. 29 – 30. ready event. 60 – 61. 66 – 68. 235 – 36 Krug. <head> tag and. 199 – 202 International Organization for Standardization (ISO): 8859-1 standard. See also DOM scripting. Peter. 28 Microsoft Internet Explorer. compression and. custom functions. 193 – 94. 195–96. 141. 149. 64 Mac OS X. 250. 103 – 5. 28 – 29 <img /> tag. 194–95 localhost. 154 – 56. 244 – 46. 180 – 84. 101. 254. 13 – 15. 153 – 54. 52. 142 – 43 Link paths. 21. 88. INDEX List tags: <li>. nested. 98 – 100. contents of pages. 217 – 18. 218 MP3 audio. 116. 45. 190 Lynx. 123. 139. 240 – 41. 43 – 45. 148 – 50. 26. naming. 69 – 70. 236. horizontal. disabling. See Multipurpose Internet Mail Extension type (MIME type) mod_rewrite. 62. in URLs. 638-1 and 639-2 standards. 64. JavaScript Keith. 235. 95. 276 – 79 Navigation: design. 29. 147 – 48 Internet Explorer. 25. 170 – 71 Images: accessibility.php). 155. 48 – 49. 73 Mozilla Firefox. structural use. 14 – 15. formats. 155 – 56 MySQL database. See also Cascading Style Sheets (CSS): linking to Media content. 49. 27. See also Twitter Microformats. 64. See Site architecture Inheritance (CSS). Images: as content. 257. 194. 184 – 88. 161 – 62 Microphones. 123. See Paths <link> tag. 137. 62. See also <a> tag Linux. 237 – 39. 278 . 250. 95 – 96. preparation for Web. size and quality. 24. 14. See International Organization for Standardization (ISO) JavaScript: accessibility. 14 – 15. 26 – 27. 236 Morville. 137. 148. 154. See Audio content. 21. 151 Metadata: <body> tag and. 29. 14 – 15. 232. 77 <li> tag.

123 – 29. 205 Raymond. 162 – 63. 13 Really Simple Syndication (RSS). 21. in-page. 181. 258 – 61. 57. 264. 131 – 32. 20 – 21. 123. 268 Reading: breaking pages. 64 – 65. Web languages and. WordPress template files. Louis. 13 – 15. Chris. See Really Simple Syndication (RSS) Safari (Web browser). 122. See Mac OS X <p> tag. 261 – 62. 14. 55. See Rapid Prototyping Kit (RPK) RSS. Jakob. 271 – 72. 267. 270. 88. 239 – 40. See Portable Document Format Pederick. custom functions. 129.INDEX information-seeking and. 284 Rhetoric. 79. 122. views and. 192 – 93 Page layout: centered designs. function. 125 – 26. 254. include(). 21 – 24. 160. 275–78 Rosenfeld. 179. Mozilla Firefox as. 249. 15. language reference. 16. 164 – 66. 245. 254–55. 213 – 14. See also Web Developer Add-on for Mozilla Firefox Performance. 122 – 23. 18 – 19. 58 Relative positioning. 129 – 30 Rapid Prototyping Kit (RPK): contents. liquid and fixed. relative. 30 <script> tag. 125 – 26. 14 – 15. 283 Positioning. 154 – 56 Search engine optimization. pop-up menus. 198. 47. 139. 124. 68. components. design. 249–52. 198. root-relative. 81 – 82. 73 RPK. 255 PDF. 35 – 36. 157. content. 259. 240 – 41. 147. 61. 268 Opera (Web browser). 147 – 48. 262. 121 – 23. See Site redesigns Rehabilitation Act of 1973. 213 – 16 Reset CSS. 267 – 68 Open Source Initiative. 14. Eric. 44 Portable Document Format (PDF). 65. 198. 263 – 64. 133 – 34. 268. See Yahoo! Reset Min CSS file (reset. 235. 155. multiple browsers. 21 OS X. for performance. XHTML files. 254 – 55. 48. 231 Open source: libraries and projects.css) Revision. 213. 19. media software. 70 Notepad++. 160. 206 – 8. 281 – 82 Root tag. 74. 94. 102. sketches and mockups. benefits. 48. 73 – 76. 122. 7. 137 Sample rates for audio. JavaScript files. 240. 155. 27. 217 Rapid prototyping: attitudes toward. 43 – 45. 141 <ol> tag. 235 – 36 PHP Hypertext Preprocessor. concept. See Cascading Style Sheet (CSS) properties: layout and positioning Postel’s Law. 64 . 86. 146. WordPress and. 240 – 43 Paths: absolute. 37 – 38 Nielsen. 287 Redesign. 4. 269 Portable applications. 16 – 17. 47. 262 – 63. wide screens. See List tags: <ol> 303 Progressive enhancement. 26. 284 1 Bit Audio Player. escaping strings. 62 – 64. 173. CSS files. 88. 205 – 6. See <html> tag Root Web folder. 178 – 80 Netscape. 26. Donald. See also Graceful degradation Quirks mode. 10. 94. 52. purpose and context. 269–70. 137. 60. 8 – 9. structure. 151. 161. 126 – 29. 7. 225. 70 Norman.

253. See Heading tags Sustainability: attitudes and. 251. 7. 83 – 87. See also Creative Commons licensing Shea. 43. 162 – 63. 263. 117. 140. 189. 43 – 45. 191 – 99. 6 Server-side scripting. 8. 250 – 51. See List tags: <ul> Unicode character set (UTF-8). 75. 5 – 10. 273. See Audio content Source formatting: indentation. www and. 95. 26. 82. 94. 115 – 16 Twitter. 43 – 45. 81 – 82. 73 – 76. 278 Security: challenge questions. 19. 207. 49 – 50. writing in. 10. 285. 268 – 70. 70 – 77. 195. 137 <title> tag. 130. 148 – 51 Uniform Resource Locator (URL): hosting and. 65. 137 – 38 . usernames in. 268. 4. See also PHP Hypertext Preprocessor Server statistics. 209 Sound. 56. 252 – 53 Site redesigns. 52. 133 – 44. 249 – 55. 282 – 85 Smith. 257 – 59. 161 Section 508. 45. 204. 69. improving site ranking. 154 – 56 Subheadings. 151 – 53. references. See also Multipurpose Internet Mail Extension type <ul> tag. See id Universal design. 35. 287 Top-Right-Bottom-Left (TRBL/“trouble”) order. 85. 56. 142. 77 – 79 Users: activities. 97. libraries and languages. 155. 5. See also <img /> tag. 5. sustainability. 204 <style> tag. passwords. definition. Dave. self-closing. 138 – 40. Nathan. 45 – 46. lines. 100. 198 – 99 Style guide. 170 Shortcut icon. 4. structuring. 31. 166 – 68. 117. 197. 45. 10. 133 – 34. 131 – 32. 177 – 80 UTF-8. design techniques. 225 – 27. writing. 205 Tagline. 94. 45. See Favicon Site architecture. 140 – 42. 26. testing. See also specific tag names Text content. 86. Paths. See Uniform Resource Locator (URL) Usability: definitions. file-oriented. 72 – 73. features. 229 Text editors. 141. 279 Unique ID (XHTML). 287 – 88. 142 Source literacy. 125 – 26. 97. 83 – 88. tabs versus spaces. metadata. 58 Secure shell (SSH). 108. 123 Sharing: links. 6. 189 – 90. 232 Syntax highlighting. 155 – 56. 75. FTP/SFTP. See Site statistics 7-Zip. 161. 275. 82. 171 – 73 Tags (XHTML): nesting. <script> tag SSH. online safety. 41. 41. 26. 264 – 65 SWFObject. 56. folder-oriented. 285 type attribute. 68 URL. open source and. 135. information-seeking behaviors. 118 Site statistics. data-driven. See also Document flow src attribute. 85 – 86. 52. 59 – 60.304 INDEX Tables (XHTML). 75. 91 – 96. 69 – 70. designing for. 173. See also Source formatting TextWrangler. 154 – 56. 161. 26. 281. See Unicode character set (UTF-8) Search results: confusing. 135. 34. 159 – 60. 52. 45. 133 Source order. 77 – 78. 225. 34. See Secure shell (SSH) <strong> tag. 249.

connecting with others. 271 – 72 WordPress Audio Player. style. 275 – 78 Web standards: 33. viewport. 277 305 WordPress: Codex. features. 150. 89 W3C. establishing identity and. 144 Web Content Accessibility Guidelines (WCAG). 148 Writing: accessibility and. 275. 64. 43. 276. 270. 30 – 31. See Microsoft Windows WinSCP. 94. 37 – 38. 28. 9. 135. 33. 4 – 9. 139. 272 Web hosting: documentation. 124. 21 – 24. 69. 27. 177 – 78. 3 – 4. 269. uniqueness and the Web. 25. 273 – 74. 9 – 10. 196. 52 – 53. 272. 122. source comments. 271. 15. 160. 139 Windows (operating system). 173. See Extensible Hypertext Markup Language XML. 82. 231 Wayfinding. for development. 49. multiple. 134 – 37. 39 . 27 – 28. 239. 225. 25 – 26. 18 – 21. 35. 35–36. See World Wide Web Consortium (W3C) WYSIWYG. 87 Web Standards Project (WaSP). 45. 254 – 56. 37 – 38 What-you-see-is-what-you-get (WYSIWYG). 231 – 32 Zeldman.css). 51 – 53. 81 World Wide Web Consortium (W3C). 126 – 28. See also Errors Viddler. 57 – 58 Webalizer. 231 Word processors. 38. 126 – 28. 143 – 45. 15. 279 XHTML. 34. 282 Web browser: browser-neutral design. 221. rendering engines and. See Box model Wikipedia. 225 – 26. 194 YouTube. uploading to. See Extensible Markup Language Yahoo! Media Player. 16. 156. 277. Web languages. 249 – 50. 30 – 31. View > Source. 27. Jeffrey. 13 Vimeo. 192 World Commission on Environment and Development. 172 – 73. 231 Yahoo! Reset Min CSS file (reset. 9. 87. 44. 183 – 84 Web Accessibility Initiative (WAI). 48. 14. 58 Web Developer Add-on for Mozilla Firefox. installation and upgrades. 133. templating. 226. 231 Video content. 39 – 40. hosting requirements. purchasing. 35 – 36. 14 – 16. 280. See What-you-see-iswhat-you-get (WYSIWYG) XAMPP Web server. 74 – 76. 37–41. 226. 260. 9. 47. 138. 15 – 16. 268. 231 – 32 Views: different browsers. 26.INDEX Validators. 43. 133 Widths in CSS. 47 – 49.


Journal of Business and Technical Communication. information architecture. and Pedagogy. As assistant professor of technical communication at the Illinois Institute of Technology in Chicago. Technology. he teaches graduate courses on Web design. which was awarded the Council of Editors of Learned Journals’ Best Journal Design Award in 2009—the first Web-based journal to receive such a distinction. He has also served as interface editor for Kairos and led its redesign. He also directs Gewgaws Lab (http://gewga. IL. His publications have appeared in such journals as IEEE Transactions on Professional Communication. and the rhetoric of and is on Twitter @karlstolley. and Kairos: A Journal of Rhetoric. an opensource design and development research group. where he was Webmaster of the world-renowned Purdue Online Writing Lab (OWL).About the Author KARL STOLLEY earned his doctorate from the Rhetoric and Composition program at Purdue University in West Lafayette. . Stolley maintains a Web presence at http://karlstolley.