https://sonnerz.github.io/project01-user-centric-frontend/
Create a website for a band.
Build a static (front-end only) website for a band. As a starting point, you may want to use wireframes, as we did in the UX lesson (you can use Balsamiq or any other tool, including just pen and paper). You can use either your assets or the assets within the following GitHub repo.
- Create a website of around 4-5 pages, or (if using a single scrolling page) these should be separate page areas.
I've created a website containing 5 pages. - Incorporate main navigation and grid layout (you might want to use Flexbox or Bootstrap to accomplish this).
Bootstrap 4 was used to build the HTML structure and site functionality such as the main navigation. - Whenever possible, strive to use semantic HTML5 elements to structure your HTML code better.
Semantic HTML5 elements were used in every page to structure the html. - Make sure your site is as responsive as possible. You can test this by checking the website on different screen sizes and browsers.
The site has been built to be as responsive. Please see the Testing section for further details. - We advise that you write down user stories and create wireframes/mock-ups before embarking on full-blown development.
User stories and wireframes are provided in the Scenarios section and the Wireframes section. - The site can also make use of CSS frameworks such as Bootstrap, just make sure you maintain a clear separation between the library code and your code.
Bootstrap 4 was used to build the HTML structure. Custom styles were created - style.css and cover.css files can be found in the assets/css directory. - You should conduct and document tests to ensure that all of your website’s functionality works well.
Testing was under taken and recorded in the Testing section below - Write a README.md file for your project that explains what the project does and the need that it fulfils. It should also describe the functionality of the project, as well as the technologies used. Detail how the project was deployed and tested and if some of the work was based on other code, explain what was kept and how it was changed to fit your need. A project submitted without a README.md file will FAIL.
ReadMe.md file provided. - Use Git & GitHub for version control. Each new piece of functionality should be in a separate commit.
Git was used for version control and my logs clearly show that a commit was made after each new piece of functionality. See Version Control section below. - Deploy the final version of your code to a hosting platform such as GitHub Pages.
GitHub Pages was used to host the final website. See Deployment section below.
- Overview
- Strategy Plane
- Scope Plane
- Structure & Skeleton Plane
- Wireframes
- Index - Home Page
- About Us Page
- Catalogue Page
- News Page
- Booking Enquiry
- Surface Plane
- Development Phase
- IDE
- Version Control
- Readme
- Features - HTML/CSS Structure
- Header
- Footer
- Index Page
- About us Page
- Catalogue Page
- News Page
- Book us Page
- CSS
- Typography
- Colours
- Testing
- Deployment
- Development Phase
- Credits
I have decided to stay with the suggested theme of the website - a music band. However, I have chosen to use a defunct contemporary Irish band instead. I chose 'Divide of Everything' because I know one of the band members, but also because they do not have their own website. They have their own identity, a logo and a clearly unique style and brand. Finding content for the site was not going to be a big challenge which gave me more time to spend on the HTML and CSS.
This document follows the Five Planes of the user experience, from Strategy through to Surface. The Surface plane is the most comprehensive section where the development process has been clearly described.
Our goal at this stage of the project is to identify what the customer aims to achieve, what their business goals are, and in turn, the reason for a website.
The scope is fundamentally determined by the strategy of the site, so it is important we define a good strategy from the outset. This strategy incorporates not only the benefit to the owners of the site but also the benefit to the users.
We aim to:
- determine the business objectives and the value of the website
- use this plane to determine the reason for the websites existence
From here on Divide of Everything will be known as the client.
For the purposes of this project, Sonya Cooley will have full authority, primary responsibility, and full accountability for all aspects of the project. She will have a Mentor available to her at the beginning, middle and end of the project.
| Objectives | |
|---|---|
| Purpose: What purpose does the website serve? | The client website will target fans and potential fans with their back catalogue and new material. The site will showcase their music and publicise their availability to perform at events. |
| Goals: What outcomes does it need to achieve? |
|
| Target audience: Whom must the product appeal to and work for? | Past fans, current fans, and potential fans. |
| Success indicators: How will you know you have achieved project goals? | An increase in successful booking enquiries via website |
| Strategies: What approaches will help to realise the goals? |
|
| Tactics: What activities might help to realise the strategies? |
|
The UXD will be driven by business goals and user needs.
| Define | Customer analysis, Requirements gathering, SEO, Social Media, Content Strategy – Personas, Content inventory. |
|---|---|
| Design | Information architecture, Functional & technical requirements, Navigation design, Wireframes, UX/UI, Pages, Branding, style guides, mock-ups. |
| Develop | Look & feel, Design and Development, Build, Version control, Testing, Deploy |
| Opportunity/Problem | Importance | Viability/Feasibility |
|---|---|---|
| Create Online Presence | 5 | 5 |
| Increase fan numbers | 4 | 4 |
| Showcase music | 4 | 5 |
| Increase bookings | 4 | 4 |
| Complete catalogue online | 2 | 1 |
| Graph | Opportunity Feasible? |
|---|---|
 |
