The Ten Commandments for Websites3A978-1-4302...Appendix A: The Ten Commandments for Websites 595...

591

Appendix A The Ten Commandments for WebsitesWelcome to the appendixes! At this stage in your learning, you should have all the basic skills you require to build a high-quality website with insightful consideration given to aspects such as accessibility, search engine optimization, usability, and all the other concepts that web designers and developers think about on a daily basis. Hopefully with all the different elements covered in this book, you now have a solid understanding as to what goes into building a website (much more than code!). The main thing you should take from this book is that you don’t need to be an expert at everything but ensuring that you take the time to notice what’s out there and deciding what will best help your site are among the most important elements of the process.

As you leave this book and go on to updating your website over time and perhaps learning new skills, always remember to be brave, take risks (through trial and error), and never feel that things are getting too hard. If you choose to learn skills that were only briefly mentioned in this book, like scripting, or to get involved in using content management systems and web software, go at a pace that you feel comfortable with. With that in mind, let’s go over the 10 most important messages I would personally recommend. After that, I’ll give you some useful resources like important websites for people learning to create for the Internet and handy software.

Advice is something many professional designers and developers give out in spades after learning some harsh lessons from what their own bitter experiences. I know from experience that all the rules, specifications, laws, conventions, guides, and other methods of trying to get you to do something can be overwhelming and, at times, rather depressing, so next is a simple list of rules which help define the most important elements of the website building process. However, even though many of you are now probably thinking “rules

Getting StartED Building Websites

592

are made to be broken” (and in all fairness they often are), let me impart ten simple rules that are easy to remember and if you follow them through, you may have a less stressful experience which can only be a good thing!

Follow the Specifications Over the years, a series of specifications and standards have been produced for people creating websites. Though these are often quite detailed and hard to understand at first, they can be extremely useful, when you are more comfortable with building websites, in helping to expand your knowledge and assisting you in implementing certain language functions within your source code. Think of a specification as similar to a lengthy instruction manual. Luckily for you, this book covers the basics you will need to get started without requiring to do any heavy reading (beyond what you are already undertaking, of course). However, when it comes to creating a website, the specifications are the ultimate reference (and the first port of call) to any language or best practice scenario.

Think of Your End Users’ Needs No matter what you are doing when you start making your website, the main things you should always keep at the top of your mind are you visitors’ needs and wants. When you make a site to be published to the Web, you have the intention of having an audience of people who are willing and ready to read what you have to say or be involved in your creation. While trying to get into the mindset of the people you want to visit your website might seem like a scary thing to do, one of the main things that makes a website successful is that the customer is always perceived to be right, just like when you go shopping. Generally speaking, websites are not made for personal consumption; they are almost always functional or informative places that the author wishes to share with others. Because of this, you should always take into consideration what other people may want to get out of the experience so that the final product will entice them into being a part of your creation.

Have Realistic Goals and Intentions If you are trying to make a get-rich-quick Internet venture, you may want to think again. Unfortunately, some people choose to approach website building with unrealistic intentions or expectations of what the finished site will be able to achieve. Now, I am certainly not saying that you should have a negative view

Appendix A: The Ten Commandments for Websites

593

of your website or that you should just give up; you should just make sure you do not come into the process with the intention of becoming a multimillionaire the same night that the project goes live (unless of course you have an amazing idea planned that is guaranteed success—in which case, share it with the rest of us!).

The fact of the matter is that the majority of fly-by-night schemes on the Web fizzle out at the first stage of the process, and success is something you have to work hard to achieve. Many of the most successful websites on the web exist purely out of the author’s wish to be creative rather than to make money from it. Even if you are not trying to make money from the website, the rule is still relevant to you: the last thing you want to do is start making a website that explodes into an enormous project and grows out of control. While all of this information may sound a bit gloomy, the pitfalls can easily be overcome by making sure you do not reach too far and keeping your goals clear, simple, and concise to reduce the chances of going off track.

Have a Pragmatic Approach Pragmatism is the art of common sense, which in some respects does not always reach the realms of making websites. Sometimes, even the best of us make mistakes and do something that, in retrospect, we realize we should have been given a firm kick over. Luckily, the art of common sense allows you to take the most obvious things into consideration when you make a website. It is obvious that having a site that does not work properly will be bad for business, and therefore we fix it. It is also obvious that if you write all your content in Russian with no translation available, the English-speaking world will have problems trying to decipher it. Trusting your instincts and common sense and, most importantly, being practical when you decide to put something into action will help you to no end to making solid choices that will see instant or fruitful long-term results.

Think Outside the Box There are two kinds of people in the world, those who choose to be adventurous and those who prefer to play it safe and stick with what they know. Making websites is, in many respects, a creative process that requires the ability to use your imagination. In many situations, you may wish to stick with techniques, layout styles, and existing conventions, which is perfectly fine. However, one of the main elements that make a website exceptional is when something truly unique and creative comes along. But be warned, while


594

you want to be creative and try to make things as interesting as possible, you should always make choices with care as occasionally our choices in design can actually make things less usable or, even worse, inaccessible.

Know Your Subject Well Nothing is worse, when browsing the Web for an article on a subject, than realizing after you have finished reading that the information within the article was irrelevant or incorrect. While the Web does have a fairly high margin for error (as can be noted from the question over the reliability of websites with user contributed content such as Wikipedia), you should consider that when you pass wrong or potentially harmful information, your website will lose trust and respect, which will cause visitors to turn away. Always try to be as accurate as possible with information you give out. Freedom of speech allows people to say pretty much what they want, but when you have a site that relies on people visiting your pages, you should always refrain from saying or doing bad things for which you can be held accountable (legally or personally). You don’t want to damage your brand and image.

Crawl Before You Walk Innovation is one of the fun elements of producing websites from scratch. You get to show off as you learn, experiment through trial and error, and share your experiences with other people. Trial and error is a lot like playing detective, as you get to see things from a broader perspective and investigate what caused a problem and use your knowledge to try and resolve issues as they occurs. Maintaining your own website is a fantastic way to learn and can give you essential experience at debugging. The piece of advice which can be gained from this rule is to take things one step at a time—try not to dive right into a project that you are not ready for, but always push your boundaries as you code. After all, many developers will tell you that half of the battle of making a website is pretty much making it up as you go along and finding a compromise whenever you fall short of the goalpost!

Interact with Your Customers A great number of the websites in the world, whether personal in nature or business orientated, are trying to give a personal feel to the folks who decide to give that page a visit. Giving that personal touch is vital to avoid making your website seem like a faceless organization in a sea of millions of others.

Appendix A: The Ten Commandments for Websites

595

The interaction you have with your visitors does not need to be technical in nature. It could be anything from being involved in social networking (and sharing your experiences with those who go to your website) right up to having a personal blog to which you can allow people to provide feedback on the things you choose to talk about or even just a simple news section letting people know what changes have occurred since they last visited. A website that has warmth because the owner is willing to put in a few hours of time keeping visitors updated will foster a sense of belonging to the site in those involved in the process, and this will result in a greater number of those visitors becoming longstanding members.

Be an Efficient Manager One of the hardest things in making a website is getting organized and structured. This book will give you a pathway you can follow (in a logical order) to start putting together a design of your own creation, but one rule you should try to follow is to stay organized. Many times, I have seen people pull together a website and publish it onto the Web only to realize that they forgot to make some recommended changes. The irony is that keeping organized can be as simple as creating a checklist of things you need to achieve or jobs you still have to do (maybe using sticky notes or to-do lists) before the website is published online. A benefit you may also see in following this method is that you get a small sense of accomplishment each time you manage to tick off a complete item in the list of priorities. I would not say keeping a checklist is required, many people may be benefit from this rule, especially if you find managing time hard.

Always Update Your Website Of all the rules, keeping your site up to date should be the most obvious and is the most important. While the functions and interactivity you choose to provide will provide the incentive to return on a regular basis, the most dangerous thing you can do when completing a website and putting it online is to leave it alone or play it safe and suddenly reduce the momentum of the site’s progress. With few exceptions, the reason people keep returning to someone’s homepage on a regular basis is that interesting, useful, relevant, and up-to-date content has been posted that is worthy of reading. Perhaps you have added new functionality into a service you offer, or maybe you have made some important additions to the website. No matter what method you choose, the important thing is to keep giving the website you produce a regular stream


596

of new items of interest. If left to go stale, a website will see the amount of people who visit it steadily decrease over what can be a rather short period of time.

597

Appendix B Additional Materials In this appendix, you will find some of my own personal recommendations for websites that are essential resources for anyone building websites as well as software products I have mentioned throughout this book that you will need to create your website. While these resources will hopefully give you the incentive to keep learning new skills and enhance what you already know, if you are looking for somewhere specific to go from this book, why not take a look at the friends of ED website to see what other excellent books exist? Now that you have a basic understanding of code, you can go with another beginner book or an intermediate level book to top-up stuff found in this one, or if you really want to be adventurous and tweak your website to the maximum, you might even consider a more advanced title (when you feel comfortable to do so).

LinkED To visit the friends of ED or Apress website (to see what excellent titles are available or perhaps purchase one of those I have on my own bookshelf and personally recommend from reading), visit http://www.friendsofed.com/ or http://www.apress.com/.

Useful Websites Websites are one of the most feature rich and resourceful places for getting useful information about web design, unlike books (which can become dated if they focus heavily on explicit technologies), these kinds of resources can offer cutting (possibly even bleeding) edge information about various subjects such as best practices, new products, tools, and even full tutorials and curriculums to enhance your level of knowledge beyond the basics. Whether you are looking


598

for practical guides for examples, useful articles on specific subjects or just general web design information, the below (long!) list of websites will offer you plenty to think about and lots of useful things you can have a go at. The list itself has been broken down into several categories to give you a better idea of which websites you may want to check out (also remember the various links provided throughout the book).

� Online magazines:

� A List Apart: http://www.alistapart.com/

� Digital Web Magazine: http://www.digital-web.com/

� I Love Typography: http://ilovetypography.com/

� Smashing Magazine: http://www.smashingmagazine.com/

� Think Vitamin: http://carsonified.com/blog/

� Use It: http://www.useit.com/

� UX Matters: http://www.uxmatters.com/

� Web Designer Deport: http://www.webdesignerdepot.com/

� Web Designer Wall: http://www.webdesignerwall.com/

� General web design:

� 456 Berea Street: http://www.456bereastreet.com/

� Boxes and Arrows: http://boxesandarrows.com/

� Design Float: http://www.designfloat.com/

� Mozilla Documentation: https://developer.mozilla.org/en/ Web_Development

� Net Tuts+: http://net.tutsplus.com/

� Opera Dev: http://dev.opera.com/

� Opera Web Standards Curriculum: http://www.opera.com/ company/education/curriculum/

� Vandelay Design: http://vandelaydesign.com/blog/

� Web Design From Scratch: http://www.webdesignfrom scratch.com/articles-and-tutorials.php

� Web Monkey: http://www.webmonkey.com/

� Web Resources Deport: http://www.webresourcesdepot.com/

� WebAim: http://webaim.org/

� WebCredible: http://www.webcredible.co.uk/user-friendly-resources/

Appendix B: Additional Materials

599

� Related podcasts:

� Boagworld: http://boagworld.com/

� CreativeXpert: http://www.creativexpert.com/

� FreelanceSwitch: http://freelanceswitch.com/podcasts/

� SitePoint Podcast: http://www.sitepoint.com/blogs/ category/podcast/

� Web Axe: http://webaxe.blogspot.com/

� Web 2.0 Show: http://web20show.com/

� Web Designer Mag: http://www.webdesignermag.co.uk/ category/podcast/

� Web Dev Radio: http://www.webdevradio.com/

� Web Hosting Show: http://www.webhostingshow.com/

� Other resources:

� CSS Tricks: http://css-tricks.com/

� CSS Discuss: http://css-discuss.incutio.com/

� SitePoint Reference: http://reference.sitepoint.com/

� Tizag: http://www.tizag.com/

� W3Schools: http://www.w3schools.com/

� Web Dev Out: http://www.webdevout.net/

� Useful blogs:

� Adaptive Path: http://www.adaptivepath.com/blog/

� Ajaxian: http://ajaxian.com/

� Beast Blog: http://green-beast.com/blog/

� FreelanceSwitch: http://freelanceswitch.com/

� Mezzo Blue: http://www.mezzoblue.com/

� Snook: http://snook.ca/

� Tutorial Blog: http://tutorialblog.org/

