Blog

Lots of Widgets Means Lots of

Tue, 12 Feb 2013 20:45:00 GMT

Orchard CMS has done a great job making most everything extensible but the one area that you don't seem to get much wiggle room is the HTML tagging inside wrappers. I was faced with a client who was concerned with the overuse of the "<H1>" tag when placing several widgets all over the layout of the page for SEO reasons. They wanted to make it clear to search bots that widget titles are less important than the main article title, and make them "<H2>" tags accordingly. This is especially important when you have many widgets on a page.

Creating alternate Views is a well documented subject and something easily accomplished using the Shape Tracing Tool. However the title of the widget is specified inside the wrapper code, not the template code, so you can’t do it that way. One easy solution is would be to alter the widget wrapper code in its module, but that is not ideal. Our policy is to not alter the Orchard source code (including core modules) so we can continue updates in the future unimpeded.

So what can be done? Never fear, there is actually a simple solution to this problem that allows you to leave the Orchard source code alone, and that solution is custom wrappers. The only drawback to this approach is that you can have only one wrapper active at a time per theme.

To create a custom wrapper, all you have you have to do is create a .cshtml file with the same name as the wrapper you desire to customize and drop it in the "Views" folder of your site’s theme. In my case, I simply copied Widget.Wrapper.cshtml from the widget module’s “Views” folder into my theme’s “Views” folder and then made the minor change of updating “<H1>” to “<H2>” in the markup.

Custom wrappers are just another way Orchard CMS gives you ultimate control of your rendered markup. They have the limitation that they are global, unlike templates which have many naming conventions to allow for more flexibility. But I think that is the intent of wrappers, and they are convenient markup containers for many situations. If you have a case in which uniform markup in the wrappers is not desired, you can use this same technique to create a wrapper that doesn’t add markup.

Introducing The Theme Machine Responsive

Thu, 03 Jan 2013 18:34:00 GMT

After building a lot of sites in Orchard CMS using "The Theme Machine" as a starting point and exploring the current responsive themes in the gallery I saw a need for a more robust responsive solution that would work across any device (JS enabled) right out-of-the-box, including navigation! "The Theme Machine Responsive" is a fully responsive version of the great theme "The Theme Machine" that ships with Orchard CMS and is built to work with the existing widget structure and tiered navigation.

Check out a live demo of this theme, visit the project site, or download it from the Orchard Gallery.

Features:

Flexible Margins and Padding:

"The Theme Machine Responsive" utilizes percentage and EM based margins and padding over pixels for fully flexible/relative margins and padding relative to device viewport width and font size. This was done by converting most of the existing site margins and padding to percentage/EM's instead of the default pixels. On occasion I decided to leave the pixel based margins/padding for dynamic content like zones since maintaining consistent percentages for margins/padding is relative to the container/sibling elements.

Lots of Breakpoints

Starting from a "Mobile First" base CSS approach, I started with a styling that would apply to all devices, gradually adding additional styling as viewport size increases. The following breakpoints are included:

Base

The base styling for all devices and viewports. Everything is built to "stack" with no columns or floats yet. Navigation is also stacked and collapsed using JS.

@media only screen and (min-width: 320px) // Mobile Portrait

For most mobile devices in portrait, this breakpoint is stubbed out in the CSS but not used as most devices will fall into the base CSS category and no changes will be needed here.

@media only screen and (min-width: 480px) // Mobile Landscape

Mobile devices in landscape orientation. Minor modifications were made to branding but generally this would be the same layout as the base CSS category.

@media only screen and (min-width: 600px) // Small Tablet

This breakpoint comes in handy for small tablets like many e-readers. Minor modifications to branding and navigation were made in this breakpoint.

@media only screen and (min-width: 768px) // Medium Tablet in portrait orientation.

This is the biggest change so far. Most of the CSS that was stripped out of the base CSS from the original "The Theme Machine" has been re-added here. Columns are now floated, the main navigation has resorted back to the default "The Theme Machine" styling, and everything pretty much resembles a flexible column full width layout.

@media only screen and (min-width: 1024px) // Tablets in landscape orientation and desktop/laptop/netbook computers.

Only one change was made here since 768px took care of most layout changes. Here I added a max-width CSS property to keep the content contained to a max size. Remove this if you still want a full width layout.

@media only screen and (min-width: 1280px) // Desktop

Stubbed out for larger desktop monitors but no changes made to CSS

@media only screen and (min-width: 1400px) // Widescreen

For TV's or really large monitors I increased the font-size on body as well as the max-width for the main wrapper.

