Upstatement http://upstatement.com Boston Web Design, Branding and Responsive Design Tue, 15 Apr 2014 12:52:58 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.3 Announcing a Brand New Boston.comhttp://upstatement.com/blog/2014/04/announcing-a-brand-new-boston-com/ http://upstatement.com/blog/2014/04/announcing-a-brand-new-boston-com/#comments Tue, 08 Apr 2014 23:11:59 +0000 http://upstatement.com/?p=4770 boston-strongest-laptop

Upstatement is thrilled to announce the launch of a redesigned Boston.com! You can mosey right on over to see the live site for yourself. Check out our portfolio page to find out more about the decisions driving the design.

Of course, we were just part of a large team that planned, designed, and developed the new site over the past year. Any project of this magnitude requires many hands working together to make the final product. We want to take a moment to mention a few of the people attached to those hard-working hands:

  • Special thanks to Michael Workman, whose steady hand and clear eyes steered this project from day one.

  • Big shoutout to Adam, Eddie, Ian, Jesse, Matt, Mike and the rest of Boston.com’s amazing internal dev team. You all have the hardest jobs around. All the heart and hard work you put in are evident in the final product.

  • None of this is possible with the vision and support of our talented working/executive team, who were there every step of the way. That team includes (but is not limited to!) Michael Bentley, Joe Allen-Black, Kathy Colafemina, Tom Cole, Bennie DiNardo, Michael Manning, Jeff Moriarty, Andrew Perlmutter, Chris Rattey, and Dan Zedek.

  • The day-to-day success of Boston.com rests with its fantastic team of producers. We were lucky to work with Jack & Rachel to write the lion’s share of content in the prototype. Many thanks and good luck to the rest of the team, too, particularly Gary and Emily who put up with me during the training session.

  • Last but not least, we had a blast working on the user & advertising guides with Chris, Gene, Jane, Jennifer, Kyle, and The Mikes.
]]>
http://upstatement.com/blog/2014/04/announcing-a-brand-new-boston-com/feed/ 0
Intern Recap: Chris Plummerhttp://upstatement.com/blog/2014/03/intern-recap-chris-plummer/ http://upstatement.com/blog/2014/03/intern-recap-chris-plummer/#comments Tue, 11 Mar 2014 15:12:33 +0000 http://upstatement.com/?p=4600 I’m reminded of the story of Peter Bartholomew, who during a year-long siege of Antioch during the First Crusade, discovered the Holy Lance buried under a church in the city. To prove veracity of the Lance to the skeptical and exhausted leaders of the Crusade, he agreed to a “Trial By Fire” carrying the Holy Lance through a massive conflagration. The Lance survived the ordeal and thus must have been the real deal, inspiring the Crusaders to complete their “ignoble” conquest. Peter did not.

On some days my internship at Upstatement felt like that trial by fire and now I’m better prepared for some of the challenges I’ll face. Unlike Peter Bartholomew I survived.

I learned so much here and I can’t imagine that any other place I work will be as much fun or do such good work… Except for your company, Mr/Ms Hiring Manager who is reading this.

So thanks to (in reverse food chain order): John, Mike, Pete, Jeff, Grant, Jared, Nathan, Tito, Emily, and Maya.

How do you feel the internship contributed to your development in the field?

Working by yourself or in a small team from school where the only pressure applied is a grade is a poor preparation for real client work. At Upstatement I encountered challenges with security, backwards compatibility, client communication, and cross-domain-scripting. I got a taste of the tools the big boys use like Grunt, Compass, and Timber.

If you could do one thing differently during your 12 weeks at Upstatement, what would that be?

Initiate even more mentoring earlier on—especially when it comes to tools and practices. Ask for more frequent check-ins and code reviews.

What was the most challenging aspect of your internship?

Crossing t’s and dotting i’s and lower-case j’s. Every line you write has the potential to break or not work with some other tool or browser or template. I had to learn to thoroughly check my work and pass it off to someone else for verification.

Scratch that. Beating anyone at Blades Of Steel is the biggest challenge here.

Leaving without getting all weepy will be another big challenge.

What was the most satisfying aspect of your internship?

Apart from the overall culture and camaraderie, I had a lot of fun planning, writing, and deploying a search engine. It was a really interesting Information Architecture and technical challenge. I worked with the designers to establish our IA requirements and the UX design and find a tool, in this case Swiftype, that had the functionality we wanted. I had to invent some complicated workarounds to make the application satisfy the requirements of the IA and many fallbacks for any number of conditions that might cause failure. I think it will be a tool that Upstatement can deploy to future projects. In any event, it’s fun to put something together and make it do more than the original authors intended.

