Tags: design

» The Power of Responsive Design Sprints

Really interesting to see how Jason, Lyza, and co. are handling the process side of responsive design by using Agile sprints. This is how we’re doing it at Clearleft too.

There’s a really good point in here about starting with small-screen sketching:

For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.

If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.

If you nail the small screen design, the larger sizes will be easy by comparison.

Design without touching the surface – Leapfroglog

My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).

Together • Ludwig Wendzich

Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.

The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.

Finding the right tool is not what I am advocating for. Making it is.

Responsive Image Breakpoints Generator by Cloudinary

A very handy tool for figuring out breakpoints for responsive images.

Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.

Words of Wisdom from @adactio - Matt Radford

A larger screen is now a progressive enhancement. Hell, with things like Siri and Google Now and Amazon’s Echo, we’re getting to the point where even a screen is an enhancement.

RWD Interview with Jeremy Keith and Trent Walton

Myself and Trent answer some questions on responsive design for Justin’s excellent newsletter.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

  1. Naming things is hard,
  2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

Mike Hill - Industrial Design in Entertainment on Vimeo

A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.

Natural peer environment by Mikey Allan

‘Sfunny, I was just discussing this with Clare and Charlotte at work: how our office space (and culture) lends itself well to spontaneous exchanges of feedback and opinions.

CarbonGraffiti | When agile’s not creative

Jon writes about the difficulty of maintaining an overall design vision when you’re working to an agile methodology, slicing up work into sprints.

This pairs nicely with Mark’s recent podcast episode: On Agile.

Creating a Web Type Lockup | CSS-Tricks

A really great idea from Chris: using SVG to create the web equivalent of type lockups that can scale with all the control you want, while still maintaining accessibility.

Speaking of accessibility, Emil’s comment is very useful indeed.

Flexbox’s Best-Kept Secret

I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.

Remember this, future self!

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

Google+ | Google Web Showcase - Google Developers

Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:

  • 60K of HTML,
  • 60K of CSS,
  • 60K of JavaScript,
  • 60 frames per second animations, and
  • 0.6 seconds latency.

And this bit is crucial:

One of our major rules was that all our pages needed to be both server-side and client-side rendered. With server-side rendering we make sure that the user can begin reading as soon as the HTML is loaded, and no JavaScript needs to run in order to update the contents of the page.

New design thinking by Mikey Allan

Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

Responsive Field Day

All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!

All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.

Jeremy Keith - Responsive Field Day 2015 - YouTube

Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

What “UX Design doesn’t exist” means to me — Cennydd Bowles

I completely agree with Cennydd (and Peter, and Leisa). If anyone working on a project—whether they’re a designer, developer, or anything else—isn’t considering the user experience, then what’s the point of even being there? By extension, labelling your work as “UX Design” is as redundant and pointless as labelling it “Good Design.”

But my complaint is with the label, not the activities. It’s the UX Design label that has little value for me. These activities happen in all good design: if you’re not trying to create positive experience then I don’t really understand what you are doing.

Russell Davies: Designing for accountability, designing for broken-ness

One failure mode is ‘I have run out of paper’, another is ‘my data has been sold to a company I don’t trust’, another is ‘my country has been invaded and they’ve seized all the servers’.

These are things to be designed for. These are user needs too. They have to be embraced.

Designing The Future, John V Willshire, dConstruct 2015 on Vimeo

Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.

The Future Mundane on Vimeo

Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.

It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)

dConstruct : dconstruct2015 on Huffduffer

All the audio from dConstruct 2015 is now available for your huffduffing, podcasting, listening pleasure.

The conference was on Friday. Today is Monday. Drew knows what he’s doing.

The Web is Ruined and I Ruined it by David Siegel

Here’s a classic. David Siegel—of Creating Killer Websites fame—outlines exactly why he turned his back on that 1×1 spacer .gif trick he invented.

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

How to fix a bad user interface - Scott Hurff

A lesson on the importance of handling each state of an interface:

  • the blank state,
  • the loading state,
  • the partial state,
  • the error state,
  • and the ideal state

…instead of just focusing on that last one.

Crafting A Bridge Between Storytelling & UX Design

I kind of want to link to every one of John’s post chronicling his 90 days at Clearleft, but this one is particular good, I think: how narrative ideas from the world of storytelling can help unlock some design problems.

The Hamburger Menu Doesn’t Work - Deep Design

Building on Luke’s research, James outlines the problems with hiding navigation behind a hamburger icon. So, to be clear, the problem isn’t with the icon, so much as the way it is used as a cupboard to shovel all our messy navigation issues into.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

PDF: Designing For Deep Time: How Art History Is Used To Mark Nuclear Waste

Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).

Designing for Performance by Lara Callender Hogan

Lara’s fantastic book is now available online in HTML for free. Have a read and then order a copy of the print book for your library.

Explaining graphic design to four-year-olds — Medium

Sounds like a good exercise for explaining just about anything. Smart.

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Design machines | Louder Than Ten

When another company achieves success, there’s a lot of pressure to investigate what they did right and apply that to our own organizations.

But we still have a chance. As long as we run brave organizations made up of even braver souls who are willing to embrace expression, trust their intuition and experiences, and stand up when everyone else is sitting down, we will survive.