Feasible for initial release
|
Our project scope will be based on our defined Strategy. We will;
- determine the websites requirements
- determine the websites key functionality
- determine what features are to be included in this and possible future product releases
The client website will target fans and potential fans with their back catalogue and new material. The site will showcase their music and publicise their availability to perform at events, etc.
A client fan will be a fan who is aware of the client for some time. They will be aware of the clients back catalogue of music and keep up to date with their new music. A client fan will visit the site to listen to the clients back catalogue, read client news and lookup where and when future gigs will happen. A client fan may also wish to make an enquiry about booking the band for an event as they are aware of the type of gig the client performs.
A new client fan will visit the site to listen to new music that may have caught their attention. They will then listen to the clients back catalogue. A new client will be interested in the About Us content and will also be interested in where and when future gigs will happen.
A business user may be aware of the client from corporate events or other business events. The business user is aware that the client attracts large audiences and has a good catalogue of music. The business user will visit the site to look up when/where the clients next performances are and if the client is available, they will make an enquiry about booking the client via the booking enquiry form.
The site will provide users with access to the clients’ music catalogue and the ability to make an enquiry about booking the client for events. The site will provide the ability to;
- navigate between pages
- listen to the clients’ catalogue of music
- make an enquiry about booking the client for events and
- links to the clients social media.
The site will be optimised for latest version of Chrome, Firefox, Internet Explorer, Safari and Opera and optimised for mobile usage. HTML and CSS will be written using the Mobile-First approach. The mobile-first approach is designing for the smallest screen and working your way up to desktop screens.
Most screens/pages will follow a standard format, with a look and feel to be designed by a graphic designer. Each page will have a content area between a consistent header and footer. The header will contain the client logo and navigation. The footer will contain links to the client’s social media sites.
All pages will be created using HTML5 and CSS3, provided by the Bootstrap Framework 4. Content for the site will be provided by the client.
| Page | Description |
|---|---|
| Home Page | The home page will consist of a hero image, a header containing a logo and navigation and a footer with links to other social media sites. The navigation will take users to other site pages while the logo will also be a link taking the user to the home page. |
| About us | The about us page will contain information about the client and a brief profile on each of the band members. |
| Catalogue | This page provides access to the clients’ music catalogue which is available on soundcloud. Music and videos will either be linked to or embedded on the page. |
| News | Providing information to users about client news and upcoming gigs |
| Book us | Provides the ability to make an enquiry about booking the client using a web form |
| Description | Response |
|---|---|
| About us | Takes user to about us page |
| Catalogue | Takes user to music catalogue page |
| News | Takes user to news and gigs page |
| Book us | Takes user to booking enquiry form |
| Logo | Takes user to home page |
Our goal for the Structure plane is to organise the information architecture and interactions for the site. We will keep a consistent, predictable, learnable interface, and, interactions. We will use industry standard technologies to implement expected behaviours when using the site, e.g. tooltips, navigation, including accessibility, etc.
Users will find the navigation at the top of the site in an expected location. The site will be intuitive and follow tried and trusted paths.
The form will follow user expectations where feedback is provided if user interactions are unexpected, incomplete or complete.
The website will use a weblike organisational structure which will pose few restrictions on the pattern of information used. This structure works best for small sites. The user will be presented with a consistent navigation along the top of every page. Each navigation element will take the user to the same page e.g. ‘About us’ will take the user to the ‘About Us’ page regardless of what page the user is currently visiting.
The navigation will follow this order: Home – About us – Catalogue – News – Book Us and the logo will also act as a link to the home page (index.html)
The website will implement content in a standard tree structure. It will go to one level which will reduce complexity and ensure users do not have to exceed the three-click rule of thumb.
 |