Can you leave us with three tips for future interns?

1. Time is short. Ask lots of questions early on. Get more review and assistance at the beginning of the internship. It’s going to end sooner than you think.

2. If you are given a big internal project that is going to challenge you beyond your current abilities, start earlier and get another brain helping.

3. Tell Mike that if he can’t say something nice, don’t say anything at all. He hates that.

Chris is currently wrapping up his Masters Degree in interactive Digital Media at Northeastern University. In a few months he’ll be looking to join a new team full time. We can’t recommend this guy enough! You can keep up with Chris via his personal site and tune into his sleep-talking soliloquies here.

]]>
http://upstatement.com/blog/2014/03/intern-recap-chris-plummer/feed/ 0
Intern Recap: Maya Gaohttp://upstatement.com/blog/2014/03/intern-recap-maya-gao/ http://upstatement.com/blog/2014/03/intern-recap-maya-gao/#comments Tue, 11 Mar 2014 15:05:38 +0000 http://upstatement.com/?p=4595 This past winter I had the pleasure of doing a two-month internship at Upstatement. I was able to work with and learn from some really talented and passionate people here. I contributed to the design and development of two WordPress content management tools and did some thorough testing, debugging, and QA on three big client projects. The open and collaborative company culture here allows for a tremendous amount of freedom, responsibility, and creativity. It’s not like “Here’s some stuff you should do. We will work on some other important things.” I even had the chance to pitch my own concepts, execute my ideas, and receive constructive feedback from the team. Through this internship I came to realize how much I love this profession. For that, I will always be grateful.

What was the most valuable thing you’ve learned during your time at Upstatement?

It’s the notion that we are always designing for humans. I feel that’s something everyone here truly values and it’s what sets them apart from contributors of today’s terrifyingly homogeneous digital design trends. Upstatement puts great emphasis on usability and accessibility and have meticulous attention to details. I began to understand the importance of asking questions like “Does this decision bring more benefits than problems?” or “How easily will users adjust to this change of design?”. I also gained design experience and mastered some cool CSS tricks. More importantly I learned to design with users in mind and solve problems for human beings.

What was the most challenging aspect of your internship?

I think it’s learning to reach consensus and work together. At school it’s often about finishing a project independently and competing with your classmates. At Upstatement I needed to reprogram myself to a different mode. Developers and designers work closely together and everyone on the team offers constant feedback. Trying to prioritize goals and get consensus became really important, especially in the early wireframe and prototyping stages. This transition was definitely a challenging and rewarding experience for me.

Is there a single defining moment you experienced that exemplifies Upstatement culture?

There are so many. It’s hard to pick one. Upstatement invited interns to project reviews and staff meetings and asked my suggestions on how to improve the company. They always came over to my desk to say thank you for very small things I did when they were extremely busy. The team knows how to bring out the best in themselves and others when faced with extreme challenges and pressure. They even generously tolerated my jokes and insults about their fashion choices! I have to say, in the past nine weeks, I felt happy, challenged, and less scared of being alone and abroad. Thank you Upstatement, with all my heart.

Can you offer any tips for future interns?

I guess my tip for future interns would be: don’t be afraid to ask questions and make mistakes. They are ridiculously nice people who are always willing to help. Just learn from them and have fun. (Though they may become extremely ferocious when playing a weird 80’s Japanese hockey video game with shockingly primitive graphics and sound that gave me panic attacks. Beware when you enter the “Blades of Steel Dojo”! They mean business even when they’re taking a break).

Maya will promptly pack up for Nashville, Tennessee after her internship comes to an end. She has scored an awesome gig as a UI/UX designer at the Nashville branch of Lonely Planet. We wish her the best of luck and safe travels. She’ll always have a place in the Upstatement hall of fame as one of the most fun interns of all time!

]]>
http://upstatement.com/blog/2014/03/intern-recap-maya-gao/feed/ 0
Adding Columns to the WordPress Admin, The Easy Wayhttp://upstatement.com/blog/2014/02/adding-columns-to-the-wordpress-admin-the-easy-way/ http://upstatement.com/blog/2014/02/adding-columns-to-the-wordpress-admin-the-easy-way/#comments Mon, 10 Feb 2014 23:10:42 +0000 http://upstatement.com/?p=4502 When I’m putting the finishing touches on our WordPress projects, I try hard to make the default admin screens more intuitive for editors. The WordPress post list is a highly trafficked interface where adding just a bit of context can make a world of difference.  We’ve found it really helpful to add extra columns with information that helps editors identify content at a glance. When you’re looking for one story in a long list of articles, it really helps to see a photo alongside it.