@media print // Printers

Default styling for printing.

Additional considerations not included

You may want to add breakpoints for retina devices (iOS) and include larger images. Also you may want to only include images sized for each device within the specific breakpoints and not first in the base styling so they are only downloaded once for their specific device size.

Responsive Navigation

One of the biggest problems with responsive design is dealing with multi-level navigation. Although the solution implemented in this theme won't work for everyone I believe it is a good strategy for most cases up to three levels of navigation working with the existing Orchard CMS framework. Using JS (jQuery) I collapsed the navigation for small breakpoints (below 768px) and added a button to expand/collapse the block level navigation. Also all sub levels are indented/color coded for distinction of sub levels. One thing to note is that the button was created using <span> tags for the "three lines" and then styled with CSS. You could optionally switch this out with an image (I recommend a SVG image) if you desire but this way you can change any colors with just the CSS.

Adjusted Layout for Mobile and Tablet

In addition to the responsive navigation, I also took the liberty of duplicating the main navigation and placing it in the footer for a better UX when a user has scrolled to the complete end of the site and wants to navigate somewhere new without scrolling back to the top. You could replace this with a "back to top" link or similar if you desire. I also moved the "first aside" from above the main content (in stacked mobile views) to just below it as this <aside> would generally be less important than the main content (as the term "aside" implies) and makes sense to come after the main content area on a smaller device. Both of these layout changes are located in ResponsiveChanges.js if you would like to modify/remove them.

Better CSS Reset

Taking a page from various sources across the internet (HTML5 BP, Normalize.css, 1140 Grid system, etc. ) I added various defaults for HTML5 elements and embedded content.

Mobile Friendly Meta and Legacy Fallback for non HTML5 supporting browsers.

For this we added some handy <meta> elements to optimize content for various mobile devices (once again thanks to HTML5 BP folks) as well as some handy <html> conditionals for legacy IE access. Lastly we added html5shiv and Respond.js, handy polyfills for HTML5 support and media queries. (Not all media queries are supported with Respond.js so take a look at their docs). Oh and for fun I included apple touch icons with correct sizing using the good ol' Orchard CMS logo..

In Conclusion:

I know there will probably be additions/changes needed for this theme as well as some questions regarding why I did what I did but hopefully this will be a good starting point for any developer that wants to create a flexible, fully responsive website that maintains most of the original "The Theme Machine" base styling, while providing a nice default responsive layout and navigation.

Note*

There is a Orchard CMS bug regarding breadcrumbs on individual blog posts showing up as duplicated navigation. You can see this duplicates our main menu structure but can be fixed by creating a layer rule that excludes blog posts and then adding that rule to the breadcrumbs widget.

Check out a live demo of this theme, visit the project site, or download it from the Orchard Gallery.

Planet Telex .Net Library Open Sourced

Tue, 27 Mar 2012 21:02:15 GMT

We have been cultivating a .Net library since the framework version 1.1, and have been evolving it over the years as the .Net Framework improved and changed. It has recently been upgraded to .Net version 3.5 and made open source on GitHub. Not only is it a useful collection of classes that assist in rapid development, but we consider it to be a good example of the quality of our work. It is well tested, fully documented (with compiled html and xml versions), and conforms to a number of good practices. For example, you will see consistent naming conventions that are enforced by powerful IDE tools like ReSharper.

The code itself is readable- explicitly named variables and well formatted syntax. For this reason, in-code comments are not excessive. The code itself can be read and explains what is being done. In-code comments appear only when it isn't easily apparent why a piece of code is doing what it is doing. We are also proud of our namespacing and class naming in the library. They mirror the standard .Net namespaces where it makes sense, and all are semantically organized.

Currently we have 4 assemblies in our library:

Assembly	Description	Dependencies
PlanetTelex.dll	A general purpose library that can be used in any application context. Includes a regular expression library, extension and utility methods to common data types like String and DateTime, and much more.	System, System.Configuration, System.Core, System.Data, System.Runtime.Serialization, System.ServiceModel.Web (used for JSON serialization), System.Xml
PlanetTelex.Drawing.dll	A basic programmatic image editor, including methods for color adjustments and rotation.	System, System.Core, System.Drawing, EXIFextractor (included)
PlanetTelex.Web.dll	A library that can be used in any web context. It includes items like an advanced URI parser, HTTP protocol helpers, and an RSS writer.	System, System.Configuration, System.Core, System.Web, System.Xml, PlanetTelex
PlanetTelex.Web.Mvc.dll	A library specific to ASP.NET MVC applications. Includes items like HTML and AJAX extensions and the ability to track a streaming result.	System, System.Core, System.Web, System.Web.Abstractions, System.Web.Mvc, PlanetTelex, PlanetTelex.Web

