Category Archives: webdev

Three options for sharp, responsive logos

Web developers and graphic designers don’t like to see blurry logos, like we often see on retina displays. Generally, we will “fix” a unsharp logo by serving a PNG that is twice the resolution. This is a decent solution, but not an ideal one. Rasterized graphics will always be resolution dependent. Logos, in particular, wants to be what they are: vector, or line art. Here are some suggestions for making a logo crisp and responsive:

1. Icon Font

If you’re already using an icon font, and your logo is a single color, and it’s not too complicated… just add your logo as a glyph to the font. This is my favorite solution because it’s *free*; you don’t need to make an extra request, and your font file will not grow substantially.

2. SVG

Some people think “Dammit, why aren’t we using SVG already?” To me, SVG is like a very nice, but not perfectly ripe, fruit. Here’s why:

  • You need a fallback for IE 8, and maybe previous Android (but fallbacks are easy)
  • It’s an extra request OR an un-cacheable inline graphic
  • SVGs saved out of Illustrator are generally much bigger than PNGs, and need special care — for example, refined bezier curves — to be decently optimized

Once you put the effort into making an SVG logo, you can do special things with it, like style and animate with CSS.

3. @font-face

You can also load the font that your logo was created in, and then display it as text. But it may not be that easy, or an option. Branding is very particular, and logos often have special kerning between pairs of letters, as well as custom glyphs and art. It’s not always feasible to reproduce some logos as text. I see that the css-tricks logo is simply text with a font applied, but that font is also used in the body — they get it for free.

(One last idea: I suppose we could combine #1 and #3 and include the specific letters that make up a logo as glyphs in an icon font. That seems messy and perhaps is trying too hard. Let’s NOT make that #4, but it’s an interesting idea.)

There you go. Exploring one of these options is a bit more work than adding an additional, higher-res PNG, but the reward is a very flexible resource: a single, ultra-crisp logo in any view.

Replace images with CSS gradients for striped backgrounds

One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3. Currently I’m exploring, and trying to have a very good understanding off, all the ways we can use CSS3 to create layouts instead of resorting to using images that create http requests and slow down pages, especially on mobile devices.

The site I happen to be working on has three different backgrounds with vertical stripes. Figuring out how to replace the images it currently uses with CSS is a big win, provided that the size of the CSS required to create these backgrounds is not prohibitively large. (Background images tile and can be very small files — it’s the http request for the image that is more expensive in terms of performance.) In the case of stripes, the CSS is small.

So how do we make striped backgrounds with CSS? The place I looked for and found the answer is Lea Verou’s CSS3 Patterns Gallery. This gallery blows my mind with the possibilities of how to use CSS3 gradients to make backgrounds. What I’m doing in this example is relatively very easy; the gallery includes plaid, hearts, checkerboards and many other cool patterns.

As far as I can tell, there is no easy way to copy the cross-browser CSS from the gallery. Therefore I’ll provide it here, and show you how to take thick gray lines and create other colors and widths.

Here’s Lea’s vertical stripes background and the code to create it:

.verticalStripes {	
	background-color: gray;
	background-size: 50px;
	background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
	background-image: -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
	background-image: -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);	

The backgrounds I need to re-create are blueish with very thin, subtle lines. Here’s a screenshot of one of the replaced backgrounds with the code.

.verticalStripes {	
	background-color: #99d0d4;
	background-size: 10px;
	background-image: -webkit-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 90%, rgba(255, 255, 255, 0.25) 50%);
	background-image: -ms-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
	background-image: -o-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);		

It’s easy to take these examples and create variations. Here we are taking one color, and putting a transparent sheet of another color on top, shifted X percent. In the blue stripes example, the total width of the repeating background is 10px and the part of it that is overlapped with transparent white is 10% or 1px. We could replace 90% with 9px if we wish, but using a percentage here may be more maintainable.

What if we want two different colors, not a color and a shade of the same color? We can just take our transparent sheet and put another color, not white, on top of it. Here I’ll make red and purple stripes using red as a base color and blue as the overlay.

.verticalStripes {	
	background-color: #ff3300;
	background-size: 50px;
	background-image: -webkit-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
	background-image: -ms-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
	background-image: -o-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);	


As you can see this is very flexible. I’d challenge you to find a striped background that can’t be replaced with CSS. If you want red and green stripes, you might need to find another solution, like a background image. But if you want red and green stripes — the idea alone gives me a headache — you could be deliberately punishing your user anyway, and you might further torture them with a slow page.

File under: big wins.

A Nice Call to Action Button

We are replacing our large image buttons with markup. Yay! I think what our designer came up with is quite nice, and easy to build with CSS3, so I’m sharing it.

Sample Button

Here is the CSS:

