And what of art direction?, Richard Ziade
When control over an experience is redistributed, even partly, new opportunities arise. Rather than being viewed as a unilateral mandate to force a particular experience, we view Readability as a spark that can hopefully kickstart a conversation between developers, bloggers, designers, art directors and publishers.
Design for the changing web
Conversations
Our interaction with the web has fundamentally shifted. Online content is accessible through a ever-expanding and myriad range of devices in a nearly unlimited set of surroundings. The conversation is no longer concerned with desktop or mobile users. Consider: a person might read a news article on their smartphone while at work, with limited connectivity, as a workaround to company security policies. Someone else might view a slideshow of images, listen to audio or watch a video on a notebook or tablet while making the daily commute. It is now an incorrect and potentially disadvantageous mindset that makes assumptions based on device capability or context.
Instead, the conversation has moved from the limitations of device and technology to the adaptability afforded with design that is responsive. Pixel-perfect layout in favor of flexible structure with fluid content and media. Design in search of commonalities, not differences.
Response
A Brief History
One year ago, Ethan Marcotte published an article titled Responsive Web Design (A List Apart, 25 May 2010). It has proven hugely influential and a fundamental starting point for responsive design strategy. His central argument is that while it is often tempting to develop mobile-specific versions of a website for a client with sandboxed and curated domains, the approach can quickly become a tremendous burden. How many devices do you specialize for? Which mobile browser do you target, at what resolution and what screen size? Before long, a developer could be asked to provide completely different experiences for a dozen devices: catered solutions for an iPhone, HTC running Android or Windows 7, a Blackberry. The solution is to adapt to the one thing that is predictable and unchanging: viewing size.
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. Ethan Marcotte
Consistency of experience
Experience is key. Users change the way they access content frequently; numerous times daily. We expect the user interface to remain consistent, if not exact as we move from desktop to mobile, video game console to tablet. As a sort of testament to this need, Facebook has recently announced the rollout of one unified interface for all 250 million of its mobile site users.
Fluid Design & Media Queries
How does a website become responsive? HTML and CSS are the building blocks of the web: the structure to hold our rich content and the styling essential to bring it to life. Historically, CSS has supported a method for scoping presentation to devices with media types — a way of adapting stylesheets for screen, print, or handheld devices. These are, however, quite limited and ill-fitting as the definition of what is appropriate for each becomes less obvious.
As Ethan Marcotte explains, the upcoming CSS3 specification includes a very powerful method of querying device characteristics. These expressions, or Media Queries, check for the conditions of specific media features. A media query could, for example, inquire on the current width of a browser, the maximum or minimum screen size of a portable device, aspect-ratio, color, resolution or device orientation. By preparing a stylesheet to adapt to the changing conditions of a visual or tactile device, websites become truly responsive.
Snapshots: Week of 9 May, 2011
- Ethan Marcotte: The Responsive Designer’s Workflow, Jeremy Keith [article] responsive, media queries, AEA, flexible grids, fluid images
- Metropol Parasol, yatzer [architecture] public use, sculpture, Seville, parasols
- What Makes a Good Designer, Dmitry Fadeyev [article] hiring good designers, specialization, understanding your audience, skills
- RAD: Responsive Architecture at Daniels, [architecture] project-based research, workshops, computational power, situated technology
- Kim Høltermand [photography] Copenhagen, ambiance, minimal, buildings, quiet beauty
Snapshots: Week of 2 May, 2011
- Why iPad isn’t “mobile”, Pete Fairhurst [article] defining mobile, iPad, netbooks, tablets
- When standards go awry, Marc Drummond [article] web standards, HTML5, accessibility, image attribute tags
- Comic Sans Criminal [web project] typography, reasoned argument, appropriate use
- “Mobile” versus “Small Screen”, Jeffrey Zeldman [article] mobile, responsive, media queries, definine your offering
- 25 Abandoned Yugoslavia Monuments [photography] architecture, monuments, sculpture, socialism, haunting
- Phototopic Sky Survey [photography] Milky Way, stars, panoramic, astrology, constellations
Snapshots: Week of 25 April, 2011
- Are your users S.T.U.P.I.D?, Stephen Turbek [article] user experience, boxes and arrows, testing, effective intelligence
- GOAB. A TV Experience Concept, Syzygy [proof of concept] television, iPad, interaction, layered content, social interaction
- Postcards from Google Earth, Bridges, Clement Valla [photography] series, Google Earth, corrupt data, perception
- Symmetry, Everynone Radiolab, comparisons, juxtaposition, New York
- The Science of Why We Don’t Believe Science, Chris Mooney [article] rationalization, psychology, confirmation bias, neuroscience, facts
- Wee Nudge [links] design, article links, feedback, clients, white space, the fold
Snapshots: Week of 18 April, 2011
- Storm (Animated), Tim Minchin animation, beat, rants, wine, proven, hippies
- Lady Liberty Stamp Depicts a Vegas Replica, The New York Times [article] USPS, stamps, Statue of Liberty, stock photography, commercialization
- What Lucky People Do Different, Erik Calonius [article] luck, success, Steve Jobs, opportunities, keeping an open mind
- Jesse Draxler [portfolio] collage, photography, found, faces, animals, buildings, abstract
One thousand views
It isn’t a great photo.
Poor composition, haphazard arrangement; the orange and white check pattern of the bedspread beneath it all.
Impressed with the amount of quality items in the tote bag — posters, notebooks, stickers, candies, graphics and papers — I hastily arranged everything into a sort of aesthetic garbage pile and snapped off two shots. It was a moment of documentation, if anything.
Snapshots: Week of 11 April, 2011
- Tipsy – Sonoma International Film Festival 2011, Psyop animation, wine, photo realism, anthropomorphic, wine, drinking
- Of the 1%, by the 1%, for the 1%, Joseph E. Stiglitz [article] income, economics, disparity, inequality, wealth
- The fall and rise of user experience, Cennydd Bowles [article] User Experience, ubiquity, stagnation, obliquity, creating value
- The Monster of Nix, Rosto [film trailer] animation, forrest, monster, Dutch, creatures, atmospheric
- F*ck You. Pay Me., Mike Monteiro Creative Mornings, design, contracts, business relationships, advice
- 12:31, Croix Gagnon and Frank Schott [photography] murder, ghosts, long-exposure, night, cadaver
Snapshots: Week of 4 April, 2011
- Thursday, Matthias Hoegg animation, blackbirds, technology, dystopia, alienation, love
- Solidarités International, Clément Beauvais illustration, World Water Day, water, parchment, ink drops
- Minigroup [web application] private, collaboration, group sharing, content management
- Crinkled Glasses, Rob Brandt [product] product design, sculpture, Dutch, Crinkled Cup
- Home Depot’s Home Improvement, Brand New [case study] Home Depot, branding, orange, slab serif, fools