I recently posted about using @font-face in your web design, and today I want to feature five very awesome fonts that are free to download and use with @font-face. The download links will allow you to download the font’s @font-face kit directly, which usually includes the font file(s), license file, and a stylesheet. Enjoy:

My Underwood

Good for: writer’s blogs, vintage designs, or ransom notes.
Download: My Underwood @font-face kit.

Chanticleer Roman

Good for: formal and traditional designs, essay blogs, or invitations.
Download: Chanticleer Roman @font-face kit.

Souci Sans

Good for: retro styles, fancy designs, large-sized headers.
Download: Souci Sans @font-face kit.

Creampuff

Good for: girly designs, baby announcements, retro applications.
Download: Creampuff My Underwood @font-face kit.

Andika Basic

Good for: modern designs, or when you’re tired of Helvetica and Arial.
Download: Andika Basic @font-face kit.

What are your favorite @font-face fonts?

I’ve posted before about using MAMP or XAMPP to run your own personal webserver on your Mac, allowing you to do very cool things like testing WordPress themes locally. Both MAMP and XAMPP include phpMyAdmin to manage your MySQL databases, which is perfectly fine of course- and, I should add, it’s always a good idea to know how to use phpMyAdmin anyway- but what if you want a standalone application for this?

Navicat

Most people have heard of Navicat. It works on Windows, Linux and OSX, with a non-commercial version that costs $179. It is a very powerful tool, has a good GUI, and because it’s cross-platform, this would be a good choice if you use both Macs and PCs for work.

Sequel Pro

My choice for a MySQL manager, Sequel Pro is easy to use, offers features such as SSH Tunnel and Foreign Key support, and- my favorite- keyboard shortcuts. They claim to be the “best looking MySQL Cocoa app”- and, as you can see from the screenshot I’ve posted, it is pretty great looking. It’s also free.

The Command Line

I’m talking, of course, about using OSX’s built-in Terminal to manage your MySQL. For details on how to compile MySQL using Terminal, see this excellent tutorial for Leopard (a tutorial for Snow Leopard is here), and once you’ve got MySQL installed and running properly, use the the MySQL Reference Manual to help you along with commands.

How do you manage your MySQL databases?

This week on Friday Focus, we have websites that feature circular shapes prominently in their designs. Time to break out of the boxiness and round things up!

Designs of the Week

Excellent concept and presentation, I love it! The only problem here is the way the site was coded: old-school mouseovers and preloaders.

I like that instead of the usual rounded-corner buttons we have circular buttons here. Another freeform layout.

I really like the navigation boxes right below the header, and how everything’s side by side, without borders. I also like the color palette here. It’s very professional, but not your cliche combination of hues.

Another pro site, but this time the circular photos give just a touch of hip. I just wish the elements were repeated in the inner pages.

How often do you see galleries with images masked by circular borders? It changes things up quite a bit, doesn’t it? I would have liked a bit more detail here, but since it’s a showcase site anyway, putting the focus on the featured sites is fine.

I really wish this were more than a landing page, because I’m curious how they’d implement the design on a full site, which unfortunately doesn’t carry over to the blog. Maybe next time.

So well done. The grungy details don’t look tiresome; the circles inside boxes makes everything look different; and the orange and gray combination just leaps out at you.

Social Media Weekly

Design – 16 Great Photoshop Light Effect Tutorials

Typography – 10 Great Font Resources

Programming – Best CAPTCHA Solutions

Programming – 10 Top-Notch CSS Editors

I’ll admit that I was a little mystified by the <pre> and <code> tags. If you’re not sure which to use and when, here’s a quick guide:

<pre>

• is short for pre-formatted text.
• is displayed in a fixed-width font (such as Courier).
• preserves both spaces and line breaks.

You want to use <pre> when you need to display text exactly as you typed it. Keep in mind that all spaces, tabs, and carriage returns will be preserved- which is why it’s a popular format for publishing poetry. For example, this:

<pre>Hello, I am
pre-formatted
     text.</pre>

will show you:

Hello, I am
pre-formatted
     text.

<code>

According to the W3C, <code> “designates a fragment of computer code”. This is what to use to display code in HTML- it’s semantically correct.

Here’s an example of using both <pre> and <code> to display a block of code. This:

<pre><code>
code here
     and code here
          more code
  and more code
</code></pre>

will show your visitors this:

code here
     and code here
          more code
  and more code

Styling <pre> and <code>

