Santa Susana High School

Designing and Coding an Industry Standard Website

Research and Application of Quality Site Creation Techniques

Jack Apelbaum
CP English 12
Rick White
11/13/15
Abstract
It can be difficult for those who are just starting out in the field of web development to
create high quality content due to lack of experience and knowledge. The purpose of this paper is

to collect and analyze techniques and strategies that are necessary for a starting web developer to
create a successful website. Through research of multiple scholarly and non-scholarly but
reliable sources, data was compiled on techniques used to create successful websites. The key
techniques to creating successful websites include obtaining and utilizing software and hardware
necessities for web development, utilization of design techniques that are both visually appealing
and accessible to the disabled, and optimization of code to create a faster and smoother running
website. Knowledge and application of these necessary techniques will help starting web
developers to create high quality and successful websites.

Apelbaum 1
1. Introduction
For my senior project, I will be creating a visually appealing and easy to use website for a
company. The website will be created using a variety of programming languages such as PHP,
Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), and other tools. I am

doing this project because I enjoy work in this field. I intend to get a career in the field and
certify in this area. I already know how to use HTML and JavaScript well, and I know some
CSS. However, to make a website that lives up to industry standards I will need to learn to use
CSS in more creative and optimal ways, and I will need to learn new languages such as PHP and
jQuery. A reliable source for learning these languages is codeacademy.com. Creating an industry
standard website will be a new endeavor for me and quite a challenge. I therefore included
researched information on basic languages, hardware, and software that I will need to start out
with before I can effectively start being a web developer, information on proper design
techniques to maximize visual appeal as well as accessibility, and information on optimization of
code to make my website run as smoothly as possible, followed up by analysis of the data and
plans for application of the listed techniques.

2. Research
a. Necessities for Web Development
Hyper Text Markup Language, or HTML, is a language used for laying out and
describing elements of a web page (Robbins). HTML documents contain three basic parts, the
document type declaration, the document header containing the title and metadata, and the
Apelbaum 2
document body which is visible in the browser (W3). Cascading Style Sheets, or CSS, is a
language used to design how a web page looks (Robbins). To effectively be a web developer, you
will need resources such as an up-to-date computer, extra memory, and finally both Windows and
Macintosh computers as well as mobile devices for testing (Robbins). The <br> tag can be used
to the same effect in

HTML as the enter key can in programs like Microsoft Word, moving to the next line (W3).
Since people will be running different web browsers and different versions of those web
browsers, be sure to test your website on as many browsers as possible (Sklar). The <dl> tag in
HTML can create a definition list, which shows a word and its definition (W3). Web pages need
to be compatible with both Macintosh and Windows computers in order to reach the widest
audience (Sklar). Something a web designer may produce is a site diagram, a chart showing the
hierarchy of a web page (Robbins). The length of something can either be defined by a flat
number of pixels, or a percentage of the pixels currently displayed (W3). People should not have
to download software in order to view and use your site (Gehrke et al).

b. Web Design Techniques

Be consistent with the method of navigation you use while designing your website
(Gehrke et al). Interfaces that users have to interact with should follow a sequential and
hierarchical pattern so that data can be easily accessed (Lim). Since different computers will
have different fonts, and some are more commonly installed than others, make sure to use fonts
in your web page that are commonly used on most computers (Sklar). Avoid the use of frames
Apelbaum 3
in your website as they look ugly and can lead to excessive scrolling. This coupled with the fact
that they are not supported by all browsers leads to frames being a terrible design element
(Gehrke et al). Make sure to use high contrast colors to make text stand out from your page and
be readable (Putnam). Due to the necessity of adapting your website to different screen
resolutions, you should make sure your web page has flexible page design or one
with content centered in the page (Sklar). To accommodate for those who have vision
impairments, web developers should make sure to provide an alt text version of every non-

decorative page element that is not text, such as pictures or videos (Robertson et al). Features
that may annoy users of websites such as pop-ups are not a good idea to use to convey
information. Repeat visitors of the website will just become accustomed to closing them as soon
as they open (Lim). For purely decorative items, you should use the alt tag that would normally
contain the description of the item, but leave it blank (Robertson et al). Try to put elements of
your web page in an intuitive location that shouldnt be too hard to find (Putnam).
For a good looking web page, keep the length of your lines of text between 50 and 60
characters, but up to 75 can be ok (Holst). If your web page is reliant on colors in any way to
convey its information, be sure to use colors that will be perceivable to the color blind
(Robertson et al). Provide visual indication as well as text for your users to find the information
they need most easily (Lim). Make sure you have a sharp color that stands out for any features of
your web page that you want to have attention drawn to (Putnam). Make sure that any text
descriptions in the code for page elements are concise, accurate, and helpful. Do not allow them
to contain too much unnecessary information (Robertson et al). It is more important to
Apelbaum 4
have a website that is usable than a website that is attractive looking. Make your website both of
these if possible (Lim). Make important buttons distinctive so that users will not have trouble
taking advantage of the functions they perform (Gehrke et al). Try to avoid using moving sliders
on your site. While they may look nice, they may cause visitors to miss important information.
Most viewers never look past the first slide (Putnam). Allow disabled users a way to skip
navigation menus in your webpage so that they can continue to access the information on your
page without interference (Robertson et al). Make sure that the fonts you use in your site are
large enough to be easily readable by visitors (Putnam).

