This post deviates from our normal digital media and graphic design related articles, and is in reference to our working environment at our Birmingham headquarters.

Substrakt started, and have grown up, in Digbeth. We opted for this area as we felt it had promise for regeneration as well as a respect for history and heritage, which is attractive to creative businesses like ours. We have enjoyed our time here, and have been housed within vibrant creative spaces of Custard Factory followed by our current home at Fazeley Studios. We've keenly followed public realm and architectual development in this area and the wider city.

I walked past Island House today, which essentially acts as a gate house to Digbeth and East side if you come down the Fazeley Street way. A good number of our team, and also clients, get to our studio from the city this way. To my horror I found that it was no longer there. I had heard rumors, but nothing confirmed... so this was indeed a surprise.

The re generation and activity around this area of Birmingham is exciting and mostly positive (bar the odd exception) with a new park and University campus as well as the addition of reputable organisations such as Birmingham Ormiston Academy arriving in the area. These sites are all new buildings. I'd like to know what the reasoning is behind the demolition of such a gorgeous building. From what I gather it was structurally sound, it housed the City Council arts team not so long ago, and didn't look too bad inside.

Was it to make way and create a view to the 'amazing' architecture? Was it just that the new hotel needed a car park? I'm not sure, but what I do know is that there must have been a way to keep this building standing. Are we so desperate to create a new identity for the city that we forget some of the old delightful buildings that have remained architectural pleasant for years and years.

I'm sure there is reasoning behind this and that someone will put me straight, but i'd like to hope that a huge amount of effort went in to trying to keep the building before the decision was made.

As a digital media business based in the Digbeth, an area named as a 'digital quarter', our desire to remain here has just decreased a little. No more surprises please!

Photo credit Brett Wilde

PS I've since found an article from Birmingham Mail that i'd obviously missed.

K4 Architects is a recently established architecture practice newly based just a stones-throw from our Birmingham studio on Fazeley Street. They came to us looking for a new web site to mark the new chapter of their business.

Websites for architects run the gamut from great to poor. They have in the past been dogged with an expectation of hard-to-use form-over-function inaccessible Flash offerings.

The trend for obscure menu systems, dreadful copy and pixel fonts can safely be left behind, but such sites often used beautiful large / full screen background images and custom typefaces - great for showing off the company portfolio. Whilst these only really benefitted the large-screened desktop they often  responded to browser sizes (up to a point) better than their HTML-based counterparts. (remember sizeListener.onresize = function() {};Stage.addListener(sizeListener); ?)

We wanted to select the best parts of this status quo and, at the same time, add our own modern take.

Welcome, Responsive Web Design ¶

Image credit: Smashing Magazine

Just over a year ago, Ethan Marcotte published an article on A List Apart on 'Responsive Web Design'. The article draws similarities from Responsive Architecture, a class of architecture or building that demonstrates an ability to alter its form, to continually reflect the environmental conditions that surround it. He observes -

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Since then it has become a hot topic, and has forced web-designers to think differently when designing a site. He continues,

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop....But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

Media Queries ¶

We used a selection of CSS Media queries to detect different browser sizes and capabilities and morph the pages to best suit the situation. This way we avoid creating separate user-agent specific, and an intelligent system that creates a 'one size fits all'.

A matter of style ¶

K4 showed us a copy of Process; A Tomato Project. The book details the abstract of Tomato's concepts, memories and approaches to work in layers of abstract photographs and layered transparency. We used these styles to inform the site's look and feel, using rgba transparencies (degrading gracefully for non css3 browsers of course) and background overlays to build up layers of depth.

Launch Event Invites ¶

As well as the site we designed some great invites to send to VIPs for their launch event. These minimal invites featured metallic embossed foil in the same accent colour as the site on 540gsm Pristine white Colorplan.

View the site: k4architects.com

This is a bit of a beginners article really, but sometimes the basics are forgotten, and the impact is major. Visual feedback is extremely important in User Interface Design. It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated. In reality buttons, controls and objects react to our interaction, so this is how people expect things to work. It’s basic stuff, but it matters much more in user interfaces as there aren’t any tangible controls, it should all designed to replicate/represent reality. I’m going to list a few of the common elements of interface design and why they really need to give the user feedback.

