RalphWilliams.com

DotNetNuke World 2011 - #Winning

me@ralphwilliams.com — Mon, 28 Nov 2011 14:02:18 GMT

This year marked the first year that I was able to attend the annual, official DotNetNuke Conference. And what a conference it was! This was the first year that DotNetNuke decided to host the event apart from the Microsoft DevConnections and they did a fantastic job!

There were several high points around the conference. The sessions were great and I was able to gather some important information in many different aspects of DNN including some insights to the way DotNetNuke is referring to the new UI elements. The keynote, by Shaun Walker, also included some great news about where DotNetNuke is going in the near future. I believe, however, my favorite session was the closing Question and Answer session. We learned some great new things coming down the line that will make all of our jobs much easier, including a preview of the new DotNetNuke Store and the the intention to make DotNetNuke upgradeable from within the application itself, that will download the desired version and walk you through with a wizard style installation process.

It was a privilege to have the opportunity to present as well! I had a great turnout in my session. I do have to admit, however, I probably could have used another hour for my session, as it’s difficult to cram all of the details of skinning into a 50 min session.

Although the sessions and keynotes were great, I would have to say, without a doubt, my favorite part was getting the chance to meet some of my Twitter friends face-to-face. I was able to hang out for the first time with @MarkXA (Mark Allen), @nokiko (Armand Datema), @OliverHine (Oliver Hine) and several others all in one place. Also, getting a chance to get to know some of the DotNetNuke Corp. staff was pretty cool too!

Another great time was the DNN After Dark. The setting for the party was very cool and gave a great environment for hanging out and getting to know more people. The best part of the night was the Arrow wars! Arrows were flying all over the place for about 45 minutes! I’m sure the hotel staff wasn’t thrilled with it as they were going to have to figure out how to get the arrows out of the light fixtures in the ceiling… Glad it’s them and not me!

Definitely looking forward to next year and the Day of DotNetNukes and User Groups that come in between!

More ...

Skinning Containers in DNN6

me@ralphwilliams.com — Thu, 06 Oct 2011 20:16:00 GMT

With the latest major update to DotNetNuke, there have been some questions as to what has changed in skinning for DotNetNuke 6.0. One big change has been the introduction to the new Manage button automatically into the containers. Some love it, some hate it, and others seem to still be undecided.

Category: Skinning

Designing for DotNetNuke

me@ralphwilliams.com — Fri, 22 Jul 2011 15:26:51 GMT

I got the inspiration for this blog about 8 months ago from a Smashing Magazine article entitled, “Designing for Content Management Systems”. So, why write another blog but, specifically for DotNetNuke? Well, they did a great job on their post but, they were generic to just CMS’s in general, and we all know that DNN has some challenges of it’s own.

The main challenge that I have found to be when designing for DNN, is planning for unknown content. You just never know what’s going to happen once you hand the keys over to the client. So, a lot of my designing is actually trying to plan ahead for the many different amounts/content of what could be added to the site. This includes not just content panes, but also menu items. For some reason, once a client gets access to adding their own content, one of the first things they do is create new main menu items. Now, some of my designs have been very specific and the site structure has been discussed w/ the client and they actually understand that they need to leave the main menu items as is, but that’s not always the case.

So how do we actually design specifically for DotNetNuke? I am going to give a list of pointers below that can serve as things to keep in mind.

Keep it consistent. Keep it Simple.

I love consistency on a website! It sets up the site to be able to be quickly learned by the user. It sets an expectation. To me, it also means simplicity. Now, when I say simplicity, that doesn’t mean that your site has to be extremely basic. It can still be artistic and creative, but remember, DotNetNuke uses containers and content panes and any container can be used all over the page. So, keeping a from getting too complex of a design will allow for the flexibility that is needed for ~~a CMS~~ DNN. Use consistent colors, fonts, and layouts.

General Layout

A key thing to remember is, your design needs to be flexible. Wait, let me say that again, “Flexible”. Okay. You never know what your client is going to end up doing with a page; they may put one sentence on it, a super large image, or a ridiculous amount of text with little to no formatting. So, the best thing you can do is plan for that. How? Try different views of your design, some with a short amount of content and some with a large amount of content. Also, If you are creating columns, make sure that they will still look okay, if the content is not the same length. Experiment with what you wouldn’t do.

