Dame Saint Orléans

Responsive websites and visual content
for businesses and individuals who want to stand out.

Little Queen Website Case Study

‚Äč Little Queen Website

About

Re-designing the Little Queen website was a project that I had some personal investment in. It also brought together my two worlds, rock guitar playing and web design. Re-designing the Little Queen website also gave me a unique opportunity to partner with another developer. Sean Harrison, leader of the Little Queen band also happens to be a Coldfusion developer. Ultimately the joint plan of the re-design was that I would do the front-end, including graphic design and layout, which is not Sean's specialty, and then Sean would convert files where necessary to make the site processable by his Coldfusion-based server. This site gave us a chance to work together, and me a chance to create code that would be usable by another developer on a platform that I had not used in the past. The original Little Queen website functioned in all the ways it was designed to, but it was a mostly non-responsive website that had a lot of out of date photos that in most cases, were very small. From a visual standpoint, the site was fairly basic and not very modern. Viewing the site on a mobile device required "pinching and zooming" to adequately read content and use the small navigation section. My task was to remedy the non-responsiveness of the site, give it a modern facelift, make it stand out and above the websites of known other Heart tribute bands, and work and communicate with Sean to work out any bugs and deliver the final product.

Skills and Technologies Utilized:

Web:

  • HTML5
  • CSS3
  • Responsive, Mobile-First Design
  • Javascript
  • JQuery
  • PHP

Design:

  • Adobe Photoshop

Project Goals

  • Create a mobile-first, responsive layout for website that would scale for use on phones, tablets, laptop, and desktop monitors.
  • Increase user experience with implementation of drop down menu in mobile view of site.
  • Update content and remove irrelevant existing content including text, images, and links
  • Improve visual content by creating appropriately sized and positioned images.
  • Improve readability of text with cleaner layouts and text margins, as well as full-bleed div's to section off different content areas.
  • Increase user connectability with implementation of a direct contact form, direct email links, and social media icon links.

Before

Little Queen Website Home Page Before Re-Design Little Queen Website Farm Page Before Re-Design Little Queen Website Location Page Before Re-Design Little Queen Website Mobile View Before Re-Design

After

Little Queen Website After Re-Design Little Queen Website Home Page After Re-Design Little Queen Website About Page After Re-Design Little Queen Website About Page After Re-Design Little Queen Website Contact Page After Re-Design Little Queen Website Hay Page Mobile View After Re-Design Little Queen Website Hay Page Mobile View After Re-Design Little Queen Website Hay Page Mobile View After Re-Design Little Queen Website Drop Down Navigation Menu After Re-Design

Improvements Made

  • Creation of modern, visually compelling design emphasizing professional photos of the band and content in full-bleed div's.
  • Need for horizontal scrolling based on screen size eliminated
  • Need for "pinching and zooming" in order to use navigation on smaller screens eliminated by implementation of a drop down menu on smaller screened devices.
  • Creation of customized JQuery Lightbox photo gallery with re-sized photos to display photos in a more aesthetically pleasing and user friendly way.
  • Creation of cleaner overall layout, up to date information and photos, reader friendly margins and spacing, and addition of user experience enhancing features, such as a contact form.

Outcome

When I saw the photos that were at my disposal to use for this site the wheels really started to turn with what I could do with the final product. I was able to use them for headings, div backgrounds, and to showcase each member of the band. The full-bleed concept with div's and images was part of my general design layout structure and helped really give a refreshing new look to the site. When I was done with the front-end design of the site I passed the files over to Sean who then brought in the necessary database-driven pieces to be able to host the site and its functions on his server. After a few visual tweaks and cross references to make all the utilized css compatible, we had a rocking site up and running and are receiving great feedback from booking agents.

Photo of Sean Harrison

Testimonial

If you're thinking about getting some webwork done, you need to talk to Rachel Brandsness. I'm used to people developing layouts for stuff and then handing them off to me, and then I fix all their mistakes and drop all of our database-driven stuff into it - Rachel whipped out our new website, and it was a breeze to integrate - it looks great (I had an agent tell me it looked like a 'very expensive website'), scales, and didn't require any fixing at all. Really good work.

Rachel is pretty fabulous at this stuff, and she's using current tech (advanced css, divs, etc. I still use Tables, but I'm a loser) that works on handhelds and across all major browsers.

If you need some web stuff done, get with Rachel. You'll thank me.

-Sean Harrison - Coldfusion Developer, Owner - Smashing IT, Little Queen - The Music of Heart