The first time I did this I was confounded by the number of different actions and filters you have to wade through to accomplish such a straight-forward behavior. For example, when I wanted to add the ISBN number (which was stored in a custom field) to each row of a books post type in the admin interface:

Screen Shot 2014-02-07 at 11.16.28 AM

Here’s the muck of code I went through for this operation:


	add_filter('manage_book_posts_columns' , 'add_book_columns');

	function add_book_columns($columns) {
    	unset($columns['author']);
    	return array_merge($columns,
              array('isbn' => 'ISBN'));
	}

	add_action('manage_pages_custom_column' , 'book_custom_columns', 10, 2 );

	function book_custom_columns( $column, $post_id ) {
	    switch ( $column ) {

		case 'isbn' :
			echo get_post_meta($post_id, 'isbn', true);
			break;
	    }
	}

Whoa. That’s a lot of code for what I can describe in pretty brief terms:

“Hey WordPress admin: add a column to books which shows the ISBN number”

So I wrote a simple interface that takes all that code and wraps it into a simple function call that I can include with ease the next time I need to tweak the columns. The result is called “Jigsaw” which lets me talk to the WordPress admin in more natural ways. So now I can simply call:

Jigsaw::add_column('book', 'ISBN', function($post_id){
	echo get_post_meta($post_id, 'isbn', true);
});

Much better! Now I have a quick bit of syntax that matches the way I think about these things (if you naturally think in WordPress actions and filters, you’ve graduated to a higher plane).

In my code, the first argument is the post type (which can be an array or string). The second is the label for the column and then an anonymous function that describes what should display. You’re passed the $post_id by WordPress so it’s easy to retrieve all kinds of info from the post. The final (optional) argument is the position of your new column (which defaults all the way to the right).

With this dramatically simplified, it’s a breeze to quickly tweak the columns for every post type for every project.

Let’s see some examples!

The code you see below should live in your theme’s functions.php file.

Add some text

So now that it’s super-easy to add columns, I do it in all kinds of “nice-to-have” situations. For example, in the listing of all WordPress pages wouldn’t it be nice to see a preview the content? Let’s do it!

Screen Shot 2014-02-07 at 10.29.28 AM

Jigsaw::add_column('page', 'Preview', function($post_id){
	$page = get_post($post_id);
	echo wp_trim_words($page->post_content);
}, 2);

Add the featured image!

Back to a books example. Wouldn’t it be nice to see the book cover with the book? This example (and the next one) uses Timber. It’s not a requirement, but it makes fetching info for the various posts way easier.

Screen Shot 2014-02-06 at 2.59.05 PM

	Jigsaw::add_column('book', 'Cover', function($post_id){
		$data['book'] = new TimberPost($post_id);
		Timber::render('admin/book-cover.twig', $data);
	});
	<!-- admin/book-cover.twig-->
	<img src="{{book.thumbnail.src|resize(100, 60)}}" alt="Cover for {{book.title|e}}" />

Fetch a bunch of stuff associated with the post.

For this example project, we built a custom post type called a “roundtable” which includes other content types as “children”. I used the Advanced Custom Fields fantastic “relationship” field to manage the UI and data.

Screen Shot 2014-02-07 at 10.30.58 AM

	Jigsaw::add_column('roundtable', 'Stories', function($post_id){
		$roundtable = new ClientCustomPostClass($post_id);
		foreach($roundtable->get_roundtable_children() as $child){
			echo '<a href="'.$child->edit_link().'">'.$child->post_title.'</a></li>';
		}
	});

Here the get_roundtable_children() method on ClientCustomPostClass is doing a bunch of internal processing to fetch those posts and return them as an array.

Jigsaw is open source and yours to include in any project. I’m going to keep adding other goodies that make tweaking the admin interface easy and code-centric (as opposed to extra plugin UI).

]]>
http://upstatement.com/blog/2014/02/adding-columns-to-the-wordpress-admin-the-easy-way/feed/ 1
Intern Intro: Chris Plummerhttp://upstatement.com/blog/2014/01/intern-intro-chris-plummer/ http://upstatement.com/blog/2014/01/intern-intro-chris-plummer/#comments Fri, 10 Jan 2014 19:53:49 +0000 http://upstatement.com/?p=4452 What’s one of the most unexpected things people would find out about you? Hidden talents? Shadowy past working for a secret agency?

I sang karaoke with Cameron Diaz, talked Star Trek with James Marsdon and Richard Kelly, pounded fists with Mark Wahlberg, and nearly called security on Kevin Spacey. I used to work in film & TV doing props, sets, and cars. I’m really good with window treatments and cutting ice into ice cube shapes.