Buttons & Links ¶

Buttons & links are probably the most common elements which need to give feedback, and can be easily forgotten when designing in a program like Photoshop. There are 2 key states to a link/button: Hover and Active. When you hover the curosor over the link you should be changing the appearance to make this obvious to the user. This works best if it’s superficial, like a colour change, oppose to indenting or movement. When the user clicks the link, it changes to the CSS :active state, which should communicate that the link has been clicked.

Navigation ¶

The navigation on an interface should not only incorporate all the above aspects, but also what page or sections the user is currently on. Whether it’s a different colour for text, or a sub-menu being viewable, the user should always know which page they’re on by viewing the main navigational menus. It’s also good practice to make the current page ‘un-clickable’ to further communicate that it’s the page your currently on, so there wouldn’t be anywhere to click to…

Forms ¶

When filling out a form, certain information is normally required, or required in a certain format (email for example). You should firstly be letting the user know which bits of information are required, and how they should be input-ed. Users won’t always read this information though, so it’s up to you to provide useful feedback and help after validation has failed. The best way I’ve found, is to highlight the form inputs which failed, opposed to a list at the top or bottom. This way the user knows immediately what they’ve done wrong, and how to correct it.

Content loading ¶

If your loading in content after the initial page load, you need to provide some sort of feedback that this is the case. Seeing a blank space where content should be communicates that the site is either broken or badly designed (or both). There are universally recognised graphics/animations which symbolise that something is going to happen at some point, nearly always associated with loading content. Even if the content only takes 2 seconds to appear, you should still display a loading indicator like the above. There are a few good resources for creating your own here and here.

Progress bars ¶

Similar to the above points, but more information should be communicated. Waiting for things to load, upload or download is normally pretty frustraiting, but is made worse by not giving an indication of progress. ¶

It shows the progress of the ‘load’ with the blue bar, which ‘information’ is being transferred. Importantly, make sure it’s accurate. The only thing worse than no indication of progress is one you can’t trust (changing of progress times, or the one progress bar serving the purpose of individual transfers as well as a whole one.

So to conclude... ¶

A lot of these points are very simple to implement, and don’t take much time, so there’s no excuse not to have hover states, or loading indicators. And at the end of the day, websites are interactive, so make sure your talking back to the user.

Substrakt have recently released a fair few new websites which boast active blogs. For example the Brightspace run blogs Project Platform and Creative Careers, which has just launched, which will have plenty of regular posts. While it is great that sites are getting some love from regular updates, over time the quality of the blog might slip as more and more things are added to it. 

Embedding stuff ¶

Most sites now allow you to embed some sort of media or another, but unfortunately most of this embedded content is not so elegantly styled. For example if you embed a YouTube video onto your blog by default it will be sized at 480 pixels wide. This is fine but it looks pretty ugly to have a box of this size embedded on your site if the rest of your blog content is a different width. Joined with Flickr galleries which default at 500 pixels wide and 600 pixels high. This is pretty big and if your blog layout isn't that wide then its going to break something. 

Freshen Up ¶

So how do we make sure our blogs stay beautiful and look fresh as time goes by? Don't let your standards slip. When you get a brand new website you want to fill it with awesome content and make sure it looks as slick as possible. Just because your site matures a bit and has a lot more content than when it was launched, doesn't mean you need to let it get into a state of disrepair. Get into the habit of resizing your images to fit. Obviously sometimes some media just wont be the same width as your blog and theres nothing you can do about it, but more often than not you can customise embedded content to fit.

If you are embedding content from YouTube, Vimeo or Flickr, look out for something like this: 

<object width="480" height="385">

It is usually in the first line of the embed code. WordPress 3 now has an auto embed function, for security reasons, and to make things easier for the end user. When you paste a YouTube link into your post content, it is automatically converted into a video player on the site. If you look in the media settings tab you can change the size of any media which is auto generated. 

Details are important ¶

Paying attention to these small details makes a huge amount of difference, and can be the difference between a tight professional looking website and casual blog, so give your blog some love and don't neglect it after a couple months. 

We've been working with a partner agency this month, producing a microsite for a household name fashion brand clients. Much as I don't like talking about things in vague terms, we have to, because it's a white label project. However, the really cool thing about it isn't the brand or the microsite itself, it's where it's getting its content from - Facebook. 

Substrakt worked with Facebook's Graph API (that's Application Programming Interface for us clueless creatives) to find a way of taking the content from the brand's Facebook fan page and adding it into the relevant pages of its microsite. Wall posts turned into latest news, photos to latest styles, discussions page to Q&A section, and so on. The tone of the microsite reflects the Facebook fan page spirit, mixing branded content with user contributions. It flows easily, the content updates when it needs to and caches itself in case Facebook posts don't come through for some reason, so there's never any blank spots. I'm convinced, having seen this in action, that this kind of collaboration between social and corporate media is going to be the way forward. 