c. Optimization Techniques
In order to optimize your JavaScript code, use local variables instead of global ones
wherever possible, as JavaScript lookup methods find them faster (Herczeg et al). Most people
on the web hate it when their page loads slowly, 77 percent according to surveys. For this reason,
it is vital that you optimize the loading of the web page as much as possible (Gehrke et al). Any
identical expressions should be turned into variables containing the same data for optimal
performance. It is also a good idea to avoid the with function wherever possible for optimal
performance, local variables are a better option (Herczeg et al). You can use the browser cache to
maximize loading speed of your web page. If you use the same images to theme your site, they
will be stored in the cache when you first visit the website and therefore the other pages on the
site will load much faster as they can be accessed from the hard drive rather than being
downloaded from the server again (Sklar). As every piece of data the eval
Apelbaum 5
function takes in to analyze is executed immediately, it can bog you down, and therefore should
be avoided whenever possible. Alternate methods should be used instead (Herczeg et al). The
two ways to include a link to a Cascading Style Sheet file in an HTML document are with the
<link> tag and the @import rule (Souders). As the <link> tag is easier to use and runs faster than
the @import rule, avoid using the @import rule (Souders). Optimization of JavaScript code is a
good idea, as while it takes extra time while its being coded and compiled, the page will run
much faster for everyone who uses it in the future (Herczeg et al).

3. Application
a. Necessities for Web Development

To be an effective web developer, it is clear that I will need access to browsers such as
Internet Explorer, Chrome, Firefox, Safari, and Opera, as well as access to both Windows and
Macintosh computers. Access to Android and iOS mobile devices is also important. Fortunately,
I do indeed have access to all of this software and hardware, so I am well equipped. I will make
sure to use the tags listed in my research in addition to any others in the most efficient and
optimal way possible, both visually and performance-wise. I will also make sure that my website
does not require additional software to run.

b. Web Design Techniques

Using the information on page design listed above, I will design my website to be
visually appealing, taking advantage of text styling, element usage, and visual cue strategies. It
Apelbaum 6
will also be designed to be easily traversed; users will be able access the information they want
quickly. I will also follow strategies that other well made websites use to achieve this effect. I
will not be using elements on my site that readers tend to ignore due to them being an
annoyance, such as pop-ups, sliders, and frames. Finally, I will ensure that my website is easily
usable for the disabled by adhering to the guidelines enumerated in my research in regards to
accessibility.

c. Optimization Techniques
I want my website to perform optimally, so its necessary to follow some general rules, as
well as more specific ones, while building it. In general, I will focus on using local variables as
substitutes for global variables or repeated data values as this will maximize the speed of my
website. When adding a CSS document to my HTML documents, I will use the <link> tag

instead of the @import rule in order to optimize loading speed and keep things simpler in
general. The eval function will be avoided as much as possible as it slows down the page quite a
bit. I will also be certain to take advantage of the browser cache to help repeat visitors load pages
faster by using identical graphics wherever possible. This way, the graphics will only have to be
downloaded once, instead of having to be downloaded repeatedly.

4. Conclusion
With the data i have collected through my research in addition to my analysis and
understanding of it, I feel better prepared to tackle the task of creating an industry standard
Apelbaum 7
website that will attract visitors and show off my skills at their best. These skills not only include
my former knowledge of HTML, JavaScript, and CSS, but they
also include my newfound knowledge attained by the researching process. This consists of
knowledge of what I will need to effectively be a web developer, intelligent and intuitive design
ideas and tactics, and code optimization techniques, in addition to the knowledge of PHP and
jQuery I have gained.

Works Cited
The Global Structure of an HTML Document. W3. W3C, 24 Dec. 1999. Web. 18 Sept.
2015.
Souders, Steve. Dont Use @import. Stevesouders.com. Steve Souders, 9 April 2009.
Web. 17 September 2015.
Gehrke, Dave, and Efraim Turban. "Determinants of successful website design: relative
importance and recommendations for effectiveness." Systems Sciences, 1999.
HICSS-32. Proceedings of the 32nd Annual Hawaii International Conference on. IEEE,
1999. Web. 18 Sept. 2015.
Robbins, Jennifer Niederst. Learning web design: A beginner's guide to HTML, CSS,
JavaScript, and web graphics. O'Reilly Media, Inc., 2012. Web. 18 Sept. 2015.
Lim, Sun. "The Self-Confrontation Interview: Towards an Enhanced Understanding of
Human Factors in Web-based Interaction for Improved Website Usability." J.
Electron. Commerce Res. 3.3 (2002): 162-173. Web. 18 Sept. 2015.
Herczeg, Zoltn, et al. "Validating JavaScript guidelines across multiple web browsers."
Nordic Journal of Computing 15.1 (2013): 18-31. Web. 18 Sept 2015.
Robertson, Janna Siegel, and James Wallace Harris. "Making online information

accessible to students with disabilities, Part II." Sponsored by Uliveandlearn and

The Technology Source. The Webcast is digitally recorded and available at:
http://ts. mivu. org/default. asp (2003). Web. 18 Sept 2015.
Sklar, Joel. Principles of web design. Cengage Learning, 2008. Web. 18 Sept. 2015.
Holst, Christian. Readability: the Optimal Line Length. Baynard Institute, 1 Nov. 2010. Web. 18 Sept.
2015.

Putnam, Joe. 7 Deadly Web Design Sins You Might Be Making. Kissmetrics, 2015. Web. 18
Sept. 2015.