Strengthen Viewability
Regardless of the visitor demographics and client's preferred color palette, there are a few style basics that enhance ease of use.
• Contrast: The contrast on a web page is the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background. In web design, good contrast means that the weight and color of text and hyperlinks stands out easily from the background color of the page, for instance.
• Size: The size of objects (text blocks, images, thumbnails, navigation buttons,
etc.) is important in helping a website be easy to use. Images that require scrolling to see, or big blocks of unbroken text, can make a page look crowded or over- whelming. Items that are too small can create too much white space and make it hard to discern the main point.
• Colors: Colors are important in two ways. The correct use of color combinations and contrast can really help a website be easy to digest, while poor color choices with bad contrast make it impossible. For instance, red text on a yellow back- ground, or blue links on a black background, are very hard to see. Plus, colors can also trigger moods and associations in visitors. If your target audience is young, bright colors and lots of black appeal, while a senior audience benefits from conservative and generally muted but good contrast colors. If the website is meant to appeal to an international audience, knowing which colors are truly taboo to different cultures can help you make the site appealing rather than a turn-off.
Layout Size and Resolution
With so many different configurations that visitors have their computers set up with, it can be difficult to decide how a website should be sized so that it is attractive and view- able as much as possible. Here are a few tips:
• Design to have your page elements be very visible and tidy between 800×600 and 1280×1024, since this range captures the majority of current laptop screens and desktop monitor resolutions.
• The norm is to optimize for 1024x768 screen resolutions. For most sites this will cover most visitors since the average low-price monitor or laptop screen has this as a default resolution.
• Keep in mind that the real width of a 1024x768 screen is about 960 pixels. If you design with fixed widths, consider 900, 925, 950, and even 980 pixels in width. Don't design wider, because visitors don't usually scroll to the side and find it uncomfortable.
• Whenever possible, don't design for one size only, since browser window sizes vary depending on the monitor's resolution. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.
• Do not design solely for a specific monitor size because screen sizes also vary among visitors. Window size variability is even greater, since visitors don't always maximize their browsers or their screens. Some have large screens, some have wide screens, some have standard width, etc.
• Use flexible layouts when feasible, which will adjust when the browser window is resized.
• Keep in mind that mobile devices are special. If you get lots of traffic from iPhones and other mobile/small devices, you will need to need to give them special treatment by using a different set of styles for those devices.
• The website height is usually not very important, in terms of resolution. The visitor will often scroll up and down. Just don't design so that web pages have to have more than five or six scroll-downs, because that becomes unwieldy.
The three main criteria in optimizing a page layout for screen size are:
• Initial visibility: Is all key information visible above the fold so visitors can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item vs. the font sizes chosen.
• Readability: How easy is it to read the text in various columns, given their al- located width?
• Aesthetics: How good does your page look when the elements are at the proper size and location for the screen size? Do all the elements line up correctly? Do things appear to move out of alignment when the browser window is resized more than 20%?
Planning for Web Browsers
Your website should keep its layout regardless of what browsers the visitor uses. Despite this, different browsers can display web pages with slight changes, and older versions of these browsers experience more viewability issues. As a result, when doing your main coding, focus mainly on Fire fox or IE, whichever your client feels is mostly in use by his/ her average visitor. Test with all of them, but choose one to work out your main code and styles first.
As of 2010, the general consensus (Wikipedia, etc.) is that the following browsers are most in use:
• Fire fox: 46%
• Internet Explorer: 31%
• Chrome:17%
• Safari: 3-4%
• Opera/Other: 2%
Search Engine Optimization (SEO)
The purpose of Search Engine Optimization (SEO) is to make a website as search engine friendly as possible. This is so that it can be found when searched for and whenever possible have high rankings in search engines like Google. Search engines collect data about a website by sending an electronic spider to visit the site and copy its content, which is then stored in the search engine's database for future reference.
Spiders (also known as ‘bots' ) start reading in the top left hand corner of a site, and will read content line by line from left to right. If columns are used spiders will follow the left hand column to the end, then move to the remaining columns. If a spider encounters a
link it can follow, it records the link and sends another bot to copy/record data found on the linked document. The spider will proceed through the original website until it records everything it finds.
SEO makes it easier for the bots to get around so the search engine's database fills accurately. You should:
• Have an SEO sitemap. Create and link to an XML text-based sitemap page in your footer that lists your main pages and/or main website topics, with links to the pages/anchors where they are. (Note, this is different than a design sitemap or a visitor sitemap.)
• Use mini-link lists on web pages that have more than three text subjects. This helps visitors jump to the section on the page, and also adds the keyword again for the spider.
• Limit access to your website with a robots.txt file in order to keep the robots from searching every external link.
• Choose a good website URL domain name. Make a site's domain name as relevant to the site's purpose/uniqueness as possible: http://www.studiobast.com – studiobast is the company name.
• Create an effective title tag in your code's head section. This title shows in the tab of the website browser window and is picked up by search engines. Example: Welcome to Studio|Bast – Integrated Visual Communications in Seattle.
• Add unique/specific keywords in the keywords tag in your code's head section. Focus on niche keywords related to a product, service, or unique promotion of the site's contents, rather than many general ones. Also, use keywords that people actually use when performing searches on the subject your website targets. Add common misspellings that people might type in, your name, and even names of product distributors or other websites you are part of.
• Craft an elevator-speech style description meta tag in your code's head section.
This uses two or three complete sentences with the strongest keyword phrases woven into each sentence. It is also the summary that a potential visitor sees on a search engine results page under your website's title.
• Have good, clear text content throughout the website. Search engine spiders read basic body text 100% of the time. A solid SEO guideline is if you need to more than one topic on a page, you need more pages. More pages are actually less con- fusing to spiders.
• Use bold and italics judiciously for keyword emphasis. Don't bold or italicize every keyword all the time, but you can, in image captions, in subheadings, and in the occasional important reference, emphasize the keyword so the spider records its importance.
• Have back links. Back links are websites that link directly to your website. Per Google, the more back links you have, the higher your pages will be ranked. This means that if you or your client have relationships with peers, suppliers, reviewers, and customers, asking them to link to your website can legitimately add those back-links.
• Include alt and title text in tags. Always use title and alt text as needed for your images and links. This is important for accessibility and also allow you to repeat useful keywords that relate to the item being alt-tagged.
• Share resource links. If your website message really can benefit from sharing re- source links with the visitor, you can add a few of these, and use keywords as you used subheadings to separate link types.
Badly used SEO can alienate search engines and get you kicked out of the indexing data- bases. You should not:
• Use too many/non-relevant back links. Back links are good if they are from web- sites that are related to yours, such as Linked In and Monster links to your resume site. They are not useful or good if they are on irrelevant sites that list links for no reason.
• Engage in link farming. Exchanging reciprocal links with websites (particularly unrelated websites) solely to increase search engine optimization is considered spamming.
• Use irrelevant keywords. Using keywords words totally unrelated to the site's content and purpose just to get rankings is disreputable and can lead to bans. These would include keywords like sex, porn, booze, party time, free, and other attention grabbers that are not at all part of the purpose, message, and target audience needs of your website.
• Hide links and keywords. Trying to over stimulate spiders with hidden keywords in the body of your website (like words that are the same color as the background or hidden in comment batches) is a bad idea. So bad that search engines can (and do) ban your site.
• Create duplicate pages. These are seen as spamming by search engines and also call for banning.
• Use poor or non-descriptive link anchor text. Anchor text or text link tells the search engines what the linked site is about. ‘Click Here' doesn't mean anything to a spider. ‘Visit Studiobast's new design templates page' does.
• Ignore best practices. An example of good practice: put keywords in alt tags, page file names, headlines, title tags and link anchor text.
Accessibility
Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. Accessibility focuses not only on people with disabilities, but on any- one who may experience difficulty in reading or navigating a website. For example, users with a very old computer system, a visually impaired user, or someone with a broken arm who can't use a mouse should be considered. When sites are correctly designed, developed and edited, all visitors can have equal access to information and functionality.
The needs that Web accessibility aims to address include:
• Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, and various types of color blindness.
• Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's Disease, muscular dystrophy, cerebral palsy, or stroke.
• Auditory: Deafness or hearing impairments, including individuals who are hard of hearing.
• Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.
• Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental “maturity,” problem-solving and logic skills, etc.
Therefore, keep these tips in mind when designing for accessibility:
• A site should be coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully. This helps blind visitors using text-to-speech software and/or text-to-Braille hardware.
• When text and images are large and/or enlargeable, visitors with poor sight can more easily read and understand the content.
• When links are underlined (or otherwise differentiated) as well as colored, this ensures that color blind visitors will be able to notice them.
• Clickable links and large link areas help visitors who cannot control a mouse with precision.
• Visitors who cannot use a mouse or a standard keyboard benefit when pages are coded so they can navigate by means of the keyboard alone, or with a single switch access device alone.
• When videos are closed captioned or a sign language version is available, deaf and hard of hearing visitors can understand the video.
• Avoid flashing effects so that visitors prone to seizures caused by these effects are not at risk.
• When content is written in plain language and illustrated with instructional diagrams and animations, visitors with dyslexia and learning difficulties can better able to understand the content.
• When sites are correctly built and maintained, all of these visitors can be accommodated while not impacting on the usability of the site for non-disabled visitors.
Legal Content Use
Where you get the website content is as important in producing a website as making it look good. If the client does not provide you with specific content and you do not create and sell rights to it yourself, you will likely purchase images and other items from various sources. You need to protect yourself, as well as your client, by using content sources right.
Intellectual Property
Owners/creators have legal property rights over creations of the mind, both artistic and commercial. Under intellectual property law, owners are granted certain exclusive rights to intangible assets such as musical, literary, and artistic works; ideas, discoveries and inventions; and words, phrases, symbols, and designs. Know where your content and images come from, and be sure you/the client has the contracted rights to use this content.
Copyright
Copyright is a set of exclusive rights granted to the author or creator of an original work, including the right to copy, distribute and adapt the work. Copyright does not protect ideas, only their expression or fixation. In most jurisdictions copyright arises upon fixation and does not need to be registered. Copyright owners have the exclusive statutory right to exercise control over copying and other exploitation of the works for a specific period of time, after which the work is said to enter the public domain. Uses which are covered under limitations and exceptions to copyright, such as fair use, do not require permission from the copyright owner. All other uses require permission and copyright owners can license or permanently transfer or assign their exclusive rights to others.
Public Domain
The public domain is a range of abstract materials, commonly referred to as intellectual property, which are not owned or controlled by anyone. These materials are therefore considered “public property”, and available for anyone to use for any purpose. A work may be in the public domain if no laws establish proprietary rights over the work, or if the work or its subject matter are specifically excluded from existing laws.
Licensing
Licensing means you purchase the right to use an image, text, pdf, etc. under terms set out in a license. The rights are set out in the license, which is a legally binding agreement between the buyer and the seller.
Royalty-Free
Royalty-free means that you pay once for an image that can be used (but not passed on to anyone else) for multiple purposes over an unlimited period of time. You still need to be careful how you use it. For example, if the image features recognizable people and you know of no model release, then do not use the image for promotional purposes.
Traditional Usage License
Rights-managed images are sold with the fee based on your specified use. This fee is calculated based on size/amount, placement, duration of use and even geographic distribution.
Reserved Rights
This includes terms restricting the photographer or writer from selling the item for a specified period in a specified location(s). This gives the buyer exclusive use.
Model Contracts
If you/the client determine that images need to be created for the Web project, they will likely be based on photography set up for the project. You might even be asked (and paid) to handle the photography yourself. Keep in mind that:
• You/the client should always get a signed and dated release from any models you take photos of.
• Taking random shots of individuals without their express signed consent is a no- no. Same goes for group shots where people can be recognized. Consider this – if one of those individuals is in witness protection, or in hiding from an abusive family member, and you publish a picture that could “out” them? Don’t do it.
• Images of children and disabled individuals are particularly sensitive, Even if you get a signed release, aim to get neutral images in reference to the location of the individuals. Why? Unfortunately, there are predators out there who fixate on children and less-than-able folks, and if they can suss out the location of the image, they have a bead on where to start looking. Be safe.
The long and short of content use is that you always need to know where it comes from, and that you/the client have legal rights to use it.
Open Source Content
Sites such as Wikipedia and Wiktionary have embraced the open-content GFDL and Creative Commons content licenses. These licenses were designed to adhere to principles similar to various open-source software development licenses. Many of these licenses ensure that content remains free for reuse, that source documents are made readily avail- able to interested parties, and that changes to content are accepted easily back into the system. In a sense, open source is treated like public domain work.
Keep in mind that open source licensing does come in several formats, and be sure which you understand the terms of any you might use. Some open source is free to use but not sell. Some is free and freely distributable. Some may be modified, edited, and used for educational, or commercial, or personal use.
Quick Look
Open Source and Copyright
Web Authoring Boot Camp uses some information from completely open source con- tent, like Wikipedia and Wikiversity, to enhance the author's (my) experience and con- tent. Wikipedia and similar sources are considered completely open source, especially since most of the information is provided by visitors.
Meanwhile, this published book is also licensed under Creative Commons for editing, modification, and use for education purposes as long as the author is acknowledged. I, as the author, have the copyright on it simply because I completed and fixed this content and can register the copyright formally if I choose.
The copyright on any website belongs to the client, not the designer. The web author should be able to take screenshots for his/her portfolio, retain core design code structure for generic reuse, and take design/production credit, but the client owns the content and everything proprietary. If the web author leases or sells an image that is used on such a site, the web author owns the image, which is licensed by the client, who overall has the website copyright. Fun, yes?