Tags: design

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.

It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.

Perennial Design, by Wilson Miner · Issue 4 · The Manual

A deeply thoughtful piece (as always) by Wilson, on the mindset needed for a sustainable way of working.

When we start with the assumption that optimizing for rapid, unbounded growth is a goal, we immediately narrow the possibility space. There are only so many choices we can make that will get us there. The same choices that made annual monoculture and the shopping mall the most efficient engines for short-term growth and profit are the same qualities that made them unsustainable in the long term.

There are more ways to scale than growth. There are more ways to deepen our impact than just reaching more people. What if we put just as much effort into scaling the impact of our work over time? Can we build digital products around sustainable systems that survive long enough to outlive us, that are purpose-built to thrive without our constant cultivation?

URL Design · by Kyle Neath

This is four years old, but it’s solid advice that stands the test of time.

Jeffrey Zeldman: 20 years of Web Design and Community on Vimeo

A really nice little documentary about my friend Jeffrey.

RWD Podcast Episode #15 : Jeremy Keith — Responsive Web Design

I had a good ol’ chat with Justin Avery from Responsive Web Design Weekly. We talk about performance, Responsive Day Out, and yes, progressive enhancement.

The U.S. Digital Services Playbook

Design principles for the newly-formed USDS. I’ve added these to my collection.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

RWD Bloat - daverupert.com

Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.

The Virtual Haircut That Could Change the World | Design | WIRED

A nice profile of BERG’s Little Printer. That Matt Webb is a smart cookie. He is also a very thoughtful cookie.

Guy Walks Into a Bar - The New Yorker

If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?

What’s the design process at GDS? | Government Digital Service

A look behind the scenes of gov.uk. I like their attitude to Photoshop comps:

We don’t want a culture of designs being “thrown over a wall” to a dev team. We don’t make “high fidelity mock ups” or “high fidelity wireframes”. We’re making a Thing, not pictures of a Thing.

And UX:

We don’t have a UX Team. If the problem with your service is that the servers are slow and the UX Team can’t change that, then they aren’t in control of the user experience and they shouldn’t be called the user experience team.

The Making of Aprilzero

The first in a series of posts looking at the process behind builfing this “quantified self” site:

As with most decisions in my life, I asked myself: What would Tony Stark do?

Smart Fixed Navigation

Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.

I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.

How to build the sensory web by John Allsopp

John peers behind the surface veneer of the web’s current screen-based setting:

The challenge for us as developers and designers for the web becomes less about screens and pixels and buttons and much more about how the web augments our lives, both actively and passively; how it makes us know ourselves and our homes and workplaces and environments better.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

Highlights of Responsive Day Out 2: The Squishening

Neil Berry writes down his thoughts prompted by Responsive Day Out 2.

Responsive Day Out 2 | Studio 24

A great blow-by-blow account of Responsive Day Out 2 from Simon R Jones.

Responsive Day Out 2

Phil Baker writes up his thoughts on all the day’s talks.

Responsive Day Out 2 - The Squishening – Alex Gibson

What follows here is not a full account of each talk, you can listen to the audio recordings for that. This is more a collection of my main take-aways for the day, and what I found most interesting.

Takeaways from Responsive Day Out 2 - Plausible Thought

Marc Jenkins shares his thoughts on Responsive Day Out 2.

Back to basics - Katrin Kerber

Another lovely write-up of Responsive Day Out 2.

The Pursuit of Laziness: Thoughts from Responsive Day Out — Paul Robert Lloyd

Now this is what I call a conference write-up. Paul synthesises the talks from Responsive Day Out 2 into five principles for responsive design:

  1. Responsible
  2. Polylithic
  3. Pragmatic
  4. Collaborative
  5. Flexible

Responding to the Responsive Web: Insights on Reshaping User Experience - The Digital Pond (London, England) - Meetup

Sally and I will be speaking at this free evening in London on August 7th.

Good, Form & Spectacle - design & cultural heritage

The brilliant George Oates has started a new design company with an emphasis on cultural heritage: “explicit notes to the future, local archives of global content.” Watch this space

Responsive Day Out 2 - The Squishening - Kirsty Burgoine Web Design and Development

Here’s Kirsty’s retrospective of Responsive Day Out 2, from the perspective of a speaker and an attendee.

adactio : responsiveconf2 on Huffduffer

Thanks to the tireless efforts of the magnificent Drew McLellan, the podcast of all the talks from Friday’s Responsive Day Out 2 are now available for your listening pleasure.

Notes from Responsive Day Out 2, June 27th in Brighton — iAllenkelhet

As well as delivering a terrific talk at Responsive Day Out 2, Ida has also written up her detailed notes of the day.

