Report on Website Structure, Wordpress Components, and Functionality

This report provides a comprehensive overview of website structure and the use of WordPress components and features in website development. It covers key website design principles such as usability, mobile-first design, and accessibility. The report details the structure of the website, including the header, navigation trail, content section, and footer, and describes the various pages, such as the home page with its banner, portfolio, and testimonials, the about us page, company policies page, products page, and contact us page with an embedded Google Maps feature. The report also highlights the use of a custom WordPress theme and widgets and discusses website features like product carts and embedded maps. Furthermore, it mentions the resources used in the development process, including images from Google and embedded Google Maps from the Google Developers platform. This document is available on Desklib, where students can find similar assignments and study resources.

COVER PAGE

URL
http://u1106010.cloudaccess.host/
Website structure
Structure of a website is a very important factor to consider when designing a website because it helps
determine the usability of the website. A well-structured website is easy to use if users are able to
access different parts of the website. For the design of the website some key website design principles
that are applicable to Wordpress were considered. These principles include;
 Usability- Usability of the website is a key design principle for any website. To achieve usability,
the requirements of the website have to be fully understood so as to select the best type of
theme. There are many Wordpress themes but choosing the right theme for the website
determines the final design of the website. For the proposed website, I had to select a website
with e-commerce features integrated into the theme. Choosing the right Wordpress theme
significantly reduces the amount of time used to design the website.
 Designing for mobile first- Designing for mobile first is a concept where the developer designs
the website while highly considering mobile devices. This concept ensures that the design
achieves a high degree of responsiveness to make it possible to use with different screen
resolutions. Wordpress themes can be further customized to add more tweaks and features that
optimize the theme further when it’s opened in mobile devices. Apart from the website being
responsive, there are other aspects of mobile devices to consider like the usability of the
website for a mobile device with touch since the mobile industry is growing fast and almost all
mobile devices are touch enabled. This means that the design should consider all these factors
and optimize the design for use in mobile devices.
 Designing for accessibility- designing for accessibility means eliminating any barriers that
prevent access to the website by a person with a disability. This is a crucial factor as it ensures
that any visitor who visits the website has an equal opportunity to consume the content of the
website and use its features. Designing for accessibility involves analyzing the theme’s visual
contract, to make sure each section of the website is visible and accessible. The font is also
considered and should be not be too small especially for paragraphs of text.
The structure used for the website includes the following sections;
 Header- This is the first section of each page. It comprises of the logo and the name of the
website and the navigation menu. The navigation menu has a link to every page making up the
website.
 Navigation trail- This section is used to show the user which page they are currently in from the
home page. For example if the user is on the contacts page then the navigation trail will be
Home>Contacts. This section is very important as it helps the user to trace which page he or she
is in from the home page.
 Content section- This section has the content for every page.
 Footer section- The footer section has the copyright information for the website.
This structure is used on all the pages except the home page which includes a few other sections. The
website is made up of the following pages;

 Home page- The home page is the first page that a visitor sees when they visit the website. Since
it’s the landing page, the design has to be impressive so as to create a good first impression to
the user. The page has been designed to achieve simplicity while delivering content about the
organization using images and text. The home page has the following subsections;
o Banner- This subsection has an image with a welcome message as the caption of the
image. The caption is inserted as an overlay on top of the image.
o Portfolio- This subsection has information about what the organization does.
o Testimonials- This subsection has testimonials and uses a background image with the
testimonials appearing as an overlay.
 About us page- About us page has information about the organization in paragraph format to
make it easy for the user to read. The information is brief and to the point to reduce the amount
of time the visitor spends reading the information.
 Company policies page- This page has the company policies information. This page uses the
normal structure of the website where by the header section consists of the logo and the
navigation menu. The content section the company policies page consists of three types of
policies
 Products page- The products page has the products. Each product has link to add the product to
the cart
 Contact us page- The contact us page has the contact information of the organization. It also
includes a google maps to show the location of the organization. The map has been embedded
thus visitors are able to use it like Google maps.
Sitemap
Wordpress components and features used
For the implementation of the website, a number of Wordpress components and features were used.
These features include;

 Custom Wordpress theme- A custom Wordpress theme was installed. The theme was selected
on the basis of a design that will be able to include e-commerce functionality by having a
products page to display products that are available for sale.
 Widgets- Some widgets were used for the design of the website.
Website features and functionality
The website includes the following features;
 The products page has items that are available for sale and the user has the option of adding
every item to the cart.
Changes
The contacts page includes a google map embedded into the page. The map is fully embedded in the
page thus it takes advantage of Google maps features including viewing a larger map. This is better than
just using a typical address as the user can use the map to navigate and find the location of the business.
Links and resources
To develop the website some resources were used. These resources include images which were
obtained from www.google.com. Another resource that was used is embedded Google maps which was
obtained from https://developers.google.com/maps/documentation/embed/start.