Building a New Image Format

If you are a HTML5/CSS/jQuery Web Developer, here's a $3.99 ThanksGiving Offer There’s now a newcomer to the stable of images we use for web development. It’s the WebP Image Format (see https://developers.google.com/speed/webp/) WebP’s goal is to surpass compression file sizes of photographs—a role usually reserved by JPEG. But this JPEG clone has a special talent: animation! So, in essenece, the WebP image format is a hybrid of the GIF...

JavaScript Devs: Be Careful With Comparison Operators

The results of type coercion in JavaScript can be difficult to predict, even when you know the rules. In this post, we will see how subtle differences in comparisons, can lead to significant changes in the results. Be careful when relying on 'truthyness' for logic. Whenever possible, use comparison operators to clarify your meaning. 'Falsy' values include: 0 undefined null empty strings false CAUTION - Boolean objects instantiated...

Why are Deferred Objects So Useful

If you are a HTML5/CSS/jQuery Web Developer, here's a ThanksGiving Offer Deferred objects are useful when you want to execute functions at the end of some task without having to monitor that task directly, especially when that task is being performed in the background. The code below contains a demonstration, which I’ll then start to modify to add features. It's about using Callbacks with a Long-Lived Task ... <script type="text/javascript"> $(document).ready(function()...

To Carousal or Not

In an effort to squeeze more content on web pages, designers sometimes turn to novel navigation features such as carousels that advance or rotate objects in a fixed space. These are great for displaying related products or showing facets of the same product, such as pants presented in different colors or with different tailoring options (cuffed or not, straight vs. relaxed cut, etc.). Some carousels are relatively simple slide-show-like implementations,...

Some IE CSS Tips for Transparency, min-max width and Conditional Comments

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here. You can force IE to apply transparency to PNGs. In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser. 1. #regular_logo 2. { 3. background:url('test.png'); width:150px; height:55px; 4. } 5. /* \ */ 6. * html #regular_logo 7. { 8. background:none; 9. float:left; 10. width:150px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test. png',...

The Dys-Functional Specifications

If you are a HTML5/CSS/jQuery Web Developer, here's a ThanksGiving Offer So what's functional about a Functional Spec? These blueprint docs usually wind up having almost nothing to do with the finished product. Here's why: Functional specs are fantasies They don't reflect reality. An app is not real until builders are building it, designers are designing it, and people are using it. Functional specs are just words on paper. Functional specs...

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....

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...

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...

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....

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...

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,...

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...

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...

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...

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...