A local Oswego counseling practice gets a website

Heather Rice CounselingMy wife, who is currently in grad school studying mental health counseling, is logging practicum hours with a local practitioner. Their old site was in Wix and had terrible SEO value and wouldn’t properly display on mobile phones. To remedy this, I whipped up a WordPress theme using Bootstrap v3, and gave them a fresh new site to build their practice off of. The site features a blog, which will educate the community on topics relating to mental health. Heather Rice, who offers counseling services in Oswego, NY, now has a simple new website built on WordPress that can grow with her business.

 

SUNY Oswego’s 2014 Annual Report

2014 Annual Report

I’m super proud of what our team at work was able to accomplish in the midst of a Drupal build/migration, as well as our day-to-day tasks. The writing is top-notch and dives deep into the happenings of SUNY Oswego over the past year.

The primary designer of the project was Kelli Ariel, who had a large part in deciding how the site looked. I took the lead on the front-end development. Since I was so involved in the front-end code and design, that’s mostly what this post will be about.

What did this project take to build?

It was about a month of throwing around ideas, designing, coding and Slack conversations. Our process usually involved Kelli coming up with a quick mock-up of what certain parts of the site would look like, then she’d pass those mocks to our Slack channel, some brief discussion would ensue with our team and then I’d code it to work on the web. It worked pretty well for us and allowed us to get a lot done in a short period of time.

Design, development, and content were all intertwined throughout the project. This helped quite a bit. The primary writer, Julie Blissert was very flexible to work with. We were able to get a content structure formed in the early part of the process so design and development could go on, even though the content was still in the process of being written. For example, by structuring the content, I mean the blocks that you can hover over on the site were defined as having:

  • A headline
  • Optional subhead
  • ~325 characters of content on hover

hover-blocks

Without designers, developers, and writers working together to define things like that, a project can get unnecessarily messy.

Development tools:

  • Bower to manage libraries
  • Grunt to build, minify, and concat files to cut down on requests and file size
  • Git for version control

Libraries used:

  • jQuery
  • Waypoints
    • Used to lock in the sticky horizontal navigation
    • Used to fire an event when you hit the bottom of the page. This would then slide out the ‘next’ arrow near the footer.
  • CountUp.js
    • Used in the number panels to count up our statistics
  • Chart.js
    • Used on the Facts and Figures page to build the charts
  • Bootstrap’s grid system
  • Modernizr for feature detection

Fun features

Theme Color Cupola Card

Theme Color

With support for theme-color in the newest versions of Android, it allows web developers to customize their site’s appearance within the Android OS. For example, I was able to change Chrome’s title bar to be in line with our brand colors. I was also able to add our signature cupola icon to the ‘card’ when the user looks at all open apps.

It’s little things like this that are invisible to most users, but adds to the experience.

Sticky Header

On every page, whether you are on a mobile device or a desktop computer, the navigation will ‘stick’ to the top of the view port, allowing users easy navigation to other sections of the site. It seems particularly useful on mobile devices since it can be cumbersome to scroll all the way back to the top of a long page in order to reach the navigation again.

Scrolling Meter

Our web technical lead, Rick Buck pushed for the addition of the scrolling meter, which gives the user a subtle sense of orientation while reading the page. While scrolling down the page, a small green bar will appear under the navigation that shows how far down the page you are. When the bar reaches the end of the screen, you’re at the bottom. This can give users the ability to know where they are on the page with a quick glance.

scrollingmeter

 

 

My first jQuery plugin – check it out!

Well, I finally got around to it. I’ve been talking about making a jQuery plugin for months now but I finally put my head down and did it. I took the scrolling progress meter that we used for the 2013 SUNY Oswego Annual Report, and made it a plugin.

Still have some work to do. There’s some functionality I’d like to add and I just noticed it doesn’t work properly in IE8 (big surprise), but I’ll get that ironed out soon.

2013 SUNY Oswego annual report

Each year, the annual report gives other SUNY presidents, faculty, and staff a glimpse into what the college has been up to in the previous year. It’s usually something that is placed in the same template as the rest of the site (see the annual report from 2010, 2011, or 2012) and has sections that highlight achievements of the college. The content (writing and photos) have always been very good, but the lack of depth in the web department usually means that the content gets put into an old template because of time constraints.

Since I joined SUNY Oswego’s public affairs office, there are now more resources and man power to make things stand out a little more. This year, we looked for a way to highlight the already awesome content in a modern way, using some cutting edge design patterns that looks simple, but has a decent technology stack going on under the hood. I think we achieved our goal and then some with this project.

A few screenshots

Landing page for "modern" browsers that can handle HTML5 video
Landing page for “modern” browsers that can handle HTML5 video
This is the basic template for a content page. Same nav at the top, large full width photo with a headline and introductory text.
This is the basic template for a content page. Same nav at the top, large full width photo with a headline and introductory text.
A little further down the page.
A little further down the page.

View the 2013 SUNY Oswego annual report

It was definitely the largest team project I’ve ever been involved in. Given how many people contributed to the project, I think it went smoothly.

Credits:

Writing & organization: Julie Blissert
Project manager / UX decisions: Rick Buck
Art direction / designer / UX: Nick Malchoff
Photos: James Russell, Peter Finger
Video content: Jeff Newell
Photo & video support: Jennifer Osborne
Front end development: yours truly

Features:

  • Device agnostic
    • Used “graceful degradation” to ensure people with older browsers could at least access the content.
  • HTML5 video
  • Modern design patterns
    • “Hamburger” menu button
    • Large, full width photos with overlays
    • Custom typography
  • Performance optimizations
    • Concatenation and minification of site assets (CSS/JS)
    • Minified images
  • Development environment that supported rapid development/deployment
    • Git for version control
    • Grunt for task running; concatenation, minification
    • Rsync for easy deployment
  • Sprinkles
    • JavaScript based table of contents with scroll meter

Stay tuned, I’ll be writing more about some of the front-end development aspects of this project, since that was mostly what I worked on. Grunt, git, performance optimization, oh boy! Sounds like a lot of fun. 🙂

Children’s Museum of Oswego Gets A Website

cmoo

I’m happy to share with you a new website I did for the Children’s Museum of Oswego. It was a pleasure working with Jon and Jill Shaver on this and they are truly doing a wonderful thing for the Oswego community. While I don’t currently live in Oswego, I was born and raised there and know there needs to be more things like this there. If you’d like to find out more information about CMOO, check out their website at www.cmoo.org.

Innovative Selling Solutions Joins The Web

Innovative Selling Solutions, Inc. is a multi-specialty sales company focused on selling innovative biopharmaceuticals, medical devices, diagnostics, and services to the healthcare community.

I just got done working with Mark at Innovative Selling Solutions and together we went from no idea about a website to a nicely polished one in a couple of weeks.  It was a fun project and I enjoyed working on it.  I did logo and web design for this project.

Thumbnail of the Innovative Selling Solutions Website. Click the thumbnail to check out the live website.