While working on my new primary site design for Website Style, I ran into a major hitch. Most of the PNG fixes just simply don’t work for the kind of site I’m making. Each one had a different problem.

Some used the proprietary CSS ‘expressions’ which we know are not good because they massively can slow down a site when they fire off thousands of times in a session.

Others wanted all my png’s in one directory. It’s simply not possible with my setup. So my choice there would be to completely reorganize all my CSS and HTML to put the files in one directory? No thanks.

Some only handle the images found in the img element, not the CSS background images.

Some only handle the CSS background images.

I’ve found some that work in the past, but what I’m looking for is something that:

1. Must handle PNG’s in multiple directories. (Major priority)
2. Must apply the fix to .png’s in the img element.
3. Must not choke up and die when used with WordPress
4. Ideally can handle background images as well, but if I have to I don’t mind working without the background image.

That final twitchy behavior of the alternatives I found seemed to somehow or other not want to work with WordPress (which made no sense at all to me because its all PHP anyway so why should it matter, but apparently it did).

If anyone knows of any suggestions, please let me know!

~Nicole

For clients who are having a hard time visualizing what they are trying to ask for, it can be a good way to explain to a developer what you are looking for.

For developers, it’s a great code idea resource.

If you haven’t browsed around on there, it’s a good place to spend some time.

~Nicole

There is an article on Internet News praising JavaFX and declaring that it is going to be the end of Ajax. Huh. Well, let’s look at a few arguments in that article:

…by using the locally installed Java SE files. Only one new library needs to be installed along with the Java SE or ME installation, depending on the device.

Reaallly. So, automatically the use of JavaFX is dependent upon a locally installed piece of software. That’s not a bonus – that’s a drawback. And he repeats it again here:

JavaFX eliminates that need [using lengthy Javascript code] by using the locally installed Java SE files.

Apparently Sun (and this author) missed the boat on the idea of applications that run entirely in the browser and completely independent of the desktop.

Just for a bit of humor – here’s one tidbit from that article:

Another problem with writing AJAX applications is it inevitably forces manual code creation, a skill Web content creators typically do not have.

*gasp* How dare we expect web content creators to be able to manually code!

Another article has some words from James Gosling of Sun.

Easy applet creation also is possible, Gosling said.

That is, in a word, scary. The idea of anything making Java applets more easily created for widespread web use is disturbing.

On a slight tangent:

Gosling noted the irony in that while the popular JavaScript scripting language looks like Java but is not, the opposite is true for JavaFX.

When will people stop naming things using the word Java if it’s not Java? I just don’t get it. Javascript makes everyone think its the same as Java (which its not) and JavaFX code apparently doesn’t even look like Java. What a surprise. Next thing we know we’re going to hear about something called PHPX that has code that looks like Python (while that may not be a bad thing actually – I’m tired of the misnomers).

Now, one upside to it:

Additionally, Web applications can be built that also work in a disconnected mode.

Now that is a bonus – but when you consider how it works, it’s not really a bonus at all. What WILL be special is when people can create applications that will completely work in offline mode, but are not reliant on your desktop. Meaning that the web application can run in online mode, touching nothing at all on your computer, but that if you WANTED to use the application offline, you could download a version of it and later sync with your online version. Or something to that general effect.

The solution IS NOT to create online applications that begin by being dependent on desktop software. That is what we used to do. It’s what we are trying to get away from.

Sun says that:

JavaFX Script takes advantage of the Java Runtime Environment’s (JRE) ubiquity across devices

Anyone who has every run across a website application that uses Java knows the enormous lag time that happens while the Java Runtime Environment (JRE) loads up on your computer. It’s about as bad (often times worse) than going to a website that doesn’t first alert you to the fact that it’s about to load up a PDF.

People who would claim that the extra code to write an Ajax app is worse than having to load up the JRE needs to get out their stopwatch and time it.

I can’t seem to find sample code anywhere for the new JavaFX – at least not on the site proper. I have found 1, and only 1, example linked from their site and that is for a line game.

Somewhere along the lines of Adobe’s new Apollo, JavaFX seems to be going in the exact opposite direction that most of the web is right now. Web developers and consumers want less reliance on their desktop, not more. They are asking for ‘all-online’ services so they can work from their home computer, and continue where they left off from their office computer.