Navigation

Wow. Where do I start here? The owner of the site may add way too many pages to the top structure of the menu. Plan for more than what you expect. That’s not to say you have to go crazy, you still need to create some boundaries for the site owner. If the menu names are going to be quite long, go for a vertical navigation, if you think they will be concise, use a horizontal nav. If it looks like the site will have a large amount of pages, a mega-menu will probably work well for you, but don’t force a mega-menu where it’s not needed. Also, think of helping the user with side navigation for sibling/children navigation. And make use of the footer for some commonly used pages.

Skins and Content Panes

I am a minimalist when it comes to design and skinning. I feel there really isn’t a need to create tens of skin and container designs. This goes with my earlier point of consistency. I have been called in to work on a project that literally had at minimum 30 content panes! What a mess, and talk about poor performance! They explained it as having flexibility… That’s what other skins are for, and really there is no need to make layouts that go from 1 pane wide to 6 panes wide and everything in between. I typically go at most 3 wide with sometimes 4 wide in a mega footer (fat footer). I will typically create a home page design, a sub page design, and a full width design. In my opinion, creating a reverse of the sub page, especially if you have a side navigation, will just confuse the site visitor.

Containers

I have found there is little need for having more than 4 containers per design. Too many available containers will confuse the client while integrating their content and the user as they try to navigate the content. But, you have a footer or sidebar with a contrasting background color that just won’t work reusing the container from the body? Enter CSS specificity. Use CSS to override the container’s default styling of font colors and background colors to fit within the content pane that you are in. This takes the guess work out of which container to pick and just makes it automatic. Granted, there are cases where this might not work, but in nearly all cases it will. And it will make it much easier when adding new modules to a page.

Use the available tools of DNN to help the site owner.

One of my favorite improvements of DotNetNuke 6, among many, is the option to specify what formatting tools are available in the WYSIWYG editor. Customizing the RadEditor has always been possible, but it was always through editing an XML file. With this, you can remove many of the editing options that would allow the typical user to introduce elements that would make you beautiful site, well, let’s just say, no longer beautiful. Don’t think of it as removing functionality. Think of it as helping the site editor keep the site beautiful!

While designing for DotNetNuke can introduce some challenges, It really doesn’t have to be too hard. It allows for a design concept to be enforced while still allowing for flexibility. For so long my goal was to make my website look like it wasn’t a DotNetNuke website. I have been impressed at how far DotNetNuke site designs have come in the past 2 years, but we still can do so much better. Now, get out there and create some fantastic DotNetNuke designs!

More ...

Category: Skinning

Category: General DNN

A Shiny, Brand New Job!

me@ralphwilliams.com — Thu, 30 Jun 2011 15:55:09 GMT

Be forewarned, I WILL be throwing out some link lovin’ in this post because I owe a lot of thanks for all of this.

Wednesday, May 18th marked a brand new chapter in my professional and personal life. I started working with Arrow Consulting and Design!

Way Back When

A little backstory on me… I used to drive trains; I was a conductor and then engineer at CSX Transportation for 8 years. I decided there was more to life than working on call 24 hours a day, 7 days a week, 365 days a year with only a 2 hour notice. Not fun. So, I decided to do the next closest thing, web design…

The Announcements Module and jQuery as an Accordion

me@ralphwilliams.com — Sat, 23 Oct 2010 02:51:00 GMT

I have found another great use for the DotNetNuke Announcements module and jQuery. Using it create a dynamic accordion. In case you missed it, this is the second time that I have gotten the DNN Announcements module and jQuery together. See my previous post on how to Turn DNN Announcements Module into a jQuery Slider.

This time, I needed to create a solution where I could have a jQuery accordion yet it could be easily updated by the client. So, I thought about the different core modules that were available and picked the Announcements module due to the ability to easily template it out. Now, if only the DNN Blog module were fully template driven (*hint *hint). This module has spots to place a header, repeatable item, alternating repeatable item, separator, and footer. We will be using only the header, item, and footer.

