Responsive Website Design Launch: The Dirigo Site03/01/2013
We finally launched our brand-spanking-new website! Yes, that day has indeed arrived. Blood, sweat, and tears have paid off. I am truly proud.
At the beginning of 2012 when I started to get rather militant about designing and building fully responsive web sites, it was an uphill battle. We wondered, are our clients ready? It was clearly the best choice, being that one only has to build one site and the site will load perfectly for your screen size, be it your smart phone screen, tablet screen or a nice big shiny 27” monitor.
Even better was the idea that I could design something so beautiful and not have to scale it back to account for users’ small screen resolutions or other limitations. I was excited because I could design for mobile devices and tablet screens in a way that is not just a stripped-down version of the website. I longed for the day that I could push the edges of both screen and design while at the same time, be accommodating to everyone and every platform. The tough part was convincing clients we should go the way of the responsive, while not actually having a responsive web site ourselves. It’s been the cobbler’s children have no shoes (or we’ve been working on client work).
The last redesign of the website (and separate mobile version) was designed in early 2011 when I first joined Dirigo as Creative Director. Coming from print, I had to juggle the new web concepts I was learning (e.g. best practices, web standards, call to actions, etc.) with my inherent need to experiment. At the same time, I was working on the Dirigo rebrand: new logo, business cards, stationary, and digital documents too. It was a huge improvement and a great transition from the old Dirigo to the new.
By the end of 2011, mobile was here and responsive web design was here too. Client work in the responsive space was ongoing, David hired a couple of new folks, and we were off. Skills, ideas, and innovations were working in tandem. Bouncing ideas about design, content, platform, and layout, we dug deep at current trends, new ideas, and ideas that would be sustainable. We buried ourselves in our own fields for a while, designing and building. I went for the long-scroll and JP built an entirely new content management platform. I will let JP geek out on his own post though for that, because it is his area and it is REALLY exciting.
I scoured the Internet for innovating things that innovative people were doing. Two ways I like to create: first, I like to take in rapidly many, many ideas that are just super cool from all over the place and from trusted sources; second, I like to shelter myself from any outside influence so as to not fall into any tired design traps or ruts. Victoria got a look at the site after ~5 weeks of work. David was kept in the dark until a site prototype had been built. This was a staff project without much management involvement — that is, until the end. This may sound contradictory but these methods work for different stages of my design process so I don’t question it.
Some aspects I adhered to:
Bright colors as accents. I love color, especially bright color but too many or too bright can sometimes dominate a page. This is a colorful site though! I can get away with it because the dominant color is a neutral one, in this case, gray. Several shades of gray create the entire backdrop of every single design element which allows the fun stuff, like the custom icons, to really pop.
Iconography as categories. Victoria and I carefully mapped out what our services are and through that created a mess of a brainstormy-mind-map of services that neatly fit in 11 buckets. I created icons for each category and based the navigation of all the content through the filter of the categories. Wherever you see the icon, you can see the content under the categories. You want to see what we have to say or what we have done in the social media space? Click on that icon and see our blog posts, or the articles, or even clients whose work was social-media-focused.
I used Google open fonts throughout too. No longer are we forced into the “web safe” fonts of yesteryear. I use two modern, clean font families on the Dirigo site. Open Sans as the statuesque supermodel waif sans-serif and Arvo, with its hip slabs. Arvo serves as a readable serif font with foundation and substance.
The new Dirigo site is meant to look beautiful on every screen and flow seamlessly between the jumps. Try it. If you are on a desktop, resize the browser to make it skinnier (note: the menu will not <em>go</em> full responsive unless you're on a tablet or phone). Better yet, whip out your smart phone or tablet. You’ll see what I mean.