Nicole Fenton | Interface Writing: Code for Humans

The text of Nicole’s excellent talk on writing helpful, human microcopy.

The ethics of digital design | Design Council

This piece by Cennydd on ethics in digital design reminded me of something Jonathan Harris wrote a while back.

I like that he cautions against hiding the seams:

Designers should also strive to give digital products a healthy balance of seamlessness and interrogability. While it’s appealing to create technology that needs little human intervention, this sort of black box can be a breeding ground for dishonest behaviour.

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

Web Typography – a handbook by Richard Rutter — Kickstarter

You’ll want to back this—you’ll want to back the hell out of this!

Where Do We Go From Here?, From the Notebook of Aaron Gustafson

The full text of Aaron’s magnificent closing keynote from Responsive Day Out.

Visual Essentials for Product Design — Cennydd Bowles

This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.

adactio : responsiveconf3 on Huffduffer

Just over 48 hours since the third and final Responsive Day Out finished, and all of the audio is available! Here’s the podcast feed.

That Drew is something else.

Responsive day out 3: the final breakpoint | hiddedevries.nl

A fantastically-detailed write up of the whole day out. Each talk is described, and then the threads are tied together at the end. Great stuff!

As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally grown to be a pleonasm in the past few years.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

Responsive Principles (Front-end London, May 2015) // Speaker Deck

The slides from Paul’s talk-in-progress on design principles for building responsive sites. He gave us a sneak peak at Clearleft earlier this week. ‘Sgood.

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

The Desktop Conundrum - daverupert.com

I can relate 100% to what Dave is saying here:

I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.

All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Does responsive web design make you more money?

For once, Betteridge’s Law of Headlines doesn’t hold true, because the data in this article shows that the answer is a resounding “yes!”

Talking design

Mariana Mota is writing a book on the collaborative design process. She’s sharing her research videos as she goes.

The first video features Gerry Leonidas.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

15 Years of Dao · An A List Apart Blog Post

On the fifteenth anniversary of A Dao Of Web Design people who make websites share their thoughts.

Paul Ford’s is a zinger:

I don’t know if the issues raised in “A Dao of Web Design” can ever be resolved, which is why the article seems so prescient. After all, the Tao Te Ching is 2500 years old and we’re still working out what it all means. What I do believe is that the web will remain the fastest path to experimenting with culture for people of any stripe. It will still be here, alive and kicking and deployed across billions of computing machines, in 2030, and people will still be using it to do weird, wholly unexpected things.

Jeremy Keith @ The Digital Pond - Responsive Design - YouTube

Here’s a talk give at a community event in London last summer.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

Gridset · Responsive Report 2014

Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.

What Should I Design? - the design prompt generator

Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.

Responsive Field Day

Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Future Friendly Fruition | Brad Frost

The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.

Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

The Web’s Grain by Frank Chimero

Superb. Absolutely superb.

A magnificent tour-de-force by Frank on the web’s edgelessness.

Read. Absorb. Read again. This is the essence of responsive web design, distilled.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

NASA GeneLab

A beautiful website for ISS-based biology experiments.

Welcome to the new Guardian website

The Guardian have hit the big red button and made their responsive site the default. Great stuff!

(top tip: don’t read the comments)

The Brand Deck by Scott Thomas — Kickstarter

This Eno-esque deck of cards by Scott could prove very useful for a lot of Clearleft projects.

A random principle from Adactio’s collection

This is neat—Vasilis has built a one-pager that grabs a random example from my collection of design principles.

I really like that he was able to use the predictable structure of my HTML as an API.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Some thoughts on “designing in the browser” | The Haystack

An important clarification from Stephen:

You don’t actually design in the browser

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders.

Exactly!

Personally, I think it’s as crazy to start in the browser as it is to start with Photoshop—both have worldviews and constraints that will affect your thinking. Start with paper.

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

You can now read Aaron’s excellent book online. I highly recommend reading the first chapter for one of the best descriptions of progressive enhancement that I’ve ever read.

Performance Budget Metrics - TimKadlec.com

Some good practical advice from Tim on setting a performance budget.

Use rule-based metrics to make sure you haven’t overlooked simple optimizations.

Use quantity-based metrics as guides to help designers and developers make better decisions about what goes onto a page.

HUB Interviews - Jeremy Keith on Huffduffer

Here’s a fun little interview I did recently, mostly about work stuff. It’s available for your huffduffing pleasure.

One thing that really bothers me is the way I repeatedly said “guys” to refer to my colleagues at Clearleft. I must stop doing that.

RWD BLOAT // Speaker Deck

Dave’s great slides from a presentation on performance and responsive design.

As we may understand: A constructionist approach to ‘behaviour change’ and the Internet of Things by Dan Lockton

An epic braindump by Dan, covering connected devices, product design, co-creation, DIY, and knopening stuff up. That’s right: knopening.

Knopen, a fairly obvious portmanteau of know and open, can be a verb (to knopen something) or an adjective (e.g. a knopen tool).

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

Code for America — Responsive Web Design on Huffduffer

This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.

The audio is available for your huffduffing pleasure.

Patty Toland — Design Consistency For The Responsive Web (Smashing Conference Freiburg 2014) on Vimeo

Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

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.