Unless I’m misunderstanding JavaFX greatly – this seems like two steps back.

~Nicole

Secondary Navigation

I feel that the best alternative to javascript navigation is to create secondary navigation for your pages. What is secondary navigation? In a nutshell, I consider secondary navigation to be any separate section of navigation that applies to a particular page or area of your site. Let’s look at some examples of this by taking a peek at the WordPress.org website. Below is a screenshot that I’ve scribbled on:

You can easily see that the secondary navigation sections change according to what page you are on. Here’s a different page:

This is a great alternative to using drop-down menus (a menu with a sub-menu on hover) because this method will work for any and all browsers.

CSS Drop-Down Menus

So what’s wrong with using CSS for drop-down menus? The answer may not be a huge surprise to you: IE doesn’t handle it well.

For most drop-down menus controlled with CSS, you essentially use a list structure with a sub-list for each menu item. The top list item is the shown menu item, and the sub-list contains the sub-menu items. You start by setting the value of the sub-list to display:none and then on hover of the main list item, you make it change the value of the secondary list to display:block. It’s a very simple concept, and theoretically this is how all menus will be done at some point in the future.

The problem is in IE6 and lower, primarily. It is possible to create this effect in IE7 (though typically you need some CSS magic specifically for IE7 to make it work), but earlier versions don’t support it properly. Why? Because IE6 and earlier had serious problems with handling actions on child-elements when triggered by a parent-element.

So, if you really want to use CSS for your menus, what’s a good way to handle this? Anything server side is ideal, but then you get into the issue of trying to detect browsers – which can work well most of the time, except that many versions of Opera cloaked itself as IE as the default setting.

Degradable JavaScript

This is a good solution, but it requires layout adjustments in some cases. You have to have the kind of layout that will work with this solution. Conversely, you can create a layout adjustment for people who have JavaScript disabled.

Let me show you an example of a decent (but not perfect) degrading JavaScript menu implemented on the US Patent and Trademark website. I have clicked on one item in the left menu bar, and you can see what happens, it dynamically opens up and shows the sub-menu:

But what if I don’t have JavaScript enabled? Here’s a screenshot of the same page with JavaScript disabled:

I think you can easily see that there are some pros and cons to this site. The good thing is that the menu is done in HTML using lists, so content is there for someone who has Javascript disabled – which is more than I can say for many sites that embed links into their Javascript. The cons? When it is disabled — the menu spans nearly twice the height of the content in the page when it’s all expanded. The visual aspect isn’t what comes to mind for me, it’s how awful it would be to listen to that many menu items on a screen reader. The idea alone is daunting.

I’m going to leave that thought to simmer in your mind, and move on to how this works (or doesn’t, as the case may be) for horizontal menus instead of vertical ones.

You saw what happened to the previous site when the JavaScript was disabled, but let’s pretend that you used a normal list structure again to create a horizontal list. Then you used Javascript to hide the sub-menus by default and to let the sub-menus drop down when you hover over the primary link. So, what happens if you have Javascript disabled? Well, in the described scenario, you’ll have all the links show at once, because the Javascript is no longer hiding the sub-menus. Depending on your layout and how these menus are styled, they’ll either push down your content to make space for all the sub-menus, or they will float on top of your content constantly.

Here’s an example of what could happen if the layers are set to float over the content, and they were no longer collapsed:

The obvious problem is not just that it looks lousy, the -real- issue is that the content is blocked.

Or if they are not set to float over the content, here’s what you could end up with:

In the second example, you’ll see a different problem – the content gets shoved down by the constantly expanded menu. Depending on how you have designed your page, moving the content like that could break your design by shifting other elements too far out of place. Aside from that, it looks bad, but not nearly so bad as the first option.

Be very careful with how you handle those horizontal menus. They can be really tricky to get right, and you have to really think ahead to make sure they degrade properly (which neither of the above examples do). Think about where those sublinks could be if you did have to show them to someone without Javascript. Could there be another area in the page where they could go? You know… like a secondary menu area.

Middle Ground Option

I commend everyone who creates their multi-level menus in CSS. As we’ve seen, those can be great and the only sticking problem is with IE 6 and lower. One middle-ground solution to that is to manage the menu controls for those affected IE versions using Javascript and browser detection as a combination. If the user doesn’t have Javascript, you have to offer a text version of the menu somewhere in your page, surrounded by a noscript element.

