On the twitter side, things are a little less buggy, but the biggest issue is that no plugins will tweet scheduled posts. This is a very big concern for someone like me, who writes most of his blogs on the weekends but prefers to publish them during the week.

I spent many hours tearing my hair out looking for a solution before finally realizing it was right in front of me all along: Feedburner. Such a simple solution! Setting up your blog feed through Feedburner takes roughly 2 minutes and using their “publicize” tab, you can connect it to your twitter account. Whenever the feed updates, new tweets go out for each new item.

The next step is connecting that to Facebook, which is easily done with Selective Tweets. Set your Feedburner twitter settings to automatically add #fb to the end of your tweets, connect your twitter account to Facebook via Selective Tweets and you are good to go.

Note: this post is also a test of this idea since I haven’t actually done it yet. Sounds good in theory though.

Update: Worked perfectly.

But, despite my lack of creativity in branding this post, April has been productive. So here is a recap of some of the more interesting items that hit (or have been started) this past month. Some new Parsons projects went live, a fun responsive page build for Atlantic Records went up, and the new design for the Dead Presidents Lounge was approved. (Visit post page for screenshots of everything mentioned).

Dead Presidents Lounge Website Design
Deadpreztattoo.com is overdo for a facelift and with some pretty exciting PR for them on the horizon, we figured now was the best time to do it. This site will be a wordpress site, responsive, and feature much more timely updates than their current site allows (including an Instagram feed and a blog). The designs are approved and I am currently deep in the dev phase. The site will probably launch in a couple weeks.

For Your Sake
The lovely Edith Levin designed a beautiful iBook for Atlantic Records recording artsists Shinedown, titled For Your Sake. To help promote the iBook, she also designed a one-page promo site for the book, which she enlisted me to build. The page is responsive and features a jQuery UI slider that makes use of a little script snippet found here to readjust the slider each time a browser window is resized. I can’t stress enough how useful this little piece of code is. Kudos to the author, Dave Kinsella.

Parsons Website Upgrades
Two new pieces on the Parsons site went live this month. One is a new Academics page that makes use of Isotope to create a filterable page of the various program offerings at the school. The menu is built with pretty standard jQuery but the most interesting aspect is the URL filtering. Based on parameters passed in the URL, the page can offer up pre-filtered results and even hide the menus and change the page title so this one page can function in many different capacities. For example, if you visit http://www.newschool.edu/parsons/academics.aspx?filter=bfa, you will find yourself on a page dedicated entirely to their BFA offerings.

The other Parsons item is a fun interactive map that shows the various admission events that Parsons conducts across the country and around the world. I made use of the Maphighlight plugin plus some extra jQuery for menus, show/hides and like the academics page, URL filtering.

I couldn’t be happier with the lens and the camera. I was absolutely blown away with the first shots I took. So I decided to take the gear out for some test runs. I went out to the NY Botanical Gardens Orchid Show and shot some obligatory flower photos, as well as a super up close and personal portrait of Edy. Shortly after, I brought the camera along on a trip up to Albany where I took some test video using my nephew, Noah, as the subject. In typical two-year-old fashion, this boy prefers something as mundane as a bottle of water to his vast supply of toys.

As far as the harness goes, I’ve done a couple shoots where I needed two cameras and running around with two shoulder straps was just a pain in the ass. Coincidentally, just as I was deciding I wanted a harness, a friend brought the MoneyMaker to my attention. This thing looks awesome, indulges my inner geek and is STURDY. Saying this thing is built to last is an understatement. Thick leather, solid rivets. Very nice and highly recommended.

This was truly a collaborative effort, as anything in a large institution must be to succeed. So here are the people whose hard work also made this possible (I’ll also list myself again because I’m a not-so-secret narcissist):

• Art Direction: Ed Pusz
• Design: Adam Schwartz and Ed Pusz
• Program Module html/css/jQuery development: Adrien Goulet
• Page development: Helena Boskovic
• Project Management: Kyle Hansen
• Editorial: David Worley

It really is a privilege to work with such a talented and driven group of people. I can’t stress enough how amazing it is to be able to focus on my piece of a project and know everyone else working on it will get their jobs done and get them done well. Working in a creative vacuum makes the heart grow stagnant.

My main concern was not wanting to have to mess with the front end every time I want to update, so I started thinking how I could use WordPress to power Isotope. It turned out to be a lot easier than I had anticipated.

I created a category called “Portfolio” with several child categories (Design, Development, Photography). These child categories are pulled into the the portfolio page and the filter menu is built with the following code:

<ul id="filters" class="option-set filter" data-option-key="filter">
	<li>Filter: </li>
	<?php $categories = get_categories('orderby=name&depth=1&title_li=&use_desc_for_title=1&parent=82'); foreach ($categories as $cat) { ?>
	<li><a href="#"<?php if ($cat->slug == 'photos') {?> class="show-subnav filter-item" <?php } else {?>class="close-subnav filter-item" <?php }?>id="<?php echo $cat->slug; ?>" data-option-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a></li>
	<?php } ?>
	<li><a href="#" data-option-value="*" id="showall" class="selected close-subnav filter-item">show all</a></li>