What are some of your extracurricular activities at school or after work?

I’m an spielfreak (board gamer) and grognard (war gamer). I was, for a time, a member of the MIT Strategic Games Society. I find a lot of beauty and wit in the structure of games and I like to dissect that structure while I play to find tactics and strategies to win. I’m not into game theory or anything, although it would probably make me a better gamer. Some of my favorites: Shadows Over Camelot, Through the Desert, Lifeboats, Puerto Rico, Hive, Cosmic Encounter, Battle Line, Diplomacy, Twilight Struggle, Paths of Glory, Command and Colors, Crusader Rex.

Also, I watch Star Trek: Deep Space Nine all the time.

Do you have a spirit animal? If so, what is it and why?

The duck. It’s a perfect engine, a quacking machine. It’s really a miracle of evolution. All this machine does is swim and fly and quack and make little ducklings, and that’s about it.

What drew you to the internship position at Upstatement? What are you looking to get out of your time here?

First Upstatement got rave reviews from a knowledgable designer friend who said that this shop is a rising star. The work and client list was very appealing. I wasn’t interested in joining a big ad agency to build banner ads that are a useless annoyance to users. Upstatement builds functional, long term websites that achieve a goal for the users. The work they do will last. I like that Upstatement is a small shop where I get to be part of a nose to tail, whole hog web design and development process. At a larger place I’d probably fall through the cracks. I know I’m going to get solid, honest feedback from good coders here.

Picture the ideal future for yourself. What does it look like?

Hopefully, one day I’ll be dead. Otherwise I’ll be the accursed undead: a zombie or vampire or something, and that would be horrible beyond imagination.

If you could go into the future and google three things and bring that knowledge back to the present, what would you search for and why?

Where can I buy Grey’s Sports Almanac?

Why is Earth run by a bunch of apes?

Is Abe Vigoda dead?

Chris joins the team as our Winter development intern. We’re excited to see where his diverse skill set will take his work and to hear a little about the good ol’ days as a man in the moving pictures industry!

]]>
http://upstatement.com/blog/2014/01/intern-intro-chris-plummer/feed/ 0
Intern Intro: Maya Gaohttp://upstatement.com/blog/2014/01/intern-intro-maya-gao/ http://upstatement.com/blog/2014/01/intern-intro-maya-gao/#comments Fri, 10 Jan 2014 19:53:07 +0000 http://upstatement.com/?p=4448 Hola! I am Maya! I just graduated from Newhouse, Syracuse University, with a master’s degree in multimedia journalism. I’ve had experience in both visual design and front-end development. This winter I was able to contribute to the thriving startup scene in Upstate New York, by organizing SU App Challenge.

What’s one of the most unexpected things people would find out about you? Any hidden talents?

- I love eating ice cream before bed. And I never get brain freeze.

- I am originally from a coastal city in northeast China. So I am skilled at cooking (and eating) seafood.

What unique experience or perspective do you bring to your work and to this internship position?

I worked for the Clinton Foundation last summer as design intern which really honed my design conceptualization and execution skills. I was also an interface designer for some small interdisciplinary teams and learned a lot about coding. I have a firm grasp on design integrity and a strong eye for detail. My experience with front-end development allows me to apply those design principles to the web.

What are some of your extracurricular activities at school or after work?

Traveling. Art house theaters. Indie rock. Ice cream.

Maya will be joining the team for the next three months as our Winter design intern. We’re excited to have another Syracuse University Alumni on the team!

]]>
http://upstatement.com/blog/2014/01/intern-intro-maya-gao/feed/ 0
Intern Recap: Gus Wezerekhttp://upstatement.com/blog/2014/01/intern-recap-gus-wezerek/ http://upstatement.com/blog/2014/01/intern-recap-gus-wezerek/#comments Tue, 07 Jan 2014 17:04:31 +0000 http://upstatement.com/?p=4363 As I wipe down my desk and fold up my lap blanket, it’s hard not to get a little sentimental about my six months at Upstatement. I’ve learned a new trade, contributed to four different projects and heard more than a lifetime’s worth of buttrock awesome jokes. I’ll miss everyone here.

What was the most valuable thing you’ve learned during your time at Upstatement?
As a development intern, perhaps the most rewarding takeaway was getting a better handle on my weaknesses. I worked in print design, graphics and web design before putting on the backend developer hat. I took more slowly to the content pipelines and abstractions than I had expected, and I’m grateful for the chance to learn that. Knowing that I prefer visual editing and debugging has helped me decide where I want to specialize as a journalist.

