Blog Effectiveness Feedback

Web design and layout is an interesting beast with one man (or woman) and their view of aesthetically pleasing or effective layout and use of screen real estate being different from the next. With my blog, I’m generally happy with how it works but I like to operate my blog with an agile based approach, taking small iterative steps to continuous improvement.

When I normally make changes to the site, things I deem to be improvements, they are self-led ideas that I think would be good but not often do I really consider the effects on the viewers of the site but for this occasion, I’m going to flip that on it’s head.

I’m looking for anybody out there who reads my site for feedback. I’m not looking for feedback on the topic of the articles because frankly, that isn’t going to change unless my technology pattern at work changes, unlikely in the current circumstances, but I’m looking for feedback on the site itself.

  • How Do You Find the Layout?
  • Is the Navigation Useful?
  • Is the Content Clearly Legible in the Current Size and Font?
  • Does the Site Render Badly on Your Device of Choice?
  • Anything Else You Can Think of?

I normally have comments disabled on my blog for fear of the spammers but for this post, I’m going to leave them enabled although I may disable them again at a later date to prevent the spammers moving it to squat. If you’d prefer, you can send me a tweet to @richardjgreen or get in touch with me via one of the other contact methods outlined on the Contact page from the navigation at the top.

I’m really interested to hear what the community and people who actually use my site think of it and if there are ways you feel it could improve to make my content more accessible to you.

Making the Blog Better and Faster

After moving the blog to Azure, I was really happy with the performance, but I decided this weekend I wanted more so I set off on a personal mission to improve to make the blog better and faster. This post is a quick update on the changes I’ve made to the site to get it to where it is now.

So What Have I Done?

Lots of people recommend YSlow as a Firefox plugin for assessing website performance. I use the Internet Explorer Developer Tools normally for my needs, but YSlow outputs nice reports which tells you what you need to do to get results where as unfortunately, the developer tools only tell you what you’ve got currently.

CSS Removal and Compressing

YSlow identified a number of issues with the site which I’ve worked on resolving to varying degrees. Firstly, it wasn’t happy with the number of CSS stylesheets I referenced due to the theme colour switcher. As I figured this was a gimmick added at the time and nobody would actually really use this, I’ve removed it which allowed me to drop 19 stylesheets from the HEAD section of the site.

Once I’ve removed these stylesheets, I used a plugin called Dust-Me which scans the site and finds unused CSS styles in the stylesheets. When a stylesheet is only 2KB, ever little helps. Dust-Me found about 10 styles across my CSS which I was able to remove and marginally reduce the filesize.

Compressing happened by using a great website, CSS Drive. Their CSS Compressor tool. You copy and paste your CSS into their site and it outputs a shrunken version of it with a large chunk of whitespace removed and where possible is reduces the length of colour codes and converts your CSS into shorthand. Doing that saved me about 20% on the size of my stylesheets, dropping the colour specific sheets from 856 bytes to 777 bytes and dropping the main stylesheet from 6,686 bytes to 5,636 bytes.

Whilst this may not sound like a lot, the smaller the page, the faster it appears to the user and the less load it also puts on the server delivering the page so it’s a double win.

Image Resizing

All of the images on the site which make up the page layout I have designed with high DPI users in mind. This means that users who are operating their displays at 125% or 150% aren’t penalized for doing so and get the same high resolution images and people set to 100%. I realized this weekend that my images where actually scaled to about 225% which is way bigger than high DPI users need so I’ve resized all of the images which make up the standard site page. This has had a big impact on the page weight for the site as a whole. The images which have been updated include all of the logos in the header section on the tiles and all of the images in the sidebar for the navigation.

Page Bloat Removal

I’ve never been 100% happy with my pages on the blog. I do what I can to tweak it when I have time and this weekend, I had time. I’ve made a whole load of changes to the site which will work to improve it’s usability, some of which I’ll list below.

  • Updated page TITLE attribute to include the post title.
  • Removed a JavaScript and some CSS references from the page HEAD to speed things up.
  • Removed the messy looking pagination links at the bottom of singular post pages.
  • Removed a load of bloat and fluff from my about me personal page.
  • Used a WordPress function to HTTP 301 redirect the author archives to my about me page as there isn’t any point in having author archives on a single author website.
  • Added a plugin to manage my sitemap.xml file for Google and Bing search indexing.
  • Created myself a Google+ account and setup author verification for the site so that Google can show my face against results from this blog.

New Picture Time

