Who came first - Content or Design

Well, I believe that to make good design you should know what content is. It’s because design is about how to deliver content the right way. On the other hand, not only content matters, but also form of delivery, medium (read “design”) could make a competitive advantage, become a key idea of customer’s business.

But, obviously, it’s not about content only, there is user study, context of usage, company possibilities and business interest. All these things should influence design.

Get as much of the content before designing as you can.

I've long believed that real data delivers really effective design. Using actual content, information, and activity throughout the design process to inform and guide decisions results in product designs that scale well and communicate effectively.

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.

This philosophy could be thought of as "death to lorem ipsum". Lorem Ipsum, in case you are wondering, is dummy text originally used in the print industry to lay out page designs. It has since been re-appropriated byWeb designers (and worse yet software designers) to lay out Web site and application designs.

Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn't reflect what a living, breathing application must endure. Real data does.

It's also important to note that Lorem Ipsum can cause you to make some awful design decisions if you are relying on a certain volume of content that will not actually be there in the end, whether it be too much or too little.

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.

The Web and its Open Doors

Don't try to lock-in your customers. Let them get their information when they want it and how they want it. To do that, you've got to give up the idea of sealing in data. Instead, let it run wild. Give people access to their information via RSS feeds. Offer apis that let third-party developers build on to your tool. When you do, you make life more convenient for customers and expand the possibilities of what your app can do.

People used to think of rss feeds as merely a good way to keep track of blogs or news sites. Feeds have more power than that though. They also provide a great way for customers to stay up to date on the changing content of an app without having to log in repeatedly. With Basecamp feeds, customers can pop the URL into a newsreader and keep an eye on project messages, todo lists, and milestones without having to constantly check in at the site.

APIs let developers build add-on products for your app that can turn out to be invaluable. For example, Backpack supplies an API which Chipt Productions used to build a Mac OS X Dashboard widget. The widget lets people add and edit reminders, list items, and more from the desktop. Customers have raved to us about this widget and some have even said it was the key factor in getting them to use Backpack.

Other good examples of companies letting data run free in order to get a boomerang effect:

The Google Maps API has spawned interesting mash ups that let people cull information from another source (e.g. apartment listings) and plot that data on a map.

Linkrolls offer a way for people to get their latest del.icio.us bookmarks displayed on their own sites.

Flickr allows other businesses access to commercial APIs so customers can buy photo books, posters, dvd backups, and stamps. "The goal is to open it up completely and give you the biggest variety of choices when it comes to doing things with your photos," says Stewart Butterfield of Flickr.

Yet Another Post About JavaScript Scopes and Closures

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.

When discussing scope it’s important to consider where a variable is defi ned as well as its lifetime.Where is the variable accessible? In the case of JavaScript, scope is maintained at the function level,not the block level. Hence, variables defi ned with the keyword var and parameters are visible only inside the function in question.

A nested function has access to its outer function’s variables, except for this and arguments. The mechanism through which a nested function continues to keep the references of its outer function even after the outer function fi nishes execution is called closure. Closures also help to reduce namespace pollution.


Each time an enclosed function is called, a new scope is created, although the code doesn’t change. The following code shows this behavior.

function getFunction(value){
return function(value){
return value;
}
}
var a = getFunction(),
b = getFunction(),
c = getFunction();
console.log(a(0));
0
console.log(b(1));
1
console.log(c(2));
2
console.log(a === b);
false

When defining a standalone function (not bound to any object), this is bound to the global namespace. As a direct result, when creating an inner function within a method, the inner function’s this variable is bound to the global namespace, not the method. To circumvent this situation, the enclosing method’s this variable is assigned to an intermediate variable called that, by convention.

obj = {};
obj.method = function(){
var that = this;
this.counter = 0;
var count = function(){
that.counter += 1;
console.log(that.counter);
}
count();
count();
console.log(this.counter);
}
obj.method();
1
2
2

Organize your CSS Code

Are you a HTML5/CSS/jQuery Web Developer? Check out these templates

Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and
on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:

1. h2 { }
2. #snapshot_box h2 {
3. padding: 0 0 6px 0;
4. font: bold 14px/14px "Verdana", sans-serif; }
5. #main_side h2 {
6. color: #444;
7. font: bold 14px/14px "Verdana", sans-serif; }
8. .sidetagselection h2 {
9. color: #fff;
10. font: bold 14px/14px "Verdana", sans-serif; }

Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text
Styles, Navigation, Forms, Comments, Extras

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different
areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas.

Organize your CSS-styles, ordering properties alphabetically. “I don’t know where Igot the idea, but I have been alphabetizing my CSS properties for months now, and
believe it or not, it makes specific properties much easier to find.”

1. body {
2. background:#fdfdfd;
3. color:#333;
4. font-size:1em;
5. line-height:1.4;
6. margin:0;
7. padding:0;
8. }

Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it
makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /*
Structure */, /* Typography */ etc.” 

Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is
your saving grace for future editing and maintenance of the site. This will also give youstrength in your document.”

Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links
styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error
message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see
how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.”

Dear Hon, Null != Undefined

If you want to compare two values, then you have a choice. If you want to treat an undefined value as being the same as a null value, then you can use the equality operator (==) and rely on JavaScript to convert the types. An undefined variable will be regarded as being equal to a null variable, for example. If you want to differentiate between null and undefined, then you need to use the identity operator (===).

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var firstVal = null;
var secondVal;
var equality = firstVal == secondVal;
var identity = firstVal === secondVal;
console.log("Equality: " + equality);
console.log("Identity: " + identity);
</script>
</head>
<body>
This is a simple example
</body>
</html>

