My Kentico Design Workflow - An Overview

I am going to do a quick walk-through of the workflow I use with Kentico,a commercial ASP.NET CMS application. I am primarily a designer, I work with programmers who handle the details of customizing code so the majority of my work is on the look and feel of the UI and the sites. So this will be a designer's view of working with Kentico. For years I have typically built sites with Adobe Photoshop and a text editor. I don't happen to be a big fan of Dreamweaver, but for the last year or so I have done a fair bit of work in Visual Studio 2008.

If you have not worked with Kentico before I would encourage you to download the trial version, you can also get a free license with limited features, though the limits are slight, you might want to get a look at the full feature set. When you install the application there are two very thorough pdf tutorials right in the application directory to get you started. There is also very complete documentation online. The two tutorials will get you through installation and the creation and editing of the site. There are two development paths you can take with Kentico. Portal engine development and ASPX pages development. The workflow I will be discussing is using the portal engine, which is very powerful and flexible, allowing custom CSS and page code, macros and custom macros and even the use of custom webparts and webpart containers.

My usual workflow starts with meeting with the client and discussing the website as a whole, its goals and functions. I take notes and draw sketches on paper during the meetings. I also get the client to supply me with any graphic element files they may have that will be incorporated into the site, such as logos, photos, text copy, etc.. When I think I have enough to go on I sketch up the pages in Adobe Photoshop and do a little back and forth with the client on the design, usually sending png files via email.

After finalizing most of the design decisions and getting a go ahead from the client I take the psd sketches and my favorite text editor, Textpad, and I write the CSS and test the pages in HTML, generating the graphic elements out of the psd file as I go. I check the pages in different browsers to check the CSS. This may seem rather cumbersome to many of you, but I have found that checking my code decisions like this saves a lot of hair pulling later. It also helps me make sure I have all the graphic elements rendered correctly. As an added bonus I get to look at the design in a browser and have the client look at it in a browser, which makes it seem more real to them than the png sketches and I often find little visual tweaks that I can do to make the browser experience better.

As I am writing the CSS and the HTML I comment liberally with Kentico in mind, noting the CSS I will use for webpart containers, where the page place holder and webpart zones will go in the HTML. I also note what goes on the master page and what subordinates to content.

When these bits are done and tested and the client likes where it is going I am ready to load it in to Kentico. There are some choices here, I have done it all different ways depending on the extent of the site and my time frame.

One can develop the site locally using IIs in localhost,or the built-in server in Visual Studio or Visual Web Developer. For the first choice you must have SQL Express installed on your computer for the database. Another choice is to install the pages locally with the web.config pointing to a database on a server. All you have to do to make this work is open up a local install and when you get the install dialog put in the connection information for your remote database. Kentico will write the connection information into the web.config as part of the install process. Then you can work on the site locally, make adjustments to the code when necessary without having to upload the files to test them and when you are done you just upload the files to the server and go live! This last path is a good choice if you plan to pre-compile the site using Visual Studio for better performance and security. There is detailed information on this in the Kentico documentation.

When you develop the site completely on your local box using a local database and you are ready install it on to your server you just do an export of the site, Kentico handles that and zips it up into the export folder in the site utilities folder. Then you install Kentico on the server, setting up the database in the process and upload the export file and import your site into Kentico. It unzips the file, imports all the database objects and sets up the site.

By the way,I found that no matter which route you go, making regular exports of the site as you go along is the best way to back up your work. That way, if something goes terribly wrong you can easily regain you work. It has saved me more than once! It will even save you if you have to scrap your database and start over (yes it's happened to me).

Back to getting the design in to Kentico. When it first starts up it will take you through a site creation wizard. I usually choose a new blank site for the portal engine. As you go through the wizard you can create your initial site structure by creating some blank pages. I usually skip this step and wait until I open it up in the CMS desk. A little tip here, if you should somehow goof with the license and get the message that tells you this you can always access the application by typing http://URLofthesite/sitemanager in the browser to get in to the Site Manager where you can fix these things.

Once I have the install going that I will be working on I make sure to create a folder for the site in the App_Themes directory and upload my page graphics into an images folder there. I use the naming convention of having my site App_Themes folder and CSS stylesheet all have the same name. The next thing is to open up the site in the CMS desk and switch to the CMS Site Manager. I go to the development tab and select CSS stylesheets from the application tree. I create a new stylesheet. I cut and paste my CSS to the stylesheet and save it. I edit the paths to images in the CSS so that they will show up. For images in the App_Themes folder this will follow the format - ./App_Themes/foldername/images/filename. Later I will come back and bookmark sections of the CSS in the CSS editor for easy editing (another cool function of Kentico). After that I return to the CMS desk and and go to the Root in the site tree (the desk generally lands there by default) and begin editing my page. In the portal engine and CMS desk there will be a master page tab when I am on the root node of the site in the site tree (left hand column in the CMS desk). Here is where I take the HTML I generated earlier and cut and paste it in to the Master Page around the content placeholder which will place the content on the pages. I adjust the path of any images placed with HTML. The path from the page follows this format - ~/App_Themes/foldername/images/filename .

Next I start on my home page. When I open it up in the page tab of the CMS desk I will see an empty master page. I switch to the design tab where I will see the location of the page template which is a green bar usually near the top indicating the content where the content placeholder has placed it. You can control the page template used by each page in the properties tab. I usually just use a page template called simple and then I open the template and start editing, again cutting and pasting code and also putting in webpart zones using the simple asp.net markup described in the documentation.

Editing in the Design tab is not completely WYSIWYG but you can switch back and forth between the page tab or even the live site tab to check you work as you go. I have a dual monitor setup and will often just open the site in another browser instance and check it by refreshing as I edit. Don't forget to save before leaving a tab!

The process moves along fairly quickly from here on out. I go through the pages and cut and paste code. I create documents for the various webpart controllers and create the webpart containers I use for the layout. I can create custom transformations to make the controllers look and act as I want them to. In the editable regions I put in some initial content, usually cutting and pasting from documents my client has given me. You can even cut and paste from word docs and the editor will clean it up. I am currently learning about the macros a very powerful feature of Kentico and using that a bit. Generally, from the time I start the install until I have the pages and structure set up for a complete site is an hour or two if I add much content. This is where all the work I did before pays off. I can just concentrate on the Kentico functions without having to fuss about the design. I occasionally have to adjust some margins if I have put something in a webpart zone to replace a div, but other than that it translates in a pretty straightforward manner.

Before long the site is done and I do a delivery meeting with the client. If they are going to be maintaining the content themselves I supply them with a copy of the Kentico CMS Users Guide pdf and give them a little training session walking them through all the different parts and functions of their site. So far, my clients have loved Kentico and I haven't gotten lots of phone calls saying "help me I can't make this work" which tells me Kentico is quite user friendly.

As I said earlier this is just a quick overview of how I personally work with Kentico. I am relatively new to Kentico, but it has worked so well that I try to use it on any project I can. I feel it is a very powerful and robust application. I would love to hear from other developers out there who are working with or who have tried Kentico, to know their various experiences and ideas.