Recently, Makemedia designer Ben Scammels spoke at UX Camp Brighton on the subject of Design Processes and Prototyping for Responsive Web Design.
You can hear the talk in the video below, where Ben contemplates the challenges of designing for Responsive Web Design projects and how Makemedia overcame them. There are also some handy tools for prototyping for responsively designed websites.
If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email email@example.com.
Over 80 people from a variety of backgrounds gathered in Brighton to share knowledge and professional methods on a wide-range of subjects related to User Experience Design (UXD). Some of the topics covered included:
Mobile Usability Testing
UX and Product Managers
Art & Science of Conversion Optimisation
Designing for Cognitive Ease
Analytics Tools, Monitoring and Best Practice
A Cheat’s Guide to Personas
Grid Scramble at UX Camp Brighton 2012
The sessions were of a really high standard with a multitude of practical takeaways that can be applied in our day-today work. Coverage of the sessions can be found on the event page and attendee comments have be really positive.
Three of our Makemedia folks each held well received and jam-packed sessions:
Ben Scammels gave a detailed case study on how to implement Mobile-First Responsive Web Design, using a rapid-prototyping framework.
Paul Ferguson outlined some New Browser Technologies which may help improve user experience.
Patrick Sansom described how Domain Modelling had been invaluable technique for a challenging project.
Expect to see these talks and slide decks up on the Makemedia website shortly.
In addition to providing the framework for learning and networking, the event also raised a good sum of money for local Brighton charity Spark and Mettle, thanks to the generosity of the attendees.
The next event is planned for December 2013.
Interested in how our in house UX expertise could work for you to create efficient targeted results? Get in touch by calling 0845 017 8777 or by emailing firstname.lastname@example.org.
When not working to create great user experiences for our clients, Makemedia’s in-house UX Designer Patrick Sansom also contributes to the UX community by organising UX Camp Brighton. He explains why this is one event you really can’t miss.
For those working in the digital media industry, the value of ensuring a product is useful, usable, intuitable and satisfying for it’s users is a given. However, achieving this is not always easy and can require a wide-range of practical knowledge from many disciplines and expertise of a variety of methods and practices.
UX Camp’s are one of the best ways to gain this understanding. They are all about sharing learnings, tips, tricks and best-practice with your peers in a supportive, collaborative environment. The breadth of subjects covered is amazing, with 50 talks to choose from in one-day! And with most sessions being practically-focussed, there are takeaways that you can use immediately in your work. You don’t need to have a UX or IA in your job title to benefit – if you work in the digital media, you’ll find plenty to apply to your day job.
The event will be held on Saturday 8th December 2012, from 9.45am to 5pm, at the Cogapp offices (21-33 Dyke Road, Brighton, BN1 3FE).
It is free to attend and the second batch of tickets will be released on the Eventbrite page on Friday 15 November 2012 at 12:30.
Firstly, a big thank you to the organisers of both events; I feel very lucky to live in a town that holds a month long digital festival. It’s particularly useful to hear from and meet other marketeers, especially if, like me, you work in a small or one-person marketing team. It’s a chance to bang heads and discover some new tips and vantage points that will benefit your own marketing strategy. I would recommend BDMF for all round marketeers looking to build up knowledge across new areas. BrightonSEO is more specialist, although they do invite speakers from other areas of expertise such as UX and even linguistics (e.g. Lynne Murphy, who was particularly amusing). It didn’t seem quite as controversial as previous years (reference: angry blog 2011) but there was a whopping turnout of attendees (circa 1500).
If you want to listen to all the talks you can expect to see them up on the websites soon. In the meantime, here are my top takeaways from the events.
1, Don’t waste your speaking opportunity by turning it into a full fat sales pitch.
It takes guts to get up in front of a room full of people and present your ideas and the speakers are brave to do so. However, spending 40 minutes slapping your listeners in the face with how great your company is instead of speaking about something that will inform and benefit them will bore and annoy your audience. Instead, focus on providing information that is of value to listeners, whilst reflecting your expertise. It will be obvious from this that you would be a knowledgeable supplier.
2, Useful tools for links and referrals
Thanks to Berian Reed (Berian Reed’s presentation slides) for these tips. Copy and paste is still the top way data is shared. You can use TYNT for automatic link attribution when users copy and paste from your site.
Mobile mobile mobile! Yes, it’s the “year of the mobile” (again).
Alex Meisl wisely advises to consider you mobile audience not the mobile device, therefore avoiding jumping on the App bandwagon. Aleyda Solis advises a mobile first design, which has the added benefit that what you end up with on your screen is cut down to the most essential information.
The Makemedia mobile website is in the making presently so keep your eyes peeled for a future launch.
4, The future for mobile (according to Alex Meisl)
Mobile specialist Alex had some interesting points to consider regarding what aspects of mobile marketing are more substantial.
NFC (although the new iPhone does not have NFC capability so perhaps this is still some time away from becoming ubiquitous)
Location – in a saturated market locative marketing can give you the edge.
SMS – although we were discussing at BDMF how unwelcome SMS marketing can be intrusive, annoying and possibly damaging to the brand.
Image recognition – I’m excited to see how both image recognition and the semantic web will develop as surely this will change how we use the web forever!
5, Images of people in your marketing are important.
Marc Munier advised that when you use images of people in your marketing they should be looking at the thing you want your audience to look at – your great offer, call to action, etc.
6, A few tips for your PPC campaigns…
Nikki Rae reminds us to ensure you have the correct time zone selected in both your Google Analytics and Adwords accounts for accurate reporting (edit profile settings to do so).
Setting up a group on LinkedIn is effective but a lot of hard work so instead you can target PPC campaigns on the site to those groups – James Faulkner has seen returns here.
James also reminded us to include links in PPC ads that will allow users to call directly from mobile phones and tablets.
7, Making an impact with your marketing is the most important step!
Dave Trott gave us all something to think about with his talk on “Predatory Thinking.” In a saturated market 90% of ads fail (probably more). Using the example of asking Mrs Trott for a cup of tea, effort is being exerted like this:
Dave Trott’s triangle illustration of where energy is often allocated by advertisers.
Often, the majority of effort goes into persuading. However, if you make no impact then no-one will notice the ad anyway. Communication is still important because if you don’t start the conversation there will be no opportunity to persuade. Therefore, we need to turn the triangle on it’s head as getting noticed is the most important step.
Dave Trott’s triangle illustration of where energy SHOULD be allocated by advertisers.
Dave also told us that the brain picks out what is different so you need to make your ad →stand out← to be remembered.
On the other hand, Allister showed us how you can use this theory to trick the brain. Product listings are often similarly designed to look the same (see below). The consumer will generally go for the mid-price option thinking this is the best option.
Deja vu design
Simon Penson explained that when scheduling content strategy you should utilise peaks and troughs. So you can use regular items – serialised content, top 5s, quick tips, etc. – and then less often you will have your “big bang” content – such as your press and TV campaigns.
“Do you want to evoke an emotional reaction or a rational act?”
You will be designing your marketing differently depending on this. Your product or the essence of your brand will define which one you’re going for.
10, Delight comes in small doses.
Small surprises can really lift our mood! Small gifts, things we didn’t expect, even working out a puzzle in an advertisement or logo – it’s the little things that matter. Allister used the arrow in the FedEx logo as an example:
The Fed Ex logo is an example of a hidden visual puzzle and also a visual signal of what they do – getting something from somewhere to somewhere else.
So that’s my top tips. Please do add to the comments if there are any particular tips that you would like to add and if this article was useful to you please share.
On Friday, several of the Makemedia team were lucky enough to attend dConstruct 2012 – a highlight of the Brighton Digital Festival, taking a conceptual view on the future of design, innovation and all things digital.
It would be a challenge to retrace the diverse and engaging topics covered by the nine speakers in enough detail to do them justice; it was quite simply a mind blowing day. Subjects covered included; how our digital history should be achieved (like the 1000 Terabytes of user data rescued from Geocities); how to create a digital fireworks display triggered by glowsticks; how the innovations of Chewing Gum link to Mozart in 7 easy step; and the liberating potentials of nanotechnology. Oh, and a cat called Sockington who has 1.5million followers on twitter.
Some of our favourite speakers were:
Jason Scott’s talk on the importance of the archiving of the internet, which questioned how safe our data/tweets/updates/photos were in the servers of such giants as Facebook.
Scott Jenson’s predictions for mobile web applications and how searching for – and interacting with – services and information in our proximity would be the next logical improvement to mobile web.
The day closed with an encyclopaedic whistle-stop tour of the history of innovation connections by James Burke which more than justified the awestruck crowd’s lengthy ovation.
All in all we were really engaged by such a diverse set of well delivered subject matter and we’re all certainly looking forward to 2013. Conference organisers have recorded the talks and they are available here http://archive.dconstruct.org.
On Friday I was lucky enough to get a ticket to this years Ampersand – the annual typography conference that focusses on the hot topic of typography and websites.
Typography is becoming an ever growing concern of designers and developers since the advent of ‘@font-face’ and, more recently, CSS3 declarations that allow us to both apply various typefaces to websites and also to control how they are formatted. Gone are the days of ‘choose from these 5 webfonts and make images of the rest.’ We are now completely free to use 100’s of webfonts that are rendered as HTML, but with this comes the responsibility of applying type correctly. Developers and web designers alike have historically been limited in their ability to apply all of the rules that hundreds of years of typography has created, so it’s of no surprise that the knowledge of these intricacies has waned somewhat. It strikes me that one of Ampersands goals was to remind people of Typography’s rich heritage; the rules and considerations of the craft, and that we must, as we move forward into an ever increasingly digital society, continue to practice and propagate this knowledge to retain the depth and quality that the last 1000 years has informed it with.
Phil Baines (Professor of Typography, Central St. Martins) – last minute stand in for Erik Spiekermann schooling attendees with a Brief History of Typography
The day consisted of several presentations ranging from the foundations of type to hardcore technical applications – here’s a summary below and you can link to lanyrds fantastic site to view the decks (http://lanyrd.com/2012/ampersand).
Keynote – Phil Baines. A brief history of type highlighting where webfonts fits in with the big picture of progression of type. Detail in Web Typography – Yves Peters. The intricacies of typography – using the correct characters in the correct situations. Typographic Matchmaking – Veronika, José. A ‘what’s hot and what’s not’ from a humorous pair who may very well have ‘ruffled the feathers’ of quite a few designers by dissecting their typography to the audience!
Linotype the Film Q&A – Doug Wilson. A Q&A following the charming film of the history of the linotype machine which helped propagate the printing industry and therefore newspapers in North America in the 1900s. Designing Fonts for Screens – Jason Smith Leading TV brand font designer –channel 4, BBC1 and more CSS Font Stack Hackery – Laurence Penney Getting to the bottom of the depths of the ‘font-stack’ On Hinting – Lucas de Groot WOW! Who knew there was so much required to make a font work? – de Groot suggests it takes a day to ‘hint’ (tweak a font so its lines make it legible) 8 characters – that means about 4 months of work to release a fully fledged Calibri to Microsoft In Your @font-face - Jake Archibald A hilarious (and potentially offensive) study of how webfonts are processed Enhancing the Future - Elliot Jay Stocks A round up of CSS and JS options that allow us to make the most of type now
Special note goes out to Doug wilsons ‘Linotype – the film’ http://linotypefilm.com. I was sceptical about watching a 90 min film on a printing machine but the charm, warmth and depth of the characters completely blew me away. It highlighted the rich history of the machine and the craft that grew around it – in the end it was more about the innovations of individuals, the passion of craftsman and how the rise of the computer saw a dissolution of both. Surprisingly moving. NB. The first person who can explain the importance of ‘ETAOIN SHRDLU’ without using google gets a free doughnut.
…and Phil was good enough to hang around the next day and do a tour of public lettering in Brighton – here is the group perusing the Trajan ligatures of the war memorial
The next day, infused with all of this typographical awareness, I attended Phil Baines’ ‘Brighton Walk of Public Lettering’ which had 40 or so people staring at intricate type of the city’s buildings’ – and many public onlookers bewildered by what on earth we were looking at! Thoroughly informative and enjoyable and it took me to a few local public houses that I’d never come across before. Three cheers to typography I say!
The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (app) downloads, motivated by a number of factors, including the perceived improved user experience, performance advantages, and ability to utilise hardware features.
The advantages for publishers of the marketplace ecosystems provided by each manufacturer include improved findability, and the potential for profit-making by taking a percentage of download cost for paid applications or content subscriptions.
The lure of apps is easy to grasp, with layout, navigation, and typography optimised for the specific screen size, big or small. The boom in app popularity has seen a number of organisations simply translate their website content into downloadable applications, moving e-commerce, editorial, and social platforms from the browser, directly onto their user’s hardware. Even though many of these applications replicate content available from the same organisation’s website, they prove enormously popular with consumers.
Although the quality of their design varies, good smartphone and tablet applications deliver content in a way which does not require a user to work hard to get to the content they need. No need to pinch and zoom to scale up page content, no waiting for unnecessary page elements to load, and no need to battle with navigation designed specifically for a desktop user. Choosing an app over a website is often the pain-free choice.
The New York Times website viewed on Mobile Safari (Attr: Robert Scoble)
However, although app’s can be a viable solution for organisations wishing to optimise their content for portable devices (depending on their objectives and technical aims), there are potential pitfalls.
Producing multiple apps to ensure coverage of the most popular hardware can add to development overhead, and this often means production effort may be limited to a defined number of devices. Market share is spread among a plethora of smartphones, tablets, and e-readers, so a percentage of any potential audience is lost.
Updating device specific applications can increase development effort and cost depending on the language employed, and add to the intrusive load of updates served to users. In addition, new arrivals to the marketplace may prove popular enough to justify additional investment.
Like VHS, CD-ROM’s, and DVD’s, apps have a best-before date which is hard to predict. As new formats bloom, new hardware launches, and application eco-systems change, so the software developed specifically for these devices will one day reach a point at which they are incompatible with the latest device or operating system.
The ecosystems within which applications are managed by hardware and software manufactureres (such as the Apple App Store) mean a percentage of revenue is surrendered by publishers for every download of a paid application or subscription.
For several years the trend toward fixed-width website layout became something of a standard practice, delivering pages at set pixel width to allow greater control over their appearance. As desktop screen sizes grew, so did the accepted ‘standard width’ for websites, until the explosion in mobile browsing meant this would no longer cut the mustard.
Navigating a website optimised for a large monitor on a small screen (such as those on an iPhone) can be a frustrating experience, and the App Store beckons for those requiring for a more usable mobile experience.
Responsive web design
Infrastructure Journal’s responsive platform
The term Responsive Web Design was coined in May 2010 to specifically define a set of design methodologies and web technologies used to create websites that adapt to the size of the user’s screen size. In essence, a responsive web design can detect the size of a user’s web browser window size (from the smallest smartphone to the largest cinema screen) and reorganise the website’s content and navigation to suit.
It is delivered through a single set of code, without the need to create separate code for each of the different sizes of device. The result? Users of any version of iPhone, iPad, modern Android devices, and Windows Phone experience the same website, but with the user experience adapted accordingly. Those on desktop machines experience the same website in a form optimised for large screens too. No apps required, just modern web technologies.
The technical bits
Using a flexible grid system (the guides designers use to define page layout), flexible media (text, images, and video which can change size), and a technology called CSS3 Media Queries (website code which applies layout and styling changes based on the user’s current screen size), we can create websites which optimise for desktop and portable devices instantly using the universal language of the web – HTML.
Makemedia recently launched a responsive redesign for Infrastructure Journal, a global data and editorial website for the global infrastructure finance market. If you’re using a desktop browser, follow these steps to see how the new IJ changes it’s layout as the browser width decreases in size (such as on a smartphone), or watch the short screencast above for a quick glimpse of this technique in action.
Resize your browser window, making it narrower on screen
In a modern browser, you will see the page content flex and move to suit the size of your browser as it changes without the page reloading. Page content is reordered, navigation is optimised, and text sizes are adjusted for comfortable viewing.
Opening the same page on your smartphone or tablet browser has the same effect, with the website automatically adapting for the size of your chosen device, using the exact same set of website code used for the desktop site.
An app experience for everyone
HTML has been the language of the web since it’s birth; websites designed fifteen years ago still work in today’s modern browsers, and will continue to for years to come. By developing responsive websites using HTML and CSS, experiences can be optimised to deliver websites optimised for any screen regardless of portability, manufacturer, or operating system.
From iPhone to Kindle, Android to iPad – the kind of experience previously the reserve of mobile-specific websites or downloadable applications can be had by all, through the browser.
Maintainable and scalable
Updates to websites designed responsively only require a single set of code to be updated when changes are required, without the need to interrupt a user’s experience through intrusive updates or negotiating app store approval.
More than a trend
Responsive design has quickly become an important part of many designer’s and agency’s workflow, and it’s ethos is starting to bloom beyond the technical definition outlined by Ethan Marcotte in 2010. It has led to many traditional design processes being reconsidered (with strategies such as Mobile First becoming more popular), with speed and performance again becoming one of the top considerations when developing for a multitude of devices that may have wildly differing connection speeds. Rather than simply being concerned with optimising for screen size, more detailed elements of a user’s context will soon be used to shape the experience they have, ensuring the most usable and optimised solution is delivered through their browser.
Like any design or technology choice, users and business cases need to be considered carefully before deciding a strategy for development: responsive web design isn’t the answer for everyone. Although multiple app development can be costly, responsive web design done properly usually requires additional planning, research, and design. Of course, there are occasions when web technologies alone cannot deliver the solution required, such as when direct access to restricted hardware (such as camera, accelerometer, or sensors) is needed.
Some publishers prefer the direct marketing opportunities presented by the marketplace ecosystem, and find designing to the restrictions of individual platforms a more efficient workflow. The monetisation model for app stores are also familiar to users, and cut down on the steps required for purchase once payment details have been stored. Until faster, more universal, and more integrated payment gateways are popular in the browser, app store ecosystems do offer a more seamless method of commerce.
However, if your aim is to simply translate an existing website experience for mobile, responsive web design is a great solution for delivering an optimised experience for as many users as possible, using web technologies which will stand the test of time.
I hope to follow this post up with some more detail around the methods and technologies used to deliver responsive web design, including case studies of how we delivered areas of Infrastructure Journal.
On Saturday 25th February 2012 I attended the Design Push event focusing on an emerging web technology called Web Intents (see my previous post). Working with an invited group of designers and technologists, we took on the challenge of creating a set of useful UX deliverables that could progress and improve the implementation of this new functionality.
The day began with talks from industry leaders Paul Kinlan (Google), Jim Lane (AddThis/Clearspring), Shane Caraveo (Mozilla/W3C) and Glenn Jones (Madgex) who have all been working on using Web Intents in a variety of different ways. They set the scene and demonstrated the complexity and range of issues that they have encountered so far.
We then broke out into three groups which explored some of the different user experience (UX) issues and ended the day with a presentation from each team. Our material was later uploaded to the Design Push Wiki for future reference, in order to help those continuing to work on Web Intents. The outputs from the event included:
Notes on language and labels
Chrome and page interfaces
Thoughts on promoting Web Intents
Web Intents look to be a powerful set of tools to help make the web more useful and usable. The most prominent Web Intent and the one with the most obvious potential is Share. However the implementation of Share is also one of the more complex UX and user interface (UI) challenges. It already has some widely-adopted commercial cousins, most notably the service offered by AddThis. In his presentation, Jim Lane talked us through some of the solutions that his team at AddThis had developed and many of these ideas were later echoed in the team discussions. Creating a universal Share Intent could be a commercial challenge to these sharing services and might be a hard sell to companies already using them.
Personally I think it may be better to focus on the Web Intents that could be most rapidly deployed and have less existing competitors. In particular I’m thinking of Intents that could be really useful when combined with technologies that are neither well understood or much used by the average person. For example by combining the Web Intents Subscribe with RSS, or View/Save with Micro-formats (such as event, contact or product details) a greatly improved and more consistent user experience could result. It could also lead to the wider take-up of these under-used technologies.
How long it takes for Web Intents to be defined, standardised and implemented across browsers will determine whether they become a success or not. AddThis have 1.2 billion unique monthly users and 2.9 billion daily views, and they already provide other services such as Print (surprising popular in France) and Email. If they decided to extend into the territory of other Intents, they are likely to be able to do so fairly quickly. The web community, browser manufacturers and W3C better not drag their feet for too long, or some of the commercial operators may claim the ground first.
Next Saturday (25th February 2012), the inaugural Design Push will be held at the Cogapp offices in Brighton, UK. The intention of the event is to add some design thinking to how emerging web technologies will work and look. In the race to launch new features, the work on the user experience can occasionally be under-developed with some technologies presenting particular challenges.
The Design Push events will focus on a range of technologies, with an invited group of designers and technologists taking on these challenges. The aim is to create a set of useful deliverables on each issue, including recommendations, taskflows, design patterns and domain vocabularies. The idea is to assist those involved with particular technologies, by helping to drive forward the user experience design work.
I’ll be participating at the first Design Push, where we will examine the use of Web Intents. Originally devised for use on Android mobile phones, they determine what action a user intends to perform with an object and how to carry it out. The object/action pairing could be, for example, editing a photo or a sharing a blog. With the huge number of services that may offer these actions, creating a simple and effective process for the user is not straight-forward.
I’m excited to be involved with this event and I would like to thank the organisers, web and UX luminaries Glenn Jones, Danny Hope and Andy Dennis, for inviting me. I look forward to working with an impressive array of experts (including people from Chrome, Mozilla, W3C and Add This) to try and help make the web a little bit more useful, usable and enjoyable.
If you are interested in finding out more about Makemedia’s work and how great user experience in your digital offerings will benefit your company then please do get in touch with Makemedia here.
Video copyright Infrastructure Journal +44 (0) 20 7728 5407
Makemedia are proud to have recently launched the new version of www.ijonline.com for Emap’s Infrastructure Journal brand. The website allows subscribers to access real-time data on global activity in the infrastructure sector, meaning they can make informed investment decisions. Makemedia undertook a massive data migration project to move 66,000 articles, 10,000 projects and transactions and 11,000 company listings over to the new website.
This is a responsively designed site that can be used across all mobile and tablet devices without the need for an app. Data graphs were designed to interpret data in an accessible way and are updated on a real-time basis – meaning IJ Online retains its place as a market leader and its reputation for innovation and delivering value for subscribers.
TESTIMONIAL: Rhod Joyce, Head of Product Development at Emap Insight
“As the market leader in the provision of qualified news, data and insight to the infrastructure finance market, IJ identified Makemedia as the delivery partner that would quickly understand our market and the specific requirements and deliver via an agile methodology.
Working in partnership with Makemedia, we successfully delivered the product that met our clients’ needs, within the timeframe and budget agreed. The agile approach to the project allowed IJ to continually adjust, modify, confirm and develop the new service section by section. The smooth running of the project was further boosted by being able to integrate IJ’s development team within the MakeMedia team at their offices, ensuring a continual connection and sharing of knowledge on a daily basis.
Due to the success of the project, IJ has contracted MakeMedia for the delivery of its ongoing Expected Product Development (EPD) and New Product Development (NPD) needs.”
To find out more about how IJ Online serves its global audience watch the video above or check out the IJ Online case study here. If you would like to find out about how Makemedia products, such as classifieds, directories and data platforms, could benefit your company please get in touch with Ric Hall on Ric.email@example.com or by calling 0845 017 8777.