Caryn Cziriak
Web Developer
If you are interested in working with me please contact me through my company, BuxMont Web LLC.
Spirit Foli Website ~ Responsive Redesign
Website, responsive redesign | Spirit Foli, January 2017 | HTML5, CSS3, Media queries, Flexbox, JavaScript, jQuery, PHP, Photoshop www.spiritfoli.com
Objective
In recent years mobile device use has increased to the point where it now surpasses desktop use for accessing the Internet. As a result, responsive design is now a prime consideration in developing a website.
This project was a redesign of a fixed width, non-responsive website that hadn't had a design update for quite a few years. The objective was to keep most main elements and images of the original design intact, but make the website responsive with a mobile-first implementation. A new color palette was also desired.
Approach
The old design resized too small to read or navigate on a mobile phone, and showed expansive white space on a larger desktop screen. The first step was to make the website display appropriately on different device sizes. With a mobile-first approach, the mobile view is considered the "base" view. It loads by default, and if the user's screen is larger than a specified size it will then add styling for the larger screen. On this project I started with the mobile view and created additional breakpoints with layouts customized for several different larger screen sizes.
Spirit Foli old design, wide screen and mobile views
General layout and design considerations:
I used a pared down, cleaner design that makes for better legibility on a mobile device. The text over the image on the body of the home page was removed, and a shorter summary displayed under the image. I darkened the header text and made the background image lighter, and removed the header image from pages other than the home page.
I reorganized and consolidated pages so there are fewer clicks needed to access information. A link was added to the home page for the main event promoted by the site, which is currently the Community Drum Circle, so it's easier to find. On the "Drumming" page that provides the details for the event, it was moved to a more prominent location at the top of page. The focus of the site has also changed since 2006, so I culled old information which is not relevant at this time, and added new information on music books available for purchase, along with sound samples. There are future plans to add online ordering.
The old site only had a basic "mailto:" link provided for contact. This was replaced by a responsive contact form.
Spirit Foli - Home page, full length view with Community Drum Circle link
Spirit Foli - Featured event placed above the fold
Spirit Foli - Music page with new Song Book content
Navigation:
The old two-line horizontal navigation under the header was removed and I added a navigation bar that sticks to the top of the screen as the page scrolls so it's always accessible. It's displayed as a dropdown menu with full width links for mobile view, and a horizontal top navbar for larger screens. I added a social media icon link section using Font-Awesome font icons just above the footer.
Color palette:
The desired base colors were a shade of purple toward the blue side, and a muted green. I selected the additional palette colors around those two base colors, and modified the images to match the theme.
Typography:
The "Pristina" script font that is used on the site was included as images before the redesign. To avoid the additional image download overhead, the font is used on the new design instead. It's a commercial font from Linotype, and the new design includes the web licensed font served directly from the website. For the rest of the site I used the "Open Sans" Google font in varied sizes and weights.
Spirit Foli - Mobile Drop-down Menu
Spirit Foli - Sound samples, sticky header, bottom of Music page
Spirit Foli - Responsive contact form