Preparing to Develop Your Site


Spending the time to thoroughly address the research and planning stages that are necessary for the creation of a Website is essential. Developing a strategic method with which you can approach development will help you be more efficient, better and more thoroughly develop your ideas, obtain a more comprehensive understanding of the scope of your project, and save time and resources down the road. A good Website should be intuitive and create a positive, unique user experience. The creation of an effective Website starts with tasks that include defining and summarizing the reason and need for the site and analyzing the competition, creating an outline or flowchart, documenting how site features will function and designing the look and feel. In larger companies, these tasks can be delegated to multiple people or departments and the timeframes in which they are completed can overlap significantly. The specific breakdown of this process can vary widelythe core components of Website creation are presented in this book as stages that occur through five phases of development. For the most effective site, all these components should be coveredregardless of whether you are creating your own site, working for a client, or working as part of a team. As you'll learn while working through the lessons, Dreamweaver can help you with many of these tasksnot just those in the production and post-production stages.

Phase 1: Research

Before you start work on any pages, ask yourself or your client questions like the ones presented here. A full version of the Client Questionnaire that was used in the development of the Website you'll be working on, Yoga Sangha, is included on the CD-ROM in the Lesson_01_Basics/resources folder. Throughout this section, you'll find Yoga Sangha's responses to key questions from the questionnaire. Exploring these responses can give you insight into how the Yoga Sangha site was developed and help you to understand how the process described here was the backbone of the site's development. Understanding how this entire process works will help you when creating your own Websites.

  • Who is the audience, why is the site needed, and what do you want the visitors of your site to come away with? Knowing your audience is vital. Defining a general user profile helps you to effectively reach your target audience. You may have multiple kinds of users; if so, develop a profile for each of them.

    After you know who your audience is, you need to consider which technologies those users are likely to have. What kinds of plug-ins, browsers, and operating systems do the majority of your visitors use? The type of equipment used by your visitors is important to consider when you create a Website that is accessible to your intended audience. For example, you wouldn't want to create a site that uses elements supported by only the most recent and up-to-date browsers if most of your audience uses older machines that can't even run those browsers.

    Consider the purpose your site will serve and how each potential user will make use of the site. What does the site need to contain to serve its purpose? Use the visitor profile(s) you created to determine possible scenarios for what visitors would do at your site.

    Project Site: Yoga Sangha's Audience

    Q1:

    Who is your audience? What are the age ranges and interests of potential students and site visitors?

    A1:

    "We seek to attract students from age 2060 who are interested in taking yoga or who are trying to improve their health through physical activity."

    Q2:

    How will they use the Website and services provided by your company?

    A2:

    "We want them to use the information to choose a class to attend and to discern which workshops they would like to take. We want them to get a first impression of the studio and its offerings that shows our quality, depth, connection, and personable service."

    Q3:

    How does Yoga Sangha help students and fit into their lives?

    A3:

    "By offering yoga classes at varying levels of ability all day and during the evening, and by offering workshops on the weekends, which allow students to find a class or workshop that will fit their fitness level and personal schedule."

    Q4:

    What are the key reasons students may have for choosing Yoga Sangha?

    A4:

    "Because we're close to where they live, because we offer Anusara yoga, or because their favorite teacher teaches at Yoga Sangha. Plus, at Yoga Sangha they'll learn how to actually practice yoga versus just moving through the poses."


  • What content will be needed for the site? Identifying and collecting your site assets is an important part of the preparation to design and produce a Website. You need to gather all the content, such as text, graphics, and multimedia elements that will be used on the site. Organizing these assets enables you to create a complete and thorough Website. You can then determine which types of content need to be developed.

    Project Site: Yoga Sanhga's Content

    Q1:

    List the sections, features, and content that you want to see included on the site. Of this content, what already exists and what will need to be developed?

    A1:

    "We want to see included a studio tour, quarterly news, a quarterly letter from Katchie and Jayne [the studio owners], a map, and directions. These would all need to be developed. We also want to include a quarterly or monthly highlight of a certain nonprofit doing great work in the world, highlights of certain teachers, and whatever other topical information we need to be conveyed, based on future needs. These would also need to be developed."


  • What should the site communicate? It is essential to know exactly what you want to express to your visitors. If you don't know what you're trying to say, chances are your users won't know, either. Clarify the message of your site. Communication with your visitors is an integral part of maintaining an effective site.

    Project Site: Yoga Sangha's Communication Goals

    Q1:

    What are the primary objectives for your site?

    A1:

    "Our studio is very community-oriented, ecologically minded, and personal. We would love to more fully convey the Anusara Yoga philosophy, the community focus, and the personal feel and experience of our studio on our Website. We are also part of a new program in which we expect to be a fully Green studio by next year; that is, fully ecologically responsible and sustainable. We want to show how yoga relates with day-to-day life through guest lectures by prominent people in activism, ecological awareness, nutrition, community relations, philosophy, and meditation."


    The final part of researching a new Website is to check out the competition. This step is critical, even if the Website you are developing isn't going to be for the public. Because the Web is such a large place, almost any conceivable type of Website has already been created. Understanding who your competition is and how they built their Websites can make all the difference in the world. You may find that your competition's Website is poorly designed, or lacking in features. This can offer you the ability to design a site that stands out, giving you the edge. Or you may discover that the competition's Website is well designed, giving you the incentive to create a better site. Whichever the case, ignoring your competition puts you and the Website you are designing at a disadvantage.