It's easy to browse the whole thing on GitHub. If it has something you could use, download or fork the project. Happy coding!

Orchard CMS Display Types

Tue, 27 Mar 2012 20:19:00 GMT

When trying to understand templating and the placement of parts in Orchard CMS, you will encounter the notion of "Display Types." By looking at examples, one quickly gets a sense of what these values are, and they are partially documented on the official documentation site. But we found it irritating that we couldn't find a comprehensive list of possible values anywhere. So we searched the code base and found only four:

Detail
Summary
DetailAdmin
SummaryAdmin

Each content item has two types of templates: editor templates and display templates. Display types with the "Admin" suffix target the editor templates the others target the display templates. Similarly, there are two contexts for each content item: detail and summary. A content item is rendered as "summary" in both lists and projections as well as other modules that might aggregate content (like the sockets and connectors module).

Orchard CMS vs. WordPress

Tue, 27 Mar 2012 20:03:00 GMT

At Planet Telex we work with both Orchard CMS and WordPress on a regular basis. When we decided to re-platform our website, we knew we wanted to use one of those 2, but which? Clearly they are built on different technology stacks, but we have the ability to host both. And although we have a robust C# library, the ability to use it didn't factor into the decision much either because for our company site we simply didn't need much of it. That which we did need could have ported over to PHP without too much fuss. Bottom line, the technology stack was not a determining factor in our decision, which was Orchard CMS.

It is true that we choose Orchard in small part because we wanted more experience in this younger, emerging platform. But at the same time we weren't going to do that at the expense of usability, reliability, or performance. We're happy to report that Orchard is on par if not better than WordPress in these aspects. Here is a high level overview of the pros and cons of these two systems:

	Orchard CMS	WordPress	Advantage
Usability	The Orchard CMS administration interface is a carefully studied replica of WordPress. Since this has always been one of WordPress's strong suits relative to other CMS, this was a smart move. It also has the benefit that users that are familiar with WordPress with quickly acclimate to Orchard.	Until Orchard came around, this was one of the primary reasons to choose WordPress. When a site is built using WordPress, the client feels happy and in control. Other CMS usually result in less happy clients as they struggle to use the tool.	None. By copying WordPress, Orchard CMS neutralized this potential advantage WordPress.
Reliability	While a relatively young platform, Orchard is built on a modern and reliable technology stack including ASP.NET MVC and nHibernate. In practice, we have not experienced any reliability issues.	WordPress is tried and true. As a mature platform that has undergone many upgrades and is used by millions of websites, it is evident that it is reliable.	None. They are both reliable platforms.
Performance	Although we had some reservations in the way Orchard deployed modules as complete Visual Studio projects as opposed to compiled assemblies, it doesn't seem to lessen the performance at all. The upgrade to 1.4 saw even more performance improvements. Orchard CMS is plenty snappy.	Since it runs on PHP scripts rather than compiled binary code, WordPress has a native disadvantage but in practice, this difference rarely matters, since there are so many other performance enhancements that dwarf this modest performance hit.	None. In both cases, good performance depends mostly upon the themes you use and modules you install.
Extensibility	Orchard structures its extensibility mechanisms in much the same way as WordPress. You can install themes and modules. Some modules are widgets that can be placed around the site. Sound familiar? Of course, while the mechanisms are very similar the marketplace for Orchard pales in comparison to WordPress'. If you aren't developing a custom theme, you will probably find better templates on the WordPress marketplace.	WordPress has been around much longer and has a much larger user base. When it comes to out-of-the-box extensibility options, Orchard CMS will lag behind WordPress for many years.	WordPress. There is simply a larger marketplace.
Designer Control	This is the first category where Orchard is the hands down winner. It was designed so that you can create many template alternatives to anything- any module you download or field you use. In addition to that, there is a handy placement metadata file as well as a run-time tool that makes some high level formatting a cinch.	If you have ever implemented a site using existing themes and modules in WordPress, you know that customizing their look to be exactly what you want requires some degree of hacking. Either hacking at their module or theme, or using JavaScript to finesse some section of the DOM you can't control the rendering of.	Orchard CMS. This was a big deal for us since we had a challenging design to implement in the first place. The last thing we needed was to not have absolute rendering control, even when using third party modules.
Semantic Modeling	Here again, Orchard took some time to innovate. In WordPress you can create "pages" or "posts," but any custom types of content past those require a developer or custom plugin. In Orchard you start off with those two content types, but via the administration interface you can create any custom content types you can conceive of and put them together with reusable content parts and fields. For example, our Planet Telex site consists of "pages" and "blog posts", but also content types "service," "portfolio item," "employee," and "product." Each of those types is a unique configuration of parts (like "common" and "title" and "autoroute") and fields (like "media picker," "text," or "link"). This ability combined with the designer control mentioned above makes Orchard a very compelling choice if your site is going to have more than simply "pages" and "posts."	Sorry WordPress, the concept of semantic modeling is mostly foreign to you. This is an area where WordPress's entrenchment hurts rather than helps. Starting from the ground up with WordPress for a model, Orchard was able to architect in some flexibility that would be very hard for WordPress to achieve.	Orchard CMS. In our opinion, this ability is the "killer app" that made Orchard win out in our decision making process. The ability to create a dynamic, domain modeled site without writing custom code is a revelation. One caveat- there is certainly a limit to how large a domain model the system is capable of. A site like NetQast, for example, is far better off as a custom ASP.NET MVC application.
Search Engine Optimization	Routes are fully customizable, as are themes and modules.	Routes are fully customizable, as discussed earlier though page rendering control is easier in Orchard.	None. Its tempting to award this to Orchard too since it can make rendering custom markup easier (and hence is easier to transform an SEO unfriendly module into a friendly one), but in the hands of a good developer both can be equally SEO friendly.
Community	A smaller community as you would expect, but the people involved in the project are surprisingly accessible, even though overseen by Microsoft. We logged a bug on CodePlex and had one of the principle developers responding to me before the day's end. No way would that happen with WordPress!	Large and varied: for just about anything you could want to do with WordPress, you are likely to find a module that does it, a video that explains how to do it, and a blog post that details it. The community and marketplace remain one of the most compelling reasons to choose WordPress.	WordPress. Although Orchard CMS is building a good documentation base and the marketplace is growing, it has a long way to go to catch WordPress in this regard.

