Fonts have been a sore spot for web designers for a long time.

Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.

Thank goodness, we finally have something new. It’s Typekit.

Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.

And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.

Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.

I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.

HTML5 and CSS3 are the new web development tools on the scene, and they’re making life easier and more exciting for development geeks around the world.

Earlier versions of HTML and CSS have been around for years. HTML, of course, is the language that browsers use to display web pages. And CSS is a tool that developers use to control what web pages look like, and to ensure that any changes they make to a web page “cascade” through the site consistently.

HTML5 and CSS3, the new version of these tools, don’t actually help developers do anything radically different – you still can’t click on a candy bar and have one materialize on your desk. (Maybe soon ???) The true power of HTML5 and CSS3 is that they help developers do some of the same things they always have – but much more easily and quickly.

For example:

• HTML5 lets you add increased functionality to a site – like audio and video, or drag-and-drop features – directly in your HTML5 code. Previously, you had to add a third-party plug-in to your HTML to do the same thing.
• In the same way, CSS3 makes it easier to display certain design elements on your site – such as rounded corners, rotating elements, drop shadows, or special fonts. Previously, you would have needed multiple lines of code to execute such features, or a Flash or JavaScript plug-in.

Creating these elements using HTML5 and CSS3 can make life better for everybody – the designer, the client, and the end user. The designer benefits because shorter, simpler coding makes for faster, and frankly, more enjoyable development. The client benefits because the more efficiently we can work, the more cost-effective development and ongoing maintenance are. And the end user benefits because sites that don’t rely on endless plug-ins load more quickly.

Now, truth be told, not all browsers are ready to support HTML5. Mobile devices are leading the pack – in fact, we’ve been developing iPhone and iPad apps and sites right and left using the new language. Chrome and Safari are on the way to supporting it fully … Firefox is getting there … and IE is not even close. So, depending on what browser most of your audience is using, folks could have difficulty viewing sites developed in HTML5.

But soon enough, everyone will catch up. In the meantime, designers and front-end developers are going to be enjoying our new toys … experimenting with creating new websites that are more interactive and dynamic than ever before.

Back when I was just a wee young designer, I used to jump onto Photoshop the second I started a new design. The result was lots of rework, and lots of wasted time.

Over the past few years I’ve settled into a process that instead focuses on upfront preparation. I’ve found that spending a bit of time on prep saves a lot of time in the overall design. And, I get better results with a less stress.

So here’s my process. Call it “Alexis’ secret for a stress-free design.“

• Start with an idea file. I start by researching my customer’s audience and competition. I try to figure out what works on different sites and what doesn’t. I also flip though website galleries and design annuals, looking for pieces of inspiration that fit with my customer’s goals and can start to spark a design.
• Move to sketches. Once I have a direction in mind, I start sketching. Often I’ll work on just one element of the site first — the header or the footer, or maybe the navigation. I like to get one component right, then build the rest of the layout around that.
• Choose a color palette. After I’ve got a basic layout, I start to think about color. Often I’m working with a client’s existing brand colors, but want to create a richer, complementary palette for the web. I sometimes visit sites like kuler.adobe.com as a jumping-off point for ideas.
• Head to Photoshop. Once I’ve got the building blocks of the site– the layout and color palette – I can jump onto Photoshop and create the final design. At that point, Photoshop is just a matter of executing the concept I already have – easy peasy.

It’s important to spread this process over two or three days. I get much better results if I have time to let the design concepts sink in, if I can sleep on them. Inspiration often strikes not when I’m plowing through a project, but when I take a moment to step away from it.

It’s also important to get feedback between every step in the process – an external perspective on whether I’m on the right track. That stops me from going too far down the road on a design if it’s not quite right for the customer. Saves me time, saves the customer money.

That’s what I call a win–win.