I figured this weekend that I’d been using the same boring head and shoulders shot of myself for my social presence for nearly eighteen months now and I wanted a change. I’ve got myself a nice new image for all of my social sites. The picture was taken on our holiday to Spain in 2011. With me always being the person taking the pictures in our family, it’s rare find a picture of me and even rarer to find one that I like. With a little bit of Adobe Lightroom magic, what was a wide angle shot including me and some flowers because a lovely little super-crop of me and the flowers with an Instragram-esque vignette and black and white filter to finish the look.

The Results

When I started the journey of updates this weekend, the page weight for the site was about 210KB which was pulled together by nearly ~75 HTTP requests. After all of the work this weekend, the page weight is now down to 140KB (50KB per page saving) and the number of HTTP requests is down to 25 (~50 per page saving). Yes, all of this has taken me quite some time to achieve over this weekend, but the results are really worthwhile and goes to show that even a well performing website has room for improvement.

My current Pingdom score is 88 and my current YSlow small website/blog score is grade B (86). If I change YSlow to the YSlow 2 test pattern then my score drops to grade C (74) but that’s still a pretty good score in my view. I think I could probably get my score up to 90 for the small website/blog category with a little bit more effort in the coming weeks.

On my radar for future changes and updates to the blog are going to be going back through my historical posts and updating them all to use the Azure BLOB Storage for the image hosting and correctly some of the ASCII character errors which where caused by using Windows Live Writer to upload my posts on a previous iteration of the site which didn’t have the UTF-8 encoding set properly.

One Week in Azure

My blog has been running in Windows Azure now for one week so I thought I’d post an update on how the billing is coming along and also the usage of the platform.

I’ve just dived into my subscription summary and here are the charges thus far:
Data Transfer Out (GB) – Zone 1 – 0.6GB (5GB Free)
Compute Hours for Cloud Services – 21.28hrs / £1.08

If the above holds true to the remaining three weeks of my billing cycle then I am looking at having consumed 2.4GB of egress data transfer which is less than half of the free allowance and I will have consumed 85.12hrs of compute time producing a bill of £4.32. As I predicted in my original post, the number of compute hours my blog is consuming is much less than the hours consumption shown on the Windows Azure Pricing Calculator.

At this rate of consumption, my annual bill for the site will be £51.84. When you consider that I was previously paying around £150 a year for a hosting plan with lower quality hosting providers offering much more clunky and cumbersome management interfaces and inferior billing transparency, I think I’m getting an amazing deal.

I am paying more than I had originally hoped for the Backup Recovery Services feature which I use to backup my Windows Server 2012 Essentials server to the cloud, protecting all of mine and my wife’s documents and files along with all of our family pictures of the kids growing up but. For the peace of mind having that data properly protected I’m happy to pay it. I actually made a change to the retention period for my backups in Azure earlier this week so fingers crossed that, that will reduce my bills going forwards a little.

Aside from billing, what else is there to show? Below is a screenshot of the Windows Azure Monitor page for the blog. As you can see, there is a huge spike at the beginning of the week. This was caused by me doing the deployment and maintenance of the site including uploading all of the WordPress files, doing the WordPress upgrade and then upgrading all of the plugins. As you can see though, it settles down nicely after this. All of this is running on a Shared Website Mode single instance. I don’t generate enough traffic to consider adding a second instance and scaling out the site although I might do it one day just to test it.

Blog on Windows Azure

Setting Up Shop in Windows Azure

Several months ago after numerous outages with my old American web host, I moved some of my sites over to a UK hosting company. For this reason and that reason, I didn’t complete the migration of all of my sites over to the UK host and the time is upon me that the agreement with the old American host is up for renewal in a couple of weeks.

After some persuasion, I’ve managed to convince a the other half that some of the sites could be dropped as they just weren’t used anymore – Just one site left to sort and that’s in the hands of a friend to arrange.

This left me in a position where I only had one site of my own left, this blog. When I was first reviewing options for moving to a new host, I looked at Windows Azure. I’m working with Azure heavily in a project at work so I was comfortable with the environment enough to want to deploy a multi-language enterprise site there so why not my own sites? Well at the time, cost was an issue. To run all of my sites in Windows Azure Web Sites Shared mode would have cost about three times as much as the hosting agreement elsewhere. This is down to the fact that in Windows Azure to use a custom domain name you need to be on either the Shared or Standard tier; the Free service tier limits you to using * addresses.

