The Monkees Website

The Monkees website(front-end only) has been developed in order to provide current fans and potential fans with quick and easy access to all the latest information about the band. Users can keep up to date with news and tours information, watch and listen to clips from the bands catalog and any new material as it becomes available, learn about the history of the band and it's members, checkout out the latest photos of the band, quickly navigate to the band's social media pages to learn even more about them and contact the band in order to book them for an event.

UX

Since this website is primarly directed at fans of the band, I thought it'd be a good idea to use some of the band's color scheme, namely the reds and blues for major parts of the pages. Initially I stylized the website reflecting the bands 60s and comic book feel but decided against it at the end, opting for a more modern clean style.

The layout is primarly achieved using flexbox, at the begining I wanted to use the Bootstrap framework but had some difficulty positioning the bands logo in such a way that it would overflow past the bottom of the navigation bar and flexbox allowed me to solve that easily. Bootstrap is still used but only to include its inbuilt elements like the modal and carousel.

The first page(home page) presents a user with the most important information, that is the publicity information where a user can book the band for an event, news about the band and tour information. While the navbar provides the user with links to checkout the bands history, clips or photos.

Mockups in a pdf format and user stories can be found here UX assets

The final version of the project differs from the mockups. As I developed the project I would realize that some of the design decisions weren't the right solutions and I would update them on the go. E.g. For the news items I wanted them presented as smaller elements with 3 of them in a row, a button would expand them to reveal their text content. That would work well if the buttons took a user to a separate page containing the details of that news item but the way I had it set up, it was hard to read and wouldn't display correctly on some resolutions. At the end I decided to have each item take up the full width of the container and be large in size which allows the content to be expanded and be easy to read.

Features

• Events booking - form built by modifying the Bootstrap modal component, allows user to book the band for an event by filling out the form.
• Expandable containers activated through :hover and for buttons :checked pseudo-classes - expands and collapses elements on button click and cursor hover.
• CSS lightbox used for details about band members activated with :checked pseudo-class - displays a lightbox containing text when a button is clicked.
• Collapsible navigation bar with a tribar activated through use of :checked pseudo-class - allows for a collapsible mobile navigation by clicking a button.
• Audio and video playback by use of the HTML <audio> and <iframe> elememts - users can watch and listen to the band's clips by using the HTML widgets.
• An image slider built with the Bootstrap carousel component - Scolls through the band's photos and a user can use arrows or indicator icons below to scroll through them.

Technologies

• HTML5
  • Used for structuring content
• CSS
  • Used for the presentation of the page
• Flexbox
  • Used for the layout of the page
• Bootstrap
  • Used for the modal and carousel elements
• Markdown
  • Used for formatting user_stories.md and README.md

Testing

Manual Tests

Tested on mobile, tablet and desktop devices using different devices and developer tools, and in different browsers(Firefox, Microsoft Edge and Google Chrome) to test browser compatibility.

Automated Tests

• W3C Markup Validation Service
  • Used for testing html
• W3C CSS Validation Service
  • Used for testing css
• Mobile Friendly Test
  • Used for testing mobile layout

Bugs

• The publicity container image wouldn't show when using Microsoft Edge. It was due to it's z-index being set to -1. Solved by setting the z-index to 1 and adjusting other elements' z-index to appear above the image.
• The carousel indicator for the last photo doesn't work, get's skipped when using arrows. Haven't found a solution yet.

Deployment

Deployed to Github Pages

Link: https://alexander4k.github.io/the-monkees-website/

Clone the repository by copying the clone url

In the terminal type git clone followed by the copied url

cd into the-monkees and open index.html

Credits

Content

• News - Monkees
• Tours - Monkees Facebook
• Band Information - Wikipedia
• Peter Tork Information - Wikipedia
• Mickey Dolenz Information - Wikipedia
• Davey Jones Information - Wikipedia
• Michael Nesmith Information - Wikipedia

Fonts

• Fonts - Google Fonts

Media

Images

• Logo image - Monkees
• Publicity container background image - ListToTheBand
• News items' images - Monkees
• Band image - HomeSecurity
• Member images(image was modified) - BlurtOnline
• The Monkees album image - HomeSecurity
• The Birds, The Bees and The Monkees album image - Amazon
• More of the Monkees album image - Amazon
• Carousel image 1 - HomeSecurity
• Carousel image 2 - BoingBoing
• Carousel image 3 - KitchenDecor
• Carousel image 4 - CatScratchFeverSong
• Carousel image 5 - HomeSecurity
• Carousel image 6 - Playbrain
• Carousel image 7 - Prince
• Carousel image 8 - TopsImages
• Carousel image 9 - AtomicJunkShop
• Carousel image 10 - BlurtOnline

Videos

• Media page video - Monkees Youtube Channel

Music

• MP3 Skulls

License

MIT