I wondered if I could make an easily updateable, prototype site in order to test a number of different IA’s using an XML file to represent the sitemap. This post is about what I did and how to get some sample code if you want to use or extend it for yourself.
The goal is to be able to simply edit, delete or add a section in the XML and refresh the site. There you have it. The navigation menu has changed.
Each <page> child of <sitemap> is top level navigation. You add children to that by placing <page> nodes inside each other.
<page title="Contact" url="contact-me">
Below is an example navigation to build a personal website:
<sitemap> <page title="Work" url="work"> <page title="Develop" url="develop"> <page title="Web development" url="web-development"></page> <page title="Apps" url="apps"></page> </page> <page title="Design" url="design"> <page title="Web design" url="web-design"></page> <page title="Magazines" url="magazines"></page> <page title="Cartoons" url="cartoons"></page> </page> <page title="Videos" url="videos"> <page title="Animation" url="animation"></page> <page title="Live footage" url="live-footage"></page> <page title="Showreel" url="showreel"></page> </page> </page> <page title="About Me" url="about-me"> <page title="Life" url="life"> <page title="Photos" url="photos"></page> <page title="Videos" url="videos"></page> <page title="Inspiration" url="inspiration"></page> </page> <page title="Socal" url="social"> <page title="Friends" url="friends"></page> <page title="Family" url="family"></page> <page title="Things I've done" url="done"></page> <page title="Bucket list" url="bucket-list"></page> </page> </page> <page title="Contact" url="contact-me"></page> </sitemap>
The system has only been developed to navigate three levels deep.
I also wanted to have little ads in the corner of some of the mega menu dropdowns. To do this, there is an promo.xml in the XML folder. Simply wrap a title, img, p and link, if you would like, in the url of the top level link. This will result in an advert style banner on the right side of the menu. You can restyle this banner with CSS.
Here is the example of promo.xml:
<adverts> <work> <title>Latest website</title> <img>assets/images/200x150-b8b8b8-fff.jpg</img> <link url="#work/develop/web-development">See more</link> </work> <about-me> <title>My picture</title> <img>assets/images//200x150-b8b8b8-fff.jpg</img> <p>This is a little blarb all about what I do and where I am.</p> </about-me> </adverts>
This is a little blarb all about what I do and where I am.
Check out the demo: http://www.anthonydillon.com/navigation-prototyping
The results were good. We were able to use this code to test three potential IAs and the mega menu itself with ten users. The XML allowed the me to easily tweak the menus between tests and it looked real enough that the users weren’t distracted by the lack of content behind the pages.
Feel free to use the code for quick navigation prototyping at: https://launchpad.net/navigation-prototyping
If you would like contribute to this project all your help is appreciated!
Interested in running Ubuntu Desktop in your organisation?
Over the past year, we’ve been working hard to bring you the next release of Vanilla framework: version 2.0, our most stable release to date. Since our last significant release, v1.8.0 back in July last year, we’ve been working hard to…
This was a fairly busy two weeks for the Web & design team at Canonical. Here are some of the highlights of our completed work. Web Web is the squad that develop and maintain most of the brochure websites across the Canonical.…
It was another busy iteration for the web and design team, trying to get a lot of work wrapped up before we head off to Lyon, France for our 19.10 Roadmap cycle kick-off.