Design web environments

1. CUV50311 Diploma of
Graphic Design
Assessment 3:
Research, report and compile
CUFDIG502A Design web
environments
OC assessment code:
31189/01
All rights reserved. No part of the material protected by this copyright may be
reproduced or utilised in any form or by any means, electronic or mechanical,
including photocopying, recording, or by any information storage and retrieval system,
without permission in writing from the copyright owner.
Requests for permission to make copies of any part of the work should be mailed to
Copyright Permissions, Open Colleges, PO Box 1568, Strawberry Hills NSW 2012.
All terms mentioned in this text that are known to be trademarks or service marks
have been appropriately capitalised. Use of a term in this text should not be regarded
as affecting the validity of any trademark or service mark.
© Open Colleges Pty Ltd, 2014
Assessment overview
Introduction
Welcome to the assessment for CUFDIG502A Design web
environments.
To prove competence in this unit you will work on two different
assessments. The first is a web scenario where you design a web
environment for a client. To do this you follow steps to assemble a
design document that could be used to build a web environment for the
client. You are not required to build the product but develop a design
and concept that could be handed over to a team for production.
The second assessment is about researching different aspects of web
environments.
Together the two events meet all the requirements for the unit. Both
assessments are to be submitted at the end of the unit.
File naming
Once you feel confident that you have covered the learning materials
for this unit, you are ready to attempt this assessment.
To help Open Colleges manage your assessment, please use the
following file-naming convention: [student number]_[assessment]_
[assessment number].doc for example 12345678_21850a_01.doc.
Assessment submission
When you are ready to submit your assessment, upload the file in
OpenSpace using the Assessment Upload links in the relevant study
period of your course. The Student Lounge provides a ‘Quick Guide
to Uploading Assessments’ if you need further assistance. Uploading
assessments in OpenSpace will enable Open Colleges to provide you
with the fastest feedback and grading on your assessment.
It is important that you keep a copy of all assessment materials
submitted to Open Colleges.

2. Tips
We strongly recommend you complete all activities and engage in the
student forums throughout the module.
Elements and critical aspects
Assessment for this unit of competency is comprised of:
 Assessment 31189/01 – The Bag Lady
 Assessment 31189/02 – Digging Deeper
Assessment 3
Research, report and compile.
Part A - Requirements
Nature of task: Research
Word count: N/A
Required
 You are required to complete progress challenge 1
Recommended
 Engage in forum discussion
Summary
 Save your final work as a PDF for final submission.
Progress challenge 1:
Bag lady requirements
NOTE: This challenge will form part of assessment 3, which can be
downloaded from the assessments page.
Write a summary of the project (1 page) including -
1. The aims, the deliverables, exclusions and constraints.
2. Find websites (at least 3) that could be considered competition for
the site. List the websites and what you think is particularly strong
or weak about each site.
3. Include any other information you feel is crucial to describe this
project.
4. Create a mind map about the perceived target audience for
the site. Include 10 categories. Use an illustration package to
construct the diagram and save as a .jpg (1 page).
5. Ask your client (trainer) any further questions you may have
relating to the project via the forum. You may also find more
information in existing FAQ posts in the forum. Refine your
documentation if necessary.
6. You will be required to locate your own assets and write your
own content for a sample layout. Begin collecting content such
as images, text, animations or video etc. that would suit this
scenario. Assemble a folder of possible content and inspiration.
31189a – Progress Challenge 01
The Bag Lady Scenario
For this scenario, you will follow steps to produce a design document

3. that outlines a potential web environment.
Client: John Simpson
Contact: (02) 9788 3354
Description: You have had a short interview with the client.
The client sells handmade bags to a boutique market. There is no shop
front as bags are sold all over Sydney at weekend markets. He says
the average buyer is female, probably between 30 and 50 years. The
business does not have any existing web presence at all.
John has decided it is time to increase his market share and get the word
out. He would like to attract people in their 20s and get them to come to
the markets and seek out the bags. He would like to push the fact that
each bag is unique and handmade.
He senses that this might work, as his product is different to the larger
mass-produced brand names.
He has no experience with web environments and is not sure if it would
be better to use Facebook, a standard website or maybe even build an
app. He will proceed with whatever you advise and is happy to spend the
money if it brings in more sales.
John’s friend, Sue, has registered a domain name for him – thebaglady.
com.au, as she suggested it would be good to park a domain before
someone else gets it, and he might need it one day.
John is waiting for you to present a proposal and has an expectation that
your work will be presented professionally. It should be easy for him to
understand and use diagrams and illustration where necessary.
Bag Lady requirements
NOTE: This challenge will help you complete assessment 3.
Write a summary of the project (one page) including the aims, the
deliverables, exclusions and constraints
Aim of site: to increase John’s market share for handbags, by spreading
the word about his products and attracting potential customers to his
market stall.
Any deliverables that John could use include:
1. a flyer to attract potential customers to the web site or app;
2. a sales catalogue that one can download online (or receive in the
Post);
3. a standard website for desktop computers (and/or versions for tablets
or mobile phones);
4. An App that is more suited for mobile devices and tablets.
5. DIY sites (Word Press, Wix etc), Facebook or any other social media,
6. a blog (Word Press or Blogger);
7. An e-commerce site like Etsy, eBay or Shopify (if John wants to sell
his products online).
Exclusions:
1. What components are (and are not) going to be on the site?
2. For instance, if John’s site accepts online payments, what credit
cards or payment types will the site accept?
3. If it does accept online payments, would the site only accept local
currencies, or would it accept all types (like Amazon does – for
instance, they accept both U.S. and Australian dollars)?
4. If there is no online payment system, then will he sell via an already
established e-commerce site like Etsy or Shopify?
5. The site may need a widget for any of the above platforms or a link
to them.
6. The same thing applies to social media – as he mentioned he might
want a Facebook page, the site might include a Facebook widget.
7. However, if there were any social media platforms he was not on,
like LinkedIn, Twitter, YouTube, etc then there would be no point in
adding a widget or link for those sites.
8. What language/s will he want his site to be published in – English

4. only? Or will he want it published in other languages like German,
French, Chinese?
Constraints:
1. The minimum and maximum dimensions of the file (i.e. width, height);
2. what fonts, layouts, colour schemes John would like (or not like) on
the site;
3. Time limits on the website;
4. What information will John give to the designer to put on the site?
5. Output on the site (RGB vs. CYMK colour output) – this means that
if there is any printable documents, then CYMK may be necessary.
6. technical issues, like Internet connectivity, potential bugs or viruses
in the computer, other Internet Security issues like accepting secure
online payments; out-of-date technology.
Tofindoutmore,Iwouldbeaskingthefollowingquestions:
This would help me work out the above.
1. What do you want as the domain name?
2. What is the purpose of the site? Is it a blog, e-commerce site,
portfolio site, etc?
3. What are the desired outcomes of the site? Social networking?
Sales? Blogging?
4. What kinds of people make up the target audience of the site?
5. What web design software do you want me to use?
6. If it is a DIY site, what online tools would you use or have me use?
7. How many pages and/or components (i.e. widgets and other
elements) shall I include? Examples would include forms like
contact forms, order forms, booking forms; videos; web banners;
click-on things like drop-down menus and navigation; and
accordions or tabs to reveal hidden information.
8. What colour schemes, fonts, and layouts would you like to see?
9. For how long do you plan to have the site up?
10. Would you like follow-up service after the design is finished?
Find websites (at least three) that could be competition
for the site. List the websites and what you think is
particularly strong or weak about each site.
Strandbags
One Australian online retailer for handbags and
accessories would be Strandbags:
Strengths:
1. They sell a huge variety of products, and styles for both men and
women1
.
2. They have stores in many different locations2
.
3. They stock many different brands3
.
4. Since going online, they have a deliveries and a returns policy4
.
5. They have a loyalty program for anyone who spends over a
certain amount5
.
6. Secure online shopping
Weaknesses:
1. I have shopped in store with them many times in the past, so I
have not had any issues with them so far.
2. I have not yet shopped on their online store, so I do not know yet.
1 Strandbags (2016): Home Page, http://www.strandbags.com.au/
2 Strandbags (2016): Store Locator, http://www.strandbags.com.au/store-locator
3 Strandbags (2016): The Company, http://www.strandbags.com.au/the-company
4 Strandbags (2016): Deliveries and Returns, http://www.strandbags.com.au/
deliveries-and-returns
5 Strandbags (2016): Loyalty Program, http://www.strandbags.com.au/loyalty/home

