Article Archives

Quotes & Accents

Reminders about what keys to press to get curly quotes and accented characters by Jessica Hische. I'm a major offender (SEE?!). I should be writing in Markdown which automatically fixes it. …

151 comments

Using SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.…

35 comments

Mixing Responsive Design and Mobile Templates

You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.…

54 comments

Uniqlo Stripe Hovers

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 as possible, they used an animated GIF to produce the effect. It's fairly small at 4K, but as we know around here, it is also another HTTP request. Let's reproduce the effect in a progressive enhancement style: less browser support …

13 comments

Search with Filters Responsive Design Pattern

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.

Setting a Performance Budget

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 at it) set hard limits that your site will not cross. Say something like 300k total page weight, 25 requests, and 100ms response time. Nothing may exceed that. If something does, it's all-hands-on deck to fix it. Treat it like …

Using WAI-ARIA Landmarks

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.…

58 comments

Using Flexbox: Mixing Old and New for the Best Browser Support

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 in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids …

22 comments

Notes from My Workshop at Webstock ’13

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 document and during the workshop we turned it into a complete finished website. Below is a list of everything we covered in that process.…

The Amazing Web Interview

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

80 comments

Group Advice: Working on an Anti-RWD Team

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, run some browser tests, and push them live. …

66 comments

REMux: An Experimental Approach to Responsive Web Design

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.
57 comments

Wrapup of Navigation in Lists

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.…

82 comments

New Poll: alt Text Usage

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 reminder about when using alt text is unnecessarily repetitive. I ran across this flowchart in the comments there. The A11Y Project has a tip page on them. So I figured it would make for a good poll this round. …

Credit Card Info in One Field

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, that might be literally all you need to collect payment. But other payment processors often require more info (like address) so not collecting that info is dangerous (should you need to switch someday).

And speaking of UI experiments, this is …

218 comments

Navigation in Lists: To Be or Not To Be

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 for navigation. The vast majority of templates you see will use lists for navigation. But is this ubiquitous markup pattern absolutely correct? Let's see.

Note: make sure to check out the wrapup post of what we learned about all this…
142 comments

2013 CSS Wishlist

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.

Smashing Mag CSS Q&A: Final Edition

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 dev tools when using preprocessors, how to think about @extend, and more!…

26 comments

Don’t Stop The Music: Links on Pages Playing Audio

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 via our embedded player. When the browser leaves our page and goes to the link, the audio stops playing. We can do something about that.…

64 comments

Lingering Misconceptions on CSS Preprocessors

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 post.…

11 comments

CSS-Tricks Chronicle X

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

Understand the Favicon

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 is the best app for creating an ICO with multiple formats (32x32 and 16x16).…

14 comments

Media Fragments URI – Spatial Dimension

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.

Internet Users Demand Less Interactivity

“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 my feedback, open a free account, become part of a growing online community, or see what related links are available at various content partners.”…

An Advanced Guide to HTML & CSS

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 each week.

If you need to start more basic, Shay's original "A Beginner’s Guide to HTML & CSS" is also great.…

51 comments

Zooming Squishes

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.

The Accessibility Project

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.…

Wireframe.cc

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.…

20 comments

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

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 give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is good for engagement.

Let's create a page where a user can update their avatar with as little friction …

95 comments

How Do You Structure JavaScript? The Module Pattern Edition

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. …

Interview with Ian Hickson

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 good when the first question is:

If you could wipe out any web technologies from existence, which would you choose?

And the answer is: everything.…

72 comments

Rethinking Dynamic Page Replacing Content

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.
6 comments

Workshop Notes from InControl Hawaii

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.

“Never Having to Leave DevTools”

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.…

How to Create Retina-Caliber Favicons

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 time. Firefox and Opera still do not.

John recommends making an .ico with both 16x16 and 32x32 versions. The theory being that you can hand-craft a 16x16 aesthetically better than a browser can scale down your 32x32. For my simple …

ShopTalk Episode 49

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. …

PPK on Gradients

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. I call these old, middle, and new syntax.

I still haven't totally grokked the new syntax where linear gradients start with "to" or an angle.…

61 comments

Style Injection is for Winners

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 it's not a part of your workflow you should consider updating yours to include it.…

We have a pretty good* newsletter.