James Carleton

Backstory
Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we’ve been working in the “web safe” range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs
Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses

• Free unlimited use
• Limited options
• Doesn’t $upport typographers
• Sources:
  • The League of Moveable Type
  • Google Webfonts
  • Font Squirrel

Middlemen Services

• They worry about the licensing
• Huge selection
• Simplifies the compatibility mess
• Fixed Fee or Subscription cost
• Services:
  • Typekit
    Free/Paid Subscription ($0-100/year)
    Provides a wide selection of fonts, including Adobe’s library.
  • Fontspring
    One-time fee ($0-50 per font), unlimited use.
  • WebType
    Free Trial, Paid Subscription ($10-100/year)
  • Fonts.com
    Free or paid subscription ($10-100/year)
    Also provides a local copy for your mockups.
  • Font Deck
    Free trial, Pay per font, per year ($7.50 average)
  • For even more options, visit this great comparison by Sylvia Egger

How to use @font-face
This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS:
@font-face {
font-family: yourfontname;
src: url(http://www.yourfontfile);
}
p {
font-family: yourfontname, Helvetica, Arial, sans-serif;
}

@font-face is supported by these browsers (and newer versions):

• Internet Explorer 5
• Firefox 3.5
• Safari 3.1
• Chrome 4.0.249.4
• Opera 10.54 (Windows & Mac OS)
• iPad and iPhone iOS 3.1

@font-face file types vary by browser:

• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.

Services deliver the correct files for each browser, no mess.
If you host your own, you’ll need some help:

• http://www.fontsquirrel.com/fontface/generator
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
• http://ffffallback.com/

So, that all sound great, but what does it look like?
Check out these fonts in action:

• http://typekit.com/about
  Typekit’s own website showcases some great fonts
• http://www.onyourwayhere.com/
• http://lostworldsfairs.com/
  A really fun demo of various fonts.
• http://www.kiva.org/
• http://weareelixir.com/
• http://carletondesign.com/
  (This site uses typekit)
• http://forabeautifulweb.com/
• http://www.webfontsgallery.com/
• http://www.webfontawards.com/

Even more info:

• Zeldman.com: My Love Hate Affair with Typekit
• The Big Web Show: Web Fonts
• Font Face Tutorials
• Web Typography
• Web Font Services

So, what are you waiting for? Go explore the new world of real fonts on the web!

I have completed a redesign of my personal portfolio website. Visit carletondesign.com to check it out.

I thought I would let you in on the design and development decisions behind the project.

Design
First, let me say designing a site for yourself can be a bigger challenge than pleasing your pickiest clients. I went through multiple iterations of several different design directions before settling on the final styling. The earlier versions had fine details, textures, and color tones that were really nice, but the problem was, I was making more work for myself than necessary. I realized that my site doesn’t have to showcase my finest details or adhear to the latests design trends. Instead, I turned toward simplicity. I cut the personal monogram that perfectly balanced positive and negative space which boasted a brushed metal texture and realistic highlights and shadows. I cut the multi-state navigation menu that had a mechanical feeling I loved. Instead, I thought, what would the site look like if I used zero graphics (other than the portfolio images) and only text. This self imposed constraint roped in my creativity and allowed me to focus on getting it done. I had the design comp done in a half hour, and I loved it. The layout is simple, the details are subtle and it’s designed to focus the visitor on my work and the calls to action. I also designed the copy to reinforce the simple, get to the point style, that is me.

Development
The simplicity of the styling inspired a simplicity in the code. I worked to keep the code clean and flexible. It validates!. The layout’s simplicity also hides it’s best feature: flexibilty. If you didn’t notice, go back and resize the broweser window. Watch the site adapt acordingly. Thanks to some inspiration from Ethan Marcotte, the images and layout scale based on the size of the browser window. I’ll be digging deeper into these strategies and making further improvements, but I love how it works so far. I first coded the site without the CSS3 drop shadows, transparency or fonts. Once the foundation was laid, and tested, the embellishments were added. I have the advantage of focusing on an audience that uses the latest browsers, so I took a vacation from the usual struggles of browser compatibility and had fun with some nice features. The most visual feature is the custom font, Museo sans from Typekit. I love typography and have been folowing the boom in web fonts closely. I’ve used @font-face before but thought I would find out what all the hype around Typekit was about. Now I’m a believer. In a matter of minutes, I had a cross-browser/platform solution that enabled me to use a wide variety of high-quality fonts on my site. Wow, thinks sure have changed.

Like most websites, it’s never done, but reaching this point feels great. I enjoyed designing and developing this new site and hope you enjoy browsing it.

Friends have asked how to get started learning web development. The good news is that it’s pretty simple to get started building websites. Like anything, it takes a lot more time to develop your skill to a professional level. Here are a few resources to get anyone started in the right direction.

W3 Schools is a comprehensive guide to web codes. Guided lessons and quick reference for html and css makes this very helpful tool for newbies and pros.

Editors
There are a wide variety of HTML editors but your can start with any simple program like Notepad or TextEdit. More elaborate programs such a Dreamweaver can write code for you but such WYSIWYG applications can slow down your learning and become a crutch. Although simple to use, the code they generate is often not semantic or efficient. I suggest learning to do it yourself, the time investment will pay off in better results.

W3C
Once you get into the code how to you know your doing it right? Easily check your programming with W3C’s html and css validators. These tools check your code against the official standards and even suggests improvements.

Books
There are countless books that can guide you through development of a simple sample site. I recommend getting books by experts in the industry: Jeffery Zeldman, Eric Meyer, Dan Cederholm, Jeremy Keith, and others. (I’m working on a specific list.)

Once you get started you can follow blogs such as A List Apart, Nettuts, Smashing mag, .net mag, and more to keep up with the latest techniques.

Have fun! Start with a project you’re really excited about, instead of the one thats due tomorrow.

What do you think of when you see a beaker full of unknown liquids? Scientific experimentation comes to mind. I’ve noticed a rise in logos and illustrations which contain a scientific symbols, such as beakers or test tubes, used to represent the experimental qualities of web/software companies. Here are a few examples that work well:

(Images property of their respective owners.)
I like the idea of borrowing the symbols from a traditional field to represent something new in technology. I used the term ‘lab’ as part of a name for a friend’s new co-working space and love how it symbolizes groundbreaking ideas in action.

There are some great new features rolling out with CSS3 and HTML5 that will make life fun for web designers/programmers. Simple rounded corners, integrated video and fancy transitions are just a few of the many new options provided to developers. To varying degrees, browser makers are bolstering their support for these advancements in their latest versions.

Whenever new browser versions arrive, the question is raised on what features are widespread enough to take advantage of, and what level to design for. Users have many options for browsers, and then many versions of each browser. Some keep updated to the latest versions, others lag behind.

How do you know if your visitors will have the capability to experience the fancy new additions you spent so much time building? You could target the most common browser and avoid creating anything that isn’t compatible. Instead, I want to suggest and idea proposed by people smarter than me, called progressive enrichment. I love this idea.

In his book Handcrafted CSS, Dan Cederholm skillfully asks, “Do Websites Need to Look Exactly the Same in Every Browser?” His answer is no. Instead of being disappointed that the new features don’t show up in older browsers, shift your thinking to the standpoint that newer browsers are rewarded with enhanced features. Think about benefits instead of problems. This may be a big change in thinking for decision makers who expect one design to be rendered exactly the same in all browsers. If properly built, the layout, readability, and features could be developed similarly in each browser, but the finer details would differ as browsers support them.

Dan also suggests that the degree of your progressive enrichment should be tempered by your site’s specific stats. He quotes another smart guy, Eric Meyer who said it doesn’t matter what the global stats are for a browser, but it does matter what your specific site’s stats are. If your particular audience is full of early adopters, you have more freedom to enhance the site with the latest and greatest. However, if many of your site’s visitors are on earlier browser versions, you should focus on more widely supported features.

So if you’re skimming this, here is my point: Because there is a delay between the release of new browser features and the adoption of browser software, you can’t simply develop sites dependent on advance features. On the other hand you shouldn’t develop to the lowest common denominator. I suggest using progressive enhancement to enable advanced browsers to enjoy new features while still providing a great experience to lesser browsers.

Further Reading:

I recently transitioned from being a self employed consultant, to a corporate employee. I went from wide responsibility to all aspects of my own business into a specialized cog at a big, high speed corporation.

I enjoyed the freedom of working on my own schedule, choosing my own priorities, and moving in the direction I choose. Freedom is liberating, but a challenge to sustain. You can’t rely on anyone else to carry you. It takes determination and endurance to conquer each unique task that arises in your work projects and business administration. Not an expert on tax law? Time to learn quick or hire a consultant. Need to take a vacation? Your projects won’t get done with out you. It’s all you, the good and the bad. Some days go well, others don’t, but your task is to sustain your quest toward your own definition of success.

In contrast, the corporate environment is organized and optimized. I was hired to be one part of a larger team, which is in a larger department in a larger company with multiple locations, with an international reach. Instead of balancing an array of responsibilities, I’m focused on one set of tasks which I apply repeatedly to a specific type of project in an exact timeframe, during business hours, in the company’s facility. Working in a team of specialists that are focused, toward carefully planned goals, has benefits in efficiency and productivity. Each member of the organization is able to focus on their specific task and rely on others to provide their complimentary piece of the puzzle. The organization is appropriately rigid and strategically focused on its specific measure of success, while the individuals seek further development/advancement for themselves.

I don’t know which I prefer, there are benefits and challenges to each. I like taking the afternoon off on a whim. I also like the camaraderie a group provides. I like making a big impact on small projects, but it’s also rewarding to make a small impact on a big scale. I’m grateful for the option to try each work environment and aim to learn from each situation.

For the moment, the idea of a small, diverse team of specialists that collaborate in a creative and flexible environment seems the most attractive arrangement. It can combine flexibility of being solo with the productivity of a team, while retaining a size that allows greater ownership of the work than a bigger company can foster.

Search engine optimization is the voodoo of web marketing. Many people claim to be experts at getting your site to the top of Google’s results, but wont disclose their magic tricks. When search engines and the internet were new, promoting your site was simple. Things have changed but the basic principles can still be conquered. Dump the voodoo and get going on the basics:

1) Skip the tricks, build it right
You can’t trick Google into to higher search placement. Don’t try it. Shortcuts don’t work. I’ll admit that in 1999 I built a site with SEO tricks, it seemed smart at the time, but I’ve learned better. Instead of tricks, rely on website code that is clean, lean, organized, and valid (meets web standards).