The output from this script is as follows:

Equality: true
Identity: false

Milliseconds count - Some Tips on Designing Menus

A lot of sites these days think that “keeping everything in easy reach” means nesting navigation menus so visitors can get to something deep within the site without clicking on any other pages. As a result,you find a lot of drop-down menus that then trigger a secondary menu that “flies out” from the side.

For ThanksGiving, I am offering 5 Exclusive Website Templates for just $3.99. Purchase Here.

Well, let me be blunt: This technique may be useful, but there’s a long road from useful to usable.Try navigating one of these with your finger or a TV controller and you’ll quickly curse the designer. And even with a mouse, it can be tricky to grab the word or phrase on which you want to click. That said, there are a couple of very basic things you can do that will dramatically improve usability.

Make sure that the clickable area is larger than just the words in the link. You really don’t want to make these active areas too small.

Make sure you give people enough time to maneuver the cursor into position. Although I hate to get into technical nitty-gritty, the timing issue is really quite important, so let me share some of the current best practices:

Let the cursor “hover” over a link for about half a second before triggering any menu expansion.

After an animated menu has been triggered, it should display as quickly as possible—in less than 1/10 second if possible.

When the visitor moves the cursor away from the menu, wait half a second before you collapse the menu. This gives people a chance to move the cursor more sloppily as they navigate and cut corners, thus reducing the need to stay strictly within the active areas of the menu

That said, when the menu does collapse, it should do so as quickly as it appeared.

From a functionality point-of-view, make sure to check the timing of these actions on a slow device and not just on your own faster-than-lightning computer. In general, you should also be checking your overall server response times on a dial-up connection and not just on broadband. You’d be surprised at how many people don’t have any access to broadband, particularly in rural areas. And if you are working in an international environment, keep in mind that outside North America, Europe, and a few countries along the Pacific rim, there are many regions that still have no broadband access at all, but merely slow dial-up and mobile connections.

By delaying the collapse of a dropdown/fly-out menu, visitors can move the cursor directly on the diagonal without triggering other menu items or losing the one they wanted to click.

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.

Grid Layouts in Modern Web Design

Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user’s input and system activity. When used inappropriately or inconsistently, the typographic controls and graphics of web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase users’ confidence in your site (see below).

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.

Even when the page grid is solid, good design depends on creating a hierarchy of contrast and viewer attention, so that a few focal areas of the page become entry points and the other page materials are clearly secondary. Without contrast management the design can look like many random elements competing for the reader’s attention.

The business logic of design grids and templates

Regular page grids—and the module and program efficiency and consistency they create—are the core element of cost-effective design programs for larger enterprises. One of the most famous and successful design grid systems ever produced has been used by the National Park Service for more than thirty years. Massimo Vignelli’s Unigrid design system organizes and systematizes a huge array of park service paper publications (and now online pdfdocuments), from single-page brochures to large park maps and posters. Thanks to the strong, consistent Unigrid design program, the National Park Service has saved many tens of millions of dollars over the decades by not reinventing brochure and map design with every new print project (shown below).

Shown above is the National Park Service design grid for print publications. Thinking in a strategic, modular way about design can save a fortune in the long run.

Grids and templates on the web

Grids for page templates on the web are a more complex matter because the web is a fluid medium with many possible display conditions and a constantly changing technology base. The fundamental principles of consistent modular design programs still apply, but web page grids must necessarily accommodate a wider range of visual possibilities than their print counterparts. Print design grids are driven largely by fixed positioning and paper sizes. Web templates also create a regular, repeating structure of design patterns that consistently organize identity, navigation, content, and technical functionality, but they do it in a much more fluid, flexible medium than paper printing.

A good web template program establishes not just the visual look and feel of particular pages in the site but also specifies how regular patterns of xhtml,css, include files, and more complex application or content functionality will all merge using well-established, well-documented, and consistent standards throughout the site. And, like Vignelli’s Unigrid system, a good enterprise template system can save millions of design dollars that might otherwise be wasted in reinventing web publishing with each new corporate or enterprise site.

Templates and the enterprise

For maximum efficiency in web publishing, all large enterprises should have an existing, well-designed, well-documented set of web page templates that incorporate:

• The global identity of the enterprise as an organized part of a larger enterprise identity program across all media
• Global enterprise navigation features that tie smaller sites and programs to the larger institution
• Well-designed, carefully validated xhtml and css code
• Consistent semantic nomenclature for all xhtml and css containers and page elements
• A consistent, enterprise-wide typography program
• Accessibility standards that meet and ideally exceed requirements
• Compatibility with, at minimum, a basic web content management tool such as Adobe Contribute or, ideally, an enterprise-wide web content management system

The Yale University page grids are a system of page formats in both fixed-width and fluid page forms. The templates define a consistent set of web identity, user interface, department identification, and typography standards for major university academic and administrative sites. The pages specify the locations of standard identification elements, content column widths, and a system of unique page element id nomenclature, and they provide a consistent set of typographic standards via a master set of enterprise-wide style sheets

Fixed and fluid elements in Yale University’s web template system.

Typography is a key element in template design

Consistent web typography has a huge but subtle effect on establishing coherence across a wide range of enterprise web sites. In a site with a strong typographic identity, most users will never explicitly notice why a wide range of related sites produces a cohesive web experience. Consistent web typography can bind those disparate sites in a way that still leaves enormous design flexibility to meet many functional needs and, with css techniques that use a master enterprise-type style sheet, is technically trivial to accomplish.

Reference: Web Style Guide by Patrick L

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.