It started as a crazy idea 5 years ago and now the 12×12 Vancouver Photo Marathon and the following Raw Talent exhibit has become an institution in Vancouver. If you are in town this weekend and want to come out for a unique photo exhibit or just to support the film photography community, visit Raw Talent and bring your friends, your family, and anyone else you can find.
WordPress + Metro style + responsive design. That was the baseline when designing and building blendinsider.com – the Microsoft Expression Blend Team Blog: Create a modern design that used the latest in web technologies (HTML5), played well with mobile devices and reflected the new and quite different look of Microsoft. Though the site launched in late December I haven’t had time to write about the process until now, so here is a quick rundown how blendinsider.com came about and how we handled the challenges inherent in the project.
Metro + WordPress
One of the most important aspects of the new site was a strict adherence to the new Metro design language introduced by Microsoft. If you are not aware of Metro yet you will be. This new/old style is starting to make its way into everything Microsoft does, from cell phones to web apps and eventually on your desktop through Windows 8. I say “new / old” style because Metro harks back to the classic Swiss style clean typography trend that was introduced early in the 20th century in Europe that is still a staple of choice for typographers and designers to this day. When I think Metro I think, literally, European Metro stations: Clear sans-serif font on solid colours. You can read more about the Metro design language at WikiPedia and all over the web.
The design principles in the Metro design language are fairly simple: Solid colours, sans-serif fonts, lots of white space, edge-to-edge images with overlays. But as any designer knows, minimalism is not as easy as it seems. By adhering strictly to these rules you have nothing to hide behind. The typography and layout is centre stage and any misjudgement on your part becomes glaringly obvious.
Though there have been some forays into Metro style WordPress themes before I had yet to see one that really captured the essence of the style when I started the project. At the same time I did not particularly like the way Microsoft themselves were using the style on their own websites. They seemed to still be stuck in the old way of doing things and not quite willing to embrace the big fonts and white space as much as they needed to. As a result I was basically starting from scratch, which to be frank is a good thing even though it’s more of a challenge
Breaking the grid
The first decision I made in my drafts was to break the grid. With the introduction and convergence to mobile devices on the web, the traditional grid with massive sidebars and rigid section designs seems obsolete to me. What I wanted to do was bring some of the mobile experience to the desktop while still retaining a sidebar and typographical line width. The result was a full spanning header outside the grid with the post content and sidebar below. It’s a simple design trick, and I’m neither the first nor the only one to use it, but it makes for a striking fundamentally different look. Of course this full span header could only be used on single pages and posts, but seeing as most visitors these days land on single pages or posts first and only later venture to the index pages that is not a big concern.
One of the features of the Metro design language is heavy use of icons. When I started the design I was concerned about how I was going to find the correct icon sets, but after reading documentation and watching videos published by Microsoft I found a hidden gem of information: The Metro icons are actually just standard Windows font icons. That made things a lot easier and apart from the calendar icon which I had to make myself all the icons on the site are rendered from the Segoe UI or Wingdings fonts.
Metro style Facebook facepile
I am not afraid to voice my disdain for Facebook’s draconian design implementation, especially where their social widgets are concerned. Out of the box Facebook like boxes, facepiles and other widgets look like… Facebook, and that does not jive with Metro at all.
In early drafts I had to work around the hideous Facebook like box and it was driving me crazy. In previous projects I had been able to manhandle Facebook’s API and override their stylesheets, but it looked to be impossible due to deprecated code.
Then I made a chance discovery that though deprecated, the Facebook Fan Box is still active, and unlike the horrid Like box, the Fan box allows some level of customization.
I’m not going to go into great detail about how exactly this is done (there are tutorials out there that have covered that extensively), but as you can see I was able to Metrofy the Facebook facepile into something resembling acceptable.
Responsive Design vs Pixel Perfect
As of 2012 Pink & Yellow Media has converted to a mobile-first design strategy, but we took a head start with blendinsider.com. One of the key requirements of the project was that the site play nice with cell phones and tablets as well as the traditional computer (as should all websites built today) so the site was designed with the smallest screen – a vertical mobile screen – in mind from the get go.
Rather than following the traditional path of a fully fluid layout, each component of the layout was handled on its own and media queries were inserted at incremental points to properly position each item for any screen size. My thinking is that if the site is to be responsive, it should format perfectly to all screen sizes, not just the predefined mobile-horizontal, mobile-vertical, tablet-horizontal and tablet-vertical sizes. At the same time I want to give the content as much space as possible to always showcase what’s important.
The result of this responsive-but-pixel-perfect approach (you may call it nitpicky if you like) is that as you resize your browser window you’ll see the content jump around and conform not just to the mobile sizes but also to any random desktop window size.
A responsive slider
The design spec called for a slider. I personally hate sliders, but they are all the rage and any website worth its salt must apparently have one. Now sliders are easy to build, as long as they have a fixed size. When you start talking about responsive sliders, things get tricky really fast.
First off you have to consider what happens to the images. Do they resize with the window? Or do they just get cropped. Secondly you have to consider what happens to any text superimposed on top of the images. Does the text shrink with the window, or does it reorganize? And what when it starts to cover the text entirely? Thirdly, are you going to let the box resize both vertically and horizontally or just one or the other?
All these questions are actually design decisions, and they were made in the draft stage. But when I had a clear idea of what was going to happen to the content as it was resized, I needed to find a responsive slider solution that worked. And I also wanted one that was semantically sound and standards based. Not an easy task. But after a lot of searching I came across Mat Marquis excellent Dynamic Carousel (Github link) which fit the bill almost perfectly.
WordPress and Microsoft? Yep, and it’s hosted on Windows!
The final requirement for the project, though an implicit one, was that this WordPress site had to be hosted on a Windows server. I know that sounds like heresy to a lot of WordPress users, but it is sound – at least as long as the server runs properly. We had to go through several hosts before we found one that had a properly installed and configured Windows Server implementation that would allow us to run WordPress without a hitch (GoDaddy’s Windows hosting for example was about as fast as skateboard with wheels made of Play Dough) but we did end up with a workable solution and the site now runs smoothly on Windows.
Check it out and let me know what you think
As with all my other projects blendinsider.com is a bit of a work in progress so I’d love to hear what you have to say about it and what you’d like to see changed or updated. I would also like to hear if anything on the site warrants a tutorial. Drop a comment below and let’s start a conversation!
This summer Vancouver Ballroom Dance Coach Elaine Carson of Everybody Dance approached us asking for help with her website. She got a site build several years ago that at the time was top-of-the-line, but in the past few years she saw a dramatic decrease in the number of visits to the site and the number of new dancers coming through her doors after finding her online.
A quick look at the site and the code behind it painted an all too familiar picture that I keep seeing again and again: The site was build using tables (correct some time ago, absolutely wrong today) and was static in every sense of the word. As a result the Google rankings were stagnant, the site was hard to index and even harder to find and it was pretty much impossible to update without a lot of workarounds and fixes. I say this is an all too familiar sight because more and more clients come to us at Pink & Yellow Media with sites of just this type: Built with old software to old standards and often in a way that makes them almost impossible to update and manage. The bad news is these kinds of sites are pretty much writeoffs today and can actually be detremental to the success of a business, both online and in real life. The good news is you can always get a new dynamic site built and reinvigorate your online presence in the process. Which is exactly what we did with EverybodyDance.ca.
There were three major components to this project: First we needed to update the site to a modern look and make it dynamic so that Elaine and her staff could go in and change the content when they needed to. Secondly the site needed a dynamic calendar so current and prospective students could see what classes were available and when. Finally we needed to up the profile of the site through quality content, optimized code and good old fashioned marketing.
As with most of our small to medium scale projects we used WordPress as the base for this one. That way we could develop a sturdy theme with valid code and provide a platform from which Elaine and her staff could easily add, change and manage their own content. As a bonus WordPress has excellent search engine optimization built in, and with the addition of the All In One SEO Tag plugin this optimization reaches whole new levels. For the design we chose to go with the general red theme of the old site but brought it up to modern standards with a grey gradient wash in the back, more whitespace and a livelier look. The site also features a number of different page layouts depending on what type of content is displayed.
In addition to the site itself our new marketing manager Anny also developed a business and marketing platform for Elaine. Doing an analysis of current customer numbers, income and expenses Anny analyzed the growth potential of the business as a whole and made a whole range of recommendations to help boost student numbers and revenue. As part of this plan was a tiered Google AdWords and Facebook Ads strategy that will be implemented and monitored over the next year. This strategy aims to boost the rankings and visits to the site and is designed to help Vancouverites looking for a good dance school find Elaine and Everybody Dance. In a market with hundreds of options that’s not an easy task but with the new site and the new marketing strategy Elaine is guaranteed to see more eager dancers enter her school in the coming year.
And just for full disclosure: The reason I can say Elaine is a great dance instructor is because Angela and I have been going to her for 3 years and in that time we’ve gone from people who had no idea how to dance to someone who is at Silver 2 level in 12 different dances.
One of our early clients as Pink & Yellow Media was a small fine arts gallery in West Vancouver called Bellevue Gallery. At the time they were looking for a website that reflected their style and sophistication and that showcased both their past, current and upcoming shows and also the individual artists represented by the gallery. In accordance with the trend at the time we built them a fancy and dynamic Flash-based website that had all the bells and whistles where moving menus, active backgrounds and an interactive experience were concerned. But that was then. Today the web consumer is no longer looking for flashy intros and moving elements – they want content. Immediately. Today’s web consumer expects a search on Google to take them straight to the content they are looking for. And to boot they want to be able to interact with the content, whether it be sending it to a friend by email, posting it on Facebook or raving about it on Twitter. Suffice it to say the art of designing Flash-based web sites is quickly fading to the bright star of dynamic CMS-based sites like those built on WordPress.
A new site is born
After some discussions with the gallery owners it was decided a new site was needed – one that not only drove web users directly to the shows, artists or even art pieces they were looking for, but one that also allowed the gallery to communicate more directly with the visitors through a news page and social media. But most importantly we wanted to create a site the gallery could manage on their own by adding shows, artists and photo galleries and write articles about the everyday goings on in the gallery itself. The natural platform for such a site was WordPress.
Based on the original site we knew we needed a front page, an exhibitions list displaying past, current and future shows, a gallery artist page with sub-pages for each artist, a news section, an artist submissions section, a page with info about the gallery itself and finally a contact page. Since the client is an art gallery and they had a huge number of photos of art pieces we needed to find a solution that would make the artwork easy to display for the owners and easy to navigate and digest for the visitors.
The design of the site needed to stay true to the visual identity of the gallery, built over several years. To help in the design process we brought in Alexandra Oosterom from Fresh Media Designs and she turned out a clean yet stylish look for the site that fit with the parameters we outlined.
Thinking in taxonomies
The challenge when using a CMS is always to come up with rational and logical taxonomies so different elements nest within each other in a rational way. Originally we planned on setting the site up as a huge list of parent and child static pages but that became cumbersome and blocked some of the features we wanted to include. The solution was to set up a parent category called Gallery Artists with a sub category for each of the artists. Because each artist would have a gallery plus a set of info pages (Artist Statement, Biography and Curriculum Vitae) but not all artists would have all the pages we also needed to come up with a way of creating a dynamic menu to display within each artist page that let the visitor jump from page to page quickly. The result was a clever little PHP hook within one of the post templates (yes, this site has 10 different single post templates depending on what category you are viewing and what page you got there from) that queried the parent category of the post (the artist name) and then listed out all the other posts within that category as a menu. This all came together to create a simple and intuitive navigational tool for the visitor.
Using NextGEN Gallery outside the norm
One of the interesting challenges of the site was to create a dynamic gallery artists page that featured the artist name as well as a photo of an art piece and a short bio that would in turn lead to a set of dedicated pages for that individual artist. After playing around with a few different solutions we decided to use the popular NextGEN Gallery plugin as the base for the gallery artist page. This plugin removes the process of image and gallery management from the pages and posts in WordPress and puts it in its own administration area. This makes it easier to manage large ammounts of content as was the case here. The output of NextGEN Gallery is also dymanic so a change in gallery order, image description or artist bio will be reflected on all the pages where that gallery or image is embedded with one change.
We set up one gallery for each artist that was then embedded into a separate post for that artist. To display the list of all the artists on the Gallery Artists page we used the NextGEN Gallery Album function. The problem was that the Album function only points to pages, not posts. To curb this problem we had to go in and rewrite a large bulk of the sourcecode in the plugin. After the fix each artist gallery could be related to any page or post by entering the post ID number.