Every designer develops an instinct for knowing when an excellent new project walks through the door and, when TALK PR called up, we knew they had all the right ingredients. With an enviable reputation as a global agency TALK PR have a killer instinct for what great communications look like and, more importantly they had that elusive and magical thing, really good content.
You don’t need a post graduate degree in UX and Human Psychology to know that the home page really counts so, after some intense brainstorming and three times the recommended daily dose of caffeine, the Pollen creative team settled on a responsive grid that aggregates feeds and conversation from across TALK PR's social channels into a beautiful and fully responsive, long page format interface.
The punchy animating logo and bold positioning statement in the header came about after several different design concepts, from image carousels to streaming video, none of which quite captured the energy and dynamism of the TALK PR ethos.
To soften the design and add a pinch of spice Pollen called on the help of talented illustrator Ulla Puggaard who got busy with ink and brushes to create some beautiful hand drawn typography. Ulla’s energetic type was then mixed with a carefully selected font set, including: Freight Big Pro, Brandon Grotesque and our old friend Proxima Nova.
A responsive website with a killer CMS
As every web designer and developer quickly learns, talking about Responsive Design is really easy but the jaw clenching and meticulous work of making sure a website actually looks great, and loads fast, on the bewildering range of devices and browsers out there in the real world requires expertise, patience and, if you’re planning to support older versions of internet explorer 9, several years of training in transcendental meditation.
To bring together all these different elements, and ensure that TALK PR would have full control over the content, we also developed a custom Wordpress theme and a set of custom elements for the versatile Visual Composer plugin.
It’s the end of the world as we know it...
So you’re probably thinking “Whatever, it’s a portfolio site. Big deal.” But wait! Have you taken the time to consider that it's a responsive grid pulling feeds from the API’s of over six different social channels? Have you taken the time to test it on a tablet, mobile and on your dad’s 1990’s PC, running Windows XP? I didn’t think so!
To maintain the balance and layout of the site across devices ranging from tiny little smartphones to gigantic 27” 5 gazillion pixel retina iMacs, we used a cunning blend of Javascript and CSS3 and, thanks to a moment of awe inspiring insight by our lead developer, using the REM unit to allow seamless page resizing.
In case you thought REM unit was an 90’s band (which explains the hilarious title) this is actually a unit of measurement, very similar to it’s less charismatic cousin the EM unit; the main difference being that the REM unit is relative to the root (html) element as opposed to the parent element. This gave us the control we needed to change and resize all REM units, effectively scaling up the whole website using just a teeny tiny bit of Javascript to change the font size of the HTML element dynamically.
So was it worth it?
Yes of course! The site was well received by the client, the general public and hopefully you, readers of the awwwards.com blog. When it comes down to it, working on flat designs is basically slightly more complicated than making popcorn but bringing those PSDs to life across all devices and with a content management system so effortless that you feel like you are being gently stroked with a mink glove requires a team of developers with analytical skills so powerful they need to be kept in separate rooms and cooled with liquid nitrogen.
Even if everything any designer or developer working on now will be so out of date in five years that people will be laughing and pointing at it, it’s still enormously satisfying to launch a site that looks great, drives new business for the client and gives everyone on the team a warm happy feeling when it’s featured on a design blog (if you’re on the awwwards panel and accept bribes please send a private message).
A footnote for developers
Are you reading this at 4am? Do you sometimes feel awkward in social situations? Is your diet composed mainly of simple carbohydrates? Then you are probably a developer, so this footnote might be of some interest to you or, at the very least, will provide you with something to troll about online.
To build the TALK PR site we used a broad range of complementary technologies including: Coffeescript pre-processor for javascript and the famous Backbone+Marionette+require.js stack, which allowed the team to develop a single page application faster than you can order pizza. CSS was pre-processed using SASS+Compass to ensure compatibility across all browsers and increase the speed of development.
Just in case you are interested in the full list of JS & CSS libraries and plugins we used, then here comes the long list, which includes: Marionette, Backbone, Backbone Babysitter, Backbone Eventbinder, Backbone WREQR, Backbone Local Storage, Backbone Relational, Backbone Syphon, jQuery, Underscore, Bootstrap SASS, html5shiv, Respond, Rivets, Requirejs, the Google Maps API, jQuery Lazy Load, jQuery Owl Carousel, jQuery Placeholder, Modernizr, Moment, Pace, WOW, EJS, Animate CSS.CSS.