2) Keep it real
A site’s content is it’s best SEO tool. In the planning stage, decide what keywords your site should have based on how users search. Next, write good text content that contains those words. Talk about those keywords in your site, use them in your domain name, page titles, and headlines. You might have heard about keywords and meta tags. Meta tags are code in your site that is there just for search engines. While it’s not as important as they used to be, it still helps.

3) Do what search engines suggest.
Search providers are open about their requirements if not their exact methods. Many will promote their paid services but there are plenty of free steps you should take to make your site findable. If your starting from scratch, submit your site to Yahoo’s Directory and the Open Directory Project. XML sitemaps can be used to help search engines navigate more complex websites.

4) Spread the news
Links from related sites are valuable for SEO. Reviews, articles, and press releases about your site help build your credibility and increase paths to your site.

4) Be patient
Don’t expect overnight results. If your building a new site it will take time for your site to be indexed by search engines. Stay focused on the long term goals instead of instant gratification.

These basics are a great start to getting good search result for your site, but there are, of course, many more details you can delve into, even as a career. As complex as it gets, it boils down to creating a well built site that has quality content.

More info:
Wikipedia: SEO
Google’s Guide to SEO
Basics of SEO

I’ve noticed this wrap-around or folding banner thing showing up around the web. I like it. Simple effects like this add layer and depth to the flat images on screen.

The term crafting brings to mind the knitted sweaters my aunt made for Christmas gifts. Those weren’t worn much after that day. The old stereotypes of crafts are being redefined by a new generation of creative people. Today’s crafts are functional, stylish or cute creations that appeal to a new audience who are tired of massed produced options from the mega store.

If you appreciate hand made items, you used to visit your local craft fair. The halls were filled with knit pot holders, yarn haired dolls and jewelry made from “friendly” plastic. Today, crafting is back and it’s high-tech. Creative folks have turned to the web for inspiration, instruction and customers.

Websites like Etsy.com (rhymes with Betsy) are built as a marketplace for crafters. Customer can buy a wide range of items from talented crafters without leaving their couch, while crafters get a worldwide audience for their specialized creations. Several of my family and friends have gotten into it the craft business with the help of Etsy.

Feel like creating something unique? Share it with the world. Love hand-made items? Have fun shopping. Crafting 2.0 has arrived.

After two nights of intense design and development, a new site has been released for E&J Design, a collaboration between Eric Ritchey and myself. Nothing like a deadline to motivate! We’re stoked to have it live, but have more in the works for the future. Take it for a spin: www.eandjdesign.com