Responsive design techniques make this actually quite easy. With a plethora of toolkits now available, sites designed with fluid grid systems in mind can easily adapt to any viewport width. Add in a media query, some fluid images and – “ta-dah!” – quickly and easily add alternative layouts for virtually any viewport size or device.

When I am the sole designer on a project, my preferred workflow is to design for the desktop, then tweak the resulting layout to suit tablet and mobile, but of course it can also be done the other way around, depending on which platform is considered more important. When formal wireframes and UX designs are needed, rapid prototyping can bring responsive layouts to life quickly and efficiently.

Recently I created a website for a small wedding photography business using responsive techniques and I’m pretty pleased with the speed at which I could get the site up and running across multiple browsers and devices.

I also love how they cleverly give an embed link on the image. Clever Moo.

For example, one of my Facebook projects last year was to create a competition app for Autotrader. The landing page for the app was strategically placed to encourage new visitors to like the page and enter the competition. It used to be that you could set your landing page to display an app in an iFrame and drive your customers directly to the content you wanted them to engage with.

This is, as of the end of March, no longer going to be an option. With a timelined page, what you see is all you get – look at the image at right*. You can still have apps (with the option of an 810 pixel wide version, which is nice), but can not land on them. It’s also worth noting that the cover image can not have a call to action, so no discount codes, no website addresses, no giant pointing finger asking you to like the page.

So what’s a forward-thinking business wanting to tap into the massive Facebook audience to do? Well, it pretty much means getting down to brass tacks, as it were. Create and share interesting content to engage your audience. Ensure that your content reflects your brand and builds upon it. Be consistent, but know the boundary between frequent and annoying (a post once or twice a day is enough). Know when your audience is likely to interect with you – the new page insights give you the tools to work that out. If you build an app, make sure it’s relevant and compelling and isn’t just a ploy to get people to “like” your page (“likes” aren’t currency – if you don’t engage, a “like” isn’t worth a French franc).

It’s a shame for social media agencies who depended on app development as a business model, but, to be honest, for brands, it’s probably the right move. Like most Facebook users, I get annoyed by constant interface change, but I can see lots of reasons to embrace this one.

(*P.S., my Facebook page is one I use for testing client apps and all my “fans” are simply co-workers. Not to be used as an example of good social media marketing!)

Photos by me and James.

Love, love working on this project. Check it out: http://www.unlocktheanimus.com.

www.cul-de-suck.com

FYI, all CSS and jQuery that one… oh and some sneaky iFrames to use dynamic content from the WordPress powered <a href=”http://blog-de-suck” title=”blog-de-suck”>blog-de-suck</a>.

I made this.

View the full presentation document in PDF form.

Copyright, by the way, for images, design and game concept belongs to Gameware Development.