!"#$%&" &() *+*,-*.

/ 0%1(2" 345+67 89:; <

<
Website Consideration
The design and implementation issues of a website investigated

Camilla MacCulloch: 32374386
Introduction

Creating a website is no longer something, that those of us who find ourselves
challenged with the concept of writing code online, need to worry about, as it
is described in Five Easy Tools to Build a Website. We can instead, put our
creative energy, into ensuring the design of the site is attractive and appealing
to the eye, without having to worry about spending money hiring someone to
work their geeky magic. The design and implementation does require much
attention to detail and content, as not doing so could result in the failure of the
site.
This report follows my research into the key design and implementation
issues of creating a website, and how I have dealt with these matters. There
is research presented with connection to websites I have had the opportunity
to engage with in the past, and those that I have attempted to use after opting
for my preferred technology. I then present some general recommendations
for those that are considering the increased use of technology within their
classroom environment.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

+

Literature review

There are three key design and implementation issues that can be identified
when creating a website. These include typography, digital citizenship and the
C.R.A.P test. Within typography navigation, layout, colour, fonts and
readability are explored; digital citizenship then refers to copyright and
accessibility, whilst the C.R.A.P test which relies on credibility/ currency,
reliability, authority and purpose.

Design issues
Readability (layout, fonts, typography, colours)
Issue 1: Typography
Chunking
Web Typography is something so familiar to us, as it is used in every
successful website that we encounter, so we often fail to see the brilliant
examples of it in use. The aim of web graphics is to create a clear visual
hierarchy of contrast, so you can see at a glance what is important and what
is peripheral, define functional regions of the page, group page elements that
are related, so that you can see structure in the content (Lynch & Horton,
2011). As noted here, it is clear that we do not want to spend hours scrolling
through a site, attempting to find what we are looking for. It is also useful for
users to have information clearly chunked as Proximity and uniform
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

*
connectedness are the most powerful Gestalt principles in page layout;
elements that are grouped within defined regions form the basis for content
modularity and chunking web content for easy scanning (Lynch & Horton,
2011). Chunking information needs to be monitored to some degree however,
making sure that information does not exceed more then two screens of
scrolling down, as a user will lose interest. If more information is to be
provided, it is best to create another page showing the user where to continue
their reading. In the case of journal articles, this rule does not apply, but in any
normal website a user does not want to be bombarded with pages and pages
of words.
Animation, Fonts, Advertising, Colours
Animations on websites should be kept to a minimum. This is because if the
user has not come to the site for purely entertainment purposes, then the
user is goal-orientated and does not want any distractions that get in the way
of achieving that goal (Media Chemistry: Exploring the Elements of Online
Communication, 2014). This applies for animations, fonts and advertising. A
user does not want to be assaulted with flashing images; a multi-colored
layout and advertising pop ups, as this distracts them from their original goal.
A web designer that allows for multiple pop ups and advertising to occur upon
their site, is sending a message that they care more about making money
then the experience of the user on their page. The design and layout of the
page overall needs to be simple and easy to navigate, bearing in mind that
Its possible to create a wonderful design without the use of images at all
(Scrivens P, 2014). Rather than excluding images and videos however, I
would suggest that it is limited, and the focus is more on the content and the
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

-
information it delivers. Colours of font should be cohesive and relative to the
websites aims, as numerous different colours on each page can create a
fractured overall feel to the website. Web designers should use contrasting
colours or simple backgrounds to make your text easy to read (Bluejay M,
2012). The Font should also be kept a simple style with CSS rules, go for 12
or 13px Arial, and 11 or 12px Verdana (Bluejay M, 2012). Some tips on how
to write for the web are as follows Write for online, not print. To draw users
into the text and support scannability, use well-documented tricks: subheads,
bulleted lists, highlighted keywords, short paragraphs, the inverted pyramid,
a simple writing style, and de-fluffed language devoid of marketese (Nielsen
J, 2011).


Issue 2: Digital Citizenship
Accessibility
Web accessibility is increasingly important, as it is the platform which users
need to cross in order to view a website. The Internet is expected to abide by
many different users needs, including those with disabilities to be able to
easily use this technology. It is essential that the Web be accessible in order
to provide equal access and equal opportunity to people with disabilities
(Webaim.org, 2014). Alongside this, if a webpage is labelled something that
is not logically linked to what a user is looking for, then it becomes almost
impossible for anyone to find the site, therefore a sites name needs to be
simple, as suggested by McCarthy (2014), Make your website compatible
with all the different operating systems and web browsers available.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

7
Somebody visiting your website in FireFox or the Opera browser should still
be able to view your website correctly. People who use a Mac instead of a PC
must see your website the proper way. Web designers need to ensure that
their Website is perceivable, meaning that it is available to be adapted to suit
the users needs specifically focusing on vision and hearing, allowing for
assistive technologies. It also needs to be operable, meaning that users can
have access to all of the controls that the website needs to operate, like the
mouse or keyboard to navigate.
Copyright
To avoid being found a subject of copyright, it is important that we follow a
number of rules when constructing a website. Copyright is a law in place,
which is intended to protect creative works from being used without the
agreement of the owner and to provide an incentive for creators to continue to
create new material (Copyright.com.au, 2014). The Technology Toolbox for
Educators is a great resource, which assists in avoiding any unfortunate
circumstances such as being accused of breaching copyright. Creative
Commons is also considerably helpful which web designers can use to gain
access to material that is available to be used free of charge, and can also be
used to submit ones own material for the use of others.
Issue 3: C.R.A.P test

In order to create a successful site, the web designer need to make sure It
passes the C.R.A.P Test (Allen, 2014). The C.R.A.P test refers to
currency/credibility, reliability, authority and purpose.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

/
Currency/Credibility

Currency and credibility is important when designing a website, because if the
material you are publishing is not current, then it is likely that many people
browsing the internet may not be able to access your site, as the technology
you have used is not compatible with their devices. It may also be useful to
provide some information about yourself as the web designer, making the
experience more credible for the user who can now contact you should they
need to. Not only must your site be current in the technology you have used to
construct it, the information on your site must also be up to date.

Reliability

When creating a site, reliability is important as you want to make sure the user
has the best experience possible when engaging with your site. Therefore, if
you provide links for the user to click on and navigate through, you must
ensure that these all work. It is also best to remember to quote someone, or
state where you have gained your sources, as you are respecting someone
elses work and abiding by the laws of copyright, to gain a further sense of
reliability.

Authority

Authority is important as it means those who browse your site will gain a
sense of respect for the creator and their work. If there is a contact email
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

,
available, this is useful for the admin of the website to gain any feedback they
might need to improve their website. If credentials are provided, stating the
creators educational qualifications and experience, then a user is more likely
to return to the site for information, as they will believe the material they are
reading is backed up by solid research and knowledge.


Purpose

When creating a website, there is generally a purpose. Some sites are
created to advertise a product and attempt to gain the consumers attention,
to buy something or to persuade them on a certain topic. Another thing the
wed designer needs to think about is the use of advertising, and whether they
add value to the site. There is no use in assaulting the user with flashing ads
which will only make them want to look away, or make the website take longer
to load. The author also needs to think about whether they want their site to
present facts, or express opinions, and acknowledge who might be the target
audience that benefits from the information provided, as the style of the
website can then be decided based on this.


!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

.


Discussion of results
Which technology did you use to create your website? Why did you select this
particular technology? How did you address the key design & implementation
issues described above when you created your own website?
For the sake of this task, I took it upon myself to research three different
technologies including Googlesites, Webnode and Weebly. I looked into the
different styles the websites had to offer, the reviews they were given and my
previous experience particularly with Weebly and Wikispace and how that
made me feel about approaching each of these technologies. In the past, I
have found it easy to use the Wikispace host for creating a site, however I feel
that the end product can look a little amateurish, as it does not allow for much
editing to be done of the format. Weebly however, gives you the freedom of
being able to use a plain background to form your own style upon, or a
customised background, leaving the finished product looking stylish and
professional which is very helpful for those of us that are beginners in website
creation. Here are a couple of examples of my previous work in creating sites:
http://year9s.wikispaces.com, http://www.weebly.com/weebly/main.php,
http://www.weebly.com/weebly/main.php. Each of these sites were created for
an assignment based task, however, it was only due to a requirement of my
Drama and the Curriculum unit that I used the Wikispace technology to
create lesson plans for a year 9 classroom.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

=
I endeavoured to use Webnode, however I quickly became frustrated with this
technology. One advantage of Webnode is that is allows the user to create a
fully multilingual webpage, which would be convenient for anyone attempting
to create a site on languages for example, however there is not a lot of
support provided as far as tutorial videos go when creating a site on
Webnode, and there is not a lot of range to choose from with background with
this technology either. Essentially, I appreciate the simplicity of website design
with Weebly as it is easy to drag and drop essentials, making the process
quick and painless.
Copyright
I made use of Creative Commons when publishing any photographs included
on the site. I have also made sure that users will not be able to go in and edit
my work, as they will not be given the rights to add captions or anything else.
Credibility
The website creation date is specified, whilst I have also ensured that my links
were active. I have also included references, whilst also providing some
information about myself, and a way to get in contact with me.
Accessibility
I feel my website is accessible, as it is presented in a form that is easy to
navigate, with links that work successfully upon a click. I feel users could
easily navigate their way through my site, making it accessible and useful to
their needs. It is also named English Education Online, due to the fact that I
am endeavouring to become an English teacher, I want to make it easy for
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

<6
people to view my resources for the sake of enabling more use of ICT in an
English Classroom environment.
Typography
My titles, headings and subheading are clear when the user accesses my site.
I have also only used one font for the entire site, which avoids distracting from
or fracturing the continuity of my site, making it look more professional to the
viewer. The font also remains consistent in the colours used to present
information.
Colour
The font colour used is a dark pink, which contrasts with the white background
allowing information to be delivered in a legible manner. I feel this colour is
cohesive with the overall design as there is a touch of pink throughout, without
overloading the user or becoming too feminine. I feel the approach of
keeping colour to a minimum allows for the site to look more professional.
Layout
I was very pleased with the range of backgrounds available on Weebly, as it
allowed me to set up a professional looking page in a matter of seconds. The
only things I really needed to do for myself, was to create the pages for the
user to navigate through and to insert photos where appropriate. Besides this,
most things in the way of layout were done for me, which made the
experience very stress free. I also limited the amount of information placed on
the home page, to make it easier for users to understand the purpose of my
site straight away.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

<<
Conclusion
This report was produced with the purpose of defining the key design and
implementation issues that can arise when creating a website. The
technology I would recommend other users to work with, on creating their site
would be Weebly, due to the very easy manner in which it can be manipulated
to suit the purpose of your site. The key issues to focus on when creating a
website include: credibility, copyright, website navigation, accessibility and
readability. Thankfully there are many resources available to assist with the
design of creating a successful website.

Recommendations
I suggest that when creating a website, you should research carefully what
can decidedly make or break your site. A website creator should use all the
tools available to them, playing around with the different technologies, as I
have, to establish which they prefer to utilise. I would also recommend
providing details about yourself as the creator, giving your site more authority
and make sure your information is valid and up to date. If you provide
somewhere for users to contact you, you are encouraging them to comment
on anything they feel may be helpful for you to improve your site, so this is
without a doubt a worthwhile use of space. You should make use of Creative
Commons when publishing photos, and have a clear understanding of
copyright laws. Colours and design need to be consistent to remain
professional, but overall it is important to focus on creating something that is
simple and consistent, not detracting from the overall purpose of the site.
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

<+

References

Allen, S. (2014). Welcome! - CRAP Test: Evaluating Websites - Research
Guides at South Mountain Community College. [online]
Libguides.southmountaincc.edu. Available at:
http://libguides.southmountaincc.edu/CRAPtest [Accessed 15 Aug.
2014].
Copyright.com.au, (2014). Copyright in Australia Copyright Agency. [online]
Available at: http://www.copyright.com.au/get-information/about-
copyright/copyright-in-australia [Accessed 15 Aug. 2014].
Creativecommons.org, (2014). About - Creative Commons. [online] Available
at: http://creativecommons.org/about [Accessed 15 Aug. 2014].
Guidelines.usability.gov, (2014). Guidelines | Usability.gov. [online] Available
at: http://guidelines.usability.gov/ [Accessed 15 Aug. 2014].
McCarthy, C. (2014). 10 ways to make your website more successful. [online]
Cleargoalmedia.com. Available at: http://cleargoalmedia.com/10-ways-to-
make-your-website-more-successful [Accessed 15 Aug. 2014].
Media Chemistry: Exploring the Elements of Online Communication. (2014).
Onlignment. [online] Available at: http://onlignment.com/wordpress/wp-
content/uploads/downloads/2010/04/media_chemistry_ebook.pdf
[Accessed 11 Aug. 2014].
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

