Skinning has been one of the most challenging topics in DotNetNuke development. The community has created a fairly versatile skinning engine for non-developers to adapt; however, to achieve perfection or superiority in DotNetNuke skinning requires tremendous amount of time as well as being detail-oriented.
There are a few reasons that skinning has become cumbersome to master:
- Lack of resources (majority of resources including books and documentations are developer-oriented, it's difficult for non-developers to learn and comprehend the concepts).
- Although [TOKENS] makes skinning easier, the framework has poor user experience in demonstrating the skinning process.
- Lack of flexibility for web standards approach.
Back in November 2007, I was invited to be a technical reviewer for a book called DotNetNuke Skinning Tutorial
by Packt Publishing Company. Having seen limited resources about DotNetNuke skinning, I agreed to be involved in the project instantly. It was an exciting experience since I have never had any experience in working with formal documentations besides DotNetNuke training documentations I wrote with the team at Engage.
I got started with the actual review shortly after a few conversations regarding roles, responsibilities and agreements with the team at Packt. Four months later, we wrapped up the book and got ready for production.
Having seen quite a few people lately asking about how to get started with DotNetNuke skinning, I decided to compile a list of resources so everybody can share. Although it might not be the ultimate list of DotNetNuke skinning resources, it certainly helps providing a more in-depth guide in what is available out there.
It is always a challenge to get started on something (well, at least to me). But once you get familiar, it's an exciting learning curve.
Couple weeks ago I posted the experience about working on the book review for DotNetNuke Skinning Tutorial. Yesterday, it came in the mail with two copies and I'd like to share with you all here.
I was anxious to see the final product as I reviewed and recommended the changes to the book along with Jerry Spohn (another technical reviewer) more than six months ago. This is a light book that doesn't take long to complete reading it.
I sometimes run into beautiful designs provided by clients using great combinations of layout and type. I enjoy working with them because of the design focus spans across the website to give unique values to the brands. For those designs, the element called container as in DotNetNuke skinning language often plays a small role. They sometime just need to behave as a placeholder for content.
A few people were asking me about similar situation and how to approach when working with those designs. My suggestion to them is to use a clean simple container and manage the design through CSS.
I joined Engage back in early 2006 working with DotNetNuke skinning for both internal and clientèle projects. By working on numerous projects, I found that many people have different conceptions about skinning with DotNetNuke. And I could not satisfy myself with a clear definition of skinning in most of the books that I looked at. Today, let’s talk about skinning and its true meaning, and learn what we can do to fully accomplish a powerful DotNetNuke skinning engine.
Skinning is not a skill; it’s a profession that requires knowledge and experience in understanding the DotNetNuke platform (especially with the skinning engine), web standards, as well as aesthetic design.
After reading “Are you sure you want to buy that module?” by Will Morgenweck at ActiveModule, it inspired me to write my own version of some sort that similar to it called “Are you sure you want to buy that skin?”.
When doing a search in Google for commercial skins, you might end up at some landing pages (if you lucky enough to see one) with the skin that you’re looking for. However, not everybody gets there in the first try.
Shopping for skins isn’t quite an easy job. It’s similar to taking your computer to BestBuy and have them “helped” with some issues when you don’t have much knowledge about it. The Geek Squad are probably speaking G(r)eek to you and you’ll be leaving the store paying whatever they told you to.
I’ve been there. So have hundreds of others. The nonsense styling of the default.css by developers, the non-standards approach that they take time to put in from regular text (.Normal), HTML headings (H1, H2, H3…in uppercase) to outdated CSS rules with the lack of knowledge in writing CSS shorthand to reduce file size and increase productivity. It’s all ended today.
For those of you who are experienced web developers that have adopted the web standards to reach out to the world, there is no need to struggle with using Firebug or IE Developer Toolbar to hunt for CSS attributes that should be overridden against the DNN’s default. I offer to you, the simplest solution—the default.css MUST DIE.
Each year, DotNetNuke Corporation gathers engineers, developers, designers, and many others whose work involve in Microsoft ASP.NET platform in one of the biggest events called OpenForce™. The purpose is to share knowledge and experience among professionals as well as networking opportunities with experts worldwide.
A few months ago DotNetNuke Corporation called for speakers to present at the annual North American conference in Vegas, I submitted my proposal with multiple topics surrounding DotNetNuke UI design, Skinning, and Web Standards.
I’ve seen many developer created websites and skins with very similar mistakes lately. They all lack of knowledge about principles in web design. In my post about the truth of DotNetNuke Skinning, I mentioned that skinning is not a skill; it takes a bit of knowledge and understanding of the DotNetNuke framework as well as aesthetic design. Many seems to master the first part, however, they all missed the second. By learning how to use Photoshop doesn’t make one becomes a graphic designer.
To assist with future skinning approach, here are the five principles of building a DotNetNuke site or to design a skin. These principles are of course extended to web design and development in general, but the lack of implementation in DotNetNuke community intrigued me to put them together. I hope you all enjoy!
A good friend of mine, Ian Robinson (also a Lead Instructor for Module Development at Engage), went to Texas a few weeks ago to provide training for clients. When he was approached by a potential client asking about skinning, he immediately mentioned my name thought it just helps carried on the conversation. The gentleman took it seriously and asked more about what I have done in the past. Ian struggled to pull out the hard evidence because he doesn't know all the projects that I've worked on since we haven't had time to keep our portfolio up-to-date.
Today, I introduced a quick page listed some of the projects I've done and hope it helps to give a better idea to potential clients of Engage. Although the page you find lacks of detail about the projects, it does carry external links (if applicable) to the live sites so you can have a better look. Some of them are Engage projects and some are my personal work.
I intend to provide more detail about the projects when I get some free time. So if you have any questions, please feel free to contact me and I'll be happy to talk through the detail of each.
Also, if you find thumbnail images without the links, it's either a work in progress project or an off-line site. But I sure will provide detail of all the screenshots.
DotNetNuke has grown quickly over the past few years. But it has only been major changes for the developer community. The question we should ask here is how do we bring the framework closer to the general audiences where all businesses from small to large can understand and utilize it for their online presence?
dnnGallery was introduced to help answer it. dnnGallery is the place to showcase DotNetNuke projects to all audiences from non-technical, business professionals to DotNetNuke developers.
I designed the site with layout to showcase projects in a way that provides valuable information to visitors. Then the design was implemented into a DotNetNuke skin package with XHTML/CSS and Web Standards Compliance approach.
The site was developed with great help from a very good friend of mine, Ian Robinson. Ian also a DotNetNuke training instructor at Engage Software and has extensive knowledge of module development. Some of you may have already known him through taking our training courses at Engage.
A long-awaited DotNetNuke 4.9 released last week has made the community excited. I personally upgraded my web site right at the minute DotNetNuke announced on their homepage the new version is available.
A few notable changes in 4.9 have been fairly documented this time after seeing the community’s frustration of the lack of such friendly documentation/release process when new versions introduced. Thanks to Joe Brinkman’s great documentation efforts, we all now can get the major highlights of updates.
As you can see beside the new default skin, a skin object called “TEXT” also introduced to allow text localization within skins. When Shaun Walker first blogged about it, I was excited to see the improved skinning process and a few enhancements, but let’s take a closer look to see what are the benefits this new skin object give us.
Thanks to all who came to my session in Tulsa. I hope you enjoyed the presentation and learned a bit about DotNetNuke skinning and its engine.
It might be too much information in an hour and a half, but I couldn’t consolidate the topics to make the entire presentation valuable to everybody. Anyway, here’s the presentation, feel free to download and leave feedback and comments to let me know what you think.
My good friend, Ian Robinson, is presenting his session about “What’s new with DotNetNuke 5.0?”. I guess we’ll be heading out soon when he’s done.
For those of you who have never heard of SlideShare before, it's a social networking site for sharing your presentations (or knowledge if you will). It's a very nice tool to help speading your presentations to the mass audiences.
I posted mine today just in case anybody missed the conference in Tulsa last week can see it.
Thanks everyone who came to my sessions at OpenForce in las Vegas this year. I hope you all learned a lot from all the sessions you attended at the conference. If you have any questions or suggestions specifically about my sessions, feel free to let drop a line here.
I know Tracy Wittenkeller did a great job on his two sessions about building DotNetNuke web site and designing HTML skins which are very helpful to beginners. It’s great to see so many DotNetNuke newbie at such event.
You can view and download the presentations I posted at SlideShare. Feel free to grab a copy and ask any questions you may have.