Even the most traditional of brands is beginning to use their websites to demonstrate that they are a fan of two way conversations and aren't going to stick to the one-dimensional tradition of standing in cyberspace screaming your own name until you get attention. We've put a latest Tweets feature, for example, on all our new-build client sites in the last 12 months. But using Facebook content to augment your brand is genius. Pulling it in from Facebook itself and nestling it amongst your brand's existing website and other media completes the social circle. everyone's talking about the same thing, and now the conversations can meet in the same place. 

If it's managed properly and the Facebook page is maintained as well as any other route to market would be, then the conversations generated on the branded Fan page add authenticity to your online image and people can be inspired, not bored, by what they read. The other, cost-effective argument for making more use of branded Facebook fan page content is that it sidesteps the issue of copy-production for brands online. Re-using this existing company material is cheaper than trying to re-create the same vibe all over again. Using it as part of a wider strategy to engage people online is also going to become popular, as after all, there are some people who don't use Facebook. And why should they miss out on all the fun that's being had? 

We really loved building the technology to make this work - the sort of challenge that gets us going!

My favourite way of keeping things challenging is by making everything into a game and competing with myself. As I get better at what I am doing, I have to make these challenges more difficult, which only makes succeeding all the more satisfying. In short I sometimes set myself seemingly impossible goals. Then I split these down into smaller tasks to make them more manageable, but try not to loose sight of the big picture. I set a bunch of tasks in the awesome iPhone app Epic Win and set about ticking them off. 

Read more books ¶

On the 1st January this year I decided I wanted to read more. I guess this is a resolution plenty of people make. I want to read more, I want to go to the gym more, I want to eat healthier. These are perfectly acceptable goals, but they are too broad. Its hard to challenge yourself and motivate yourself to do complete a vague goal. What is "more"? If you never go to the gym at all, more could only be once a week. This is fine, but its hardly pushing yourself to achieve something impressive. So I took my vague, wishy-washy resolution and refined it, deciding that I would read 52 books this year. To refine that some more thats one book a week. 

This was a far cry from the 6 or 7 books I read last year, and it seemed pretty daunting, but as soon as I got into a routine of reading every day I found that I was easily reading a book a week. I have now read 41 books this year, so I am close to finishing this challenge. I have trained myself to never miss a deadline and I never do.

Efficient markup ¶

This has also crossed into my work life. I am constantly trying to build sites faster and better than I did previously. Each site I build I try to employ some new techniques that I haven't used before and finish the work quicker than before without losing any of the quality of the work. The feeling of achievement I get every time I complete one of my goals is awesome and it really keeps my moral up. 

Quick wins ¶

My point is, set yourself big scary unlikely goals. Its a big cliche to say so, but aim high. Punch above your weight. Set a challenge then break it down into smaller ones. The 'quick wins' of completing these smaller tasks will keep you motivated and without even noticing it you might have achieved something epic!

We've just received the latest copy of Panlibus, a publication we recently wrote an article for. Here it is...

