Le 2 novembre 2009 2

Billets • Logiciels & Webwares • Webworker

[Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilement

Que ce soit en phase de création de sites ou à des fins de présentations, il est toujours intéressant d’avoir une représentation de l’organisation de son site web.

Bien sûr il est possible de présenter cela en utilisant des listes non ordonnées mais le résultat n’est pas toujours visuel.

SlickMap CSS est une feuille de style prête à l’emploi qui permet de créer des sitemaps navigables et visuellement intéressantes.

slickmap css exemple 500x318 [Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilement

[Voir la démo navigable]

Pour obtenir ce résultat, il suffit de partir de ce que l’on aurait fait avec des listes HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="author" content="Matt Everson of Astuteo, LLC – http://astuteo.com/slickmap" />
	<title>SlickMap CSS</title>
	<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
</head>

<body>
	<div class="sitemap">
		<h1>Project Title</h1>
		<h2>Preliminary Site Map &mdash; Version 1.0</h2>

		<ul id="utilityNav">
			<li><a href="/register">Register</a></li>
			<li><a href="/login">Log In</a></li>
			<li><a href="/sitemap">Site Map</a></li>
		</ul>

		<ul id="primaryNav" class="col4">
			<li id="home"><a href="http://sitetitle.com">Home</a></li>
			<li><a href="/about">About Us</a>
				<ul>
					<li><a href="/history">Our History</a></li>
					<li><a href="/mission">Mission Statement</a></li>
					<li><a href="/principals">Principals</a></li>
				</ul>
			</li>
			<li><a href="/services">Services</a>
				<ul>
					<li><a href="/services/design">Graphic Design</a></li>
					<li><a href="/services/development">Web Development</a></li>
					<li><a href="/services/marketing">Internet Marketing</a>
						<ul>
							<li><a href="/social-media">Social Media</a></li>
							<li><a href="/optimization">Search Optimization</a></li>
							<li><a href="/adwords">Google AdWords</a></li>
						</ul>
					</li>
					<li><a href="/services/copywriting">Copywriting</a></li>
					<li><a href="/services/photography">Photography</a></li>
				</ul>
			</li>
			<li><a href="/projects">Projects</a>
				<ul>
					<li><a href="/projects/finance">Finance</a></li>
					<li><a href="/projects/medical">Medical</a></li>
					<li><a href="/projects/education">Education</a></li>
					<li><a href="/projects/professional">Professional</a></li>
					<li><a href="/projects/industrial">Industrial</a></li>
					<li><a href="/projects/commercial">Commercial</a></li>
					<li><a href="/projects/energy">Energy</a></li>
				</ul>
			</li>
			<li><a href="/contact">Contact</a>
				<ul>
					<li><a href="/contact/offices">Offices</a>
						<ul>
							<li><a href="contact/map">Map</a></li>
							<li><a href="contact/form">Contact Form</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

SlickMap permet de représenter jusqu’à 3 niveaux de navigation, et des liens additionnels comme « Register » ou « Log In » dans l’exemple précédent.

Comme il s’agit de CSS, le tout peut facilement être personnalisé, pour s’accorder par exemple aux couleurs de votre site.

Autant dire que c’est simple. Il suffit de créer les liens entre les pages avec les ancres qui vont bien et le tour est joué. Si vous décidez de l’inclure sur votre site, cela permettra de faciliter la vie de vos visiteurs qui cherchent une page particulière.

Je pense également que la sitemap visuelle est un bon plan pour les moteurs de recherches en favorisant les liens internes (ce qui ne vous empêche pas de proposer une sitemap XML pour le robot).

Je trouve SlickMap CSS pratique pour obtenir un résultat professionnel en 5 min chrono.

download ico [Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilementTéléchargez SlickMap CSS (.ZIP, 12Ko)

• •