Learn the principles behind the interface
Build websites without code
Learn how to turn your design work into live websites with Webflow, a visual, no-code website builder.
Lea Verou · Feb 20, 2018
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.
Manuel Matuzovic · Feb 6, 2018
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.
Heydon Pickering · Feb 1, 2018
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.
Etsy Design · Catt Small · Dec 13, 2017
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.
Heydon Pickering · Dec 7, 2017
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.
Manuel Matuzovic · Sep 17, 2017
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.
Etsy Design · Kate Matsumoto · Aug 23, 2017
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.
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.
