Blogs
Systenics Website Relaunch
Our older website was starting to show age and unable to keep pace with styles. We had several internal discussions regarding a re-design but usually ended up shelving the plan since we were unable to identify and justify the reason for re-design if the outcome would just be a better design. At times we thought of just purchasing a template and updating the content and finish the process.
Latest Posts
Create navigation menu in Umbraco 6 using ASP.NET MVC Partial View and Razor
I was recently faced with the challenge of implementing a navigation menu in Umbraco 6, it was very difficult to search creditable samples which worked in Umbraco 6. In this blog post, I will explain the steps to create a navigation menu using partial view as you can see on current Systenics website. Besides linking the pages, we also wanted to display a help text for each menu item. Umbraco 6 provides several ways to implement the same, you could either use Macros, but I have chosen to write a MVC Partial View. This article assumes that you have Umbraco 6 configured to use Mvc as the display engine so that MVC Partial Views can be used.
Continue readingBundle and Minify CSS/JS using ClientDependency in Umbraco 6 MVC/Razor
This is going to be a short post on how to configure style sheets and JavaScript's bundling and minification in Umbraco 6 using ClientDependency framework in MVC. The benefits of bundling and minification are obvious as they reduce the number of HTTP requests as well as decrease the download size of resources to the browser resulting in a faster browsing experience. While Microsoft has prebuilt its own libraries to enable these features, Umbraco uses the ClientDependency framework to achieve the same. You can read more about the client dependency framework from its codeplex website, its got quite a few configurations options and you and read more about them on its website. In this post I am just going to focus on getting an initial configuration up and running since there seems to be lack of clear documentation on the topic and it took me a while too to figure how to set it up correctly. This article assumes that you already have a installation of Umbraco 6 and have configured its rendering engine to use ASP.NET MVC for the pages.
Continue readingGenerate Sitemap using Umbraco 6 CMS and ASP.NET MVC Razor code
Sitemap is still considered one of the most important element of Website development. Google and Bing do provide an option to reference your website sitemap so that their bots can traverse through all the links. But, most developers or website administrators often forget to include it. In this blog post, I will explain the steps to create a Sitemap using Umbraco 6, ASP.NET Partial View and Razor code. This article assumes that you have Umbraco 6 configured to use Mvc as the default rendering engine so that MVC Partial Views can be used.
Continue readingSetting up Umbraco 6 in Visual Studio 2012 for MVC development
The starter packs provided on the Umbraco 6 default installation are good, but in case you need to build a complete new UI design as per your clients requirements then its far easier to start with a blank slate rather than try to mend an existing design to suit your requirements. If you want to move further and start developing forms etc. then its best to setup Umbraco 6 as a Visual Studio project so that you can debug your code. Umbraco provides two kinds of rendering engines for your pages, it can work in traditional Web Forms (its default engine) as well as it can user Razor with MVC. I personally find the HTML generated by MVC to be much clean, and better suited for building responsive html5 based applications. In this short blog post I am detailing the steps required to setup Umbraco 6 in Visual Studio 2012 as well as configure it to use MVC rendering engine. This blog post seeks to serve as a starting point for various other Umbraco development post that I plan to write.
Continue readingCreate a Responsive, Fluid HTML5/CSS3 based website on Umbraco 6 using Twitter Bootstrap
Building responsive, fluid HTML5/CSS3 based websites are a rage these days delivering the best ROI for clients investing in building new web sites. Building a single website which adapts itself depending on the device screen size gives end users richer experiences. There are several ways of building responsive websites, one of the popular ways to to use an existing framework like Bootstrap from Twitter which provide base scaffolding to quickly build responsive websites. In this blog post I am going to focus on how to integrate Twitter Bootstrap with Umbraco 6 and MVC/Razor display engine to build a HTML5/CSS3 based responsive website. The goal is to build a simple single page responsive website similar to the fluid bootstrap sample and focus on the integration part so that you can build more complex layouts as required. I plan to build upon this sample in future blog posts.
Continue reading