Project: Long 'N Short

Context

This project was completed as an assignment for a course on jQuery Mobile. The subject was of my choosing. I chose to create a site for a hair salon/barbershop. Below is a list of key features.

  • This was to be a complete website with at least 7 pages.
  • Fully responsive pages using the layouts of jQuery Mobile. Included was to be a navigation panel for mobile use.
  • One page was to have an image gallery and a slideshow using a third-party plugin.
  • The use of listviews as a way to format content and enhance page design.

Technologies applied: HTML5, CSS3, jQuery, jQuery Mobile, Responsive Web Design, and Photoshop

Page Designs

Home

Home page screenshot for Long 'N Short

About

About page screenshot for Long 'N Short

Team

Team page screenshot for Long 'N Short

Services

Services page screenshot for Long 'N Short

Portfolio

Portfolio page screenshot for Long 'N Short

Bookings

Bookings page screenshot for Long 'N Short

Contact

Contact page screenshot for Long 'N Short

Mobile Layouts

Below shows how the indicated page layouts display on iPads and Tablets.

Home

layout of home page on tablets or iPads

Navigation panel

layout of home page with navigation panel on tablets or iPads

Services

layout of services page on iPads or tablets

Portfolio

layout of portfolio page on iPads or tablets

Below shows how the indicated pages, including the slideshow, display on smartphones.

About

layout of about page on smartphones

Team

layout of team page on smartphones

Slideshow

layout of portfolio slideshow on smartphones

Bookings

layout of bookings page on smartphones

Image Gallery And Slideshow

The top image is a screenshot of the image gallery, and the bottom image is a close-up of the first image in the slideshow. Users can either click (on desktop or laptop), or tap and swipe (on mobile devices), in order to view the slideshow made with the use of a third-party plugin.

Image gallery screenshot for Long N' Short Image slide screenshot for Long N' Short

Use Of Listview

The top image shows a close-up of the services menu. When the user clicks, or taps on mobile, the "beard and moustache" bar (top image), as well as any other yellow bar, a listview of more specific services is revealed with images and descriptions for each one (bottom image). This is useful for formatting content and enhancing design.

Services menu screenshot for Long N' Short Services list view screenshot for Long N' Short

< Go back to portfolio page