Umbraco

Umbraco was my initial and most promising choice for evaluation. At first blush it seemed to have good documentation, flexibility, was open source, permissions structure, and (this is particularly important to me) a growing and active community around it. Umbraco boasted several very enticing features, including revisions, a workflow process, custom document type creation, plugin capability, and the ability to easily integrate custom user controls. Perhaps most important for my personal role in the redesign was that Umbraco didn’t store all of its templating, formatting, and CSS in a database (as many CMS solutions do) and instead wrote to physical files on the server. Changes made in the admin would write to the physical files, and changes to the physical files outside of Umbraco would be reflected in its admin interface.

My optimism started to fade after installing and getting my hands dirty with the CMS. Umbraco is extremely flexible… to the point of almost not functioning as a CMS and more as a framework. Standard features such as predefined document types functionality, blogging, and even a search module weren’t included; these would all need to be developed mostly from scratch. There is a boilerplate sample site plugin that can be installed to learn from, but it is confusing at best. It becomes increasingly clear that Umbraco has been written for the dedicated developer (or at least from their viewpoint) and the time hasn’t been taken to ensure easy understanding from a less programmatic viewpoint. The user interface for the admin is very barebones and somewhat confusing, again defeating the purpose of a CMS.

Umbraco also makes extensive use of XSLT to accomplish much of its content and templating output. This was a large part of the confusion in using the system, as some content seemed to be stored in XML files, while other parts are stored in the database. This led me to questions of how a search feature would work in practice and the performance of storing the data in XML versus pulling it from the DB. The documentation, while prolific, is less than helpful and largely devoid of any sort of standard style guide for ease of understanding.

All-in-all, I can’t recommend Umbraco for the end user, which is ultimately what a CMS is built for. If you have the time and skills needed to develop functionality from scratch, Umbraco provides a nice framework to build upon. If you don’t know XSL/XSLT, it is a requirement to learn it for using the system – even for basic things like outputting a navigation list. The permissions capabilities are standard, but nothing to write home about. The community is active, but it still has a long way to go to achieve the standards of usability and pervasiveness of alternative options, such as WordPress, Drupal, ExpressionEngine, etc.

Sitefinity

Sitefinity is the CMS offering of .NET UI giant Telerik. We already use Telerik’s RadControls product line and are relatively familiar with their methodologies. They offer both a live demo version (without having to register!), and a downloadable trial version. After playing with the freebie web demo to determine basic usability and process, I downloaded the trial and installed it locally.

The user interface and workflow for Sitefinity is much more polished than any of the other CMS options I evaluated, with the possible exception of Drupal. It comes with most of the content types and features that are generally used on websites out-of-the-box, including blogs, events, and even an in-admin email newsletter manager. It has the ability to create custom search modules and RSS feeds without needing to touch the controlling code. This is nice because while the Telerik team has taken the pains to create a module API, Sitefinity doesn’t let you see its source code.

The templating process for Sitefinity is somewhat odd, but I think this lies more in my relative unfamiliarity with the way .NET typically structures and defines “theming” and less with their implementation of it. Nonetheless, I’ve yet to fully understand how one creates a template and the references the necessary resources (like CSS and images). I’m certain the capability is there, and I’m in the process of reading through their 50+ page users manual PDF to discover where it makes its lair.

Sitefinity is currently the front-runner for our system of choice. Non-technical personnel will need to use the system, and the permissions/users structure is granular enough to make this easy to setup. While I have reservations for my personal role in the redesign – namely the creation and implementation of templates and the overall frontend functionality – the admin workflow for editing and adding new content is fairly smooth. Should we need additional functionality (and we will) the well-documented API should be able to accommodate anything we want to do. It’s worth noting that most of the included modules and document types seem to have hard-coded output templates that are compiled into the CMS runtimes; it doesn’t appear that you can edit these, so if you want different markup or functionality than the included functionality, the module will need to be rewritten and provision for that capability included. The $899 price tag is steep especially when compared to the prospect of open source alternatives, but the time has obviously been taken to make the user experience pleasant and useful and build in extensibility.

DotNetNuke

