Richard Walsh Designer Labs

Thursday, May 31, 2012

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

Friday, May 25, 2012

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.

Tuesday, May 15, 2012

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.

Thursday, April 5, 2012

Old is no more Gold a.k.a Old vs New Browsers

Most of us don’t realize how much an old and out-of-date web browser can negatively impact our online lives, particularly our online safety. You wouldn’t drive an old car with bald tires, bad brakes, and an unreliable engine for years on end. It’s a bad idea to take the same chances with the web browser that you use daily to navigate to every page and application on the web.

Upgrading to a modern browser — like the latest version of Mozilla Firefox, Apple Safari, Microsoft Internet Explorer, Opera, or Google Chrome — is important for three reasons:

First, old browsers are vulnerable to attacks, because they typically aren’t updated with the latest security fixes and features. Browser vulnerabilities can lead to stolen passwords, malicious software snuck secretly onto your computer, or worse. An up-to-date browser helps guard against security threats like phishing and malware.

Second, the web evolves quickly. Many of the latest features on today’s websites and web applications won't work with old browsers. Only up-to-date browsers have the speed improvements that let you run web pages and applications quickly, along with support for modern web technologies such as HTML5, CSS3, and fast JavaScript.

Third and last, old browsers slow down innovation on the web. If lots of Internet users cling to old browsers, web developers are forced to design websites that work with both old and new technologies. Facing limited time and resources, they end up developing for the lowest common denominator — and not building the next generation of useful, groundbreaking web applications. (Imagine if today’s highway engineers were required to design high-speed freeways that would still be perfectly safe for a Model T.) That’s why outdated browsers are bad for users overall and bad for innovation on the web.

Not that anyone blames you personally for staying loyal to your aging browser. In some cases, you may be unable to upgrade your browser. If you find that you’re blocked from upgrading your browser on your corporate computer, have a chat with your IT administrator. If you can’t upgrade an old version of Internet Explorer, the Google Chrome Frame plug-in can give you the benefits of some modern web app functionality by bringing in Google Chrome’s capabilities into Internet Explorer.

Old, outdated browsers are bad for us as users, and they hold back innovation all over the web. So take a moment to make sure that you’ve upgraded to the latest version of your favorite modern browser.

The Browser Wars! In the past two years, IE has gone from commanding a 61.45 percent of the global browser market to 53.6 percent. In that same time frame, Firefox has dropped from 23.69 percent to 20.05 percent, while Chrome has gained considerable ground, climbing from 8.24 percent to 19.13 percent. According to StatCounter, things shake out a little differently. StatCounter has Chrome leading all other browsers with a 33.59 percent of the market at the end of August 2012. IE is close behind at 32.85 percent, followed by Firefox at 22.85 percent. Despite the abuse it routinely takes in tech and media circles, Internet Explorer is staging a bit of a comeback based on recent usage data.

While browser use is a product of many factors, Microsoft is taking on its competitor directly on another front: marketing. In recent years, Google has put a lot of marketing muscle behind Chrome, including web campaigns such as The Web Is What You Make Of It, with spots from Lady Gaga and sex columnist Dan Savage, as well as "Dear Sophie." Its top four campaigns have accumulated nearly 45 million views since 2009, according to analytics firm Visible Measures, but some are several years old at this point, while Microsoft is hitting the market with fresh work on the web and TV.

Last month, Microsoft launched a new TV ad for Internet Explorer that extols the speed and slickness of IE9 with excerpts of favorable reviews, and a shortened version of what's been published on YouTube appears to be in heavy circulation. The TV version of "A More Beautiful Web" premiered March 4 during AMC's "The Walking Dead" and has subsequently aired on "Mad Men." A Microsoft spokesperson said it's had a "broader broadcast and cable run" and has also aired during movie previews, in addition to its digital placements. The Final Takeaway Use a modern browser, first and foremost. Or try a new one and see if it brings you happier browsing that’s better suited to your needs. The web will keep evolving — dramatically! Support cutting-edge web technologies like HTML5, CSS3 and WebGL, because they’ll help the web community imagine and create a future of great, innovative web apps. Lastly, try new things. The web is a new and exciting place every day, so try tasks that you didn’t think could be done online -- such as researching your ancestry back ten generations, or viewing a real-time webcam image from a climbing basecamp in the Himalayas. You might be surprised by what you find!

To check which browser you’re using, visit www.whatbrowser.org.

