Requirements

A written report detailing how you built your website

Overview

Create a travel-guide web site for a European city.

Report

Create a short report. The report should include the following:

An explanation of how usability and accessibility have informed the design and implementation of your site.

An explanation of how HTML semantic elements have been used to build your site.

An explanation of the layout techniques that have been used in the implementation of your site.

Answer:

Usability and Accessibility

This a static website which consists of extremely compressed but high quality of graphical images and no other form of multimedia. This makes the website more lightweight for future uses. If the website is ever considered to be hosted from any online source, the loading time for each web page would be minimum. The website has been designed using HTML5 and CSS3 languages and hence can be easily accessible from any web browser.

Moreover, the website allows improved usability features through the providences of primary and secondary navigation. The primary navigation bar can be located at the top of every webpage within the website. This contains the links to the main pages on the website namely the home page, the Places, the Transportation and the Travel Tips pages. The transportation page also has a sub-menu or a secondary menu that can take the website visitor to the secondary Bus, Taxi, Train or Metro page. The fonts and images used in the website have also been carefully sized and placed so as to enhance the look and feel of the website.

Use of HTML Semantic Elements

The website design process required to first create a basic wireframe for each of the web pages and based on them were the segments in the webpage placed. The most important HTML tags like the <header> and the <footer> tags were used in order to separate the navigation area, the basic content area and the footer section. The header section consisted of the banner image for the home page and also the primary navigation bar on each page. The footer tag was used to present the copyright information of the website in the footer section, at the very bottom. The <nav> tag has also been used inside the header section to denote the navigational section. The <article> tag assisted in producing the written portions for the website.

Layout Techniques

A varied number of <div> tags has been used to segregate each section from the other and such that they can be easily used and formatted using the Cascaded Style Sheets (CSS). This helps to identify each section of the website and then format them according to the columnar requirements. The divs help to make sure that the proper box-layout has been implemented in order to provide a proper marginal and padding around each of the objects or sections within the various webpages. Also, the Bootstrap CSS assistance has been taken to organize the sections based on the design specifications to align the elements in proper rows and columns.