Metro inspired website
2 April 2012
Microsoft’s new Metro UI design philosophy is based around clean lines, whitespace, padding, and simple clear blocks with beautiful images. Coupled with another lovely typeface, I’ve been thinking about how that translates to a website theme for the last 3 months.
What I really loved about building a theme around the Metro philosophy was how easily extendable it was, all with surprisingly different outcomes. Specifically, I’m left with three WordPress child themes:
- “Window to the web”
- “Whitespace, we need more Whitespace”
- “Gotta love the BBC”
I have no idea which theme I will eventually stick with, but it’s great to see how how flexible Metro has been in incorporating MY personal website philosophy.
Responsive Design is Irresponsible
Responsive design is great, and a very useful tool, but ONLY to differentiate between same-types of medium. Far too many of my colleagues believe that the only difference between a mobile and desktop browser is screen size, which is obviously wrong.
This site is aimed at DESKTOP users, and has an Information Architecture specific to users who are on a broadband connection and a mouse and/or keyboard.
Of course, it’s been tested on Mobile and Tablet browsers (and not just Apple products!), but if your website needs to be mobile optimised, then it should have it’s own Mobile website. Cross-medium Responsive Design is Irresponsible.
Human readable CSS
We’re speed obsessed on the internet, and rightly so, but sometimes we make life exceptionally difficult for ourselves for very little gain.
One long Stylesheet, with all tabs, lines, and spaces removed thats unable to be read by humans or edited by humans has become the defacto standard – all to save a few tenths of a second.
It’s daft, counter productive, and more importantly gets in the way of the real joy of a website; having others view your code to learn and improve themselves.
Keeping both your development and presentation modular is one of the key learnings of an Agile development appraoch; and the ability to embrace change. This becomes even more important once you move to a multi-person development team with accurate source control.
This website has multiple stylesheets, all within a modular parent-child hierarchy, with not 1 single ID selector to provide pure Cascading Styles.
No Frameworks
HTML, CSS and JavaScript frameworks appear to be all the rage these days. I am fans and can recommend many for prototyping but not for the actual build of a website.
Your website should be built to your specifications and rules, in terms of IA, UX and layout. It should be where possible, individual to you and reflect your personality, tone of voice, and goals.
HTML4.5
HTML5.
Ah, HTML5. The spec. The Buzzword. The great white hope.
For the most part, it’s a fantasy. The original spec (not the current one, oh no, thats something totally different) is over 8 years old. It tells of a promised land of multiple APIs, life without flash, fonts that work flawlessly, and bunnies for everyone – yes bunnies.
The reality is, the only thing that HTML5 has delivered so far is the BEST aspect of it, and the single feature it should have “launched” with: Semantic Mark-up.
With no fancy APIs or no bunnies that only work in a handful of browser/OS combinations; but markup to better help both computers and humans this website is fully… HTML4.5 compliant.
javascript
JavaScript is the alchemy of the web. More than that it though, holds a special place in my heart for convincing me in 1996 that the medium of the web was powerful enough to react and interact with you.
With great power, comes great responsibility
Uncle Ben, Spiderman
Sadly, JavaScript is the most abused tool on the internet. Every single positive use of JavaScript is met with 1000s of erroneous uses of overlays, popups, hiding content and other UX horrors.
Progressive Enhancement is the order of the day, and so far, no JavaScript has been required or wanted. Which really helps ensure my site works on the 7% of the internet that does not have JavaScript enabled.
Social Media
I don’t “get” social media. I understand it, it’s part of my job to advise on it’s use to companies, but I don’t really like it.
Actually, it’s not that I don’t like Social Media, it’s just that I find it’s missing the large unspoken part of what “Content is King” so important: CONTEXT.
“Content is King” worked on the premise that your website/show/medium was context specific. Writing great football content on a SEO blog wouldn’t help, and making great cat videos on a Wrestling website would result in no hits. Actually, no, Cat videos would always bring in hits, but you get what I mean.
Social Media, and Twitter especially, has some amazing content on it but the lack of context makes it difficult for people (and myself specifically) to filter out the noise.
But the people have spoken, (and other people have RT’d), and social media is here to stay. So I’ve added social media buttons for the networks that I personally am on, in an attempt to be more engaging.
Commenting
This is a really hard one for me, but I think it ties into the social media / content+context aspect.
In the past I’ve found comments on websites to be of a fairly poor quality on the whole, with an very rare exception of wonderful input.
Closing comments, with a request to e-mail me instead, has been lead to some truly wonderful and in-depth conversations with people from across the technology spectrum.
Yet I meet countless people at conferences who explain to me that while they would gladly spend 10 minutes writing me a blog comment, they somehow don’t because of the 30 seconds it would take for them to open their email client. Without being in anyway facetious, the Twitter generation genuinely think this way.
I’ve taken the hard decision then to open comments on the website for News stories only (and not Articles), in the hope that I can reach out to those who have fallen out of love with email.
It will be quite heavily policed to begin with, with even positive comments that don’t add anything to the conversation being hidden. Hopefully this will give people a bit more access to ask me questions directly, rather than taking to twitter to speak to themselves without me knowing.
Semantics and Tagging
Tagging, categorising, and the use of semantic context indications have always been an over-used and mis-used aspect of “blogging”. What should be a a wonderful tool for cross pollination of content has turned into a form of spam on most websites.
Yet at the heart of the Metro UI philosophy is based around multiple user journeys, rather than the predefined linear model. This is a task that won’t happen overnight, but expect to see an increase in segmentation and categorisation in the following months.
Custom Content Objects
Finally, an easy one.
Wordpress, my blogging and light-weight CMS of choice, does a great number of things well. It also does a great number of things badly. Actually “badly” is harsh, it just does them in a very specific, controlled, and non-extendable way.
Custom Post Type was a nice move but not quite there while the Custom Post Formats separated some needed functionality into a cross-purpose module. Sadly, once you’re used to the power of Custom Content Objects in AdobeCQ / Joomla / Drupal you feel so constrained by the WordPress system.
With a small amount of hacking the core, I’ve finally reached a point where I’m happy with the separation of data. To you this might not mean much, but to how I manage and update the site, it should mean I spend more time writing content than wrangling with the CMS.