Article Archives

For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers …

Some design patterns have been explored fairly thoroughly as we’ve moved into an era of responsive design. Others not so much. There are plenty of complex patterns that are still worth exploring, like this one.

Eric Meyer (@meyerweb) is a CSS champion, author, and co-founder of the An Event Apart conferences. He talked about the end of an era of layout (and the beginning of a new one).

These are my notes …

Nicolas Gallagher (@necolas) is a front end developer at Twitter and has worked on big projects like HTML5 Boilerplate and Normalize.css. Nicolas talked about questioning old assumptions about front end web development.

These are my notes from …

Tomomi Imura (@girlie_mac) works on the Open Web at Nokia and talked about real life use cases for HTML5 on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this …

Luz Caballero (@gerbille) used to be Dev Relations at Opera and talked about the mathematical world of device orientation on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this …

Ariya Hidayat (@ariyahidayat) works at Sencha and created PhantomJS and Esprima. He talked about front end web performance.

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series…

Brad Hill (@hillbrad) works at PayPal work works with the W3C on security issues.

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series.

You can’t read anything …

Léonie Watson (@leoniewatson) is a digital accessibility consultant from Bristol, UK. She believes in the importance of accessibility and also that it’s not a hinderance to creativity.

These are my notes from his presentation at W3Conf in San …

Joshua Davis is an artist who sees the web as a creative canvas. He uses computers to make art, but isn’t limited to that as a tool.

These are my notes from his presentation at W3Conf in San Francisco as …

I read this Tim Kadlec article a while ago but the more I think about it the more I like it.

