Skip to content
Website created for learning purposes, info provided isn't necessarily accurate, band does no longer exist. THIS PROJECT IS IN PROGRESS
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
wireframes
README.md
about.html
app.js
contact.html
index.html
music.html
pictures.html
style.css
testing.md
tour.html
video.html

README.md

Responsive Web-Design


A responsive website for a rock'n'roll/Swing/Rythm & Blues band "Alabama Slammers". Website consists of seven pages featuring home page which consists of a video from the latest concert an option to buy the newest CD and the subscription to the mailing list, two galleries for band's tour pictures and videos, page for listening and purchasing latest music, about page provides a brief history of the band, a page dedicated to check out tour dates and purchase tickets and a contact page which provides user with two different contact options depending on the reason for getting in touch.

The primary purpose of this page is to create an online presence for the band that would fully represent what they are trying to communicate through their band image and music style, encourage current fan base to stay involved and attract new potential fans.

Website goals:

  • Create an attractive brand image
  • Encourage to purchase tickets to shows and CDs
  • Grow fan base by providing enough media to rise interest in the band
  • Provide an option to represent and book the band providing contact forms leading to the correct person to contact for each purpose

UX

Target market

  • Alabama Slammers fans
  • People that enjoy Rock'n'roll/Swing/Rythm & Blues music
  • People that are looking to book a band
  • People that are looking for a rock'n'roll event to attend

The website was designed for band's current, returning and prospect fans, people that like rockabilly and swing music from the '90s and like to be thrown back to that period of time and for those who are looking for a band to book for an event or would like to feature "Alabama Slammers".

Website users are visiting the site in order to keep updated with what the band is up to, follow tour dates and purchase tickets, check new CD releases and purchase them, check out video and photo galleries as well as to listen to band's music. They might also want to contact the band for press coverage and/ or book the band for an event.

Website is responsive, understandable and easy to use. All the sections are clearly identified in the navigation and presented on its own page. links to external sources provided, there is no unnecessary content, therefore, the user is always aware of where they are, how they got there and how to go back. It is clearly identified by using buttons and forms of what is expected from a user to achieve desired results. The website design was inspired by 90's decade, colour palette and fonts used were intended to create a feel of 90's aesthetic while still be relatable and appealing for a modern user. There was no unnecessary decoration used in order to maintain a clean design which is aesthetically appealing and relevant.

User stories

  • As an old fan of the band, I want to be able to access tour dates and see the newest gigs first, I want easy access to buy tickets fast, I also want to be updated about any news regarding the band via email.
  • As a new fan, I want to be able to learn more about the band and check out media I haven't seen, heard before and purchase a CD.
  • As the writer for a music blog, I would like to feature a band, therefore, I need to find a correct person to contact for this purpose.
  • As a person who is organizing a wedding party, I need to know who is the right person to contact in order to hire this band.

Wireframe mockups

Features

The website is fully responsive. The desktop version has more visual information and more complex layout while in mobile version content is stacked and less visual elements are used in order to save space creating less scrolling, therefore better user experience. Media page includes a drop-down menu leading to different sources of media in order to save space on the navigation bar. All pages share same navigation which allows users to switch between pages and be guided back home when pressed on the band logo. Navigation has three different styles for desktop iPad and mobile versions. It is laid out inline for the desktop in order to fill the width of the page, allowing all navigation items to be well spaced out and easy to read, the logo is located on the left of the page while navigation items are displayed on the right. For the iPad, version logo is located on top of the navigation allowing all navigation items to still be well sized and visible. For mobile devices, and navigation items are hidden in the hamburger icon in order to save space and allow readability. All pages also share the same navigation which includes links to the band's social media. Mobile version includes fewer links in order to increase the visibility of the logos and saving scrolling space. Video and Picture galleries share a sticky footer so that users wouldn't need to scroll through the whole content in order to reach the bottom of the page.

Every page has it's own individual background to fit in with the design choice and layout.

Home

In the home page, the user is exposed to a band logo stretched through the page as well as the image of all the band members. On mobile and tablet devices only the logo is visible creating less scrolling in order to access more important content sooner.

The home page includes a video from the band's latest performance embedded from YouTube and a button under it which links to the video gallery, encouraging people to interact with a page without using navigation.

After the video, the image of the latest album with the song list and a button linking to an external webpage where user can buy a CD is added to encourage impulse purchase.

lastly, there is a subscription form at the bottom of the page, encouraging the user to subscribe to the mailing list and keep updated with band's latest news.

About

The About page includes the image collage of bands pictures from the concert and a logo which changes in design for iPad and mobile versions. Desktop version also includes a picture under the paragraphs which isn't displayed on smaller devices. and a brief description of how the band came to life.