Phase 2: Planning and Structure

The connection between your Website and the audience is dependent in part upon the structure of your site. Clarity and ease-of-use are vital components of a good Website. This important phase of development is the one you'll begin with in this book.

  • Creating the site structure: Websites rely on structure. A Website with a poor structure can be confusing to navigate, hard to use, and difficult to maintain. To create a site that is clear, communicative, and easy for visitors to use, you need to plan out the structure of the site as well as the hierarchy of files and folders within the site completelybefore you begin to build any HTML documents.

    Creating a thorough outline of the site as well as a detailed flowchart or storyboard is an important step of the planning process.

    More detailed individual page-level flowcharts are often developed at this stage as well to organize the content prior to the design stage in the Phase 3. You'll work on this type of page-level content organization in Lesson 2.

  • Setting up file and folder structure: It is important to set up a strategy for file management at the beginning of the development process. Keeping different types of media together in individual folders for each file type is a good way of doing this. You might have an HTML folder, an images folder, a Cascading Style Sheets (CSS) folder and a multimedia folder. Using a folder called html_docs to contain only HTML or XHTML files, for instance, will help keep those files organized and easy to find. If the site is very large, you might want to break it down into more manageable portions with a folder for each section and possibly subsectionsin which case, there may be folders for the same file types in each section and subsection folder. If you have elements such as graphics that are used site-wide, you might want to create a common folder(s) in the main folder for such files to avoid duplicating the same files in various locations throughout the site. Creating a visual flowchart of the different folder levels can help you in the process of defining the folder hierarchy. A clean, well-structured Website is much easier and more efficient to develop and maintain than one that is disorganized. You'll learn more about site structure and folder hierarchy as they relate to links in Lesson 3. In this book, the file organization is arranged by lesson.

    Tip

    In the next exercise, you'll be able to see the structure of the Yoga Sangha project site by looking at the folders and files within the DW8_YogaSangha/Completed_YogaSangha_SampleSite folder.


Phase 3: DevelopmentDesigning the Site

When designing a Website, you can start by creating thumbnails that show general designsa quick brainstorming method of getting visual representations of your ideas on paper. Throughout this process, you should continue to take into account the responses to the questions asked in Phase 1 and the results of your research. The second step of developing your design is to fill out more detailed sketches from the best of your initial ideas. Finally, full mockup(s) of how the pages will look can be created for the chosen design. During this design process, there is usually a great deal of communication with the clientyou don't want to complete a full mockup for design ideas that are nothing like what your client is expecting. This is the stage at which many of the graphical elements for the site are createdyou'll be working on creating page layouts in Lesson 4 and incorporating graphics in your pages in Lesson 5.

Additionally, the process of testing the visual design components to verify that what you're envisioning will work technically in a Web page should be done throughout this stage. Effective Web design relies on creating visual concepts that can be translated to the fully functional technical aspects of a site. The more you learn about what is possible in a Website, the better equipped you'll be to design efficiently for the online medium. You'll learn throughout this book about many technical Web features that Dreamweaver can help you create.

A style guide containing specific details on the look and feel, appearance, colors, and styles to be used throughout the site is usually created at this stage as well.

During the creation of a Website, there is often a considerable amount of overlap of the development phaseswork in each of the phases often occurs concurrently. Although you'll address some of the concepts from Phase 2 in the next several lessons, the production stage of Phase 3 is the one in which you'll be working primarily throughout this book's lessons.

Now that you understand what is involved in the preproduction stages of Phases 1 and 2all of which has already been done for the project siteyou're ready to begin working on re-creating portions of the "Yoga Sangha" project site with Dreamweaver. As you work on the project site throughout the book, you'll learn how to implement the site through Dreamweaver by creating the HTML that brings all the research, content, and design together within a successful Website.

Phase 4: Testing

Once you have finished designing your Website, it is important to test it, before you release it to the intended audience. Even the simplest of Websites should be tested in every conceivable way. For example, you should test your Website with as many popular browsers as possible. Although Microsoft Internet Explorer for Windows is the most common browser today, Mozilla Firefox, Opera, and Safari maintain a large enough share of the market to be considered. Even with a browser such as Internet Explorer, there are major differences between versions 5, 5.5, and 6; never mind the differences between the Windows and Macintosh versions. Besides the way that different browsers render your pages, you should also make sure to test every page and link. Dreamweaver 8 can help with these postproduction tasks, as you will see later in Lesson 14.

Phase 5: Maintenance

Many Website developers find that a Website is never done. Adding pages, updating links, modifying content and replacing images are all normal parts of maintaining a Website. Dreamweaver 8 offers a number of features to help make the process of maintaining a Website painless with Library items, templates and other tools. You will learn more about these features in Lessons 13 through 16.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net