A Smart Approach to the Multi-Device Web
An Event Apart Chicago Workshop Takeaways
An Event Apart is a web design conference staple, founded by web pioneers, Jeffrey Zeldman and Eric Meyer with the aim to teach those in the industry as much as humanly possible in a three-day span.
I had the opportunity to attend Luke Wroblewski’s Multi-device: Web Design and Beyond workshop where he broke down the current mobile web landscape and suggested practical solutions to design for the changing times. You might have heard of Samsung’s Galaxy Smartwatch. This device is 3" wide and you probably don't have the resources to redesign your site to make it accessible on someone's wrist.
Luke has roots at Yahoo! and eBay, and now his own ideation and design firm where he’s created Polar, an opinion sharing app and ushered in a strategic way of developing sites with Mobile First. His reach within the industry is pretty expansive.
However, he doesn’t let his industry footprint eclipse his approachability or candor. He explained the rise in the increase of mobile device screen sizes, noting that they are designed specifically for the likes of the monstrous LeBron James, whose hands are over 9” long.
Laughter ensued, and he kept this light-hearted tone throughout the talk.
Don’t forget about the varying screen resolutions, some in retina, which is twice the PPI of non-retina displays. If this wasn’t enough features are growing increasingly ambiguous. Hybrid devices are emerging, tablets have plug-in keyboards, and more and more laptops and desktop computers now feature touch screens, like Google’s Chrome Pixel.
HUMAN ERGONOMICS & A MOBILE FIRST / CONTENT-FIRST APPROACH
With unchartered waters to trudge through, Luke suggested a two-fold approach to help designers avoid overreacting to an unsustainable workflow of creating responsive design websites that are knee jerk reactions to the industry’s most popular devices.
Step One: change your way of thinking.
If you think of the context in which a user is interacting with their device, rather than just the screen size and features it has, you start giving your users a much better experience.
Think, "palm", "lap", "desk". When you think in these terms you can being to think about the context in which people will use devices and be better able to create a design that is catered towards how people are interacting with their screen. This way, there are no gaps in screens available, the whole size continuum is covered and “tweakpoints” where the design starts to look disjointed begin to disappear.
Step Two: design your breakpoints.
The media queries that choose which points in the layout to redesign your site, based on the content itself, instead of just the screen size you’re looking at. If you allow the content to decide where your design shifts, you’re not going to play catch-up because of semi-arbitrarily designing to popular device sizes. Instead you are designing on your own terms.
THE MAGIC HAPPENS WHEN COLLABORATINGThe last takeaway, and one that I and every designer and developer will likely easily identify with, is to get aligned on a vision up front. The challenge of creating a project that looks great and loads fast on everything from what’s in your hand to what’s hanging on your wall is no easy feat. Allowing the project team and stakeholders involved to sync up on the goals and execution is ultimately what will result in a great end product where it all comes together from both the content side and the technical side.