I installed DotNetNuke with less than the normal enthusiam I’ve had for evaluating the other options on my list, largely because of a prior experience with it some years back. Still, I banished this from my mind as unfair and did my best to not let it color my opinions. Much to my pleasant surprise, ‘Nuke turned out to be a worthy (if somewhat eccentric) contender.

Reading through the documentation on developing a theme or “skin”, it quickly became apparent that a lot of thought was put into the engine driving the CMS. This unfortunately hasn’t manifested itself on the admin side of things, as the interface and workflow is a bit too abstracted and becomes confusing. Still, comparing features-to-features ‘Nuke has more capability out-of-the-box than Sitefinity does – but not by much. The skinning process makes more sense to me than the implementation provided in Sitefinity, but both are going to require a shift in both my mindset and workflow compared to my typical fare of WordPress themes.

An important item to note is that DotNetNuke doesn’t really have an admin per se. Instead it operates from the standpoint that, if you are logged in and have the proper permissions, the site is the admin. This doesn’t agree with my personal preferences on the sbuject, but I can see it being easy to use for others who don’t have quite the anal-retentiveness and everything-must-be-separate-and-in-its-proper-placeness that I do. ‘Nuke is currently a close second, largely because of its open-source price tag. While not nearly as user-friendly, its abilities match or exceed those of Sitefinity in the realm of extensibility. I believe the final decision will come down to the numbers and the requirements of our content team; it’s a decision I’m glad I don’t have sole responsibility for.

Kentico

I knew this option was almost certainly out of the running due to its $1999 starting price. Still, they had a web demo to try out free of charge. I was immediately greeted with OMG SO MANY OPTIONS THERE ARE BUTTONS AND BOXES EVERYWHERE!!!!!!!!!!!! To say Kentico is feature-packed would be a grave understatement – I would liken it to taking a drink from a high pressure fire hose. This CMS can do anything and everything, and if it can’t (because I can’t verify that it can because there are so many buttons and switches and levers) then why does it have all those buttons and switches and levers? The user interface reminds me largely of Plesk, which is to say that it is the promise of functionality wrapped in confusion and baked into the flaky crust of enigma.

Kentico can handle the administration of multiple websites and domains, multiple languages, content, navigation, etc from a single admin. It has extensive controls for SEO (namely URL rewriting). It is confusing as hell to edit content and apply themes/skins/styling. Fear it. Kentico is geared at enterprise level needs and packs a lot of punch. I can’t say that I don’t recommend it, but it definitely isn’t for us because of the price and sheer amount of features (and the learning curve associated with them). You may get the vague feeling that night classes will be needed to use the system, and you probably wouldn’t be wrong in that.

Drupal

If you know anything about Drupal, you might find it odd that I’ve included it in this list. Drupal is nominally a LAMP (Linux, Apache, MySQL, PHP) application, but its development team has taken on the time and headaches needed to make it equally easy to run under IIS and has provided a database abstraction layer to make connecting to a non-supported database as painless as possible. Because of this last item, I thought it would be worth taking the time to evaluate in relation to our needs.

Drupal is nice, it has a lot of capabilities by default and has provision for the creation of custom content types and blogging. The templating capability is easy enough and user interface is relatively simply to understand. I didn’t spend a large amount of time walking through its features because it became quickly apparent that anything it may have had in advantage over Sitefinity or the other options was still overshadowed by the need to write a custom database connector. While not an impossible task, it would take time and testing – an amount of which that would probably come close to the $899 pricetag of Sitefinity when considering the necessary diversion from working on our actual products. Also, it was 5:00 PM on Friday afternoon. Still, it was definitely worth a shot and I would push harder to use this CMS if our infrastructure were less SQL Server-centric.

Some other options that were discarded for various reasons – ranging from infrastructure incompability to install issues to pricing – but that are still worth noting include: AxCMS, Titan CMS, Movable Type (the Enterprise edition contains MSSQL/Oracle connectivity), and Ektron. Like most anything, each of these other options has their own merits and shortcomings. I highly encourage anyone to evaluate these solutions as well if any of the options discussed above fails to meet approval. I welcome comments or experiences that anyone else has had that can better flesh out the pros and cons of the items reviewed on this list.

