Blog

Responsive Web Design with Orchard CMS and Adobe Shadow
Apr 20, 2012
Author: David Hayden
Responsive Web Design with Orchard CMS and Adobe Shadow

One of my main goals with this Orchard CMS Website was that it had to be responsive. I do most of my web surfing and reading via my iPhone and iPad. Therefore, being able to comfortably read blog posts on devices smaller than a desktop is important to me. While I was developing the site I used Adobe Shadow to view the desktop, tablet, and smartphone versions of the website simultaneously. There is just something slick about developing a responsive Orchard Website and being able to have my iPhone and iPad in sync as I make changes and browse my Orchard Website in my desktop Chrome Browser!

Adobe Shadow

Adobe Shadow consists of software for your Mac or PC, a Google Chrome Browser Extension, and apps that you can run on your iPhone, iPad, and Android Devices. The whole point of Adobe Shadow is that as you browse a web page in the browser your mobile devices simultaneously browse to those pages as well. This allows you to determine if your responsive design or perhaps jQuery Mobile version of the website is working appropriately, allowing you to make adjustments to the mobile and desktop views as you develop. Adobe Shadow has remote inspection capabilities, too, which allow you to edit and remove elements from the DOM, etc. Check out the Adobe Website for more details.

Responsive Web Design with Orchard CMS

As I was making this responsive Orchard Website and Theme I used Adobe Shadow to determine if all looked well on my iPhone and iPad. This is a simple website so it was pretty easy, but I've done much more complicated responsive Orchard Themes as well as Orchard Websites that have a jQuery Mobile version and that is when Adobe Shadow is really helpful. In this case, I just wanted to make sure the media queries and fluid grid were responding correctly to smaller screen sizes.

Responsive Web Design Orchard CMS

Responsive Web Design Bootcamp

As an aside, yesterday I had a chance to attend an O'Reilly Live Conference, called Responsive Web Design Bootcamp. It was really intended for a beginner audience, but I listened in the background with earnest while I worked on projects. As it so happened, the presenter started discussing the importance of a CMS, and in particular, a CMS that does not inject HTML into your markup. In fact, I wrote down an actual phrase that was a bullet point on one of the slides.

[Don't use or avoid] CMS is polluted with HTML

The author was stressing the importance of not using a CMS that pollutes your markup by injecting HTML. This really stuck in my head, because Orchard CMS is very opinionated about shapes and injects HTML everywhere. When you are first learning to create Orchard Themes this will frustrate you. However, like anything else, once you create enough Orchard Themes it doesn't seem so bad because you have the ability to override shapes and get Orchard CMS to inject the exact ( and consistent ) markup for your website. In other words, Orchard CMS does indeed "pollute" your website with HTML, but it will totally get out of the way if you want something different. This is why I like developing Orchard Themes so much.

And to be fair, the reason for a CMS to inject HTML markup is for theming. The idea is that if every Orchard Website uses equivalent HTML markup it is easy to create a theme that will work with any Orchard Website. It is also easier to get something up and running!

Overall, I do agree with presenter's recommendation of avoiding a CMS that pollutes your markup with its own HTML. However, this is manageable if you have a good CMS like Orchard that allows you to easily modify or eliminate that HTML markup!

Conclusion

If you're doing Responsive Web Design, I highly recommend you at least check out Adobe Shadow. It's free right now, but I suspect at one point they will charge for the software. Hopefully not too much :)

P.S. I mentioned Adobe Shadow before on another website: Mobile Web Development for iOS and Android with Adobe Shadow

Orchard CMS Developer

David Hayden is a Microsoft MVP in C# and freelance developer specializing in Orchard CMS and ASP.NET MVC Websites. David speaks at various user groups and code camps around Florida as well as ran the Sarasota Web Developer Group and Tampa ASP.NET MVC Developer Group.

Written by David Hayden, Apr 20, 2012