Your Boy George

April 2, 2013

Your Boy George

Created in partnership with 27 Sound. Web Producer: Matt Stine.

Your Boy George

Del Exilio

November 21, 2012

Del Exilio

Created in partnership with 27 Sound. Web Producer: Matt Stine.

Del Exilio

Clinton Curtis

October 13, 2012

Clinton Curtis

Created in partnership with 27 Sound. Web Producer: Matt Stine.

Clinton Curtis

Curtis & Reinhard: At the Pigeon Club - Artwork

August 13, 2012

At the Pigeon Club

Created in partnership with 27 Sound.

Political Subversities Redesign

June 22, 2012

Political Subversities

Since their original website launched in 2010, comedy group Political Subversities has begun to generate a lot of online content including regular blog posts and videos. Their website, therefore required a redesign to better showcase this media. In addition to prominently featuring the latest articles and videos, this new design for 2012 also focuses more attention on establishing a brand including a new logo and color scheme. Check out the new site at http://www.politicalsubversities.com

Darke County Visitors Bureau

May 15, 2012

Darke County Visitors Bureau

Last summer I designed and developed the website for Darke County's Visitors Bureau while working closely with Encounter Marketing who oversaw the project management and marketing goals. The website is centered around showcasing local businesses and attractions and features an interactive itinerary builder to help users plan their trip to the Darke County area. You can see the site and all there is to do in Darke County at http://www.visitdarkecounty.org

Hupman's Lawn Care

April 4, 2012

Hupmans Lawn Care

I partnered with Encounter Marketing to create the website for Hupmans Lawn Care, a lawn care and landscaping company located in Greenville, Ohio. See the site at http://www.hupmanslawncare.com

The Well

September 15, 2011

The Well

The Well

Dominique Toney

August 22, 2011

Dominique Toney

I created this site last year for New York City based actor and singer, Dominique Toney.  As with many of my clients that I've worked with from New York, Dominique is multi-skilled and extremely talented.   View her website at www.dominiquetoney.com.  (You can also find her as a member of the comedy group Political Subversities).

Senior Independence of Southwestern Pennsylvania

July 18, 2011

Senior Independence of Southwestern Pennsylvania

I created this single-paged site for home care service provider Senior Independence of Southwestern Pennsylvania.  They were looking for a basic straight-forward landing page that provided a way to get in contact with them, explained their services, and supplied links to find out more information about their industry.  View the site at http://www.seniorindependenceswpa.org.

Political Subversities

June 23, 2011

Political Subversities

One of my favorite things to do when I visit New York City is to see comedy, and Political Subversities is a group that puts on a great show.  They perform hilarious songs/sketches that point out the humor (and absurdity) of all things politics and popular culture.  These guys are all extremely talented and very funny.  I first created a website for them back in 2010 and it's been evolving ever since, most recently incorporating a blog.   Check out Political Subversities at http://www.politicalsubversities.com, watch some of their videos, read their musings, and definitely go see them live on Saturday nights at the PIT!

Jessie Barr

May 17, 2011

Jessie Barr

My most recently completed project is a website for the multi-talented New York City actor, singer and voiceover artist Jessie Barr.  Take a look at the new website and view samples of Jessie's work at http://www.jessiebarr.com.

PS|Ship

May 9, 2011

PS Ship

Last fall I worked with PS|Ship to redesign their website.   PS|Ship is a California-based software company that provides shipping and receiving solutions.  They wanted a clean, uncluttered design that clearly highlighted their products.  See the new site at http://www.psship.com.

Matthew Robert Gehring

April 17, 2011

Matthew Robert Gehring