5. I Love Handbags
Another online store I know of is ‘I Love Handbags’6
.
Compared to Strandbags, they are a relatively new online
seller, founded by Layal McRae in 20107
.
Their strengths:
1. They offer up to 70% off in discounts.
2. They work directly with the designers and cut out the ‘middle man’.
6 I Love Handbags (2016): Home Page, https://www.ilovehandbags.com.au/
7 I Love Handbags (2016): About Us, https://www.ilovehandbags.com.au/pages/
about-us-1
3. The bags are of good quality, and leather ones are of genuine
leather.
4. Secure online shopping8
;
5. There is the option of offline ordering.
I have never shopped with them, so I do not know their weaknesses.
However, one thing I do have a problem with is those little dialog boxes
that pop up in the bottom left-hand corner. I actually find it annoying and
distracting, in much the same way as if I was going to the markets and
people kept waving things in my face to get me to buy.
My initial impression was that it sold to mostly women and girls. However,
I also found it stocks men’s styles as well9
. Therefore, I am guessing
its target market includes both men and women in who are upwardly
mobile and in high-paying jobs or careers. The products can be quite
expensive, so you would expect them to be of top quality.
8 I Love Handbags (2016): Payment Options, https://www.ilovehandbags.com.au/
pages/payment-options
9 I Love Handbags (2016): Collections – Men’s Bags, https://www.ilovehandbags.
com.au/collections/mens-bags

6. Bag World
The third site that has caught my eye is Bag World – an
Australian-owned, online only retail business which sells
bags and luggage10
.
They are not so much a handbag store as one that sells travel and
sporting goods – backpacks, suitcases, duffel bags. However, they do
cater for children11
. However, if someone is after a bit of ‘style’, they sell
wallets and purses12
.
Include any other information you feel is crucial to describe
10 Bag World (2016): Home Page, https://www.bagworld.com.au/
11 Bag World (2016): Listings – Kid’s Bags, https://www.bagworld.com.au/shop/
listings/kids-bags-and-kids-luggage
12 Bag World (2016): Listings – Wallets and Purses, https://www.bagworld.com.au/
shop/listings/wallets-and-purses/
this project.
1. Does John just wish to sell women’s handbags, or does he sell
other things like wallets and suitcases?
2. What are John’s contact details and address for the stall?
3. What are the prices for his items?
4. What materials does he use to create his bags?
Create a mind map about the perceived target
audience for the site.
1. Include 10 categories.
2. Use an illustration package to construct the diagram and save
as a .jpg (one page).
I have probably included more than 10 categories (10 categories of
what) – but I wrote down all the things I associate with the term The Bag
Lady – some of these are fashion-related, others associated with the
functions a hand bag would serve.
However, one needs to ask what is the real meaning of the term ‘Bag
Lady’ (which is something that some people might find offensive)? If so,
is it possible to ‘flip the script’ and turn it into something positive?
I have put ‘The Bag Lady’ Mind Map on the next two pages.

9. Figure 1: A furry purse bag :) (A bag that is truly a source of inspiration).
Ask your client (trainer) any further questions that you
may have relating to the project via the forum.
1. You may also find more information in existing FAQ posts in the
forum. Refine your documentation if necessary.
2. Locate your own assets and write your own content for a
sample layout. Begin collecting content such as images, text,
animations or video, etc. that would suit this scenario.
3. Assemble a folder of possible content and inspiration
Figure 2: Inspiration folder – ideas and inspiration for bag styles (different
patterns and textures I believe would make unique products).

10. Part B
Web Environments
Nature of task: Report
Word count: N/A
Required
 You are required to complete progress challenge 3
 Read through ‘The Bag Lady’ case study in Appendix A
Recommended
 Engage in forum discussion
Summary
 Save your final work as a PDF for final submission.
Progress challenge 3:
Web environments
NOTE: This challenge will form part of assessment 3, which can
be downloaded from the assessments page.
Consider the web environment(s) that best suits the scenario.
Describe the environment and technologies you would recommend
and reasons why (one page).
1. You are not limited to one technology but may recommend a suite
of web environments that would work well together.
2. You will not have to build each web environment but will be asked
to provide a sample screen design for one page of your own
choice.
3. In your analysis consider why the solution would suit the target
audience
4. Ask your client (trainer) any further questions you may have
relating to the project via the forum. You may also find more
information in existing posts in the forum.

11. 31189a - Progress challenge 03
Answer
Thescenarioisthis:John(c/oTheBagLady)wantsrecommendations
on what would be the best web environment or technology available
for the business.
The possibilities are endless, and we could go on about how which
technologies would work best for that business. However, that would
take forever, so I have hand-picked a few I feel would work best.
1. Full website/e-commerce: this site would not only advertise
and display the merchandise but also accept online payments for
the products. Other information would have to include returns (or
exchange) policies, privacy policies, online security (how will the site
accept payments and how these payments would be secure), and a
shipping policy.
2. There would need to be an accurate description for each product,
including a serial number, a price, what materials were used in the
manufacturing process, where it is made/sourced, where they get
stored and so forth.
3. The other question is a static or dynamic website: especially since it
is meant to be viewed on a desktop (so a fixed width is necessary)
or on a tablet/phone (where the fluid width comes in handy). Some
well established organizations have both e.g. the ABC (Australian
Broadcasting Commission). However, a desktop site with a fixed
with is best if one shops from home; a fluid width is best when one is
shopping and on the go.
4. An ‘e-commerce only’ site: say, something like Café Press or Red
Bubble, which takes a lot of the guesswork and logistics out of the
business but one only gets to enjoy marginal profits (and yes, they
make bags to carry things in). This is especially useful if you are not
familiar with the workings of a business or don’t have the facilities
to manufacture or store the items, or access to shipping facilities.
Another alternative is Etsy (if you want to sell fully crafted items
online) or there is eBay (takes care of all the shipping side of things).
5. Social media: I use Facebook so I would probably use this to promote
my own products and services – not so much as an ecommerce site,
but more to get the word out there. I could try Twitter, but don’t
currently have an account with them. Either way, one can receive up
to date news on the products; where the market stalls are going to be
on a given day at any time, or what the latest sales are.
6. Blogs: If John has a story to tell behind each product, then a blog will
be the shot. Otherwise, it will not be of much use if it is not kept up
to date and he either can’t update it himself or has no one to update
it for him. Word Press is one such blogging platform, Blogger is
another (one that I use).
7. Interactive forms and calendars: Adobe Muse has interactive
forms for online enquiries; there are probably add-ons available
through their store, though I haven’t yet seen any for accepting
online payments. Google and Microsoft have interactive calendars
available, as does Apple.
8. Discussion forums: these can be used in conjunction with other
social media, like Facebook or Google+, where people can get
together and share stories of their business experiences.
9. E-newsletters serve the purpose of keeping customers up to date
on the business and the products.

