A recent collaborative project has developed a new online learning resource for teachers delivering religious education in schools, launching in conjunction with a new national approach.

Taking place over the last few months this venture with Junction Media and Birmingham’s Standing Advisory Council on Religious Education (SACRE) has resulted in the website www.faithmakesadifference.co.uk to be used by teachers, parents, governors, local authorities and faith communities.

A new RE syllabus is already implemented in over 400 schools and Early Years centres in Birmingham and the new site will support that delivery. The site provides additional benefits to schools using the new syllabus with the way in which it offers materials.

The syllabus has a revised emphasis of learning about faiths, respecting one another and living by rules. The website communicates these themes and aids lesson planning for teachers. All the materials are easily accessible through key stage or faith and disposition, making the site easy to navigate and its straightforward user journeys, it’s simple to access what you need.

If a teacher wants further help, they can book a session with a specialist RE advisor through the online calendar and booking system built into the site. This site negates the need for teachers to call the city council requesting RE support and advice, either all the information relating to the nine major faiths present in Birmingham is online for them, or even if they want some more help, all they need to do is book a session.

The site needed to provide information quickly for teachers and have all the new syllabus material reflected and easy to access. With a large amount of learning material available, teachers can easily access learning matter for their classes and with the way the site is developed with straightforward user journeys material is simple to find.

In partnership with the Royal Institute of British Architects (RIBA), the Birmingham Architecture Association and the Birmingham Five Counties Architecture Association (BFCAA), Substrakt designed and developed an iPhone application and website to represent Birmingham’s finest architecture.

The objective was to create an application that appealed to both users who are interested in architecture, and the general public who either may have an interest in the buildings that they interact with on a day-to-day basis, or who are visiting and keen to learn more about their surroundings.

Information about buildings is available in list format, or viewable on a map. The app also uses GPS to filter buildings that are near you at the time.

A number of buildings are collated into tours within the app. These are themed, e.g 20th Century tour, and can be individually curated while building information can be tailored for that particular tour. Users can use GPS within the app to help guide them on the tour.

All the data (buildings and tours) for both the website and application is easily managed from a central web based database.  The application is built natively using Objective C.

Visit the website to download the app:

http://www.walkingarchitecture.co.uk/

Substrakt are on the hunt for a creative web developer to join our busy and exciting team.

Initially we are looking to fill a part-time or freelance position, but with an ambition to move to full-time position in the future.

The successful applicant will need to have two or more year’s active developmental experience with Python (2.x). Experience with the Django framework is ideal but not essential. A good understanding of OOP and modern open source web development techniques and technologies (like Apache and SSH) is a must. If you don’t have any Django experience, any knowledge of Ruby on Rails or other MVC based frameworks would be very useful.

Other areas of experience would include:

• HTML5
• CSS
• JavaScript (and AJAX)
• an understanding of accessibility requirements and constraints
• solid experience with databases such as MySQL and PostgreSQL

You will be reporting directly to Substrakt’s Technical Director and part of the wider team containing web design and UX design, graphic design and creative staff.

You will be required to work from Substrakt’s lovely Birmingham office at Fazeley Studios.

The right person for the job will be able to:

• Demonstrate previous experience of working as part of a team
• Work to deadlines and show examples of how they have managed time-sensitive projects
• Demonstrate an ability to contribute to the production of high-standard specification and written material such as wireframes or technical specification
• Show a good standard of client communication skills
• Have experience of the project management tools and methodologies used by agencies

Please send an email to team@substrakt.co.uk with a covering letter, cv and links to your work.

No agencies thank you.

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

Over the last 12 months, Substrakt has noticed a very positive trend in the West Midlands - organisations learning the value of digital data and using it to empower and encourage local people to make the most of the places and spaces around them. Our most recent completed work, the Radiu5 Project, is a great example of how this can work really well as a collaborative and engaging initiative for young people in particular.

Radiu5 is the brainchild of Sampad, a dynamic development agency for South Asian arts based in Birmingham. It has a particular focus on youth arts projects, encouraging young people to grow their skills and experience and further them whilst taking part in cultural education opportunities. Radiu5, a key Sampad project for 2011, saw volunteers collecting digital data which highlighted the creative and arts opportunities available within a five mile radius of mac Birmingham for young people, with the intention of inspiring wider involvement and creating a lasting online archive.

Substrakt's job was to design and build a digital way of showing the data that the young volunteers had collected.

From the start, the project was fun and hectic to work on for all the team. The 30 young adult volunteers had some fantastic ideas of groups of information they wanted to collect, from Birmingham's graffiti art, venues for band rehearsals and affordable places for groups of friends to meet. We worked with them in groups, helping them decide on how they wanted to see this material come together, and importantly, how it can be connected to create an overall story. The Substrakt team coached the volunteers in data collection methods and upload techniques, subject matter brainstorms and feedback sessions at every stage of the design process.

Front-end interaction with the exhibition was via a touchscreen which in turn powered a matrix of large displays. We had to think carefully about using animations that responded to touch, avoiding 'hover' effects. The specification of the displays was still an unknown at the time of design, so we opted to design an interface that intelligently scaled to the dimensions of any given display. This way users were able to play using any type of device. The data points bubbled up on the left of the installation, changing in radius depending on the popularity of the tagged content. Navigating through the bubbles brought similar 'linked' data points into view. Any content (images, video, audio, editorial) that related to the data points then appeared on the right. Content that was geotagged was displayed on a minimap. The whole interface was powered via jQuery & Ajax in order to maintain a smooth immersive experience, avoiding the need for jerky page refreshes.

We focused on ensuring that each visitor got a unique experience from playing with the visualistion, finding data that took them on an informative storytelling journey.

Substrakt trained the volunteer teams to guide young users around the exhibition and encourage users to upload new content of their own. The visualisation was also made available as a website for future use, with the project ending in May 2011.

Last week we launched the new website for Serge Films, a film production company based in London. They connect brands to their audiences through a blend of strategy, storytelling and beautiful high definition film.

The aim was to make the work the central focus for the user and encourage them to explore the site and other pieces of work. To achieve this we kept the design relatively minimal and the colour palette neutral, leaving the colour and visuals of the work to grab the attention of the user.

Check out the site at www.sergefilms.co.uk

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.

Last friday we launched a new site for the good people at Beadesaurus.co.uk. They have a couple shops in Birmingham and Marple, Stockport, as well as an online store, to sell a wide range of clothing, jewelry, accessories and loads more.

The brief was to overhaul the design of the site and rebuild it around the Satchmo Ecommerce framework. The site design has a weathered and ‘grungey’ appearance to appeal to the target demographic, but still remains clean, clear and a good usable browsing/shopping experience.

We used a range of CSS3 techniques in the site, such as a multiple background images in places and @fontface to use custom fonts throughout the site. It’s also great to see the people at Beadesaurus already making the site their own by adding some new slides to the ‘featured slider’ on the home page, which will keep the site looking fresh in the future.

Check out the site at www.beadesaurus.co.uk
(and maybe buy a little something for christmas!)

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!