Today, I launched a site for Matthew Robert Gehring, a New York City performer and writer.  I am really pleased with how everything turned out, especially some of the smaller details (such as the way the background of the navigation fades in behind Matt's photo when you hover over it).  You can view Matt's brand spankin' new site at http://www.matthewrobertgehring.com.

Responsive Web Design with Media Queries

April 16, 2011

It used to be easy to predict how users would view your website.  In the age of 800x600 and 1024x768 resolution monitors, you could design a site and be fairly confident that it would frame nicely in most people's browser windows.

Today most monitors have much larger resolutions, and there are so many internet-capable portable devices like iPads and smart phones, one fixed-width design doesn't seem to cut it anymore.  No matter which display you design for, only a fraction of your users will view your site in all the perfection you intended.  If your design is too small, there will be lots of wasted space on a large monitor.  If your design is too large, important content will get cut off become too cramped on smaller screens.

Last November I attended the Future of Web Design conference in New York City.  Ethan Marcotte gave a talk entitled "Responsive Web Design" which dealt with just this problem.  He talked about designing for the web in such a way that your layout will dynamically adapt to any size window.  This way your site will always be optimized whether on a large high-resolution monitor or a small mobile screen.  To begin creating a fully-responsive design, a website needs to be liquid rather than fixed, meaning that elements of the site are sized using percentages, rather than static pixels.  The design will then grow and shrink proportionally as needed.  But at certain sizes, purely proportional designs begin to break down.  Less important elements become too large, or areas of text become too narrow to read.  It's at these "stress points" that Ethan showed how to use a CSS technique call Media Queries to change the layout to fit the new viewing area.

The idea goes like this: with CSS media queries, styles are swapped in and out based on the capabilities of a device including resolution, width and height (of the screen and browser window), and orientation.

Here is an example of a media query:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="large-styles.css" />

In this code, if the browser window is wider than 1000px, the new stylesheet for large layouts will be applied.

To see what this actually can look like, take a look at Ethan's test site: http://robot-or-not.com and try resizing your window.  Pretty cool, huh?

I recently had a chance to utilize media queries in a site I was helping with.  My friend Jeffrey Chandler just refreshed his photography website, http://www.jeffreychandler.com, and switched to a full-width design.  One of the problems that comes with a full-width site is that in a large window, paragraphs of text start to become too wide to read naturally.

So I added in a Media Query to adjust the paragraphs to line up in two columns once the width exceeded a certain limit.  In this case, I used the media query right inside the existing stylesheet to adjust particular styles.

Here's the code:

@media screen and (min-width: 1000px) { 
     .content .paragraph {
          width: 45%;
          float: left;
          margin-right: 5%;
     }
}

Once the screen width is larger than 1000 pixels, the new styles for paragraphs become active, making them float into columns that take up half the width. (Notice that the width is in percentages, not pixels).



Another great use for media queries is to create a quick mobile-friendly version of your site.  I also added this code for when the screen is less than 920 pixels wide:

@media screen and (max-width: 920px) {
     #nav {
          clear: left;
     }
}

Notice how the navigation slides down below the title to create a layout that works great on a mobile browser.

This idea of Responsive Web Design definitely takes more planning - you need to consider how your design will hold up on a wide spectrum of sizes and orientations, and potentially design multiple versions of your site.  But if you're at all concerned with the experience that your users have when they visit your site, it's time well spent.  And this method won't work for all designs.  Sometimes it's still best to design a killer fixed template that you know will always look great in its static form.  Then, if necessary, create a separate mobile version that is optimized for portable devices.  But it never hurts to consider all the different ways users will interact with your website.  After all, the most important job of a Web Designer is to craft a pleasing experience for your users.

To learn more about Media Queries, visit the W3C Website.

Shaina Taub

April 7, 2011

Shaina Taub

About a year ago I created a website for Shaina Taub - a very talented singer / musician / actor / composer / you name it from New York City.  One of her current projects is a musical - a "folk-funk opera" to be exact - called The Daughters which I recently had the pleasure to see.  It was fantastic - especially the music!  You can learn more about it and hear some of the songs here.

And be sure to give a listen to Shaina's other music as well.  She has an amazing one-of-a-kind voice, and some pipes to boot.  "Bear and Otter" is a personal favorite at the Stoffer house.  Check out Shaina's site at http://www.shainataub.com.

Posing With Friends

March 29, 2011

Posing With Friends

I recently finished a site for Posing With Friends, a photo blog with a simple, yet hilarious concept: Find a tourist taking a photo, and copy their pose right beside them. Posing With Friends already has photos from around the world and invites users to submit their own shots. Check it out at http://www.posingwithfriends.com.

I've Officially Launched PaulStoffer.com!

March 28, 2011

A web designer without a website - how tragic!  It's been a long time coming, but the time is here.  I finally have my very own website.  My clients will no longer need to take my word that I'm able to create a website! 

Check back to see sites I've completed and projects I'm working on, as well as any random thoughts I may have about the web design world.