12. Part C – Design
Nature of task: Design
Word count: N/A
Required
 You are required to complete progress challenge 6
 Read through ‘The Bag Lady’ case study in Appendix A
Recommended
 Engage in forum discussion
Summary
 Save your final work as a PDF for final submission.
Progress challenge 6:
Design
NOTE: This challenge will form part of assessment 3, which can be
downloaded from the assessments page.
1. Create a design for the web environments
2. Draw a 1-page site diagram using a drawing package that shows
typical pages and their relationship (show no more than 10 web
pages).
3. Construct a wireframe of a chosen page (1 page).
4. Convert the wireframe into a static screen design using graphics
software (1 page). This screen layout should show:
5. Navigation elements
6. Actual content and media elements. Source these elements from
sites that share royalty free content.
7. Metaphor
8. Actual meaningful text (not Lorem Ipsum).
31189a - Progress challenge 6
Answer
Here is the hand-drawn diagram of my website (how I originally hoped
to ‘construct’ it). There are three categories of ‘handbags’ and purses:
women’s bags (for going out) – handbags and shoulder bags for instance;

13. wallets and purses (men’s and women’s); and backpacks/luggage.
These three categories were originally going to be in the top navigation
bar. There was also going to be a footer (or bottom navigation bar) with
a contact page, an order form, a shipping policy and a privacy policy.
There are probably more than ten pages on this so I may have to pare
this down, and put all the product categories under ‘Products’.
An alternative way is through card sorting, where, according to Paul
Boag13
, is a way of sorting through the ‘information architecture’ of the
site (the above drawing at least gives me an idea as to how many pages
and categories are within the site). Sam NG14
, of UX Matters believes
that card sorting is:
13 Boag, P (2005): Card Sorting, in Boag World, https://boagworld.com/usability/card-
sorting; Accessed 22nd
November, 2016;
14 NG, S (2007): Card Sorting – Mistakes Made and Lessons Learned, in UX Matters,
http://www.uxmatters.com/mt/archives/2007/09/card-sorting-mistakes-made-and-
lessons-learned.php
… Information architecture comprises a
navigation system, a classification system, a
labelling system, and a search system.
Card sorting certainly can provide input into
an organization system— What content goes
together—and a labelling system—what to
call things —but it has very little to do with a
navigation system or a search system.
Here is how Boag believes one could go about it:
Simply label 20-30 index cards with headings
from the various sections, subsections and
pages of your website. Depending on the
complexity of the site, you might also wish
to include a brief description. It is also useful
to number the cards so that you can more
easily analyse the results of your test later.
In other words, I can brainstorm all the categories I can think of, and then
if I make a mistake, I can correct it by moving the cards around to see
what is suitable for each category.
I did a card sort using sticky, ‘post-it’ notes with all the pages and
categories I could think of. I figured it would be easier to correct than
simply doing a drawing on paper because I can correct any mistakes I
may have made, and/or pare down the number of pages to 10 (so far, I
have 14 but I could either lump 2 or more similar categories together or
remove any that might be irrelevant).
An alternative option (for navigation) is through ‘breadcrumb trails’,
where the ‘crumbs’ are situated horizontally on top of the page below a
title bar or header. They often…
‘…provide a trail for the user to follow back
to the starting or entry point. A greater-than
sign (>) often serves as hierarchy separator,
although designers may use other glyphs
(such as » or ›), as well as various graphical

14. icons’15
.
The term ‘breadcrumb’:
‘The term comes from the trail of bread
crumbs left by Hansel and Gretel in the fairy
tale of the same name’16
Examples of breadcrumbs:
1. Page viewed > Page viewed > Page viewed > Page viewed > Page
currently being viewed
2. A viewer may look at seven pages and the breadcrumbs will show as
follows: Home page > Services > About Us > Home page > Latest
Newsletter > Home page > Page currently being viewed
3. Other breadcrumbs will show a hierarchical structure: Home page >
Section page > Subsection page
I have also constructed a ‘wireframe’ using Photoshop, and here is what
I hope the home page would look like. It has a header with the logo,
navigation bar and contact page, but no order form, shipping or privacy
policy. I have a coral, white and black (or dark grey) colour scheme in
mind (even though the header for wireframe template is orange, it is the
next best thing to coral, or pinkish-red).
15 Wikipedia (2016): Breadcrumb (Navigation), https://en.wikipedia.org/wiki/
Breadcrumb_(navigation)?oldid=759141583
16 Ibid; see also Mark Levene (18 October 2010). An Introduction to Search Engines
and Web Navigation (second Ed.). Wiley. p. 221. ISBN 978-0470526842. Retrieved 12
November 2012. in http://books.google.com.pk/books?id=mDI72_9-bw0C&pg=PA221;

15. Content and Media Elements
The ‘star’ product is what I call my ‘furry purse’ bag – which is a women’s
handbag that is furry (made of faux fur, so no animals suffered any harm
in the process17
). Though it the featured product, the bag was actually
something I bought from a local second-hand shop a few years’ ago. I
have several pictures of this item, which I have taken for myself.
Another item I have included is the ‘furry purse’ makeup bag – a bag or
purse with many uses: a clutch bag, a make-up or toiletries bag (good for
travel), a purse or a cuddly toy. Again, I bought this item from the same
local second-hand shop as the ‘furry purse’ bag.
I have decided to include textures and colours of several furry toys and
items I own in my home, which I believe will give me some ideas for
more personalised designs of this product.
17 People for the Ethical Treatment ofAnimals (2016): Video of Crocodile Skin Handbag
Making, in the PETA Official Facebook Page, https://www.facebook.com/official.peta/
videos/10154885036849586/; and ‘This is why I don’t wear leather’; https://www.
facebook.com/official.peta/videos/10154130847364586/ (more relevant to the concept
of the Furry Purse Bag); and ‘Trapped Animal’s Final Moments of Life, in https://www.
facebook.com/official.peta/videos/10154739608119586/

16. I had also constructed a logo for The Bag Lady, with a simple picture of
a handbag and the ‘lust script’ for the text.
Metaphors
According to Wikipedia18
, metaphors are:
‘…sets of user interface visuals, actions and
procedures that exploit specific knowledge
that users already have of other domains.’
KatalinSzabo19
explainsthehistoricaloriginsoftheword‘metaphor’:
Originally, a Greek word means, “Carrying
across”. The essence of metaphor is to give
an idea of some unknown thing or concept,
by illustrating it with something else which is
known and which originally has nothing to
do with it. The metaphor identifies the two
things with each other, for the purpose of
illustration. In fact, the metaphor is an error
committed on purpose, because the two
things, which are said to be identical, are in
fact not identical.
About the ‘world wide web’, she also states that:
The Web can be pictured as a three-
18 Wikipedia (2016): Interface Metaphor, https://en.wikipedia.org/wiki/Interface_
metaphor?oldid=758927925;
19 Szabo, K (1995): Metaphors and the User Interface, http://www.katalinszabo.com/
metaphor.htm