Best Choice Suggestion

Overall, there are lots of different ways that you can handle navigation. Some are significantly better and easier than others. Some are accessible, some aren’t.

Which brings me back to my main suggestion. If you want to ensure the biggest audience, without having to jump through hoops of ‘what-ifs’ (do they have javascript? are they on IE 6 or less? etc…) — use a secondary navigation instead. As a reminder, the secondary navigation was what I showed above in the screenshots of WordPress.org. It really makes life as a developer tons easier if you create navigation sections that are perfectly compatible in browsers and very accessible. In my opinion, the best way to do that is to make a secondary navigation section.

The seven top reasons why you should not use JavaScript Dynamic Navigation are:

Site navigation is difficult when navigation is not permanently displayed.

Everyone likes to know where they are going and even where they are! A site with a permanently visible navigation structure meets both of these requirements, but popup or dynamic navigation systems do not. Remembering that Google and the other search engines are as likely to deliver a visitor to a subpage as they are to your home page, a clear navigation structure is essential. Think of it as they “You are here” icon in your local shopping mall’s map.

Embedded elements can clash with dynamic navigation

A typical dynamic navigation structure will result in an overlay or pop up/down display. The challenge here is that if your site is media rich (ie contains flash animation or embedded video) these embedded elements will take precedence on the page. The end result is that part of your navigation will be hidden behind these elements making site navigation difficult if not impossible.

Cross browser/platform compatibility issues

As any developer will tell you, since the dawn of the internet, not all browsers are created equal. Some applications will follow a stricter implication of JavaScript than others. The only way to combat this issue is through vigorous testing – something that takes time and money. When you consider how quickly some browsers release code updates you have to be prepared to be in constant test and verification mode.

Usability issues- Dynamic Navigation is not for everyone

Just like menus in Windows or OSX, dynamic navigation structures require good hand/eye co-ordination. Not everyone will be as fast or as accurate as you are when it comes to using a mouse and nested dynamic navigation can be particularly hard to use. Usability studies with elderly users or those new to computers and the internet shows that such nested menus quickly cause frustration and are far from easy to use. Operating systems have addressed this issue by allowing a user to navigate using their arrow keys as well as a mouse but this is a complicated and difficult task to accomplish in JavaScript.

The Experts don’t do it

Go and visit your favourite site and then all the big internet names such as Google, Amazon, YouTube, BBC, MSN, Yahoo!, MySpace, eBay, Wikipedia, Craigslist, IMDB, etc, etc. There is a reason that you don’t see these sites using dynamic navigation and that’s because there are better ways. Any coaching or strategy expert will tell you the secret to success is to model those who are already successful. So if th336e experts don’t use dynamic navigation why would you?

You have plenty of other options

One advantage of a dynamic JavaScript navigation structure is that everything is contained in a single script file. Changing any aspect of the whole site’s navigation can be achieved by modifying this one file. However, this benefit is not unique to JavaScript. An external xml navigation structure or a range of server-side scripting processes can achieve the same effect and all are capable of outputting standard XHTML without any of the drawbacks listed in this article.

Your site will be broken if JavaScript is turned off!

With increased security awareness and the constant screen invasion by pop-ups many users restrict or even turn off JavaScript settings in their browsers. While this activity is designed to stop the JavaScript based popups, squeeze pages and floating ads, it will render your site inoperable. Statistics from W3Schools show that 10% of the visitors to your site will have JavaScript disabled. As there are plenty of better alternatives to a dynamic JavaScript navigation structure why even risk alienating 10% of your site visitors?

Written by: Iain Row
About the Author: Iain Row is the lead developer at Prominent Media, Milton Keynes Web Development that specialises in producing website navigation solutions. This article was prepared by Andrew Silvers of Attraction Marketing. 2006 Prominent Media Ltd.

He really goes into the core basics of what DOM is, and how it functions in relation to the content you see printed out on a web page. I will say that it really is a book at a beginning level, but there is nothing at all wrong with that. Just keep in mind that if you’re looking for an advanced book (is there even one in print on the topic?) that this is not what you need. Read introductions, they tell a great deal — in his he essentially says that the book is for web designers with no DOM experience.

