Image showing Spot taking notes during Mobilism 2013.

Mobilism 2013: a conference wholly dedicated to mobile web design and development

24.05.13

Captain Spot attended the third edition of the Mobilism conference in Amsterdam/ Netherlands. The two-day event dedicated to mobile design and development offered interesting input on versatile topics.

The importance of mobile

It’s is no secret that mobile devices are becoming the entry point device for our daily activities. Mobilism is a two-day conference which revolves around mobile web design and development only. The third edition of Mobilism took place on the 16th and 17th of May in Amsterdam/ Netherlands. Once again, top speakers from the fields of mobile (web) design and development were invited and provided interesting insights into the mobile ecosystem.

Dave Shea - Mobile Web Design Anti-Pattern

Dave Shea, creator of the CSS Zen Garden gave the opening talk of the Mobilism conference. At the beginning of his presentation, Dave showed without mercy that although the terms mobile first and responsive design keep coming up again and again, neither responsive nor mobile is the default yet. An especially inept way to solve the problem is to shut the door for mobile users by surprising them with the option to download an App when they try to access the website on a mobile device. Such experiences will inevitably lead to dissatisfied users. However, there are several approaches to offer good, sensible mobile websites. Important key terms are continual device testing and the right understanding of mobile users: “Don’t design in the browser, decide in the browser.” Don’t make assumptions regarding mobile browsers. Also keep in mind that people are not navigating with precise mouse clicks but with their fingers – incidentally triggering unintended actions is inevitable! Furthermore, you ought to consider issues such as the page fold, image resolution, iconography, typography and so forth. Making your website responsive is certainly not done in a trice, yet stakeholders should know how user engagement directly correlates to revenue and that the investment in mobile is thus worth it.

Stephen Hay - The Revenge of The Web

Next up was Stephen Hay, who talked about the importance of leaving Photoshop and emphasising mock-ups instead. Just as print designers had to know how printing machines print the four colours, web designers must know HTML, CSS and JavaScript. We’re web designers, not Photoshop designers, right?! Web-based mock-ups give a better idea of the end result and iterative mock-up processes are more efficient than producing hundreds of comps. Design revisions, experimentation and playing around are important in the design process. However, always make sure that the client sees that this is not the final product – usually, everything will have to be re-coded, and things will change. Stephen explored the use of sketching and demonstrated the value of source code control, grids, preprocessors and some interesting page generators like Jekyll, Hyde or Dexy, which allow very quick prototyping without the need for a full-blown server back-end. The whole project process can be documented by making automated screen-shots using for example casperJS. With his talk Stephen proved that “web-based mock-ups are more than a pretty picture.”

Anna Debenham - Console Browsers

In the penultimate talk before lunch break, Anna Debenham surprised with statistics about people in the UK who access the web with unexpected devices such as Nintendo DS or Playstation3 – Supporting the landscape of browsers in consoles is quite a discipline of its own. With consoles, there is for instance the question of input devices: Next to keyboard, mouse and touch, we now have to consider several different joypads, motion sensing inputs like the Kinect or more exotic things such as the Wii Balance Board. A look at the following compilation of consoles shows how much variety there is regarding consoles alone. And that’s not the end of it – the variety of devices accessing the web will increase even further. Devices such as printers and cameras are all starting to have web browsers. Smart TVs and the convergence of the web with the television, which lead for instance to the Vimeo couch mode, constitute further challenges and opportunities in web design.

John Clevely - Scale and Adapt

Today, there is a huge amount of different devices accessing the web. Some of them can shine with performance and connectivity, yet there are also simple devices which have to be considered equally. This in mind, splitting the devices into “good” and “bad” devices is useful – Cut the mustard! While you can offer an enhanced experience for the former, you ought to make sure that you provide the full core experience for the latter. Responsive design forces you to think on a bigger scale and consider many aspects. Input method, connection, content structure – it all matters. Finally, don’t forget to test. Manual testing is still indispensable, yet there are parts of the process which can accompanied with tools like Cucumber. UI regression tests can be made for example by combining PhantomJS and ImageMagick. As for performance testing, John recommended tests with HTTP Archive HAR and mentioned the importance of caching and the value of the Varnish technology.

Remy Sharp - So you know jQuery, what next?

Nowadays, everyone knows and uses jQuery. But is it always necessary to do so? Given that jQuery is seven years old, it has been around for a really long time – at least on the Internet. It made DOM navigation easier and could help with Ajax. However, in the course of time, things have changed. Today, you want to make sure whether using jQuery is actually useful or even necessary: By reference to several practical examples, Remy showed that it sometimes makes more sense to go for a JS-only approach. It is reasonable to first think and decide when jQuery should be used and which parts of it. Remy developed the tool min.js, which doesn’t renounce jQuery entirely, but uses just some parts of it. His idea is not to reinvent the wheel, but to only use what it needed.

Cennydd Bowles - Context, Bloody Context

