Design Projects – Metro and WordPress hand in hand

WordPress + Metro style + responsive design. That was the baseline when designing and building – 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 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.

Metro icons

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 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.

Sliders are usually based on one of two principles: Either you have a long horizontal or vertical row of images and / or content where only the content in the slider window is visible and then you just shift the row left or right to display he new items. Or you have a window that toggles visibility on and off for different layers of content. In either case you use JavaScript and CSS to make everything work. But problems arise when you start messing with the size of the window:

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 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!

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a Senior Staff Instructor at LinkedIn Learning (formerly specializing in AI, bleeding edge web technologies, and the intersection between technology and humanity. He also occasionally teaches at Emily Carr University of Art and Design. He is a popular conference and workshop speaker on all things tech ethics, AI, web technologies, and open source.

15 replies on “ – Metro and WordPress hand in hand”

Wicked post, Morten. You captured it quite nicely. Metro is all about information design and I think you captured it quite nicely.

Nice work!, Can you tell me please where to find the tutorial for styling the facebook facepile. Can not find it, after hours of searching 🙁

The BlendInsider theme is a custom theme built specifically for Microsoft. It will not be released to the public. However, the Anaximander theme which is currently powering Design Is Philosophy uses the same design principles and will be made available for free to the public shortly.

Comments are closed.