Box-sizing should be
border-box
by default.
Preach.
Box-sizing should be
border-box
by default.
Preach.
Shawn Wang lays it out. Presented here alphabetized:
html {
font-size: 1.25em;
line-height: 1.75;
margin: auto;
max-width: 70ch;
padding: 3em 1em;
}
A digital archive of graphic design related items that are available on the Internet Archive.
This sleek-looking site curated by Valery Marier uses materials culled from the fabulous Internet Archive. Particular favorites include NASA’s Graphics Standards Manual and this wild Hawaii travel poster for Continental Airlines.
A modern CSS showcase styled by community contributions.
Stephanie Eckles’ modern spin on the classic CSS Zen Garden. A single HTML page styled in dozens of unique and interesting ways!
Two studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world.
These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces.
Welcome to the world of LEGO UX design.
Be still my childhood heart.
18F user experience (UX) designers join cross-functional teams to improve interactions between government agencies and the people they serve. The 18F UX Guide helps us get this job done. It’s a starting point for UX design at 18F: doing it, discussing it, and ensuring it’s done to a consistent level of quality.
Another useful open source guide from the incredible team at 18F.
Another great collection from Reagan Ray, this time pulling together beautiful lettering from science fiction films released prior to 2000.
Previously: Famous Mid-Century Homes
the Eameses’ massive archive—one million items, including their films—went to the Library of Congress after Ray died in 1988. Now the stewards of The Work of Charles and Ray Eames, the Library of Congress is at work creating preservation-quality copies of their films. They’ve done 20 already with more to come.
In this article, Herman Miller’s WHY Magazine details three recently preserved Eames films: S-73 Sofa Compact, Soft Pad, and Fiberglass Chairs—Something of How They Get the Way They Are.
Also worth watching, Eames: The Architect and the Painter.
Reagan Ray pulls together a stunning, thematically-organized collection of mid-century modern homes from around the country and across the decades.
Illustrator Pam Wishbow shares some stellar mid-century modern-esque sketches for use as backgrounds for your video chats. Delightful!
The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.
Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.
The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.
This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.
An elegant—though technically complex—solution by Søren Birkemeyer that adds a timeline of changes to the bottom of blog posts.
“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 most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.
This 2017 article from Manuel Matuzović goes deep on how to creatively use CSS Grid Layout in a progressively-enhanced manner. Naturally, the baseline techniques we use will change over time, but Manuel’s demo illustrates how you might think about design and layout as experience layers.
A design guide for the flags of the United States.
Lynn Fisher put together this love letter to state flag design. She writes:
I’ve always loved the Arizona flag and consider it one of the best designed. After a visit to the National Constitution Center in Philadelphia and seeing all of the state and territory flags hung together in a row, I was eager to learn more about their designs and histories.
Personal favorites include Colorado, New Mexico, and—like Lynn—Arizona.
The latest in Chris Ashton’s series of “I Used the Web for a Day…” articles is a doozy of a read chock-full of facts, figures, tips, and tricks.
The cost (in dollars) of mobile and broadband data plans globally varies wildly and Chris’ post goes deep on how the cost (in page weight and in dollars) of our work building for the Web impacts users around the world. Chris concludes:
We don’t have the power to change the global cost of data inequality. But we do have the power to lessen its impact, improving the experience for everyone in the process.
The web should be a platform that helps people and provides a net positive social benefit. As we continue to evolve the web platform, we must therefore consider the ethical consequences of our work. The following document sets out ethical principles that will drive the TAG’s continuing work in this direction.
The W3C’s Technical Architecture Group lays out their set of ethical design principles as applied to the Web and—surprise—they’re solid:
- There is one web
- The web should not cause harm to society
- The web must support healthy community and debate
- The web is for all people
- Security and privacy are essential
- The web must enable freedom of expression
- The web must make it possible for people to verify the information they see
- The web must enhance individuals’ control and power
- The web must be an environmentally sustainable platform
- The web is transparent
- The web is multi-browser, multi-OS and multi-device
- People should be able to render web content as they want
How to plan, write, and manage content at 18F.
Another great resource from the folks at 18F. The Inclusive Language page is especially noteworthy:
The words we use can make the difference between forging positive connections or creating distance in our personal and professional lives. Particularly in writing, impact is more important than intent.
As we build government services, we want to ensure they are accessible and welcoming to everyone who needs to use them. Inclusive language helps us to be more accurate and build trust with our users.
Making the internal external.
Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience.
USWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. USWDS 2.0 is an important update to the design system — it introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.
Two years in the making, version 2.0 of the U.S. Web Design System is now live. This is a tremendous update and will be a boon to anyone building digital services for the American people. Congratulations to Dan, Maya, and the rest of the Technology Transformation Services team!
The intersection of science and design has many beautiful manifestations, from data visualization to nerd tattoos. But hardly does it get more delightful than in these gorgeous vintage science and technology ads from magazines in the 1950s and 1960s, bringing the modernist aesthetic to the atomic and space ages.
Maintained by the U.S. Department of Health & Human Services, Usability.gov contains a wealth of knowledge on topics such as user experience design, content strategy, project management, and visual design.
A collection of tools to bring human-centered design into your project.
The team at 18F share their methods for conducting human-centered design research.
The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily.
Australia’s Digital Transformation Agency has made available their design system. Source code is available on GitHub.
Basecamp’s Michael Berger details how they recently improved the accessibility of their product’s Jump Menu. This is a stellar example of how Web-based tools can be visually attractive, useful, and accessible.
We’re not a bootcamp, we’re a finishing school.
Back in October, the thoughtbot team announced they were making their online learning platform Upcase available to all for free.
This looks like a fantastic resource and now it’s available to everyone!
That should be corrected if anyone invents a time machine.
Collecting a few of Jen Simmons’ tweets:
Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.
It’s not
display: <value>;
. It’sdisplay: <outer-value> <inner-value>;
.drafts.csswg.org/css-display/#outer-role
This realization won’t change what I write in my code, but it does change how I think about what I’m writing.
display: grid; = display: block grid; display: flex; = display: block flex;
Also:
display: inline grid;
You can write
display: inline-grid;
, but that’s actually out of date. It makes more sense to writedisplay: inline grid;
Do you often look for cool background gradients for your UI?
WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.
A handy resource that includes CSS rules as well as Sketch and Photoshop templates.
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
A collection of little tips from @steveschoger to improve your visual design skills with the little details that make a big difference.
I hesitate to link to a Twitter “moment,” but this collection of tips organized by Grant McAllister is worth bookmarking.
Plain language makes it easier for the public to read, understand, and use government communications.
Led by the incomparable Nicole Fenton, the team at 18F recently relaunched plainlanguage.gov, an exceptional website full of writing guidelines, examples, and resources. While the Plain Writing Act of 2010 mandates that government resources be written in clear, concise language, there’s ample evidence that agencies have been slow to update problematic services.
It’s heartening to see GSA tackle the matter head on.
Una casually dropped this little CSS tip on Twitter:
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
Today, I will demonstrate another issue with EV certificates: colliding entity names. Specifically, this site uses an EV certificate for “Stripe, Inc”, that was legitimately issued by Comodo. However, when you hear “Stripe, Inc”, you are probably thinking of the payment processor incorporated in Delaware. Here, though, you are talking to the “Stripe, Inc” incorporated in Kentucky. This problem can also appear when dealing with different countries.
In this post, Ian outlines several Web security-related flaws in current-era browser user interface. Browsers, in an attempt to be clever, obfuscate several important pieces of information that might provide users with details about the people behind a particular website. On top of that, Ian demonstrates flaws in the cross-jurisdicitonal systems that allow for the coexistence of like-named but unrelated business entities.
Browser vendors treat extended validation certificates as special cases, giving them visual priority over standard TLS certificates. The average user won’t know the difference—nor should they—when they see “Trusted Company X” highlighted in green in their browser’s URL bar. The expectation is that they’re actually viewing Trusted Company X’s website and not the website of some rando with a little bit of money to spare.
There’s quite a bit that an engineer can learn by participating in design-related activities.
As it happens, you can greatly improve your site's accessibility with some relatively minor design and code changes!
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
The team at Vox open-sourced their accessibility guidelines. Check the announcement blog post for more details on their process.
This book will assist frontend developers in building accessible e-commerce websites and components.
A tremendous living resource documenting eBay’s approach to building accessibly for the Web.
SVG icons for popular brands.
Ideas, inspiration and examples for your own projects.
Google’s Paul Lewis answers the same questions that Matt Gaunt received (and that I previously linked to). Paul’s focus on the user and their experience of our work resonates strongly with me and is something I harp on quite frequently.
I think performance, accessibility, and security share some traits: they can’t be retro-fitted to a project, they’re often thankless tasks, and they’re only notable by their absence. They’re all, however, the bedrock of a good user experience, onto which you can layer high quality designs and interactions.
Paul also cites one of my favorite documents, the W3C’s HTML Design Principles:
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
Truth.
Google Chrome Developer Advocate Matt Gaunt publicly answers some Web performance-related questions he received. Many of the questions have to do with frameworks, a topic of great interest to me.
A slow website, no matter how it’s built, means someone didn’t notice, didn’t care or couldn’t fix the problem. That doesn’t mean the framework or tools used to build it is the problem, it could be the way those tools have been used.
It could also be that the chosen tool isn’t the best solution to the problem at hand.
Nate Berkopec’s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):
As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.
Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range
property to deliver smaller fonts.
The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.
Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.
Slides from Tammy Everts’ 2013 presentation on the neurological effects of poor performance on our websites’ visitors reveal some startling facts. Right out of the gates, Tammy cites a 2010 EEG study of users navigating a site on a connection throttled from 5MB to 2MB. The study found that participants had to concentrate up to 50% harder and reported a negative brand association afterward.
A community-driven effort to make web accessibility easier.
This is a great resource, chock full of helpful links to tutorials and examples. Be sure to check out the patterns page.
I find myself with IoT talking about progressive enhancement all the time, even though it’s a Web thing, but it makes even more sense. Really, it should be the thing it was designed to be first and then the smarts layered on top.
Stephanie Rieger on a recent episode of The Web Ahead podcast, speaking with Jen Simmons about designing network-connected physical devices—ahem the Internet of Things—with the philosophy of progressive enhancement baked in. Sure, you could build a Web-connected light switch, but if it isn’t first a well-designed light switch, you’ve missed the mark.
The State of Web Type is a project by Bram Stein to collate and display up-to-date browser support data for web fonts & typographic features on the web.
Imagination is our window into the future. At NASA/JPL we strive to be bold in advancing the edge of possibility so that someday, with the help of new generations of innovators and explorers, these visions of the future can become a reality. As you look through these images of imaginative travel destinations, remember that you can be an architect of the future.
This collection of WPA-style travel posters from NASA/JPL appeals to my interests.
If you build websites for a living or work with people who do, stop what you’re doing and get yourself (or your team) a copy of this book.
It may not be in your title, but it’s definitely part of your job.
This week marks the fifteenth anniversary of one of the seminal articles on Web design: John Allsopp’s, “A Dao of Web Design.”
GitHub's not just for developers. Here are some ideas for getting the entire team involved.
Wherein I rattle on about the Web, content-first design, and progressive enhancement.
Turns out the most popular mobile devices in the world aren't from the makers of the iPhone or Galaxy.
A recent interview with a candidate got me thinking about values.
Transition effects for off-canvas views.
Or, more specifically, web pages are cake. Here's why.
Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?
Hawaii.gov is designed for mobile with a touch-first Responsive web design. Built for touch, speech, and with accessibility for all users, the new design showcases the very best in Web design thinking.
Space-saving drop-down menu with subtle effects
Responsive navigation plugin without library dependencies and with fast touch screen support.
Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.
Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing.
jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.
Flexible Media in Responsive Web Design with Dave Rupert!
swissted is an ongoing project by graphic designer mike joyce, owner of stereotype design in new york city. drawing from his love of punk rock and swiss modernism, two movements that have (almost) nothing to do with one another, mike has redesigned vintage punk, hardcore, and indie rock show flyers into international typographic style posters. each design is set in berthold akzidenz grotesk medium, all lowercase. many of these posters are now available for sale in three different sizes at print-process. every single one of these shows actually happened.
In his Responsible & Responsive presentation at Breaking Development in Nashville TN, Scott Jehl provided a lot of detailed information about what it takes to deploy a responsive Web design at scale by walking through what he learned on the Boston Globe redesign project.
You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. Don’t leave it up to your framework. Don’t leave it up to chance. Think about it and craft an experience.
“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy.
It should come as no surprise that we at Viget love having fun with design. On a recent project, Blair and I had the opportunity to do just that.
Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
In this article for ADCMW's FullBleed, I interview several well-known web designers and get their thoughts on the controversial topic of designing in the browser.
In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts.
The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction.
We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.
As web professionals, we all know that the concept of the page fold being an impenetrable barrier for users is a myth. Over the last 6 years we’ve watched over 800 user testing sessions between us and on only 3 occasions have we seen the page fold as a barrier to users getting to the content they want.
In this article we’re going to break down the page fold myth and give some tips to ensure content below the fold gets seen.
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
Recently, in a set of interviews we conducted with avid users of Netflix.com, the online DVD rental web site, we asked “What are the things you like best about the site?” Lots, apparently.
It’s one of the most important concepts on the web today—perhaps the most important for social media—but it’s one of the least understood. When James Surowiecki wrote The Wisdom of Crowds in 2004, he explored the stock market and other classic social psychology examples, but “web 2.0” was still nascent. It’s time to connect his ideas to the social web, where they can reach their full potential.
“The interaction designer’s role is one of facilitating particular uses for a thing, and possibly dissuading other uses.”
Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.
I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.
Sick of getting no credit for the cool sites you make? whobuilt.it lets you claim the sites you build!
Cufón aims to become a worthy alternative to sIFR.
How Changing a Button Increased a Site’s Annual Revenues by $300 Million.
Recently, I’ve begun an expedition with jQuery. My first major experiment has been in improving the commenting system on this blog. Sparked by an email discussion with Tomas Carrillo I’ve implemented a handful of small interactions which make it m… More
In this article I will propose a new method for organizing CSS that better maps to how popular web application frameworks are built; and I’ll also provide some helpful code to make this easy to accomplish. The examples I use are based on Ruby on R… More
CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer - From NealGrosskopf.com
For A Beautiful Web is a series of web design master class training workshops covering topics including visual design for the web, best-practice XHTML mark-up and CSS, Microformats and practical web accessibility design and techniques.
A demonstration of Superfish – a jQuery plugin that creates Suckerfish-style dropdown menus with added features.
Unit PNG Fix, from Unit Interactive’s Labs, is a comprehensive, yet light-weight png fix built in javascript. It’s free to download and use as you like!
This is a list of helpful links for those interested in perusing a career in web design, graduating from design school, or trying find a web design job.
Somewhere between PSD and JPG, Photoshop is draining our colors of their life, like some horrible, RGB-stealing vampire.
SXSW 2008 by the bullet points.
Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.
Now you can style both in this super easy and light-weight solution.
Add Icons to your Textlinks with CSS
What if one could harness Twitter messages from the general populous based around a single topic or event? Enter Politweets.
The world of standards-based web design and development has been undergoing something of a shake-up these past few days.
Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
A whole bunch of the DC crew is heading up to New York City for the Future of Web Design conference next week.
I'm happy to announce that Mixx has gone beta and we're slowly letting people in to hammer away on the system.
CircaVie allows you to create visual timelines of events: your life, a vacation, etc. etc.
Add hCards to your RoundCube Webmail installation.
I just added a feature I'm rather fond of.
The much-talked-about Project Ape Shirt has officially been born and christened Ficlets!
It's been a while since my last post.
I'm happy to announce we've just relaunched the Refresh DC site.
The latest design over at the Zen Garden is sick.
A new project at work has me diving deep into Microformats and XFN.
Here's an abbreviated list of things that have been going on lately.
Alex Giron just launched a new site, design fckr.
Yahoo! has a feature/mini-site devoted to the Nintendo Wii.
The Refresh DC site gets a jolt of Microformat-y goodness.
Khoi Vinh’s feed icon
Tavis found this yesterday while digging through some bookmarks and came across PJ Hyett's site.
Superfriend Cindy Li just launched a CSS-ified redesign of her personal site.
Ben Watkins and I are pleased to announce the launching of Rhythmic Uprising podcasts.
Casually late, it's a ridiculously brief wrap-up of this year's trip to Austin for SXSWi.
I recently handed over the reigns of the Global Youth Partnership for Africa site to their team.
This is horrible design.
Carbomb and I just finished up Groupr, a Flickr API app that lets you view the latest photos from your (or anyone else's) groups.
Refresh DC launched today.
AIGA has been posting a series of podcasts with the speakers for An Event Apart.
A good overview of 37signal’s Yellow Fade Technique.
The original Page Description Diagram article.
An extension of 37signals’ Yellow Fade Technique.
Page description diagrams are a text-only alternative to wireframes.
Another article about color theory.
An excellent article on choosing colors for your layout from photography.