These are study notes taken from the pdf textbook 'Web Style Guide' 3rd edition.
The Site Development Team
A site development team can be made up of the following people:
- Project Stakeholder or Sponsor (the client)
- Web Project Manager - account executive and Quality Assurance tester (primary contact between web team and sponsor)
- Usability Lead (shapes the overall user experience)
- Information Architect (design and planning of wireframes)
- Art Director - Web Graphic Designer, Interactive Designer and Media Specialist (overall look and feel of the website including typography, visual interface, colour palette, page layout)
- Web Technology Lead - Webpage Engineer, Web Application Programmer, Database Administrator, Web Systems Expert or Webmaster (must have a broad grasp of web publishing environments)
- Site Production Lead - HTML Page Coder (converts initial web site page mockups, designs and wireframes into HTML pages. In larger organisations this person usually manages a staff of web designers who fill pages with content
- Site Editor - Site Copywriter and Content Domain Expert (overall responsibility for written content and editorial quality of the finished site. This role is long-term and extends into ongoing web publication that maintains a site after launch, keeping the page looking fresh and relevant).
Wireframes are a rough diagram of the pages of a website and how they link together.
Sidebar: Web Teams
- The more information you gather from the stakeholders and potential users, the better your planning and design will be
- Get broad input early on, make the best site design and project plan possible, and then focus the team on implementing the plan
- The people who visit and use the site will determine your project's success - however they are not present during the planning stage
- Involve real users, listen and respond to what they say, test your designs with a broad spectrum of users of different ages, abilities and interests. It is important to identity your audience
- Building a website is an ongoing process, not a onetime project with static content. Long-term editorial management and technical maintenance must be covered in your budget
- If redesigning an existing website, refer to the server logs and work with a webmaster to develop reports on how the site was being used. Check gross traffic, where your users came from, which search engines directed them, which browsers they used and adapt the new design to utilise this information. Ensure the popular content is easily accessible
- Consider using tools such as Google Analytics to generate reports on current site traffic
Sidebar: A List Of Reminders
- Design your website with universal usability principles
- Avoid gimmicky technology fads
- Never use pointless Flash animations to 'make the site more interesting'
- To make your site more interesting, add substantive content or features
- Provide a carefully designed "404" error page
- Be concise and be generous with headers, sub-headers and lists so the user can scan your content easily
- Use the active voice
- Make it easy to find contact information
The vast majority of websites use static pages which is cost effective for publishing web information that doesn't change substantially. Static pages are simple, secure, less prone to technology errors and breakdown and easily visible by search engines.
Dynamic web pages, on the other hand, adapt their content or appearance depending on the user's interactions. They offer enormous flexibility, but the process of delivering a uniquely assembled mix of content with every page request requires a rapid, high-end web server. Even the most capable server can go offline due to heavy demand.
Web Content Management Systems (CMS) enable large numbers of nontechnical content contributors to update and create new web pages with ease. The text, graphic and site management tools in a CMS are designed to allow users with little or no knowledge of HTML or CSS to create and manage sophisticated web content. CMS products use templates to provide a consistent user interface. A blog is a simple CMS typically designed with three core features:
- easy publication of text, graphics and multimedia content
- built-in tools that enable blog readers to post comments
- built-in RSS features that allow subscribers to see when a blog site has been updated
A wiki is a specialised form of content managed website designed to support the easy collaborative creation of web pages by groups of users. Wikis allow ALL users to change content.
RSS = Really Simple Syndication is the best way to generate a set of 'headlines' and web links that can appear many places at once. RSS is a family of XML-based feed formats that can automatically provide an updated set of headlines, web links or short content snippets to many forms of Internet media.
Many companies have recognised that high-traffic web portals like YouTube and Facebook aren't just great communication tools for individuals but are also influential mass communication media and have begun to establish managed corporate online presence and regular press releases within these highly public sites. It makes sense to establish an enterprise presence where your customers and audience are, particularly for services and e-commerce sites aimed at younger users.
Site Development Process
When building a website you need to consider the following:
- which operating system and browsers should your site support
- what is the network bandwidth of the average visitor
- is your audience mainly internal or external (from the client)
- does your client use ethernet connection, ISDN, cable
- will the site have dynamic HTML and advanced features
- how will users reach personnel
- will you include email or a contact form or both
- does the site require database support (if so - what about search and retrieval)
- does the client want to embed a video or audio production
- will the site reside on an in-house server or be outsourced
- consider disk space limitations and site traffic limitations
- will there be 24/7 support and maintenance
- will you be able to gather statistics on users and site traffic
- what are staffing costs for the web build
- will the client need short-term and long-term editorial and support staff (a webmaster)
- database management and support after the build
- what about new content development and updating
- outsourcing fees
At some point you will need a Project Manager to get the new site launched, but you'll also need to hand things over to a Process Manager after the build. If nobody is there to update and change the site - it runs to risk of becoming an orphan site.
A Site Editor must also make certain that web content fits within the corporate's policies and guidelines and take into account copyright laws. A Site Editor is often the person in the firing line when it comes to copyright or other infringement issues. In regard to site design, you should develop page templates for the new site as it's much easier to add new pages with the navigation links and site graphics already in place.
The Web Accessibility Initiative has information about making the web more accessible. Here are some guidelines and techniques which should also be considered.
Once a new site has been constructed, it is ready for user testing. This testing should be performed my people outside of your team to check for navigational links, display quality, typographical errors, programming bugs and to obviously critique the overall effectiveness of the site.
Once the html and css is complete, it is considered best practice to have it validated by W3C. Click here for html validation and here for css validation. Be wary of web developers who tell you 'Validation is not important!'
Once the website is built, the URL should appear on every piece of correspondence and marketing document the client generates. If it's a new business - they may want to cross-promote their site with affiliated businesses, professional organisations or print media. A good suggestion for bringing more traffic to the site may be to promote local community events, or a school event. This will create more awareness of the website.
Links on websites are perishable so will need to be checked regularly by a Site Editor. This person should also ensure that the website is regularly backed up onto a secure and reliable storage medium.
Developing a Project Charter
The project charter is the team's concise statement of core goals and values for the client. You should ask the client the following:
Universal Usability
When building a website we need to consider accessibility and usability for ALL users. Many web users have vision and hearing problems and some cannot use a mouse. These things need to be considered when designing the pages. Because text on web pages is machine readable, it can be adapted to different contexts. For example text is accessible to people who can't see because software can read text aloud. Web technologies include provisions for supplying equivalent text for context items such as alt text for images, captions for spoken audio and audio descriptions for video files.
Users also vary widely in their technical circumstances: screen size, network speed, browser versions, and specialised software such as screen readers for visually impaired. It is interesting to note that virtually all adults over the age of fifty have some form of mild to moderate visual impairment. Webpages designed exclusively for large displays will not display well on small screens of cell phones and other mobile devices. So we need to anticipate diversity and build flexible pages that adapt gracefully to a wide variety of displays and user needs.
Many users cannot use a mouse and many devices do not support point and click interaction. So we need to make actionable elements workable via the keyboard to ensure that the interactivity of the web is accessible to the broadest spectrum of users. Unlike images and media, text is readable by software and can be rendered in different formats and acted upon by software. When information is presented in a format other than text, such as visually using images or video or audibly using spoken audio, the information is potentially lost on users who cannot see or hear.
Universal Usability in the Design Process
Involving users in the development process helps us understand user requirements, which allows us to make informed design decisions an produce more effective designs. Web metrics will not tell you precisely why users visit your site, what they hope to find from your site, or whether they are visually impaired in some way, expert of novice, young or old. Although you may target a specific audience - others will come. Even if your web logs show that only 2% of your users us a specific brand of browser, don't make the mistake of using technology with excludes them...they may become your next major donor!
Wireframes are low resolution mockups which can be used in user testing to determine whether the organisation of the page and the navigation labels are easy to use and understand.
Surveys are helpful for collecting a large and broad range of responses about demographics and goals. It may be useful to create an online survey to survey your target audience, but leave open ended questions and places for them to add their own comments for you to analyse.
Sidebar: The Development Cycle
The Requirements phase may involve formal market and user research, web analytics research, focus groups or current or prospective users, and formal usability testing.
Design transforms lists of requirements into concrete form using layouts, wireframes and site diagrams.
Development is the actual building of HTML pages and coding any associated web applications.
Testing is important. All site designs require both functional testing and editorial quality control.
Information Architecture
Architecture is an appropriate metaphor for the assembling of complex multidimensional information spaces shared by many different users and readers. The user interface and visual design of the site may be much more visible to the user initially, but if the underlying organisation of the site and its content is poorly constructed, visual or interactive design will not fix the problems. There are 5 basic steps in organising your information:
Once a new site has been constructed, it is ready for user testing. This testing should be performed my people outside of your team to check for navigational links, display quality, typographical errors, programming bugs and to obviously critique the overall effectiveness of the site.
Once the html and css is complete, it is considered best practice to have it validated by W3C. Click here for html validation and here for css validation. Be wary of web developers who tell you 'Validation is not important!'
Once the website is built, the URL should appear on every piece of correspondence and marketing document the client generates. If it's a new business - they may want to cross-promote their site with affiliated businesses, professional organisations or print media. A good suggestion for bringing more traffic to the site may be to promote local community events, or a school event. This will create more awareness of the website.
Links on websites are perishable so will need to be checked regularly by a Site Editor. This person should also ensure that the website is regularly backed up onto a secure and reliable storage medium.
Developing a Project Charter
The project charter is the team's concise statement of core goals and values for the client. You should ask the client the following:
- organisation's mission
- how will the website support this mission
- 2-3 important goals for the site
- primary audience
- primary audience's actions/thoughts after visiting the site
- how will the site be maintained after the build
A tip for keeping to the client's budget is to put a limit on the number of pages. If the page number increases - make it a rule to revisit the budget implications.
Another important thing to remember is if your website has databases and applications which deal with e-commerce or sensitive personal, financial or health-related information - the site should be scrupulously maintained and periodically audited for data security threats.
Ongoing support for hosting, databases and applications can be expensive of websites which contain complex interactive features, but no so on small static websites. If the site does contain the former, it is common practice to host the site on more than one server and ensure that they are maintained and updated regularly. Backups are imperative to prevent data loss.
Another important thing to remember is if your website has databases and applications which deal with e-commerce or sensitive personal, financial or health-related information - the site should be scrupulously maintained and periodically audited for data security threats.
Ongoing support for hosting, databases and applications can be expensive of websites which contain complex interactive features, but no so on small static websites. If the site does contain the former, it is common practice to host the site on more than one server and ensure that they are maintained and updated regularly. Backups are imperative to prevent data loss.
Universal Usability
When building a website we need to consider accessibility and usability for ALL users. Many web users have vision and hearing problems and some cannot use a mouse. These things need to be considered when designing the pages. Because text on web pages is machine readable, it can be adapted to different contexts. For example text is accessible to people who can't see because software can read text aloud. Web technologies include provisions for supplying equivalent text for context items such as alt text for images, captions for spoken audio and audio descriptions for video files.
Users also vary widely in their technical circumstances: screen size, network speed, browser versions, and specialised software such as screen readers for visually impaired. It is interesting to note that virtually all adults over the age of fifty have some form of mild to moderate visual impairment. Webpages designed exclusively for large displays will not display well on small screens of cell phones and other mobile devices. So we need to anticipate diversity and build flexible pages that adapt gracefully to a wide variety of displays and user needs.
Many users cannot use a mouse and many devices do not support point and click interaction. So we need to make actionable elements workable via the keyboard to ensure that the interactivity of the web is accessible to the broadest spectrum of users. Unlike images and media, text is readable by software and can be rendered in different formats and acted upon by software. When information is presented in a format other than text, such as visually using images or video or audibly using spoken audio, the information is potentially lost on users who cannot see or hear.
Universal Usability in the Design Process
Involving users in the development process helps us understand user requirements, which allows us to make informed design decisions an produce more effective designs. Web metrics will not tell you precisely why users visit your site, what they hope to find from your site, or whether they are visually impaired in some way, expert of novice, young or old. Although you may target a specific audience - others will come. Even if your web logs show that only 2% of your users us a specific brand of browser, don't make the mistake of using technology with excludes them...they may become your next major donor!
Wireframes are low resolution mockups which can be used in user testing to determine whether the organisation of the page and the navigation labels are easy to use and understand.
Surveys are helpful for collecting a large and broad range of responses about demographics and goals. It may be useful to create an online survey to survey your target audience, but leave open ended questions and places for them to add their own comments for you to analyse.
Sidebar: The Development Cycle
The Requirements phase may involve formal market and user research, web analytics research, focus groups or current or prospective users, and formal usability testing.
Design transforms lists of requirements into concrete form using layouts, wireframes and site diagrams.
Development is the actual building of HTML pages and coding any associated web applications.
Testing is important. All site designs require both functional testing and editorial quality control.
Information Architecture
Architecture is an appropriate metaphor for the assembling of complex multidimensional information spaces shared by many different users and readers. The user interface and visual design of the site may be much more visible to the user initially, but if the underlying organisation of the site and its content is poorly constructed, visual or interactive design will not fix the problems. There are 5 basic steps in organising your information:
- Inventory your content
- Establish a hierarchical outline of your content
- Diving your content into chunks - logical units
- Draw diagrams that show site structure and rough outlines of pages
- Analyse your system by testing
Web content inventories of existing sites commonly take the form of a spreadsheet where each page on the site gets its own row on the spreadsheet with the following details:
- unique ID number
- page title
- template
- URL
- general type of content
- person responsible for content
- keep/revise/discard decisions
- create new content
- review status
Taxonomy is the science and practice of classification. In information architecture, a taxonomy is a hierarchical organisation of content categories using a specific carefully designed set of descriptive terms. A controlled vocabulary describes the chief site content categories, the key navigation site links, and major terms to describe the interactive features of the site links.
Five Hat Racks - themes to organise information:
Five Hat Racks - themes to organise information:
- Category = similarity of characteristics of the items
- Time = organisation by timeline or history
- Location = organisation by spatial or geographic location
- Alphabetic = organisation based on the initial letter of the named item
- Continuum = organisation by price, score, size or weight. Examples include ranking reviews, best movies in a given year, etc.
Common paradigms for site organisation:
- Identity sites - dominated by projected identity and marketing
- Navigation sites - dominated by navigation and links
- Novelty sites - dominated by news and 'what's new'
- The org chart site - designed around the organisation of the enterprise
- Service sites - organised around service, content or product categories
- Flashy sites - use interaction and visual flash to draw an audience
- Tool-orientated sites - organised around the latest technology, such as XML, Ajax or Web 2.0.
Card-sorting is a good way to test the organisation of your site's pages. Create a stack of file cards with the page names on them and ask staff (or people involved in the website build) to sort them into an order which makes sense to them.
Chunking information
- Few web users read long passages of text onscreen
- Discrete chunks of information lend themselves to web links
- Chunking can help organise and present information in a modular layout that is consistent throughout the site
- Concise chunks of information are better suited to the computer screen
Site Structure
Don't make a confusing web of links. Designers aren't the only ones who make models of sites. Users try to imagine the site structure as well. The goal of browse functionality is to build a hierarchy of menus and content pages that feels natural to users and doesn't mislead them or interfere with their use of the site. You will notice that I take this into account on this blog too. I try to use short sentences, paragraphs and short chunks of content. I also like to use bullet points and numbered lists to create concise text and some negative space.
If your site has more than a few dozen pages, your users will expect web search engines to find content in the site. In a larger site - web search is the ONLY efficient means to locate particular content.
Because websites are usually organised around a single home page, which then links subtopics menu pages, hierarchical architectures are suited to website organisation. The simplest form of hierarchical site structure is a star, or hub and spoke method - a set of pages arrayed off a central home page. Navigation tends to be a simple list of sub pages plus a link to the homepage.
Most site navigation interfaces provide global navigation links that allow users to jump from one major site area to another without being forced back up to a central home page. We structure sites as hierarchies, but users seldom use them that way. A clear information structure allows the user to move freely and confidently through your site. Choose the right site structure for your audience and content.
Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear. It's a good idea to print a large diagram of the site organisation so everyone involved can see the big picture. As the site directories and sub directories are organised on the server, information on the exact names used for major directories and files would be added to the site diagram so everyone on the team can refer to it:
Wireframes are a rough map that will eventually be used by graphic and interface designers to create the final page designs:
Where to put things and why
In Western languages we read from top to bottom scanning left to right down the page. This is why it is a bad idea to place the primary headline anywhere except at the top of the page. Search engines also have a well known bias toward items near the top of a page:
Eye-tracking studies of readers looking at webpages have shown that readers start their scanning with many fixations in the upper left of the page. Their gaze then follows the Gutenberg Z pattern down the page.
Users have developed clear expectations about where common content and interface elements are likely to appear:
Interface Design
Graphic design and visual 'signature' graphics are not used simply to enliven webpages - graphics ARE integral to the user's experience with your site. In interactive documents, graphic design cannot be separated from issues of interface design. If you baffle users with a weird home page, they will quickly hit the back button or leave your site.
Be consistent and predictable, your users should feel comfortable exploring your site and confident that they can find what they need. The graphic identity of a series of pages in a website provides visual cues to the continuity of information.
Navigation and wayfinding:
Orientation is important to the user. They need to know 'where am I now?" They also need to know where they have come from and where they can go to next. On the internet there is no sense of scale or movement and we don't pass familiar landmarks unless we are deliberately browsing through a site hierarchy. Links to home pages are so crucial in web navigation: your orientation to home and whether you are heading away from the homepage or toward the homepage is about all the sense of 'direction' there is in many sites. Even if you focus on getting your webpages to look consistent within your site - this can also create problems because everything looks the same! How can a user tell where they are or when they have moved from one space to another? This is where search options and site maps come in.
In larger sites users would be able to readily see when they have passed important regional boundaries. If all the pages look identical, it's hard to tell where you are within a large site. Giving the user too many choices can leave most users overwhelmed and they are likely to abandon the problem altogether by leaving your site.
When we see a hyperlink on a page we have few clues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page. Headers are essential for both site identity and consistent navigation. Users want to get information in the fewest possible steps. This means that you must design an efficient hierarchy of information to minimise steps through menu pages. Design your site hierarchy so that real content is just a click or two away from the main menu pages of your site.
Navigation links on the right of a website are mainly used for external links and advertising.
Consider using breadcrumb navigation instead of a site map - they have the same purpose. The breadcrumb navigation adds major linked keywords to each webpage, increasing the search visibility.
Landmarks:
Orientation cues are important in the web interface, since users often arrive at a page within your site without having followed a deliberate and repeatable path. When building a website you should:
Most site navigation interfaces provide global navigation links that allow users to jump from one major site area to another without being forced back up to a central home page. We structure sites as hierarchies, but users seldom use them that way. A clear information structure allows the user to move freely and confidently through your site. Choose the right site structure for your audience and content.
Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear. It's a good idea to print a large diagram of the site organisation so everyone involved can see the big picture. As the site directories and sub directories are organised on the server, information on the exact names used for major directories and files would be added to the site diagram so everyone on the team can refer to it:
Wireframes are a rough map that will eventually be used by graphic and interface designers to create the final page designs:
Where to put things and why
In Western languages we read from top to bottom scanning left to right down the page. This is why it is a bad idea to place the primary headline anywhere except at the top of the page. Search engines also have a well known bias toward items near the top of a page:
Eye-tracking studies of readers looking at webpages have shown that readers start their scanning with many fixations in the upper left of the page. Their gaze then follows the Gutenberg Z pattern down the page.
Users have developed clear expectations about where common content and interface elements are likely to appear:
Images courtesy of the Web Style Guide 3rd edition.
Interface Design
Graphic design and visual 'signature' graphics are not used simply to enliven webpages - graphics ARE integral to the user's experience with your site. In interactive documents, graphic design cannot be separated from issues of interface design. If you baffle users with a weird home page, they will quickly hit the back button or leave your site.
Be consistent and predictable, your users should feel comfortable exploring your site and confident that they can find what they need. The graphic identity of a series of pages in a website provides visual cues to the continuity of information.
Navigation and wayfinding:
Orientation is important to the user. They need to know 'where am I now?" They also need to know where they have come from and where they can go to next. On the internet there is no sense of scale or movement and we don't pass familiar landmarks unless we are deliberately browsing through a site hierarchy. Links to home pages are so crucial in web navigation: your orientation to home and whether you are heading away from the homepage or toward the homepage is about all the sense of 'direction' there is in many sites. Even if you focus on getting your webpages to look consistent within your site - this can also create problems because everything looks the same! How can a user tell where they are or when they have moved from one space to another? This is where search options and site maps come in.
In larger sites users would be able to readily see when they have passed important regional boundaries. If all the pages look identical, it's hard to tell where you are within a large site. Giving the user too many choices can leave most users overwhelmed and they are likely to abandon the problem altogether by leaving your site.
When we see a hyperlink on a page we have few clues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page. Headers are essential for both site identity and consistent navigation. Users want to get information in the fewest possible steps. This means that you must design an efficient hierarchy of information to minimise steps through menu pages. Design your site hierarchy so that real content is just a click or two away from the main menu pages of your site.
Navigation links on the right of a website are mainly used for external links and advertising.
Consider using breadcrumb navigation instead of a site map - they have the same purpose. The breadcrumb navigation adds major linked keywords to each webpage, increasing the search visibility.
Landmarks:
Orientation cues are important in the web interface, since users often arrive at a page within your site without having followed a deliberate and repeatable path. When building a website you should:
- Create consistent, well marked paths
- Create a unique but related identity for each site region
- Not confuse the user with too many choices on home an major menu pages
- Use consistent landmarks in site navigation and graphics to keep the user orientated.
User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search. All readers will use both the browse AND search features of a site at some point, so supporting both navigation paradigms is important to user interface design. Users who come to your site from a general internet search like Yahoo or Google may arrive directly at a page deep within the organisation of your site. Users who enter via the home page are decreasing all the time. When adding a search box - put them where users expect them: either in the left hand panel of your page, or at the top right corner.
Design integrity and stability:
To convince your users that what you have to offer is accurate and reliable, you will need to design your website as carefully as you would any other type of corporate communication, using the same high editorial and design standards. A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.
Once your website is built, you will need to check often that links are still working and that content remains relevant. Well designed websites provide links to the webmaster in case users need to comment on content or inform of broken links, etc.
Check your website logs to understand more about your users. If you have a graphics-heavy site you may notice that users with low bandwidth are having difficulties viewing all content, so get to know what your users are using to access your site.
Information Design
Even though Gutenberg's Bible was produced in 1456, it took more than a century before page numbering, indexes, table of contents and title pages became expected and necessary when printing books. Web documents are now undergoing a similar -albeit faster - evolution and standardisation.
Most web documents can be designed to conform to The Chicago Manual of Style conventions for editorial style and text organisation. However webpages differ from books and other documents in one crucial respect: hyperlinks allow users to experience a single webpage separate from its context.
While it would be absurd to repeat copyright information, author and date of a book at the bottom of every printed page, individual webpages often need to provide such information because a single webpage may be the only part of a site that some users will see. The best design strategy is to apply a few fundamental document design principles consistently in every webpage you create. The basic fundamentals are:
Who - always credited the author
What - use clear titles including page titles and major headings are crucial for search engine visibility
When - date every webpage and date it when updated also
Where - always tell the user where you are from, name of company or institution.
Incorporating the 'home' URL within the page footer is an easy way to maintain the connection to where a page originated. Once the user has saved the page as a text file or printed the page, this connectivity is lost. It is also considered good practice to include the following:
Design integrity and stability:
To convince your users that what you have to offer is accurate and reliable, you will need to design your website as carefully as you would any other type of corporate communication, using the same high editorial and design standards. A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.
Once your website is built, you will need to check often that links are still working and that content remains relevant. Well designed websites provide links to the webmaster in case users need to comment on content or inform of broken links, etc.
Check your website logs to understand more about your users. If you have a graphics-heavy site you may notice that users with low bandwidth are having difficulties viewing all content, so get to know what your users are using to access your site.
Information Design
Even though Gutenberg's Bible was produced in 1456, it took more than a century before page numbering, indexes, table of contents and title pages became expected and necessary when printing books. Web documents are now undergoing a similar -albeit faster - evolution and standardisation.
Most web documents can be designed to conform to The Chicago Manual of Style conventions for editorial style and text organisation. However webpages differ from books and other documents in one crucial respect: hyperlinks allow users to experience a single webpage separate from its context.
While it would be absurd to repeat copyright information, author and date of a book at the bottom of every printed page, individual webpages often need to provide such information because a single webpage may be the only part of a site that some users will see. The best design strategy is to apply a few fundamental document design principles consistently in every webpage you create. The basic fundamentals are:
Who - always credited the author
What - use clear titles including page titles and major headings are crucial for search engine visibility
When - date every webpage and date it when updated also
Where - always tell the user where you are from, name of company or institution.
Incorporating the 'home' URL within the page footer is an easy way to maintain the connection to where a page originated. Once the user has saved the page as a text file or printed the page, this connectivity is lost. It is also considered good practice to include the following:
- Logo
- Link back to home page
- Navigation links
- At least one heading
- Contact information
- Alternative (alt) text identifying any graphics on the page.
The Enterprise Interface
A chaotic web presence sends one consistent message about an organisation: contempt for the users. Users spend 99.9% of their time on websites other than yours. Research shows that users are most productive, efficient and overwhelmingly more satisfied with sites that employ a consistent, comprehensive interface. A well structured site rich with useful content directly represents the depth and breadth of an enterprise more comprehensively than any other medium. You need to be consistent. Will users remember your pages if your site looks like nothing else they've seen before? An effective web presence can be a powerful tool for enhancing the status and competitive positioning of an enterprise, but only if the website effectively projects a feeling of trust in the knowledge and competence of the organisation that produced it.
Site Structure
Site structure determines how well sites work in the broader context of the web. The methods you use to mark up pages determine whether they can be read well by software and indexed well by search engines. HTML Markup is considered semantic when standard HTML tags are used to convey meaning and content structure, not simply to make text look a certain way in a browser. Web content is accessed using web browsers, mobile computing, devices of all kinds, and screen readers. Web content is also read by search engines and other computing systems that extract meaning and context from how the content is marked up in HTML. A search engine can distinguish keywords and identify related items in a list form.
HTML is the current basic standard for webpage markup. XHTML is very similar to HTML but XHTML is a subset of XML and has more exacting markup requirements. Although HTML is the most broadly used web markup stander, there are powerful advantages in using XHTML as your standard for page markup.
Web users don't just search for text. Search engines use the alternative text descriptions to label images with keywords, and visually impaired users depend on alternative text to describe the content of images. Proper semantic markup will ensure that your audiovisual media are maximally available to everyone in your audience and to search engines.
Javascript is a language commonly used to create interactive behaviours. All Javascript code belongs in the 'head' area of your webpage. There are other supported document formats, including PDF, Flash and Shockwave, however HTML offers greater flexibility and is designed to enable universal usability. Today's web environment is a lot more than just Internet Explorer or Firefox on a desktop compeer - hundreds of mobile computing devices are now in use and new ways of viewing and usin gwen content are being invented every day. Ultimately, following semantic web markup practices and using carefully validated page code and style sheets is your best strategy for ensuring that your web content will be broadly useful and visible into the future.
Site Structure
Site structure determines how well sites work in the broader context of the web. The methods you use to mark up pages determine whether they can be read well by software and indexed well by search engines. HTML Markup is considered semantic when standard HTML tags are used to convey meaning and content structure, not simply to make text look a certain way in a browser. Web content is accessed using web browsers, mobile computing, devices of all kinds, and screen readers. Web content is also read by search engines and other computing systems that extract meaning and context from how the content is marked up in HTML. A search engine can distinguish keywords and identify related items in a list form.
HTML is the current basic standard for webpage markup. XHTML is very similar to HTML but XHTML is a subset of XML and has more exacting markup requirements. Although HTML is the most broadly used web markup stander, there are powerful advantages in using XHTML as your standard for page markup.
Web users don't just search for text. Search engines use the alternative text descriptions to label images with keywords, and visually impaired users depend on alternative text to describe the content of images. Proper semantic markup will ensure that your audiovisual media are maximally available to everyone in your audience and to search engines.
Javascript is a language commonly used to create interactive behaviours. All Javascript code belongs in the 'head' area of your webpage. There are other supported document formats, including PDF, Flash and Shockwave, however HTML offers greater flexibility and is designed to enable universal usability. Today's web environment is a lot more than just Internet Explorer or Firefox on a desktop compeer - hundreds of mobile computing devices are now in use and new ways of viewing and usin gwen content are being invented every day. Ultimately, following semantic web markup practices and using carefully validated page code and style sheets is your best strategy for ensuring that your web content will be broadly useful and visible into the future.
