I’ve had an idea for a site layout on my mind for some time now. In this post I’ll try and explain it to you (and me) as I write along.
As you might read on a previous post I’ve been thinking about navigation menus, more specifically I’ve been looking for a (good) way to represent a multi-level menu like this:
Home | About Us | Products | Blog
All Products… | Cheap Products | Expensive products
Shiny Stuff | Rare Stuff | El Core Ingles Stuff
I’m exploring this because such a menu would provides for visual feedback while navigating on the actual navigation system, thus eliminating the need for a pathway. While at the same time focusing all navigation on a single place - kind of a collapsed site map - and clearing space for content to be shown under it using the page’s full width.
I also think it would lead to a pretty good navigation experience, but as my online bank as already show that depends on the implementation.
The only downside I see is the added visual complexity when we’re showing more than 2 levels. As an alternative to filling up the tree the 3rd sub-level itens could be shown as a left positioned vertical menu within the current page. But keep in mind that this would be a global navigation menu, but a local one.
I’ll try out both navigations but I think that this alternative is probably the best since it combines a easy to use top menu to provide the global site navigation, a full width page for showing content, and where needed a contextualized vertical menu for added navigation. Humm… an additional bonus (depending on the content): the sub-navigation can be created as a sub-menu as stated above or occupy the full content space - showing the various items with an associated image and a small description.
As the front page goes, this layout can use the most of available screen width so it’s better than most! The main page content should be used to provide faster access to HOT/fresh content and should always include a newsletter form for grabbing hold of visitors - ideally this form should be in every page, probably is the footer (see some of the sites on the end of the post).
By the way, the main navigation can be used to provide HOT/Fresh itens while browsing: in the tree I described earlier imagine that when a user clicked on ‘Products’, instead of having ‘All Products…’ as the default entry we had ‘Featured products’, and when the user navigates further down he would then get a ‘Featured expensive products’ (renamed to ‘Featured itens…’ probably :)).
These ideas didn’t come out of the blue. I have to thank GisMedia for their great work on the site Papa-Léguas. I studied the site extensively while trying to build a similar way to navigate through products. And I would also like to thank them for creating the page’s top menu - on which none of the menu entries are contained within the main navigation, thus breaking a damn good navigation hierarchy. It was this “error” that got me looking for other ways to structure things.
Interesting enough, after knowing what you want getting it gets easier!
I came across comments on 207 Guidelines for E-commerce Sites, a report by Jacob Nielsen dated from 2001 where he studied e-commerce site’s usability issues. I looked up the evaluated sites and amid the results I came across the following sites:
I never liked drop-down menus… at first because I had a bad mouse, then because the guys over at my online bank went dumb and decided to display the top menu sub-itens horizontally (with the link I wanted in the farthest end). I complained and received no reply, but after one or two months they eventually got the link I use most in the first position. Hurray for me! Too bad for the people who might want the other links… :\
Then we have the fact that we can click an item or hover it (bringing up a unexpected popup box). What if an item has sub-itens? Can we click it anyway? What content will there be? Does it make sense to have links on these navigation itens? If I navigate down the sub-itens will there be a pathway nearby to remind me of the full path I just followed?
Think about it we you browse around through you favourite sites.
But other than these, today I have a better reason to dislike javascript menus: they make navigation hard for people with accessibility problems.
Most javascript menus depend on browser hacks to just function right, and when it comes to accessibility most of the menus around just plain suck. Again… TAB away your favorite sites to see if you can do the things you normally do.
Well… getting back to the title subject. Joomla administration backend uses JSCookMenu which, as you can see in its site, can’t be reached without a mouse. :/
One of the people I’m working with happens to be blind and until now he couldn’t navigate the administration backend properly. To apply a quick fix (time doesn’t abound) I picked up JSCookMenu’s menu structure and rendered it using nested <ul>s.
To prevent the visual clutter from this tree I chose to hide it using a globaly positioned div. Here’s the code to add to your admin template (after rendering JSCookMenu):
<div style=”position:absolute;left:-2000px;top: -2000px”>
<h1>ACCESSIBLE MENU</h1>
<script type=”text/javascript”>
function entryNameOrLink( entry ) {
name = entry[1]; href = entry[2];
if (href) return ‘<a href=”‘+href+’”>’+name+’</a>’;
return name;
}
function printEntry( entry ) {
document.write(’<li>’);
if (entry == _cmSplit)
document.write(’-');
else {
document.write( entryNameOrLink(entry) );
children = entry[5];
if (children)
printMenu( entry, 5 );
}
document.write(’</li>’);
}
function printMenu( menu, start ) {
document.write(’<ul>’)
for (var i=start; i < menu.length; i++)
printEntry( menu[i] );
document.write(’</ul>’)
}
printMenu( myMenu, 0 );
</script>
</div>
Interesting enough, I had to repeat the procedure for VirtueMart’s menu, but since it also uses JSCookMenu the fix becomes easier! Just add the following code on line 344 of /administrator/components/com_virtuemart/header.php:
Ok people! You’re going to have to trust me on this one!
Go to this Site, install whatever it needs and then kick the tires. Then when you’re tired get your ass back here and share some comments on what you think of it. I’m… bedazzled to say the least.
I know a site that will be blocked by the corporate firewalls, trala lala la!
For those who might have been in a coma for the last months… Amazon EC2 is a pay as you go way to get computing power.
The prices are not the cheapest around:
$0.10 - Small Instance (Default)
1.7 GB of memory, 1 EC2 Compute Unit (1 virtual core with 1 EC2 Compute Unit), 160 GB of instance storage, 32-bit platform
$0.40 - Large Instance
7.5 GB of memory, 4 EC2 Compute Units (2 virtual cores with 2 EC2 Compute Units each), 850 GB of instance storage, 64-bit platform
$0.80 - Extra Large Instance
15 GB of memory, 8 EC2 Compute Units (4 virtual cores with 2 EC2 Compute Units each), 1690 GB of instance storage, 64-bit platform
BUT this isn’t your regular deal. With EC2 you can bring scale your application as you need, adding node when you get Digged or shutting them down when word comes out you’ve been killing kitties in public places.
This brings lots of opportunities to startups! Instead of investing your kids university fund on more machines, only to have them end up doing nothing when the kitties story gets know… You could just pay as you needed them. No upfront investment required!
Other than that… did I mean the elastic part? Turn it on, add more instances, digg it, rinse, fix some bugs, add more instances, reddit… well, you got the point!
With Mnesia, the app server is the database server - Mnesia provides a database designed from the ground up with fault tolerance and distribution in mind. You have your choice of an in-memory (ram_copies) or disk-based (disc_copies) approach, and both can be periodically logged to S3 (using mnesia:dump_tables). This approach also means you have a single EC2 image to worry about, rather than separate images for app servers and database servers.
Commissioning / decomissioning instances is easy - The same could be argued with Rails when using a reverse proxy like Swiftiply which allows app servers to register themselves, but Erlang and OTP are specifically designed to allow for seamlessly growable, fault tolerant clusters. When you want to take a node down, just fail it over then shut down the instance.
Footprint is lower - This is perhaps the biggest problem with Rails on EC2: the memory footprint of a single Rails instance, combined with single-threaded request processing. You will simply need more EC2 images to process the same amount of traffic simply because of the overhead of a framework where concurrent request processing is not possible. With no plans to make the Rails framework thread safe, and with each version increasing the framework’s memory requirements, Rails simply isn’t suited for systems without a high RAM : CPU ratio. Erlang frameworks like Erlyweb allow concurrent request processing with a single application instance per node, and distributed Erlang and OTP allow seamless scaling of a distributed app cluster with relatively no work on the part of the programmer.
A friend of mine (gooo Nuno! :)) just sent me a clipping of a “Diário Económico” which features a “Who’s Who?” on the portuguese IT landscape.
Since they forgot about me(!!) I though I should correct their lapse.
Click to enlarge!
This is part of my decision to provide this blog with a personal touch.
The next step will be a des-templatization (ahha, making words up rocks!) of the site and a plagiarization (dammit, this one really exists! Thank you Ctrl+Alt+W=WordWeb!) of the blog into something better. I’m thinking something in the lines of Yariv’s Blog or Justin Rudd’s Drivel. I like the reading space both blogs provide and as for photo goes I MUST have a changing photo, the cooler the better.
Well… lets see how long till I make that change, my best prediction is 2 months, but who knows.
Out of nowhere lots of work opportunities just popped up!
In a way this is nice because it means I’ll be having a positive money flow for a while, but the downside is that all these websites I’m building are driving me away from my “creational” goals.
Heheeh… but it the end all is well!
In 5 months I’ve learned a shiitttttload of stuff and (with my parents help) my bank account is restored to its pos-Eurotrip values.
I’ll be doing some sites using Joomla and some hands-on PHP but in November I’m thinking about refusing any more “biscates”. They bring good vibes to my surroundings as: “Look!!! Davide is making money! Who would imagine… :O, but they’re killing me on the inside: “Must learn interesting stufff! Must get something done! Must implement ideas!”.
As for schedules go… humm. Lets just say that if I travelled to the States now I would feel much of a jet lag.
All in all, I have to say that freelancing is GREAT and investing on oneself opens a lot of doors as well as new opportunities. And best of all! You pick what to do with them!
The project I’m currently working on has brought me back to the Java world, more specifically into Java lexers/parsers.
After working with ruby/javascript/PHP in the last few months the switch back to Java was a little bit hard. In the other languages you can start working exactly when you need it! There are no classpath issues to worry about, no IDE to set up, no …
Exception in thread “main” java.lang.UnsupportedClassVersionError: Bad version number in .class file
(or)
Unsupported major.minor version 49.0.
It’s just you, the problem you need fixing, and a language to write a solution on.
After “week zero” (as a professor of mine used to call it) I got everything to fit together and productivity finally appeared! Hurray!
Where was I? Ah! Lexers and parsers!
Here is a list of the goodies I found and which I’ll be testing as I go:
"If I were to sum up the Congress in a word – which I shall take care not to publish – it would be this: At Basle I founded the Jewish State. If I said this out loud today I would be greeted by universal laughter. In five years perhaps, and certainly in fifty years, everyone will perceive it."