Web Design Report: Autism Friendly Architecture Project Analysis

This report provides a detailed analysis of the design and development of the 'Autism Friendly Architecture' website. It begins by discussing the technical aspects of the website, including the use of CSS and HTML for coding, emphasizing the importance of semantic IDs, relative font sizes, and the use of an external CSS file for a single point of control. The report also highlights the use of HTML5 tags and best practices in coding, such as minimizing CSS code and avoiding client-side scripting. Furthermore, the report delves into the design guidelines employed, such as progressive enhancement, F-shaped eye movement, contrasting colors, and a consistent layout across all pages. The report also mentions the utilization of relevant images to enhance the user experience and the adherence to web design conventions to ensure user-friendliness. Overall, the report showcases a user-centric approach to web design, focusing on usability and accessibility.

Report on design and development of website "Autism Friendly Architecture"
Introduction
This report is on the project of "Autism Friendly Architecture". Firstly the
technical aspects of coding in CSS and HTML language will be discussed.
Then, in the later part of the report, a general discussion of the principles
and guidelines that were considered and followed in the design of the project
will be enumerated.
Coding of CSS file
I have used an external CSS file. This goes in line with the established best
practice of having a single point of control. In detail, I have used IDs and
complex descendant selectors following IDs. Such selectors have been
chosen as they are specific and allow for unambiguous selection of the
element. Also, the IDs chosen are semantic. In other words, IDs are chosen
based on the information as presented to the user or their role in the
structure of the webpage. ID names based on the tag used is not done.
Regarding font-size, relative sizes have been used to allow for a smooth
experience when the website is resized. Similarly, generic font families (serif,
san-serif) have been included later in the priority for allowing the system's
generic font to be shown in case the ones specified by name are not
available. Unordered lists (ul) have been used where appropriate, but their
list style has been removed to match the look of the website, and the same
goes for the text-decoration of underline for anchor links (a).
Positioning is mostly done using relative value as to allow alignment and flow
of the elements as required. Furthermore, any place where there was a
chance of overflow of content, it has been hidden as otherwise would have
undermined the design of the site. Also, some elements like some div in
footer have been assigned a width and height even though they are inline
using the keyword of inline-block to the property of display. float along with
clear:both; have been used a lot to allow for moving of elements from their
original static position to the position within their parent elements to design
the page.
Furthermore, no !important keyword has been used. This is also keeping in
mind the recommendations as using this keyword breaks down the
specificity and cascade of the code. For visual delight of computer users,

pseudo classes of hover have been utilised in links in the navigation
(a:hover) to show change in colour of the text.
To display icons of social networking sites, the image have been included
using CSS code and sprites. The same has been done keeping in mind the
guideline to reduce the number of HTTP requests, and have a single image
that has all the required images and show portions of them as required. Also,
background images have been used in the background of body, as
decorative items in sidebar. Various properties related to background have
been used as applicable.
Coding of HTML file
The newer tags that have been introduced in the latest version of HTML
(HTML5) have been used wherever applicable to increase the semantic of the
HTML code. For example, footer tag identifies where the footer of the page
lies, and main tag identifies the main unique content of the page other than
the repeated header, navigation, and footer. There is minimal inline styling
and classes and IDs have been used to style them from the single external
CSS file.
Technologies used
Web Standards technologies have been used in the project. A decision was
made to stick to client-side languages and skip any server-side language to
keep the website simple, and quick-to-load. Also, the dependence on the
standard technologies of HTML and CSS ensures that the site will load as
expected the large variety of devices and web browsers. Also, the latest
versions of the two languages have been used. For example, semantic tags
of HTML5 like main, footer are used. Also, best practices in coding like
minimising CSS code, using relative font sizes have been followed. Keeping
in line with the idea of using simple tools and techniques to achieve the
maximum effect, client-side scripting language JavaScript has not been used
in the website.
Design guidelines utilised
In order to be as convenient as possible to use, the website has been
designed keeping in mind the best practices, and other knowledge that
draws upon years of experience of the web design field. Some of the
guidelines are enumerated below:

Progressive enhancement - A large variety of devices implies a large degree
of fragmentation. In other words, a huge number of versions of web browsers
may be actively used by the people who are expected to visit the website. To
manage this, the site has been coded in a bottom-up way of progressive
enhancement where the content will show for every software and hardware
configuration, with the advanced cosmetic features showing up for the more
recent versions.
F-shaped eye movement - The human eye tracks the web page in a F-
pattern. Thus, the sidebar has been kept on the left side, and a list of the
latest news is kept there to allow a quick glance of that before the user gets
on with the main content on any page.
Contrasting colours - The colours on the site have been kept simple, and also
contrasting to allow for convenient legibility.
Hierarchy of font sizes - The font sizes follow a consistent architecture (as
you would expect in a newspaper) with the main headings being the largest,
and the lesser important ones decreasing in sizes.
Following conventions - With time many conventions emerge and take hold.
All these have been adhered to, for example, navigation is provided near the
top, social media links are provided near the bottom (in footer), and so is the
copyright message. Experts of usability suggest not to challenge conventions
as users have learned those and come to expect the same when they visit a
new site.
Relevant images - Relevant images of actual products, or ones to illustrate
are used along the text to help visitor to the website better understand the
message.
Consistent layout among pages - The layout of all the pages is consistent
with the same elements being repeated at the same pages.