17. dimensional network connecting computers
(or files or persons) situated in different
points of the globe. The web is constantly
changing, growing.
However, it is not a spider’s web: there is no
spider in the centre (and there is no centre,
either). We can also regard it as a network
in a fictitious multi-dimensional space,
interconnecting complex data structures.
She then states that one can liken the Internet to:
A Living organism: the Net can be regarded
as a constantly changing, developing
organism consisting of cells, which come to
life and die. The organism itself may die if too
many cells die in it.
A big coral reef that is made up from lots of
tiny beings, each of them contributing a little
to the reef, which in itself is much more than
just the tiny contributions added together.
A big real estate market: real space can
be a metaphor for Cyberspace. The real
estates (i.e. “places” in the Net) can be sold,
rented, some are more valuable than others.
It is difficult to predict the future value of
any particular estate, but there are certain
trends. There is a gold rush as well - but not
too much gold is to be seen yet.
A Large department store: It is huge and
quite disorganised. If we find something,
than it is likely that the goods around it are
of similar nature, but similar goods can be
found at any other place in the store, too. We
usually cannot find an item, which exactly
matches our needs, but it is likely that we will
find something similar. We find many things,
which we do not really need, but we take
them anyway because they are so cheap.
I personally like the fourth metaphor as The Bag Lady is an online retail
store, marketplace or environment where items are bought and sold (so
this analogy is quite fitting).
Hence, they are analogies or themes for sites to help unify the various
pages. In CSS Zen Garden, different designers contribute themed CSS
designs to bring a standard web page to life20
. Each example uses a
different metaphor although the content is identical.
By using meaningful images and assets that support the metaphor, the
user will find the environment clear and will be able to make sense of it.
Text
Home Page:
There is a picture accompanying this text.
20 CSS Zen Garden (2016): The Beauty of CSS Design http://www.csszengarden.com/

18. Some other text will be saying: Order now for July 2017 – for just $50
AUD. I will most likely link this text up with an order form.
‘About us’:
Manager: John Simpson, Bag Maker
John Simpson has been designing and manufacturing his unique
handbags since 1997. He gained his qualifications in Fashion design
through the Sydney College of the Arts in 1996. Prior to that, he gained
an Advanced Certificate in Fashion through the St George College of
TAFE in 1992. He currently has a market stall in Rockdale Plaza.
Designer: Colleen Sedgwick, Ux Designer
Colleen Sedgwick has been an Artist and Designer since 2011. She
had completed a Certificate I in Cartooning and Illustration in 2011, and
a Certificate I in Illustration and Drawing Made Easy, both through Open
Colleges School of Art and Design. She is now near completion of a
Diploma of Graphic Design though the same College.
For the Blog:
The story of the Furry Purse Bag:
Uses for a Furry Purse by Colleen Sedgwick
I owned a furry purse when I was younger (during the late 1970s and
early 1980s). One of the main uses for it was to carry money in, so the
main use for it was to carry and store money, credit cards, receipts and
the like.
So anyway, here were some of the things one would assume about
a furry purse:
1. It is for carrying money in;
2. It is for females – especially old ladies;
3. An animal had to die (like a kangaroo) so someone could have a
furry purse;
4. It is old-fashioned. - Who carries one nowadays?
5. They go ‘mangy’
However, what if:
1. Furry purses had uses other than the storage of money.
2. That people, other than old women, could have one.
3. That they came back into fashion.
4. That they could be made from synthetic fur, or wool, or any
material other than real fur (after all, wallets can be made either
out of leather or out of something else, so why not furry purses)?
5. In addition, because they are not made of real fur, they do not
have to go mangy as they wear out.
Moreover, other than as a purse, a furry purse could be used as:
1. A face or hand warmer
2. A cuddly toy (like a teddy bear)
3. A Muppet (one of Jim Henson’s creations), a bit like Cookie
Monster, Oscar, Grover or any of the other similar looking Muppets
or Sesame Street characters;
4. A ‘man-purse’ where one could re-use the fur and make it into a
furry wallet for men;
5. Patch-work creations, made up of still-good pieces of fur or
leather;
6. A leather purse (if the fur has worn off).
7. Now – add some handles for a hand or shoulder bag.
From these humble beginnings *emerged* the Furry Purse Bag –
the fluffy carryall for all your fashion needs.
Please note: the modern Furry Purse Bag is made from faux fur, so no furry animals
were harmed in the procuring or manufacture of these bags.

19. Part D – Review and confirm
Nature of task: Feedback
Word count: N/A
Required
 You are required to complete progress challenge 7
 Read through ‘The Bag Lady’ case study in Appendix A
Recommended
 Engage in forum discussion
Summary
 Save your final work as a PDF for final submission.
Progress challenge 7: Review & confirm
NOTE: This challenge will form part of assessment 3, which can be
downloaded from the assessments page.
Design a short questionnaire of 10 questions to gather feedback
about your designs. Contact at least 5 people willing to assist with
this. Ask them to respond and provide meaningful feedback about
the work you have completed in Part C, in particular the static screen
design.
Compile all the pages you have worked through in the assessment
so far into a final well-presented document. Include a table of
contents, title and your name.
Check that the design is a strong solution to the original brief.
Check that all the required parts are listed, including a sample of
your questionnaire.
Refine or add other components to your design in light of feedback
from your client (trainer) and others that have provided feedback.
Export the document as a .pdf and submit the document for marking.

20. 31189a – Progress Challenge 07
Review and confirm
NOTE: This challenge will help you complete
assessment 3.
Answer
Establishing client needs
According to Luke Reimer in Smashing Magazine21
, the web design
process has five main steps:
1. Planning: Knowing what the client’s requirements are; drawing up
a project charter (or similar document) to ensure everyone agrees upon
the same things; draw up a site plan or map; draw up a contract (which
is legally binding); gain access to servers and build folder structure; and
determine required software and resources.
2. Designing: Make a wireframe and plan design elements; design
a mock-up in Photoshop or Illustrator (and organise your prototype into
layers as you do so); get the client to review/approve site and/or make
any necessary changes based on their feedback.
3. Develop the web content: Build a development framework or
contents management system, create/code templates for each page
type (e.g. Home page, general content, blogs, forms etc); develop and
test for features and user interactivity (particularly for static objects); fill
with content (the client or writer will usually do this); and test and verify
21 Reimer, L (2011): Following a Web Design Process; https://www.smashingmaga-
zine.com/2011/06/following-a-web-design-process/
links and functionality.
4. Launch the website for public viewing: this involves polishing
up the site and testing for user interactivity beforehand, and then moving
it to a permanent web server. You also need to run the website through
the following things: code validators, broken link checkers, website
health checks, spell-checker etc; before finally testing it across different
kinds of browsers.
5. Perform post-launch checks: ensure that both parties meet
all the contractual obligations; that the client is happy with what you
have done for them; and that you close the deal without any ‘burned-
bridges’. Do follow-up checks very now and then to ensure the client is
still satisfied.
Ten questions I am likely to ask (in the beginning) would include:
1. What do you want as the domain name?
2. What is the purpose of the site? Is it a blog, e-commerce site,
portfolio site, etc?
3. What are the desired outcomes of the site? Social networking?
Sales? Blogging?
4. What kinds of people make up the target audience of the site?
5. What web design software do you want me to use?
6. If it is a DIY site, what online tools would you use or have me
use?
7. How many pages and/or components (i.e. widgets and other
elements) shall I include?
Examples would include forms like contact forms, order forms, booking