Category: Skinning

Category: jQuery

Beating Classless Modules with a Wrapping Div

me@ralphwilliams.com — Fri, 24 Sep 2010 17:04:56 GMT

The problem I was having.

I was working on making some visual changes to Blog Calendar and Blog Categories modules through CSS yesterday and was getting very annoyed having to use the ID that DNN generates to get any specificity for those modules. These modules, along with quite a few other core and non-core modules, are not what I consider “skinner friendly”. They use generic styles and are set up to display the way the developer wants it to show up, not the way I want it to, i.e. tables, inline styles and no use of module specific class names.

One thought that came to mind was to create a container for each module with a class name in the container so that I could specify that module when in that container, but that would mean that I would have to create several new containers, and everyone knows excessive containers can be very annoying and confusing.

A Book Review: Building Websites with DotNetNuke 5

me@ralphwilliams.com — Wed, 15 Sep 2010 14:29:00 GMT

Earlier in the year I was contacted by PACKT Publishing to review an upcoming DotNetNuke book, Building Websites with DotNetNuke 5 by Michael Washington and Ian Lackey. This was my first book review, but there was no way I was going to turn down a chance to check out a new DNN book!

I received the book leading up to a holiday weekend and thought it would be a perfect opportunity to dive headfirst into it. I began reading it and saw very quickly that it was a book that would be a valuable resource for an Administrator of a DotNetNuke website or someone who is just getting into DotNetNuke. To be honest, I had been hoping for something more advanced, but it was a very comprehensive book for a beginner. And, I only read the first half of the book. But, more on that later.

Category: General DNN

Turn DNN Announcements Module into a jQuery Slider

me@ralphwilliams.com — Fri, 04 Jun 2010 03:34:00 GMT

DotNetNuke has come a long way recently with making things much more w3 compliant. This has allowed for more than just cleaner code; it has also allowed for much more control of your website through jQuery and CSS. Also, according to the forums, it looks like things are getting even better for compliance and control.

One of my favorite updates of DNN modules to this new compliance, is the DNN Announcements module. With the latest release, we now have the ability to set up the announcements as a list and apply some cool jQuery to it. When I started looking into what I wanted my slider to be, I decided that I wanted to have my main image fade in and out and the title and description to slide in from the bottom. I came across the s3Slider jQuery plugin which seemed to provide exactly what I was looking for.

I have outlined the steps below on how to add it to your site. I did not go into much detail on how things are set up...

Tags: slider,jQuery,CSS,skinning,announcements

Category: Skinning

Category: jQuery

Create a non-Award Winning DotNetNuke Skin (pt. 3)

me@ralphwilliams.com — Sat, 13 Mar 2010 02:34:00 GMT

This is part of a three part series on skinning my Reasonable Design Skin from the 2010 DotNetNuke Design Challenge Skinning Contest.

Part 1 was Slicing the design for the DNN Skin.

Part 2 was writing the HTML for the skin.

Here, in part 3, I will go over the CSS for the skin. If skinning with CSS is new to you, be sure to check out my post An Introduction to Skinning in CSS for DotNetNuke.

The CSS

Now that we have all of the HTML in place, we need to style it. The first thing that I do, is to apply my “pre-fab” tools. I will not go into much detail with these as there are plenty of available resources out there.

Category: Skinning

Create a non-Award Winning DotNetNuke Skin (pt.2)

me@ralphwilliams.com — Fri, 12 Mar 2010 04:38:39 GMT

Continued from Part 1 – Slicing the Design.

Setting up the HTML for my skin.

Because of some of the design elements that the annoying designer (me) had in the design, there is a small bit of complexity to it.

There are a few things at work here.

the content area needs to be centered on the page, which means it needs to be wrapped in a div that is centered.
To center a div, you must set a specified width and set the left and right margins to auto. (ex. margin:0 auto; shorthand for margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto;)
the gradient spans the full width of the page in the lower content area that holds the bottom three content panes.
The footer does the same thing.
I want the footer to always be at the bottom of the browser.
I want to use as little code and nesting of divs as possible.
It needs to act the same across all browsers.

Category: Skinning