A Website Guide eBook

7/31/2019 A Website Guide eBook

1/27

Webmasters How to Guide 1

Infinite Trends Hawaii

Affordable Web and Graphic Design Services

Webmasters "How-To Guide"

John Watson

Colorado Technology University

Web Development 1 EM208-1202B-14

Imad Al Saeed

6/22/2012


2/27


Contents

References..........................................................26

Burns, C. (2011, June). [Webmasterview.]. How to Make aVisually Appealing Website?. Retrieved June, 22 2012, fromhttp://www.webmasterview.com/2011/06/visually-appealing-

website/...............................................................26

Comeau, M. (2005, May 29). [About a Webmaster.]. Audienceon the Web. Retrieved June, 24 2012, from

http://aboutawebmaster.com/articles/website-audience.php..26

Hunt, B. (2006 - 2012). [webdesignfromscratch.]. TheComplete No-Nonsense, Step-by-Step Guide to Designing

Websites. Retrieved June, 24 2012, fromhttp://www.webdesignfromscratch.com/design-process/web-

design-process/.....................................................26

Morris, T.F. (2000-2012). [Web Development & DesignFoundations with HTML5,.]. Web Design Best Practices

Checklist. Retrieved June, 24 2012, fromhttp://terrymorris.net/bestpractices/.........................26

Nauman, M. (2012). [Ezine Articles.]. Website Functionality

Depends Upon Web Design and Development. Retrieved June,24 2012, from http://ezinearticles.com/?Website-Functionality-

Depends-Upon-Web-Design-and-Development&id=2717556. .26Robbins, J.N. (207, June). Learning Web Design(3rd ed.).Sebastopol, CA 95472: O'REILLY...............................26

Rubinoff, R. (2004, April 21). [SitePoint.]. How To Quantify The

User Experience. Retrieved June, 22 2012, fromhttp://www.sitepoint.com/quantify-user-experience/....26

Rubinoff, R. (2004, April 21). [Usability.]. How To Quantify The

User Experience. Retrieved June, 24 2012, from quantify-user-experience............................................................26

UKdynamo Ltd (2002-2012). [Functionality and UsabilityTradeoff.]. Website Functionality. Retrieved June, 24 2012,from http://www.ukdynamo.com/page.php?id=10.......26

University of Aberdeen (2004). Factsheet 16: How do I include

a standard header, footer, or navigation block on every page?.Retrieved June 12 2012, from

http://www.abdn.ac.uk/webpack/factsheet16.shtml.....27


3/27


W3C (1994-2012). [W3C.]. Markup Validation Service.Retrieved June, 24 2012, from

http://validator.w3.org/docs/why.html.......................27

WDG (1996 - 2006). [Web Design Group.]. Standards for HTMLAuthoring for the World Wide Web. Retrieved June, 24 2012,

from http://htmlhelp.com/design/standards.html.........27

Weakley, R. (2004, August 14). [maxdesign.]. Web standardschecklist. Retrieved June, 24 2012, from

http://www.maxdesign.com.au/articles/checklist/........27

Title

Infinite Trends Hawaii

Affordable Web and Graphic Design Services

Webmasters "How-To Guide"

Introduction:

Hinging on a combination of elements for a websites success with competition on

the Internet increasing every day, it is imperatively important to pay attention towards

defining details of your competitive analysis strategic plan


4/27


Having a clear purpose and goals for your web site such as why are you, building

a web site while embarking on tracing the development of Infinite Trends Hawaii's

Affordable Web and Graphic Design Services is a great start.

We will use their settings as a model in referencing factors in what most

webmaster rely on in acquiring positive user experiences.

In a website article, posted on SitePoint.com by Robert Rubinoff titled, "How to

Quantify the User Experience", Rob stresses that Branding, Usability, Functionality, and

Content taken together are four factors towards constituting a website's success

(Rubinoff, 2004).

For some, as the above four factors explains the correlation of our models

website allowing you to reach a brighter understanding of it performance, and while we

go on implementing additional factors associated with Visual Design, Functionality,

Standards, and Audience, others may come to see more clearly how our models

website executes the following methodology.

In this guide, you will find topics on how our model site provides a visually

attractive experience for users, which then moves on to defining how our model site

functions appropriately with respect to navigation and scripts while conforming to

applicable standards and guidelines pointing lastly on how the website successfully

provides the needs of their target audience.

Chapter 1:

Visual Design:


5/27


Let us begin by stating that the general purpose of a webmaster is to design

websites that facilitate communication of information whether it is to collect them or

promote them.

Creating a website then, must begin by creatively constructing solutions that fits

its environment enabling all important goals, needs and objectives being in the right