21. forms; videos; web banners; click-on things like drop-down menus and
navigation; and accordions or tabs to reveal hidden information.
8. What colour schemes, fonts, and layouts would you like to see?
9. For how long do you plan to have the site up?
10. Would you like follow-up service after the design is finished?
Establish your target audience
What audience is the site aimed at? An example would be John’s
customers – the people buying the bags from The Bag Lady and/or
the end users (who are likely to use the bags).
Work out the best User Experience for your target audience
The Open Colleges e-book defines User experience (UX) as:
… thinking about how a user interacts with a site. It considers the user’s
expectations and abilities, and why they may be visiting a site. A good
web environment tries to improve the user’s experience as they navigate
around a site.
They also add:
One way to consider the usability of a site is to use the Usability
Honeycomb by Peter Morville (visit LINK 4 to find out more).
Ask yourself if a particular site meets these criteria:
• Useful: Meets a need – people can access information on The
Bag Lady’s products and services
• Usable: Easy to use – navigation bar at top showing categories
of products, store locations, departments; able to click on the images for
more information on the different products, rolling banner showing latest
news; disclaimers; cookies policy – makes information easier to access
• Desirable: Carries through the branding of the product and
creates an image – the logo and colour scheme are shown throughout
the site.
• Findable: Desired content is easy to find – the site is accessible
via Google and other search engines; and information is available via
navigation bar and other links within the site.
• Accessible: People with disabilities can access the information.
Actually, I am not sure, because people with visual impairments might
not be able to access the site. However, the availability of online ordering
makes it easy for people with mobility issues to purchase items.
• Credible: The information presented is trustworthy and up-to-
date. There is a Terms and Conditions page22
, privacy policy and cookies
policy. In addition, there is a returns policy for anyone dissatisfied with
his or her purchase.
(As well, you should be able to follow the site through social media if you
cannot always look up the website).
Testing
As my computer has Google Chrome and Internet Explorer, I am most
likely to use these browsers to test the website.
So, what I would need to know is what browsers does my client use, how
will the website look when using them, and what devices will the client
use? In turn, this will determine how I will design the web site, in terms
of what content could I include on it, whether or not I would have to do a
22 IKEA (2015): IKEA Tasmania, http://www.ikea.com/ms/en_AU/media/pdf/tasmania/
IKEA_terms_2015_Tasmania.pdf