Now that you know which to use and when, it’s easy to set styles for these tags with CSS. You can, for example, choose to add padding and/or margins with borders around all instances of your <code>, or changing the default fixed-width font for all <pre> elements to something else. When styling <pre>, you might want to add this white-space definition so that your text wraps according to the user’s browser width, like so:

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

Finally, if you’re going to be posting a lot of code snippets using tags, you’ll want to use these characters:

&lt; displays “less than” or <
&gt; displays “greater than”, or >

Do you use <pre> and <code> in your HTML?

There are many reasons to use an online photo editor. Maybe you can’t- or don’t want to- use Photoshop. Maybe your computer is at the shop and you’re forced to edit your blog post images on an old backup PC. Or maybe you’re on a snazzy new netbook. Whatever the reason, the growing number of online photo editors signifies the growing need for them. To show you the workspaces of my top picks, I’ve used a photo of some cupcakes I baked for a local orphanage:

Picnik

Picnik tops the list for me. It’s quick, easy to use, and powerful. As you can see from the screenshot above, it sports a clear, intuitive interface, and is great for everything from quick cleanups to more complicated jobs. I’ve only ever used their free version, which is powerful enough for me, but they offer a Premium plan from $2.08 (?) a month which includes a lot of extra features.

FotoFlexer

I love how quick and easy it is to upload to FotoFlexer- in seconds I was editing my cupcake photo. Their options are numerous- allowing you to crop, adjust hue, saturation, brightness and contrast, and apply fun “effects” to your photos- including borders, such as the one I chose here. If you’re feeling particularly groovy, FotoFlexer offers animated star “stickers”, and the ability to twirl, bulge or squish your photos. But the best thing about them has to be their “Geek” tab, which features advanced options such as Smart Recolor, Curves, Morph and Webcam (lets you take a photo immediately with your own webcam).

Picture2Life

Getting my photo onto Picture2Life was just as easy- but I will admit I was a little confused by their editing window at first. After a few minutes, however, I began to appreciate the interface, and the way each option is described in very simple terms. I especially like the preview thumbnails that appear with their options, giving you a better idea of how a certain effect will look before applying it. A good place to recommend to mom for her online photo editing needs.

Flauntr

Unlike the other sites here, Flauntr requires registration before you can get started editing your photos. It’s free and pretty painless, though- and what I like best about Flauntr is how you can manage multiple albums with multiple photos right here (and work with your Flickr, Facebook or Picasa files as well). Of all these editors, Flauntr probably has the snazziest interface- and, dareisay the most options? For within Flauntr is stylR, editR, textR, picasR, profilR, mobilR, and printR – all of which allow you to do exactly what they sound like (e.g. stylR for borders and distortions, editR for photo manipulation, etc.)- my favorite of all being picasR, which “makes images resemble classical paintings in color tone and feel. The essence of age old paintings is introduced into your images to create that vintage aura”. Very awesome.

Phixr

This is probably the least sexy of all the services I’ve listed here, but it’s a good, solid one. Photo upload was fast- and options include the usual cropping, rotation, and brightness, as well as some very nice Photoshop-esque filters. Phixr supports posting your photos to Flickr, Picasa, and Twitter- so if you’re not looking to do very advanced photo editing, it’s a great way to make changes to and post your photos online quickly.

Do you use online photo editors?

If last week we had clouds, this week we have planes! We’re keeping things up in the air this week on Friday Focus. (Still lots of clouds though.)

Designs of the Week

Two words: absolutely beautiful.

Another cool one page site. The egg in the header is a quirky little touch!

So many fascinating details in here, like planes flying out of the frame, the underwater graphic (it could’ve been clouds instead), and the skills chart and personal information sheets.

I love the use of several different patterns and borders for that retro effect.

I like that you can hover-zoom effect on the airplane and switch models without having to load a new page. I also like the background texture, complete with rivets.

Social Media Weekly

Aesthetics – 7 Japanese aesthetic principles to change your thinking

Wireframes – Why Your Next Website Should be Designed with Wireframes

Interaction Design – 101 things i learned in interaction design school

Web development has never been easier than today. So many complex codes has to be used in the past but these days, a web user with no extensive background on web creation can easily build a website just by using the latest tools available.

For those wanting to make their websites more interesting to web users, the newly released tool you can use is the Likno Modal Windows Builder. A modal window is a smaller window that is displayed on a particular web page. It’s not a pop up window but it shows additional content on a new page layer on top of the already loaded web page. You can use text, HTML code, images or even whole pages on this modal window to let your visitor focus entirely on that particular content. When this smaller window is closed, the web user is brought back to the original web page where he or she left off.

