This project is the second Milestone Project for Full-Stack Diploma in Software Development. It is a User Centric Frontend Development Project, using HTML5 and CSS3 and based on a 'Band' Theme – The Monkees, who are a 1960's band. The project entails building a static front-end only website.

I tried to visualise and understand the User Experience, (UXE) and what a typical user of the website would require and why they would want to visit the Monkees website. The type of user could be anyone (any gender group, young or old). In particular, I feel the site would attract those who remember the Monkee's songs from the 1960's and watched their TV series. I would like it to be an enjoyable website experience for users and maybe bring back reminiscence of past years, as well as encourage younger viewers to become a Monkees fan. The website should promote the Monkees, by having clear navigational links to their music tracks (both 1960's and newer music, with links to social media (Facebook, YouTube, Instagram, etc) and other internet links. The website also has modals for Login and Sign-up to encourage new and existing Monkees fans. There is a Terms of Use page that new users must agree to. The website also has a Bookings form for users to book the Monkees for Weddings or Christmas. There is also a Contact page for fans to drop a note to the Monkees. Users can listen to Monkees audio tracks and watch videos.

For direction in UX design, I revised the Code Institute tutorials, and also referred to this website about user experience, Red Rocket Web Specialist, who consider that the two most important aspects of designing a good website are (1) the Abstract aspect (idea, goal, etc) and (2) the Concrete aspect (how to get a user to click on a link, etc). The transition from Abstract to Concrete should remain linear to ensure a smooth transition, with each phase being fluid and overlapping.

Garret's 5 Planes of UX design are as follows:-

The goal of the Monkees website is to attract both existing and new Fans and promote the Monkees (their music, tours, etc) and to impart a general Monkees 'good feel' to website users. It also allows users to make bookings for Monkees to play at Weddings or Christmas. There is a Login and Sign-up Modal. On signing-up users will input their names, email address and other contact details and be kept up-to-date with Monkee's news.

On the Monkees website, users can view all pages (Home, Video, Audio, Bookings, Contact, Login, Sign-up, Terms of Use). In Contact page, fans can drop a note and in Bookings page they request the Monkees to play at events (Weddings or Christmas). In Login they can input their details and login, and in Sign-up they can sign-up and agree to Terms of Use. On the Video and Audio page users can watch and listen to Monkees tracks.

This is the plan or flow of interactions users will take to navigate your website. A structure typically contains both a site map and a flow chart. To this end I tried to visualise the website, firstly in my mind and then on paper, by doing some mock-up sketches.

Home Page Sketch

Video Sketch

Audio Sketch

Bookings Sketch

Contact Sketch

Terms of Use Sketch

In this section, I tried to place call-out button to Sign-up that I highlighted on the Home Page and tried to balance elements and aspects, like headings. I used MockFlow tool to detail page by page the type of layout I wanted to have across all pages in the website.

Wireframe for Home, Video & Audio Pages(PDF)

Wireframe for Bookings, Terms of Use and Login & Sign-up Modals(PDF)

The surface, or the skin – is the interface for which visitors will engage with your business.
All typography was in English but as Google has a translator, can be easily translated. I particularly choose a congruent colour scheme, which I felt gave an uplifted feel to the website and was congruent across pages. I felt the layout was appropriate for this type of website.

This website has various pages for users familiar with The Monkees and unfamiliar. It allows fans and potential fans to login and sign-up and book the band for events, as well as contact, watch and listen to Monkees music.

This website uses HTML5 and CSS3 and is purely front-end developed, rather than back end. On filling in forms such as booking, contact, etc, there is no output to any server, however on signing-up users are directed to a Terms of Use page and required to accept the Terms of Use of the website. The site is styled with Bootstrap 3.3.7. The sign-up modals use Javascript and JQuery.

• Bright Home Page in congruent colors with bright Sign-up Modal with clickable link.
• Sliding Photo Carousel of The Monkees.
• Font Awesome Spinners with links to pages and web-links.
• Login and Sign-up Modals with links for Sign-up in Navbar, Footer, and in body of Home Page.
• Bookings page to The Monkees for events such as Weddings and Christmas.
• Video page with both MP4 video and YouTube.
• Audio page with music tracks and photos.
• Terms of Use page on signing-up to agree on terms of use.

• None

HTML5, CSS and Javascript

HTML5

• Used HTML5 to handle page routing and to build custom directives.

Bootstrap 3.3.7

• Used Bootstrap to give our project a simple, responsive layout.

JQuery

• Used JQuery for boostrap and displaying modal and for Tootip (easy scrolling).

Javascript

• Used Javascript for boostrap and displaying modal

CSS3

• Used CSS3 for styling and enhancing the look of the website.

From a testing view-point, I've tested responsiveness on both mobile and desktop, in a variety of screen sizes.

• Google Chrome (version 68)
• Opera (version 55)
• Mozilla Firefox Developer (version 63)
• Internet Explorer (version 11)

Testing across desktop (using developer tools) and mobile browsers

I have tested the Monkees website and on the above desktop browsers, and it works fine. I also tested on mobile browsers, however on mobile Chrome I could not play MP4 video. I therefore included a YouTube Video of “Daydream Believer”. I used both Firefox and Chrome Developer tools to test the website in responsive mode - Apple iPad Air2, Apple iPad Mini2, Apple iPad iPhone 6s, Google nexus 4,5,6,7, Laptop (1280 x 720 and 1366 x 768), Nokia Lumia 520, Samsung Galaxy Note 3, Samsung Galaxy S5 and S7 and it renders well in responsive mode.

Testing Audio and Video

I tested all links to Video and Audio pages to ensure the music tracks played and all play very well, except, as explained above, on mobile chrome the MP4 video doesn't play. I tested on mobile browsers using both landscape and portrait mode. I added both the .ogg and .webm extension to source src files in video controls. The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera. An add-on can be installed for Safari - Supported Media Formats. I tested both audio and video pages in responsive mode on both firefox and chrome by using developer tools. The video did play across responsive and desktop versions using developer tools, however on my own phone handset (Galaxy S5), which is an out-dated and an older version, I couldn't play the MP4 video in mobile chrome but I could play it on mobile firefox.

Testing Forms (Sign-up and Login Modals, Contact and Bookings Forms)

For all of the above modal and form testing (see details of testing below!), I referred to online resources for form validation. I found this one particularly good, Happier HTML5 Forms, as it gives a very simple and quick solution to error handling in form fields. It also used CSS for highlighting incorrect or omitted inputs in red. I also found Mozilla Developer website very useful, as it helped to explain the powerful way that HTML5 input type boxes can be utilised to control incorrect user input, and gives some excellent examples and resources Mozilla Developer.

Testing Sign-up

I tested the Sign-up modal extensively and added form validation (6 lines of javascript which added an eventListener to the input boxes, alerting if (for example) if fields were left unfilled. I used the (type="" required) attribute across all input boxes to alert that an input was a requirement. I also used CSS for a red border around unfilled input boxes. This, at least meant that forms couldn't be left uncompleted. However, as this is only a front-end project, there is no back-end and input validation is limited. For this modal, unfilled input fields are highlighted in red, and must be completed before the user can sign-up. The only input boxes in sign-up modal are Username and Password (both create a password and repeat it). There are no alerts for mismatched passwords or usernames, only for uncompleted input boxes. On successfully completing the form, the user is directed to 'Terms of Use' page.

Testing Login

Similar to Sign-up, I tested Login modal. The only input fields are username and password. This modal also has an option to sign-up, if not already done so, and can re-direct to Sign-up modal. Similar to sign-up modal, the login module alerts the user that all fields are required to be completed, and will not allow the user to login until all fields are filled. Those fields left unfilled are highlighted with a red border.

Testing Bookings Page (with Form)

Similar to above modal tests, the Bookings form has red bordered alerts if not all fields are completed, and doesn't allow the user to make bookings otherwise. In addition, fields for email address and phone number must be in the correct format, otherwise will prevent successful completion of the form.

Testing Contact Page (with Form)

Similar to above other input form tests, the Contact form has red bordered alerts if not all fields are completed, and doesn't allow the user to send a message otherwise. In addition, fields for email address and phone number must be in the correct format, otherwise will prevent successful completion of the form.

Testing Terms of Use

I tested the 'Terms of Use' page to make sure that users could agree to the Terms of Use, and this works fine.

I used version control on an ongoing basis to back-up my code to a remote repository and used version control at regular intervals throughout development. I did make quite a large number of commits, as I revised the project and made a number of changes.

This project was developed in Cloud9 IDE.
I used Gh-pages to deploy the website - The Monkees Website

The content contained in the project is mainly my own and anywhere I've used any outside references, I've made reference to them (as in this README document).

• I based the project on code I learned throughout the course from the tutorials of Code Institute and by referring to the lessons. For the Login and Sign-up Modals and anything else I needed to get guidance on, I used W3Schools and also on occasion I referred to Stack Overflow

• The photos used in this site were the boiler plate files from Code Institute, which formed part the 'assets' folder in my development IDE (Cloud9).

I received inspiration for this project from both the requirements of the full-stack Diploma at Code Institute and from the inspiring nature of researching the theme of the Monkees band and found it a very interesting and creative endeavour.