I take great pains to keep up with news and info related (directly or indirectly) to my particular areas of expertise. During the week, I typically filter out all the links, articles, tutorials, tools, etc that appear in my RSS subscriptions, Twitter feeds, newsletters, and general perusal. At work, this gets translated into emails I send out to my fellow developers in the hopes that they may glean something useful, or at the very least have an interesting read. For myself, these end up in my vast, every-lengthening bookmarks list, which I have been suprisingly slow to add to a service like Delicious.

So, I’ve decided to start making posts of Useful Things, and because I’m all crazy about acronyms and stuff I’m going to call them LUTs. I thought about calling them Selected Lists of Useful Things… but I think we know what that would end up shortened to. Anyone reading these gets the added benefit of the info already being filtered out from all the plankton that drifts through the media ocean each day. And like any journey, it begins with this first step:

List of Useful Things – Week of March 14^th

Resources

Debugging tools for IE

http://samuli.hakoniemi.net/debugging-and-testing-in-internet-explorer-made-easy/

I don’t develop in IE (at least, as a primary). Part of that is a residual disgust with Microsoft from the IE6 regime years, but largely it has to do with the fact that there have never been quality tools or approaches for debugging issues in IE, compared to tools like Firefox and – more recently – Chrome. The tools listed here put a heavy dent in that viewpoint.

jQuery References

http://net.tutsplus.com/tutorials/javascript-ajax/uncovering-jquerys-hidden-features/

http://addyosmani.com/blog/50-jquery-snippets-for-developers/

You can never have too many lists of snippets or brief how-tos on hand. These links provide a fairly extensive, if arbitrary, list ranging from simple items to things I barely know anything about. Especially useful is the concise explanation of event namespacing and what that means for rolling your own plugin.

User Experience

http://www.uxbooth.com/blog/essential-controls-for-web-applications/

A well-developed list of UI controls for use in, well… anything. Screenshots and examples included! A good, quick-reference list for inspiration on your next UI project or redesign.

http://www.lukew.com/ff/entry.asp?156

PDFs and pages of process diagrams relating to design, development, UI, and UX.

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

The title says it all: “Ultimate guide to table UI patterns”

http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/

Working on an iPhone app, or Droid doodle? Some examples of input forms on mobile devices/OS’s.

Articles

http://www.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Containing some reference items but largely dealing with the theory behind designing for business applications versus traditional websites, a well-written article that lays out the processes involved and some best-practices for creating the levers and switches users will flip to run a web app.

http://vimeo.com/9641036

A fantastic video visualization of data pertaining to web usage, social networking, communications usage, etc, etc. Superb visual motif and a fun little soundtrack:

[vimeo]http://vimeo.com/9641036[/vimeo]

Tools

http://gomockingbird.com/

A completely free, easy-to-use, web-based wireframing app. Exports to PDF or PNG formats. Create an account, save your work, share it with other people. Safari, Firefox, and Chrome only.

]]> http://ryanburrell.com/2010/03/lists-of-useful-things/feed/ 0 http://ryanburrell.com/2008/12/level-the-playing-field-using-a-reset-stylesheet/ http://ryanburrell.com/2008/12/level-the-playing-field-using-a-reset-stylesheet/#comments Mon, 22 Dec 2008 14:00:14 +0000 Ryan Burrell http://ryanburrell.com/?p=131

I’ve discovered as of late that there are a lot of practices that haven’t been adopted by the web community that have been around for quite some time (meaning a year or two in web terms).  This is particularly surprising to me in some cases simply because of the sheer usefulness of the practice(s) in question.  A lot of this is simply because of ignorance, and I use that term as it was intended, not with any negative connotation.  So, to help correct that, I thought I’d churn out a quick post on one of the biggest time-savers: the reset stylesheet.

If you’re unfamiliar with what a reset stylesheet is, the concept is very simple.  So simple, in fact, that once you understand it you’ll wonder why we haven’t been using the idea all along.  But to understand why a reset stylesheet is so great, there’s a bit of a back story.

A Brief History of Web Browsers and Why They Suck

The web has been, unbeknownst to most people, a fairly brutal battleground since its inception.  The W3C has been the determining body for what standards browsers and other content devices should adhere to, and they have been soundly ignored from the beginning.  Things really came to a head in the battles between Microsoft and Netscape, with each racing to develop their own proprietary methods that would make developers want to create sites for their browser specifically.