For those keeping score, we have a 2-2 tie. This is good because we still recommend WordPress to a lot of our clients. First there is the technology stack. It is often more expensive to host Microsoft infrastructure. Then there is the marketplace, community, and familiarity of the WordPress interface. When the functional requirements are analyzed, it is not uncommon to find more value in the WordPress marketplace- i.e. you can buy instead of build more often, a tried and true way to maximize ROI.

But while WordPress has these advantages, Orchard CMS is a clear improvement in many ways, most notably in the areas of designer control and semantic modeling. If both the WordPress and Orchard marketplaces offered the same level of value for a particular set of requirements and the technology stack isn't a consideration, choose Orchard. If the WordPress marketplace has the plugins and themes that will save you a bunch of money, then by all means do it. WordPress is still a great platform.

Orchard CMS is a competitor to WordPress and built on a very different platform, but we view Orchard CMS as more of a successor. It copied all the best parts of WordPress but innovated in areas where it falls short. Planet Telex will continue to use both Orchard CMS and WordPress, and as always will choose one of those or even a different platform for any particular set of requirements.

Good News Everyone!

Tue, 27 Mar 2012 17:12:09 GMT

We've rebranded! Our star designer Bobby Benton completely reworked our corporate branding from the ground up and designed this beautiful and distinctive website. Built on the Orchard CMS platform, this site features some of the latest HTML5 and CSS3 techniques. In addition to putting great care and attention into the content included on this site, we have endeavored to make it fun and engaging to use. Subtle effects like the logo's tracer light, the background's slowly shifting colors, and dynamic text gradients lend a feeling of substance to the design.

But perhaps the star of our new website design is our new PT Coverflow jQuery UI widget. Developed primarily by Dan Hansen after all the existing web based coverflows we found failed to fulfill our needs, PT Coverflow features advanced perspective transformations implemented using the canvas element of HTML5, a ton of features, and even a GUI editor for playing with the many options. Check out the demos, or see the coverflow in action on our homepage or any portfolio page. PT Coverflow is free, open source and available on GitHub.

At Planet Telex, we are all very excited about our new image and our new web platform. It fits who we are better than before and the new web platform will prevent the site from getting stale, since it makes updating and blogging so easy. Combined with all the time and attention we put into our infrastructure last quarter, Planet Telex has done more than rebooted, we've upgraded our OS.