Date post: | 05-Apr-2018 |
Category: |
Documents |
Upload: | john-g-watson |
View: | 217 times |
Download: | 0 times |
of 27
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
7/31/2019 A Website Guide eBook
2/27
Webmasters How to Guide 2
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
7/31/2019 A Website Guide eBook
3/27
Webmasters How to Guide 3
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
7/31/2019 A Website Guide eBook
4/27
Webmasters How to Guide 4
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:
7/31/2019 A Website Guide eBook
5/27
Webmasters How to Guide 5
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).
7/31/2019 A Website Guide eBook
6/27
Webmasters How to Guide 6
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/31/2019 A Website Guide eBook
7/27
Webmasters How to Guide 7
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
7/31/2019 A Website Guide eBook
8/27
Webmasters How to Guide 8
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).
7/31/2019 A Website Guide eBook
9/27
Webmasters How to Guide 9
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
7/31/2019 A Website Guide eBook
10/27
Webmasters How to Guide 10
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
7/31/2019 A Website Guide eBook
11/27
Webmasters How to Guide 11
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)
7/31/2019 A Website Guide eBook
12/27
Webmasters How to Guide 12
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.
7/31/2019 A Website Guide eBook
13/27
Webmasters How to Guide 13
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
7/31/2019 A Website Guide eBook
14/27
Webmasters How to Guide 14
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.
7/31/2019 A Website Guide eBook
15/27
Webmasters How to Guide 15
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
7/31/2019 A Website Guide eBook
16/27
Webmasters How to Guide 16
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).
7/31/2019 A Website Guide eBook
17/27
Webmasters How to Guide 17
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.
7/31/2019 A Website Guide eBook
18/27
Webmasters How to Guide 18
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).
7/31/2019 A Website Guide eBook
19/27
Webmasters How to Guide 19
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
7/31/2019 A Website Guide eBook
20/27
Webmasters How to Guide 20
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.
7/31/2019 A Website Guide eBook
21/27
Webmasters How to Guide 21
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.
7/31/2019 A Website Guide eBook
22/27
Webmasters How to Guide 22
Home Page Target Audience
7/31/2019 A Website Guide eBook
23/27
Webmasters How to Guide 23
Resume Page Target Audience Content
7/31/2019 A Website Guide eBook
24/27
Webmasters How to Guide 24
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.
7/31/2019 A Website Guide eBook
25/27
Webmasters How to Guide 25
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.
7/31/2019 A Website Guide eBook
26/27
Webmasters How to Guide 26
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
7/31/2019 A Website Guide eBook
27/27
Webmasters How to Guide 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/