Libraries as gateways to the urban experience
Andy Hartwell, Managing Director, Substrakt

Libraries are already regarded as social institutions. However, their status as visitor attractions is expected to return in the 21st Century. Libraries are primed to become the gateways into a city’s identity. They will enjoy a transformation from inward facing keepers of ‘quiet’ information to vibrant, community-driven hubs. Technology will link libraries with their environment and integrate their resources with the cultural and social assets around them. The concept of linked data has arrived.

Linking data will take libraries a step beyond the drive to digitise the material that each collection possesses. This isn’t a question of turning dusty volumes into scanned, clear images that can be displayed on a screen. It’s also not about encouraging people to go online rather than visit a library, or indeed go online when they visit a library. It’s about providing each visitor with a personalised perspective of the library, transforming their short trip to source a book or see an item of interest into a rich experience that starts with their original purpose for coming and takes them on a journey through spaces and places which has been imagined specifically for them. Like changing the filter on a camera lens to give you a better picture, structured data is set to give a new outlook to users of 21st Century city libraries.

These changes are being brought about because libraries are responding to the needs of their visitors and potential visitors. People’s expectations of public information services are higher than ever before. Currently, what could be a colourful experience can easily become a wasted journey, with the visitor left wondering why something couldn’t have been done to prevent the inconvenience. The perception that smarter technology could combine with better information and make the visitor journey more palatable and personal is growing in the public mindset.

Substrakt’s recent research has highlighted what visitors expect from libraries and how they regard them in terms of their place in the fabric of their surrounding towns and cities.

•  47% of people intend to visit a library in the next 12 months – more than intend to visit an amusement park
•  Two-thirds of people look at maps or site plans before visiting places such as the library
•  Over half of visitors to a library would download information to their mobile phone before visiting
•  60% of visitors to places like the library read user reviews before going
•  Only one in five people want to be directed straight to the thing they came to visit on arrival
•  40% of visitors are frustrated by lack of staff and information when experiencing new places
•  86% of potential visitors to a library would like to use interactive information kiosks
•  Four in ten visitors to the library think their visit would be made more special by meeting people there with similar interests

This research supports the conclusion that libraries have the potential to integrate themselves further with their communities by being more than just a place to use the Internet. They can empower their own data via Internet applications and link it with that of others, to formulate better visitor experiences. By creating relationships between their Library Management Systems and other local information sources, adding partnerships with leisure and tourism facilities and creating accessible and social ways of sharing data, a library becomes a knowledge hub for the spaces and places that surround it.

Technologically, empowering the libraries to become civic gateways will mesh public and private hardware and software. Visitors’ mobiles and laptops will be able to work in conjunction with the data stored in the library and around the city in a more accessible and productive way. Interactive kiosks and on-site terminals will use information from public and private databases and booking systems to link together personalised recommendations and experiences. Applications, Augmented Reality and graphical representation addresses like QR codes and bar codes can be utilised to produce digital mapping, way-finding and 3D modelling solutions. Social media applications can be linked to create user-generated tours and suggestions for routes around a library and beyond into its town or city. An Urban Lens can be created, with a focus on the library.

A catalogue of possibilities

From stage to shelf
Imagine that a town’s theatre is showing Arthur Miller's 'View from the Bridge' starring Helen Mirren. To promote the play and encourage people to get under the skin of Miller's work, a library’s Urban Lens could feature the 'Five recommendations' from the actress of further reading by or about the playwright, his work, or 1950s America that can be found in the library. People could also be prompted to buy show tickets or purchase a copy of the play from Amazon.com

A walk through the City's history
Many cities have several historical walking tours. Imagine if the library could promote the tours whilst drawing visitors to the Library into exploring further with books and archive material? The way-showing solution could produce a visual map, dotted with literary sources to seek out, old photographs to study, and even user generated content which tells the story of times gone by in the city. Tickets to tours could be purchased, as could concessionary refreshments by clicking on locally advertised restaurants and bars.