Many people these days seem to be keying up two catch phrases together: DOM and Ajax. This book is not about Ajax, it’s about DOM. I would imagine most people could figure that out from the title, but a few that I talked to seemed to think it was also about Ajax. There is, just to whet your appetite, a teeny chapter on Ajax at the end, but don’t expect to learn Ajax from it, it’s mostly an overview.

If you want to get the basics of DOM scripting, it really couldn’t have been explained better. He does a fantastic job. Jeremy writes in a very easy and readable tone that makes it all painless. I’m hoping that he comes out with DOM Scripting ‘Intermediate’ and ‘Advanced’ books later on.

~Nicole

For instance, if I want to merely show one category in a feed, I would link to feed for that single category. A feed that would only show the reviews of the site is very simple to achive. You go the page main category page (in this example the category is ‘reviews’) and then you add a forward slash (/) and the word ‘feed’. Like this:

http://blog.websitestyle.com/index.php/category/reviews/feed/

However, if you wanted to exclude that category, then you would need to know the number of the category. That is simple enough to find. You would go to your ‘manage’ tab, then click on ‘categories’. Scan down your category list, and you’ll find the number of the category in the associated ‘ID’ column. So now, for the above example, my ‘reviews’ category has an ‘ID’ of 18.

Now each WordPress blog has a feed URL that will display ALL posts from the blog regardless of category. It looks like this:

http://blog.websitestyle.com/index.php?feed=rss2

To exclude all posts in the ‘reviews’ category, you would instead using the following adjustment to your normal feed link:

http://blog.websitestyle.com/index.php?feed=rss2&cat=-18

And now you have a link to a feed that shows all my categories EXCEPT for those in the ‘reviews’ section.

Ah, but what if you want to exclude more than one category? What’s the syntax?

You simply add each one to exclude like this:
This Section Updated
WP Versions Before 2.3.1:
http://blog.websitestyle.com/index.php?feed=rss2&cat=-18&cat=-22
For Version 2.3.1+:
http://blog.websitestyle.com/index.php?feed=rss2&cat=-18,cat=-22

The above would exclude both my ‘reviews’ and ‘templates’ categories. I actually use this when I embed my blog feed in another website that is purely tech (nothing personal included), and I exclude things I’ve categorized as non-tech related so they don’t show up.

Hope this was helpful to someone out there.

~Nicole

Utilizing a great javascript widget I have been able to add that functionality to the menu generator. You can now fully select color ranges for the options that are available thus far.

You can try out the Horizontal Menu Generator – 1.1, and I’ll add updates as I make them.

~Nicole

This is very much a version 1.0, and is simplistic in features. At some point, I do hope to add more features but one of the first priorities will be to finish putting in the rest of the colors available. I am undecided on the method to do that, whether I want some sort of javascript color picker or if I should re-write the whole thing in javascript. For now, it’s all done in PHP, which is my preference since it makes the menu accessible to anyone.

The two major features on my ‘to-do’ list are:
1) Finish adding in the rest of the web safe colors.
2) Add multi-tier menu creation.

You can try out the Horizontal Menu Generator – Version 1.0 now, and I’ll release updates as I make them.

Please post here if you find any bugs or errors.

Note: Version 1.1 is announced here.

~Nicole

Essentially, I’m creating an online code parser that will skim out and replace old tags with the appropriate standards compliant ones. I’m starting slow, primarily because my knowledge of advanced string manipulation in PHP is rather minimal. Eventually, I’d like to be able to really expand this project into a lot more, but those are ideas for another discussion.

What I have done so far is this:

• Replaces MS Word Smartquotes with normal entities.
• <b> = <strong>
• <i> = <em>
• <u> = <span style=”text-decoration:underline”>
• <br> = <br />
• <hr> = <hr />
• <dir> and <menu> = <ul>
• <s> and <strike> = <del>
• <xmp> = <pre>

I have quite a few things on my list of what I would like to do, and it will get done as soon as I figure out how to use PHP to manipulate the data entered and create what I’m looking for. For now, this is a rather quick and dirty little online form that will solve a lot of the most basic validating errors for old web pages.

I’m keeping the project here:
http://www.websitestyle.com/code_cleaner/ if you want to try it out.

~Nicole