Responsive Day Out 2 2014 - #beepcheeks

Adam Onishi’s write-up of Responsive Day Out 2, paying particular attention to the format and the curation of the day.

Jeremy puts together two fantastic conferences in Responsive Day Out and dConstruct, both of which I will have attended for the first time by the end of the year and I don’t think there’s a coincidence in that. Responsive Day Out was a truly fantastic conference, and it was all down to the curation of the conference, because quite literally there wasn’t anything else.

Items tagged beepcheeks on Decade City

As always, Orde Saunders took copious notes at Responsive Day Out 2. The man’s a machine!

Responsive Day Out 2 – from the perspective of a speaker & attendee : Sally Jenkinson

Sally’s talk at Responsive Day Out 2 was really, really great—it kinda blew my mind. I’m so, so happy she agreed to be a part of the event.

Here’s her description of the day and the other talks. Pay attention to the closing call:

I didn’t get to meet everyone I wanted to, but you should all come back for dConstruct in September as I’m sure that it’ll be even better than this weekend was.

Responsive Day Out 2 - the squishening | hiddedevries.nl

Another great write-up of Responsive Day Out 2, this time from Hidde de Vries, who came over to Brighton from the Netherlands.

On being responsively creative

A terrific write-up of Responsive Day Out 2 by David Watson, tying together many of the day’s strands.

Guardian beta · The container model and blended content – a new approach to how we present content on the Guardian

This is what Oliver was talking about Responsive Day Out 2 — a new approach to information architecture.

Cast off your sidebars! You have nothing to lose but your grids!

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Unfinished Business 73: We’ve reached peak burrito on Huffduffer

I had a lot of fun chatting with Andrew on his podcast. Yes, it’s a rambling affair but it’s worth sticking with it—we get really stuck in to some thorny questions about design and advertising.

Unfinished Business 73: We’ve reached peak burrito

IXS Enterprise (IXS-110) - an album on Flickr

Design fiction from a NASA scientist.

For the Love of the URL — Aaron Grando

Some URLs are ugly. Some URLs aren’t. Let’s not sacrifice them.

Frank Chimero – Only Openings

I guess it goes without saying at this point, but this piece from Frank is beautiful and thought-provoking.

This part in particular touched on some things I’ve been thinking about lately:

Design’s golden calf is simplicity. Speaking as someone who sees, makes, and uses design each and every day, I am tired of simple things. Simple things are weak. They are limited. They are boring. What I truly want is clarity. Give me clear and evident things over simple things. Make me things that presume and honor my intelligence. Shun seamlessness. It is another false token. Make me things that are full of seams, because if you give me a seam and I pull the thread, I get to see how the whole world is stitched together. Give me some credit. Show me you trust me.

Ingredients by Mark Boulton

A lovely post by Mark on the value of URLs.

The Cassette Tape as Responsive Design

This is an interesting observation about the design of cassette inlays. It reminds of Paul’s presentation at the Responsive Day Out when he looked at the “responsiveness” of television idents.

And They All Look Just the Same

Greg isn’t just lamenting a perceived “sameness” in web design here. He’s taking a long-zoom view and pointing out that there’s always a sameness …and you can choose to go along with it or you can choose to differentiate.

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.

Using Photoshop in Responsive Workflows - Web Standards Sherpa

A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.

Designing in the Borderlands by Frank Chimero

This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.

A personal view on generalists and trans-media design

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Airbag Intl. / Archives

Greg says:

We need a web design museum.

I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.

A Modern Designer’s Canvas | Smashing Magazine

The transcript of Malarkey’s recent talk. Good thoughtful stuff.

Making ubuntu.com responsive: intro | Ubuntu Design Blog

Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.

Device-Agnostic by Trent Walton

A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!

Can This Alternative Smartphone Deliver Real Privacy to the Masses? | Co.Exist | ideas + impact

Fast Company features Aral’s tantalising Indie Phone project that he’s been working on at Clearleft Towers.

Good to see Oskar the dog getting the recognition he deserves.

On the top floor of a commercial building in the old maritime city of Brighton, England, Balkan has been quietly hacking away at Indie Phone for the last several months with the rest of his team—Victor Johansson, an industrial designer, Laura Kalbag, a professional web designer (and Balkan’s partner), and her Husky, Oskar.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

Approaching Principles for Independent Archives | Equivalent Ideas

Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.

I’ve added these principles to my collection.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

An Ingeniously Designed Speaker That Creates Crowdsourced Playlists | Wired Design | Wired.com

Hey, look! The Clearleft interns are in Wired. That’s nice.