balance of priority (Hunt, 2006 - 2012).

According to Ben Hunt from webdesignfromscratch.com, in his article titled, "Your

web sites goals", he states, "Any noise or confusion will make that process less

efficient, which could mean that the site fails to realize some of its goals" (Hunt, 2006 -

2012).

Before going further take for example in our the introductions message learning

methodologies pertaining to factors contributing to the success of the user's experience

of one's website is illustrated below that if a website is to be in balance with its needs,

goals and objectives, it must come forth from factors coherent of each other (Rubinoff,

2004).


6/27


Correlation and Balance

Visual design is one aspect of the spectrum that affects the exterior appearance

of the website and the experience and perception of the user.

"Keeping a clean layout is always easy on the eye and is easier to browse", says

Chris Burns from webmasterview.com. He states, "It is advisable to avoid cluttering your

web page and instead allow some amount of white space on your pages"(Burns, 2011).

He goes on, "This would not only enhance the look and appeal, but also draw

attention to the content displayed on your site" (Burns, 2011).

Looking at our models below, they depict Mr. Burn's statements on keeping one's

site light showing complementary consistency while using white space to enhance its

appearance.


7/27


White Spaces and Consistent Themes

Complimentary Fonts and Colors

Chris's also mentions how to prevent user incompatibility by using universal fonts

and right color scheme due to how different computer render differently (Burns, 2011).

The application in complimenting headers, footers, background, foreground color

and logo on each page of a website is vital for the success of the sites visual design


8/27


because this creates a sense of identity throughout your web site (University of

Aberdeen, 2004).

Complementing the design gives the impression that the websites pages are well

designed, authoritative and coherent (University of Aberdeen, 2004).

Consistent Headers on All Webpage

Consistent Footers on All Webpage

In addition, a strong visual design practice in making a consistent complementing

website is to help users navigate through your site efficiently without distraction by

unexpected changes in page layout (University of Aberdeen, 2004).

In the end, all the aesthetic and design-related items within a website will entail

creatively project its desired organizational images and messages (Rubinoff, 2004).

Chapter 2

Functionality:

In this chapter, functionality makes its technical way as part of a websites design

that describes what the website does, rather than how it appears. Built from the ground

up, functionality ensures each element loads quickly, performs efficiently while keeping

all information safe and secures (Nauman, 2012).


9/27


Getting a jump on creating a functional model would be the starting point to show

how key features of the website works. Designing a prototype brings the visual design

to life allowing you to make changes before the coding starts, which is an important

stage because it allows you to make changes at a time when they are easier

(UKdynamo Ltd, 2002-2012).

Let us look at the model of Infinite Trends Hawaii prototypes below in which

visually expresses their underlying steps taken phase-by-phase showing the bringing

about of their recent updates.

While moving forward illustrates its navigational system and scripts from variety

of pages, it demonstrates their News page, a busy Java scripted page, error free from

validator.w3.org, which we will explain later.

Phase 2 No scripts


10/27


In this model, a prototype depicts a layout of its first draft consisting of tags

held within the .

The use of a body container or div element identifies a block-level division of text.

DIV's holds all other containers in the webpage so the webpages in my opinion do not

break on me.

According to a book titled, "Learning Web Design" DIV containers may also

establish attributes such as} color :} height :} width :} margins :} etc. (Robbins, 2007).

Updated Navigation

Updated Footer

This is a simple horizontal button image type navigational system model. It

locates itself on the very right top of the sites webpages for target audience to see

easily while letters are clear (Morris, 2000-2012).

Beneath that model holds a footer image with text link clearly written and a

sitemap link in aid for further navigation. As we make our website best practice

checklist, all links work (Morris, 2000-2012).

It is from here where added


11/27


Phase 2 - Scripts

Maybe I may not be as talented as one would like, "Talented web developers are

accustomed to using the latest technology available in order to design websites that are

fast and functional, as well as looking great", says Muhammad Nauman from

EzineArticles.com (Nauman, 2012)


12/27


However, while a great looking website with lots of animation, flash and imagery

may look great, it does no good at this point if it is not easy for users to use (Nauman,

2012).

In an article, "Website Functionality Depends Upon Web Design and

Development", it is written that web developer's face many issues in which they may

have to overcome with script functionality as well as how to keep visitors interest after

the initial show is over (Nauman, 2012).

Other issues of scripts, navigation and their functionality are their improper

design or elements breaking and even displaying badly across different browsers

(Nauman, 2012)

The model Phase 2 Scripts above entails an RSS feed script in the content

area of the News page while the left sidebar holds an image extension script to enlarge

a thumbnail presenting a sample of the sites portfolio page as well as opening up an

