Tags: design

Contextual Styling: UI Components, Nesting, and Implementation Detail – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, 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.

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

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.

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.