Mobile

Responsive Day Out

.

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 organiser warned 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.

Winging it

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.

Rethinking navigation

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.

Getting practical

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.

One Day With a Kindle

.

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 buy CD’s, I stream through Spotify.

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.

Old habits

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.

However, tools like Instapaper and Readability mean a more relaxing format is available in the interim. I’m a big fan of these services, but have until now only enjoyed them through a variety of the glowing rectangles I spend too much time staring at.

So I got one that doesn’t glow – I’ve bought a Kindle.

Understatement

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.

Readability First

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.

This can only be a good thing.

Web or native? A quandary of our design

.

With it’s Street Fighter pseudonyms and team colour (QR-coded) cupcakes, Brighton’s first Geek Ninja Battle Night aimed to add a competitive edge to the lively mobile development debate, driven in recent month’s by the growing excitement around responsive design and the encouragement for a mentality shift towards a single, device agnostic web experience.

The impressive lineup – considering the modest ticket price – saw Andy Clarke and Remy Sharp ‘battle’ Sarah Parmenter and organiser Aral Balkan, fighting their corner in favor of web or native development technology respectively. Asked to choose my team upon entry to the venue, I opted to support team web, expecting to leave with my HTML, CSS and Javascript bias further bolstered by the end of the evening.

Gameboys and technology ghettos

First to present in favor of web technology for mobile development was Brighton’s biggest fan, Andy Clarke. Rather than echo his ongoing advocacy of the latest front-end technologies to build mobile suitable experiences for the web, Andy chose to focus on the legacy of technology ghettos we are at risk of creating through device specific development.

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.

Remy Sharp built upon this argument while countering the view that HTML/CSS/JS built apps cannot compete with the slick user experience available to those developing in, for example, Cocoa/Objective-C. Sharing some fascinating discoveries he made while looking under the hood of Google’s Gmail, Remy shared how some clever Javascript and (less clever) browser sniffing could deliver the best experience across all devices without compromising user experience. Can’t live without smooth scrolling or pinch/zoom? Remy demonstrated clever plug-ins that recreate the gestures of native applications using web technologies, techniques that will provide a even more convincing experience as future browser iterations take advantage of WebGL to boost performance.

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?

Although software has moved online, we still have applications on our desktop machines that are beyond the capabilities of HTML, CSS and Javascript, so why not the same acceptance with mobile? If Apple had chosen to refer to single-download, locally installed and offline-capable mobile applications as software rather than choosing a term commonly associated with productivity tools delivered in the browser, would we be able to more easily justify native development practice? Alternatively, when a simple mobile app is delivering content from the web and copying familiar interactions we undertake within a browser, the app is nothing more than a bookmark. Why would a user rather navigate the App Store, contend with regular (and intrusive) updates when the same experience is possible with a simple bookmark in Safari?

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.