Jordan Mossman – Website Report

CMP1130M

Critical log
This is the critical log for the website “ASOS Fashion Locker”. In this log I will be detailing how best
practices and standard were used in the development of the website, furthermore I will be
identifying, appraising and then discussing their application throughout the website as well as their
use in current web design.

Web standards and practices can be defined as a set of rules that web designers follow when
creating a website or webpage, knowing that they align with users’ expectations. They are guidelines
for clarity and usability for a webpage. Many websites use similar designs as a standard to help users
with things such as navigation. Which is something I implemented into my website too.

Navigation

Arguably the most important aspect of a website is its ability for users to smoothly navigate its
webpages to find all its content. A web standard for this is to have the main navigation bar situated
in the header of every page on a site, making horizontal top-level navigation a web standard.

I implemented this same practice into my website. I have the main navigation bar in the header that
is present in most of the sites pages, this made finding the sites content easy and fast. I also used a
class of current in the html this would highlight the individual pages in the navigation bar, along with
having hovering affects in the css user would always know which page they were on or about to click
on.

Footer

Having a footer at the bottom of each webpage is another web standard I used in my website. I used
this to contain a directory of all the different pages contained within the web, as well as the
company name and copy right information.

Home page

When designing my clothing brand website, I needed a way of advertising the different products and
information of the site. I used an image collage that displayed some of the clothing along with
buttons to take users straight to the purchase pages. I used hyperlinked images of the different
feature such as the shirt customisation on the site to direct visitors directly to its content.

Email marketing

Email marketing is a highly effective way of gaining business from customers that you otherwise
wouldn’t have gotten. So, a lot like a header I designed a simple email subscription bar that would be
present on most pages. This standard for most online retailor websites keeps them in contact with
potential customer through marketing emails, increasing their chance to make a sale. I implemented
a thank you page for when a user subscribed to the mailing list. This is important because it confirms
the action has taken place.

Sections and divs

When crating a website having legible or neat coding is as important as the content its displaying. I
used section and div tags to break up the code for each webpage into its different elements. By then
assigning them different ids or classes I could easily design these different elements later when
writing the css style sheet.
Jordan Mossman – Website Report
CMP1130M

Mobile ready

Virtually everyone uses a smart phone or smart device daily. So, creating a website that not only
worked well on a desk top but on a smaller screen was impotent, it had to be responsive. The ways
in which I did this was to have on screen text collapse into smaller line when in a smaller window.
The same was done with the navigation bar which becomes vertical at a certain pixel width. Another
example of this is the collage on the home screen is normally three images wide. When that screen
size reaches a certain width the images collapse into two and then just one. This makes the site easy
to use on either a tablet or smartphone.

Branding

Keeping branding consistent is a web standard used by online retailor. Having a lacking in branding
can make a website confusing and visually unpleasant for users. I stuck to a simple sliver and blue
colour scheme to make the website look clean, and prefinal. By using the same colours, I wanted to
create an association with my brand and the logo that was also present in the header on each
webpage.

Layout

Simplistic layouts are becoming more promenade in web design, so you could argue is becoming
more of a standard online. A flashy website would typically deliver a poor experience. I wanted
everything from how my website was navigated to how content was displayed to be a simple and
progressive experience. I used table tags in my html to display content laterality on the page, making
everything constant for the user and nothing was unpredictable.

Fewer menu options

Having few menu options is something that modern web retail design is using to guide users to what
they are looking at. Then eventually to making a sale. By giving then fewer options and this is
something I used in the design on asos fashion locker too. Having as few options for product
purchase on my website as possible e.g. size and quantity, makes the user experience easy and
stress-free. This in turn optimises sale potentials because few clicks mean users keep their interest
so are more likely to make purchase.

Images

For most of my images and icons I’ve used vector graphics because for a responsive website they can
be infinitely scalable. This means all my icons remain consistently polished looking across all user
experiences, which is especially important for the icons used for navigation.

Clickable button areas

Because on a most mobile devices buttons and links will be tapped by a human thumb, I had to
consider they needed larger interactive areas to accommodate this. So, using an average clickable
height of around 45pixels for the product content on my site, this will help ensure errors in
navigation throughout the site. This will then hopefully keep the user engaged and avoid any
frustration by providing a universal user experience.