Tools of the Trade Software is extremely useful. It allows us to automate our tasks, generate code, and basically make things simpler and easier to cope with. There are thousands of web-design–related products out there on the shelves, and you should decide what software you want to use to achieve your website building goal. You obviously need a text editor that allows you to write code for the


600

purposes of marking up your site, and there are other tools that perhaps you may not have realized or thought about. Some of these particular products could save you a lot of added time and hassle in the future if you choose to install and use them.

These conventions are used throughout this section:

� Industry standard: The premium product, usually what I consider the best option available

� Recommendation: A satisfactory and almost as good replacement or alternative

� Alternative: Additional choices that are comparable to the industry standards and recommendations but not always as good

ExplainED While features, popularity, or value for money ultimately decided the industry standard, as close to being the best package as they came, recommendations always fell short of the top spot.

Website Editors The first piece of software you should consider investing some time in is a website editor. These products provide you with an environment to create and edit your design through graphical (WYSIWYG) or code (syntax) software. While other software in this list should be considered important, the syntax editor is by far the most important product you will ever use when making your website. There are three different kinds of syntax editors on the market and each has their own learning curve, advantages, and disadvantages. In the following sections, you will find a brief description of each style of editor and some general choices that are of my own personal recommendations. However, the product you ultimately choose should be based on what you feel most comfortable using.

WYSIWYG Editors “WYSIWYG” may sound strange it is an acronym for “what you see is what you get.” These kinds of editors are the most well known to people who start out making a website for the first time as they are entirely visual in nature. When using these products, there is no need to learn how to write code, as using a


601

WYSIWYG editor is usually a simple matter of dragging and dropping elements where you want them on the page.

While a WYSIWYG editor may seem an ideal choice for the project you are about to undertake, tutorials for visual editors will not be given in this book. First, there are already books that deal with specific products like FrontPage and Adobe Dreamweaver. Second, this book intends to equip you with actual skills you can make use of and therefore the focus inclines toward coding. But the main reason why WYSIWYG editors will be held at arm’s length in this book is that there are some serious flaws in the way visual editors represent code that could potentially damage the ability for visitors to browse your website.

ExplainED Adobe Dreamweaver has been listed among the editors you may wish to choose, but Microsoft FrontPage has been omitted because the product is being discontinued and replaced.

One merit of a visual editor is that using it requires no coding knowledge to begin creating websites, which of course, makes it a straightforward approach to website creating for those who wish to have a site without having to do any work. However, as you are reading this book with the intention of learning to make a website the correct way (without taking dirty shortcuts) and to create something that will have some longevity, the simple truth is that beneath the surface of visual editors (including the big players such as Dreamweaver), the underpinning code often ends up in a big wave of confusion and unnecessary code that has been glued together.

Because of the serious misgivings and the complete lack of awareness it requires to use a WYSIWYG editor, I highly recommended you do not use one. However, if choose to do so, make use of the code editing window to maintain complete control of everything that is produced within your website design.

Here are the WYSIWYG editors of note:

� Industry standard: Adobe Dreamweaver costs $399 new, or an upgrade costs $199, and it’s available for Windows and Mac. See http://www.adobe.com/products/dreamweaver/.

� Recommendation: Microsoft Expression Web costs $299.95 new, or you can upgrade for $99.95. You can learn more about this Windows-only product at http://www.microsoft.com/expression/products/ Web_Overview.aspx.


602

� Alternatives: The following alternative choices are free and open source options available for Windows, Mac, and Linux:

� KompoZer is available at http://kompozer.net/

� Amaya is shown in Figure B-1 and is available at http://www.w3.org/Amaya/

Figure B-1. Amaya is an open source browser which follows web standards.

Source Code Editors / IDEs The integrated development environment (IDE) is quite probably the best choice of the three available options you can use. It has none of the damaging visual elements of the WYSIWYG editor and contains the same functionality as a plain text editor. It also has functionality aimed specifically at developers or people who will be working with code (which will soon be you!). Most IDEs contain useful functionality such as code highlighting for better readability, line numbering, project and code management utilities, spell checking, code collapsing to ease maintenance, and debugging tools to help reduce the number of errors.


603

� Industry standard: Eclipse is a free and open source IDE for Windows, Mac, and Linux. See http://www.eclipse.org/.

� Recommendation: Notepad++ is also free and open source and is available for Windows; it’s shown in Figure B-2. See http://notepad-plus.sourceforge.net/.

� Alternatives:

� Aptana Studio is free and available for Windows, Mac, and Linux. See http://www.aptana.com/.

� UltraEdit can be purchased new for $49.95 or an upgrade can be purchases at $24.95. It’s available for Windows and Linux. See http://www.ultraedit.com/.

� Coda costs $99 and is available for Mac only. See http://www.panic.com/coda/.

Figure B-2. Notepad++ is a firm favorite editor among web coders.

Plain Text Editors Have you ever used Microsoft Notepad? It has been included with every release of Windows for many years. This is a simple yet effective example of a plain text editor (see Figure B-3). The nature of these products is to be able to type large amounts of text (or marked up code) with minimum features. An IDE can


604

provide you with some quick timesaving measures (which can be really useful), but many people still choose to build websites using a plain text editor simply because of the ease of use and the minimalistic interface.

Figure B-3. Microsoft Notepad which comes as part of Windows can produce code

too!

� Industry standard: Microsoft Notepad and Apple TextEdit are free and available within the operating systems.

� Recommendation: Vim is a free and open source plain text editor available for Windows, Mac, Linux. See http://www.vim.org/.

� Alternative: SciTE is a free and open source plain text editor available for Windows, Mac, Linux. See http://www.scintilla.org/SciTE.html.

Useful Software While your choice of editor will form the hub of your website building experience, there are many other useful applications and browser extensions (particularly for Mozilla Firefox) that will aid the process of making a website from the ground up. The following sections list useful types of software that you should investigate to determine if you feel they would be of use to you. Then, you can make a choice based on the recommendations included here or by going with an existing editor you have, or perhaps even find something completely different altogether!


605

Image Editors While you produce your website, you are almost constantly creating, editing, and working with images. Graphics are an essential part to any website design, as a simple design with few colors can ultimately look boring—and boring is not the impression you want to put across to your users. While it is important to choose an image editor that has enough features to cope with your needs, in many cases, you may not require the full feature set of a professional image-authoring package. It may also be worth nothing that for the purposes of modern web design, your editor should support as many formats as possible (including the Windows icon format) for specific reasons.

� Industry standard: Adobe Photoshop is available new for $699, or you can upgrade for $199. It’s available for Windows and Mac. See http://www.adobe.com/products/photoshop/photoshop/.

� Recommendation: GIMP is a free and open source image editor available for Windows, Mac, and Linux at http://www.gimp.org/. It’s shown in Figure B-4.

� Alternatives:

� Paint.NET is free but available only for Windows at http://www.getpaint.net/.

� Corel PaintShop Pro is available new at $79.99 and an upgrade costs $49.99 (Ultimate version). It’s available for Windows. See http://www.corel.com/paintshop/.

Figure B-4. GIMP is a powerful image editor with none of the costs of Photoshop.


606

FTP Clients When you have created your pages, you are going to want to be able to place them on the Internet, so you will need a program that can copy the source code from your computer and place it onto you website. In terms of features, most FTP clients are very similar, but it may be worth getting a client that supports SSH (secure shell over FTP), which, as discussed in the protocols section earlier, will give you a much more secure method of transferring your files, and security is definitely a good thing.

� Industry standard: SmartFTP is available for Windows only, and the Professional version costs $49.95. See http://www.smartftp.com/.

� Recommendation: FileZilla is a free and open source FTP client for Windows, Mac, and Linux and is available at http://filezilla-project.org/ (see Figure B-5).

� Alternative: CuteFTP can be purchased at $59.99, or an upgrade costs $29.99. It’s available for Windows and Mac at http://www.globalscape.com/cuteftppro/.

Figure B-5. FileZilla contains a vast array of features aimed at uploading files to the

Internet.

Note Takers Using a note taker may seem like one of the least obvious choices, but if you do wish to manage your projects easily, there is nothing like a good note taking application to help you organize your thoughts, plans for the website, and


607

information you wish to include. A note taking application is basically the digital equivalent of a sketchpad; it allows you to write, draw, graph, link, and reference all sorts of information that can be organized into pages, sections, or blocks. If you have a lot of ideas, things to remember, or plans you wish to organize, these kinds of products are fantastic for the job and can reduce the amount of time you spend filing pieces of paper.

� Industry standard: Microsoft OneNote costs $99.95 and is available for Windows at http://office.microsoft.com/onenote/. See Figure B-6.

� Recommendation: EverNote is free and available for Windows and Mac at http://evernote.com/.

Figure B-6. Microsoft OneNote allows you to make notes and organize your ideas.

E-Mail Programs One of the most common elements of the Internet today is e-mail; you already probably have an e-mail account of your own. As you start your own website, you will likely want to provide your visitors with a dedicated means to be able to contact you, either by giving them your existing address or providing a method of contact such as a form on the homepage. Even though nearly every website host provides a web-based interface to read your e-mail, you may feel


608

more comfortable having a desktop e-mail client so that you can more effectively organize and work with the messages that are sent to your address.

� Industry standard: Microsoft Outlook, shown in Figure B-7, is available at $109.95 for Windows. See http://office.microsoft.com/outlook/.

� Recommendation: Mozilla Thunderbird is a free an open source e-mail client that’s available for Windows, Mac, and Linux at http://www.mozillamessaging.com/.

� Alternative: The Bat! can be purchased for $24.56, and you get with a 30% discount on upgrades. It’s available for Windows at http://www.ritlabs.com/en/products/thebat/.

Figure B-7. Microsoft Outlook is the most popular e-mail client in businesses.

Word Processors Writing content is a tricky business. You want to appear professional and maintain high standards, but the editor you use to build your website really is not equipped to deal with the complex needs of an individual who is going to spend any amount of time writing for the Web. Things such as spell checking, grammar checking, structuring sentences properly, and laying out your content (without the distraction of the design)—simply being able to format a document that you would like to publish online—can only come from using a rich text editor that is equipped to fit the task you are trying to achieve.


609

� Industry standard: Microsoft Word, shown in Figure B-8, costs $229.95, and an upgrade costs $109.55. It’s available for Windows and Mac. See http://office.microsoft.com/word/.

� Recommendation: OpenOffice Word is a free, open source word processor available for Windows, Mac, and Linux. See http://www.openoffice.org/.

� Alternatives:

� AbiWord is free, open source software available for Windows, Mac, and Linux at http://www.abiword.com/.

� Corel WordPerfect Office costs $299.99, and an upgrade is $159.99. It’s available for Windows at http://www.corel.com/wordperfect/.

Figure B-8. Microsoft Word 2007 has a wide variety of word processing features.

Wireframe Modeling When you start your website project, you will probably find yourself having lots of ideas but nowhere to put them. Perhaps you want to start a brainstorming session, map out your workflow, or even just create a wireframe using shapes to produce some models to help you get an idea of how everything should be organized. Whatever your choice, you will find that wireframe modeling products allow you to create technical diagrams that can be helpful when trying to get inspiration for what your potential website could end up looking


610

like or how it could be structured. These tools are not something everyone uses, but you may well find them handy.

� Industry standard: Microsoft Visio Professional is priced at $344 or $245.95 for the upgrade. It’s available for Windows at http://office.microsoft.com/visio/.

� Recommendation: Dia is a free and open source wireframing software for Windows, Mac, and Linux, and it’s shown in Figure B-9. See http://www.dia-installer.de/.

� Alternatives:

� SmartDraw costs $297, or you can upgrade for $129. It’s available for Windows at http://www.smartdraw.com/.

� ConceptDraw Office is $339.99, and the upgrade is $70 per year. It’s available for Windows and Mac. See http://www.conceptdraw.com/en/.

Figure B-9. Dia is an open source modeling product which allow you to create high

quality technical diagrams.


611

File Archivers Distribution on the Web has been made easier with the aid of file archiving tools. They act like folders to which you can insert multiple files and have them all stored within the one handy location. The technology can be useful on the Web because not only does it allow you to provide a series of files within a single download but the compression of the format means the size the downloads will be less problematic. As a result, you will not waste as many resources on your website due to the decreased file size and the reduced amount of time the file will take to download. Because of this, it’s worth installing one to help manage files you wish to distribute online.

� Industry standard: 7Zip is free and open source. It’s available for Windows, Mac, and Linux at http://www.7-zip.org/.

