SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
|
|
Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.
Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.
SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”
The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.
What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.
It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.
In the README file:
SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.
The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.
It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!
Similar Posts
- Firefox 2.0 - Windows XP
- Firefox 3.0 - Windows XP
- Internet Explorer 6.0 - Windows XP
- Internet Explorer 7.0 - Windows XP
- Safari 3.0 - Macintosh OS X
- Firefox 2.0 - Macintosh OS X
- Firefox 3.0 - Macintosh OS X
- Mozilla 1+
- Netscape 7+
- Opera 7+
- Safari build 60+
- OmniWeb 4.5+
- Konqueror 3.2+
- IE 5.5+ on Windows (using DHTML behaviors)
- AJAX application that allows visitors to enter their own responses, and generates a graph that shows where the respondent is in relation to others
- Quick summary that shows the highest and lowest result per question
- AJAX application that allows visitors to filter, sort, and sift through the data
- Side-by-side comparison of 2008 and 2007 data
Code Better CSS And Preview Websites Across Different Browsers With Adobe BrowserLab
Adobe BrowserLab is an online service that allows web professionals to test their websites on popular browsers and operating systems. Screenshots of actual browser renderings are generated in real time, with multiple viewing options to help pinpoint issues. Adobe provides integration with Dreamweaver CS4, and the free preview is currently available only to a limited number of users.
Currently, BrowserLab supports the following web browsers and operating systems:
The sad thing about BrowserLab is that it will eventually be released as a paid service. In the meanwhile, there are alternatives like Browsershots which remain free for low-priority usage.
Conditional CSS - not just for IE
It’s true that IE is the most notorious browser for inconsistencies, incompatibilities, and bugs. But the fact remains that no two browsers are created equal, and while IE is the most likely to cause headaches in the course of development, other browsers can be culprits, as well.If you run into a major roadblock, Rafael Lima’s CSS Browser Selector could be your saving grace. A tiny bit of Javascript (less than 1kb!) determines the user’s browser and creates an accordingly-named class. From there, it’s simply a matter of applying the styles that were written for that particular browser. For example:
.ie .example {
background-color: yellow
}
.gecko .example {
background-color: gray
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
background-color: brown;
} The colored box on the CSS Browser Selector page gets the point across better than anything else, though. Open the page in a few different browsers to see for yourself.
Read | Permalink | Email this | Linking Blogs | Comments
Safari 4 Beta Web Browser Released
A beta version of Apple’s Safari 4 web browser is now available for public consumption by Macintosh and PC users alike. It boasts 150 features, 30 (yes, I counted) of which are marked as “NEW”.
Among these new features, the most interesting ones are:
Speculative Loading
Safari loads the documents, scripts, and style information required to view a web page ahead of time, so they’re ready when you need them.
I wonder how Safari will “guess” which files to pre-load. Hopefully this is something that can be turned off, for those among us who would like to conserve bandwidth.
CSS Effects
Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.
Does anyone recall IE’s ActiveX filters? They pretty much all died with the exception of the alpha filter, and even that was just used to fix its lack of support for PNG transparency.
Acid 3 Compliance
Safari is the first — and only — web browser to pass Acid 3. Acid 3 tests a browser’s ability to fully render pages using the web standards used to build dynamic, next-generation websites, including CSS, JavaScript, XML, and SVG.
I thought Opera 10 was the first browser to pass the Acid3 test? Still, kudos to the Safari team!
HTML 5 Offline Support
Web developers can now create applications that you can use even when you don’t have access to the Internet. Thanks to HTML 5 offline support, designers can build web applications that store themselves on your computer, where you have immediate access to them. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or as a “super cookie,” which stores data in the familiar cookie format.
What!?! HTML 5 support even though we are 4664 days away from HTML 5? Woo hoo Safari!
Cover Flow
Using Cover Flow, you can flip through websites as easily as you flip through album art in iTunes. Cover Flow displays your bookmarks and history as large graphical previews, so you can pick out a website instantly.
I just hope IE8 doesn’t try to copy this “feature” by adding a Flip3D mode.
History View
Take a closer look at your browsing history in the History view. Search for previously visited sites, drag web pages to your bookmarks, and clear individual items. Safari displays your history using Cover Flow, so you can flip through your search results as easily as you flip through iTunes album art.
This is definitely useful for quickly locating a page in one’s history.
So what are you waiting for? Download Safari 4 for a test drive now.
CSS Sticky Footer
If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.
Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.
To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.
Pure nested CSS menus
HowToCreate.co.uk has an interesting guide to creating a purely CSS-based nested-list menu. This technique uses absolutely no Javascript except for IE 5 for windows. Here is the list of supported browsers:Some browsers that don’t support this technique display styled nested-lists instead. Go check it out.Read | Permalink | Email this | Linking Blogs | Comments
CSS Navigation Elements - Make Them a Block Element - CSS Navigation
When using CSS for navigation elements, you should make the element a block-level element to aid usability on your Web site. CSS navigation is easy to do and this …Use CSS display:table for Layout — onenaught.com
How CSS-based display:table, display:table-row, display:table-cell, are all usable today across Firefox 2+, Safari 3+, Opera 9+ and IE8. With a few workarounds for older IE, it is …Survey For People Who Make Websites 2008 Results Out
Back in 2007, the staff of A List Apart and An Event Apart conducted a survey and presented 37 questions to 33,000 web professionals, providing “the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide” (ALA 2007 results). The results were compiled into a downloadable PDF file.
In 2008 they did it again, the results of the 2008 Survey For People Who Make Websites are now out for public consumption. The survey had less respondents compared to the one held in 2007 down to 30,055. Data analysis is provided by Alan Brickman and Larry Yu. The results speak can be overwhelming for some. Thankfully the findings are presented in a friendly, easy to read article with clear and beautiful CSS Charts.
ALA has generously shared the raw data with the community, which is available as tabbed text, CSV, and Excel spreadsheet. RAW data is a powerful thing, and I just have a couple of suggestions how it can be used:
All in all, big props to the ALA team for the tremendous effort spent on this endeavor. It is a great contribution to the web community. Looking forward to the 2009 survey!