</ul>

So after the menu is generated, then the portfolio items need to added. This was a simple matter of creating posts, assigned to the child categories of “Portfolio”, using the built-it WordPress Featured Image for the thumbnails and a custom field for the link to the full size image. The titles of the items (captions for the fancybox) are pulled from the post content. If you are familiar with Isotope, you know that the filtering is mainly based on classes assigned to the items to be filtered. So I generate the items on the page with the following code, using the post categories to generate the necessary classes so Isotope can work its magic:

<div class="port port-file <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" data-category="portfolio">
	<a class="portfolio-img port-item-link showall <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" rel="portfolio" title="<?php the_content(); ?>" id="<?php echo get_post_meta($post->ID, 'trigger_id', true); ?>" href="<?php echo get_post_meta($post->ID, 'port_lg', true); ?>">
	<?php the_post_thumbnail(); ?></a>
</div>

And that’s pretty much it. Not all that complicated. If you happen upon this post and have any trouble implementing this yourself, feel free to leave a comment with any questions.

I love responsive design. Then entire concept of making a site device agnostic and future-proof (to a certain extent) appeals to the part of me that would rather buy bulk canned food than repeatedly go to the supermarket: I hate doing things over and over. Which, unfortunately, is the nature of web design/development. So building a site with a framework that can be easily tweaked to compensate for new technologies is super awesome. Also also, it’s fun! I definitely had a great time deciding how to make elements of the site behave at different resolutions and window sizes. I even stuck a few Easter eggs throughout that only appear at certain resolutions. It makes the nerd in me happy. I should also note that having previously read Ethan Marcotte’s Responsive Website Design, I was more than prepared to tackle this. I can’t recommend that book enough if you plan on doing this yourself.

So the nitty gritty…
I designed my site using the 960.gs grid overlay and then built a fluid grid from scratch using percentages to make the whole thing flexible. Doing shit myself instead of using pre-built work helps me get a feel for how all the moving parts work. But if you prefer to save yourself time, just go here: grids.heroku.com. After I built the grid, most of the dev process was like any other wordpress build. Setting my container to have a max width of 960 made my grid stop expanding at that point, but left it very easy to expand should I ever want to adapt the site for larger, wider screens. After the site was built out, it was time for fun with media queries.

Why I Don’t Give a Shit About IE
I am not going to go into too much more depth about building a responsive site because you really can find all this info in a million different places, and my experience isn’t super different than many others’. But one thing I do want to write about is my decision to disable responsiveness for every version of IE below 9. If you visit this site on IE 8 or below, once your browser screen drops below 960px width, you will get a horizontal scroll bar…just like most sites made in the last several years. (This was simple: just add an IE < 9 stylesheet that adds a min-width:960px attribute to the container element.) As most developers know, below IE 9, there is no support for media queries. This can be overcome using javascript, but every method has drawbacks. I spent a lot of time trying to make it work, and lots of foul language was uttered along the way. Then I took a step back and asked myself why it even mattered. One of the main reasons I want to make my site responsive is to deliver the best user experience, regardless of the user’s device. It’s fairly safe to assume that someone still using IE 8 or below is used to browsing full screen, eliminating any benefit to a responsive site. But more importantly, I looked at my google analytics. In the past year, only 10% of my web traffic has come from IE. A bit over half of that is IE 9 (which is refreshingly compatible). So less than 5% of my traffic comes from IE 8 and below and that number will only continue to decrease. So it made no sense to waste time and effort to attempt to provide a user experience that less than 5% of my audience would benefit from (and as mentioned previously, most of those people wouldn’t notice a damn thing anyway). I voted in favor of stability and less javascript.

A few other bits I found very heplful in this build were Isotope (see my portfolio), which I integrated very nicely with wordpress so it is powered by posts and categories, and Modernizr for accessibility and compatibility. My next couple posts will be about these items, but I wanted to give credit where it’s due.

This also gave me a great excuse to take some more video with my iPhone 4s. The thing takes great quality video and I recently picked up an Owle Bubo, which really makes it fun to shoot video with the iPhone. Also just figured out how to disable the auto-focus on the iphone camera app, which will come in very handy when I totally nerd out and buy an adaptor to hook up my slr lenses to the Owle. (In case anyone is wondering how to disable the auto-focus, in the camera app, tap the screen and hold your finger down for a second or two. You will see the focus box blink. Lift your finger and then the words “AE/AF Lock” will appear at the bottom of the screen. This disables both auto focus and the auto exposure features. To reenable them, just tap the screen again.)

So here is the video I shot. It’s not the most amazing thing in the world, but it was fun and the quality is definitely a huge step up from the Sanyo Xacti I was using before.