image of the resumes site owner.

Notice the two versions of the Updated News and Contact page Scripts

Validated below.

It actually starts with a local link that animates itself from the homepage. Within

the content area lies proper multimedia information gathered by Google and

Podsnack.com.

Google is carrying both a news feed and a video player while podsnack.com

allows you to listen to MP3 music for your liking. On the right sidebar, entails information

from twitter feeds targeting web and graphic design data as well as blog information

from our site.


13/27


The Contact page carries a basic form for visitors, users, or our customer to

choose from a menu of multiple choices of issue to leave a message.

In addition, a Google map provides customer an easy way to find directions to

our headquarters.

Updated News page Scripts Validated


14/27


Updated Contact page Scripts Validated

Validation W3C:

Placing this section into the next chapter would seem more sensible since it is a

major standard for web developers. Choosing to discuss validation here as we nearly

come to a close only seems fair for us to take into consideration that it's reassures a

web developer's styles or scripts.


15/27


Once embarking on the usage of validator w3c, a dozen script error floods. As

you will observe in this chapter, it concludes how its purpose correlates to our two

models above; the news and contact page whom contains the most scripts.

Continuing demonstrates results of our debugged, parsed web pages that are

error free, which complements the applications usage on the site.

Error Free Contact Page


16/27


Error Free News Page

Because validation parses much better than some web browsers and while using

standard, interoperable markup and style sheets handles ones page with a greater

chance of having consistency across platforms and user-agents, validation is a great

debugging tool (W3C, 1994-2012).

According to W3C, a large majority of web professionals states, "validation errors

is the first thing they will check whenever they run into a Web styling or scripting bug"

(W3C, 1994-2012).


17/27


In addition, validating is one of the simplest ways to build your website in

accordance with web standards while it provides one of the most reliable guarantees of

future Web platforms (W3C, 1994-2012).

Furthermore, validation for creating web pages or applications in accordance to a

widely accepted coding style makes it easier to maintain, even if someone else

performs the maintenance and evolution (W3C, 1994-2012).

Many professionals authors HTML and CSS and know these technologies by

heart, outputting great results. Beginners and students find automated checking tools

invaluable in spotting mistakes allowing the tool in return to be a good teacher building

good practices (W3C, 1994-2012). .

In the end, seasoned, able professionals will take pride in creating Web content

using semantic and markup for separation of style and content, etc. Validating can then

use quick checks to determine whether the code is the clean work of a seasoned HTML

author, or quickly hacked-together tag soup (W3C, 1994-2012).

Chapter 3

Standards:

What I want to touch upon in this section is to encourage compliance with

standards and good practice in web authoring, and to ensure that authors who deviate

from such standards are aware of the consequences of their actions.


18/27


Russ Weakly from MaxDesign mentions, "From broad categories and having a

list of many items, the term web standards can mean different things to different people"

(Weakley, 2004).

Russ says that, "A site built to web standards should adhere to standards such

as (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc.) and pursue best

practices of valid code, accessible code, semantically correct code, user-friendly URLs

etc. (Weakley, 2004).

Being a web designer myself have taught me a thing or two and from personal

experience a site built to web standards should ideally be lean, clean, CSS-based,

accessible, and usable and search engine friendly.

A checklist, which sits on maxdesign.com, shows six categories of web

standards. They are quality of code, degree of separation between content and

presentation, accessibility for users, accessibility for devices, basic usability, and site

management. What then would this divisional chapter be without a few basic web

elements taken from Infinite Trends Hawaii site?

Quality of code

Short for document type declaration a doctype informs the validator which

version of XHTML is used and it must appear at the very top of every web page. It is

also necessary to be compliant because ones markup and css will not validate them

(Weakley, 2004).


19/27


DocType Declaration

The character encoding used in a web document is to present readable text. This

is important for those maintaining and extending a multilingual site, but declaring the

character encoding of the document is important for anyone producing XHTML/HTML or

CSS (Weakley, 2004)

Character set

Accessibility for users

Developing a resume or portfolio project for a web and graphic design company

is a privilege for me, yet a very tedious task, because of all the images used. It is

impeccable to use the alt attributes for all descriptive images for the simple reason to

provide a text equivalency for every non-text element and to practice good professional


20/27


habits (Weakley, 2004).

Alt Attributes used in Images

Chapter 4

Audience:

Our final ingredient targets the needs of our audience, which comes with making

a myriad of choices.


21/27


From a web article titled "Audience on the Web" According to Marc Comeau,

"These choice ranges from visual design, technology, information and architecture

choices (Comeau, 2005).

However, Marc goes on stating, "We need to understand our audience before we

begin designing our website" (2005). The web, being a vast space for information and

