Laurent Bugnion (GalaSoft)

I decided to completely redesign my website www.galasoft.ch (yes, it's about time, I know). For this process, I decided to inspire myself (loosely) from my good friend Robby Ingebretsen's site, which is both simple and beautiful.

In order to get a better idea of what I want to reach, I decided to work like most web designers and to create a mockup first. Instead of creating a static picture, however, I used Expression Blend, a tool I am fairly proficient in, to create a WPF application demonstrating not only the new website's look&feel, but also "faking" some of the dynamic behaviours, such as what happens when a window gets resized, or when the mouse hovers over links. Blend also allowed me to test various color themes and to understand how they react together when the user works with the page.

An advantage of mocking up the pages before implementing them is to get feedback. Because I am not a web designer, I am sometimes struggling to improve the site's conformance to standards and best practices, its overall beauty and of course the user experience. However, this is a profession that requires a lot of experience and talent. Let's face it, many web developers nowadays are just downloading an existing template somewhere on the web, tweaking it (and often breaking it) and then thinking what the heck. Because I want to learn from the best, however, I am publishing the "mockup" application as a ClickOnce WPF application, and looking for feedback. Simply click here, install the application and start playing.

When you use the application, you can change the color themes by clicking on the buttons on the bottom-right. The default color theme is the one I prefer, and the one I am also implementing in CSS at the moment.

• I want the site to be cleaner and easier to use than now.
• I want to do my best to respect current best practices in HTML, CSS and JavaScript.
• I want to avoid hacks as much as possible (such as CSS hacks).
• I want each page to be linkable with a unique link.
• When server-side code must be generated, I want to use ASP.NET MVC and stay clear of web forms.
• I want to reduce the usage of client-side JavaScript, and start using 3rd party libraries, especially jQuery.
• I want to use Silverlight to enhance the website only, but not to replace functionality.

These principles I want to follow have two purposes:

1. It will make the site nicer and easier to use.
2. It will allow me to learn new technologies that I deem important in the moment.

This last goal has always been a major driver for all my private projects, and this one is no exception.

Designing in Blend presents a learning curve, especially for developers who don't have a background using Adobe products (though Expression Blend is made by Microsoft, its usage inspires itself from Adobe Illustrator (such as for keyboard shortcuts and overall user philosophy). Because it is also a development environment, it can compile .NET code and even execute it, both "statically" (for example loading design-time data when a Window is opened on the design area) and "dynamically" (press F5 to test your latest changes and run the real application).

Once you master the basics of Blend (and my good friend Brennon Williams' book "Expression Blend Unleashed" will help you there), it is faster to mock the web page up rather than with trial and errors in CSS (even with the support of the "design view" and the 3 CSS helper dialogs in Visual Studio ("CSS Properties", "Manage Styles" and "Apply Styles"). I found however that a good basic knowledge of CSS helps tremendously, especially in deciding what can be implemented in CSS and what cannot. Knowing the limitations of the target technology speeds things up (not all effects of WPF can be achieved in CSS), even though the "designer" (yeah, me) should not let this be a brake to creativity.

After writing 642-825 and 642-845, those professionals who are interested in EX0-101 or 642-552 decide to move on with 70-294 or 70-647 so that more certifications can be achieved in less time.

The color palette I use for the new design has 4 background colors, one "standard" font color and one "active" font color.

The font color was easy to choose, since I simply "stole" Robby's gorgeous #3A3A3A. It's a very dark gray, but is not as hard on the eyes as a plain black.

The 3 basic colors brown, black and white are preserved from the original Gala head. The black and white are straightforward, and the brown was actually taken from the picture of my cat shown below. I still needed a background color for the header. I wanted something very light and bright, derived from the brown color. This is where I used a really cool tool for designers: Adobe Kuler. This tool allows you to enter keywords and will present you with a choice of color palettes uploaded by the community. In my case, I entered the words "brown cat" and was served with 5 palettes. I took a few light browns from these palettes, and put them in the file "HeaderBackgroundBrushes.xml". In my opinion, the clear winner is a light brown which is much brighter than all others, and very soothing: #F9E4B3.

All these light browns can be seen in action in the page mockup, as well as in color palettes, as described below in the section titled "The test application in short".

As for the active link colors, I started with a bright orange (which was not very well legible in my opinion) and tested many variations. The winner in my opinion is a color between orange and brown, which is less aggressive than a bright orange, and still contrasts enough with darker and lighter colors: #D98000

The font is also stolen (I mean, inspired) from Robby's website: It is a gorgeous Verdana (a Sans Serif font), which I find particularly legible. I also followed Robby for the line height and set it to a whooping 165%. This separates the lines very nicely.

I tried to follow best practices (as I understand them) to set the font size in the body selector and then to work with "em" units everywhere else. This is a place where I am sure that I can improve my CSS, so if you have a better suggestion, please let me know!!

The WPF application allows switching between fonts for the H1 and H2 headers. I started making these headers in Verdana too, but after talking with Nas Khan, I decided to follow Robby again and to use Georgia (a Serif font) for the headers. I think it's a winner, and it clearly differentiates between header and paragraph text. Of course I have fallback fonts for the computers where Verdana and Georgia are not installed.

I thought long about it, and decided to keep the cat's head as my main logo for my site. First, I like it a lot. It's been my companion since I started publishing about software engineering back in 1997 (more or less, I don't remember exactly when). It's simple and easy to recognize.

Short historical intermission

The name GalaSoft comes from my cat Gala, who unfortunately is not with us anymore. Gala was a farm kitten, a merciless hunter who could also turn into a huge fur ball of tenderness when she felt like it. I went through highs and lows with her until she one day decided to walk the road and disappeared (after 9 years living with us, and after my second daughter Laeticia was born). The brown color I used in the logo comes in fact from a picture of Gala, and is as close as possible from her original colors (black, brown, white).

The name Gala itself has two origins: I chose it to honor Gala Dali, Salvador Dali's wife. Salvador has always been a source of inspiration for my work. It is also a reference to Galadriel from the Lord of the Rings (a book I have been avidly reading and re-resing since I was 15). I thought that an elven princess' name fitted that cat very well, and I was right.

End of historical intermission

Because I didn't want to be limited by the format of the logo, I redrew it in Expression Design, and then exported it in XAML. Being vector oriented, this format allows me to seamlessly resize the images. Of course I am forced to choose a raster format for the web (I choose PNG), so after sizing the logo to the right dimensions, I take snapshots of it and save these as a collection of images.

I also took a shot at redesigning the site's logo, and created two versions for now. I still didn't decide which one I prefer, and it's possible that it changes after feedback. To have the same ease in resizing as with the cat's head, I also made the logo in Expression Design and exported it to a XAML resource dictionary (Expression Design exports as a DrawingBrush, which you can use to "paint" a Rectangle, for example).

The logo is inspired by the following idea:

The mix of a "brush" font (STXingkai) and a "coding" font (Consolas, the most beautiful monospace font currently available) is representing the mix of art and technology that software development is made of. I strongly believe that a good software developer is at a crossroad between an artist and an engineer, and I like my logo to be an affirmation of this.

The logo is not definitive, and will probably evolve a little more. I want to put a few ideas to the test and see how they look.

I made the application to allow studying variations in colors and fonts without having to go through a process of modify/start/dislike/end/modify etc... but instead being able to just click some buttons. First I designed the layout in Expression Blend. Of course this requires a good idea of what design you want to achieve, but since Blend is a visual design tool, it makes it really easy to modify the layout without having to bang your head over CSS too much.

Caution: WPF layout is much more flexible that HTML/CSS layout. You need to be aware of CSS limitations before you start doing crazy stuff in Blend. A prior knowledge of CSS is required before you start designing your mockup in Blend. This would be true of any mockup technology anyway.

I created a few XML files containing various colors for the header background, the page background and the active links. I chose XML as a format so that I can add, remove or modify some colors without having to rebuild or even restart the application. The XML files' build action is set as "Content". Once the application is running, it is able to locate the XML files and display them to the user who can edit and reload them to see the changes (see below how to do that).

Thanks to WPF and its ability to do data binding, the amount of code needed to load the XML files (I used LINQ to XML) and display all the elements in a ListBox is really minimal. In addition, I am able to retemplate the ListBox to make it look exactly like I want (in this case, a thin horizontal list of items that the user can select).

The application has 3 such listboxes, each corresponding to an XML file: Header Background (from the XML file "HeaderBackgroundBrushes.xml"), Page Background ("PageBackgroundBrushes.xml"), Active Link color ("LinksForegroundBrushes.xml"). These listboxes are displayed by the buttons "1" to "3". The button "4" allows to choose a different font for the headers H1 and H2 (from the file "Fonts.xml").

To edit the XML files and reload them during runtime, use the buttons labeled "O" (for "open") and "R" (for "reload" after you edited the XML file). The files can be edited in any text editor and are very simple. Note that for colors, you can use the color name (such as "Red" or "Yellow"), the HTML code (such as #FF0000) or the WPF code including the alpha channel (such as #FFFF0000). Once the edit has been done, reload the file with the "R" button, and you should see the new, deleted or modified items appear in the corresponding listbox. The page's look and feel will also be updated automatically.

Once the application starts, a thin window is displayed with a number of buttons.

• The button marked "GalaSoft Head" opens a window with the head logo in full width and height. This is the logo exported from Expression Design as XAML DrawingBrush, so the resize is seamless.
• "Logo Choices" shows two versions of the logo I work on. These can also be resized, in order to check the effect at various sizes.
• "Color Palettes" opens a window showing the 4 base colors side by side. On the bottom of this window, you'll find the buttons I mentioned earlier in this article. Note that some of these buttons are not active in this particular window. The button labeled "1" allows you to change the 4th color (Light Brown). The button "3" allows to change the text color (including the "hover" color for the label "Big Text", simulating a a:hover CSS effect. The other settings have no effect in this window.
• "Mock With Resize" shows a window with a mockup HTML page. Using the buttons at the bottom, you can change the Header Background color, the Page Background color, the Active Links color, and the fonts for the H1 and H2 headers. Remember that you can edit these colors and fonts using the "O" and "R" buttons.
• "Mock Firefox" shows the same pseudo HTML page as it would appear in Firefox. Read more about this below.
• "Shutdown" will close all the windows and shut the application down.

I am very visual and I find that the header with the navigation bar and all the tabs in Firefox influences the way I perceive the page's look and feel. I wanted to have a way to see the page with all this additional chrome (pun intended). To simulate this, I made a screenshot of the top of a Firefox window and added this as an image to a WPF Grid. To make it more realistic, I made the WPF window chromeless, which means that it doesn't have any title bar. The title bar is simulated by the Firefox screenshot. To make it a bit more user friendly, I added two invisible rectangles (note: to make them invisible but still let them react to mouse input, set the Visibility property to Hidden): One of them on top of the title bar takes click and drag mouse events, and moves the WPF window accordingly. This allows dragging the window to another location. The other smaller invisible rectangle is located on top of the Firefox screenshot, where the "close" button (the one with an X) is located on the picture. When this invisible rectangle is clicked, the window is closed. This simulates the behavior of a "real" Firefox window. I didn't implement any resize, minimize or maximize action, but it would be possible too.

Even though I didn't implement this, it would be easy to switch between Firefox, IE, Opera and any other browser to compare the page's perceived look and feel.

To gather comments from as many people as possible, the easiest way is to publish the mockup as a ClickOnce application. ClickOnce is a not very well known way to deploy a .NET application (not just WPF, any .NET app) over a website. Personally I love ClickOnce, even though it has limitations: The install is on a per-user basis (can't install for all users of a PC), you cannot access the registry (so it is impossible to register COM components, for example), and you cannot specify in which folder the application will be installed. On the other hand, it is really easy to publish and install a ClickOnce application and it has a built-in version check allowing you to push newer versions of your application to every connected user.

To publish the application as ClickOnce, right click on your .NET client application and select Publish in the Solution Explorer. This opens a wizard where you can specify the destination folder on your website (I usually publish my ClickOnce applications over FTP to my web server, but you can also publish to the local file system (for example to burn on a CD), or to the local IIS (for example to test the deployment). You can also specify if an entry should be added to the Start menu, in order for the user to be able to start the application just like she would start Word or Firefox. This is a nice touch.

Note that more advanced settings can be found by right clicking on the project you want to deploy, selecting Properties from the context menu, and then choosing the tab Publish. These settings allow to specify exactly which files must be marked as pre-requisite, which files must be deployed (for example, you don't want to deploy the .NET framework, but marking it as prerequisite will trigger a check of the client machine, and the user will be asked to install .NET if it's not already present). You can also specify the auto-update mechanism for your application.

Once all the settings have been set, publish your ClickOnce application to the web server. Depending on your settings, a file named "publish.htm" will be created. This is the URL you want to give to your users.

The file publish.htm

By clicking on the Install button, the ClickOnce deployment will be triggered. After installation, the application will be started. Because I set the version check to occur before each start (which is a bit annoying, but since the design might change often in the consulting phase, it is needed), every time that the user starts the application, it will connect to my web server and check if a newer version is available.

Note: The version being checked here is the ClickOnce manifest version, which is not the same as the assembly version. The ClickOnce version can be set manually when you publish the application, or it can be incremented automatically every time that you publish a newer version.

Auto-increment the ClickOnce version (in the project properties)

One important caveat is that the XML files used for configuration must be explicitly marked as Included. Because they are built as Content, they will not be included in the assembly (this way they are available for modifications during runtime). To include these files explicitly in the deplyoment, click the Application Files button in the project properties (tab Publish) and then change the Publish Status for the XML files to Include.

Including files built as Content

- Typography in "basic" WPF is not as flexible and advanced as in CSS. This might sound surprising, but remember that WPF has a whole "flow document" set of features which I chose not to use in this application, for simplicity sake. Remember: I am not trying to make a new WPF application to display content here. The final application will be HTML and CSS based, and this is where I should refine the styles. (For example, I couldn't modify the line height in my TextBlocks, but I am using a line height of 165% in CSS, which gives a much neater and clearer impression). Also, ClearType is... well, the anti aliasing of fonts that were clearly not made with anti aliasing in mind is disturbing.

- Designers are really cool: The site was inspired and reviewed by some of my designers and artist friends: Robby Ingebretsen, Corrina Barber, Nas Khan, Brennon Williams, Gigi Lee. All gave me really valuable feedback.

- A nice design is a simple design: Even though Expression Blend and WPF allow for crazy stuff, the best is to keep it clean and simple. The content is at the center (that's a programming website!). Also, CSS is more limited than WPF, so having a good prior knowledge of CSS (or at least of its capacities and limitations) is really necessary before starting creating in Blend.

- Variations between browsers suck - nuff said. One more reason to keep the design simple and clean.

The very next step in this process is to put up a first live page with the new design. This will happen very soon and will be related to my book Silverlight 2 Unleashed. Since I plan to put some material online in relation with the book, this will be a great occasion to test the new look and feel.

After that, I want to gradually convert the whole site. This will be a relatively long work, because I want to convert the structure of the site (to an ASP.NET MVC application) and the design (the new style discussed here), and at the same time try to preserve the legacy URLs to avoid breaking existing links as much as possible. I don't have everything figured out at the moment, but I will blog about it when the time comes.

I also want to redesign my blog to stay in line with the site's design. The good people at GeeksWithBlogs host my blog but I am able to use my own subdomain blog.galasoft.ch, so it makes sense to have a blog looking very consistent with the site galasoft.ch.

In case someone is interested to take a look, I provide the following code:

• WPF application source code
• CSS styles
  and as mentioned already:
• ClickOnce setup for WPF application
• HTML and CSS implementation