Customization of your modal window is very possible with the Likno software. You can create your own style via the CSS or cascading style sheets. You can also display dynamic content through the AJAX method. This area can be programmed or database-driven. Other than the modal window style, you can also choose to provide special effects in opening or closing the window. In the opening aspect, you have various options as well – the ID, class, name, onclick event or the AllWebMenus item.

Content-wise, this window builder allows you to provide specific information or images for the benefit of your readers. For instance, you have fresh information and you want your readers to keep that in mind, using the modal window can be very effective. Your readers’ concentration is on that window alone and not to any other parts of the web page.

Another great use of this is for online stores. If you have a new product, for instance, and you’d want your visitors to have a closer look at it, you can put the image of that item on a modal window. In that way, your potential customers get to see the item at a closer range.

Powered by the popular jQuery open source library, the Likno web modal windows builder is an advanced technology in that it lets you create modal windows that reflect your own personal style. You can choose to have a single-sheet type of window or if you have more information to share, you can use the multi-sheet type with several sheets involved. When using the multi-sheet window, you have a choice on a number of navigation bar styles to use. Another way to customize it is to use a header or footer.

Now if you have doubts whether this modal window builder will have problems with browsers, you can erase them already. This Likno software is compatible with most web browsers that support DHTML. So whether you’re using Internet Explorer, Firefox, Google Chrome, Opera, Mozilla, Safari and the others, you won’t be facing issues. Give your visitors a reason to stay put on your site and make sure you use the Likno web modal windows builder.

(Sponsored Post)

This isn’t your average tutorial, actually it’s not really a tutorial at all. There’s a bigger point here that I’m trying to make: as a developer you have to be efficient. Frameworks definitely get you there: jQuery, Blueprint CSS, and Smarty are a couple of tools to increase your efficiency. You’ll make more money as a byproduct because you will be able to develop more (or better) sites in less time.

The barrier to entry is, of course, the learning curve. It takes a while to get used to any specific framework, but once you’re used to how your set of tools work you’ll notice a huge increase in productivity. One specific tool I’ve been using for a couple years is Smarty.

Smarty is a templating engine. It takes a template and applies it to some content. In effect it separates the code from the content and design. The benefits are that you don’t have to use a heavy content management system like Drupal or WordPress; it’s simple to implement; and you don’t have to copy HTML templates from page to page.

Here’s the deal. I’m not going to show you how to use this one (yet). Smarty has great documentation for that. I am going to give you some homework though. Try it. Go over to http://smarty.net, download the files, and follow the Quick Install tutorial. Next week I’ll give you some tips to make the system more useful and if you’re lucky I’ll through in some downloads to make it even quicker. Now get to work!

As someone whose designs are definitely more plain than fancy, I'm usually happy to stick to font-family: Arial, Helvetica, Verdana, sans-serif; in my CSS. And the truth is that the first time I heard of font-face, I thought it referred to the free font website (which, by the way, is somewhere you can find fonts to use in your @font-face declarations).

Using @font-face is simple enough. In this example, I've uploaded the excellent Diavlo font to my server (in the same directory as my CSS, to keep things simple), and added the following to my stylesheet:

Now that's in there, anytime I want a certain paragraph to display in the Diavlo Bold, all I need to do is:

and here's the result:

You can see how this opens up a world of possibilities, and-especially when you're a fontaholic like me- it really is easy to go nuts and @font-face every element on your page. But remember that with great power comes great responsibility, and keep these things in mind when using @font-face:

Check the font's license.
You need to make sure that you're allowed to use the font in this manner. A good place to start is this page of Fonts available for @font-face embedding, which lists fonts that specifically allow this (including the lovely Diavlo), those with an OpenFont license, and so on.

Remember that not all browsers support @font-face.
Right now, users on Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+ will see your @font-face fonts. Yes, that's a lot of users- but it's still important to show some love to the users who can't see your @font-face fonts, so make sure you include other nice fonts in your stack as well.

Keep loading times low.
Sure, you can put a hundred @font-face fonts on one page, but you really, really don't want to. There are loading times for each font, so keep that in mind when you're planning your style designs. This brings us to my next tip...

Look locally first.
If the user browsing your site already has the font on his or her computer, why bother finding it and loading it online? That's why it's always a good idea to have @font-face look for the font locally first. My example above, for instance, would become:

IE uses another format.

Because my chosen font is in OpenType format, though, I need to convert it to eot before IE will see it. First, I use a free online font converter to turn my otf to a ttf- then I use Microsoft's free WEFT tool to convert the ttf to eot.