� Recommendation: WinZip Professional costs $49.95 and is available for Windows at http://www.winzip.com/.

� Alternatives:

� WinRAR cost $29 and is available for Windows; it’s shown in Figure B-10. See http://www.rarlabs.com/.

� TugZip is free and also for Windows. See http://www.tugzip.com/.

Figure B-10. WinRAR is an archiver which supports a multitude of various formats.


612

Backup Utilities When you start building your website, the last thing you want to do is wake up one morning to find that your computer crashed and everything (including your website) was lost in the process. Losing important files can be devastating, and usually once you lose your data, you make sure never to lose it again. What a backup utility actually does is make a copy of everything you declare as important to you. There are many different places you can place the copy of your data onto such as a CD, DVD, floppy disk, portable memory device, or even on a private file hosting service. But the most important thing that can be gained from using this tool is the knowing that whatever happens, you can always recover what may have once been lost forever.

� Industry standard: Acronis True Image costs $49.99, and the upgrade costs $35.69. It’s available for Windows at http://www.acronis.com/homecomputing/products/trueimage/.

� Recommendation: Cobain Backup (see Figure B-11) is free and is available for Windows at http://www.educ.umu.se/~cobian/ cobianbackup.htm.

� Alternatives:

� Genie-Soft Backup Manager is prices at $49.95 or $34.95 for the upgrade. It’s Windows software available at http://www.genie-soft.com/products/gbm/us/default.html.

� Time Machine is free software for Mac available within the operating system.

Figure B-11. Cobain Backup allows you to help guarantee your data’s safety.


613

Color Pickers When I make websites, the hardest thing I find is coming up with color schemes. By this, I mean choosing what colors mesh well together and what would suit my current web design needs. As someone who is beginning and will probably have no experience of the hexadecimal codes that correspond to color values, it may be worth getting a color picker or scheme creator. These tools allow you to select and create a palette of color (just like a painter), and from there, you can copy the code that represents that particular color into your documents as you require them. These tools give you valuable onscreen views of how your colors will end up looking and allow you to discover what color was used at a certain point of another website if you feel a lack of inspiration.

� Industry standard: Color Schemer Studio is $49.99, or you can upgrade for $29.99, and it’s available for both Windows and Mac. See http://www.colorschemer.com/studio_info.php.

� Recommendation: Adobe Kuler is free and available for Windows, Mac, and Linux. See http://kuler.adobe.com/.

� Alternative:

� CoffeeCup Website Color Schemer Studio costs $29.00 (see Figure B-12). It’s available for Windows at http://www.coffeecup.com/color-schemer/.

� Color Cop is a free Windows color picker available at http://colorcop.net/.

Figure B-12. Color Schemer Studio lets you create palettes that can be used in

design.


614

Flash Developers Creating Flash files for multimedia or creating website interfaces and components is unfortunately not one of those tasks you can do within an IDE or WYSIWYG editor. Flash is a proprietary technology that requires compilation in order to function—this means is you need to use a piece of software specifically engineered to produce these files and convert them into a format that can be used on the Web. It is worth buying one of these tools only when you start learning about the technology and only if you think it will be required or useful for the kind of website you wish to produce as a result of what you learn.

� Industry standard: Adobe Flash costs $699, and an upgrade costs $199. It’s available for Windows and Mac. See http://www.adobe.com/products/flash/.

� Recommendation: SWiSHMax costs only $149.95, and the upgrade costs $74.95 (see Figure B-13). It’s available for Windows at http://www.swishzone.com/index.php?area=products&product=max.

� Alternative: FlashDevelop is a free and open source alternative for Windows, Mac, and Linux. See http://www.osflash.org/ flashdevelop/.

Figure B-13. SWiSHMax is a flash production tool that offers simple functionality at a

fraction of Adobe’s prices.


615

Audio Editors Audio editors are rather specialist products for people who are creating websites. A new online experience that has been sweeping the world by storm is the notion of podcasting. Essentially, podcasts are audio files hosted on a website that are the equivalent of radio shows published by the website owner who talks about a specific subject in relation to the content of the website itself. An audio editor allows you to record your voice or other sounds that you would like to broadcast, organize the recording files into segments of a show, and then publish it in a format that people can listen to in their own time by downloading the podcast from the website. While podcasting is certainly not mandatory, it is a fun hobby that many people (especially bloggers) have found increases the value of a website’s overall content and gives an added level of interaction with viewers.

� Industry standard: Audacity is a free, open source audio editor available for Windows, Mac, and Linux, and it’s shown in Figure B-14. See http://audacity.sourceforge.net/.

� Recommendation: Adobe Audition can be purchased for $349. The upgrade costs $99. It’s available for Windows at http://www.adobe.com/products/audition/.

� Alternative: Sony SoundForge costs $399.95 and is available for Windows at http://www.sonycreativesoftware.com/soundforge/.

Figure B-14. Audacity is one of the most popular and simple to work with audio

editors by professionals.


616

Web Browser Extensions The previously mentioned utilities and software products will help you to produce high quality websites, but one area that still needs addressing is the current rise in browser extensions. Especially noteworthy are those made available through Mozilla Firefox. These utilities are almost always free to download, install, and use, and they provide a wealth of additional functionality into the browser that will be useful as you’re producing your websites. Hundreds of potentially useful extensions are available through the Firefox add-ons page, but a few which may be of specific use to you have been recommended and listed in the following sections.

LinkED If you would like to find more potentially useful web development extensions for Mozilla Firefox, you can do so by visiting the following website: https://addons.mozilla.org/en-US/firefox/.

