This latest WordPress 1 Minute Wonder installation covers a couple of quick alternative steps that can be taken to dramatically increase your site performance… and yes I’ll be honest and say that actually to cover all 3 steps here it takes more like 10 minutes.

In the below investigation I based “performance” on Google’s PageSpeed rating and Yahoo’s YSlow and this was run against a newly launched online craft store site called Designs and Such.

Step 1 – Optimise Images

Using the PageSpeed tool (in Chrome) it was possible to  see that I had several un-optimised images on my site. I processed these with the free optipng tool and instantly saw an increase in 6 PageSpeed points and  2 YSlow points. Not bad for something which anyone can do.

Step 2 – W3-Total-Cache Plugin

Now there is some stigma around having lots of plugins on your WordPress site and the detrimental affect it can have on performance… now whether you back this line of thought or not* sometimes plugins can really benefit your site in this context. Now please be sure to backup your DB (or entire site) before using any plugins which might modify you’re .htaccess and potentially other files in your installation.

For my investigation I installed the W3-Total-Cache plugin and configured it just to cache and minify my HTML, JS and CSS. The results were staggering… I saw an overall increase of 11 Google PageSpeeed points and 12 YSlow points

Step 3 – .htaccess Tweaks

Another step, this time plugin-free, should immediately give some good results. Simply by adding the following lines to one of my site’s .htaccess file I saw a further 4 point increase in my PageSpeed score and a 1 point increase in Yahoo’s YSLow rating.

The following lines do 2 things, add expire headers to static files such as CSS, javascript and images and also removing ETags. Of course please backup your .htaccess before doing any of this.

#Expire Header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

FileETag none

This is defining a 1 month expiry for all content covered by the files types listed above. Note if you do this there’ll be implications if you want to modify any of the files, like CSS, and have the changes to affect immediately.

This technique (and more info on it) was found over at Tips & Tricks HQ

The overall results

So in total by carrying out the above steps I saw the following performance increase. Of course the results will vary site by site but I believe that with Search Engines using site performance as a factor when ranking your site that 10 minutes spent here will be of value.

Google PageSpeed Increase = 21

Yahoo YSlow Increase = 15

* When speaking to @westi at WordCamp UK (or WordCamp Manchester) in 2010 he said that putting code in plugins rather than the core should result in no performance hit… of course it depends on the quality of code

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

This is the first in the series of my 1 Minute Wonder series for WordPress where I’ll be showing simple and quick tricks for WordPress to add a little extra to your blog or WordPress powered website. And in this series debut I’ll be showing you how to add extra styling to the comments made by the post author.

So a quick caveat… this trick depends on your theme’s implementation… hopefully it’s been created with all the correct semantic markup needed. If you find this doesn’t work then to resolve the issue may take slightly longer than the one minute.

So here we go, all you really need to do is add the following to your current theme’s style.css file (usually located in ~/wp-content/themes/<theme_name>/ directory);

.commentlist li.bypostauthor {
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
}

What we’ve done here is added extra styling to give the author’s comments a background specific background colour with a nice rounded border and a subtle box shadow. The rounding of the corners and the shadow are created using CSS3 so may not show on older browsers.

Styled Author Comment

This styling can be seen on this very blog over at this post on the Responsive TwentyTen child theme for WordPress. Of course the comment can be styled in any manner of ways depending on the CSS you apply.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

• Complete work on our house – I’d like for us to complete our intial phase of improvements to our house, this includes replacing all the internal doors, replace all the carpet, fit the new (enlarged) loft hatch, insulate and board the loft and finish making good the works we’ve already started in the kitchen.
• Give blood – This has been on my long-term list for some years now but I keep chickening out… that has to stop,
• Slight weight loss – I’d like to get down to around 11 stone, this year I dropped 2 stone but feel a slight further drop would be good.
• Take up drawing – This is a little vague… I suppose I just want to improve my drawing/illustrating. Perhaps I’ll go on a course or 2… perhaps I’ll just practice more.
• Release a WordPress theme – Would be nice to have a fully developed theme released into the WordPress theme directory. I have built many themes for projects but all have been bespoke so far.
• Create another Android App – Following the release (and subsequent lessons learnt) from the development and release of Asssist I’d like to take on a new Android project. I’m still at a loss in terms of what the project could be so please let me know if you have any ideas.
• Get listsed in the next Web Designer’s Ideas Book – On the face of it this seems a tad vain, and perhaps it is. The core idea behind this is to keep pushing myself to create sites which have that extra punch. To be inspired yourself check out the either volume of the Web Designer’s Ideas Book
• Get Drafted to Dribbble – Dribbble is a “show and tell” for designers and I’d just love to be invited into the community… especially as I’ve developed the Android client for the site (Asssist). At present the membership of the site is by invite only. My 1st step to getting drafted is my recently published 3 Pointers page which I’ll keep updated with my latest design snippets which I hope I can share and impress with.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

For a recent project I was asked to replace a Flash site with a CSS/HTML version which was to match the existing look as closely as possible. This was essentially straight forward apart from the menu that was needed. The menu had a ‘wrapped ribbon’ affect on the currently visited item.

Flash Ribbon menu

What I’m going to do here is run you through how I replicated this in CSS/HTML on a WordPress powered site. The finshed menu should look like the following;

CSS WordPress Ribbon Menu

The approach I took was to use the built in wp_nav_menu hook in WordPress to display the menu (which gives a lot of control) but to pass in an extra parameter to the call to define an extra div with a class defined which would be output before the link text.

wp_nav_menu( array( 'container_class' => 'menu-header','theme_location' => 'primary','link_before' => '<div class="ribbon"></div>') );

With some fairly standard CSS (all source can be found below) I now had a menu which looked like the following;