Under the content, there are call to action buttons encouraging the user to check out the band's media content. Buttons change colour when hovered over to provide playfulness and better UX.

Photo/Video Galleries

Photo and Video Gallery pages are laid out in columns of thumbnails. For mobile view images and videos are stacked on top of each other in 1 column while iPad displays 2 columns and desktop consists of 4 columns. Photos enlarge once clicked on in order to provide a user an option to check out images in more detail.

Music

Music page consists of an image of CD and embedded band playlist from Spotify allowing users to listen to the band's music while on the page. For mobile and iPad versions content is displayed as a block with a CD art on top of the playlist while for the desktop view content is displayed inline using up the width of the screen and making all content visible without scrolling. Desktop version also includes a call to action button encouraging user to purchase a CD.

Tour

Tour page displays separate blocks of content providing the user with information about upcoming events, their location and a call to action button which leads to the external page in order to purchase tickets for the event. For the mobile and iPad version, all the information is stacked and button to purchase a ticket is places under the content while desktop users can see information displayed inline in order to increase readability and use less space.

Contact

The Contact page features two contact forms, which requires users name and email as well as provides a space for the message. At the bottom of the forms "Send" buttons are provided. Two different forms are created in order to direct the user to the right contact depending on the purpose of their message. Through these forms, the user is encouraged to either book a band or request information for press and marketing purposes.

Existing features

  • Each page holds a logo located within the navigation which leads back to the home page once clicked on.
  • The navigation bar is displayed throughout the webpage and all the navigation items are linked providing effortless flow through the page and easy navigation
  • Footer is displayed throughout the webpage displaying icons leading to the band's social media.
  • Call to Action Buttons are displayed on selected pages encouraging the user to stay on the page longer and visit all the pages on the website as well as allowing the user to make purchases through the page, therefore, the encreasing chance of impulse buy.
  • Contact Forms allows potential clients to book the band and/or feature "Alabama Slammers".
  • Subscribe to mailing list button consists of the message encouraging the user to enter their email in order to subscribe to a newsletter.
  • Buy Ticket buttons are provided on the Tour page encouraging the purchase of the event ticket.

Features to improve or create

  • Create a more appealing display for when the image is enlarged on the desktop view. /JavaScript needed
  • Make Subscribe button actually store data and send email /JavaScript needed
  • Make "Send" button transform into "Sent" once the form is submitted as well as to clear a text area once the message is sent /JavaScript needed
  • Make sure once submitted message goes to the right contact without the user being redirected to external mailing services /JavaScript needed

Technologies used

  • This webpage was created using HTML and CSS programming languages
  • Code editor Sublime Text was used as a development environment
  • BootstrapCDN was used to provide icons from FontAwesome
  • Google Fonts were used with text styling purposes

Testing

Testing information can be found in separate testing.md file

Deployment

This project was developed using the SublimeText IDE, committed to git and pushed to GitHub using Git open source version control system which I have installed to my computer.

Take the following actions in order to view a deployed version of the page:

  1. Log in to GitHub.
  2. Select EvaBroberg/Alabama-Slammers-Responsive-Website-Project from the list of repositories.
  3. Select Settings from the navbar near the top of the page.
  4. Scroll down to the GitHub Pages section.
  5. Under Source click the drop-down menu labeled None and select Master Branch. The page is automatically refreshed and the website is deployed.

Take following actions in order to run this project locally:

  1. Follow this link to the GitHub repository
  2. Under the repository name, click a green button that says "Clone or download"
  3. Copy the clone URL (make sure you have selected clone with HTTP section)
  4. In your local workspace open Git Bash
  5. Make sure you are inside of the directory where you want the cloned directory to be located.
  6. Type git clone and paste the URL copied from GitHub like so:
    <pre><span class="pl-c1">git clone https://github.com/USERNAME/REPOSITORY</span></pre>
    

Credits

Content

  • The text for the About page was was taken from band's old website
  • Website was designed and executed by Ieva Broberg.

Media

Code

  • JavaScript used to create modal images was taken from CodePen
  • JavaScript used to activate hamburger icon was created using information gathered from internet as well as a book called SuperHi

Acknowledgements

  • Neale Hobday - for allowing me to use his band for learning purposes and providing me with media and information for the project.
  • Spencer Barriball - for guiding me through the process of creating this webpage and sharing ideas and providing advice when needed.

Disclaimer

All content on the website, including images, are used for educational purposes only. The band no longer exists and Tour dates and any current information is false. Social media tags link to the home page of social media sites and submitted forms are not sent to actual recipient.

You can’t perform that action at this time.