FirebugOf all the extensions in this list, Firebug is the most well known and beloved (see http://getfirebug.com/). It contains a powerful set of features to help you view, monitor, and debug your website. With HTML, CSS, and JavaScript debugging, editing, and inspection tools, as well as the abilities to log and record errors in your websites and to inspect individual elements to see how they compare against other elements on the page, Firebug really is a Swiss Army knife of epic proportions that no website creator should be without (see Figure B-15).

Figure B-15. Firebug lets you take a peek under the hood of any website.


617

CodeburnerCodeburner (http://tools.sitepoint.com/codeburner/) is actually an extension of Firebug created by SitePoint. What does it do? Well, it provides added functions to the popular extension in terms of complete documentation of HTML, CSS, and JavaScript, explaining each tag’s purpose, providing examples of how it can be used in a website, and noting what browsers contain support for it (see Figure B-16). While Codeburner may not be as well known as Firebug, it gives you some really useful advice when you find yourself at a loss for the meaning behind different pieces of code within your website design. You should think of Codeburner as the same equivalent to one of those pocket reference books you can buy on specific subjects.

Figure B-16. Codeburner offers reference material for the most commonly used web

languages.

Web Developer Options Have ever wanted to know what would happen to your website if a particular technology was disabled? Or would you like to see where all of the elements and components of your website are located in the page by displaying or outlining them in an easy to view manner? How about running a series of tests on your code or generally just poking around under the hood to determine the causes of problems? If so, Web Developer Options extension is for you (see Figure B-17). It does have some similar functionality to other extensions mentioned in this appendix, it should be noted that its ability to pinpoint and highlight elements of a design are second to none. This add-on for Firefox would be a great addition to your website building utilities. You can find the home page at http://chrispederick.com/work/web-developer/.


618

Figure B-17. The Web Developer Options add-on can show you what will happen if a

style is disabled.

Firefox Accessibility Extension The Firefox Accessibility extension shown in Figure B-18 was created by the Illinois Center for Information Technology Accessibility to give people with disabilities an easier browsing experience (see http://firefox.cita.uiuc.edu/). However, this tool is particularly useful for developers when you come to checking how easy the website is to navigate for disabled people. You can produce a series of reports, lists, and validator results that can assist you in both fixing errors in your code and improving the overall accessibility of your websites.


619

Figure B-18: Reports can be produced using the accessibility extension to help

analyze your website.

ColorZillaA separate color picker may help you produce a palette with ease, but if you are a Firefox user, there may not even be a need for you to purchase or download a separate application because of the powerful little utility known as ColorZilla (see http://www.colorzilla.com/firefox/). This add-on (shown in Figure B-19) gives you the ability to mix colors and styles with ease. It comes with an eyedropper tool that lets you select specific colors you see in the browser window and a website analyzer that can extract colors used on the page you are visiting into a custom palette. It even has a color picker that contains a variety of mixers you can use to work out shades, tints, and grab the values for individual choices.


620

Figure B-19. Produce color schemes based on an existing website with ease using

ColorZilla.

621

Index Special Characters # (hash character), 260, 398 $ character operator, 263 % (percentage) measurement unit,

249& operator, 385 && (double ampersands), 432 * (asterisk) character, 261 /* character combination, 254 */ character combination, 254 * character operator, 263 @rules (follow at-rules), 255–259 ^ (caret), 262, 396 | (pipe) character, 262, 385 || (double-pipe) character, 432 ~ character operator, 262 + character, 264 == (double equals sign), 431 > character, 264 : (colon) character, 265 ! (exclamation mark), 385, 432 / (training slash character), 396

Numerics2Advanced Studios website, 342 2Checkout merchant service, 579 7Zip archiving tool, 611 9Rules Network gallery, 29 50% reduction rule, 101 101domain.com, 201 301 errors, 395 404 (section not found) errors,

392–406error reporting, 399 .htaccess file, 393–398 maintaining support, 401–404 providing alerts and notices,

400–401

scheduling downtime and maintenance, 400

404 research lab, 394 456 Berea Street web design site,

598960 Grid System CSS framework,

4194096 Color Wheel, 283

Aa element, 119, 163 A List Apart online magazine, 10,

598AAC (Apple QuickTime) format,

332, 333 abbr element, 164–165 ability of audience, 74 AbiWord, 609 able-based design, e-mail, 567 About Me page, 561 About page, 77, 79, 80 "above the fold", 503 absolute value, position property,

304abstracts, 499 accelerators, 524–527 access keys, 487 accessibility, 465–492

access keys, 487 Accessibility page, 77 benefits of, 468–469 contrasting style sheets, 486 devices for, 469–473

magnifiers, 470 mouse and keyboard, 471–

472screen readers, 469 speech recognition, 472


622

tactile devices, 470 text browsers, 471 web browser tools, 472–473

headings, 485 logical structure, 481–483 myths about, 466–468 overview, 466–469 problems with, 488–491 skip links, 485 standards, 492–498

accessibility law, 495–496 accessibility validation,

497–498Pas 78, 493 Samurai, 494–495 WAI-ARIA, 495 WCAG, 494

text alternatives, 483–485 writing accessibility statement,

491–492Accessible Rich Internet

Applications (ARIA), 495 ACF CSS framework, 419 Acronis True Image backup utility,

612acronym element, 164–165 action attribute, 185 active psuedo class, 266 Active Server Pages (ASP), 218, 440 Active Server Pages .NET

(ASP.NET), 440 ActiveX, 458 ADA (Americans with Disabilities

Act), 496 Adaptive Path blog, 599 AddThis website, 569 adjacent sibling selectors, 264 administrative record, 205 Adobe AIR RIA framework, 458 Adobe Audition audio editor, 615 Adobe Dreamweaver editor, 131,

601Adobe Flash

developers, 614 formats for, 332 RIA framework, 458

Adobe Kuler website, 283, 457, 613 Adobe Photoshop image editor, 605

Adr format, 513 AdSense, 560 Advertise page, 77 advertising, 319, 558–566

campaign to conversion, 561 content delivery, 562–566 marketing ideas, 560–561 offline marketing, 558–559 overview, 558 pay per click, 559–560

AdWords, 531 Afternic domain auction site, 207 Agavi server-side frameworks, 455 age of audience, 74, 476 AIFF (Apple QuickTime) format,

332, 333 AIR RIA framework, 458 AJAX, 425–427 Ajaxian blog, 599 ALAC (Apple QuickTime) format,

332, 333 AlertPay merchant service, 579 alerts, providing, 400–401 Alexa toolbar, 549 all media type, 257, 259 Allow statement, 545 Almsamim Color Picker, 283 alpha testing, 507 alt attribute, 122, 145, 146, 147,

159, 262, 483, 484 alt text, 146, 147 alternative stylesheet value, 253 Amaya open source browser, 602 Amazon Flexible Payments

merchant service, 579 Americans with Disabilities Act

(ADA), 496 analytics software, 508–509 anchor element, 119 Android SDK emulator, 374 angular brackets, 119 .ani file, 308 <animate> element, 387 Animated PNG (APNG), 314, 318 animations, GIF, 315, 316 Apache, Linux, 218 Apache servers, 393

Index

623

API (application programming interface) system, 581

APNG (Animated PNG), 314, 318 Apple icons, 326–327 Apple QuickTime (AAC, AIFF, ALAC,

and MOV) formats, 332, 333

Apple Safari web browser browser tools, 376 popularity of, 361 web rendering, 362 website, 370

Apple TextEdit editor, 131, 604 <applet> element, 387 application programming interface

(API) system, 581 applications

provided by hosting company, 220

for scripting, 415–416 Apress website, 597 Aptana Studio text editor, 603 Archive page, 77, 80 area element, 159 ARIA (Accessible Rich Internet

Applications), 495 arrays, defined, 432 ARTC validator, 498 Article index page, 81 article tag, HTML version 5, 176 Articles box link, 56 Articles page, 77 aside element, HTML version 5,

176Ask Jeeves search engine, 532, 546 ASP 101 website, 459 ASP (Active Server Pages), 218, 440 ASP.NET (Active Server Pages

.NET), 440, 459 assistance, providing through

websites, 479 asterisk (*) character, 261 Atlas JavaScript framework, 435 Atom feeds, 134, 516, 517–522 at-selector, 357 attention deficit, 478 attributes, 120–121 auction site, domain names, 207

Audacity audio editor, 339, 615 audience

considering when writing, 74–75 fulfilling expectations of, 76,

98audio and video formats, 334 audio clips, stock collections of,

323audio editors, 615 audio element, 158 audio formats, 314, 331 <audioscope> element, 387 auditing website, 507 Audition audio editor, 615 aural impairments, 475 aural media type, 257 <author> element, 520 Authorize merchant service, 579 auto value, table-layout property,

287automated-backup system, 217 autoplay, 489 AVI (Windows Media Player)

format, 333, 339 Aviary graphic tools, 417

Bb element, 166–168, 271 background property, 261, 277,

279background-attachment property,

278background-color property, 277 background-image property, 277 background-position property, 278 background-repeat property, 278 backgrounds, 319 backup utilities, 612 backups, 217 backward compatibility, 390 bandwidth, 217–218, 232, 344 banning, 557 <basefont> element, 387 The Bat! email client, 608 BBC Glow JavaScript framework,

435BBC website, access keys, 488


624

bbPress forum package, 451 bdo element, 168–169 Beast Blog, 599 behavior, and CSS, 304–309 Best Web Gallery, 29 beta testing, 507 <bgsound> element, 387 big element, 166–168 Big Stock Photo website, 325 billing record, 205 Bing search engine, 546 black color, emotional state

associated with, 285 black hat SEO, 552–557

overview, 552–553 penalties, 556–557 techniques to avoid, 553–555

Blackberry Simulator, 374 <blackface> element, 387 bleeding edge, 392 <blink> element, 387 block elements, 119 block value, display property, 307 block-inline value, display

property, 307 blockquote element, 155–156 Blog page, 77, 81 Blogger blogging package, 449 blogs

about design, 28 comments on, 402 overview, 7 platforms for, 448–449

blue color, emotional state associated with, 285

Blueprint CSS framework, 419 Bluetrip CSS framework, 419 BMP format, 314 Boagworld podcast, 599 body element, 122, 138–139, 140,

141, 175, 184, 240 bookmarklets, 436–437 Booleans, defined, 432 border property, 279, 280 border-collapse property, 287 border-color property, 279 borders, 297 border-spacing property, 287

border-style property, 280 border-width property, 280 bots, 489 bottom value

background-position property, 278

border property, 280 caption-side property, 287 clip property, 306

Boxes and Arrows website, 598 <bq> element, 387 br element, 144 braille media type, 257 brainstorming, 43–45 brand emphasis, 199 brick-and-mortar stores, 11 British Standards Institute (BSI),

493brown color, emotional state

associated with, 285 BrowserCam emulator, 371 BrowserLab emulator, 371 BrowserPhoto screenshot service,

373BrowserPool screenshot service,

373browsers, 351–366

accessibility tools, 472–473 browser wars, 352–362 caching, 345 compatibility issues, 233 competition between, 125 dropping support, 365 emulators, 369–375 extensions for, 616–619

Codeburner, 617 ColorZilla, 619 Firebug, 616 Firefox Accessibility

extension, 618 Web Developer Options, 617

hijacking, 488 IE's hasLayout property, 365–

366and market shares, 363–364 playing blame game, 362–366

BrowserShots screenshot service, 373, 374

Index

625

BrowsrCamp screenshot service, 373

brute force attacks, 462 BSI (British Standards Institute),

493bug tracking pages, 403 bulleted list mind map, 46 business cards, online, 11 button element, 186 button input type, 186 buttons, 319 buying links, 555 BuzzRank ranking scheme, 548

Ccaching, 12, 232, 345–346 CakePHP server-side frameworks,

455call to action buttons, 499 campaign to conversion, 561 capitalization, in domain names,

201Cappuccino RIA framework, 458 CAPTCHA, 489–491 caption element, 151 caption-side property, 287 card sorting, 507 caret (^), 396 carousels, 409 carriage returns, 143 Cascading Style Sheets. See CSS case sensitivity, JavaScript, 429 Catalyst server-side frameworks,

455categorizing website, 19 ccTLDs (country code top level

domains), 198 center property, 274 <center> element, 387 centimeters (cm) measurement

unit, 248 Centricle website, 380 <changfreq> element, 543 <channel> element, 519 character escaping, 543 chat rooms, 402

checked value, checked attribute, 189

child selectors, 264 Children's Online Privacy

Protection Act (COPPA), 586

chunking, when writing, 100–101 Cicero, Marcus Tullius, 106 cite element, 155–156 class attribute, 121, 235–237, 243,

260class element, 129 classes, pseudo, 243, 265–266 clear value, float property, 305 Clever CSS framework, 419 Cleverbridge merchant service, 579 click to buy button, 580 ClickBank merchant service, 579 client machine, 209 client-side scripting

AJAX, 425–427 bookmarklets, 436–437 data storage, 414–415 defined, 410 DOM, 424–425 JavaScript, 423–436 languages in use, 421–423 script creation process, 427–435 versus server-side, 411–414

clip art, 322, 323, 324 clip property, 306 closing tag, 138 cloud computing, 455–459 cloud hosting, 211 cluster hosting, 211 cm (centimeters) measurement

unit, 248 CNET, 338 Cobain Backup backup utility, 612 Coda text editor, 603 Coda website, 411 code, defined, 116–118, 228–232 code editor

installing, 132 pasting content into, 74, 99

code element, 170–171 code snippets, 419–420 Codeburner, 617


626

CodeIgniter server-side frameworks, 455

CoffeeCup Website Color Schemer Studio color schemer, 613

cognitive impairment, 477 col element, 153, 154 col value, scope attribute, 151 ColdFusion, 442 colgroup element, 153, 154 colon (:) character, 265 color blindness, 467 Color Cop color picker, 613 color, evoking emotion with, 285 color keywords, 245 color pickers, 613 color property, 276–286 Color Scheme Designer, 283 Color Schemer Studio color

schemer, 613 color values, 245–251 color wheels, 283 Colorotate website, 283 ColorZilla utility, 619 cols attribute, 187 colspan attribute, 152 colspan element, 154 .com domain, 198, 200 combinators, targeting selectors

with, 263–266 "coming soon" messages, 400 command element, HTML 5, 190 Comment statement, 545 <comment> element, 387 comments, 139, 347

conditional, 383–386 in CSS, 254

commercial sites, 7–8 Commodo certificate provider, 584 commonly used search phrases

(CUSPs), 540 Community page, 77, 82 community sites, 8–9 community-powered network, 8 compatibility issues, 233, 390 complexity, in writing, 102 compression

audio, 339 HTTP, 347

JPEG format, 316 PNG format, 317 reducing file size through, 345 video, 339

concept art, placing, 60 ConceptDraw Office wireframing

software, 610 conditional comments, 383–386 confirmation of actions, 504 connection speed, 504–505 contact forms, 83, 402, 500 Contact page, 77, 83 content, 65–114

cloaking, 554 decisions about, 70–71 delivery of, 562–566 dummy text in place of, 104–

106images, 67–68 information design, 72–75

audience, 74–75 content comes first, 73

length of, 100 licensing, 109 placing, 140–141 rich media, 68–69 sites rich in, 9 text, 66–67 user-submitted, 114 writing, 75–112

chunking, 100–101 common pages, 76–78 complexity, 102 conclusion, 104 content examples, 79–97 context, 103 emotion, 102 empathy, 102 fluff posting, 101 free will, 103 grammar, 99–100 intellectual property issues,

106–112iteration, 101–102 language, 103 layout, 100 legibility, 101 personal bias, 102

Index

627

plagiarism, 104 readability, 100 reductionism, 101 scanning, 103 spelling, 99 structure, 100 wasting time, 101

content attribute, 180 content category, 175 content component, 56 content management systems, 447–

448content-out approach, 73 content-type attribute, 181 content-type http-equiv attribute,

181content-type meta element, 181 context, in writing, 103 contrasting style sheets,

accessibility, 486 Contribute page, 77, 84 cookies, 414, 415, 444 coords attribute, 159 COPPA (Children's Online Privacy

Protection Act), 586 copyright issues, 107–108, 111,

113, 325 Corbis website, 325 Corel PaintShop Pro image editor,

605Corel store, 576 Corel WordPerfect Office word

processor, 609 corporate sites, 9–10 country code top level domains

(ccTLDs), 198 couponcache.com site, 225 coupon.sc website, 225 Craw-delay statement, 545 crawlers, 531 creative commons, 109–110, 323,

324creative process, 2–6 CreativeXpert podcast, 599 Creattica gallery, 29 cross-browser opacity,

implementing, 388–390 crossed-out effect, 274

cross-site scripting (XSS), 460 CSS (Cascading Style Sheets), 146,

227–228, 311 class attribute, 235–237 colors and units, 244–251 comments for code, 254 CSS box model, 296–309

behavior, 304–309 dimensions, 301–302 margins, 302–303 padding, 302–303 position, 304–309 visibility, 304–309

declaring style sheet, 252–254 follow at-rules (@rules), 255–

259ID attribute, 235–237 inheritance, 239–242 properties and values, 266–290

backgrounds, 276–282 borders, 276–282 colors, 276–286 fonts and text, 267–276 tables and lists, 286–290

selectors, 259–266 semantics of style, 232–235 specificity, 242–244 targeted styling, 235–237 using for design, 290–296

CSS Beauty gallery, 29 CSS Discuss website, 380, 599 CSS Drive gallery, 29 CSS Elite gallery, 29 CSS frameworks, 417, 418, 419 CSS Heaven gallery, 29 CSS Mania gallery, 29 CSS Remix gallery, 29 CSS Reset CSS framework, 419 CSS Tests website, 380 CSS Tricks website, 599 CSS Zen Garden gallery, 29 CSSline gallery, 29 Cube Cart shopping cart software,

580.cur file, 308 Curl RIA framework, 458 curly brace characters, 234 curriculum vitae (CV), 16


628

cursive fonts, 270 cursor property, 308 CushyCMS content management

package, 447 CUSPs (commonly used search

phrases), 540 CuteFTP software, 606 CV (curriculum vitae), 16

Ddashed value, border-style

property, 280 data storage

and scripting, 414 and server-side scripting, 443–

445databases, 219, 414, 415 datagrid element, 155 datalist element, HTML 5, 190 DCMI (Dublin Core Metadata

Initiative), 511 dd element, 147–149 DDA (Disability Discrimination Act),

496debugging problems, 379–390

conditional comments, 383–386 double-margin float bug, 380–

383hacks and filters, 379–380 implementing cross-browser

opacity, 388–390 proprietary code, 386–388

declaration block, 234 declaring style sheet, 252–254 dedicated hosting, 211 default components, for

wireframe, 56 Default Style option, Internet

Explorer 8, 230 deflating, 557 degrading gracefully, 391 del element, 169 del.icio.us website, 551 descent selectors, 264 <description> element, 517 design

inspiration from blogs about, 28

and usability, 499–502 using CSS for, 290–296

Design Float web design site, 598 Design Shack gallery, 29 Desktop Tower Defense game,

Adobe Flash, 158 details element, 166 Developer Hell website, 459 dfn element, 164–165 Dia wireframing software, 610 dialog boxes, JavaScript, 429, 430 dial-up connections, 344 Digital Millennium Copyright Act

(DMCA), 111, 112 digital rights management (DRM),

563Digital Web Magazine, 598 dimensions, and CSS, 301–302 <dir> element, 387 direction property, 275 Disability Discrimination Act (DDA),

496Disability Rights Commission (DRC),

493disabled="disabled" attribute, 185 disabling JavaScript, 423, 424 Disallow: statement, 545 discounts for host providers, 225 disk space, from hosting company,

218display property, 307 display value, visibility property,

308div element, 120, 121, 129, 175,

176, 184, 191, 193 DivX format, 332, 333 Django server-side frameworks,

455dl element, 147–149 DMCA (Digital Millennium Copyright

Act), 111, 112 DMOZ directory, 551 DNS (Domain Name System) server,

217DOC format, 563, 565 Document Type Declaration (DTD),

137–138Dojo JavaScript framework, 435

Index

629

DokuWikiwiki package, 450 DOM, 424–425, 428 Domain Name System (DNS) server,

217domain-award systems, 209 Domai.nr site, 204 domains, 196–199

auction sites for, 207 choosing name, 199–209

brand emphasis, 199 domain hacks, 202–203 international domain name

(IDN), 202 purchasing methods, 207–

209WHOIS records, 205–206

extensions, 197–198 future of TLDs, 198–199 registrars for, 200

domia.nr site, 203 dot mobi domain-name project, 17 Dot Mobi Emulator, 374 DotCMS content management

package, 447 DotNetNuke content management

package, 447 dotted value, border-style

property, 280 double ampersands (&&), 432 double equals sign (==), 431 double value, border-style

property, 280 double-margin float bug, 380–383 double-pipe (||), 432 Download FileZilla Client link, 222 Download page, 77, 85 downtime, scheduling, 400 DRC (Disability Rights Commission),

493Dreamweaver, Adobe, 131, 601 DRM (digital rights management),

563Drupal content management

package, 448 dt element, 147–149 DTD (Document Type Declaration),

137–138

Dublin Core Metadata Initiative (DCMI), 511

dummy text, 104–106 duplicate content, 555 dynamic content, creating, 62 Dynamic Drive website, 438 Dynamic Site Solutions website,

380

EEasy Stock Photos website, 324 e-books, 562 Eclipse open source IDE, 603 ECMA International, 126 e-commerce, 573 editing software, 130–132 education of audience, 74, 477 effects, 341–343 elastic layout style, 292 Elasticss CSS framework, 419 elements, 118–123

explanation of, 119 marking end of, 120 overuse of, 555 pseudo, 243

Elements CSS framework, 419 em measurement unit, 166–168,

248, 270 e-mail, 566–567

and hosting company, 219 programs for, 607–608 support, 402

EMastic CSS framework, 419 embed element, 156–157 embossed media type, 257 emoticons, 102, 316 emotion, evoking with color, 285 empathy, in writing, 102 empty-cells property, 287 encryption, 582 end if statement, 384 English, American, 129 <entry> element, 520, 521 environmental concerns, 479 equals character, 121 equivalent search terms (ESTs),

540


630

error logs, 399 ErrorDocument pages, 394, 395 errors. See 404 (section not found)

errorsESTs (equivalent search terms),

540events, defined, 432 Events page, 77, 85, 86 EverNote application, 607 Every Stock Photo website, 324 ex measurement unit, 248 exclamation mark (!), 385, 432 experience of audience, 74 Expression Web editor, 131, 601 ExpressionEngine content

management package, 448 expressions, JavaScript, 434 Ext JavaScript framework, 435 extended readability tester, 498 Extensible Application Markup

Language (XAML), 329 Extensible Hypertext Markup

Language (XHTML), 124 Extensible Markup Language (XML),

124Extensible Stylesheet Language

(XSL), 228 extensions, role of, 537 extranets, 11 e-zines (online magazines), 9, 566

FFAE validator, 498 false operator, 385 family, inspiration from, 26 fantasy fonts, 270 FAQ (Frequently Asked Questions)

page, 77, 86 favicons, 135, 326–327 faxing, visitor feedback through,

403Features page, 77, 87 <feed> element, 521 feedback from visitors, 367–368,

403Feedburner, 515 feeds, 514–522

FeedValidator code validation service, 369

field studies, 507 fieldset element, 184, 185 figure element, 147 figure tag, 147 file archivers, 611 file formats, 314–318

GIF, 315–316 JPEG, 316–317 PNG, 317–318

file hosting, 452 file management, provided by

hosting company, 220 File Transfer Protocol (FTP), 220,

221, 606 file value, 189 files for site, creating, 135 FileZilla application, 222, 606 filters, 379, 380 Find My Host site, 214 Firebug extension, 616 Firefox web browser, 604, 616, 618

accessibility features, 472 browser tools, 376 browser wars, 354 extensions for, 616 popularity of, 361 website, 370

first-letter psuedo class, 266 first-line psuedo class, 266 fixed layout style, 292 fixed value

background-attachmentproperty, 278

position property, 304 table-layout property, 287

FLAC, Theora, and Vorbis (XIPH) formats, 333

flame wars, 102 Flash. See Adobe Flash FlashDevelop flash production tool,

614Flex RIA framework, 458 float property, 305 floating elements (floats), 305 flourished logos, 321, 322 fluff, 35, 101

Index

631

fluid layout style, 294 FluxBB forum package, 451 <fn> element, 387 FOAF (Friend of a Friend) format,

513focus groups, 507 folders, for storing site files, 133–

135follow at-rules (@rules), 255–259 font property, 272, 279 font stacks, 267, 268, 269 <font> element, 388 font-family property, 229, 267 fonts, styling, 267–276 font-size property, 248, 270 font-style property, 272 font-variant property, 274 font-weight property, 271, 272 footer element, HTML version 5,

176footers, 56, 174, 175, 500 for attribute, 186 formatting, elements affecting

a, 163 abbr, 164–165 acronym, 164–165 b, 166–168 bdo, 168–169 big, 166–168 code, 170–171 del, 169 dfn, 164–165 em, 166–168 i, 166–168 ins, 169 kbd, 170–171 pre, 170–171 sampand, 170–171 small, 166–168 span, 162–163 strong, 166–168 sub, 168–169 sup, 168–169 tt, 166–168 var, 170–171

forms, 184–189 forum software, 450–451 Fotolia website, 325

frames, elements used for frame, 190 frameset, 190 iframe, 190 noframes, 190

frameset element, 190 frameworks

for scripting, 417–419 server-side, 454–455

free hosting, 210, 212 Free Photos website, 324 free services, 578 free will, 103 FreelanceSwitch blog, 599 FreelanceSwitch podcast, 599 Frequently Asked Questions (FAQ)

page, 77, 86 Friend of a Friend (FOAF) format,

513friends, inspiration from, 26 friends of ED website, 597 FrogCMS content management

package, 448 FrontPage editor, 131, 353, 601 FTP (File Transfer Protocol), 220,

221, 606 FUDForum forum package, 451 Full Property table, W3C's website,

241functionality, interactive, 8 future proofing, 391–392 The FWA gallery, 29

Ggallery page, 77, 87, 88 GB (gigabytes), 218 Gears RIA framework, 458 Gecko desktop layout engine, 360 Gecko mobile layout engine, 361 gender of audience, 74 general sibling selectors, 264 generic top-level domain (gTLD),

198Genie-Soft Backup Manager backup

utility, 612 Geo format, 513 Gérard Talbot website, 380


632

German websites, 108 GET value, method attribute, 185 getElementById element, 433 getElementsByTagName element,

433Getty Images website, 325 GIF file format, 315–316, 318 gigabytes (GB), 218 GIMP image editor, 605 global wildcard * character, 545 glossaries, 403 GoDaddy site, 200, 207, 584 Google Analytics, 220 Google, and Digital Millennium

Copyright Act (DMCA), 112 Google Checkout merchant service,

579Google Chrome browser, 370

browser tools, 377 popularity of, 361 web rendering, 362 website, 370

Google Docs, 442 Google Maps, 453, 454 Google Search, 532 Google subdomains, 197 Google Web Toolkit server-side

frameworks, 455 Grails server-side frameworks, 455 grammar, 99–100 graphics languages, 327–329 gray color, emotional state

associated with, 285 gray hat techniques, organic SEO,

534green color, emotional state

associated with, 285 grid hosting, 210, 211 groove value, border-style

property, 280 gt operator, 385 gte operator, 385 gTLD (generic top-level domain),

198guarantee, of hosting company,

216

Hh1 through h6 elements, 142 H.264 format, 332, 333 hacks, 379, 380 handheld media type, 257 hash character (#), 260, 398 hasLayout property, Internet

Explorer, 365–366 hAtom format, 513 hAudio format, 513 hCalendar format, 513 hCard format, 512, 513 head element, 122, 138–139, 177,

179, 180, 181, 184, 193, 251

header category, 175 header component, 56 header element, HTML version 5,

176headings

accessibility, 485 levels, 142, 143 text for, 319

health issues, 476 height property, 301 hello world collection, 15 hexadecimal references, 245, 246 hidden value

border-style property, 280 overflow property, 306 visibility property, 307, 308

hide value, empty-cells property, 287

HiSoftware Cynthia Says, 498 history page, 77, 88 hMedia format, 513 homepage page, 78 hosting, 195–225

to avoid, 212–215 functionality guide, 215–222

applications, 220 backups, 217 bandwidth, 217–218 databases, 219 disk space, 218 email, 219 file management, 220

Index

633

guarantee, 216 languages, 218–219 load balancing, 216 multiple domains and

subdomains, 221–222 operating system, 218 price, 216 SSL certificates, 221 statistics, 219–220 support, 217 uptime, 216–217

types of, 210–212 uploading files via FTP, 222–225 web servers, 209–212 website addresses, 196–199

domain extensions, 197–198 domains and subdomains,

196–197future of top-level domains

(TLDs), 198–199 hot linking, 325 hover psuedo class, 266 hProduct format, 513 hr element, 158 hRecipe format, 513 href attribute, 159, 163, 230, 252,

253, 260 hResume format, 513 hReview format, 513 HSL (Hue, Saturation, Lightness)

color model, 247 HSLA (Hue, Saturation, Light,

alpha) color model, 247 hSlice format, 513, 524 .htaccess file, 393–398 HTML (Hypertext Markup

Language), 123 code, 118 and e-mail, 567 version 4.01, 141 version 5, 123, 124, 125, 141,

193custom elements of, 176 input types of, 190

html element, 122, 123, 138–139 HTML5 Canvas element, 329 http-equiv attribute, 180, 181 http-equiv meta element, 180, 181

Hue, Saturation, Light, alpha (HSLA) color model, 247

Hue, Saturation, Lightness (HSL) color model, 247

Hulu website, 334 hybrid layout type, 295 hyperlinks. See links Hypertext Markup Language. See

HTML

Ii element, 166–168 I Love Typography online

magazine, 598 IANA (Internet Assigned Numbers

Authority), 204 ICANN (Internet Corporation for

Assigned Names and Numbers), 198, 204, 205, 206

ICO extension, 327 iconized logos, 321 icons, 319, 500 id attribute, 120, 121, 176, 186,

235–237, 243, 260 ideas. See inspiration for ideas ideas pad, 41, 63 IdentEngine JavaScript framework,

435IDEs (Integrated Development

Environments), 131, 602 IDN (international domain name),

202IE Collection emulator, 371 IE Net Renderer screenshot

service, 373 IEMobile mobile layout engine, 361 IETester emulator, 371, 372 IETF (Internet Engineering Task

Force), 126 if statements, 384, 430, 431 iframe element, 190 IIS (Internet Information Server),

Microsoft, 218 <ilayer> element, 388


634

Illinois Center for Information Technology Accessibility, 618

image editors, 605 image galleries, 452 image input type, 186 <image> element, 388 images, 318–329

building logos, 320–322 creating and editing photos,

319–320favicons and Apple icons, 326–

327graphics languages in use, 327–

329overview, 67–68 stock collections, 322–326

images folder, 134, 145 IMDb (Internet Movie Database),

18, 446 img element, 119, 122, 123, 145–

146, 159 Impact font, 229 !important declaration, 242–243 Impressum page, 108 in (inches) measurement unit, 248 index.html file, 135, 223 information architecture, 49–61,

75. See also content layout, 50–57

concept artwork, 50–52 sitemaps, 53–54 structure, 52–53 wireframing, 55–57

visualization methods, 57–61 inheritance, 239–242 in-house reviews, 17 initialism, 164 inline elements, 119 inline style, e-mail, 567 inline value, display property, 307 input element, 185, 187 ins element, 169 inset value, border-style property,

280inside value, list-style-position

property, 289 inspiration for ideas, 24–48

idea development techniques, 30–48

brainstorming, 43–45 market research, 33–42 mind maps, 46–48 mission statement, 31–33

sources of, 25–29 design blogs, 28 friends and family, 26 media, 26 natural inspiration, 25 software design, 26 StumbleUpon, 27 web design galleries, 28–29

instant messaging, visitor feedback through, 402

Instant Payment Notifications (IPN), PayPal, 581

Integrated Development Environments (IDEs), 131, 602

integrating extensions, 522–527 interactivity. See scripting international domain name (IDN),

202International Organization for

Standardization (ISO), 126 Internet Archive project, 13, 112,

208Internet Assigned Numbers

Authority (IANA), 204 Internet Corporation for Assigned

Names and Numbers (ICANN), 198, 204, 205, 206

Internet Engineering Task Force (IETF), 126

Internet Explorer web browser accelerators, 525 browser tools, 376 browser wars, 352, 354, 355 bugs (version 6), 378, 379 competition with other

browsers, 125 conditional comments, 384,

385, 386 double-margin float bug, 381,

383

Index

635

hasLayout element, 365, 366 hasLayout property, 365–366 opacity property, 389, 390 popularity of, 361 text resizing, 484 web rendering, 362 website, 370 zoom property, 379

Internet Information Server (IIS), Microsoft, 218

Internet Movie Database (IMDb), 18, 446

intranets, 10 Invision forum package, 451 inward out mind mapping, 47 IPN (Instant Payment

Notifications), PayPal, 581 <isindex> element, 388 ISO (International Organization for

Standardization), 126 iStockPhoto website, 325 italic value, font-style property,

272<item> element, 518, 519 iteration, 101–102

Jjargon, limiting, 102 JavaFX RIA framework, 458 JavaScript, 421, 422, 535

bookmarklets, 436–437 client-side scripting

frameworks, 417 creating files, 427, 434 erasing content, 434–435 overview, 423

JavaScript Kit website, 438 JavaScript: pseudo protocol, 436 JavaScript Source website, 438 JavaServer Pages (JSP), 442 JAWS screen reader, 470 Jigsaw Validation Service, 368 JNG format, 314 Joomla content management

package, 448 JPEG format, 315, 316–317, 318 JPEG-2000 format, 314

.jpg file extension, 145 jQuery framework, 418, 435 JScript, 424 JSP (JavaServer Pages), 442 Jupiter Images website, 325

Kkbd element, 170–171 KDE website, 109 keep it simple, stupid (KISS), 192 keyboard

access keys, 487 and accessibility, 471–472

<keygen> element, 388 keyword profile, building, 539 keyword research, 539–541 keyword stuffing, 553 keywords, color, 245 keywords tag, 510 KHTML desktop layout engine, 360,

362khtml prefix, 387 KISS (keep it simple, stupid), 192 Klondike WAP Browser emulator,

374knowledge base, 402 Kohana server-side frameworks,

455KompoZer open source editor, 602 Kuler color picker, 283, 613

Llab page, 77 label attribute, 188 label element, 186 labs page, 89 landing pages, 554 lang attribute, 169, 262 languages

graphics, 327–329 markup, 123–125 for multimedia, 330–331 supported by hosting company,

218–219in writing, 103

Laporte, Leo, 336 <lastmod> element, 543


636

<layer> element, 388 layout, when writing, 100 learning impairment, 477 left property, 274 left value


border property, 280 clip property, 306 float property, 305

legal page, 77 legend attribute, 147 legend element, 185 legibility, 101 letter-spacing property, 273 li element, 147, 148, 149 LifeType blogging package, 449 lightboxes, 422 limited company (LTD), 108 <limittext> element, 388 line art, 319 line-height property, 271 line-through value, text-decoration

property, 274 lingual impairment, 477 link element, 182, 230, 252, 517 link psuedo class, 266 LinkRank measurement, 547 links, 119

exchanges, 550 limiting, 53 saturation, 553 skip links, 485

Links page, 77, 90 Linux server platform, 218 liquid layout style, 293 <listing> element, 388 list-item value, display property,

307lists

general discussion, 147–149 styling, 286–290

list-style property, 290 list-style-image property, 289 list-style-position property, 289 list-style-type property, 288 Litmus screenshot service, 373 LiveJournal blogging package, 449

load balancing, 216 Local Site window, FileZilla

application, 223 LocalRank ranking scheme, 548 location of audience, 74 login system, 582 Logontype drop-down menu,

FileZilla application, 223 logos, 68, 319

accessibility for the disabled, 481

building, 320–322 placement of, 500

lowercasing characters, 129 low-quality websites, 35 lt operator, 385 LTD (limited company), 108 lte operator, 385 ltr value

dir attribute, 169 direction property, 275

Lumi mobile layout engine, 361 Lynx text browser, 471

MM4A format, 332, 333 Mac server platform, 218 Magento shopping cart software,

580magnifiers, 470 MailChimp logo, 69 maintenance, scheduling, 400 Mambo content management

package, 448 Mango mobile layout engine, 361 manual backup system, 217 mapping services, 452 margins, 302, 303 mark element, 170 marketing, 558–572

advertising, 558–566 campaign to conversion,

561content delivery, 562–566 marketing ideas, 560–561 offline marketing, 558–559 overview, 558

Index

637

pay per click, 559–560 ideas for, 560–561 overview, 558 research for, 33–42 social networking, 566–572

e-mail, 566–567 measuring success, 571–572 networking, 568–569 overview, 566

markup languages, 123–125 <marquee> element, 388 max-width property, 294 MCF CSS framework, 419 media, 313–349

images, 318–329 building logos, 320–322 creating and editing photos,

319–320favicons and Apple icons,

326–327graphics languages in use,

327–329stock collections, 322–326

inspiration from, 26 multimedia, 329–343

audio and video formats, 331–334

languages in use, 330–331 on-demand streaming, 334–

336podcasting, 336–341 special effects, 341–343

online formats, 314–317 speed tweaks, 344–349

media attribute, 253, 254 .media top-level domain (TLD), 198 MediaWiki wiki package, 450 Members page, 78, 90 memory tool, for website mission

statement, 31 menu element, 190, 388 merchant services, 578–579 meta element, 180–181 metadata, role of, 537 metatags, 510–511, 537 meter element, 166 Mezzo Blue blog, 599 microformats, 509–514

draft, 513–514 metadata markup, 510 released, 512–513

microsites, 11–12 Microsoft Bing search engine, 532 Microsoft Expression Web editor,

131, 601 Microsoft FrontPage editor, 131,

368, 601 Microsoft homepage, 11 Microsoft Internet Explorer

browser. See Internet Explorer

Microsoft Notepad text editor, 131, 603, 604

Microsoft Office 2007 ribbon, 26 Microsoft OneNote application, 607 Microsoft Outlook email client, 608 Microsoft Silverlight, 330, 341, 458 Microsoft SQL Server database

format, 445 Microsoft Visio Professional

wireframing software, 610 Microsoft Word, 609 middle value, background-position

property, 278 millimeters (mm) measurement

unit, 248 mind maps, 46–48, 58 min-width property, 294 mirror sites, 12–13 misc folder, 134, 135 mission statement, 31–33 mm (millimeters) measurement

unit, 248 MNG format, 314 mobile browsing, 17 mobile devices, 310, 311 mobile layout engine, 361 MochiKit JavaScript framework,

435MODx content management

package, 448 MoinMoinWiki wiki package, 450 money-back guarantee, for

hosting, 216 monospace fonts, 270


638

MooTools JavaScript framework, 436

Mosaic browser, 352 motor impairment, 475 mouse, and accessibility, 471–472 MOV (Apple QuickTime) format,

332, 333 MovableType content management

package, 448 moz prefix, 387 Mozilla Documentation web design

site, 598 Mozilla Firefox browser. See

Firefox web browser Mozilla Thunderbird email client,

608MP3 format, 332, 333, 339 MP4 format, 332, 333 MPEG formats, 332, 333 MPG format, 332, 333 ms prefix, 387 <multicol> element, 388 multimedia, 329–343

audio and video formats, 331–334

elements related to area element, 159 embed, 156–157 img, 145–146 map, 159 noembed, 156–157 object, 156–157 param, 156–157

languages in use, 330–331 on-demand streaming, 334–336 podcasting basics, 336–341 special effects, 341–343

multiple domain, 221–222 MultipleIE's emulator, 371 The Music Bakery website, 326 myBB forum package, 451 MySQL database format, 445 myths, organic SEO, 536–538

Nnaked coding, 191 name attribute, 164, 180, 185

natural ingredients, organic SEO, 534–536

natural listings, 533 natural search rankings, 533 navigation

accessibility for disabled, 482 design patterns, 501 menu for, 174

navigation category, 175 Navigator web browser, Netscape,

125, 352, 353 negative review statements, 215 NeoSounds website, 325 nervous disorders, 478 Net Applications market research

site, 362, 363 .net domain extention, 200 Net Tuts+ website, 598 NetBanx merchant service, 579 NetFront mobile layout engine, 361 NetFront SDK emulator, 374 Netscape Navigator web browser,

125, 352, 353 networking, 568–569. See also

social networking News page, 78, 91 news sites, 13 newsletters, 566 niche sites, 14 <nobr> element, 388 NoChex merchant service, 579 noembed element, 156–157 noframes element, 190 Nokia Browser Simulator, 375 <nolayer> element, 388 none value

border-style property, 280 float property, 305

no-repeat value, background-repeat property, 278

normal value, font-style property, 272

<nosmartquotes> element, 388 note takers, 606–607 Notepad text editor, 131, 603, 604 Notepad++ code editor, 133 notfound.php file, 395 notices, 400–401

Index

639

nowrap value, white-space property, 273

OO prefix, 387 object element, 156–157 observations, 507 obtrusive scripting, 489 ODF format, 563, 565 Office 2007 ribbon, 26 offline marketing, 558–559 OGG format, 333 ol element, 147–149 on-demand streaming, 334–336 OneNote application, Microsoft,

607online business cards, 11 online identity, 22 online magazines (e-zines), 9 online privacy, 585–587 on-screen keyboards, 472 opacity, cross-browser, 388–390 opacity property, 389, 390 Open Clipart website, 324 OpenCart shopping cart software,

580OpenID, 583 OpenOffice Word, 609 OpenSearch specification, 522–524 OpenWave Emulator, 375 OpenWave mobile layout engine,

361Opera Dev website, 598 Opera Mini Demo emulator, 375 Opera Mobile emulator, 375 Opera web browser, 361, 370, 377 Opera Web Standards Curriculum

website, 598 operating system, of hosting

company, 218 ( ) operator, 385 optgroup element, 188 option element, 188 Oracle database format, 445 orange color, emotional state

associated with, 285 .org domain extention, 200

organic SEO, 530–538 gray hat techniques, 534 myths, 536–538 natural ingredients, 534–536 overview, 530 search engine results page

(SERP), 532, 533 spiders, 531–532

organic traffic, 530 orphan pages, 541 osCommerce shopping cart

software, 580 outline property, 281 outline-color property, 281 outline-style property, 281 outline-width property, 281 Outlook email client, Microsoft,

608outset value, border-style

property, 280 outside value, list-style-position

property, 289 overflow property, 306 overflow-x property, 306 overflow-y property, 306 OverLib JavaScript framework, 436 overline value, text-decoration

property, 274 Overview page, 91, 92

Pp element, 119, 120, 121, 123,

143–144packages

for scripting, 415–416 for server-side scripting, 446–

455blogging platforms, 448–449 content management

systems, 447–448 forum software, 450–451 online services, 452–454 server-side frameworks,

454–455wiki packages, 449–450

padding, 297, 302–303 PageRank (PR) index, 104, 547


640

Paint.NET image editor, 605 paragraph tag. See p element param element, 156–157 Pas 78 accessibility standard, 493 passwords, 187, 582 Pattern Tap gallery, 29 pay per click, 559–560 payment systems, 577–581

adding shopping carts, 580–581 choosing sales model, 577–578 merchant services, 578–579 overview, 577

PayPal merchant service, 578, 579 pay-per-click (PPC), 559 PayPoint merchant service, 579 PD Clipart website, 324 PDF format, 563 PDSounds website, 324 penalties, black hat SEO, 556–557 percentage (%) measurement unit,

249Perl language, 441 personal bias, in writing, 102 personal sites, 14 pharming, 554 phishing, 461 Phorum forum package, 451 photos, creating and editing, 319–

320Photos8 website, 324 Photos.com website, 325 Photoshop image editor, 605 PHP (PHP Hypertext Preprocessor),

440phpBB forum package, 451 PHP-Nuke content management

package, 448 picas (ps) measurement unit, 248 pink color, emotional state

associated with, 285 pipe (|) character, 262 piracy, avoiding, 582 pixel fonts, 270 pixelation, 316, 317 pixels (px) measurement unit, 249,

270plagiarism, 104

Plain Old Semantic HTML (POSH), 191

plain text editors, 603–604 plain text styling, 141 <plaintext> element, 388 PLC (public limited company), 108 plug and play, 457–458 plug-in dependence, 489 PNG format, 315, 317–318 podcasting, 336–341 points (pt) measurement unit, 249 political views of audience, 75 polls, 507 Pond5 website, 325 Pool domain auction site, 207 poor man's copyright, 107 pop-ups, 488 portals, 15–16 Portfolio page, 78, 92 portfolio sites, 16 portraits, 319 POSH (Plain Old Semantic HTML),

191POSH Vanilla Naked KISS (PVNK)

approach, 191–192 Position Is Everything website, 380,

382position property, 304 position value, list-style property,

290positioning, 304–309 POST value, method attribute, 185 PostgreSQL database format, 445 pound character (#), 260, 398 PPC (pay-per-click), 559 PR (PageRank) index, 104, 547 pre element, 170–171 pre value, white-space property,

273pre-line value, white-space

property, 273 premade scripts, 415, 416 PremiumBeat website, 325 Press page, 78, 93 press releases, 566 Presto desktop layout engine, 360 Presto mobile layout engine, 361

Index

641

pre-wrap value, white-space property, 273

price of hosting, 216 prices, declaring, 574 print at-rule, 257 print media type, 257 <priority> element, 543 Prism RIA framework, 458 privacy, online, 585–587 Privacy page, 78 privacy policies, 444 problems, 351–406

404 (section not found) errors, 392–406

error reporting, 399 .htaccess file, 393–398 maintaining support, 401–

404providing alerts and

notices, 400–401 scheduling downtime and

maintenance, 400 with accessibility, 488–491 debugging, 379–390

conditional comments, 383–386

double-margin float bug, 380–383

hacks and filters, 379–380 implementing cross-browser

opacity, 388–390 proprietary code, 386–388

discovering, 367–378 browser emulators, 369–375 by feedback from visitors,

367–368W3C validators, 368–369

preventing, 390–392 degrading gracefully, 391 ensuring backward

compatibility, 390 future proofing, 391–392 staying on bleeding edge,

392using progressive

enhancement, 391

with web browers' implementation of standards, 351–366

browser wars and, 352–362 dropping support, 365 IE's hasLayout property,

365–366and market shares, 363–364 playing blame game, 362–

366progress element, 166 progressive disclosure, 503–504 Project Draw, 456 projection media type, 257 Projects page, 78, 94 properties and values, 266–290

backgrounds, 276–282 borders, 276–282 colors, 276–286 fonts and text, 267–276 tables and lists, 286–290

proprietary code, 386–388 Prototype JavaScript framework,

436ps (picas) measurement unit, 248 pseudo classes, 243, 265–266 pseudo elements, 243 pt (points) measurement unit, 249 public limited company (PLC), 108 PunchStock website, 325 purchasing domain names, 207–209 purple color, emotional state

associated with, 286 PVNK (POSH Vanilla Naked KISS)

approach, 191–192 px (pixels) measurement unit, 249,

270Pylons server-side frameworks, 455 Python, 441

Qq element, 155–156 qooxdoo JavaScript framework,

436Quantcast ranking scheme, 549 quantitative research, 506 questionnaires, 507


642

Quirks mode filter, 137, 437 QuirksMode website, 380 quizzes, 507 quote marks, 121

RRA format, 333 RadiantCMS content management

package, 448 rainbow of typography, 269 rankings, 547–549 RapidSSL certificate provider, 584 RDF files, 135 readability, 100, 498 Real Player (RA, RM, and RV)

formats, 333 Really Simple Syndication (RSS),

516red color, emotional state

associated with, 286 red, green, blue (RGB) hex colors,

246red, green, blue (RGB) notation,

247red, green, blue (RGB) values, 245 red green blue alpha (RGBA) color

model, 247 redirects, 320 reduction rule, 101 reductionism, in writing, 101 reference websites, 452 Refinery content management

package, 448 registering copyrighted works, 107 registrant record, 205 registrar accreditation, by ICANN,

209registration, tricking users into,

504rel (relation) attribute, 253, 514 relative linking, 397 relative value, position property,

304religion of audience, 75 Remote Site window, FileZilla

application, 223

repeat value, background-repeat property, 278

repeat-x value, background-repeat property, 278

repeat-y value, background-repeat property, 278

reporting errors, 399 Request-rate statement, 545 reset input type, 187 resources page, 78, 94 restricting, 557 resume (curriculum vitae), 16 Resume page, 78, 95 retailmenot.com site, 225 Rev attribute, 514 review sites, 17 RevoStock website, 325 RGB (red, green, blue) hex colors,

246RGB (red, green, blue) notation,

247RGB (red, green, blue) values, 245 RGBA (Red Green Blue Alpha) color

model, 247 RIA (rich Internet application)

frameworks, 417, 455, 457, 458–459

Rich In Style website, 380 rich Internet application (RIA)

frameworks, 417, 455, 457, 458–459

rich media, 68–69 Rich Site Summary (RSS) feed, 134 Rico JavaScript framework, 436 ridge value, border-style property,

280right property, 274 right value


border property, 280 clip property, 306 float property, 305

rival websites, 38 RM format, 333 robots, 531 Robots format, 514 robots.txt file, 544–545

Index

643

Robot-version statement, 545 Role attribute, 514 root directory, 133 row value, scope attribute, 151 rows attribute, 187 rowspan attribute, 152 Royalty Free Music website, 325 RSS (Really Simple Syndication),

134, 516 RSS feeds, 517–522 rtl value

dir attribute, 169 direction property, 275

Ruby language, 441 Ruby On Rails server-side

frameworks, 455 rule-sets, 233 run-in value, display property, 307 RV format, 333

S<s> element, 388 S5 CSS framework, 419 SaaS (software as a service), 456 sale security, 582–585 sales model, choosing, 577–578 sampand element, 170–171 Samurai accessibility standard,

494–495Samurai errata documentation, 495 sandboxing, 556 sans-serif font type, 267, 269 Scalable Inman Flash Replacement

(sIFR), 270 Scalable Vector Graphics (SVG),

328, 329 SciTE plain text editor, 604 scope attribute, 151 screen media type, 257 Screen Reader software, 146 screen readers, 469 screens

on mobile devices, 310, 311 space on, 503

screenshots, 319, 373 script header element, 182

script.aculo.us JavaScript framework, 436

scripting, 408–420 applications and packages for,

415–416client-side, 420–438

AJAX, 425–427 bookmarklets, 436–437 DOM, 424–425 JavaScript, 423–424, 435–

436languages in use, 421–423 script creation process, 427–

435vs. server-side, 411–414

code snippets, 419–420 and data storage, 414 deciding whether to use, 410–

411frameworks for, 417–419 languages for, 408, 409, 410 overview, 408–410 server-side, 438–464

and cloud computing, 455–459

databases in use, 444–445 importance of storage, 443–

444languages in use, 439–442 packages for, 446–455 security issues, 459–464

scripts folder, 134 scroll value

background-attachmentproperty, 278

overflow property, 306 scrolling, 501, 502, 503 search capability, 502 search engine marketing (SEM),

559search engine optimization (SEO)

black hat, 552–557 overview, 552–553 penalties, 556–557 techniques to avoid, 553–

555organic, 530–538

gray hat techniques, 534


644

myths, 536–538 natural ingredients, 534–536 overview, 530 search engine results page

(SERP), 532–533 spiders, 531–532

white hat, 538–552 creating sitemaps, 541–543 keyword research, 539–541 link building, 549–552 overview, 538–539 rankings, 547–549 robots.txt, 544–545 search engine submission,

546search engine results page (SERP),

532–533search engines. See also search

engine optimization accessibility, 479 and images, 68 submitting to, 546

Section 508 accessibility standard, 493

Section elements, HTML version 5, 176

section not found errors. See 404 (section not found) errors

sections, separating, 174–175 security, 582–587

online privacy, 585–587 overview, 582 sale security, 582–585 server-side scripting, 459–464

SEDO domain auction site, 207, 208 seizures, 475 select element, 187, 188 selectors, 259–266

JavaScript, 434 overview, 234 targeting with combinators,

263–266self tested reviews, 17 self-analysis, 2, 4 selling your services, 572–587

knowing what to offer, 573 overview, 572–573 payment systems, 577–581

adding shopping carts, 580–581

choosing sales model, 577–578

merchant services, 578–579 overview, 577

rules, 574–577 security, 582–587

online privacy, 585–587 overview, 582 sale security, 582–585

SEM (search engine marketing), 559

semantics, 128–130 SEO. See search engine

optimizationseparating sections, 174–175 serif font type, 267, 269 SERP (search engine results page),

532–533<server> element, 388 servers, web, 209–212 server-side language-specific

frameworks, 417 server-side scripting, 438–464

versus client-side, 411–414 and cloud computing, 455–459

plug and play, 457–458 RIA frameworks, 458–459

and data storage, 414–415, 443–444

and databases, 444–445 defined, 410 incoporation into browser, 412 languages in use, 439–442 packages for, 446–455

blogging platforms, 448–449 content management

systems, 447–448 forum software, 450–451 online services, 452–454 server-side frameworks,

454–455wiki packages, 449–450

security issues, 459–464 services page, 78, 96 <shadow> element, 388 shape attribute, 159

Index

645

shared hosting, 210, 211, 213 shared-hosting, 213 ShareThis website, 569 shopping carts, 580–581 show value, empty-cells property,

287Shutterstock website, 325 sibling selectors, 264 sidebar component, 56 <sidebar> element, 388 sIFR (Scalable Inman Flash

Replacement), 270 Silverlight, 330, 341, 458 Silverstripe content management

package, 448 Site Manager window, FileZilla

application, 222, 223 SiteInspire gallery, 29 Sitemap statement, 545 sitemaps, 58, 541–543 SitePoint, 617 SitePoint Podcast website, 599 SitePoint Reference website, 599 size attribute, 187 skip links, 482, 485 SkyFire mobile layout engine, 361 Slashdot effect, 568 SlickMap CSS tool, 542 slideshow effect, 391 small element, 166–168 SmartDraw wireframing software,

610SmartFTP software, 606 Smashing Magazine, 28, 29, 598 SMF forum package, 451 SnapNames domain auction site,

207snippets of code, 419–420 Snook blog, 599 Snook, Jonathan, 8 social bookmarking websites, 551 social networking, 529, 566–572

e-mail, 566–567 measuring success of, 571–572 networking, 568–569 overview, 566 visitor feedback through, 402

social views of audience, 74

software, 604–615 audio editors, 615 backup utilities, 612 color pickers, 613 e-mail programs, 607–608 file archivers, 611 Flash developers, 614 FTP clients, 606 image editors, 605 inspiration from design of, 26 note takers, 606–607 wireframe modeling, 609–610 word processors, 608

software as a service (SaaS), 456 solid value, border-style property,

280Sony SoundForge audio editor, 615 <sound> element, 388 SoundForge audio editor, Sony, 615 source code

editors for, 602 viewing, 117, 118, 230

source element, 158 source websites, 38 <spacer> element, 388 spam, 83, 554 span attribute, 153 span element, 129, 162–163, 166,

175, 191 special effects, 319, 341–343 specificity, 242–244 speech impairment, 475 speech media type, 257 speech recognition, 472 spelling, 99 spiders, 531–532 splitting data into multiple pages,

501sponsored results, 533 Spoon Sandbox emulator, 371 sprites, 320, 346 Spry JavaScript framework, 436 SQL (Structured Query Language),

219, 444 SQL injection, 461 SQL Server database format, 445 square brackets [ ], 262 src attribute, 122, 145, 277


646

SSL certificates, 221, 584 stacks, font, 267, 268, 269 standards, 125–130 static value, position property, 304 statistics, provided by hosting

company, 219–220 status pages, 400, 401 stealth redirects, 555 stock collections, 322–326 stock photography, 323 StockMusic website, 326 Stock.xchng website, 325 StockXpert website, 325 streaming, 334–336 strict compliance, 137 <strike> element, 388 strong element, 166–168, 272 structure

and accessibility, 481–483 elements affecting, 175–176

address, 160 blockquote, 155–156 br, 144 cite, 155–156 hr, 158 p, 143–144 q, 155–156

in writing, 100 Structured Query Language (SQL),

219, 444 Struts2 server-side frameworks,

455StumbleUpon, 27, 551 style attribute, 229 style element, 230, 231 style folder, 134 style header element, 182 style.css file, 250 stylesheet value, 253 stylesheets. See CSS sub element, 168–169 subdomains, 196–197, 221–222 submit input type, 186 subscriber page, 78, 96 sup element, 168–169 SuperPreview emulator, 371 support

forums, 402

from hosting company, 217 maintaining, 401–404

Support page, 78, 97 surveys, 507 SVG (Scalable Vector Graphics),

328, 329 SWiSHMax flash production tool,

614SWReg merchant service, 579 symbolic fonts, 270 Symphony server-side frameworks,

455syndication, 514–522 syntax editor, 600 syntax languages, examples of, 218 system colors, 245, 246

Ttable-layout property, 286 tables, 149–155, 286–290 tactile devices, 470 tags, 73, 118–123 takedown notice, DMCA, 111 Target lawsuit, 496 targeted sites, 17–20 Tasman desktop layout engine, 360 TB (terabytes), 218 tbody element, 151 td element, 150 technical jargon, limiting, 102 technical record, 205 .tel extension, 12 telephone support, 403 teletype, 168 terabytes (TB), 218 testing usability, 505 text, 66–67

and accessibility, 483–485 styling, 267–276

text browsers, 471 text input type, 187 text-align property, 274 textarea element, 187 text/css value, 253 text-decoration property, 274 TextEdit, Apple, 131, 604 text-indent property, 275, 289

Index

647

TextPattern blogging package, 449 text-shadow property, 274 text-transform property, 275 textual logos, 320, 321 tfoot element, 151 th element, 150, 151 Thawte ranking scheme, 584 thead element, 151 theft of intellectual property, 110–

112Think Vitamin online magazine,

598thinking theory exercise, 5 Thought Equity Motion website,

326three-click rule, 503 Thunderbird email client, Mozilla,

608TIFF WBMP format, 314 TikiWiki wiki package, 450 time element, HTML version 5, 170 Time Machine backup utility, 612 Titanium RIA framework, 458 title attribute, 146, 147, 164, 165,

253title element, 179, 181, 510, 517,

520title tags, 500 Tizag website, 459, 599 .TK domain, 206 TLDs (top-level domains), 198–199 tools, 599–600 tooltips, 146 Top 10 Web Hosting site, 214 top value


border property, 280 caption-side property, 287 clip property, 306

top-level domains (TLDs), 198–199 tr element, 150 tracking, 273 trade-registry numbers, 108 traffic, website, 538. See also

search engine optimization

training slash character (/), 396

transitional compliance, 137 transparent value, background

property, 277 tree-based mind map, 46 Trident desktop layout engine, 360 Tripoli CSS framework, 419 true operator, 385 tt element, 166–168 TTY media type, 257 TugZip archiving tool, 611 Tumbar blogging package, 449 TurboChef website, 483 TurboGears server-side

frameworks, 455 Tutorial Blog, 599 TV media type, 258 Twiki wiki package, 450 Twitter, 570 Twitterpated, 568 type attribute, 185, 231 type of website, deciding on, 1–24

blog, 7 commercial site, 7–8 community site, 8–9 content site, 9 corporate site, 9–10 creative process, 2–6 forming identity, 21–24

avoid confusion, 22 brand identity, 24 brand name, 22–24

intranet site, 10 microsites, 11–12 mirror site, 12–13 news site, 13 niche site, 14 personal site, 14 portal, 15–16 portfolio site, 16 review site, 17 targeted site, 17–20

type value, list-style property, 290 TypePad blogging package, 449 typography, rainbow of, 269 TYPOlight content management

package, 448


648

Uu element, 388 UCD (user-centered design), 505 UDRP (Uniform domain name

dispute resolution policy), 204

ul element, 119, 147–149 UltraEdit text editor, 603 underline value, text-decoration

property, 274 Unicode character set, 181 Uniform domain name dispute

resolution policy (UDRP), 204

Uniform Resource Locator (URL), 201, 202, 452

United States (US) copyright office, 112

universal selector, 261 UNIX server platform, 218 unlisting, 557 Unmatched Style gallery, 29 unobtrusive scripting, 423 uptime, 216–217 Urchin analytics package, 509 URL (Uniform Resource Locator),

201, 202, 452 url value, list-style property, 290 US (United States) copyright office,

112usability, 498–509

versus accessibility, 466 checklists, 507 confirmation of actions, 504 connection speed, 504–505 design theory, 499–502 overview, 498 progressive disclosure, 503–504 screen real estate, 503 testing, 505 three-click rule, 503 User-Centered Design (UCD),

505Use It online magazine, 598 UseBB forum package, 451 usemap attribute, 159 user testing sessions, 367, 368

user-centered design (UCD), 505 user-submitted content, 114 UX Matters online magazine, 598

Vvalidators, W3C, 368–369 Validome code validation service,

369Value Added Tax (VAT), 108 value attribute, 185 values. See properties and values Vandelay Design web design site,

598vanilla concept, 191 Vanilla forum package, 451 var element, 170–171 var name reference, 432 VAT (Value Added Tax), 108 VBScript (Visual Basic Script), 422 vBulletin forum package, 451 VCDs (Virtual CDs), 373 vector graphics, 323 Vector Markup Language (VML),

328VeriSign, 584 vertical-align property, 275 video element, 158 video footage, stock collections of,

323video formats, 314, 331–334 video on demand, 334 video-sharing services, 336, 452 View menu, 117 View source option, 117, 118, 230 Vim plain text editor, 604 viral marketing, 548 viral social media, 568 Virtual CDs (VCDs), 373 virtual hosting, 211 virtual printers, 565 virtual private servers (VPS), 211 Virtual Reality Modeling Language

(VRML), 328 virtualization, 372 visibility, 304–309 visibility property, 307 visible value

Index

649

overflow property, 306 visibility property, 307

Visio Professional wireframing software, 610

visitors, feedback from about usability, 505–506 discovering problems by, 367–

368Visit-time statement, 545 Visual Basic Script (VBScript), 422 visual hierarchy, 502 visual impairments, 475 visually impaired users, 469 VML (Vector Markup Language),

328VoIP (Voice over IP), 337, 403 VoteLinks format, 513 Vox blogging package, 449 VPS (virtual private servers), 211 VRML (Virtual Reality Modeling

Language), 328

WW3C (World Wide Web

Consortium), 126, 127, 241

W3C spell checker, 498 W3C validators, 368–369 W3Schools website, 459, 599 WAI (Web Accessibility Initiative),

492WAI-ARIA accessibility standard,

495WaSP (Web Standards Project),

126, 356, 485 WAV format, 333 <wbr> element, 388 WCAG (Web Content Accessibility

Guidelines), 492, 494 weather services, 452 Web 2.0 Show podcast, 599 Web Accessibility Initiative (WAI),

492web accessible flicker tester, 498 Web Axe podcast, 599 web browsers. See browsers

Web Content Accessibility Guidelines (WCAG), 492, 494

Web Crème gallery, 29 Web Design From Scratch website,

598Web design galleries, inspiration

from, 28–29 Web Designer Deport online

magazine, 598 Web Designer Mag podcast, 599 Web Designer Wall online

magazine, 598 Web Dev Out website, 599 Web Dev Radio podcast, 599 Web Developer Options, 617 web hosting. See hosting Web Hosting Geeks site, 214 Web Hosting Guide site, 214 Web Hosting Jury site, 214 Web Hosting Reviews site, 214 Web Hosting Show podcast, 599 Web Monkey web design site, 598 Web Programming website, 459 Web Reference website, 459 Web Resources Deport web design

site, 598 web servers, 209–212 Web Standards Project (WaSP),

126, 356, 485 web usability. See usability Web2Py server-side frameworks,

455WebAim web design site, 598 WebCredible web design site, 598 WebDevOut website, 380 Webkit desktop layout engine, 360 Webkit mobile layout engine, 361 webkit prefix, 387 WebObjects server-side

frameworks, 455 website addresses, 196–199

domain extensions, 197–198 domains and subdomains, 196–

197future of top-level domains

(TLDs), 198–199 website editors, 600–604


650

IDE, 602 plain text editors, 603–604 source code editors, 602 WYSIWYG editors, 600–602

websitescommandments for, 591–596

crawl before walking, 594 efficient manager, 595 follow specifications, 592 interact with customers,

594–595know subject well, 594 pragmatic approach, 593 realistic goals and

intentions, 592–593 think of end users' needs,

592think outside box, 593–594 updating website, 595–596

testing speed of, 498 useful, 597–599

What You See Is What You Get (WYSIWYG) editors, 131, 132, 600–602

white color, emotional state associated with, 286

white hat SEO, 538–552 creating sitemaps, 541–543 keyword research, 539–541 link building, 549–552 overview, 538–539 rankings, 547–549 robots.txt file, 544–545 search engine submission, 546

whitespace, 347 white-space property, 273 WHOIS records, 205–206 Wickline color blindness filter, 498 width property, 301 wiki packages, 449–450 Wikipedia, 9

headings, 486 information design page, 73

WikiRank ranking scheme, 548 Windows Live Spaces blogging

package, 449

Windows Media Player (AVI, WAV, WMA, and WMV) formats, 333

Windows Mobile emulator, 375 Windows server platform, 218 Windows Virtual PC, 372, 373 Windows-Eyes screen reader, 469 WinRAR archiving tool, 611 WinZip archiving tool, 575, 611 wireframe modeling, 59, 609–610 WMA format, 333 WMV format, 333 word association technique, 37 Word, Microsoft, 609 word processors, 608 WordPress blogging package, 416,

449word-spacing property, 273 World Wide Web Consortium

(W3C), 126, 127, 241 WorldPay merchant service, 579 WP Clipart website, 324 writers block, 114 writing content, 75–112

chunking, 100–101 common pages, 76–78 complexity, 102 conclusion, 104 content examples, 79–97 context, 103 emotion, 102 empathy, 102 fluff posting, 101 free will, 103 grammar, 99–100 intellectual property issues,

106–112iteration, 101–102 language, 103 layout, 100 legibility, 101 personal bias, 102 plagiarism, 104 readability, 100 reductionism, 101 scanning, 103 spelling, 99 structure, 100

Index

651

wasting time, 101 WYSIWYG (What You See Is What

You Get) editors, 131, 132, 600–602

XX3D modeling language, 328 XAML (Extensible Application

Markup Language), 329 XAMPP web server, 210 XBM format, 314 X-Cart shopping cart software, 580 XFN format, 513 XFolk format, 514 XHTML (Extensible Hypertext

Markup Language), 124 XIPH (FLAC, Theora, and Vorbis)

formats, 333 XMDP format, 513 XMIND product, 48 XML (Extensible Markup Language),

124XMLHttpRequest, 426 XOXO format, 513 XPS format, 563 XSL (Extensible Stylesheet

Language), 228 XSS (cross-site scripting), 460 XViD format, 332, 333

YYaBB forum package, 451 Yahoo!, 532, 546 Yahoo Grids CSS framework, 419 Yahoo! Small Business merchant

service, 579 Yahoo UI Library (YUI) JavaScript

framework, 436 YAML CSS framework, 419 yellow color, emotional state

associated with, 286 YII server-side frameworks, 455 YouTube, 69, 70, 335, 340 YUI (Yahoo UI Library) JavaScript

framework, 436

ZZenCart shopping cart software,

580, 581 Zend DevZone website, 459 Zend server-side frameworks, 455 ZeusCart, 581 z-index property, 305 zoom property, 379, 623

The Ten Commandments for Websites3A978-1-4302...Appendix A: The Ten Commandments for Websites 595...

Documents

Transcript of The Ten Commandments for Websites3A978-1-4302...Appendix A: The Ten Commandments for Websites 595...