competition, in order for a site to be effective and successful it must be able to deliver its

message to the right people (Comeau, 2005).

In order to do that, Marc says, "We have to narrow down who we're trying to

reach. We can do this many ways, but one of the more effective methods is to start by

identifying your primary audience" (Comeau, 2005).

Peek at the model content written for Infinite Trends Hawaii Web and Graphic

Design Services Resume Website. The two images clearly portray their target audience

they are scoping.

For example, their homepage targets all internet customers for personal and

business, new or experienced, servicing small to mid-sized accounts. The website

shows what their services are and with a link, pointing to their resume surely indicating

their experience in which display what help their company can provide to their target

audience.

The Resume page on the other hand, writes itself with one goal in mind and uses

the resumes backgrounds history and experience to focus in targeting their audience.


22/27


Home Page Target Audience


23/27


Resume Page Target Audience Content


24/27


Conclusion

As our final chapter recaps, the elemental ingredient in which targeted their

audience, we would like to follow up here by summarizing with the compilation of

mythologies and factors in which brings successful user experiences.

The use of me is planning the architecture phase while learning along the way

the importance of visual design, functionality, standards, and audience holding me in

captive attention just made me a much better webmaster and developer.

Clearly, defining my objective and purpose mentioned in the previous chapter in

the beginning of the project allowed me to define my target audience helping me make

greater decisions towards the layout and design of my website.

Contemplating on who this website was for, employers, consumers and clients

allowed me to realize who needed the our services such as the personal and business

clientele as well as whether they were new or experienced and how large of account we

could handle much like a small to mid-sized volume.

This step formulated the conceptual standard of using a light background with

dark text.

What this website was to provide is information and background of the web

designer and its company for hire and additionally provide basic background information

of the web designer and its company.

The site also came to life towards providing viewers with a large portfolio with

many images that remains to load incredibly quickly due to the use of great scripting.

This page proceeded with what I have done in the past as well as the experience

showing through the examples of my work.


25/27


Finally, although this was an educational academic project without the need of an

live server, the location of its home address is http:www.infinitetrendshawaii.com, which

will be providing hosting services soon.


26/27


References

Burns, C. (2011, June). [Webmasterview.].How to Make a Visually Appealing Website?.

Retrieved June, 22 2012, from http://www.webmasterview.com/2011/06/visually-appealing-

website/

Comeau, M. (2005, May 29). [About a Webmaster.].Audience on the Web. Retrieved June, 24

2012, from http://aboutawebmaster.com/articles/website-audience.php

Hunt, B. (2006 - 2012). [webdesignfromscratch.]. The Complete No-Nonsense, Step-by-Step Guide

to Designing Websites. Retrieved June, 24 2012, from

http://www.webdesignfromscratch.com/design-process/web-design-process/

Morris, T.F. (2000-2012). [Web Development & Design Foundations with HTML5,.]. Web Design

Best Practices Checklist. Retrieved June, 24 2012, from http://terrymorris.net/bestpractices/

Nauman, M. (2012). [Ezine Articles.]. Website Functionality Depends Upon Web Design and

Development. Retrieved June, 24 2012, from http://ezinearticles.com/?Website-Functionality-

Depends-Upon-Web-Design-and-Development&id=2717556

Robbins, J.N. (207, June).Learning Web Design(3rd ed.). Sebastopol, CA 95472: O'REILLY.

Rubinoff, R. (2004, April 21). [SitePoint.].How To Quantify The User Experience. Retrieved June,

22 2012, from http://www.sitepoint.com/quantify-user-experience/

Rubinoff, R. (2004, April 21). [Usability.].How To Quantify The User Experience. Retrieved June,

24 2012, from quantify-user-experience

UKdynamo Ltd (2002-2012). [Functionality and Usability Tradeoff.]. Website Functionality.

Retrieved June, 24 2012, from http://www.ukdynamo.com/page.php?id=10


27/27


University of Aberdeen (2004).Factsheet 16: How do I include a standard header, footer, or

navigation block on every page?. Retrieved June 12 2012, from

http://www.abdn.ac.uk/webpack/factsheet16.shtml

W3C (1994-2012). [W3C.].Markup Validation Service. Retrieved June, 24 2012, from

http://validator.w3.org/docs/why.html

WDG (1996 - 2006). [Web Design Group.]. Standards for HTML Authoring for the World Wide

Web. Retrieved June, 24 2012, from http://htmlhelp.com/design/standards.html

Weakley, R. (2004, August 14). [maxdesign.]. Web standards checklist. Retrieved June, 24 2012,

from http://www.maxdesign.com.au/articles/checklist/

Documents

A Website Guide eBook