If you are going to take performance seriously (instead of just paying lip service to it or chipping away …

I need to do a better job at at using the role attribute. It’s so easy and has so many benefits. Important note: all content should be within a landmark role. Steve Faulkner shows the way.…

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the “Old” and “New” syntax. But if we weave together the old, new, and …

I thought my trip to New Zealand for Webstock warranted a special workshop. In honor of their unique national bird, I created a little one-pager website The Kiwis of New Zealand. The site started life as a simple Photoshop …

Martin Wolf interviews yours truly on his blog, which is a very good mostly-link-blog-with-commentary you should subscribe to.…

A reader (let’s leave them anonymous) writes in:

The agency where I work has never produced a responsive design. As a developer I’m handed fixed-width designs in the form of static PSD comps. I’m then expected to slice these up, …

In which Dirk Lüth shows an experimental RWD technique where layouts (and just about everything) is controlled with rem units and the base font size is adjusted based on screen width available.

Ana Tudor with some fantastic visualizations to help understand how CSS gradients are rendered.…

The recent post about marking up navigation in lists (or not) generated nearly 200 comments of mostly-great discussion on this topic. I thought it would be of benefit to wrap up up the important points.

“Against” navigation in lists

• At

…

Alt text has come up a bunch of times for me recently. One reader wrote to me asking if people really use them anymore. He does and said “I feel alone in carrying out the good fight.” ALA posted a …

The latest poll on CSS-Tricks was all about version control usage. People voted on how much they use version control, from never to using on every single project. Here’s the breakdown:

And now a few paragraphs worth of ALT …

Credit card numbers, expiration dates, and CVV’s are all numbers, so why not collect them all in one field and leave the number keypad open the whole time? Good idea, Zachary Forrest. via Luke.

Related: if you use Stripe, …

If you Google around on whether or not you should use lists as the markup for navigation on websites, you’ll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists …

In which we look at some things that I think would be pretty nice to have in CSS. And also some things that are actually likely to happen. And why that’s probably better.

Maybe not the last one ever ever, but the last one for now in this series of five or so we did in this round. Includes questions about CSS performance, choosing class names, getting the right line numbers in the …

Over at ShopTalk, we’ve gotten a number of requests from folks that wished links in our show notes would open in a new tab. They’ve gotten burned by clicking a link on the page while listening to a podcast …

I recently received this email from a reader who is just getting started as as front end developer and wanted to get into CSS preprocessing. It has a few common misconceptions in it that I hear quite often. So, blog …

The following is a super duper serious critical review of the book CSS for Babies. Super. Duper. Serious.

…

I’m afraid even the title of the book is an invalid CSS style declaration.

Are we capitalizing tag selectors now? That’s

Recent forthcomings are forthcame upon the page in deepest regard to the events of the fortnight and even beyond.

Jonathan T. Neal digs in. The low down: most browsers can deal with PNG, but if you specify an ICO, it will use that anyway. IE (even 10) don’t support PNG, so you need ICO. So, use ICO. Apparently this …

Fabrice Weinberg shows us a future web technology in which you can use just a part of a bit of media. In this case, a part of an image. The ability to do this will open up some new possibilities for designers.

“Every time I type a web address into my browser, I don’t need to be taken to a fully immersive, cross-platform, interactive viewing experience,” said San Diego office manager Keith Boscone. “I don’t want to take a moment to provide …

Shay Howe has started a new learning series on HTML & CSS, this time moving beyond the basics into the real nitty-gritty stuff you need to know as a front end developer. 3/10 are done, with a new one coming …

Responsive designs can squish content inward when zooming, breaking a decent layout after just a few zooms. One reader writes in who really dislikes this on CSS-Tricks. But it’s (mostly) fixable! Just make those media queries EM-based instead of pixel-based.

Dave Rupert heads up a new project:

For many web developers, accessibility is complex and somewhat difficult. [The Accessibility Project] understands that and we want to help to make web accessibility easier for front end developers to implement.…

I’m not hugely into wireframing, but I can see the value in some workflows. This tool for it is deliciously simple. I like the UI touch where if you resize the “browser” window small enough it turns into a phone.…

In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user’s Twitter avatar, Facebook avatar, or Gravatar. That’s a smart move. Avatars …

JavaScript is interesting in that it enforces no particular structure upon you. “Bring Your Own Organization”, if you will. As I write more and more JavaScript in web app sites, this becomes more and more interesting. How you structure your …

Bruce Lawson interviews the editor of the HTML spec. A candid look into how the web evolves and its future by someone who has a lot more power in shaping it than we do. You know it’s going to be …

Jesse Shawl takes an old(ish) CSS-Tricks demo and updates it for today’s world. Using the HTML5 history API he changes the URL and content of a page when navigation items are clicked, without refreshing the page.

In which I go over many of the important parts of a workshop I did for a small room of folks in Honolulu, Hawaii. Includes the Photoshop file we worked from (kinda) and a GitHub repo of where we ended up.

Speaking of workflow stuff, check out this short video by Remy Sharp showing us how you can use Chrome DevTools as a code editor. Literally edit JavaScript and save it back to disk without ever leaving the browser.…

John Gruber shows us tools and steps for creating retina ready favicons.

When I looked into this a few months ago only Safari was even supporting them, but it appears as if Chrome is now too, so I’d say it’s …

This week Dave and I were joined by David Walsh, a long time fellow blogger and now Mozilla employee. We talk about em-everywhere, analytics discrepancies, tendonitis, and more! Thanks to In Control and Lynda.com for sponsoring. …

The problem with gradients is that they are a syntactic nightmare. The gradient spec writers and browser makers changed their mind not once but twice. Thus we have three sets of syntax, and all three occasionally crop up even today. …

By “style injection”, I mean being able to see styling changes immediately after authoring them without having to manually refresh your browser window. This isn’t a brand new concept, I just mention it now because it’s so awesome that if …

A bunch of research from Rakesh on the correct values for nested border radii. The conventional wisdom is Inner Radius = Outer Radius – Border Width. This holds true here, but what if that yield a negative value. Also see …

Alex Maccaw with a bunchload of up to date information on CSS transitions. Includes some clever stuff like a trick to avoid transitioning width (not very performant) by instead moving the element and exposing more of it underneath.

I also …

It has been a long-standing bug in WebKit that pseudo elements (like ::before and ::after) cannot be animated or transitioned. As of yesterday that bug was fixed thanks to Elliott Sprehn. You can pop open Google Chrome Canary and see …

There are two kinds of JPGs in this world: baseline and progressive. Progressive is just better. Ann Robson shows us why.

Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) …