Windows of New York | A weekly illustrated atlas

Lovely little graphics inspired by New York architecture.

The Business of Responsive Design by Mark Boulton

The transcript of Mark’s talk from last week’s Handheld conference in Cardiff.

There are mountains.

The lie of the API by Ruben Verborgh

I agree completely with the sentiment of this article (although the title is perhaps a bit overblown): you shouldn’t need a separate API—that’s what you’re existing URL structure should be.

I’m not entirely sure that content negotiation is the best way to go when it comes to serving up different representations: there’s a real value in being able to paste a URL into a browser window to get back a JSON or XML representation of a resource.

But this is spot-on about the ludicrous over-engineered complexity of most APIs. It’s ridiculous that I can enter a URL into a browser window to get an HTML representation of my latest tweets, but I have to sign up for an API key and jump through OAuth hoops, and agree to display the results in a specific way if I want to get a JSON representation of the same content. Ludicrous!

Responsive scrollable tables | 456 Berea Street

I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Responsive Design Won’t Fix Your Content Problem ∙ An A List Apart Column

The title is a bit sensationalist but I agree completely with what Karen is saying:

It’s time we acknowledged that every responsive web design project is also a content strategy project.

What Screens Want by Frank Chimero

Frank’s fantastic closing talk from this year’s Build. There’s a lot of great stuff in here about interaction design, and even more great stuff about what’s been happening to the web:

We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.

Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

A wonderful piece by Ethan taking issue what the criticism that responsive design is over-reliant on screen size. Instead, he says, it begins with screen size, but there’s no limit to where we can go from there.

Responsive design might begin with the screen, but it doesn’t end there.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

“Now with Responsive!,” an article by Dan Mall

Dan gives some insight into what it took to make his personal site responsive. Stay tuned: there’ll be more of this.

If it doesn’t work on mobile, it doesn’t work | hacker journalist

A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.

Do as Little as Possible ∙ An A List Apart Column

I heartily concur with Lyza’s mini-manifesto:

I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.

It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.

Simplicity is powerful.

embedresponsively.com

Here’s the CSS and markup you need to make third-party iframes responsive. Handy!

Better business by design

Some good-lookin’ stats from a responsive redesign:

Total page views, a metric we were prepared to see go down with the redesign, are up by 27%. Unique visitors per week are up 14% on average and visits per week are up on average 23%.

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

Responsive Web Design is Solid Gold

Jason recants on his article from a few years back when he described responsive design as “fool’s gold.”

Responsive web design: it’s solid gold, baby.

Human Interest by Trent Walton

Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.

The perils at Great Falls - Washington Post

On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.

Design Jargon Bullshit

Fodder for a Markov chain.

Webby Podcasts

A handy collection of links to web-related podcasts. Go forth and huffduff.

UX secrets revealed - Features - Digital Arts

I was interviewed for this article on psychology in web design. The title is terrible but the article itself turned out quite nicely.

Crippling the web - TimKadlec.com

A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:

The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?

Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.

Butterick’s Practical Typography

There’s a lot of very opinionated advice here, and I don’t agree with all of it, but this is still a very handy resource that’s been lovingly crafted.

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

Responsive design: we are not there yet

A call for developers to let standards bodies know what we want:

It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

“What is Design?” as Principles Compiled by Jeremy Keith

Well, this is rather nice. John Maeda uses my list of design principles as a jumping-off point for investigating the differences between design for people and designing for machines.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Jeremy Keith – Beyond Tellerrand – beyond tellerrand 2013 on Vimeo

I gave the opening keynote at the Beyond Tellerand conference a few weeks back. I’m talked about the web from my own perspective, so expect excitement and anger in equal measure.

This was a new talk but it went down well, and I’m quite happy with it.

Other flexible media: balloons and tattoos

Vasilis considers the inherent flexibility and unknowability of web design.

I tried to come up with other fields that need to design things for a flexible canvas, in the hope of finding inspiration there. The only media types I could come up with was the art of balloon printing and the art of tattooing.

Experience Rot

Jared explains how adding new features can end up hurting the user experience.

Auto-Forwarding Carousels, Accordions Annoy Users

Carousels are shit. Auto-animating carousels are really shit. Now proven with science!

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

Jessica Hische - Upping Your Type Game

A wonderful essay about type on the web by Jessica.

Progressive enhancement in the Government Service Design manual

A nice description of progressive enhancement by Norm, as applied at GDS.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

Embracing the Medium

A lovely piece of writing from Richard on the nature of the web.

On pattern portfolios | Clear Thinking - The Clearleft Blog

Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.

Bradshaw’s Guide For Tourists in Great Britain

Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.