Chapters 12 through 18 cover the specifi cs of working with different parts of your pages, but here is a rough outline of how to proceed in your Web writing and design using the RPK. Note that this is rarely a linear process; for example, your content may force you to rethink your page design, and vice versa. Still, every writer should address each of these tasks as part of Web writing and design, with or without the RPK:
• Generate and gather your text and image content. You will need to have structured XHTML available before you can test your design work in CSS; so drafting your page content, and preparing some images and media (see Chapter 3), will allow you to accurately describe the structure of your page content as discussed in Chapters 16 and 18.
• Set up your basic metadata, branding and rough navigation.
Edit the prototype.htm fi le according to the guidance in the metadata, branding, and navigation chapters (Chapters 13, 14, and 15) and save it as my-prototype.htm so that you can
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. (See Chapter 21 for build- ing a more dynamic, reusable set of shared content features.) • Develop a representative page from your site. The urge that
most designers have is to start with the home page, but it is often very different from the content pages of a site. I recom- mend starting with an “About Me”–type page; not only will that likely be representative of your site’s other pages, but its contents will also help you to fi gure out what other pages to include in your site.
• Mark up your text and image content in XHTML. Once you have a rough draft of your content, start tagging it with XHTML, particularly its headings, paragraphs, and lists (see Chapter 16).
• Begin to develop site typography. Choosing fonts and font sizes, as well as line heights, 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). A current list of fonts that are safe to use on the Web is available at http://sus tainablewebdesign.com/book/ ; just because a font is on your computer does not mean it will be available on others. Be prepared to adjust your typography later on to maximize read- ability according to your page layout.
• Sketch out a rough layout for your site. This is mostly about geography, 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 CSS to position your page elements. As Chapter 17 dem- onstrates, CSS layouts are basically illusions, sort of like the little slider puzzles you may have had as a child, where there were nine spots for eight pieces of an image to go, and you had to slide things around in order to get the picture to look the way it’s supposed to.
• Use an image editor to build in textures and background im- ages, and fi nalize dimensions, particularly widths, for the dif- ferent elements on your page. This is where you work to really
RAPID PROTOTYPING 131 build the look and feel of your pages. Once you know you are able to get your page elements to roughly where you want them, you can use your image editor to create a striking design.
Cultivating a Long-Term Attitude toward Site Development
A Web site is, to some extent, always in draft form. You will want to make changes to your content as your career progresses, or as your busi- ness or organization develops over time. Your design might start to look dated, and you will want to update it, too. 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. Beginners in my Web design classes tend to write way more XHTML markup and CSS styles than are necessary. I think this happens because they are ner- vous about working in these new languages, and expect that interesting pages will have lots of markup and CSS styles. That is not true. The guidance in the chapters that follow will show you how to write lean source, which makes a site much easier to revise and maintain.
• Think about relationships between your page elements. One of the strengths of both CSS and JavaScript is their leverage of relationships between page elements. For example, perhaps there is a paragraph you want to display entirely in bold, so you write something like this:
<p><strong>This paragraph’s text is all in bold.</strong></p>
But when you see that kind of markup, where two or more tags mark the same content, it’s time to rethink your strategy. One alternative to that use of the <strong> tag is to add a class to the paragraph, like <p class="important"> and then in the CSS specify p.important { font-weight: bold; } . Don’t forget to remove the unnecessary <strong> tags from your markup, though.
132 HOW TO DESIGN AND WRITE WEB PAGES TODAY • Think about the general, then move to the specifi c. The
advice above suggests to begin site design by working with a representative content page from your site; this helps you think about what most pages will include structurally and how they will be designed. From that, you can design pages that are slightly different, such as the home page. Chapter 13 suggests using a class on the body tag to give you a hook to style differ- ent types of pages, while maintaining lean source and a single CSS fi le.
• Devote a little time every week or so to improve something on your site. Like any other skills, your Web writing and design skills depend on your exercising them every so often. Coming back to your site regularly, as your schedule allows, 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).