So with just one site left my thoughts returned to Azure. I did some sums and it looked like it was going to cost about the same for Windows Azure as it was going to, to renew the UK plans but on a way more solid platform which tonnes more features, scalability and support. Not to mention that Windows Azure services outperform those of its competitors up to 3x if you believe the hype (I do for the record). I’m hedging my bets actually on my costs being lower. The Windows Azure Pricing Calculator puts a Shared Web Site at £6.16 per month but that’s based on 684 hours (28 days @ 24 hours per day) of compute time as Windows Azure now calculates billing based on hours of compute time. As my blog isn’t visited that heavily and I’m using the amazing WP Super Cache plugin for WordPress, I think I can do it for about half of this actually but month one will tell – I’ve always got the bug out option with Azure as I’m on pay as you go monthly with no upfront commitment.

So after migrating the MySQL database in the ClearDB free 20MB database service which fits perfectly for my MySQL WordPress instance database at a wee 9MB and after copying over all my files and doing some WordPress PHP magic to move some of the URLs I had it working. Makes you realise how quickly WordPress moves though! I was already two versions behind the latest and all of my plugins were out of date so first job was to fix those which I did in quick order.

Custom Domain registration is a simple case of configuring a few CNAME records and updating my domain root A record and done. My registrar FastHosts have a great interface for updating DNS and they use a 1 hour TTL which means that the updates happen really quick although one thing I think Microsoft are doing actually is that they are performing live queries each time and not relying on cached DNS entries and potentially long TTL times. I updated my A record and Azure knew about it within about a minute of the change.

So surely I did more than just move host and upgrade? Damn right I did 🙂

I’ve finally fixed the Twitter hook on the blog which means my latest tweet is now actually shown. This was fixed by replacing the Twitter plugin I am using with one which actually works with the new Twitter oAuth developer framework. I’m now using Advanced Twitter Feed Integration if anyone else out there is looking for a Twitter plugin that works. I’ve removed the old jQuery Lightbox plugin as the new version of WordPress has improved this functionality so renders it pointless. In a more functional space, I’ve fixed the CSS which was causing issues with the collapsible navigation from working properly so you’ll now actually be able to read the text as well as see the pretty Windows Phone inspired plus and minus buttons. I’ve also updated my permalink structure to drop the year/month/day element. My URLs are now simply the domain plus the post name. Much cleaner and the chances of me wanting to recycle a post name are slim to zero so it shouldn’t come back to haunt me.

The coolest thing I’ve setup is the Windows Azure Storage for WordPress plugin. I’m not sure what my mileage with this but I’ll give it a month or two and see – purely a cost factor though, not functional.

This plugin connects to a Windows Azure Storage Account and stores content that you upload to the blog into Windows Azure Storage BLOBs instead of directly into the Web Site instance. This is good news in theory because it offloads transactional tasks and storage from the web instance giving me the potential to reduce my compute time on the web instance and it also allows me to use the Azure CDN feature for even more massively improved performance if I wish (although the performance is pretty awesome already). Configuration of the plugin is super simple thanks to the fact that the plugin is actually written by Microsoft and once connected to the Storage Account Container and enabled, anything you upload either in the web interface as media or via a third-party editor like pictures, videos or other post content get’s stored out in the Storage Account Container. Simples.

WordPress Development – functions.php

As I travel down the road of WordPress theme development, I have discovered many things.

A problem that has been hurting me for the last week at least as I develop the new theme is errors I would occasionally receive, which would read Cannot modify header information – headers already sent. For me as a non-programmer, this didn’t really mean an awful lot, and trawling the WordPress support forum didn’t help me hugely as I didn’t understand some of the lingo being used.

I had a starting point, which was my functions.php file. This filename was referenced in the errors, with a line number however upon inspection of that line, I couldn’t see a fault, so I looked elsewhere.

This evening, I compared my functions.php file to that of the TwentyTen theme which ships with WordPress 3.1, and I noticed something interesting. My functions.php file used multiple PHP statements opened and closed as needed, however the TwentyTen functions.php file only had a single set of PHP tags, opening at the start of the file and closing at the end, with each of the functions contained within it.

When I looked back at my file, I saw that the line indicating the error was in fact a closing PHP tag.

This post is more to serve as reference for other newbies out there trying to develop your first WordPress theme. Make sure that your functions.php file is a single PHP statement from start to finish with no leading or trailing line breaks or spaces. For me, this problem caused PHP errors when trying to modify Widgets in the admin interface, configure Plugins, manage the Theme settings and also stopped RSS and XMLRPC from working, so it’s a pretty big issue.

