Every year the team behind Smashing Magazine invites web professionals from all over the globe to join them in their home town of Freiburg, Germany for two days of talks and discussion about the web, hosted by Jeremy Keith.
The Gothic surrounds of the Historical Merchants’ Hall stood in juxtaposition with the cutting edge technologies under discussion by the attending web designers and JavaScript developers.
Responsive web design (RWD) was a consistent theme across many of the presentations, however a number of speakers highlighted how it, through bad planning and incorrect usage, could result in a poorly performing website.
Filament Group’s Patty Toland highlighted how important it is to customise the user interface (UI) per device due to the diverse range of devices sized available in the market at present. Her analogy comparing Coca-Cola with a website really struck home with attendees that the context of the user experience warrants customising how the content is delivered.
To plan the build of any project can be difficult, especially one that requires customising the UI but Kevin M. Hoffman presented the concept of “co-design” as a project planning methodology. The core concepts of “co-design” are for the project lead to first meet individually with the stakeholder on a one-to-one basis to understand the individual inputs, and then to facilitate the group design process in clearly scoped meetings between users, customer, and development team. Including users in the early in the process is essential as experience has found that people don’t want to work with a new system if it has been designed without them. It’s also important to prepare for every meeting and clearly scope what the outputs are, a technique Kevin calls designing the meeting.
Unfortunately without proper planning, the user experience may suffer greatly. When the client wants a twelve-image carousel, the designer wants to use twelve fancy webfonts and the developer wants to simplify development by including the latest frameworks, the size of the site starts to spiral and the time to load balloons, which results in slower sites and disgruntled customers.
Yesenia Perez-Cruz suggests that web designers like herself need to start thinking about performance as part of the overall experience. In order to help designers and clients keep performance in mind during the build process, Yesenia proposes that every project have a performance budget. By having target load-times, page-sizes etc. a site’s performance goals are clearly defined and the trade-off between new functionality and performance can be clearly communicated to clients.
Excellent stuff on designing with a performance budget from @yeseniaa. #smashingconf pic.twitter.com/CLEA6biSmZ
— Elisabeth Irgens (@elisabethirg) September 15, 2014
Improving site performance was another strong theme throughout the conference. CSS zen master Dave Shea challenged developers to roll their own CSS frameworks to reduce waste when styling their sites. He advised to steer clear of IDs and tags as they cannot be reused across elements and to clearly define a predictable method by which your new framework can be used and extended.
Creating static sites from dynamic content is a trend that has seen massive growth in recent months. Although not suitable to all use cases, Phil Hawksworth shared the advantages of dropping the backend of a website in favour of building content into static files that leverage the user’s browser to bring the content and design together.
Complementing this move toward a greater client-side persistence was the Financial Time’s Matt Andrews who educated the audience on the various ways to make websites work offline using the much derided AppCache, IndexedDB and the upcoming ServiceWorker. Although best suited to single-page webapps, once the Jekyll and Hyde nature of some of these technologies is understood, they can deliver impressive speed and usability improvements to any site.
The conference concluded with two excellent forward-looking presentations from Pete Smart and Jason Grigsby on where the web is going.
Pete’s brought the attendees on a journey into the new future, to a world where we could step inside the web using virtual reality and touch the items on Amazon thanks to electrostatic manipulation. He predicts that the web will become more tactile, more adaptive and ultimately become invisible as it becomes more embedded in our daily lives.
How we, as humans, are to interact with this new web was the focus of Jason Grigsby speech. As multimedia devices converge, it is no longer safe to assume a user’s context from either their screen size or how they interact with their browser.
Older responsive techniques of identifing a device by it’s screen size or input type are no longer reliable as, for example, the viewport width of the iPhone 6 Plus and the iPad are now only seperated by a mere 32px and even detecting the users input method cannot be trusted as mobile, desktop and TV can all use combinations of the traditional keyboard and pointer combination, touch or even gamepad given their context. Developers must now cater for all these types of input and craft UI’s that users can easily interact with, irrespective of their method of input, such as making larger click-areas that are both mouse and touch-friendly.
Grigsby closed out the conference by demoing some new input methods that are available today. Many devices for both mobile and home users now support interaction using voice with varying degrees of functionality and accuracy, with the XBox’s voice navigation being the most comprehensive user experience currently on the market. Echoing Pete Smart talk, examples of devices of the future such as Leap Motion and Ring showed how 3D motion will soon be turned into input for webpages and is set to revolutionise the way developers will create experiences on the web.
Leave a Reply