Webmasters How to Guide

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

Webmasters How to Guide

Contents
References..........................................................26 Burns, C. (2011, June). [Webmasterview.]. How to Make a Visually Appealing Website?. Retrieved June, 22 2012, from http://www.webmasterview.com/2011/06/visually-appealingwebsite/...............................................................26 Comeau, M. (2005, May 29). [About a Webmaster.]. Audience on the Web. Retrieved June, 24 2012, from http://aboutawebmaster.com/articles/website-audience.php..26 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/webdesign-process/.....................................................26 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/.........................26 Nauman, M. (2012). [Ezine Articles.]. Website Functionality Depends Upon Web Design and Development. Retrieved June, 24 2012, from http://ezinearticles.com/?Website-FunctionalityDepends-Upon-Web-Design-and-Development&id=2717556. .26 Robbins, 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, from http://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-userexperience............................................................26 UKdynamo Ltd (2002-2012). [Functionality and Usability Tradeoff.]. 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

Webmasters How to Guide 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 HTML Authoring for the World Wide Web. Retrieved June, 24 2012, from http://htmlhelp.com/design/standards.html.........27 Weakley, R. (2004, August 14). [maxdesign.]. Web standards checklist. 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

Webmasters How to Guide

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:

Webmasters How to Guide 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).

Webmasters How to Guide

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.

Webmasters How to Guide

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

Webmasters How to Guide 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).

Webmasters How to Guide

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

Webmasters How to Guide

10

In this model, a prototype depicts a layout of its first draft consisting of <div> tags held within the <div class="body_container"><div>. 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 <div.'s> for navigation, logo, header, content, sidebar, footer and so forth holds content transitioning towards changes in phase 2 shown below.

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)

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.

Webmasters How to Guide 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.

13

Updated News page Scripts Validated

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.

Webmasters How to Guide 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.

15

Error Free Contact Page

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).

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

17

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.

Webmasters How to Guide Russ Weakly from MaxDesign mentions, "From broad categories and having a

18

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).

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

Webmasters How to Guide habits (Weakley, 2004).

20

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.

Webmasters How to Guide 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).

21

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.

Webmasters How to Guide

22

Home Page Target Audience

Webmasters How to Guide

23

Resume Page Target Audience Content

Webmasters How to Guide 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.

24

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.

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.

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

26

Retrieved June, 22 2012, from http://www.webmasterview.com/2011/06/visually-appealingwebsite/ 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-FunctionalityDepends-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

Webmasters How to Guide 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

27

Weakley, R. (2004, August 14). [maxdesign.]. Web standards checklist. Retrieved June, 24 2012, from http://www.maxdesign.com.au/articles/checklist/