I've been putting this off for quite a while. Anyway, after researching various hosting possibilities I finally settled on DiscountASP.net. I'm running BlogEngine.NET version 1.3.1.0 on IIS 7.0 in Integrated Mode.
The first thing I did when I set up my blog was decide on a visual theme for the site. BlogEngine.NET comes with several themes and more can be downloaded, but I wanted to make my own unique theme. Rather than start from scratch, I decided to create a new theme based on the default Standard theme by Mads Kristensen. [Update: I've since updated my blog with an entirely custom theme, but who's counting.]
CSS
Since all of the browsers seem to have their own defaults for the various tag attributes (margin, padding, line-height, etc) I immediately added Eric Meyer's reset.css file to the head element of my theme's site.master file.
<head runat="server" profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="~/pics/blogengine.ico" type="image/x-icon"/>
</head>
This effectively resets all the browser defaults so that my blog will look pretty much the same in all browsers. That's the idea anyway. Once I had that in place, I began to set up defaults appropriate to my site.
Accessibility
I've noticed that quite a few of the high profile blogs I read do not adapt well to changes in the size of text content. For most users this isn't a problem, but if you're using a low screen resolution and/or have the default text size of your browser cranked right up, you're going to have problems viewing the site content. My monitor is a 30 inch Dell, running at 2560x1600 so I wont see these problems unless I go looking for them.
As an example, check the screen grab below. This shows a heading from the side bar of a blog with no attempt made to make it adaptable to changes in the size or wrapping of the text content. As you can see, the text completely overruns the boundary of the image container beneath it.
However, by splitting the image into three parts and replacing the heading container with three nested divs (one for each bitmap) we end up with a header container that adapts to the size and wrapping of the text it contains. This also requires creating a new css rule for each of the three divs to determine how the image sections will be drawn.
This approach can be applied to all text containers where bitmaps are used to spice things up.
The subject of accessibility is far greater than what I've described here. The two standards to look out for are WCAG and Section 508.
Nesting Divs Programatically
After applying the approach above to my side bar headings, I began to notice that the markup for the page had become quite cluttered. What was originally this..
<div class="box">
<h1><%=Resources.labels.recentPosts %></h1>
</div>
..was now this..
<div class="boxmiddle">
<div class="boxupper">
<div class="boxlower">
<h1><%=Resources.labels.recentPosts%></h1>
</div>
</div>
</div>
If we only use this container once off it's not so bad. But if many occurrences are spread throughout a file, it can make modifications tedious. There are a number of ways to avoid this problem. The approach I chose was to write a small helper method to produce the nested divs programmatically rather than declaratively. Although the output to the browser ends up the same, the production markup looks like this..
<% using (HtmlHelper.NestedDivs(3, new String[]{ "boxmiddle", "boxupper", "boxlower" })) { %>
<h1><%=Resources.labels.recentPosts %></h1>
<% } %>
It works by exploiting the fact that the using block automatically calls the Dispose method of objects created by the using block. Calling the NestedDivs helper method creates the opening div tags. Then you add the markup you wish to contain within the divs. The closing brace on the using statement effectively calls Dispose, which is used to terminate the div tags.
Incidentally, I noticed this technique being used in the new ASP.NET MVC source code release. This code release contains a class called SimpleForm that is the base class for the standard MVC form. It's usage is similar.
Enough about Me, what do you think of Me?
Once I was reasonably happy with the overall look of the site, I decided to add an About Me page. I signed up for a gravatar so I could assign my self a consistent icon that appears on my blog and also anyone else's blog if I post a comment etc.
I also signed up for a feedburner account and hooked it up to my site. I need to research feeds a little more.
What's Next?
There are a ton of things still to play with. All of which require a little research. I'll probably add some amazon referral links to books that have come in handy over the years (I wont endorse anything I can't personally recommend). I want to investigate several other modifications to the site, but I'll be keeping the focus on the articles. I have several brewing in my head at the moment.
Any modifications I make that may be of interest, I'll most likely blog about.
Until next time...