Cennydd Bowles continued with a presentation on context, showing that nowadays, we can no longer look at the web as an isolated instance – the web today is a canvas to our world with an increasing amount of context. Understanding multicontextuality has led to two stereotypes: the desktop and the mobile context. While we consider the former to be static, with a concentrated user, we associate the latter with momentariness and unfamiliar, moving surroundings. However, such predefinitions can be completely wrong – just think about all the devices which are considered “mobile”, and how different they are! In fact, context itself cannot be defined easily. It is multifaceted and constantly emergent. Cennydd breaks it down to seven components: device, environment, time, activity, individual, location and social. To obtain information on the context of your user, there is the data-implied and the researching approach. Data-implied means collecting sensory data from devices. These can inform about things like location, motion or temperature. Additionally to data-implied information, it is important to research the context of your users first-hand. Combine quantitative data from analytics and surveys with qualitative studies in the form of personal interviews or contextual enquiries. Doing digital fieldwork, for instance by investigating social media, is a further option. Research, testing and intuition can help you determine which context components are most important for your product. Find a core experience and see how it can be developed in different contexts, and don’t forget: Context isn’t static – evaluate your decisions and be flexible.

Max Firtmann - Breaking The Limits on Mobile: HTML5

Max Firtmann, the author of Programming the Mobile Web, talked about using hacks for mobile devices and explored why hacks can make sense – even if they are basically a minefield. Sometimes, mobile devices stand in the way of creating an optimal experience. We can draw back on hacks to find solutions to such mobile web problems, and thus deal for instance with the issues of full screen, high resolution canvas or numeric input fields, ultimately improving the mobile experience. Max also presented several useful testing tools such as Slowy app, which simulates real-life connection conditions, the bandwidth shaper NetLimiter or the web debugging proxy application Charles. Another valuable tip is the real device test site Keynote DeviceAnywhere. Know the limits of your device, and know how to stretch them!

Josh Clark - Beyond Mobile

The final talk of the first day was given by Josh Clark, who ventured to explore the future of mobile design and development. Apart from contemplating bold examples of existing experimental projects, Josh also dared taking a peek into the future. Starting with the topic of sensors, Josh showed the huge potential of mobile devices. Sensors hold an immense amount of personal information and provide data without any input needed. Just think about Augmented reality! Although it is often realised badly, there are also convincing examples, such as the game Skinvaders or the translation tool Word Lens. Furthermore, Josh looked at input methods. We have already gone beyond mere touch to speech and gestures. In the future, a combination of these two is not unlikely to emerge. When designing interfaces, we must start to consider such developments. A misleading thought is to think that all our devices will become smarter and smarter – we’d drown in the supply. Instead, the future lies in many dumb devices, which are controlled by a few smart ones. The whole ecosystem becomes crucial: device, software, operating system and API, all working together. The future holds ambiguous control, possibly migrating interfaces as well as passive interfaces which communicate and work without our active intervention. Let’s not work with many smart devices, but have dumb devices which do the work for us! Designing future-proof may be impossible, but we can at least design future friendly. A first step in this direction is to structure and describe our content and take care of our raw content. An application is a temporary container, content and services are lasting. Josh’s final point was the importance of the cloud – the cloud of social devices, which includes remote control, migrate control, passive interfaces, everything. The future is not about single interfaces and applications, but about going beyond the one element.

Derek Featherstone – Doing Responsive Right

Derek Featherstone opened the second day by talking about responsive design and accessibility. While responsive web design aims to simplify and optimise interfaces and thus optimise the user experience, it is wrong to assume that it automatically guarantees accessibility as well. In order to create an accessible responsive website, it is necessary to look at design and interaction patterns more thoroughly. Many mistakes can be made by missing little details, such as for instance the changes regarding keyboard interaction. Furthermore, Derek showed how design choices can affect screen readers and disturb visually impaired people. A good tip of his is to always test a website with a screen reader, as this can reveal hidden issues. It’s not enough to simply have a responsive website, make sure that everyone can benefit from the responsiveness!

Peter-Paul Koch - Developing for Touch

Peter-Paul Koch, known for his browser compatibility tables on Quirksmode.org talked about the meaning of developing for touch devices. The huge versatility of devices accessing the web has brought about new challenges. They all imply different input methods: mouse, keyboard, touch, but also voice and other methods such as movement. Interaction methods are sure to converge one day, but as it is not that day yet, we have to find the best solution for today. Credo number one is to stick with the click event. It’s not a mouse-only event: Clicking a button with a touch gesture is just as real – the event might be called „activate“. However, while it is easy to understand, the “activate” event has the disadvantage of being rather slow: As there are so many different options of touching a screen – scrolling, clicking, double tapping, zooming – the device, having to figure out what is meant, reacts with a short delay. With touch devices, there is also the option of combining two or more touches, such as for instance in the traditional pinch-zoom. However, Peter-Paul showed that they might not be too crucial just yet: So far, they are only supported by IE and Safari.

