This newsletter issue was sent out to 24,900 newsletter subscribers on April 13th 2010.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.
Table of Contents
- Insert a Layout Grid in Web Pages With #grid2
- Free Font: Hattori Hanzo3
- Convert Photoshop PSD to WordPress With Divine4
- See How Type Looks On The Web5
- iPhone Apps Web Galleries6
- Let Clients Generate HTML From Plain Text7
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-up8 (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 #grid9 extremely useful for adapting layout widths and alignments and for creating vertical rhythm on the page.
2. Free Font: Hattori Hanzo
We continually browse the Web for unique and attractive freebies. This time, we’ve stumbled on the Hattori Hanzo typeface11, 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 Divine13, 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.
#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 Specimen16, 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 Pixels17, 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 Awesomeness19 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
Markdown20, 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.
If you prefer PHP, you can get PHP Markdown22, 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)
The authors in this newsletter are: Vitaly Friedman (vf), Christina Sitte (cs), Manuela Müller (mm).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 http://24ways.org/2009/make-your-mockup-in-markup
- 9 http://hashgrid.com/
- 10 http://hashgrid.com/
- 11 http://www.behance.net/Gallery/Hattori-Hanzo-typeface/421277
- 12 http://www.behance.net/Gallery/Hattori-Hanzo-typeface/421277
- 13 http://www.divine-project.com/
- 14 http://www.divine-project.com/
- 15 http://webfontspecimen.com/
- 16 http://webfontspecimen.com/
- 17 http://wellplacedpixels.com/
- 18 http://wellplacedpixels.com/
- 19 http://www.mobileawesomeness.com/
- 20 http://daringfireball.net/projects/markdown/
- 21 http://daringfireball.net/projects/markdown/
- 22 http://michelf.com/projects/php-markdown/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.