22. fixed or fluid width, include responsive or static content, or should it be
mobile-only site.
Hardware and software
What hardware and software would the site work best on? How
would John consider getting the word out there via media?
Category Description and comparison
Delivery platforms
These include CD-ROM, DVD, BlueRay, mobile device, digital television,
internet (including WWW, FTP, document attachment/ download, instant
messaging, social media).
For this, I chose digital TV (DTV). Here in Australia, DTV was introduced
as Digital Terrestrial TV, while analogue TV was phased out in 201323
. It
first came to air in the early 2000’s. Wikipedia defines Digital television
(DTV) as:
… The transmission of audio and video by digitally processed and
multiplexed signal, in contrast to the totally analogue and channel
separated signals used by analogue television. Digital TV can support
more than one program in the same channel bandwidth24
.
The advantages of digital over analogue TV include sharper DVD-quality
widescreen pictures, CD-quality digital stereo sound and improved
reception. Digital TV also enables broadcasters to offer more services
or show multiple programs at the same time and a number of new TV
23 Wikipedia (2016): Digital Terrestrial Television in, (https://en.wikipedia.org/wiki/Digi-
tal_terrestrial_television_in_Australia?oldid=753505491
24 Wikipedia (2016): Digital Terrestrial Television in Australia, https://en.wikipedia.org/
wiki/Digital_television?oldid=752611422
channels to choose from. Other benefits include closed captioning,
providing deaf and hearing impaired people with a text version of
dialogue, electronic program guides which display on screen information
on current and future programming and multi view, where different
camera angles of a program, such as a sports program, can be viewed25
(mind you, this is not on my own TV, but some top-of-the-range brands
include this feature).
You can receive digital TV on your current analogue television provided
the television can be connected to a set top box. Alternatively, digital TV
signals can be received on an integrated digital television where a digital
receiver is built into the set. All you needed was a TV and a good aerial
when it was just analogue TV.
This would be useful in considering if John had intentions of advertising
on television (digital TV has now replaced analogue TV for transmission).
Operating systems
These include Apple, Windows, Android, UNIX, Linux, Nintendo,
and Sony.
I mostly use Windows, so I thought I would write about their main
competitor, Apple (also called a Mac, an Apple Mac, or Apple Macintosh).
This is usually the term for desktop and laptop computers. The iMac26
is
the desktop model; the Mac Book27
, Mac Book Pro28
and Mac Book Air29
25 Australian Communications and Media Authority ((2016): Digital Television FAQ,
http://www.acma.gov.au/Industry/Broadcast/Spectrum-for-broadcasting/Spectrum-dig-
ital-television/digital-television-frequently-asked-questions
26 Apple (2017): iMac, Retina – in Colossal and Ginourmous, http://www.apple.com/
au/imac/
27 Apple (2017): Mac Book – Light Years Ahead, http://www.apple.com/au/macbook
28 Apple (2017): Mac Book Pro, http://www.apple.com/au/macbook-pro/
29 Apple (2017): Mac Book Air – Make Big Things Happen, All Day Long; http://www.
apple.com/au/macbook-air/

23. are all laptop models.
One obvious advantage of the iMac is its onscreen image quality (or
what they call Retina display). Other advantages or benefits of owning
an iMac include high storage capacity and performance; not to mention
a slick design. The same could also be said of the Mac Books – Apple
also boasts of long battery lives (of 10-12 hours) for all its laptop models
(which are what you want when you are on the go). Additionally, the Mac
Book Pro has a function bar on the top of a keyboard that replaces the
function (F 1-12) keys and a touch ID (this is all new to me). However,
these are all the latest models that Apple has to offer.
The name of the Operating System for Macs is the MacOs30
- you can
use it with your other Apple devices (iPhone or iPad); back up the files
using iCloud and ask Siri to find files for you (Siri, being the app, where
all you have to do is speak into a microphone and the app will find what
you are after). Windows 10 has a similar application called Cortana,
which also performs the same function.
The main drawback of Apple Macs (in comparison to Windows or PC’s/
personal computers) is the cost.
Relevance – John may well use a different operating system from my
own if he wants to work on the website himself.
Delivery speeds
These range from Modems offering delivery from 14.4 kbps to cable and
now the NBN Rollout. The quicker the delivery speed, the easier it is to
‘spread the word’.
Plug-ins
These include: Flash, QuickTime, Real player, Windows Media Player,
30 Apple (2017): Mac OS, It’s why there’s nothing else, http://www.apple.com/au/mac-
book-pro/macos/
Acrobat
Swf31
: is an abbreviation for ‘small web format’ (and is known as
Shock Wave file) - an Adobe Flash file format used for multimedia,
vector graphics and Action Script. SWF files can contain animations
or applets of varying degrees of interactivity and function. Swf’s uses
include multimedia – online games, animations, videos and other motion
graphics. One can generate swf files using Adobe software packages
like Flash, Flash Builder (an IDE), Adobe Animate (the replacement for
Adobe Flash as of Feb. 2016), and After Effects.
QuickTime32
is an extensible multimedia framework developed byApple
Inc., capable of handling various formats of digital video, picture, sound,
panoramic images, and interactivity. First made in 1991, the latest Mac
version, QuickTime X, is currently available on Mac OS X Snow Leopard
and newer. In other words, QuickTime plays videos for Mac and other
Apple OS. Advantages of QuickTime are that it is available free of charge
for both MacOs and Windows operating systems. There are some other
free player applications that rely on the QuickTime framework, providing
features not available in the basic Quick-Time Player. Disadvantages:
QuickTime is bundled with MacOs. QuickTime for Microsoft Windows is
downloadable as a standalone installation, and was bundled with Apple’s
iTunes prior to iTunes 10.5, but is no longer supported and therefore
security vulnerabilities will no longer be patched.
Windows Media Player33
: this is the media player available for Windows
and Windows Phone operating systems. However, Mac users can
download Windows Media Components for QuickTime to play Windows
Media files.
Acrobat: Adobe Acrobat34
is a family of application software and Web
31 Wikipedia (2016): Small Web Format, https://en.wikipedia.org/wiki/SWF?ol-
did=751715503
32 Wikipedia (2016): Quick Time, https://en.wikipedia.org/wiki/QuickTime?ol-
did=749513813
33 Wikipedia (2016): Get Media Player, https://support.microsoft.com/en-us/help/14209
34 Wikipedia (2016): Adobe Acrobat, https://en.wikipedia.org/wiki/Adobe_Acrobat?ol-

24. services developed by Adobe Systems to view, create, manipulate, print
and manage files in Portable Document Format (PDF). The Portable
Document Format (PDF)35
is a file format used to present documents in
a manner independent of application software, hardware, and operating
systems.
Each PDF file encapsulates a complete description of a fixed-layout
flat document, including the text, fonts, graphics, and other information
needed to display it. A PDF file captures document text, fonts, images,
and even formatting of documents from a variety of applications. You
can e-mail a PDF document to your friend and it will look the same way
on his screen as it looks on yours, even if he has a Mac and you have
a PC.
Hence, the advantages of Acrobat are that regardless of what hardware,
operating system or software you or your recipient uses, you can still
send or transfer documents to their computer, or view them on your own.
Moreover, you can create, print and manage these same files, as long
as you have the software on your computer. You can also download the
software free.
The main drawbacks of Acrobat are security issues e.g. OUTLOOK.
PDFWorm or Peachy; and usage restrictions e.g. PDF files may also
contain embedded DRM restrictions that provide further controls that
limit copying, editing or printing.
The restrictions on copying, editing, or printing depend on the reader
software to obey them, so the security they provide is limited. If, for
instance, John wanted a website that had downloadable files (say, for
instance, PDF files for downloadables, Flash or Shockwave for videos or
animations, and so forth), then a plug-in might be necessary for people
did=755248526
35 W3 Schools (2017): HTML – The Language for Building Web Pages, http://www.
w3schools.com/default.asp
to access these files.
Programming
These programming languages include: PERL, SQL, CGI, HTML,
ASP, jQuery, JavaScript36
I am not fully familiar with many of these programming languages;
however, the most common three languages used for web design include
HTML, CSS and JavaScript (This is not to be confused with Java (the
programming language) or Java (the operating platform). Moreover,
like Java, one should *not* confuse it with the Javanese (Indonesian)
language).
Programming languages related to HTML and CSS include Bootstrap
(for mobile sites); W3 CSS; Icons, and graphics.
Programming languages related to JavaScript include jQuery;
jQuery Mobile; AppML; AngularJS; JSON and AJAX
Java: Java37
was originally developed by James Gosling at Sun
Microsystems (which has since been acquired by Oracle Corporation)
and released in 1995 as a core component of Sun Microsystems’
Java platform. The language derives much of its syntax from C and
C++, but it has fewer low-level facilities than either of them. Java was
originally designed for interactive television, but it was too advanced
for the digital cable television industry at the time. One advantage of
Java (as a programming language) is its adaptability – it can operate
on any hardware and operating system with adequate run-time support.
However, Java is notorious for being slow and requires more memory
than programs written in C++ and other object-oriented languages –
particularly when it comes to web browsing. Uses for Java include the
36 W3 Schools (2017): HTML – The Language for Building Web Pages, http://www.
w3schools.com/default.asp
37 Wikipedia (2016): Java (Programming Language), https://en.wikipedia.org/wiki/
Java_(programming language)?oldid=753640952

25. ‘Hello World’ program, Java applets (in HTML pages), Java servlets (to
answer online client enquiries), and Android operating systems.
JavaScript38
: Alongside HTML and CSS, JavaScript is one of the three
core technologies of World Wide Web content production; the majority
of websites employ it, and all modern Web browsers support it without
the need for plug-ins.
Although there are strong outward, similarities between JavaScript
and Java, including language name, syntax, and respective standard
libraries, the two are distinct languages and differ greatly in their design.
JavaScript was influenced by programming languages such as self and
Scheme.
JavaScript is also used in environments that are not Web based, such
as PDF documents, site-specific browsers, and desktop widgets. Newer
and faster JavaScript virtual machines (VMs) and platforms built upon
them have also increased the popularity of JavaScript for server-side
Web applications.
Netscape originally developed JavaScript, collaborating with Sun
Systems in the process. Later on, it was adopted by Microsoft and is
now a trademark of the Oracle Corporation.
Uses for JavaScript include: The most common use of JavaScript is to
add client side behaviour to HTML pages, also known as Dynamic HTML
(DHTML). Scripts are embedded in or included from HTML pages and
interact with the Document Object Model (DOM) of the page39
.
Some simple examples of this usage are:
1. Loading new page content or submitting data to the server via Ajax
without reloading the page (for example, a social network might allow
38 Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/JavaScript?ol-
did=753351126
39 Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/JavaScript?ol-
did=753351126
the user to post status updates without leaving the page).
2. Animation of page elements, fading them in and out, resizing them,
moving them, etc.
3. Interactive content, for example games, and playing audio and video.
4. Validating input values of a Web form to make sure that they are
acceptable before being submitted to the server.
5. Transmitting information about the user’s reading habits and browsing
activities to various websites. Web pages frequently do this for Web
analytics, ad tracking, personalization or other purposes.
JQuery40
: a popular JavaScript library designed to simplify DOM-
oriented client-side HTML scripting along with offering cross-browser
compatibility because various browsers respond differently to certain
vanilla JavaScript code.
Anyway, I chose these three languages, so one of these days; I will
understand the meanings of these three terms.
Server side languages include: SQL (Database language); PHP41
(an
alternative to HTML42
), Unicode and ASP (Active Server pages43
).
John might not have knowledge of any programming languages.
However, anyone designing a site or an app for his business needs
40 Wikipedia (2016): Unicode, https://en.wikipedia.org/wiki/Unicode
41 Wikipedia (2016): PHP, https://en.wikipedia.org/wiki/PHP
42 Wikipedia (2016): Unicode, https://en.wikipedia.org/wiki/Unicode
43 Wikipedia (2016): Active Server Pages. https://en.wikipedia.org/wiki/Active_Serv-
er_Pages; and A.S.P Tutorials Point (2016): ASP Net Tutorial, https://www.tutorial-
spoint.com/asp.net/pdf/index.pdf

26. this knowledge.
Authoring software
These include Dreamweaver, InDesign, Flash, and Muse.
Some of these software applications include:
Adobe AIR (Adobe Integrated Runtime): a programme by Adobe that
allows designers to create applications and video games for phones and
tablets using Adobe Flash content and Action Script 3.0 software to allow
users to run them as a native application and outside of a web browser
. In other words, one can install and use them as a separate app on
their desktop or laptop computer, or they can use them on their phone
or tablet. Examples of applications designed using this software include
eBay Desktop, Pandora One desktop, Tweet Deck, the former Adobe
Media Player, Angry Birds, and Machinarium, among other multimedia
and task management applications44
.
Adobe Flash45
: This software, formerly Macromedia Flash or Shockwave
Flash, is a multimedia software platform for production of animations,
browser games, rich Internet applications, desktop applications, mobile
applications and games. It also displays text, vector and raster graphics
to provide animations, video games and applications, allows streaming
of audio and video, and can capture mouse, keyboard, microphone and
camera input.
Again, a web designer will need to know these things, even if John
44 Adobe (2011): Adobe AIR, http://help.adobe.com/en_US/air/build/air_buildingapps.
pdf
45 Wikipedia (2011): Adobe Flash, https://en.wikipedia.org/wiki/Adobe_Flash?ol-
did=751325915
does not.
Browsers
These include Chrome, IE, Firefox and different versions.
Firefox46
(also known as Mozilla Firefox) is an internet browser in direct
competition with other browsers like Chrome and IE – previously, it was
known as Netscape47
or Netscape Navigator48
. I have never used it so I
do not know what it is like. However, many users reported Firefox to be
slower than other browsers like Google Chrome but faster than Internet
Explorer.
I have, however, used Chrome, IE and Safari. So far, on a desktop, I
have found Chrome to be faster than Internet Explorer but about the
same as Microsoft Edge when it cam to browser speed; and Chrome
to be more usable when it came to accessing any links that needed to
beaccessed (some of which I couldn’t access on Microsoft Edge).
Screens
In terms of Sizes, resolution and colours.
Safe areas (screen sizes) : Safe area is a term used in television
production to describe the areas of the television picture that can be
seen on television screens.
Older televisions can display less of the space outside of the safe area
than ones made more recently. Flat panel screens, Plasma displays
and liquid crystal display (LCD) screens generally can show most of the
46 Wikipedia (2016): Firefox, https://en.wikipedia.org/wiki/Firefox?oldid=752616644
47 Wikipedia (2016): Netscape, https://en.wikipedia.org/wiki/Netscape
48 Wikipedia (2016): Netscape, https://en.wikipedia.org/wiki/Netscape

27. picture outside the safe areas.
The use of safe areas in television production ensures that the most
important parts of the picture are seen by the majority of viewers.
The size of the title-safe area is typically specified in pixels or percent.
The NTSC and PAL analogue television standards do not specify official
over scan amounts, and producers of television programming use their
own guidelines.
Resolution49
:
1. The definitions of the safe areas are given in numbers of lines for
the vertical direction and number of pixels for the horizontal direction,
which are now more definitive than the percentages used previously.
However, percentages are also included because they are the basis on
which comparisons they make.
2. The line numbering of interlaced scanning rasters has been calculated
on the basis that field 1 is paired with the field 2 line below it, and the
line from field 1 which is just inside the percentage box is defined as the
edge of the safe area concerned.
3. The pixel numbering has been calculated by using the same notation
as in SMPTE 274M/296M and ITU-R BT.1120-7, in which the first sample
of the active part of a digital line is counted as value “0”. For HD services,
this is also the first sample of the active image.
4. The safe areas are defined by the first and last safe line in vertical
direction and by the first and last safe pixel in the horizontal direction. In
addition the total number of lines (vertical) and pixel (horizontal) which
49 Operating Eurovision and Euradio (2016): R95 Safe Areas for Television https://
tech.ebu.ch/docs/r/r095.pdf
are within the safe areas are given.
5. The coordinates of the centre of an image are defined as - vertically,
there will be an equal number of lines within the clean aperture above
and below the centre point, and - horizontally, there will be an equal
number equal number of pixels within the clean aperture to the left and
the right of the centre point.
Colours:
These are RGB and CMYK – RGB (Red, green and blue) – for screens
(unlike CMYK for print).
Again, whether John is advertising his business via TV or the Internet,
he will have to know how to effectively advertise the business and
merchandise in a manner that is visually pleasing to the audience (or if
he doesn’t, then the web designer assigned the task will need to know
these things).
Compression
Compression Audio, video: Digital compression for HD TV: these
enable TV stations to transmit signals to digital, audio and video signals
to one’s TV. More on digital compression for TV can be seen here .
Audio: MP3 (MPEG-3), WAV (uncompressed sound), WMA (Windows)
– amongst others.
With compression – the greater the compression, the easier it is for a
file to transmit; however, the drawback is that it declines in quality.
For instance, if John wanted ads for his business, then he would
have to consider how he would advertise online for these via

28. YouTube, Vimeo or some similar site.
Standards
These include the W3C site, accessibility, usability, and SCORM.
W3C site – this is used to test whether or not the links are valid, unbroken
and take you to the pages that you need to see50
.
Accessibility – the Internet needs to be accessible to all, regardless of
age51
, ability, gender, geographic location, ethnic or linguistic background
and so forth.
Usability – everyone needs to be able to use the site, hence the
navigation must be quick and easy, you must be able to buy and sell
securely online, access information, the site must be frequently upgraded
and be quick to load.
People will want to be able to use the site and access it, which is vital for
John getting the word out there, so they will buy his merchandise.
Test and validate the site
According to Wikipedia, the three most popular browsers are
Google Chrome, Firefox and Safari. Internet Explorer is sixth down
this list52
. The latest results of another study by the W3 School53
of
five different browsers (Chrome, Firefox, Internet Explorer, Safari and
Opera) suggests that Chrome enjoys the highest rates of browser usage
50 World Wide Web Consortium (2017): W3C Welcomes Organizations Officially
Combine to Develop Roadmap for Future Publishing, https://www.w3.org
51 W3 Schools (2016): The Most Popular Browsers, http://www.w3schools.com/
browsers/
52 World Wide Web Consortium (2017): W3C Welcomes Organizations Officially
Combine to Develop Roadmap for Future Publishing, https://www.w3.org
53 W3 Schools (2016): The Most Popular Browsers, http://www.w3schools.com/
browsers/
at 73.7%, followed by Firefox (15.5%), and then Internet Explorer (4.8%).
As my computer has Google Chrome and Internet Explorer, I am most
likely to use these browsers to test the website.
So, what I would need to know is what browsers does my client use, how
will the website look when using them, and what devices will the client
use? In turn, this will determine how I will design the web site, in terms
of what content could I include on it, whether or not I would have to do a
fixed or fluid width, include responsive or static content, or should it be
mobile-only site.
This may have some bearing as to what browsers a customer might use
to access information on The Bag Lady – if Chrome, for instance, is the
most popular browser among John’s customers, then a person will take
more notice of a site that looks good in that browser. However, if that
person also uses Internet Explorer, then they will be more likely to look at
the site in that one also. Hence, it always pays to test in more than one
browser, and one type of device. I can also say that W3 validator site
also has the same function for testing for broken links (as a customer
can be put off looking on that site if there are one too many links that
lead you to basically ‘nowhere’ and display error messages instead of
the page they are intended to display).

29. • A.S.P Tutorials Point (2016): ASP Net Tutorial, https://www.tutorialspoint.
com/asp.net/pdf/index.pdf
• Adobe (2011): Adobe AIR, http://help.adobe.com/en_US/air/build/air_
buildingapps.pdf
• Apple (2017): iMac, Retina – in Colossal and Ginourmous, http://www.apple.
com/au/imac/
• Apple (2017): Mac Book – Light Years Ahead, http://www.apple.com/au/
macbook
• Apple (2017): Mac Book Air – Make Big Things Happen, All Day Long; http://
www.apple.com/au/macbook-air/
• Apple (2017): Mac Book Pro, http://www.apple.com/au/macbook-pro/
• Apple (2017): Mac OS, It’s why there’s nothing else, http://www.apple.com/
au/macbook-pro/macos/
• Australian Communications and Media Authority ((2016): Digital
Television FAQ, http://www.acma.gov.au/Industry/Broadcast/Spectrum-
for-broadcasting/Spectrum-digital-television/digital-television-frequently-
asked-questions
• Bag World (2016): Home Page, https://www.bagworld.com.au/
• Bag World (2016): Listings – Kid’s Bags, https://www.bagworld.com.au/shop/
listings/kids-bags-and-kids-luggage/
• Bag World (2016): Listings – Wallets and Purses, https://www.bagworld.com.
au/shop/listings/wallets-and-purses/
• Boag, P (2005): Card Sorting, in Boag World, https://boagworld.com/usability/
card-sorting; Accessed 22nd November, 2016;
• CSS Zen Garden (2016): The Beauty of CSS Design http://www.csszengarden.
com/
• I Love Handbags (2016): About Us, https://www.ilovehandbags.com.au/
pages/about-us-1
• I Love Handbags (2016): Collections – Men’s Bags, https://www.
ilovehandbags.com.au/collections/mens-bags
• I Love Handbags (2016): Home Page, https://www.ilovehandbags.com.au/
• I Love Handbags (2016): Payment Options, https://www.ilovehandbags.com.
au/pages/payment-options
• IKEA (2015): Tasmania 2015, http://www.ikea.com/ms/en_AU/media/pdf/
tasmania/IKEA_terms_2015_Tasmania.pdf
• Levene, M (2010). An Introduction to Search Engines and Web Navigation
(second Ed.). Wiley. p. 221. ISBN 978-0470526842. Retrieved 12 November
2012. in http://books.google.com.pk/books?id=mDI72_9-bw0C&pg=PA221;
• NG, S (2007): Card Sorting – Mistakes Made and Lessons Learned, in UX
Matters, http://www.uxmatters.com/mt/archives/2007/09/card-sorting-
mistakes-made-and-lessons-learned.php
• Operating Eurovision and Euradio (2016): R95 Safe Areas for Television
https://tech.ebu.ch/docs/r/r095.pdf
• People for the Ethical Treatment of Animals (2016): ‘This is why I don’t wear
leather’; https://www.facebook.com/official.peta/videos/10154130847364586/
(more relevant to the concept of the Furry Purse Bag);
• People for the Ethical Treatment of Animals (2016): ‘Trapped Animal’s
Final Moments of Life, in https://www.facebook.com/official.peta/
videos/10154739608119586/
• People for the Ethical Treatment of Animals (2016): Video of Crocodile Skin
Handbag Making, in the PETA Official Facebook Page, https://www.facebook.
com/official.peta/videos/10154885036849586/;
• Reimer, L (2011): Following a Web Design Process; https://www.
smashingmagazine.com/2011/06/following-a-web-design-process/
• Strandbags (2016): Deliveries and Returns, http://www.strandbags.com.au/
deliveries-and-returns
• Strandbags (2016): Home Page, http://www.strandbags.com.au/
• Strandbags (2016): Loyalty Program, http://www.strandbags.com.au/loyalty/
home
• Strandbags (2016): Store Locator, http://www.strandbags.com.au/store-
locator
• Strandbags (2016): The Company, http://www.strandbags.com.au/the-
company
R e f e r e n c e s

30. • Szabo, K (1995): Metaphors and the User Interface, http://www.katalinszabo.
com/metaphor.htm
• W3 Schools (2016): The Most Popular Browsers, http://www.w3schools.com/
browsers
• W3 Schools (2017): HTML – The Language for Building Web Pages, http://
www.w3schools.com/default.asp
• Wikipedia (1990): High Definition Television, https://en.wikipedia.org/wiki/
High-definition_television?oldid=753280917
• Wikipedia (2011): Adobe AIR, https://en.wikipedia.org/wiki/Adobe_
AIR?oldid=753020098
• Wikipedia (2011): Adobe Flash, https://en.wikipedia.org/wiki/Adobe_
Flash?oldid=751325915
• Wikipedia (2016): Active Server Pages. https://en.wikipedia.org/wiki/Active_
Server_Pages;
• Wikipedia (2016): Adobe Acrobat, https://en.wikipedia.org/wiki/Adobe_
Acrobat?oldid=755248526
• Wikipedia (2016): Breadcrumb (Navigation), https://en.wikipedia.org/wiki/
Breadcrumb_(navigation)?oldid=759141583
• Wikipedia (2016): Digital Terrestrial Television in Australia, https://
en.wikipedia.org/wiki/Digital_television?oldid=752611422
• Wikipedia (2016): Digital Terrestrial Television in, (https://en.wikipedia.org/
wiki/Digital_terrestrial_television_in_Australia?oldid=753505491
• Wikipedia (2016): Firefox, https://en.wikipedia.org/wiki/
Firefox?oldid=752616644
• Wikipedia (2016): Get Media Player, https://support.microsoft.com/en-us/
help/14209
• Wikipedia (2016): Interface Metaphor, https://en.wikipedia.org/wiki/Interface_
metaphor?oldid=758927925;
• Wikipedia (2016): Java (Programming Language), https://en.wikipedia.org/
wiki/Java_(programming language)?oldid=753640952
• Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/
JavaScript?oldid=753351126
• Wikipedia (2016): Java Script, https://en.wikipedia.org/wiki/
JavaScript?oldid=753351126
• Wikipedia (2016): Netscape, https://en.wikipedia.org/wiki/Netscape
• Wikipedia (2016): Netscape, https://en.wikipedia.org/wiki/Netscape
• Wikipedia (2016): PHP, https://en.wikipedia.org/wiki/PHP
• Wikipedia (2016): Portable Document Format, https://en.wikipedia.org/wiki/
Portable_Document_Format?oldid=756427043
• Wikipedia (2016): Quick Time, https://en.wikipedia.org/wiki/
QuickTime?oldid=749513813
• Wikipedia (2016): Safe Area (Television), https://en.wikipedia.org/wiki/Safe_
area_(television)?oldid=698544425;
• Wikipedia (2016): Small Web Format, https://en.wikipedia.org/wiki/
SWF?oldid=751715503
• Wikipedia (2016): Unicode, https://en.wikipedia.org/wiki/Unicode
• World Wide Web Consortium (2017): Developing Websites for Older People:
How Web Content Accessibility Guidelines (WCAG) 2.0 Applies; https://
en.wikipedia.org/wiki/Usage_share_of_web_browsers
• World Wide Web Consortium (2017): Older Users, https://www.w3.org/WAI/
older-users/ and World Wide Web Consortium (2017): https://www.w3.org/
WAI/older-users/developing
• World Wide Web Consortium (2017): W3C Welcomes Organizations Officially
Combine to Develop Roadmap for Future Publishing, https://www.w3.org
R e f e r e n c e s ( 2 )

31. The Bitter End
(for some Fur Baby somewhere)
(Please don’t take this literally as no animals were maimed or
killed in the process)
2017 (c) Colleen Sedgwick and Sedgie Art Productions