Eventually things calmed down, mostly because of accessibility concerns.  However, the fallout from the earlier battles is apparent in that most browsers still have differing methods of rendering data on the screen.  Things like forms having extra spacing inside them, input fields having their own font families different from the surround elements, lists with varying levels of padding, etc.  This is a huge headache for design and development, to say the least.

Ok, so what is it?

A reset stylesheet is a specialized CSS file, or a collection of CSS definitions, that override all default styling provided by a browser for HTML tags with a visual output.  The practical result of such a sheet is that it removes the ambiguity in display, telling all browsers that this has these types of margins and that has this type of padding.

Exactly what a particular reset stylesheet does is, obviously, based on its contents.  Different stylesheets have been developed with varying degrees of specificity as to what styling they apply.  The stlyesheet that I’ve found to work best for most situations has been one developed by CSS guru, Eric Meyer.  I’ve made a few modifications to his stylesheet and added a few other items:

Download the stylesheet listed below here: Reset Stylesheet (save as…)

1. html, body, div, span, applet, object, iframe,
2. blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. /* opacity: .99; text-rendering bug in Fx2/Mac --- doesn't validate */
28. }
29. h1, h2, h3, h4, h5, h6 {
30. margin: 10px 10px 10px 5px;
31. padding: 0;
32. }
33. p {
34. margin: 5px;
35. padding: 0;
36. }
37. ol, ul {
38. list-style: none;
39. }
40. /* tables still need 'cellspacing="0"' in the markup */
41. table {
42. border-collapse: separate;
43. border-spacing: 0;
44. }
45. caption, th, td {
46. text-align: left;
47. font-weight: normal;
48. }
49. blockquote:before, blockquote:after,
50. q:before, q:after {
51. content: "";
52. }
53. blockquote, q {
54. quotes: "" "";
55. }
56. /* CLEAFIX */
57. .clearfix:after {
58. content: ".";
59. display: block;
60. height: 0;
61. clear: both;
62. visibility: hidden;
63. }
64. .clearfix {display: inline-block;}
65. /* Hides from IE-mac \*/
66. * html .clearfix {height: 1%;}
67. .clearfix {display: block;}
68. /* End hide from IE-mac */
69. .clearer {
70. clear: both;
71. }

It’s a bit lengthy, but still a very small overall file as far as size is concerned.  It can obviously be condensed and is presented in its current format for readability.  The notable changes that I’ve made to Eric’s base stylesheet have been the addition of the “clearfix” methodology (as described at Webtoolkit) to the bottom, as well as a utility clearing class that I found myself using in nearly every site.

Briefly, what the above code does:

• The <html> <body> <div> <span> <form> <ul> <ol> and other tags are all specifically told to have no margins, no padding, no borders, no outlines, and to inherit their font settings from their parent elements.
• The <body> is given a default color attribute of black and a default background color of white, so you don’t have to set these every time you make a new site.
• Headings and paragraphs are given a specified set of margins and zero padding.
• List items are set to show no bullet or other notation by default (especially useful since most lists tend to end up as navigation or with custom styling).
• For browsers with better support of CSS2 & 3 standards, other things like defining a default focus state for form elements are added as well.
• The clearfix code snippets allow the application of a clearfix class to any element, resulting in that element clearing itself after all floated elements inside it (extremely useful).
• The utility clearer class can be applied to any element, causing it to clear any floats above it.

And that’s basically it.  Here are some important tips and directions:

• Include your reset stylesheet above all other stylesheets.  People tend to forget that HTML is read in a procedural manner, and if your reset stylesheet is placed below all other stylesheets, it’s styling will take precendence over the other CSS definitions. “Thou shalt not have other stylesheets before me.”
• To make your life less of a hassle, always include your reset stylesheet from the very start of your design/development.  Trying to add a reset stylesheet after the fact can sometimes be more of a headache than starting from scratch.
• Recycle!  Save your reset stylesheet code as a snippet or simply as a file located somewhere that you can easily copy and paste into any new projects you begin to work on.

Thanks to all those people who have developed this idea long before I got hold of it, because it has saved me a ton of time and headache.  Enjoy!

Image credit: sumeja