On Saturday 8th December Makemedia’s in-house UX Designer Patrick Sansom ran the event UX Camp Brighton. He summarises how the day went.
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
Brand-Driven Design
Diary Studies
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 info@makemedia.com.
You might have missed the recent IGNITION: Future of Digital Conference in New York but slides from the BI Intelligence team (a new research and analysis service focused on mobile computing and the internet) are online here.
However, if you don’t have time to read through the whole slide deck, we’ve picked out our top 10 slides of interest, especially for publishers.
Until we get our Google specs…
Positive for publishers selling online ad space.
Bad news for any publishers who lack a strong digital strategy.
We can expect a lot more growth in mobile markets.
Mobile users are shopping online.
Trust in mobile devices is growing.
A massive opportunity for publishers to create an online community around content.
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.
If you want to check out some of our responsively designed websites and other projects see Makemedia’s case studies here.
A better portable experience
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.
Potential disadvantages
Device Specific
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.
Maintainability
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.
Shelf life
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.
Revenue
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.
An alternative
Old habits
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.
Unsurprisingly, the use of this technology has become enormously popular, with organisations like Starbucks and The Boston Globe redesigning responsively, and others (like the BBC) experimenting with employing responsive web design techniques.
See it in action
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
Device agnostic
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.
Ready to use
The good news is that support for the technology part of designing responsive websites is very good, with most modern browsers – which includes the majority of popular smartphones and tablets – able to take advantage of the techniques required to design responsively. Older browsers can experience a fixed width design, so don’t lose out on the same content.
One size doesn’t fit all
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.
In the meantime, take a look at some of the other responsive website’s we have launched recently (Martin Searle Solicitors, BRS Global), or get in touch if you want to know how we could do the same for your organisation.
Brighton really is a hub for digital innovation – you only have to look at all the events happening during the Brighton Digital Festival to see the passion that people have for the industry here.
This week I went to BrightonSEO, a conference often considered controversial, and the Brighton Digital Marketing Festival, organised by our pals at Pure360. A big “thank you” and kudos to the organisers and all the speakers at these events for the opportunity to discuss ideas. Here are some of the main points of importance I’ve picked up at these events.
1, It’s all about mobile.
You are missing out if you don’t have something out there for mobile users (which includes tablets, not just phones). Think about this:
Is your website user-friendly for mobile users? Responsive design means your website works for desktop, phone and tablet users.
If you are selling online having an M-commerce offering will help you to sell more.
Are you emailing customers? You need to consider how people will be viewing email on mobile devices in terms of design and how you are encouraging people to engage with you.
Just make a really good website – consider design and user experience and don’t overwhelm it with ads.
Put some really good content in there, Panda knows the difference (see point 3 for tips here).
Socialise! See points 4 and 5.
3, Using awesome apps and content will bring people to your site (and their friends)
Creating an interesting feature on your website will get it shared. Dave Peiris of SharkSEO looked at sites such as Just Buy This One (find the best product under £x) and Uptime Robot (monitors your websites) as examples of features that visitors will find useful and share with others.
I’ve been asked by a client, “why should I have a social media presence, what is the ROI?” Here are just some of the beneficial points of having a good strategy in place:
It will boost you up search listings – Panda rewards social media presence.
Dialogue! Conversation with your customers will help you understand what they want. Also, bear in mind that you are not the only voice of your brand these days.
RISK – if you are not conversing with customers and your competitors are, who do you think will be more successful in the long term?
My top tip is to research your audience and what social media they use, then put your energy into those channels – there’s no point being all over Facebook when all your clients are on LinkedIn.
5, Get ready for Google+
Google+ gained over 20m users in the first month, it’s the new big thing for social media. Expect business accounts to be available soon but for now get on there with a personal account and find out what it’s about. You can add me here.
Think about all the other brands Google owns (like YouTube) and you’ll realise the impact that Google+ will be capable of.
You can call myself, Rob or Nick to chat about how Makemedia can help you to create an engaging digital feature, a Panda-proof website or mobile-ise your website on 0845 017 8777.
The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (
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.