Centre to the community
Many cities have many successful community events that don't at first glance concern a library. But what if they could get involved by simply showing people another side to a story? For example, imagine if during a Christmas Market, The library way-finding solution had an interactive map of the market's layout, with user reviews and links to recipe book trails or cultural backgrounds on the cuisine available?

Finding more than just books
Many people will be using the library on a regular basis and will develop their favourite parts of the new building. Where's the quietest corner? What if you need bright lighting or like to be near the coffee shop? What if the way-finding solution could make each visit more personal to visitors by showing them, for example which parts of the Library are busiest today, or how many desks are free in the archive section?

Key to the success of linked data projects such as Urban Lens will be ensuring that all electronic roads in and out of the library lead to the unique catalogues, bibliographies and archives that they contain. Each digital solution must be developed for each library and its corresponding location with the original purpose of the journey to the building in mind – to find a resource contained within. The added unique element for the visitor is two-fold. Firstly, a personalised route to that resource which helps them bypass all the negative aspects of a trip they dislike. Secondly libraries can add an element of unexpected value to visitor journeys – discovery of more than they came for. The benefits are not just social, but commercial too. Librarians and other staff will have increased opportunity to focus their roles. Operational processes will be automatically streamlined and economies possible. Linked data also presents several revenue generation opportunities through retail and commercial partnerships and sponsorships.

The options to connect public information via digital media are a real possibility and will not just put libraries back on the map in their location, they will become the map for their location.

Download a copy of Panlibus.

Substrakt Limited entered its fifth year at the start of September 2010. The business has grown and developed significantly over the past couple of years with the introduction of some integral team members as well as the involvement and delivery of some key projects. This has enabled us to further develop and expand our service offering. In order to help showcase these services and projects and allow us to fully communicate some of the work that's going on here at Substrakt HQ, we needed to redesign and develop our own website.

This blog post has input from Jim, our Creative Director and Mark, our Technical Director, who help provide a little more detail on our design and technical approaches when it came to, arguably, the toughest client we could work with… ourselves!

I'd like to start by introducing some important decisions we've made when redefining our online presence. The Substrakt website now clearly splits our service offerings into design and digital. We felt this was an important division so we could fully communicate our experience in both of these fields. With our hearts set, we approached each section as a clean slate. We felt that the larger digital/web-based projects in our portfolio needed a different treatment to the showcase of branding, design and print. We reduced the number of digital projects on display (now termed case studies) and opened these up, providing much more detail on approach, decision-making and process.

The design and print based projects were given a different approach, instead using full-width images & photography, and minimal written copy, allowing the work to breathe and speak for itself.

Our design blog, Distrakt, is another welcome addition to the site. We use the web compulsively in our hunt for inspiration. Websites such as FFFound, Tumblr, and countless design-related blogs serve as an endless inspiration stream. Most, if not all of us use Tumblr to aggregate our findings, but we thought - why not feed such streams into our own site? This way others, both internally and externally, to appreciate our findings. After all, isn't the sharing ethos of the modern web one the things that has made it so great?

The digital blog, Labs, details thoughts and tutorial sessions from our technical team. We have also made a decision, possibly taking a leaf out of Google's book, to implement Labs time. Every Thursday we dedicate half our workday to designing, building and branding great new digital products, from WordPress themes and plugins, to web and iPhone apps. This is also an opportune time to focus on collaborative projects and develop internal efficiency for project delivery

We've taken advantages of modern CSS3 techniques throughout the site, such as; border-radius, box-shadow, RGBA colour declarations and @font-face non-standard web fonts, to name a few. Unfortunately, not everyone has yet made the switch or has the freedom to choose a modern browser. For this reason we've served these techniques as progressive enhancements; they are rewards to those browsers that support them and degrade gracefully to acceptable levels of readability and functionality in older browsers.

We decided, in-line with the way our digital team has grown, to show off some of the technical skills we have here. There is a wide selection of platforms available for web development, and we were keen to demonstrate how we can work with tools like Django, Ruby on Rails and PHP outside of WordPress. Thanks to the wide skill set we have at Substrakt, we can match platform to project, rather than trying to force one system to fit every job. Much in the same way that we didn't want our web presence to be lost in a sea of similar portfolio sites, we think about what's best for the client, not what's the most familiar. Mark will discuss our decision to use Django for the new Substrakt site in a forthcoming Labs post.