The trick now was create the actual wrapped ribbon affect… and to do this I gave the selected item negative left margin

margin-left: -20px;

The next step was to creat an image to make it look like the ribbon wrapped back around the menu. This is simply a triangle image with a radial gradient along it’s angled edge to give a feel of depth. For my menu the image I used was this one.

I then assigned this image as a background to the div element we added earlier in our wp_nav_menu call for the selected menu item.

#access ul li.current_page_item .ribbon {
float:left;
background:url(../images/ribbon_triangle_02.png)  no-repeat;
position:relative;
top: 38px;
left: -11px;
width: 20px;
height: 20px;
}

And there you have it… our finished article

CSS WordPress Ribbon Menu

#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 0px;
	width: 100%;
}
#access .menu-header ul,
div.menu ul {
	margin: 0;
}
#access a {
	color: #fff;
    background: #333;
    background-image: -moz-linear-gradient(-65deg, rgba(51, 51, 51, 1), rgba(51, 51, 51, 0.6)20%, rgba(0, 0, 0, 0.8) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(51, 51, 51, 1)), to(rgba(0, 0, 0, 0.8)), color-stop(20%, rgba(51, 51, 51, 0.6)));
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
    border-bottom: 1px solid #000;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #ccc;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)30%, rgba(0, 0, 0, 0.6) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.6)), color-stop(30%, rgba(0,0,0,0.4)));
	color: #000;
    border-bottom: 1px solid #000;
}
#access ul li.current_page_item .ribbon {
  float:left;
  background:url(../images/ribbon_triangle_02.png)  no-repeat;
  position:relative;
  top: 38px;
  left: -11px;
  width: 20px;
  height: 20px;
}
 
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #444;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)50%, rgba(0, 0, 0, 0.3) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.3)), color-stop(50%, rgba(0,0,0,0.2)));
    border-bottom: 1px solid #000;
    margin-left: -20px;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #444;
    border-bottom: 1px solid #000;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)30%, rgba(19, 185, 136, 1) );
}

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

After reading about Jon Hicks implementation of media queries on his site to make it more responsive to user’s browsing context and the release of the (highly recommended) latest WordPress build I thought it was time to get my feet wet with Responsive site design.

After toying with the idea of implementing this on one of my client sites I thought “Hey! hold on I’m using WordPress 3.0 default theme on my blog… why not extend this?”. And so that’s exactly what I’ve done. I’ve created a child theme for TwentyTen which not only makes it fluid (up to 940px) but also makes it more responsive at smaller sizes. As well as these I’ve added some extra CSS to make it handle iphone and android browsers too thanks to some interesting articles by The CSS Ninja and riklaunim

The result of this the current 0.1 version of the Responsive Twenty Ten WordPress theme. It should be noted that this is a current work in progress which is one of the reasons that I’ve not published it to the WordPress.org themes directory just yet. There are a few known issues still too;

• IE fluidity is not implemented – seemed to cause issue with the CSS introduced to pick up mobile resolutions (portrait and landscape).
• Mobile (read Android and iPhone) have some issues dealing with the orientation. Still looking into this. Update – fixed
• Requires use of some JS for IE (though I’ve disabled this at the moment.]
• Not got round to validating the CSS yet (naughty naughty, yes I know). Update – fixed

The theme is essentially a fluid version of the default Twenty Ten theme with a fixed maximum width. The extra “responsive” magic comes in when the browser viewport width drops below 661px. What then happens is that the primary and secondary sidebars drop below the main content and appear just above the footer. Some tiny extra rules come into play for iphone and android browsers too to make the page layout flow better.

By all means download the theme in it’s alpha state and let me know your views. Of course you can just have a play with this site as I’m using it at present too.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

It’s easy to get into the kind of mindset of “well of course you then click X to get to Y” which is why usability testing is really important. We have to remember that web sites will be used (hopefully) all the time by people who’ve never been there before and hence things should be logical and flow… and when this is not always so simple provide enough guidance to aid the user.

Sometimes folks can go too far… and in fact confuse the user. Take a look at the screenshot below and think about where you’d instinctively click to go to the next page. Bear in mind that it’s likely you’ve just scanned down the text (although I’ve blurred it here but please pretend that the text might be semi-important).

Too helpful?

I would think that most people would click the right facing arrow at the centre bottom of the page, bearing in mind that they’ve just scanned the text above. Yup, the one with the word continue written next to it. Either that or they also see the button at the top right and then may think “Oh, which one do I press and does it matter at all?”. Sadly you’ve got at best a 50% chance of going nowhere. In fact these arrows at the bas of the page are not buttons at all but simply ‘helpful’ instructions about the arrows that will appear at the top right corner of each page.

So what’s the lesson here? Testing is important… and it’s no good just testing something yourself as you know what and how a system is meant to work.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

Following getting the first batch through in the post I was disappointed to see that the ‘front’ had a black background instead of the white I was expecting. I mailed the Moo customer service suggesting that perhaps this was due to my use of transparent png images. They promptly replied stating that ‘yes’ they use a default black background colour. They also offered me a discount code enabling me to get a second order for free (inc P&P) and that once I’d placed it they’d check to make sure that they looked OK.

Once I’d replaced my order I did contact them giving my order number and got a reply back from their CS saying that all was good with my new cards… what great customer service!

Our new business cards

And front…

Our new business cards

I would definitely recommend Moo to anyone who needs this kind of printing to be done… just brilliant!

Oh… there’s a useful page here with a template image that can be used.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

This sofa is the design of Cristian Zuzunaga who I believe was a student at the royal college of art and I think is (or was) being sold by a Danish manufacturer Kvadrat.

I want: Very cool Pixel Sofa

I don’t know really why I like it so much but I can guarantee hours of fun playing the “You’re colourblind, what colour is this?” game.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny