Skip to main content
UI Coach Logo

Latest from the design community

Manuel Matuzovic · Feb 7, 2019

The Dark Side of the Grid (Part 1)

CSS Grid Layout is one of the most exciting recent CSS specifications because of its flexibility, extent, and power. It makes our lives so much easier but it also creates new dangers regarding user experience and accessibility. Preface It has already been two years since the first browsers, Chromium 57 and Firefox 52,.

Read

Adam Silver · Feb 5, 2019

How to avoid optional form fields with a conditional reveal

The first rule of form design is to only ask for information you actually need to give users a good experience. But sometimes asking for additional information helps the user. Now you could just mark the field as optional. But a lot of the time this is not the best UX. For example, let’s say the user is applying for a.

Read

Adam Silver · Jan 5, 2019

Form design: when to use the number input

This is an excerpt from Form Design Patterns . We’re in the middle of chapter 2, A Checkout Form, where we’ve been looking at the payment details form consisting of card number, expiry, security code from fields etc. The number input ( ) lets mobile users more quickly type a number via a numeric keypad. On desktop, th.

Read

Manuel Matuzovic · Dec 16, 2018

I Threw Away my Mouse

Last year I attended JS Conf Budapest and I watched many great talks but “YES! Your site can (and should) be accessible” by Laura Carvajal was the most thought-provoking talk for me. Laura explained how the Financial Times made accessibility a core part of their development process and she shared several lessons she a.

Read

Adam Silver · Jul 1, 2018

Content is the user experience and what the deuce is content design?

When I was making the final edits to Form Design Patterns , I had to attribute this quote: “Content is the user experience” Caroline Jarrett told me it was Ginny Redish, the author of “Letting Go of the Words”. “Job done,” I thought but then my editor asked me for a reference. So I asked Ginny and she said “I don’t th.

Read

Lea Verou · May 19, 2018

Never forget type="button" on generated buttons!

I just dealt with one of the weirdest bugs and thought you may find it amusing too. In one of my slides for my upcoming talk “Even More CSS Secrets”, I had a Mavo app on a , and the app included a collection to quickly create a UI to manage pairs of values for something I wanted to calculate in one of my live demos. A.

Read

Lea Verou · May 14, 2018

Responsive tables, revisited

Many people have explored responsive tables . The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. However, this means table headers need to now be repeated for every row. The current ways to do that are: - Duplicating content i.

Read

Manuel Matuzovic · Apr 13, 2018

Another Collection of Interesting Facts about CSS Grid Layout

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once ag.

Read

Adam Silver · Apr 1, 2018

Progressive enhancement explained simply

This is an excerpt from Form Design Patterns . Progressive enhancement is about users. It just happens to make our lives as designers and developers easier too. Instead of keeping up with a set of browsers and devices (which is impossible!) we can just focus on features. First and foremost, progressive enhancement is.

Read

Lea Verou · Feb 20, 2018

Free Intro to Web Development slides (with demos)

This semester I’m teaching 6.813 User Interface Design and Implementation at MIT , as an instructor. Many of the assignments of this course include Web development and the course included two 2-hour labs to introduce students to these technologies. Since I’m involved this year, I decided to make new labs from scratch.

Read

Manuel Matuzovic · Feb 6, 2018

My Accessibility Journey: What I’ve Learned So Far

Last year I gave a talk about CSS and accessibility at the stahlstadt.js meetup in Linz, Austria. Afterward, an attendee asked why I was interested in accessibility: Did I or someone in my life have a disability? I’m used to answering this question—to which the answer is no—because I get it all the time. A lot of peop.

Read

Heydon Pickering · Feb 1, 2018

aria-label is a xenophobe

Internationalization is a major component of inclusive design. But with automatic translation features provided by Google and Microsoft, it's mercifully simple to support — at least at the most basic level. Just include a default language for the page, like lang="en" , on the element to give translation services a hel.

Read

Etsy Design · Catt Small · Dec 13, 2017

Make design history

How to be a better designer by documenting your work quickly and effectively When you’re in the midst of a new design project, it can feel like everything is on fire. There isn’t enough time in the day to get the bare minimum done, let alone write stuff down. You spend all your time meeting with stakeholders and churn.

Read

Heydon Pickering · Dec 7, 2017

Who Is Inclusive Design For?

If you simultaneously - Have perfect eyesight - Have excellent motor control and coordination - Speak English as a first language - Find reading and processing complex information easy - Never get tired - Have as much free time as you wish - Live somewhere with access to super fast internet - Can afford super fast int.

Read

Manuel Matuzovic · Sep 17, 2017

Writing CSS with Accessibility in Mind

About a year ago I started to focus more on web accessibility. The most effective method of learning for me is teaching others. That’s one of the reasons why I’m talking at meetups and conferences and why I’m writing articles about the topic. I wrote about Progressive Enhancement for Smashing Magazine and about access.

Read

Etsy Design · Kate Matsumoto · Aug 23, 2017

Ready When You Are

How to share your work fearlessly Illustration by Yoko Sakao Ohama Knowing the right time to show your work is kind of like knowing when to slice into an avocado: Not ready. Not ready. Not ready. Too late. I’ve definitely been very guilty of waiting too long to get a second pair of eyes on my work. I suppose I wait be.

Read