Custom Orchard Themes - Converting Existing Web Design and HTML Templates

Custom Orchard Themes - Converting Existing Web Design and HTML Templates

I convert a lot of HTML and CSS Templates to custom Orchard Themes for clients. These web templates are either created by their web designer, purchased from a website selling HTML and CSS Templates, or already exist on their current website that they want me to convert to Orchard CMS. As you might expect, these HTML, CSS, and JavaScript templates are built without any knowledge of Orchard, handmade and not expected to be converted to a CMS Theme, rarely optimized for a production website, and are usually HTML 4 instead of the HTML5 expected by Orchard. Converting these web templates to Orchard Themes is not only about getting these templates to play nicely with Orchard, but optimized for SEO, website performance, and other areas important to the health and welfare of the website and client's business. Here are some observations I've picked up while converting various HTML and Web Templates to Orchard Themes.

Integrate Orchard into the Web Design

My first Orchard websites focused on integrating the web design into Orchard, and really what I should have been doing is integrating Orchard into the web design. The web design and templates are the king here and Orchard is but a servant of the website, client and business needs.

I rip out everything Orchard thinks it knows about HTML and replace it with the web design.Now instead of trying to incorporate the web design's HTML, CSS, and JS into the default thinking of Orchard, I rip out everything Orchard thinks it knows about HTML and replace it with the web design. This means there is a bit more overriding of shapes and wrappers, but the overall solution is beautiful, uninterrupted HTML true to the spirit of the web design. You get better validation of HTML and CSS, less noise created by Orchard, and it is far more easier to maintain with changes to the original HTML, CSS, and JS.

You also have the benefit of having a website that does not look like it is powered by Orchard. Last thing we want to do as Orchard Developers is have a whole bunch of similar ( if not exact ) looking websites like the early days of the DotNetNuke ( DNN ) Community.

Get Opinionated

We all overexaggerate how much control we need over our websites and what we plan to do with it.Seriously question if you really need a reusable widget or module for absolutely every inch of the website. After 18 years of developing, managing, and administering websites, I have come to the conclusion that we all overexaggerate how much control we need over our websites and what we plan to do with it. In reality, most people are far too busy running their business to spend time on the website.

This means the 75 zone, 100+ widget, Orchard CMS website is probably overkill. In fact, the web design templates that cross my desk to be converted to custom Orchard Themes often won't handle that flexibility anyway. And, because every little zone, widget, content type, and part is dynamically generated on the fly and composed at runtime, this may not be the best performing solution using any CMS on any host provider! You'll also find trying to manage all of that in the administration area of any CMS will be a full-time challenge.

As such, I have gotten very opinionated in my Orchard Themes when possible. Just because there is a widget or you can build a widget doesn't mean there should be one. Often the client and I find it is so much easier and cheaper to develop and maintain an Orchard website that is far more opinionated than a focus on "there's a widget for that" and "you can customize it yourself" but probably never will attitude. The website also ends up being better performing as Orchard has less to do in the pipeline to display a page.

This isn't to say you just go around hardcoding everything and lose sight of the main benefit of Orchard. It's just that you shouldn't go overboard the other way as well. For example, I am trying to think of the last time I changed the code to display the favicon or Google Analytics on a website. Does that really need a widget? Or, there are perfectly good components to display Twitter Tweets on a website using pure JavaScript in the browser without any need for using a custom module that uses Orchard CMS and Web Server Resources.

Sum is Greater Than the Parts

The Orchard Website is more than just a collection of Modules and Widgets.I have found that web templates that are purchased on the Internet or received from a web designer are rarely optimized for performance and maintainability. They are also not developed in a way that makes them easy to use in a CMS. JavaScript is never combined and minimized or leverages a Content Delivery Network ( CDN ), and the JavaScript is usually sprinkled all across the page and usually never in the optimal locations. The same is true for Orchard as it composes web pages made of shapes that are generated by numerous widgets and modules that make up your website. These dynamic shapes are just individual parts focused on their own needs and not on what is best for the whole website.

As an Orchard Developer, I look at the website as more than just a collection of Modules and Widgets. In addition to getting opinionated by optimizing the HTML, CSS, and JavaScript in the initial HTML Templates, Orchard widgets and modules need to be customized and overridden for the benefit of the website as a whole. Images are optimized. CSS and JavaScript are optimized, combined, and minified. In general, intelligent decisions are made for the betterment of the website as a whole that a module or widget designer could not know beforehand.

This isn't to say that one cuts off his leg to spite his toe. The beauty of Orchard is that it is pluggable and often modules are updated with enhancements that will need to be re-integrated into the website. Deciding how far and what to optimize is important. However, it must be done or the Orchard Website may be a slow and messy pile of HTML, CSS, Images, and JavaScript that hurts performance, SEO, and compatability with other modules.

Open the Chrome Developer Tools or Firebug and look for opportunities to optimize the Orchard Website. Optimize as a whole without doing a disservice to the value of pluggability and the migration of new and improved components and themes.

Conclusion

This is just scratching the surface on ways to improve the development of custom Orchard Themes and Websites. Now that we have had time to digest much of the Orchard Documentation and build custom widgets, themes, and modules, we need to raise the bar on the quality of Orchard Websites. In addition to building more manageable, feature-rich, and well performing modules and widgets, we need to make sure the website as a whole is optimized. This will mean working closely with the client as to the real needs of the website and customizing those Orchard Modules, Widgets, and Themes for the good of the website.