Manuel Matuzovic · Aug 10, 2017
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is al.
Manuel Matuzovic · Jul 24, 2017
When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the.
Manuel Matuzovic · Jul 21, 2017
A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. My blog doesn't support comments yet, but you can reply via blog@mat.
Adam Silver · Jun 26, 2017
In 2009 I was given some new designs to implement for the forms on Argos.co.uk. One requirement was to validate as the user answers each question. But it wasn’t clear whether it was best to validate as the user types or as they leave the field. In the end we went with the latter because otherwise, users would be shown.
Etsy Design · Jessica Harllee · Jun 20, 2017
Working together to solve complex, cross-functional problems Illustration by Karolin Schnoor At Etsy, some of the most interesting (and most difficult!) challenges we face as a design team don’t always have a clear or obvious owner. Our initiatives can span multiple product teams or even multiple disciplines. Without.
Adam Silver · May 24, 2017
Float labels are labels that start off inside the input. When the user starts typing, the label ‘floats’ up to make space for the answer. Float labels were designed to address the problem with using placeholder labels – that the label disappears as soon as the user starts typing. And while they’re certainly better tha.
Etsy Design · Magera Moon · May 23, 2017
Aligning on a shared definition of design excellence Illustration by Lucy Sherston During my time at Etsy, I had the pleasure of watching the design team grow and evolve. When I joined over six years ago, there was just a handful of designers working collectively to support business and customer needs. Today, it is a.
Lea Verou · Feb 16, 2017
I’m a strong believer in lowering the barrier of what it takes to create rich, interactive experiences and improving the user experience of programming. I wrote an article over at Smashing Magazine aimed at JavaScript library developers that want their libraries to be usable via HTML (i.e. without writing any JavaScri.
Adam Silver · Feb 15, 2017
The web has been around long enough for us to know its powers and constraints. We know about the constraints because we’ve bent them as much as we can over the years. For example, before CSS, we used tables and spacer gifs for layout. And before border-radius , we used background images for rounded corners. We use pre.
Manuel Matuzovic · Feb 12, 2017
Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app. My blog doesn't support comments yet, but you can reply via blog@matuzo.at .
CSS Wizardry · Feb 6, 2017
A look at the simple differences that developers and engineers can make in order to improve the quality of their typography
Heydon Pickering · Feb 6, 2017
Before Hitler set about exterminating Jewish people, he practiced on the disabled. The Aktion T4 programme was particularly fond of administering "involuntary euthanasia" to children. Parents were tricked into relinquishing their little ones with the promise that they would be offered special care. This special care c.
Etsy Design · MarcoSuarez · Jan 3, 2017
How we systematized and customized our ever-present icons Illustration by Erik Riley When an interface is made entirely of text, the amount of time and effort it takes to read and evaluate every word increases to the point of cognitive overload. Icons offer a form of “ visual shorthand ”, lowering cognitive load and b.
Manuel Matuzovic · Dec 13, 2016
An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site. My blog doesn't support comments yet, but you can reply via blog@matuzo.at .
Etsy Design · Henry Bayuzick · Nov 17, 2016
A Better Experience for Everyone Illustration by Naomi Wilkinson Here at Etsy, sandboxes are places where designers working on digital experiences can build whatever they want without blowing things up. At their core, sandboxes are really simple: just folders with some template files, hidden from the public. But their.
Etsy Design · Randy J. Hunt · Oct 18, 2016
Illustration by Jing Wei Allow us the privilege of introducing ourselves. “Hi! We’re Etsy Design.” “Hello, there. Wait…what’s Etsy?” “Oh, Etsy? It’s this special thing, and we’d love for you to be a part of it. Etsy is reimagining commerce and putting creative entrepreneurs at the center of the world. We’re building m.
Etsy Design · Alex Wright · Oct 18, 2016
Illustration by Sarah Abbott Like many of you, we enjoy making things: trying out new ideas, building prototypes, and fine-tuning our work as we go. Etsy is constantly looking for opportunities to improve our products and services, and exploring new ways to make things work better for everyone. Etsy has a big mission:.
Etsy Design · Victoria Bian · Oct 18, 2016
Thoughts, lessons, and tips Illustration by Laura Berger This June, I flew from San Francisco, California to Brooklyn, New York — far from my family, friends, and everything I’m familiar with. I felt curious and nervous, wondering what my Etsy internship would bring. “Will I feel comfortable working there? What if I m.
CSS Wizardry · Oct 10, 2016
A low-cost approach for providing user customisation in UI projects
Lea Verou · Sep 7, 2016
Recently, when I was making the minisite for markapp.io , I realized a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path , which.