It’s been a few days since Friday’s Responsive Day Out, enough time for my thoughts to marinate while reflecting on a jam-packed day at Brighton’s Corn Exchange.
The organiserwarned in advanced – and repeated in the day’s opening introductions – that this gathering would be a rather lo-fi affair compared to Clearleft‘s regular dConstruct and Ampersand conferences. Considering the modest £50 ticket price, it would have been hard to quibble had things felt less slick than usual, but in truth there was little to separate it from a more high profile event. Lanyards were replaced with stickers, and there was no free wifi (always ropey at tech conferences anyway), but registration was fast, the excellent coffee was still free, and the on-stage production quality felt up to scratch.
Any caveats were perhaps intended to manage expectations about the quality of the talks considering speakers would be donating their time and effort for free and at short notice, with the event coming together in a relatively short space of time. As Jeremy Keith notes in his own assessment of the day, there was no need for concern – all the speakers had clearly put a lot of effort into their presentations.
The format for the day was quick-fire twenty minute presentations followed by chats with the speakers on stage, and finishing with a few questions from the audience before each break. With the day focused around web design’s hottest topic, there was diversity in the audience’s knowledge, experience, and scepticism towards the subject. Some talk content would inevitably be familiar, but a high number of shorter sessions meant those already au fait with a presenter’s theme only had a short wait for the next speaker.
Sarah Parmenter‘s opening talk set the tone for the day, discussing how our fixed-width misdemeanors gave us comfort as we attempted to control an innately flexible medium, so it’s okay to be a bit freaked out by the new challenges of designing for a (naturally) fluid canvas. To make the transition less painful, we need to pull together as we tackle the numerous challenges presented by this ongoing sea change in our industry.
Sarah admitted she is a latecomer to the practical application of RWD. Her business previously focused around native development, and as such, many in the audience were likely to be familiar with the workflow she now advocates at You Know Who. The important takeaway from Sarah’s talk wasn’t the steps her team go through to deliver responsive websites (who knows what the de rigueur workflow will be in six months), but that it’s okay to admit we don’t have all the answers yet. We’ll get there quicker by sharing our mistakes, sharing our experiments, and sharing the evidence of our successes – an important message reiterated by several speakers throughout that day.
While Sarah revisited workflow, David Bushell explored the fiddly field of responsive navigation. A number of new navigation patterns have developed over the last few years, and David shared the popular options while demonstrating how he improved the layout of menus on his own projects at various breakpoints.
I particularly like David’s use of off-canvas techniques (such as the example seen on his personal site) and the suggestion that we revisit the concept of a site index or page of contents for online wayfinding. David questioned the need for traditional navigation at all, encouraging us to explore alternative ways of finding our way around a website. He also advocates anyone struggling to sell RWD to attempt some undercover development; sneaking flexible goodness and media queries into a project under the radar. A great tactic for experimenting with new techniques, very often it’s easier to ask for forgiveness rather than permission when taking your first responsive steps.
Following the first break of the day we were treated to a couple of practical talks from Clearleft’s Richard Rutter and Josh Emerson. Richard shared some useful tips for approaching the performance of webfonts (particularly on smaller screens), with Josh following up on how the technology can be used to render resolution independent icons. I particularly enjoyed Josh’s talk as the subject area was something near the top of my to-do list, too often falling back on CSS sprites when I knew there were better techniques I needed to explore. Josh succeeded in demystified the creation and use of asset fonts, as well as being one of the most relaxed and endearing speakers on the bill. I was shocked to learn it was his first ever conference talk, so look forward to seeing him on future lineups.
The pre-lunch session ended with Elliot Jay Stocks challenging some of the criticisms levied at RWD. Like many of us, he’s found himself fighting the corner of flexible layouts with clients and peers alike. I feel quite lucky that the majority of clients I’ve worked with have embraced the new techniques, albeit questioning why we didn’t do it this way all along. Others have needed convincing, feeling uncomfortable moving away from the type of deliverables-based workflow they had become accustomed to. I’ll have the audio from Elliot’s talk bookmarked ready for the next time I need to put a sceptic’s mind at ease.
The web beyond webkit
Anna Debenham kicked off post-lunch proceedings with an excellent assessment of the current console browser landscape. A real eye-opener, not only did it highlight what a powerful technique we’re able to employ to ensure console users are not overlooked, but that we take for granted the common methods of input online.
Console browsers bring with them a host of quirks, as do the often cumbersome controllers used to navigate largely woeful on-screen keyboards. She has put considerable effort into documenting console browser specifications for developers, publishing an expansive online resource for those eager to understand how to design for these devices.
Fighting the flab, and emerging standards
I was hoping the subject of performance would pop up in a few of the day’s talks. Although not exclusively an RWD concern, website speed has been brought into sharp focus again as bandwidth considerations head back near the top of a web developers list of concerns. Andy Hume tackled the subject using examples from his ongoing work at The Guardian, sharing a few quick wins as well as how he measures whether browsers cut the mustard enough to be served particular enhancements (also explored earlier in the day by the BBC’s Tom Maslen).
Like Josh’s talk, Bruce Lawson‘s presentation on some upcoming web standards was a welcome introduction to a number of technologies I was eager to explore. Bruce has the enviable knack of being able to explain front-end technologies with clarity and humour, putting his audience at ease with potentially daunting additions to our growing set of standards. At the 2010 Future of Web Design conference I watched Bruce live-code a version of his own blog’s homepage using the latest HTML5 semantic elements, and was immediately given the confidence to embrace this new standard. Three years on, and he demonstrated how flexbox could become a useful competitor to the media query in our responsive development toolkit.
Chords, control, and the web aesthetic
The final session started with the most abstract presentation of the day, Owen Gregory‘s facinating examination of how ratios calculated from the structure of musical chords can be seen in common device screen sizes, and used as a meter for design on the web. I remember reading Owen’s 24 Ways article on the subject in 2011, and can admit that most of the concept went over my head at the time. It was a great to hear Owen expand on the theme at Responsive Day Out, in what was certainly the most dConstruct-like talk of the day. I’d fail to do it justice here, so luckily the audio is available on Huffduffer along with the rest of the day’s talks.
Following Owen was Paul Lloyd, another member of the Clearleft team on the bill who drew parallels between the challenges we face on the web with the designers of early on-screen graphics and animation for television. Restricted by their technology, TV designers of the 60′s and 70′s were charged with creating engaging and memorable visuals for a format hamstrung by low resolution, a limited palette, and variations in equipment capabilities. By embracing the format’s restrictions, an aesthetic emerged which was uniquely suitable for the characteristics of the canvas, as seen in some of the examples Paul collated for his talk.
Echoing the message from his A List Apart article, Paul argues that we should develop visuals which are sympathetic to our medium in the same vein as the early pioneers of television graphics. Building on some of Andy Hume’s topics from earlier in the day, Paul questioned the need (or suitability) of photographic, non-content imagery online, asserting that the bitmapped nature of these elements is at odds with the resolution independence we can achieve with a web dominated by type. When we must use photography (particularly likenesses of Alan Partridge) optimisation is paramount, and future formats have the potential to finally deliver the responsive images solutions we so desperately desire.
Clarifiying the New Canon
The day’s final speaker was Mark Boulton, who clarified misunderstandings about his New Canon and Content-Out approaches to responsive web design. Having seen Mark discuss the subject at last year’s Reasons to be Appy conference, it was good to hear his evolving thoughts on the subject.
He raised a particularly interesting point in relation to styleguides, one of the design assets I’ve been using a lot more over the last couple of years. A tool mentioned in several workflow discussions throughout the day, Mark aired the concern that by designing styleguides at an early stage in the RWD workflow, we run the risk of abstracting our designs too quickly, increasing the risk of disjointed proximity and contrast between elements on screen. It’s a valid concern, and one I’ve tried to mitigate while adjusting my own design process, and hope to write-up some thoughts on soon.
Mark brought proceeding to an end by reiterating Sarah’s message from the morning; embracing RWD can be painful (even for designers of Mark’s ilk) but we need to go through the pain barrier to start producing our best work.
Common themes from the day
Tools: we’re forming a more balanced outlook towards graphic editors after some initial backlash over their suitability in RWD, and they are still a valid way of experimenting with design direction along with the browser.
Dinosaurs will die: we need to adapt quickly, and expect to go through a pain barrier while embracing the inherent lack of control when working with a fluid medium. Don’t get left behind.
Question conventions: processes and tools are under the microscope, why not many of the other conventions in layout and navigation we’ve become familiar with?
Performance: ditch the bloat. Everything old is new again, including the need to optimise heavily for limited bandwidth. Better loading times don’t just benefit those on mobile network connections, and page speed is intrinsic to a positive user experience.
Device and input diversity: our medium extends beyond the desktop, tablet, or smartphone. Our interaction with the web is broader than click or tap, and consoles are just another part of a landscape which will continue to grow.
Sharing: we can all learn more by exploring our successes, failures, and experiments in the open. Consider publishing your ideas beyond 140 characters more regularly, or volunteer to speak about your experiences at events; these are both things I personally aim to do more of this year.
It’s been a busy start to the year, with a highlight in January being something I was keen to do more of in 2013: public speaking.
Over Christmas I was asked by David from FreshEgg to give a talk about responsive web design at one of their monthly events in Brighton. I had planned to share the fundamentals of RWD – technical considerations, emerging trends, and examples in the wild – but considering the widespread availability of great resources on the subject’s foundations (and numerous talks), I opted to look beyond screen size to the tricky subject of context. The audience would largely consist of non-technical experts in digital marketing, so I wanted the talk to focus on how RWD techniques could be applied to the type of interaction the attendees were likely to be designing in the future.
The ‘reactive’ part of the title refers to the term coined by Dan Donald in his recentwriting around the subject; I’m not sure this label is applicable (or useful) in the long-term, but for now it’s a helpful way of distinguishing the use of contextual information from the type of information currently harnessed to apply RWD techniques.
I really enjoyed the evening, and shared some interesting discussions after my talk with some of the forty or so people who had packed out the downstairs area of The Globe. It was refreshing to discuss the subject of RWD beyond my peers in design and front-end development, and I really hope to broaden the type events I attend locally this year.
There’s a nice writeup of the evening on the event website, and If you’d like to check out the slides they’re available to view or download from Speakerdeck. The narrative of the talk may be a bit tricky to follow without my commentary, but if I get the opportunity to deliver the talk again I’ll try my best to record it in some way.
Having impatiently awaited a local showing since last summer, in January I finally got the opportunity to catch the documentary ‘Jiro Dream of Sushi‘ at Dukes at Komedia in Brighton.
The film traces the never-ending path to culinary perfection of Jiro Ono, a triple Michelin-starred sushi shokunin who – even at the age of 85 – still possesses the skills and enthusiasm for his craft to draw pilgrims from across the globe to his unassuming restaurant in a Ginza subway station.
I was especially intrigued by the weight of glowing reviews from fellowdesigners; many have drawn inspiration from Ono-san’s lifelong relationship with his profession. In truth, Jiro’s quest for excellence could resonate with anyone committed to a job they love.
It would be easy to dismiss any similarities with designing for the web based on the rapid developments in our industry compared to the world of sushi. In reality though, Jiro has dealt with enormous changes in seafood availability and quality, discovered innovative techniques to enhance flavour, and imagined wholly original combinations of rice and fish. Seven decades on, he continues to iterate upon his creations and is candid in his admission that he will never be fully satisfied with his work.
The film’s food photography is stunning, with the mouthwatering contrast between tuna and sushi-meshi captured in glorious macro shots from across the serving bar. The level of consideration, preparation and care required to deliver such wonderfully simple dishes is overwhelming. From sourcing the finest quality fish to the precise preparation of ingredients, each journey to plate is the result painstaking attention to detail.
As with design, very often the simplest output demands the highest level of perspiration.
Architects ensure their work will comply with industry building standards, and understand the characteristics of the materials used to bring buildings to life; their expense, strength, and environmental impact. They design using glass, steel or brick, not with it – It’s clearly not practical to experiment with these materials on the same scale as the finished work during an architect’s design stage, but given the chance to walk around, stand inside, or take the elevator to the top floor of their imaginings, would they? Would an automotive designer skip the clay modelling, focus groups, and lengthy prototype manufacture to see their work in motion at the earliest opportunity? They don’t have this option, but given the chance I believe they’d step through the glass doors, take the wheel, and experience their creations as soon as possible.
We already have this opportunity. Whether it’s building rough HTML/CSS prototypes, translating visual style-guides into front-end pattern libraries, designing fully in the browser, or passing polished comps to a front-end developer, as designers for the web we are in the enviable position of being able to bring ideas – rough, polished, or developing – to their end medium in an incredibly short space of time.
Having experimented with redesigning the majority of my recent portfolio website using just code, I’m still (for now at least) most efficient designing with a browser, not solely in it. However, two years of designing responsive websites have seen the editor/browser bias change as the practice of designing responsively becomes more familiar. Experimentation with process and practice are leading to welcome evaluations of the best way to deliver device agnostic experiences with RWD.
Regardless of the stage you (or a developer) take your design to the browser, having the option to fast-track an idea to it’s shippable medium is a unique facet of working with the web. The ease with which we can create, adapt, experiment, share, gather feedback, and update our work in it’s delivered format are some of the most attractive aspects of working in our industry.
It’s why I’m a designer for the web, and not an architect.
As part of the ‘How we Built’ section of .NET, the interview covers all aspects of the redesign including project planning, challenges, processes we employed, and the new visual design direction. As a large-scale data driven service, the redesign was a particularly challenging project to deliver responsively, and the article covers in detail some of the solutions we employed.
I’ve also written a tutorial which appears as part of the same issue, sharing the technique used to responsively deliver the thousands of data tables seen throughout IJ Online. Showing how we employed Chris Coyier‘s clever CSS trick for restructuring tables for narrow screen sizes, the tutorial shows step-by-step how this crucial – yet simple – HTML and CSS made a key part of the website usable on small-screen mobile devices.
The ‘How We Built’ interview and my ‘Responsive Data Tables’ tutorial can be found on pages 118 – 120 of issue 228 (June 2012).
Just like Audi and Peugeot at Circuit de la Sarthe, Makemedia took two teams to race, complete with F1 pun-based names. ‘Team Briatore‘ included our strongest drivers from previous karting outings, with ‘The Bootleg Brundles‘ constituting our b-team, including yours truly as forth-stint driver.
With it’s wide track and hairpin bends, the Worthing circuit is perfect for this type of event, allowing for safer overtaking than the more technical TeamSport circuit in nearby Crawley. Even so, there were plenty of black flags, the occassional Vettel-style jesticulation, and a handful of drive-through penalties for those swapping paint on track.
After ninety minutes of tight racing, Makemedia’s a-team emerged triumphant, with Ocasta Studio and Clearleft taking second and third places respectively.
The Ocasta team were shooting footage of the action much of the evening, and put together a short highlights clip which is worth a watch.
When the Kindle first launched in 2007 I couldn’t imagine wanting to own one. Along with other e-reader detractors, I couldn’t foresee myself replacing the physical sensation of the turned page with, well, anything. Even less convincing was the appeal of storing thousands of books on a single device when I was rarely found switching between texts, usually giving them full attention from cover to cover before taking up a spot on my bookshelf.
However, like my attitude toward the ownership of music, my feelings about ownership of the written word have changed.
I don’t print photos, they live on my Macbook or Flickr.
The same applies to how I consume books, magazines, and journalism.
Thanks to the likes of Twitter and Klektd I’m also exposed to a more diverse range of topics online. I rarely read what I’ve discovered immediately though, instead I ‘favourite’ potentially interesting content with the best intentions.
Very often articles are bookmarked in my lunchbreak and revisited outside of office hours, usually on my iPhone or Macbook. It’s the latter that I find the more frustrating way of reading; sitting on the sofa or at my desk staring into that familiar horizon of tabs in Safari feels unhealthy (since I already spend a minimum of eight hours each day focused on this view) and antisocial. And of course, the potential distraction of all the information in the world is only a new browser tab away.
Like most of us who now absorb the majority of our written content online, a relaxing read through the browser is often a challenge. Mentally battling with questionable layout, poor typographic choices, or extraneous visual clutter around the content I’m trying to focus can be a strain on my eyes and brain.
This isn’t a new frustration. Although things are changing for the better thanks to improved web typography, mobile first/content-out thinking and responsive design, the inevitable wait for techniques and methodology to become mainstream, marketing agendas, and the publishing industry’s uncomfortable move away from antiquated delivery models will no doubt create friction in the short-to-medium term.
So I got one that doesn’t glow – I’ve bought a Kindle.
First impressions after unwrapping the Kindle were of refreshing understatement. I love the calm look of it’s greyscale finish and choice of matte materials, feeling just the right size and weight to hold comfortably, and with the next/previous paging buttons falling neatly to either hand.
There are no glowing buttons, no friendly noises on startup; this is a passive device, and it successfully fulfils the aim outlined in Amazon’s welcome letter installed after setup, that the Kindle should “disappear in your hands – to get out of the way – so you can enjoy your reading”.
But the really amazing physical part is the e-ink screen. It’s like an optical illusion, especially when viewed from the type of angles backlit displays are unreadable. It genuinely gives the impression of ink on quality paper, further allowing the user to forget they’re reading on an electronic device. Switching it on for the first time also gave me a warm glow of nostalgia; it’s appearance reminding me of my very first design tool, the Etch-a Sketch!
Although by far it’s biggest selling point, the screen seems to need the most explanation when sharing my New Favourite Thing with friends. It’s already covered in fingerprints, everyone I’ve shown assuming their mental model that ‘mobile screen = touch’ fits here too (there is a touchscreen version available in the US, but like the Kindle Fire, it doesn’t seem it will hit UK shores any time soon). The lack of backlight also puzzles some as much as the absence of other features. But to criticise either is to miss the point – and allure – of something so wonderfully focused on doing one thing really well.
Whereas using the physical device is a pleasure, managing the Kindle through the Amazon website is a taxing affair. It’s too easy a target to pick apart here, but it can’t be long before Amazon realise the Kindle needs a dedicated website which doesn’t adopt so many of it’s parent site’s foibles.
I’ve been using the excellent ‘Send to Kindle‘ feature in Readability to export articles from the web, with them ready for me to enjoy in glorious e-ink within a few minutes. Observing my own behaviour while collecting articles to read has been disconcerting; I’ve paid only fleeting attention to the visual design put into the pages encapsulating the content I’m after. This may be the novelty of testing my new toy, but it’s sure to become a more regular pattern in my behaviour.
Bypassing any ‘design’ to liberate just the content I want (on a device which affords no real method of getting back any of the context the designer intended) has brought to focus the powerful changes in behaviour many have been warning; users can – and will – work around what you serve them to get to what they really want, and there’s little publishers or designers can do about it.
I’ll be keeping an eye on how my own browsing and reading habits change over the next few months, but I’m already finding myself filling those waiting moments in my day with a read from my Kindle’s increasingly diverse article list rather than a cursery refresh of Twitter or BBC news on my iPhone.
Last Saturday was the hottest October day on record. Instead of lighting the barbecue on this unusually balmy Autumn day, I opted to spend it in a design studio with fifty other geeks to debate, sketch, and share knowledge across the many facets of user experience design; it was well worth the sunny sacrifice!
UX Camp Brighton was the closing event of the Brighton Digital Festival, and the first BarCamp focused specifically around the subject of user experience design to have been held in the city. Kindly hosted by the friendly folk at Cogapp, the schedule would see sessions ranging from the history of camera UI to debate around the meaning (and usefulness) of the ‘UX designer’ job title.
Get in early to grab a free ticket (this inaugural event sold out in under thirty minutes).
Think of a topic for presentation or discussion.
Turn up on the day and jot a description of your session on a Post-It.
Add your session name to the time/room grid (there are typically 5-8 rooms available per time slot).
Attend sessions that catch your eye outside of your presentation slot; contribute, share and discuss when invited to.
Present your own session at the time on the grid, making sure not to overrun.
I’d never been to a BarCamp before. Although often tempted, questioning whether I’d have something original enough to present had always held me back from taking part. However, with some encouragement from a colleague who was co-organising the event that my idea sounded suitable enough, I decided to bite the bullet and set to work on some slides.
It was great to see such a diverse range of talks on the board after the scramble for slots; choosing is the only tricky bit with the BarCamp format. With five sessions running concurrently throughout the day, attendees are encouraged to spread themselves around, perhaps taking a punt on something they wouldn’t typically select.
Alex and Andy’s talks were the bookends of my day, so in-between sessions I took a quick glance at the grid to choose which room to hop to next. I managed to catch a couple of open discussions, including one focused on the continuing debate around the definition of UX itself, hosted by Cennydd Bowles. It proved just as tricky to conclude as it has on Twitter for several months, but Cennydd’s belief in the value of Digital Product Designer on our next batch of business cards feels like a comfortable and confident step in the right direction.
My own slot arrived just before lunch. For my first BarCamp I decided to combine two areas of interest I would feel comfortable I could speak convincingly about – interaction design and the automobile industry; I’m a bona fide car geek. My talk discussed some of what the automobile industry does well in the area of user experience (service design, engineer/designer relationships), picked off a few easy targets as examples of what it does badly (dangerous dashboard design, iDrive), and ended by discussing some of the opportunities for UX designers in an industry which is changing rapidly.
I really enjoyed the experience, particularly the brief Q&A which followed in which several other examples of successes in automotive UX were explored. I hope to write up some more thoughts around the subject of my talk at some point, but If you want to take a look at what I discussed on the day my slides are available on Speakerdeck.
From a practical point of view, one of the standout talks for me was by Rob Pearson, who presented some fantastic techniques for quantifying subjectivity. As a designer who spends the majority of my time focused around the visual end of the spectrum, I know this can be a particularly tricky area. The methods Robert presented to place some metric around the emotional response to visual design are simple. The client completes a questionnaire made up of opposing pairs on a scale (e.g. contemporary vs traditional), and by choosing values either side of the ‘neutral’ middle for existing and proposed designs, a visualisation of this data can be plotted against the client’s ‘ideal’ value to measure the success of our work. UX designers are in the business of providing evidence to support decisions, and this simple solution brings just that to an area of design where taste and subjectivity can too often make or break success. I highly recommended checking out Rob’s slides from his talk.
My first BarCamp experience was an entirely positive one. Not only was the friendly and inclusive atmosphere great for meeting new people, it also fostered a comfortable environment for discussion and debate, and I left with a head full of ideas and techniques I’m eager to share.
Television advertising seems to have lost it’s way a little in recent years, jingles or gimmicks appearing to outweigh the more thoughtful or engaging offerings which had made the ad-break genuinely watchable for a while. Premium airlines have struggled to compete with the no-frills brands in a recession, often having to major on price rather than their real trump card; a quality experience.
Another element distinctly lacking has been a sense of personality. BA has always benefitted from a trustworthy stiff upper lip which – for better or worse – has always made it feel distinctly of this Isle. Virgin (another home-grown brand) on the other hand has easy seemed the cooler way to cross the pond, with a maverick sense of fun and sexiness, almost the antithesis of it’s flag carrier rival.
Like BA, Air France is it’s nations national airline. I can’t recall much Air France advertising on British TV in recent years, but the marketing I have seen (mainly in print) plays heavily on the French reputation for style and – reassuringly expensive – design.
Like the cliche for buses though, all three European aviation superbrands appear to have upped the ante at once, releasing strikingly unique offering which not only entertain, but communicate so unashamedly the character we associate with each.
British Airways’ ‘To Fly. To Serve‘ fits an aviation history lesson into ninety seconds, ending with a flypast from undoubtedly the most evocative passenger aircraft of all time; Concorde.
Finally, Air France take by far the most subtle and simple approach with the beautiful ‘L’envol’ (‘The Flight’) by French choreographer Angelin Preljocaj. Without question the most visually striking of the three, it’s single shot ballet sequence ends with the slogan “making the sky the best place on earth” - no special effects required.
Let’s hope these fantastic campaigns are the sign of more thoughtful things to come.
Recounting a recent experience viewing websites built over ten years ago (using HTML and CSS) without the need to update code or hunt for a long retired device, Andy revealed an original Gameboy and his favourite game – Mortal Kombat II – to punctuate the point. The native code and physical cartridges around which the games were built are incompatible with anything other than the console they were developed for. Similarly, applications built specifically for iOS devices today are incompatible with Android or Windows Phone 7 platforms; the likes of iPhone and iPad are at risk of becoming the next generation of Gameboy, collecting dust as they struggle in the compatibility stakes.
Although occasionally distracted by the 8-bit bouts of Mortal Kombat projected behind Andy during his talk, It was easy to share his sentiment that we are in danger of returning to the ‘best viewing in’ footnotes of our online past. Really, these are lessons we should all have learned from by now.
Style over semantics
Hoping to counter the device agnostic/web standards love-in was Sarah Parmenter, a user interface designer specialising in iOS development. Her argument in favour of developing native applications is dominated by the belief that current web technologies, although able to deliver high quality graphics and animations with CSS alone, cannot come close to replicating the instant feedback, smooth transitions and visual gloss of native controls for iPhone or iPad.
Comparing examples of an ecommerce tool she is producing in partnership with Andy Clarke, Sarah demonstrated how she was able to replicate Andy’s web-based layout with ease, while adding touches of interaction and pixel perfection not so rapidly achievable with HTML and CSS. Although the talk too often focused on Sarah and Andy’s negative personal experiences while working with the client involved in the project, Sarah put forward a thoughtful case for device specific development, citing the more focused design philosophy she can adopt because of the limitations of a set canvas.
This argument is given a little more gravity when we consider the difference in experience using a mobile touch screen device versus a desktop with monitor and mouse. Whereas links, buttons and content – even at a very narrow browser size – can share the same visual scale of potentially larger views on a desktop monitor, iPhone demands larger hit areas and spacing to allow for reduced accuracy when using a finger for interaction. A decision needs to be made when we design for a narrow view-port using a technology such as media queries. Do we design narrow layouts specifically for mobile interaction? In doing so, do we degrade the desktop experience at the same dimensions by adopting a visual language familiar specifically to smartphone users? As with a much of our decision making when designing for the web, context – supported by research and evidence – is key.
Having come from a web-based background, Sarah clearly understands that there is a scale of relevance to consider when making the decision to develop using web or native tech which usually hinges upon the visual complexity of the experience. However, the argument that eye-candy should be the deciding factor is difficult to defend when reminded of Andy Clarke’s Ghetto analogy; no matter how attractive the experience, tools developed for a specific device have a use-by date from the moment of release. Like the bad old days when each shift in acceptable screen resolution meant iteratively widening websites was commonplace, so the release of newer devices with physically larger or higher resolution screens will mean revisiting and redesigning applications, while leaving users of older devices to languish.
The evening wrapped up with Aral Balkan arguing convincingly that while attempting to ape native applications using web technology, we sell our users short. Consumers have developed certain expectations from downloadable ‘Apps’, mainly surrounding gestures and performance that current web technologies cannot reliably recreate. However, this unnecessary expectation is possibly a by-product of our own long-term shortcomings as web designers and developers.
Until Aral’s talk I was still firmly fighting the web corner, unconvinced of the benefit native development has over the device agnostic use of modern web standards. However, after considering Aral’s talk and the on-stage debate which followed, it is possible that the conflict between web technology and native tools is driven by two distinct mindsets – the consumers distinction between a piece of software and a website, and our aged ‘mobile last’ development cycles.
During the debate, Andy Clarke argued that anything we consume in a browser is a website.
Amazon? A website.
Facebook? A website.
Gmail? A website. Or a web application?
Remy Sharp commented that although we could technically define anything viewed in the browser as website, in practice we see web-based productivity tools as web ‘apps’, and content driven experiences as websites. Perhaps this is where the expectation that web technology is capable of delivering software has been defined, during the shift from applications delivered on a DVD and installed on a single machine, to web-based computing referred to as web apps.
Software, or app?
Mobile users are choosing to undertake simple tasks through dedicated native applications because the web has been letting them down for so long. Only now are we starting to seriously consider the mobile user when developing experiences for the browser, but it’s too late. Instead of checking a website will scale for their device, the App Store beckons. The worrying popularity of apps which do little more than deliver familiar web-style interactions and content in a more usable way is of our own making.
The solution? Obvious though it seems, we need to act now to make our new online experiences mobile friendly from day one, avoiding the need for users to browse the App Store for a better solution. The only way to effectively deliver this is to design for small screen first, not from the desktop down – this is the mindset that has only hampered the web on mobile devices for so many years. As Andy Clarke echoed at the end of an enlightening evening, this shift in workflow requires a calibre of web designer we have yet to see, but desperately need. Responsive design encompasses more than retrospectively applying media queries to our full-fat desktop experience, it requires a fresh mindset and an uncomfortable leap outside of our comfort zone.
For most of us – including this designer – that uncomfortable and exciting shift needs to happen today, or we all risk becoming as out-of-date as Andy Clarke’s Gameboy.