At the root of the site:
|
|---|
- Each page has a content area bookended by a header and footer
- The sticky header on every page is always available to the site visitor even as they scroll, and contains the band logo and responsive navigation
- The footer on every page has links to the bands social media sites - Facebook, Twitter and Youtube
- Permanent and fixed links to Facebook, Twitter and Youtube can be found along the right hand side of all pages on the website. These are available to the site visitor even as they scroll.
- The Catalogue Page makes band tracks and videos available to the site visitor
- A contact form is available to site visitors to make contact with the band for the purposes of booking them for events
- A news page keeps band fans up-to-date with band news and gig news
- An online chat forum could potentially be added in the future
- An option to purchase band merchandise could also be a future feature
The website was developed using the Cloud9 IDE.
Cloud9 IDE is an online integrated development environment, that supports hundreds of programming languages. It enables developers to get started with coding immediately with pre-configured workspaces, collaborate with their peers with collaborative coding features, and web development features like live preview and browser compatibility testing.
Git was used to manage the source code for this project. Git is a version control system for tracking changes in project files.
Project files were committed to Git after each major functional addition, new page, update or implementation of testing results. Following the initial commit to Git, each major update was followed by a Git add and commit. For example; after the header was completed, after the footer was completed and after each page was completed
A full Git log is available on my GitHub repository.
A Readme markdown file is provided with the site on GitHub. It explains what the project does and the need that it fulfils. It also describes the functionality of the site, as well as the technologies used. The Readme provides information on how the site was deployed and tested and if some of the work was based on other code.
The header was developed/designed to be full width and contain the client logo and global navigation. The navigation is responsive to the type of client a user is using to view the site.
Any view below 768px wide will get a collapsing Navigation Bar. The navigation links will have a hover state making it obvious to users which navigation link they are hovering over.
The active link has a bold font, making it obvious to users which page they are visiting.
The collapsed navigation will have a similar hover state.
The footer was developed/designed to be full width and contain the client copyright notice and social media links.
The social media links will have an obvious hover state.
The index page was created using Bootstrap 4 cover page. A hero image of the band fills the screen with their logo overlayed. This was achieved using a transparent PNG file. The user is first introduced to the navigation at the top of the page and the social media links in the footer. This is where the user will consistently find these throughout the site.
The about us page has two columns of content. The profile of each band member is held in a div and offset from each other in a zigzag pattern down the page. This makes the layout more interesting and keeps the user scrolling down the page. On smaller devices the two column layout becomes a single column and the user profiles appear stacked down the page.
The catalogue page is a single column page and set to be full width on any device. It is subdivided into areas for current tracks, audio, video, and back catalogue. Local navigation links are at the top of the page encouraging users to click for content further down the page and not visible yet. On smaller devices the items that appear across two columns, e.g. videos, become a single column for easier use.
The news page is a single column page and set to be full width on any device. Each news piece may have a Read more link for the user to be taken to a page with more details or an external page.
The book us page uses standard Bootstrap 4 form components. First name and last name fields, are place side by side and each take up half the width of the form. Event Type and Date of Event fields, are place side by side and each take up half the width of the form. On smaller devices these fields increase to take up the full width of the form.
All fields except the text area field: Any other comments, are required fields. The user is not permitted to successfully submit the form until these fields are completed correctly. The user will receive feedback if the content is not suitable. Empty required fields have the message: Please fill out this field. In an attempt to stop fake email addresses from being submitted, the Email field will ensure that the email address follows conventional patterns where they must contain the @ symbol, etc. The phone number field will only accept numbers and no letters. The Event date uses a bootstrap datepicker where the user must choose a month then a day.
Bootstrap 4 provides the fundamental CSS and JavaScript for the entire site. However, custom styles have been created and a style.css file can be found in the assets/css directory. Custom styles for each page, navigation, footer and media queries are grouped together.
Google fonts: Raleway with sans serif as backup
| Hex | rgba | |
|---|---|---|
| #ec1e2b | rgba(236, 30, 43) | Red |
| #191008 | rgba(25, 16, 8) | Dark Brown |
| #ac935d | rgba(172, 147, 93) | Light Brown |
The website was tested on an ongoing basis. Chrome and Chrome Developer Tools were the primary browser and tool used for testing. However, the site was also tested using Firefox and Internet Explorer.
-
HTML was validated using the Markup Validation Service provided by The World Wide Web Consortium (W3C): https://validator.w3.org/
-
CSS was validated using the CSS Validation Service provided by The World Wide Web Consortium (W3C): https://jigsaw.w3.org/css-validator/
During development:
- The Body background colour had different colours for each media query to ensure the @media queries were being adapted by the browser.
- Div’s had vibrant background colours so that the developer was easily able to identify them
- Each change was viewed in a chrome browser and tested using developer tools at full width resolution and using a variety of device emulators; Galaxy SIII, Galaxy 5, Laptop touch screen, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad.
- Remote debugging using Android, Windows OS and Chrome Dev Tools were used to test each new functionality and new/updated page.
- Each page was audited using Chrome Dev Tools Audit functionality
| Browser/Test | Chrome | Firefox | IE | Chrome Android-Remote Debugging |
|---|---|---|---|---|
| Home Page | Passed | Passed | Passed | Passed |
| Content Display | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling |
| Navigation, hover, etc | Passed | Passed | Passed | Passed |
| Responsive Navigation | Passed | Passed | Passed | Too close to left, needs to be centred. Needs hover background |
| Styling | Passed | Passed | Passed | Passed |
| Book us Form | Form too long, prefer one screen length | Form too long, prefer one screen length | Form too long, prefer one screen length | Two column fields need to be one column |
| Device/Test | Galaxy SIII | Galaxy 5 | Laptop touch screen | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad |
|---|---|---|---|---|---|---|---|---|
| Home Page | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
| Content Display | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling | Background image not scaling |
| Navigation, hover, etc | Not Applicable | Not Applicable | Passed | Not Applicable | Not Applicable | Not Applicable | Not Applicable | Passed |
| Responsive Navigation | Too close to left, needs to be centred. Needs hover background | Too close to left, needs to be centred. Needs hover background | Not Applicable | Button jumps down passed the logo onto a new line | Too close to left, needs to be centred. Needs hover background | Too close to left, needs to be centred. Needs hover background | Too close to left, needs to be centred. Needs hover background | Not Applicable |
| Styling | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
| Book us Form | Two column fields need to be one column | Two column fields need to be one column | Form too long, prefer one screen length | Two column fields need to be one column | Two column fields need to be one column | Two column fields need to be one column | Two column fields need to be one column | Form too long, prefer one screen length |
PLEASE NOTE:Many of the issues highlighted by the page Audits can be addressed by more advanced solutions that are beyond the scope of this HTML/CSS project, for example the Catalogue page performance values.
| Page/Criteria | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|
| Home | 93 | 91 | 88 | 78 |
| About us | 73 | 82 | 88 | 100 |
| Catalogue | 28 | 93 | 75 | 89 |
| News | 79 | 100 | 88 | 89 |
| Books us | 77 | 100 | 88 | 89 |
During usability testing, it was found that the user had difficulty deciding what to do on the home page. As a result, an ‘Enter Site’ link was added to allow the user to navigate straight to the Catalogue page from the home page. A band logo was added to the global navigation bar in the mobile view to attract the user to the button navigation.
| Browser/Test | Chrome | Firefox | IE | Chrome Android-Remote Debugging |
|---|---|---|---|---|
| Home Page | Passed | Passed | Passed | Passed |
| Content Display | Passed | Passed | Passed | Passed |
| Navigation, hover, etc | Passed | Passed | Passed | Passed |
| Responsive Navigation | Passed | Passed | Passed | Passed |
| Styling | Passed | Passed | Passed | Passed |
| Book us Form | Passed | Passed | Passed | Passed |
| Device/Test | Galaxy SIII | Galaxy 5 | Laptop touch screen | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad |
|---|---|---|---|---|---|---|---|---|
| Home Page | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
| Content Display | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
| Navigation, hover, etc | Not Applicable | Not Applicable | Passed | Not Applicable | Not Applicable | Not Applicable | Not Applicable | Passed |
| Responsive Navigation | Passed | Passed | Not Applicable | Passed | Passed | Passed | Passed | Not Applicable |
| Styling | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
| Book us Form | Passed | Passed | Passed | Passed | Passed | Passed | Passed | Passed |
PLEASE NOTE:Many of the issues highlighted by the page Audits can be addressed by more advanced solutions that are beyond the scope of this HTML/CSS project, for example the Catalogue page performance values.
| Page/Criteria | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|
| Home | 91 | 100 | 94 | 78 |
| About us | 73 | 92 | 88 | 100 |
| Catalogue | 03 | 93 | 75 | 89 |
| News | 85 | 92 | 88 | 100 |
| Books us | 11 | 92 | 88 | 89 |
GitHub is used to host the code and publish the pages.
A new repository was created in GitHub called: project01-user-centric-frontend
After a final Git Add and Git commit
$git add .
$git commit -m "Final commit"
The pages were pushed to the new GitHub repository
$ git remote add origin https://github.com/Sonnerz/project01-user-centric-frontend
$ git push -u origin master
$Username
$Password
Under the Settings – GitHub Pages of the new repository, the master branch of the code is published to the url:
https://sonnerz.github.io/project01-user-centric-frontend/
The following sites were used as resources to get sample css and debugging css.
| Site | URL | Resource |
|---|---|---|
| Stack Overflow | http://stackoverflow.com | CSS issues and in particular the pseudo class solution for setting the opacity of the background images. |
| How to make YouTube Videos Responsive | https://avexdesigns.com/responsive-youtube-embed | This site provided the solution for scaling YouTube embedded videos. |
| CSS-Tricks | https://css-tricks.com | Multiple css styles were researched here |
| w3schools/ | https://www.w3schools.com/ | Multiple css styles were researched here |
| Bootstrap Date Picker | https://bootstrap-datepicker.readthedocs.io | This site provided the full solution for the date picker used in the Booking enquiry form |
All media was provided with permission from Divide of Everything
For the About us page I received inspiration for the format of the page from the following site: https://conference.awwwards.com/san-francisco/speakers