Tuesday, January 31, 2012

Detecting Space in Input Boxes - CSS3 vs jQuery

It's 1 A.M and my half brother Jack from Utah pings me. Hey Ric, I got a webdesign issue that's keeping me awake. I paused for 2 minutes..assuming he is going to tell me more about the issue. But it seemed he was expecting me to solve it, whatever the issue is. So I being the nicest guy, asked him to mail me.

Here's the deal.

Jack wanted to find a space character in an <input> but using CSS3 selectors.Well, if you want to create an actual CSS3 rule in your stylesheet, then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..

For eg:

<form>
<input type="text" value="no-space-here" /><br/>
<input type="text" value="" /><br/>
<input type="text" value="space here" /><br/>
<input type="text" value="" /><br/>
<input type="submit" value="submit"> type a space and press Submit
</form>

CSS

input[value*=' ']{
background-color:#fff5f5;
}

Run the code here and see for yourself. http://jsfiddle.net/8BdUV/

A good solution is to use jQuery here

$('form').submit(function(){
return ($(':input[value*=" "]').addClass('warning').length > 0) ? false : true;
});

CSS

.warning{
background-color:#fff5f5;
}

Now run the solution http://jsfiddle.net/PHja9/

Bingo!

Wednesday, January 25, 2012

Horizontal Navigation Menus

Horizontal menus are suitable for pages with menus containing fifteen menu buttons or fewer per row. Obviously, this depends on the length of the labels and the size of the text used on the buttons. With very short labels, more buttons could fit across a page (for instance, if the labels were page numbers 1, 2, 3, 4, etc.). The horizontal tab menus on the BBC web site has fourteen tabs in one row and two other rows with seven links on each. This shows that many more links can be fitted into a page if you can accept several rows. The rows need to be distinctly separated by a divider or by using navigation bars with different colors.

Horizontal menus can be challenging because the commonly advocated inline or float methods each have their problems. Floated menus can be difficult to center on the page, inline menus traditionally could not have equal size buttons. However, now that all the browsers support the muchneglected attribute { display:inline-block; }, horizontal menus are no more difficult than vertical menus, and dimensions can be very easily applied to give equal size buttons, or buttons that automatically vary to accommodate the content. Recipes for horizontal menus often use { display:inline: }, but the resulting buttons are unsatisfactory. All browsers now support { display:inline-block; }.

The attribute { display:inline: } did not allow width, height, margins, or padding to be set. By using { display:inline-block; }, buttons can be displayed inline and have their dimensions set. This provides the best of both worlds, as shown by the second row of buttons in the basic menu below.

The top row of this basic menu shows the unsatisfactory appearance of display:inline. In the second row, the display:inline-block buttons can be given height, line-height, and padding.

The very basic menus shown above are not a rollover menus; that is, they do not change color when the cursor hovers over the buttons. Also, they use paragraphs instead of the traditional unordered lists.

The code below contains two rows of menu buttons. The top row is unaffected by the CSS style sheet. The CSS style sheet, is linked only to the bottom row of buttons and the style gives the text plenty of horizontal space. This demonstrates the value of the display:inline-block code compared with the default display:inline;.

Creating the Structure for Two Rows of Menu buttons

<!doctype html>
<html lang=en>
<head>
<title>Inline-block content</title>
<meta charset=utf-8>
meta details go here
<link rel = "stylesheet" type = "text/css" href = "inline-block.css">
</head>
<body>
<div id="container">
<p> </p>
<p>inline content (default)</p>
<p>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p> </p>
<p class = "inline-block">inline-block content<br>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p> </p>
</div>
</body>
</html>

The # symbol in the href items must be replaced by your own page URLs. The code here is the style sheet that targets the second row of menu buttons and applies the style display:inline-block; to enable the width of the buttons to be adjusted.

Applying the display:inline-block; Style to the Second Row of Buttons

/* Set styles to equalise the browser rendition*/
html, body, h1, h2, h3, h4, h5, p, ol, ul, li { padding: 0; margin: 0;
}
body { font-size: 100%; font-weight: normal;
}
ul { padding-left: 0;}
/* end of style equalisation */
p { background:white margin:auto; text-align:center;
}
#container { margin:auto; text-align:center; width:97%; min-width:800px;
max-width:1200px;
}
a { background: orange; color:navy;
}
.inline-block a { display:inline-block; width:110px; height:30px;
line-height:30px; text-align:center;
}

Here's a Demo