Sing For Your Seniors

Sing For Your Seniors performing at the Village Adult Day Health Center in New York City

Sing For Your Seniors

Design / HTML, CSS, jQuery / PHP, WordPress

Sing For Your Seniors is a non-profit organization that uses music to change lives.

Sing For Your Seniors logo
Sing For Your Seniors home page
Sing For Your Seniors Performers page
Sing For Your Seniors Contact page

“Sing For Your Seniors is so proud of our new website by James Web Development! Barry really listened to our creative vision and applied that to build something neat, organized, but highly functional. Another wonderful perk about working with JWD is the continued care and service to your site. It is so nice to know that Barry is always trying to make our site more progressive as the landscape of the internet advances. Thank you so much, JWD for helping Sing For Your Seniors reach our goals in spreading joy to seniors in need! We couldn’t do it without you!”

Jackie Vanderbeck, Executive Director

The Beginning

Sing For Your Senior’s website before it’s redesign. I designed this version back in 2010.
Sing For Your Senior’s website before it’s redesign. I designed this version back in 2010.

Jackie Vanderbeck and I both attended the University of Cincinnati, College-Conservatory of Music. We were musical theatre majors and had dreams of making it big on Broadway. My dreams ended up taking me in a different direction, but hers have continued through her performing and her beautiful non-profit organization, Sing For Your Seniors.

Sing For Your Seniors brings professional actors and musicians into hospitals, nursing homes and care facilities to sing for those who don’t have the opportunity to go out and see live performances on their own. SFYS has made their home in many facilities in New York, New Jersey, and California, and is supported through donors and Broadway Cares/Equity Fights AIDS, the nation’s leading industry-based HIV/AIDS fundraising and grant-making organization.

The Design

Jackie was looking for a clean design. She wanted to make sure that the important points about her company stood out. She also had many beautiful photos that she wanted to feature of her performers, so we needed to make sure that the design of the website didn’t pull focus from those photos.

We started with a color palette and a subtle background. The color palette doesn’t actually contains any colors, but shades of grey. The pattern is used as a background for the website, and adds just a touch of texture to what would otherwise be a stark, white background.

The Content & Layout

The original website that we created was built in 2006, and was chock full of cruft. The navigation had too many links, and it was difficult to easily find information. I started by restructuring the content on each page, attempting to place pages in broader categories. This would reduce the amount of navigation links we needed.

I laid out the elements of each page using a home-brewed grid system. This grid is responsive, and changes the layout of the page depending on the size of your screen. The old website felt crowded and tight, so I made sure to add ample breathing room between sections on each page.

Mobile View of Sing For Your Seniors
Tablet View of Sing For Your Seniors
Desktop View of Sing For Your Seniors

The Code

Warning: Techy stuff to follow.

The coding of the website was pretty straight forward. Grunt was used for task management, the SASS extension language was used to preprocess the CSS, and jQuery was used for some light animation. I used some of the new HTML5 input types, such as email and url to create the forms. WordPress was used to integrate the blog which is used to discuss topics around senior care centers and recent projects and sessions. I used PHP to program the back-end of the forms, making sure that the results were emailed to the proper place.

Okay: That’s the end of the techy stuff.


Sing For Your Seniors »