1. Insert a Layout Grid in Web Pages With #grid

While Photoshop and Fireworks are still the convention for designing websites, some designers are taking an alternative approach: creating mock-ups in actual mark-up (designing directly in the browser). In fact, many tools built into the browser can help you either prepare a quick mock-up or polish a nearly finished design. In particular, if you often do grid-based designs, you may find #grid extremely useful for adapting layout widths and alignments and for creating vertical rhythm on the page.

#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids. (vf)

2. Free Font: Hattori Hanzo

We continually browse the Web for unique and attractive freebies. This time, we've stumbled on the Hattori Hanzo typeface, created by Russian designer Roman Shamin. A desire to create a typeface unlike any other is often the cause for the most remarkable fonts out there. This particular free font is stylish and clean; it was created for headings and short text and is especially suited to items such as infographics and charts. (cs)

3. Convert Photoshop PSD to WordPress With Divine

The Photoshop mock-up for your new WordPress-blog is done; you've settled the final details; and now it's time to slice the PSD and manually convert it block by block to WordPress, right? Well, not necessarily. Instead, you can use Divine, a free tool that turns Photoshop designs into WordPress themes in a few clicks.

Basically, Divine is a plug-in that sits on top of Photoshop. Once you've finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server.

The official website contains detailed documentation and video tutorials. At the moment, it is available only for Windows XP, Vista and 7, but the Mac OS version is being planned. You will also need Adobe Photoshop CS2, CS3 or CS4 (32-bit) to run the plug-in. The tool looks promising and could turn out to be a handy time-saver, particularly if you design WordPress blogs often. (vf)

4. See How Type Looks On The Web

Beautiful Web typography is coming. We had to keep our typographic choices to simple and minimalistic solutions once, but today Web designers have a wide variety of typography embedding techniques to enliven their designs with versatile and sophisticated typography. However, type is a tricky beast. What looks fine in print, can be quite difficult to read online. Either you are using Web-safe fonts or embed fonts using the CSS3 property @font-face, you might want to test how your typography is rendered in various browsers.

With the help of Web Font Specimen, you can do this easily. Just download the tool, unzip it, set your fonts in CSS, and then open up the HTML-specimen in a browser. The specimen contains whole paragraphs in various line heights and font sizes, different headings, ordered and unordered lists, as well as italic and bold text. You can analyze the body size comparison that reveals aspects of the typeface that can't otherwise be seen and study single glyphs, measure, grayscale as well as light on dark and dark on light previews.

With a few clicks, you get a reliable impression of what your font will look like in context. You can adapt the tool to your needs and share it with others under a Creative Commons license. (mm) (vf)

5. iPhone Apps Web Galleries

If you're stuck on a design for your new mobile application, then head on over to Well-Placed Pixels, a growing showcase of nice Mac and iPhone app interfaces. The screenshot collection gives you an overview of design apps on the market. In fact, the look of every app is visually appealing and simply beautiful. One such example is iStudiez Pro, which is a sophisticated schedule planner for the iPhone that helps students stay organized. Another example is Cartern's Encyclopedia of Health and Medicine displayed below.

Mobile Awesomeness is another Web design gallery that contains resources for mobile Web development and the latest mobile Web news. The CSS iPhone Gallery, created by Michael Dick, displays iPhone-format screenshots of iPhone-tailored websites. These websites are great for inspiring developers and designers, and you can suggest your own websites. (cs)

6. Let Clients Generate HTML From Plain Text

Markdown, a text-to-HTML conversion tool developed by John Gruber back in 2004, is practically legendary. The tool is an easy-to-read, easy-to-write plain-text format for Web writers who don't want to get involved in HTML tags. For instance, if your client wants to update their CMS-powered website without having to use an HTML or WYSIWIG editor, then Markdown would be a good option, because it lets them generate valid HTML code while keeping the plain text readable and, thus, maintainable.

Markdown was originally written in Perl, so your server had to support Perl if you wanted to install Markdown. Good news: John Fraser has released Showdown, a JavaScript port of Markdown. With Showdown, your clients can now just type in plain text and generate the HTML code in real time (the changes are displayed immediately). You can also download the full JavaScript package and use it right on your server.

If you prefer PHP, you can get PHP Markdown, a Markdown port to PHP. An advanced alternative to Markdown is Textism, a "humane Web text generator" that also takes care of common typographic and encoding problems. (vf)