Do you use @font-face?

What is it about clouds that instantly transports us to a happy place? This week on Friday Focus, we're featuring designs with white, fluffy clumps of water vapor in them.

Designs of the Week

Love or hate the abundance of illustrated clouds on this site, it certainly makes a lot of impact. The moving clouds aren't distracting at all, and are a nice touch. Cute footer too.

I'm disappointed that the clouds graphic on the homepage don't show up in the inner pages, because it does change the atmostphere of the site, especially the hands peeking out! Makes it a little quirky and fun. The background becomes bare as you scroll down, also making me wish the background was fixed.

Simple, clean, to the point. If there were any more content in here the center aligned effect would have been a bit much, but here it's just the right amount for a teaser.

Here's another moving clouds effect. I like that the background changes colors according to different times of the day (I think). And the old style illustrations too, like the manicule (the pointing hand) in the search bar. I don't know about you but it's hilarious! Gives the site a lot of personality.

Several details I love here: first, the 3D slash folded paper effect going on in the portfolio items. Makes repeated elements a lot less dull. Second, the footer graphic where there's a man looking up at the clouds from what looks like a rooftop. Third, the colorful ribbons in the logo and copyright text---I've seen it before, but it's a nice break in color and it does look like ribbons floating in the sky on a windy day.

Social Media Weekly

CSS - 3 Easy and Fast CSS Techniques for Faux Image Cropping

Design - How to Design Buttons to Help Improve Usability

CSS - How to Create a Valid Non-Javascript Lightbox

Most of HTML5 seems to be pretty self-explanatory. Unfortunately there are a few things that just aren't. For example, the complex outlining algorithm, and the section element. It's confusing as hell and everyone has a their own way. So we may as well dive in head first...

Here's our working HTML one more time in case you missed it:

section

The section element is defined by the W3C as "a generic document or application section...[it] is not a generic container element." I don't think one could be any more vague and contradictory. The only saving grace is a couple examples they give, namely tabbed elements, and chapters.

In my opinion this doesn't necessarily limit you to sticking a section element inside of an article element, or visa versa. It doesn't have to stand alone, it just has to group elements logically (unlike a div). So while some examples put sections around sets of articles, others put them within, to denote separate portions of the same article.

Our example HTML would be better served to have another section element after the first. That would be a great place to make a snarky comment about the vague and abstract language that only the Consortium can understand.

aside

Fortunately the aside element isn't nearly as confusing as the section element. Use it as a sidebar with meta information related to the content. Pretty straightforward. You could put quotes, navigation, resources, links etc. inside this little fella. Just keep it related. This isn't the place for global navigation elements.

footer

The last element in the series is the footer. While typically the last item on a page, a footer could also be used in a section or article. A great example would be all that meta information at the end of a blog post, e.g. categories, dates, tags, etc.

Conclusion

It's your turn. Mock up your next site in HTML5 and see what happens. It might break, it might not, who knows. The spec is still unstable, but it is starting to gain traction. But definitely try it out. If we all start using it maybe we can have a usable spec in less than 20 years!

My mother did professional calligraphy for a time, and I dabbled quite a bit in it myself- which is why I'm always drawn to script fonts. More stylish than practical, they're best used in small doses- headlines or posters, for example. Here are five of my current favorite script fonts, displaying more of my favorite design-related quotes. They're all free, of course:

Killigraphy
This one by Rob Dobi has been around for a while, but still packs quite a punch for me. Its beautiful, spiky letters are elegant but bold.

Olho de Boi
A more recent find for me, Olho de Boi won me over right away. It's a little bit distressed, with imperfections that make it seem more handwritten than most computer fonts. I particularly like its capitals, which have a bit of swash to them. A Billy Argel Font.

Promocyja
Promocyja by Gluk's clean lines make this one perhaps a little more accessible, and more readable, than most script-type fonts. This is a pretty font (and I love pretty fonts!)- and is one I've been searching for a reason to use lately.

Miama
Here's one I'd love my handwriting to look like. Linus Romer's Miama is long, luxurious and clear enough to use in smaller sizes- although, as with all script fonts, I would suggest not using it in long paragraphs. Elegant and beautiful, without being too fancy.

Quilline Script
I've had Quilline Script in my font library for some time now- it's one I've used quite often, because: a) It's pretty!, b) It's shorter than other script fonts, so I don't need to increase the leading too much, and c) It's modern and readable, and looks great paired with sans-serif fonts.

What are your favorite script fonts?