RSS

Category Archives: code

960 Grid System layout tools and code sure to save design & development time

26 Mar

960 Grid SystemNathan Smith has launched 960.gs, a very promising framework and design toolset for layout using CSS. Besides a great foundation of code for implementing a flexible grid system, he’s created accompanying templates for sketching preliminary designs on paper and wireframing detailed designs in Visio, OmniGraffle, Fireworks, and/or Photoshop. As with any Nathan Smith endeavor, this kit is very well thought-out and executed. He’s considered many details and implemented them thoroughly.

If you’re looking to cut down development time while sketching, wireframing, or coding hi-fi prototypes in HTML, Nathan’s work in the 960.gs is sure to be a great starting point.

Read more about the whys and hows in Nathan’s explanatory post on sonspring.com, and download the framework (only 180KB for all the tools, only 4KB of actual code code compressed) at 960.gs,

 
Leave a comment

Posted by on March 26, 2008 in code, process, prototyping

 

Web Standards Basics on the Geniant Blog

03 May

The Geniant Blog

Garrett, Jared, and Nathan did a great job crafting the Geniant blog and priming it with some good posts. Now it’s up to the rest of us to fill it with content.

I took my first step towards that end this evening by posting my first article “Web Standards Basics”. I’m guessing most folks reading here are already aware of the benefits of using standards for front-end development, but we’re hoping that the Geniant blog will reach a wider technology audience. Take a look when you get a chance.

 
Leave a comment

Posted by on May 3, 2007 in code

 

Mock Data Generators

06 Nov

As Dan Brown demonstrates on his “Representing Data in Wireframes” poster, the fidelity of your data can make a big difference in its ability to identify flaws early in the design process. The main reason designers use repetitive or otherwise lo-fi data is that it takes time and creativity to develop realistic data. Here are two tools that could help generate higher quality “dummy” data for your mock-ups and prototypes in less time than it would take for you to make up your own lo-fi samples.
Kleimo Random Name Generator
This web page uses data from the US Census to randomly generate up to 30 male and female names at a time. It has an attribute for obscurity as well. This little page can be really helpful for creating a realistic list of names. A random pop culture reference is fun to throw in every once in a while. But if your list of names reads like the credits for the Simpsons, you could loose some credibility with your clients.
Truly Random password and number generator
A lot of junk came back when I googled “random generator mask” trying to find a web-based application for generating random strings and numbers using a mask. Most of the hits were for Windows applications to generate passwords or lottery numbers. After trying several I finally found one that could be very useful for generating mock data. Solid Programs‘s Truly Random creates random strings based on a mask you provide. The mask is useful for creating numbers to match the format of your data. The downsides to this app (it’s in Windows and its not very easy on the eyes) are outweighed by the power it provides to generate plausible data quickly. It costs $19 to register Truly Random.
I wish someone would develop a web-based app to deliver both of these tools on a single, easy-to-use page (see update below). If not as a web app, a Universal Binary would be nice.

UPDATE: Benjamin Keen’s Data Generator provides the best of both tools mentioned below in an easy to use online form. He provides many useful datatypes (phone/fax, names, custom lists, etc.) that should cover most of the needs I can think of. Many of the types allow masked options editable for custom formats (like a Texas drivers license or client-specific account number). The output formats include HTML, Excel, XML and SQL. Very nice work.

 
Leave a comment

Posted by on November 6, 2006 in business, code, design, prototyping

 

Freeware color-picker for Windows

28 Mar

For years I used an old version of Tiger Color’s application Color Impact to grab colors from the screen (like the eyedropper in Fireworks or Photoshop). But a few years ago they increased the price to $40, which IMHO is way too much to pay for a feature that should have already been included in MS Office.

Enter Color Cop, a freeware eyedropper for Windows. In the spirit of “Getting Real” (and unlike the bloated Color Impact app) it does just what you need and nothing else. Using this small, light app keeps me from firing up Fireworks when I just need to grab a hex or RGB for some pixel on my screen.

Props to Lifehacker, the source of many great tips.

 
Leave a comment

Posted by on March 28, 2006 in code

 

Anchors and Images, titles and alts

26 Apr

The question arose at the office last week, “is there a best practice on using the title attribute on the <a> vs. <img> tags when the link wraps the image?â€? With so many attributes available it can be confusing to know which ones to use when.

The title attribute tells you where a link is going. They will appear as a tool-tip when moused over (in modern browsers) and they can be read aloud by screen readers. They aid the user in letting them know where a link will take them. Anchors (a) should have title attributes as a matter of manners. As an example:


I just read <a href=”http://www.downwithwallpaper.com/tips.html” title=”DownWithWallpaper.com | How to take down wallpaper” />a great article</a> that gave me some home improvement tips.

The alt attribute tells you what you’re looking at. Screen readers use this as the verbal description for the image.

So, the best practice for links around images would be:


<a href=”http://navigatorsystems.com” title=”NavigatorSystems.com | Home” ><img src=”logo.gif” alt=”Navigator Systems logo” /></a>

Make sense? Now I have to go clean up all my code to make sure I am using them correctly.

The first code example here was stolen from Dan Cederholm’s Web Standards Solutions: The Markup and Style Handbook. It’s an excellent reference for such questions.

 
Leave a comment

Posted by on April 26, 2005 in code