ptg 204 Chapter 4: Using HTML solicitations—come from and what tools are used to create them. e answer is: from email marketing services. 3 Constant Contact is one of the more popular email marketing services. A Constant Contact customer creates and maintains a database of email recipi- ents with the service and composes formatted emails using Constant Contact’s web-based editor and online templates. Constant Contact charges a monthly fee for its service based on the number of recipient email addresses. Constant Contact’s approach is to build an email as a series of sections or blocks. Rather than bringing the entire email message into the editor, only one block is edited at a time. e editor has many of the same features as other WYSIWYG editors, including a button for directly editing a block’s HTML content. Figure 4.23 shows the beginning of the editing process for a newslet- ter, with the introductory paragraph being edited. e section being edited 3. Spammers do not use commercial email marketing services. ey use custom spamming soware that directly connects to outgoing email servers. Such spamming soware is installed by Internet worms and other malware on the ordinary computers of unsuspecting users. Figure 4.23: Editing an HTML email using Constant Contact From the Library of Wow! eBook ptg HTML Email 205 appears in the center of Figure 4.23. Instead of a typical toolbar, Constant Contact provides a tool palette in the le sidebar. At the bottom of that palette, the button that activates HTML editing mode is circled. HTML editing mode exposes the HTML source of your email. Like most generated HTML, the code is a bit dense. It includes Constant Contact’s special tags for inserting the recipient’s name and other mail-merge features. To work with the HTML, it is useful to copy the source code into a dedicated HTML editor and then paste it back into Constant Contact when done. It is also useful to download Constant Contact’s Code View Users Guide and become familiar with its special tags and features. Figure 4.24 shows HTML editing mode in action. Figure 4.24: Using HTML Code View mode of Constant Contact’s editor In addition to allowing you to directly edit the HTML source code of an email message, Constant Contact lets you directly edit the CSS style sheet that controls the presentation of the email message. e style sheet contains many predened CSS classes specic to the template chosen for the message. ese classes can be modied and added to as required. Figure 4.25 shows the CSS style sheet editor with the classes dened for Constant Contact’s basictemplate. From the Library of Wow! eBook ptg 206 Chapter 4: Using HTML Figure 4.25: Editing the CSS style sheet for an HTML email message in Constant Contact From the Library of Wow! eBook ptg Summary 207 Summary Here are the important points to remember from this chapter: . Many services on the Web that allow users, subscribers, and custom- ers to create content or edit personal prole information have a means for entering both content and HTML markup. ese services vary in the type of online editor they provide and the range of HTML markup allowed. . Blogging soware lets you create complete websites without any knowl- edge of HTML. However, knowledge of HTML and a good HTML editor will enable you to create better websites. . Many websites have created their own markup languages that mix a sub- set of HTML with proprietary tags for features unique to their service. Wikipedia is an example of such a service. . Varying HTML support among the many dierent email clients makes it dicult and impractical to compose messages directly with HTML markup. Email marketing services such as Constant Contact simplify the process for commercial email senders. From the Library of Wow! eBook ptg Building Websites Development Approaches Websites Organization and Navigation Page Head Information Search Engine Optimization Avoiding Common Mistakes From the Library of Wow! eBook ptg C h a p t e r 209 I n the preceding chapter we looked at a number of ways to use HTML to create content for use with various web services. In this chapter, we will concentrate on creating complete, stand-alone websites. ere are, of course, dierent approaches to this end, and it always helps to spend time up front to analyze the requirements of the new website and the context in which it will operate. Aer you have chosen an appropriate development approach, you can build a framework for your website that will accommodate the web pages and other resources that will be oered to site visitors. You can rough out each type of web page, marking up the semantics in HTML, applying layout and styles with CSS, and adding behaviors with JavaScript and other client-side scripting languages. is chapter explores the subjects of page construction and website navigation, with examples showing a variety of techniques to achieve dierent design objectives. Finally, this chapter includes a section on Search Engine Optimization (SEO) and oers some tips for avoiding common mistakes. Development Approaches e rst questions to ask when you’re thinking about creating a website are What is the purpose of the website? What will it accomplish? Does a website have to be built to accomplish that purpose? Presumably, you have some con- tent you would like to share with the world, and the choice of using the Web as 5 From the Library of Wow! eBook ptg 210 Chapter 5: Building Websites your distribution channel may seem obvious because of its reach and low cost. So why not just create pages with that content and glue them together with embedded links and menus? e simple answer is that planning pays o. Even if you want to cre- ate a straightforward site that explores your passion for peanut varieties or employee pension plans, taking the time to write a business plan will help you organize your thoughts. As Albert Einstein said, “If you can’t explain it simply, you don’t understand it well enough.” At the very least, writing down your reasons for creating the website and what you are attempting to accomplish can serve as the raw content for the site’s “About” page. More important, the exercise of writing down your goals and expectations will provide the foundation for many of the decisions you will have to make as you go through the process. Here are some important considerations: . Will this be a content site or a service site? . Will the content on the site be static or dynamic? . Who will be visiting the website, and why? . Is the website intended to generate revenue? . How will the website grow in the coming months and years? e answers to these questions will guide your development approach. It is a choice between building and managing your own website versus using a web service to deliver your content. Each approach has its strengths and weak- nesses, and you need to be familiar with the various options for establishing an online presence. Perhaps a Facebook page, Yahoo! store, or Ning site would be a better t for your needs. ese services exist for a reason: to help people get started in online publishing by taking care of the technical details while they concentrate on learning what to do with the content. At the same time, online services limit what you can do on the Web. You are constrained by somebody else’s design concepts. Also, your search engine ranking usually is lower because your website is seen as a client of some other organization, not as a publication of its own. erefore, this chapter assumes that you have chosen to run your own web- site. Usually this means having an account with a web-hosting company and registering one or more domain names. Or possibly you have access to a web host through your organization or school. You can run a web server on just about any computer, even a laptop, connected to the Internet. From the Library of Wow! eBook ptg Development Approaches 211 e next consideration is whether your website will need a content manage- ment system to dynamically generate the web pages or whether your concepts can be realized with a structure of hyperlinked les. Content or ServiCe Site ? Perhaps the primary purpose of your site is to provide content to people, without restrictions and without any interaction from visitors. In that case, building and maintaining the site as a collection of HTML les is feasible and, in many ways, a lot simpler. is type of site includes photo galleries, fan sites, restaurant sites, sites covering issues and events, and the websites of many governments. Running a content site is not that much dierent from oine publishing. It is just easier and cheaper to use bits of data rather than atoms of ink and paper. A content site can connect with other websites and services for supplementary content such as news feeds, map and calendar widgets, and so on, but, basically, it doesn’t matter if the visitor is a dog. On the other hand, if your intention is to interact with your website’s visi- tors, solicit their input, or provide a service to which they may subscribe, you have a service website. is is a critical distinction. Running a site that oers a service or product means that you have many of the same responsibilities (and challenges) as running a business, including production, marketing, sales, and, most important, customer service. Running any kind of business is hard work. It is true that you can run an online business from your kitchen table in your pajamas, but this means that you are only at work from the time you get up in the morning to the time you go to bed at night. Most websites fall somewhere in between these two poles. A website that primarily delivers content can handle interaction with visitors using email and can carry advertising using third-party ad services and aliate networks. And a content website can sell products by ooading the payment and fulllment aspects to third-party services. Running a top-end service website, on the other hand, requires managing a mix of technologies, including databases and network administration. It is important to know where your planned website sits on this continuum. You need to understand whether your website is an informational content site or an online business to plan for building and launching the website and achieving your goals. From the Library of Wow! eBook ptg 212 Chapter 5: Building Websites StatiC or DynamiC Content? You can maintain a public website in one of two ways: as a collection of HTML, CSS, and JavaScript les on a remote server or as data in a content management system (CMS) that generates pages on demand. e former requires the tools to download, edit, and upload les. Typically a web devel- oper maintains a complete copy of a website on a local computer, editing and uploading changes as required. ere are many good soware applications for managing websites in this manner, from basic HTML text editors to sophisti- cated integrated development environments (IDEs) that combine FTP, editing, and project management functions in a single soware program. A CMS makes sense if the content has a steady stream of additions, changes, and deletions, with very little need to change the basic structural ele- ments of the HTML documents. A CMS also makes sense if content needs to be searchable or if the same content appears on multiple pages. A web browser is all you need to maintain a CMS-based website, with some occasional tweak- ing of CSS stylesheets. No HTML coding is necessary until you need a new page type. Content ow for a website is like cash ow to a business. For any given website, a proper amount of content ow will provide the best return on the time and money you spend creating and managing that content. Too much content ow consumes management resources and may discourage potential visitors who scan through search results, looking for a simple answer. Too little content ow, and a website will die from boredom. Even the robots will get bored if nothing changes. A search engine such as Google’s will give a website a higher ranking and visit it more oen if it senses fresh content. If you want visitors to bookmark your site or forward your URL to their friends and associates, your site must feature new content on a regular basis that meets or exceeds the expectations of your target audience. Of course, content is not everything. If two websites oer equivalent content, the site with the better design will win. Better design encompasses a harmonious combination of graphic elements, information architecture, and interactive function. You have much more control over all these design ele- ments when you run your own website than when you use a CMS. target auDienCe Who will visit this website, and how will they nd out about it? is is a mar- keting question, but it does have technical implications. Search Engine Opti- mization (SEO) is the practice of making a website friendly to search robots From the Library of Wow! eBook ptg Development Approaches 213 so that your target audience can nd it easily. An optimized site knows what its target audience is searching for and is constructed accordingly. Headings, links, images, and even lenames are labeled incorporating keywords that have signicance to the target audience. Other issues depend on the target audience. If the website’s content is intended for an international audience, the planning should include the provision of foreign-language translations of key web pages. Other standards may exist, depending on the website’s purpose and intended audience. Some published websites may be subject to the requirements of the Americans with Disabilities Act and other national laws. Perhaps you expect that a signicant proportion of the site’s visitors will be people using browsers on mobile devices. If so, either the site’s layout needs to take into account how those browsers will display the web pages, or the server should do browser detection and provide alternative formatting for less- capable browsers. Twitter is a good example of a website that provides a PC-based browser version at http://www.twitter.com and an alternative ver- sion at http://m.twitter.com for mobile users. money Money makes the world go ’round. If revenue generation is your website’s purpose, your planning should consider the ve direct ways in which a website can make money: . Selling a product . Providing a service to paying subscribers . Selling space on your website to advertisers . Earning referral fees by directing trac to aliates . Accepting donations All of these tasks can occur on the same site, but each technique has implica- tions for the website design and development approach. Money adds another dimension to the planning. Any website that receives money from product sales, paid subscriptions, and donations should have pages explaining the terms of service and your organization’s privacy policy. ese considerations are less important with advertising sales and aliate royalties, because those relationships are business-to-business. e question is whether to build the capabilities into your own website or to use third-party services to handle pay- ments, product catalogs, subscribers, and advertisers. From the Library of Wow! eBook . the web pages or whether your concepts can be realized with a structure of hyperlinked les. Content or ServiCe Site ? Perhaps the primary purpose of your site is to provide content to people, without. marking up the semantics in HTML, applying layout and styles with CSS, and adding behaviors with JavaScript and other client-side scripting languages. is chapter explores the subjects of page construction. users. Figure 4 .23: Editing an HTML email using Constant Contact From the Library of Wow! eBook ptg HTML Email 205 appears in the center of Figure 4 .23. Instead of a typical toolbar, Constant Contact provides