How do you feel the internship contributed to your development in the field?
When I started the internship I said I wanted to learn how to build a website from scratch. After scaffolding out two sites, first as support and then as lead developer, I’m confident in my ability to do just that. The next time a relative asks me if I can get their food blog up and running, I won’t have any way to say no.

What was the most satisfying aspect of your internship?
I started job hunting near the end of my six months at Upstatement. An application for the Information Design Editor position at Fast Company required me to pitch, report, design and develop an online graphic in one week. Without the knowledge and best practices I learned at Upstatement, I never would’ve finished in time. But I did, and the site published the graphic. They also offered me the job! Leaving Wired for an internship at Upstatement was a big risk, so I was delighted to see it pay off with such a cool next step.

In 2014, Gus will be heading up Co.Design’s graphics vertical—writing daily for Infographic of the Day and producing news and feature graphics online. Gus plans on visiting Boston regularly, and looks forward to swinging by Upstatement as often as possible.

]]>
http://upstatement.com/blog/2014/01/intern-recap-gus-wezerek/feed/ 0
Volunteering at the Big Wishes Gift Drivehttp://upstatement.com/blog/2013/12/volunteering-at-the-big-wishes-gift-drive/ http://upstatement.com/blog/2013/12/volunteering-at-the-big-wishes-gift-drive/#comments Fri, 20 Dec 2013 21:18:39 +0000 http://upstatement.com/?p=4425 upstatement-home-for-little-wanderers

Upstatement recently pitched in at the Big Wishes Gift Drive run by the Home For Little Wanderers. Being the hardworking, detail oriented nerds that we are the gang made short work of the piles of toys that needed to be unpacked and sorted during our visit. This included building a pretty enticing display for the hundred-or-so board games and organizing the entire mountain of donated books by kids, young adult, picture books, and educational books. It’s always a joy to volunteer at the toy drive and we look forward to helping out next year!

There’s still time to donate books, clothing, toys and toiletries. If you’re interested we encourage you to check out the drives Gift Idea page.

]]>
http://upstatement.com/blog/2013/12/volunteering-at-the-big-wishes-gift-drive/feed/ 0
Intern Recap: Carol Liaohttp://upstatement.com/blog/2013/12/intern-recap-carol-liao/ http://upstatement.com/blog/2013/12/intern-recap-carol-liao/#comments Wed, 11 Dec 2013 07:43:29 +0000 http://upstatement.com/?p=4355 When I first interviewed with Upstatement, I had asked if I’d be able to do some developing, even though I was applying for the design internship. Ten short weeks later, I’m comfortably working with programming languages I didn’t even know existed! I think it’s safe to say the internship has been packed with constant learning.

What was the most challenging thing you’ve learned during your time at Upstatement?
In order to get my hands dirty in coding, I had to be able to consider how elements would be built as I designed them. Having come from a print focused education, I was not used to this type of workflow and it was challenging to get used to the back and forth pace. Once I passed the bump and saw something I designed and coded work immediately, it gave me the instant gratification that I had never received in print design.

How do you feel the internship contributed to your development in the field?
Everything I know about web development was learned on my own. True, the resources online are amazing these days, but nothing replaces the mentoring you get from knowledgeable professionals. The design and code reviews I had here expedited my development in the field and put me in a much better place to continue designing for the web.

If you could do one thing differently during your 10 weeks here, what would that be?
Worked harder in Blades of Steel training! But alas, sports games are just not my forte.

After her internship Carol will be pursuing freelance work under the name Studio Point and learning some Dutch before joining the staff at a young UI design studio in Amsterdam. We enjoyed working with Carol these past 10 weeks and wish her all the best in work and in her travels!

]]>
http://upstatement.com/blog/2013/12/intern-recap-carol-liao/feed/ 0
NPR.org’s New About Pagehttp://upstatement.com/blog/2013/11/npr-orgs-new-about-page/ http://upstatement.com/blog/2013/11/npr-orgs-new-about-page/#comments Wed, 20 Nov 2013 17:34:11 +0000 http://upstatement.com/?p=4260 npr-about-blog-2

NPR.org recently launched their new about page and talked about the story behind it on their blog. We were thrilled to help them tell an immersive, engaging story about what makes NPR great — the people behind the stories, who sneak across borders and take bullets to the laptop to bring you the news.

Want a behind the scenes look at the making of NPR.org’s new about page? You can also read a little more about Upstatement’s approach to the project in our portfolio entry.

]]>
http://upstatement.com/blog/2013/11/npr-orgs-new-about-page/feed/ 0