I received an email from the president of Visual Data Solution. “FYI, did you know that on April 21 Google is going to start dropping your search ranking if your site is not mobile browser responsive?”  OUCH, this email arrived with about a week before Google’s deadline. 

Just six months prior we received new logos and design for our website. The design uses CSS and JavaScript heavily and was presented to us using PHP code base. My boss requested that we use Orchard CMS since we work a lot with .Net. Orchard has many capabilities, one of which is managing blogs and multiple users with varying permissions. The thinking was it will be easy for everyone on our team will be able to manage content; spreading the work around once everything is setup.

It took a while to become familiar with Orchard and how things work. It took even more time to become familiar how to customize Orchard. I settled on creating a custom theme for our company. In Orchard you are able to base a new theme off an existing theme. I tried many different themes looking for one that would best handle the website design that came from the designers. I wanted to use a theme that was HTML5 and multi device scalable. Unfortunately none were going to work easily with the current website design. So I chose the latest basic theme from Orchard, “The ThemeMachine”. 

From there I began working on how to make the menu from the designer function automatically in Orchard. Orchard uses many .cshtml views to dynamically create the site. It is just a matter of finding the correct view to adjust and add your content. You do not change the original .cshtml views, but you copy them and add them to you views folder in your new theme. There is a hierarchy used in Orchard similar to CSS. Items added last will supersede previous files. Orchard is very granular in its structure which is good, but it also make it hard to find what you need to modify. 

Orchard has many modules that are available. One that is very useful during development of you site is “Shape Tracer”. In Administration mode active this module only while developing the site. It will slow your site down in Admin mode. It adds much extra code to every page that is used to help you identify what parts of Orchard are being used in every page. When logged in you will see a small square in the lower left hand side of the page to activate Shape Tracing. From there you are able to identify parts of the page as is defined in Orchard. Such as “BadgeOfHonor” which I would not have found without Shape Tracing. To me that is the footer. 

Along with other developer tools such as those in Google Chrome browser you can just about nail down everything you need to know to make changes to the website and make it look and feel better to the end user no matter what they are using to view your site. I spent many hours getting the PHP-CSS site to work properly in the Orchard-.Net environment and to work properly on a desktop screen. Then I moved on until I received the request to make it mobile friendly. 

Well with less than a few days to go before Google implements their new ranking system I tested the website using Google’s Mobile Friendly application. https://www.google.com/webmasters/tools/mobile-friendly/ The site returned all kinds of red X’s and unfriendly looking comments on how badly this site was going to fail. After reading the comments I found there was one Meta Tag in particular that was missing.

<meta content="width=device-width, initial-scale=1" name="viewport" /> 

It’s not straight forward adding meta tags to an Orchard site, but it is easy if you know what to do. In Layout.cshtml you need to add this line of code in the view.

 SetMeta(name: "viewport", content: "width=device-width, initial-scale=1");

Once I added this code I retested using the Google Mobile Friendly application online and quickly received a Happy, Green message saying congratulations this page is Mobile Friendly!

Wow, that was easy.

I spent the next several days tweaking CSS to make the website look pleasing as it scales from computer screen to tablet to mobile browser. The CSS @Media tag was the most important part of CSS to understand and implement correctly. Now the site works well, even though I’m not 100% finished adjusting the site. But who ever really finishes something as subjective as web design.

I’m thinking my next post will discuss the @Media tag and how to implement it. We will see… being a DevOps Developer you never know what your next big learning experience will be. 

Trey Mitchell
DevOps Developer
Visual Data Solutions