<*
Meredith Farkas, K. (2014). The C.R.A.P. Test - UNST FRINQ Guide for
Student Research - LibGuides at Portland State University. [online]
Guides.library.pdx.edu. Available at:
http://guides.library.pdx.edu/content.php?pid=369846&sid=3030081
[Accessed 15 Aug. 2014].
Nngroup.com, (2014). F-Shaped Pattern For Reading Web Content. [online]
Available at: http://www.nngroup.com/articles/f-shaped-pattern-reading-
web-content/ [Accessed 15 Aug. 2014].
Nngroup.com, (2014). Top 10 Mistakes in Web Design. [online] Available at:
http://www.nngroup.com/articles/top-10-mistakes-web-design/ [Accessed
15 Aug. 2014].
Scrivens, P. and Scrivens, P. (2012). Typography Is The Foundation Of Web
Design. [online] Smashing Magazine. Available at:
http://www.smashingmagazine.com/2012/07/24/one-more-time-
typography-is-the-foundation-of-web-design/ [Accessed 15 Aug. 2014].
VCQ, T. (2008). Typography: A Website Journey. Visual Communication
Quarterly, 15(1-2), pp.129--135.
W3.org, (2014). Easy Checks - A First Review of Web Accessibility. [online]
Available at: http://www.w3.org/WAI/eval/preliminary.html [Accessed 15
Aug. 2014].
Webaim.org, (2014). WebAIM: Introduction to Web Accessibility. [online]
Available at: http://webaim.org/intro/#implementing [Accessed 15 Aug.
2014].
!"#$%&" &() *+*,-*./ 0%1(2" 345+67 89:; <

<-
Websitehelpers.com, (2014). Website Design Tips | What to do, and what
NOT to do. [online] Available at: http://websitehelpers.com/design/
[Accessed 15 Aug. 2014].
WebsiteToolTester.com, (2014). Website builder reviews for 2014 -
WebsiteToolTester.com. [online] Available at:
http://www.websitetooltester.com/en/website-builder-reviews/ [Accessed
15 Aug. 2014].
Webstyleguide.com, (2014). Contents | Web Style Guide 3. [online] Available
at: http://www.webstyleguide.com/wsg3/index.html [Accessed 15 Aug.
2014].