The Blog is Back

For anyone who frequents my blog, you may have noticed it’s been offline for a couple of weeks.

I recently moved to a new server with my current hosting provider, and I took this opportunity to seperate a forum I run and the blog into their own seperate MySQL databases. Unfortunatly the blog had some issues, which today turned out to br a typo’d database username. We live and learn 🙂

Now that the blog is back, I’ve taken the liberty of upgrading to the latest version of WordPress. I’ve also decided that my old theme was looking tired as I do about every six months or so. As you will see, I’ve switched to the new TwentyTen theme that’s included in the new version of WordPress. This is only temporary while I make my new theme, which is going to be one I saw by Touchality based on a Windows Phone 7 Metro UI.
For the record, this is also my first ever post from the Windows Phone 7 WordPress application.

The Blog….Fixed

So it seems that the blog has been offline for about three or four weeks without my knowledge.

The only thing that actually led me to the problem was when logged into LinkedIn last week, I saw that the site wasn’t able to pull my RSS feed.

After much investigation and troubleshooting with the PHP side of things, it turns out that a problem with the hosts MySQL database engine caused one of the tables to become dirty and needed repairing.

Soon, I’ll be moving the blog to a new dedicated MySQL database as it currently shares its database with another product, Simple Machines SMF Forum, however I’ve just been given some extra databases from the host for gratis.

A New Breed of Blog

As time goes by, I feel more and more integrated into the Primark collective, getting my teeth into more new and exciting things. As time goes by, I foresee this blog evolving somewhat, not in its purpose, but in content, as I am exposed more to Exchange 2007 and likely 2010 in the future, SharePoint 2010 and the System Center family including Operations Manager, Configuration Manager and probably Service Manager and Data Protection Manager around the corner too.

I hope you enjoy the new material as and when it arrives.


Updating and Invigorating

Over the last 24 hours, I’ve made some notable changes to the blog to try and improve it’s looks and usability:

  • Removed some of the information shown about the post area on both the home screen and the single post view. This is to try and tidy up and streamline the post reading area. The information I’ve removed is the categories and post author.
  • Relocated the comments button from the top of each post to the bottom.
  • Increased the spacing between the bottom of one post and the top of the next one.

All posts and comments written by me on the blog will now report (past and future) as richardjgreen instead of the old daddygreen. This is an effort to consolidate my social network efforts into one entity. I’ve also updated my profile picture on all of my social outlets to something a bid more modern looking.

From this, I have now installed a new WordPress plug-in called TweetMeMe which shows a green tweet button on each post allowing you to retweet anything I blog with super ease and this plug-in is very common on other tech blogs so it’s well known and trusted.

I’ve also updated the blog version to the latest version of WordPress code as well as increasing the number of my tweets shown from four to five.

If anyone spots any news bugs or issues or has a any great ideas and visual elements I could add or improve on the site then I’m all ears.

Fix Up Look Sharp

My brother posted on his Tumblr blog yesterday about getting credibility for his work which spurred me to take a look at my own neglected blog.

As a result, I’ve changed a few things today, and they are really minor changes but every little helps:

  • Increased the number of Twitter tweets displayed from three to four.
  • Made a change to the CSS bullet item so that tweets no longer display this – Previously the bullet was displayed, however it was behind the text due to the reduced padding on the left of the Twitter type.
  • Corrected the XAML for the Silverlight headings on the sidebar so that they have the correct background and foreground colours.
  • Updated the copyright notice at the bottom of the site to include 2010.
  • Updated a lot of the plugins used on the site to the latest versions.

I’m now looking to upgrade WordPress itself from the old version I am currently on to the latest version to stay with the times, however I will need to test this first to make sure it doesn’t break my custom theme or anything of the sort.

I’m also trying to look for a plugin which modifies the way my images are shown.

I already have a JavaScript / AJAX plugin which uses the Lightbox controls for displaying the larger images which works nicely, however a lot of the images I post a screenshots and are shown as inline thumbnails which I think would serve quite well in a gallery type display which is often the way a site I read called Engadget post their pictures. This would clean up the appearance of the type itself and leave the images until later. This is still a thought in progress though so nothing may come of it.

The biggest problem for me is compatibility. WordPress features a default gallery object which I tested this morning and it looks and performs how I would like it to and it interacts with the Lightbox plugin too, however Windows Live Writer which is my blogging software of choice doesn’t seem to support this embedded photo gallery, so unless I can find a way around that, it’s not a viable option.