AL MA TE RI The Planning and Development of Your Site GH TE D In the past few years, the design community has seen an explosion of sites powered by cascading style sheets (CSS). Highly visible brands such as Fast Company, ESPN.com, PGA, and Blogger have all adopted CSS for the layout of their sites, delivering their compelling content through this excellent Web technology.
Chapter 1 Establish the Scope If we were asked to build a house, there are a few questions we’d want answered before agreeing to do the work. How large will the house be? How many rooms? What kind of budget is allocated for this project? All of these questions are meant to establish the scope of the construction project. It’s a means of gathering information about the project, so that you can more intelligently assess its needs.
The Planning and Development of Your Site Determining Roles and Responsibilities No person is an island, and the same is especially true of Web contractors. Every project requires some level of coordination with additional people, whether they are members of your team, or stakeholders from the client’s company. As such, a successful project becomes less about providing a set of deliverables at a specific time, and more about managing the different members of the project team.
Chapter 1 In the first column, we’ve identified the different roles that are distributed throughout our project team. From there, we’ve outlined a brief overview of the expectations that will be placed upon them over the course of the project lifecycle. While it’s nearly impossible to accurately capture everything that a Web designer is responsible for in fewer than 12 words, this brief synopsis should at least convey the most important aspects of the role.
The Planning and Development of Your Site best product they’ll never be able to use. So, while this kind of change is expected, it is very important to know how to manage it effectively. No designer wants his or her timelines in a constant state of flux, especially when the budget isn’t. How, then, do we manage scope creep within a project? There is no easy answer to this question, but there are a few strategies that might be useful to keep in mind.
Chapter 1 Frame the Work Within Your Budget From this, it’s important to remember that the project’s budget can be a valuable tool in mitigating scope creep. Just as our scope statement helps us understand what is out of our project’s jurisdiction, so, too, can our budget help us mitigate unnecessary changes. If there are insufficient funds for a requested change, then the issue is quickly rendered moot.
The Planning and Development of Your Site Designer, Know Thy Goals There’s an implied “All of Them” at the end of this section’s heading because any project carries with it a small army of distinct (and, at times, competing) goals. The Rational Unified Process, a software project management methodology (http://ibm.com/software/awdtools/rup/), establishes the goals for a project by defining the Critical Success Factors, often referred to as CSFs.
Chapter 1 beginning to end. We can explain what we’ll be building, and what kinds of deliverables we will produce at different stages of the project. But more than explaining what we produce, we should explain why our projects are structured as they are — we can describe why a site map is important, or why design mockups must be finalized before any HTML can be coded.
The Planning and Development of Your Site Figure 1-1: A sample persona. (We didn’t say it was going to be pretty.) So, how do we actually create a persona? There are a number of ways to begin this process. The one you pick will ultimately depend on the scope of the project, and the amount of energy you’re able to commit to it. The first (and least “time-expensive”) option is to assess what you know of your audience from various internal sources.
Chapter 1 (www.mrunix.net/webalizer/) is a similar package, but works only with Apache log formats. ShortStat (www.shauninman.com/mentary/past/shortstat_maintenance.php) is a PHP application that can track various kinds of user data. These are only three such packages, and there are dozens, if not hundreds, of alternatives available. Each has its own strengths and weaknesses, which should be assessed according to your needs and technical requirements.
The Planning and Development of Your Site In fact, the best place to start working on your persona is probably the narrative, or the persona’s biography. This is the meat of the persona, and is where the credibility of this virtual user is established. If you have a gift for embellishment, this isn’t a bad time to flex those creative muscles.
Chapter 1 But there’s more at play here than simply creating an outline and then tossing in a few paragraphs (or at least, we hope it looks that way). Rather, thought has been given to how the order of these content areas must make sense to you, the reader. Without that consideration for how you will read the book — how you will interface with the content therein — we might as well have saved everyone some time and printed everything out on that long sheet of paper.
The Planning and Development of Your Site For example, let’s say that we wanted to organize the books in a bookstore. To do so, we would first take an inventory of all the books currently sitting on the store’s shelves, and figure out the best way to organize them.
Chapter 1 Accessibility Statement Reviews Tips on writing About Our Authors Write for Us! Advertising Contact Us Home Page Subscribe Copyright About Our Site How This Site Was Built Articles Tutorials Figure 1-2: A rough content inventory for our site. How do we make sense of it all? From Inventory to Hierarchy So, how do we begin to make sense of our Web site so that others might do the same? To begin, it helps to consider your site not as a mass of pages, but as a hierarchy of information.
The Planning and Development of Your Site ❑ Prospective writers. Of course, since we’re looking for more volunteers to round out our queue of authors, we should have information for them on how to contribute, and what we’re looking for. These people will (ideally) be drawn from our regular readership, and they should already be familiar with the topics we discuss. From this, we can start to flesh out our site’s hierarchy.
Chapter 1 This hierarchical categorization can easily be taken too far. Many sites fall into the trap of over-classifying their content, creating so many different tiers that users are unable to quickly access the content that’s most vital to them. More often than not, these too-complex navigation structures arise from a lack of planning when thinking about a site’s IA.
The Planning and Development of Your Site Home Content Global Navigation Learn Overview Articles Tutorials Reviews Our Authors Colophon Advertising How It Works Writing Tips Contact Us About Overview Subscribe Accessibility Statement Contribute Overview Copyright Figure 1-5: A site map for WebMag 5000, our imaginary Web site But the boundaries aren’t (and shouldn’t be) as distinct as they might seem.
Chapter 1 Home Content Global Navigation Learn Overview Articles Tutorials Reviews Our Authors Colophon Advertising How It Works Writing Tips Contact Us About Overview Subscribe Accessibility Statement Contribute Overview Copyright Figure 1-6: Annotating the relationship between sections But once we’ve built our site map, our work is only halfway done.
The Planning and Development of Your Site ❑ Global navigation links. From our site map, these are Contact Us, Subscribe, Accessibility Statement, and Copyright. ❑ Primary navigation. These are links to the Learn, About, and Contribute sections, which we defined in our site map. ❑ Secondary navigation. These are the navigation options within each section. If we were in the About section of our site map, the subnav options would be Our Site, Our Authors, Colophon, and Advertising. ❑ Author’s name.
Chapter 1 In Figure 1-7, we’ve settled upon a rather traditional two-column layout for the wireframe. Most of our content categories have translated into discrete areas on the page, placed according to the amount of visual weight we need to allot them in our layout. For example, the client’s logo has been placed at the top of the wireframe, in order to maximize the visibility of the WebMag 5000 brand. The one content category that “straddles” the page layout is the site’s navigation.
The Planning and Development of Your Site or its requirements, but may at least present an idea of how to move forward. However you decide to perform this ever-delicate balancing act between client and user requirements, keep the goals of the page at the forefront of your mind. Build a clear, usable interface, and the rest will fall into place. Sounds almost easy, doesn’t it? Jason Santa Maria’s “Grey Box Methodology” (www.jasonsantamaria.com/archive/2004/ 05/24/grey_box_method.
Chapter 1 Figure 1-8: Cinnamon Interactive. Fashionable and functional, this beautiful design floors random surfers while driving prospective clients into their portfolio. But it’s not just the jaw-dropping aesthetics (or the code behind it) that make Cinnamon a success. Rather, the goals of the site are beautifully reflected in its design. The cinnamon shaker logo is subtly mirrored in the photography on the home page, which creates a heightened sense of the company brand.
The Planning and Development of Your Site Don’t worry, you bought the right book. This isn’t Professional Plagiarism we’re writing here. However, establishing and maintaining an awareness of current Web design trends is one of the keys to improving your own craft. the most rewarding part of working and designing online is that there is always something new to learn, another excellent resource you’ve not discovered yet.
Chapter 1 800x600 1024x768 1280x1024 24 Figure 1-9: 1976design.com is the weblog of Dunstan Orchard, one of this book’s authors. It is built with a fixed layout, which causes a horizontal scroll bar to appear at smaller screen resolutions.
The Planning and Development of Your Site Conversely, fixed-width designs are often unkind to larger screen resolutions. When browsing at higher resolutions and with a fully maximized window, a design optimized for smaller window sizes can be drowned out by unused white space.
Chapter 1 800x600 1024x768 1280x1024 26 Figure 1-10: sidesh0w.com is the weblog of Ethan Marcotte, another of this book’s authors. It features a liquid, resolution-independent layout, which some might find difficult to read at larger screen resolutions.
The Planning and Development of Your Site Figure 1-11: A page of text with a fluid width. Seems quite manageable at a narrow width, doesn’t it? Figure 1-12: The same fluid block of text, but at a larger screen resolution. The line lengths have become unmanageable and are difficult to scan. Furthermore, the lack of control over the content area’s width can be difficult to balance when placing fixed-width elements within it.
Chapter 1 Gaining Some Perspective The truth is that both methods have their strengths and weaknesses. Neither is inherently superior to the other. In the hands of the right designer, either can be equally effective (or, in the hands of a less-talented designer, ineffective) in a site’s design. Of course, the relative strengths of one approach can be debated ad nauseam at the expense of the other’s faults — and as in most design communities, it is debated endlessly.
