Web Design

We all started somewhere, right?

This is a humbling experience.

I was inspired to compile these because of @justintadlock‘s tweet.

I went back to, the birthplace of my HTML debut. I built all my websites from 2002ish to 2006 in Flash (which sounds like a REALLY long time now). My introduction to HTML and CSS coincided with open source web design very nicely. Unfortunate for the Internet, though, I released seven simple HTML/CSS designs in 2006. Soon thereafter I found WordPress.

Five years later I hope I’m doing better.

Also … ugh … they’ve been downloaded a combined 79,644 times.








Web Design

Revisiting my development environment

Below is a graphical representation of what I’m proposing as a new development process/environment for my larger WordPress sites. I want your feedback.

This doesn’t include all the details. For instance, WordPress configuration files have to be customized for each server, database usernames should be specific to each environment, etc. But should this flow work?

WordPress Development Process

Web Design

HostGator needs you to use https, not git when cloning or adding submodules

Just a quick note that will hopefully save you some time. If you are trying to clone a GitHub repository using git:// you will run into fatal: unable to connect to You can switch to using the https:// protocol instead.

Further, submodules will need to be called with the git:// protocol as well. This was rather annoying because I had to delete my submodules locally, commit the changes, and re-add the submodule using the https:// protocol.

As annoying as that was to figure out, it’s working now so I’m happy.

You may end up needing a few other resources to figure it all out:

Web Design

GuessAges: A new side project

I’ve always wanted a reason to learn how to interact with Facebook’s APIs to make a social-rich website. I finally came up with the excuse.

GuessAges is a new site I’ve launched for a bit of fun, but mostly as a “can I do it?” sorta thing. The point of the site is simple and fun: find out how old you look (and help others find out the same).

The site is built on WordPress and heavily tied into Facebook. Users are required to login with a Facebook account, and then they can begin to guess the ages of other users. You can add your own photos with one catch: the only photos allowed into the system are those from your Facebook profile photos album. This helps to keep users accountable to using appropriate photos, plus profile photos are generally your better shots, right?

I’m interested in all feedback. Like I said, this was sort of an experiment. I learned a lot building this and really improved by programming skills, which I only dabble in as a front-end developer. From talking to Facebook’s API to creating standard deviation formulas to figure out how accurate you are at guessing I feel pretty good about what I was able to accomplish.

Web Design

Safe to Use @font-face Yet?

If you’re not familiar with @font-face yet don’t fret. For years web-safe fonts have been the only easily used fonts for web designers. Along the way, Flash and image alternatives have been made up to accommodate the barren typographic landscape of the web.

The obvious reason for lack of web-safe fonts is that displaying a font on a website requires it to be installed on the computer viewing it — of which only a handful are universally accepted as common enough to be web-safe.

A technique called @font-face was invented to remove the dependence on a user’s computer and instead use fonts from the web itself. So, in short, it pulls fonts from a web server rather than a local computer, making them viewable by anyone…almost.

Slow Browser Support

While @font-face does its job well, we’re stuck relying on browsers to support the feature. Surprisingly, Internet Explorer was an early supporter — since version four. The limitation is that it required fonts of a certain font file type that was/is infrequently used (.eot).

Fast forward to today and now every major browser supports @font-face in some sort of fashion. Firefox just announced support for the newest supported font type: .woff. So the web font is still evolving, but the big question: is it safe to use yet?

Yes, you can use @font-face successfully in all current versions of major browsers!

The Wait Is Over

All major browsers now fully support @font-face. You’ll need to pay close attention to which browsers accept which font types, but as long as you provide all of the different font types required you’ll achieve the desired effect.

Browser .otf TT, .ttf .otf PS .eot .svg .woff
IE4+ No No Yes No No
FireFox 3.5 Yes Yes No No No
FireFox 3.6 Yes Yes No No Yes
Chrome .3 No No No Yes No
Chrome 4 Yes Yes No Yes No
Safari 3.1+ Yes Yes No Yes No
Opera Yes Yes No Yes No

What Fonts Can You Use?

Any font can be used now with the availability of font converters. The best font converter I’ve found is Font Squirrel’s @font-face Generator. With many different settings for generating the most compatible font and the option to generate all possible font types, Font Squirrel’s generator is amazing.

Seriously, Any Font?

First, any font can be used assuming a font generator is able to properly render all  of the necessary font types .

However, judgment is necessary in which fonts you choose. Because you’re placing fonts on a server and making them publicly available you cannot use fonts that restrict distribution. So, only fonts that explicitly allow the use of a font for whichever purpose you’re intending (commercial, non-commercial, non-profit, etc.) are allowed to be used. In other words, if you have to pay for a font you likely cannot use it.

As An Example

The header above (As An Example) and many other elements on this page are using the font Graublau Sans Web, a free font available for use on the web.

Using @font-face

I think the easiest way to understand how to use @font-face is to simply download a font package from Font Squirrel and look at the stylesheet provided.

Available Font Types

TrueType (.ttf)
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. Source
OpenType (.otf)
OpenType is a format for scalable computer fonts. It was built on its predecessor TrueType, retaining TrueType’s basic structure and adding many intricate data structures for prescribing typographic behavior. Source
OpenType PS (.otf)
In addition, we have the PostScript (PS) “flavor”, sometimes known as OpenType PS or CFF-based OpenType and having an “.otf” file suffix. Adobe and font producers including Elsner+Flake, Emigre, Storm and URW++ typically produce fonts in the OpenType PS flavor. Source
OpenType TT (.ttf)
OpenType terminology redefines Windows TrueType fonts as “the TrueType (TT) flavor of OpenType”, sometimes called OpenType TT and having a “.ttf” file suffix. Microsoft and other font producers including Linotype typically produce OpenType fonts in the OpenType TT flavor. Since OpenType TT fonts are for all practical purposes internally the same format as Windows TrueType fonts, there are no problems getting such fonts to work in Windows. Even Windows 3.1 from 1992 will display such fonts. Source
Embedded OpenType (.eot)
Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Source
Scalable Vector Graphics (.svg)
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). Source
Web Open Font Format (.woff)
The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn’t introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers. Source
Web Design

New Standards at Develop Daly

A few weeks ago I watched the following video (it’s loooong by the way) and it pretty much changed my life. The lead front-end engineer at Yahoo! goes into detail on how to architect a site from the ground up, making it as usable by as many people as possible.

Also, from now on I’ll be using the Ultimate Website Checklist while creating sites. This will ensure all the Ts are crossed and Is are dotted…literally.