Mat Marquis - Responsible Responsive Images

Next up was Mat Marquis, founder of the Responsive Images Community Group, who works at Filament Group. His talk was all about images. Rightly so: They take up much more traffic in today’s web traffic than we tend to realise. Just to consider: Back in 1992, Legend of Zelda was done with 1.5 MB only! One of the problems with huge images comes to surfaces when creating responsive websites. Most responsive websites send the same amount of data to desktop and mobile devices. This could be reduced significantly if alternate image sources according to the various devices were used. Mat also brought up an interesting idea for creating useful, good icons: use SVG files! He showed some highly interesting icon generation workflows and demonstrated the use of grunticon, a grunt.js task which facilitates dealing with icons and background images. While it’s all good and fine to providing retina images for top devices, we should not forget about other devices – and figure out how we can use responsive images in a sensible way.

Martin Kool - A Successful Cross Platform HTML 5 Game

Martin Kool, co-founder of Handcraft, surprised us with Quento: a small but neat maths game which works on iOS, Android and Windows – thanks to HTML 5. In his talk, he showed how this seemingly mad task was accomplished. Looking at early on concept sketches and their refinements showed that rather than sticking with the playful, detailed concept, the whole thing was eventually broken down to its basics. The result: neat, clean, convincing. It is the core experience which is important. A similar mentality characterised the testing phase: Absolutely no instructions were given. Thus, any UI flaws lurking around could be revealed. Martin could develop a self-explanatory application which guides the user step by step through the interaction and can thus do without boring help texts. Quento proved to appeal to a great variety of different people. Today, Quento is quite a success – and because it was created using HTML 5, it can be played on various platforms.

Rob Hawkes - The State of WebRTC

After lunch, the day continued with Rob Hawkes’ talk on WebRTC. WebRTC can basically be described as peer-to-peer communication between browsers. Its aim is to develop real-time communication (RTC) applications in the browser via simple JavaScript APIs and HTML 5. But if we can already create connections via WebSockets, why would we even need something else? The big difference is that WebSockets always require a server between the two browsers, unlike WebRTC, which, apart from a first “handshake” between the two browsers, does not need such a middleman. WebRTC provides a network infrastructure for real-time media communication. Using UDP instead of TPC to send data, WebRTC is also a whole lot faster. Now, WebRTC does not only sound interesting, it can of course be used, too. The simplest use case would be a video and audio connection, basically like Skype in the browser. But that’s not all of it: Screensharing, collaborative writing and coding, multiplayer games or file sharing are further approaches of using WebRTC. Or you could use one device to control another and for instance use a smartphone as a remote control for a desktop game.

Sara Wachter-Boettcher - What You Don’t Know Will Hurt You: Designing With And For Existing Content

Sara Wachter-Boettcher, author of Content Everywhere discussed the issue of creating good, useful content. With content, it’s not quantity, but quality that counts. Many websites tend to pile up content with little value, which only leads to overstuffed, confusing websites. Content structure is the very foundation of a website: There is no need for superfluous, outdated and irrelevant content. Good content is structured, up to date, concisely written, accessible – it is systematically organised. Showing both short and long term benefits, Sara presented valuable factors which can improve content and its structure. Creating a representative example of each content type will identify its different constituents. The different requirements and attributes for each sample can be determined and formats, character limits and so forth defined. Lastly, it is no secret that connecting content is highly beneficial. Interconnecting content can reduce a complicated navigation and allows the user to find related content in logic way. Using metadata to add information about content types should not be forgotten either. Don’t just take care of the design, take care of what it will present: Consider content!

Jake Archibald - Rendering Without Lumpy Bits

The last talk was given by Jake Archibald, who entertained the audience with a capturing presentation. His talk dealt with rendering issues and web performance, contemplating how optimal results can be achieved in today’s circumstances. It’s still about delivering pixels at the right time, what has changed is simply how we do it. While figures of 24 fps might have been okay in the past, nowadays, our digital products and services have to be faster and faster, and tweaking the performance to the top is ever more important. Jake presented options to measure and optimise performance. For instance, the performance of animations can be enhanced by using requestAnimationFrame. This will group all animations into one browser repaint and thus not only create smooth animations, but sync with the GPU and demand less CPU. Instead of getting performance gains by optimising pure JavaScript like we used to, we now ought to look at the DOM, layout dependencies and the interaction with the GPU.

A worthwhile Mobilism conference

This year’s Mobilism conference could convince with inspired talks, an enthusiastic crowd and much new information on the mobile world. It offered valuable input and inspiration on various issues, from extremely insightful topics such as John Cleveley’s talk “Scale And Adapt”, presenting how BBC News met the challenge of responsiveness, and Peter-Paul Koch’s “Developing for Touch”, exploring what it means to develop for touch devices, to thinking-ahead topics such as Josh Clark’s “Beyond Mobile: Where No Geek Has Gone Before”, which contemplated what the future might bring - in a very entertaining way.