You may (or will now) have noticed a secret section below the main site. We had real fun with this. Everyone at Substrakt is passionate about the web; we all use it every day. We've aggregated all of our feeds and content from various sources (Twitter and Last.fm at the moment, Tumblr & Flickr coming soon) into a timeline. You can filter by source or person, scrolling  back through recent activity. We don't plan on stopping here however, this will be our playground to try out new things, constantly changing and growing into an exciting corner of the web.

We hope you enjoy it.

Okay, the last couple of months have been pretty busy here at Substrakt HQ and I guess that’s what I intend to blame my lack of blog posts on! So, I hear you ask, what have I been up to?

Plenty! Amongst moving to Moseley, Substrakt day out, Glug London, Creative Coffee meetings, Digital Playground, trips to the Electric, exhibitions, birthdays, weddings, Centre Parcs and a wonderful holiday to Mykonos, I’ve had the opportunity to work on some really great projects.

After our Substrakt day out we managed to share a lot of thoughts and ideas on how to develop our creative processes and ways to work in which we would benefit from each other’s talented skill sets. During this Ryan and I realised we shared many thoughts on design direction and that working closer together on projects would be beneficial to both us and the client.

Since then we have had the opportunity during numerous brainstorming sessions along with Jim to exchange knowledge and opinions on many of our projects whether it be branding, digital or print. It’s great to be part of a creative team sharing my passion for design and once our new site has launched we will be integrating this to share with you!

Here’s a little sneak of some projects we’ve been working on recently and until our new site arrives you can check out my daily inspirational posts here.

Last year I organised and took part in a socially-aware hackathon called Hackitude, with the idea of building something cool in 48 hours. Last weekend I competed in Django Dash, a 2-day contest for Django developers.

I didn't have the best of starts.

The rules of the contest say developers can plan and mockup, but can't put any pixels on-screen until 12am CDT. When converting this into GMT, I read that as 6pm on Friday evening, and it wasn't until I got to about 20 minutes to 6 without hearing anything from the organisers' Twitter account, that I realised I'd made something of an error.

So I got a good night's sleep, and started proper, at 6am the following morning.

Then things started to pick up a bit.

I chatted with fellow Djangonauts on IRC (an old and well-established Internet chat system used frequently by developers), and got my head down into some serious code. The next thing I knew, it was 6pm and I'd been working almost straight, for 12 hours. I turned in at about midnight, got a full eight hours of sleep and cracked on again for the final stretch on Sunday, after refactoring whole swathes of code.

My final hunk of code, with around 2,600 lines of Python was submitted with minutes to spare before the final 6am Monday deadline, at which point the energy that had taken me through around 18 hours of solid work, evaporated and I poured myself into bed just before 7.

So what had I made?

Transphorm, a site that helps members "make one change" in their lives, track and share their progress. It could be used for anything from losing weight, to stopping smoking, to spending more time with the family. Members can create goals, then setup actions that they can log each day (like "walked the kids to work" or "substituted a cigarette for a nicotine patch") and ascribe points to each action. The more positive things you do, the more points you gain. You can then reward yourself, set milestones and get comments of encouragement and support from other members, and your friends and family. Each plan has its own page, so people can get in touch easily, and share what they're doing on Twitter and Facebook.

There's loads more that I'd like to do, and ways to make it fun and competitive. Because members can take part in goals other people have set, there's potential for a leaderboard for those who want to take part. I'd also like to build in support forums, and give each goal its own page, full of blog posts, tips, articles and maybe sponsored rewards, whereby if you can't think of anything to reward yourself with, you're given suggestions and perhaps a discount.

I'm proud of what I've managed in 48 hours, and will await the judges' decision with baited breath. The winners are announced at the end of the month, and while Transphorm isn't a project that pushes Django to its limits, I think it's something worthwhile.

It were a reet good laff too.