.button2012 {
   border: 1px solid #c95d00;
   background: #fa962f;
   background: -webkit-gradient(linear, left top, left bottom, from(#fa962f), to(#ee7106));
   background: -webkit-linear-gradient(top, #fa962f, #ee7106);
   background: -moz-linear-gradient(top, #fa962f, #ee7106);
   background: -ms-linear-gradient(top, #fa962f, #ee7106);
   background: -o-linear-gradient(top, #fa962f, #ee7106);
   padding: 5px 20px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   text-shadow: rgba(20,20,20,.6) 0 1px 0;
   color: white;
   font-size: 18pt;
   font-weight: bold;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
.button2012:hover, .button2012:active {
   background: #ee7106;

You can make the button and the hover any color you want, of course, although A/B tests have shown that red buttons convert better.

The Difficult Search for Front-end Engineers

My company,, is having a difficult time finding front-end engineers. We’ve gone through many résumés, screened many people, and brought in a few for interviews. But none have the chops. This has made me very thoughtful about my role and my career.

A coworker of mine said that she knew several recently jobless people who know “more than front-end” as if the “more than” would sell them to me. I might have been kind of rude when I said “I don’t want more than front-end.” I just want a couple people who know front-end development well.

I think the role is under-appreciated by everyone. A service we used to find engineers matched us with back-end programers, but their front-end candidates were all a bust. Why? Because even professional technology screeners don’t know what to look for and there are very few good front-end web developers. The difference between Paul Irish and 99% of web developers is vast. The job seems easy perhaps, but a foundation is key.

For example, many front-end engineers (all I’ve interviewed) do not know CSS specificity well. That is, they don’t know the rules that determine what style an element will have. This is important to know! It removes the guesswork from styling and saves developers a lot of time. And if you don’t know it well, you will write poor markup and CSS and create hell for your client and anyone who inherits your code. You curse them basically, forcing them to write even worse markup and CSS to gain control.

Here is a list of questions I’m asking front-end candidates this week. I’ll also give the kinds of answers one would want to hear, so that screeners have a guide.

What are the rules that determine what style will be applied to an element?

element -> class -> id -> inline

———–> (increasing specificity)

(!important) element ->  class -> id -> inline

———–> (increasing specificity)

Why would you use a JavaScript framework?

1) reduce cross-browser worries. 2) cleaner, simpler code. 3) plugin library.

What are some elements introduced with HTML5?

Ex. video, audio, canvas, aside, section, nav, footer, time, input type=”tel”, input type=”email”….etc.

How might you use new HTML5 elements while supporting browsers that do not recognize the new elements?

HTML5shim (“shiv”) for < IE 9.

What are some neat things you can do with CSS3?

Animations and transformations. Alpha transparency…

What online resources do you use?

MDN would be a good answer. W3Schools would not be.

What are your favorite webdev blogs?

Remy Sharp, Paul Irish,, CSS-Tricks, A List Apart

What’s a closure?

Enclosing code in a function, and a good practice.

How might you keep a resource from being cached on the front-end?

Add a random string as a query parameter to the resource URL.

What are some ways to improve page speed?

Defer JavaScript, minify and combine linked resources, use better compression for images, use the Google Library API for common scripts, CDN, image sprites…

What is the last web development book you read?

Introducing HTML5, The Book of CSS3, Mobile First are good examples.

How might you transfer state between pages?

Cookies, HTML5

When would you use gif, jpeg and png?

PNGs compress better than GIFs and are very well supported by modern browsers, so use PNGs. JPEGs for photos. GIFs for simple animations possibly if you had to.

When would you use Flash, Canvas and SVG?

Canvas elements are raster images and so if you want to manipulate pixels, use canvas. SVG is vector art. Don’t use Flash.


The Difference Between Pseudo-Classes and Pseudo-Elements

A pseudo-class is a feature of an HTML element that can be styled but is not available via the document tree. Pseudo-classes are often used with the anchor tag: a:link, a:hover, a:visited, and a:active. Some pseudo-classes can accept values such as lang :lang pseudo-class: p:lang(fr), :lang(de).

Pseudo-elements are abstract sub-elements of an html document: ::first-letter and ::first-line are examples.

If you were an HTML element the state of your eyes being closed, open or squinting would be a pseudo-class, and your pinky toe would be a pseudo element. Go ahead and do this exercise yourself to sort pseudo-classes and pseudo-elements. 🙂 What would your grandmother be? (hint: “behind”)

Previously, pseudo-classes and pseudo-elements have looked exactly the same: element:pseudo-something. Which is kind of nasty considering the mental energy that goes into separating these ideas. But the Level 3 recommendation has improved the visual distinction. Pseudo-classes continue to use one colon, and pseudo-elements, going forward, use two.

Pseudo-elements with one colon will always be supported for existing pseudo-elements, but that’s not true for pseudo-elements that are introduced, so we aught to get in the habit of using two colons.

Burn the following selectors into your mind:


and to contrast:


Should we worry about browser support for the new syntax of pseudo-elements? Nah, progressive enhancement, Baby! It is indicated that earlier versions of Internet Explorer do not support two colons but I have confirmed that IE 8 supports all, with the exception of ::selection, perhaps. In this case I would use two colons and not try to write both in your style sheets.