Oct 28
How-To Guides David
blog, css, customization, hosting, icons, images, php, posts, related, site, skin, theme, thumbnails, wordpress, yarrp
Retain your visitors by using related post thumbnails!
A while ago I was doing some research into how I could better design the layout of my blog to encourage new visitors to read more posts, rather than just bouncing away (i.e. leaving after reading one post).
I already used a plug-in called YARRP (Yet Another Related Posts Plug-in), to show a list of posts that were similar to the one the reader was looking at. Although I found this blog post describing how you could customise your related posts layout to include thumbnail images for each post.
Depending on your PHP & CSS skills, the customisation could either take you 20 minutes to implement, or a whole evening. It also depends on what formatting problems your theme has would would need working around. In my case, I think it took me five hours, on and off. My CSS skills were a little rusy, and my theme had an issue which made different posts have different issues. So it took a lot of systematic experimentation to mess around with CSS margins to make sure everything stayed where it was supposed to be!
Note that you need to be self-hosting to be able to do this one.
You’ll be able to see the results of my implementation of this at the bottom of the page, and it I have noticed an objective benefit in having done this. According to Google Analytics, comparing the month before and the month after making this change, my bounce rate fell by 4.4%, my page views per visit ratio increased by 3.4%, and my average time per visit went up by 25%.
Doing this hasn’t gained me more visitors, but that’s not the point. From where ever they come, this layout change is designed to make your visitors stick around and see more of your work. Going by the above results, it really does seem to work.
So, all that’s left to say is thanks to Zach at buildinternet.com for posting about this, as it’s been a good help to me.
References:
Sep 22
Website Updates David
compatibility, css, html, theme, web standards
I’ve been playing around with this “MoreOrange” theme. I was taken somewhat off guard when I found it wasn’t looking right in IE7. The elements of the sidebar were sticking out of the side. I determined that this was due to a CSS fix I’d made a few days ago. There was a CSS class called #sidebar-wrapper that had a 35% width. This was causing the wrapper to overlap text in the content column, making links impossible to click. I fixed this by changing the width to 210 pixels. Although this is what caused the unintended consequences with IE7.
Continue reading …
Sep 21
Website Updates David
css, CSSViewer, DIV, firefox, wordpress
Done a little more to the website to day. I finally made myself write an “About” page, click here. It’s ended up being longer than I’d hoped for, but then again, I’ve condensed 12 years worth of professional information into 337 words!
Doing that page unveiled a bug with the current theme I’m using (“MoreOrange”). Some of the links on the pages appeared to be broken, and they weren’t reacting to the cursor hovering. I discovered, thanks to a Firefox extension called CSSViewer, that there was a DIV tag encapsulating the sidebar, which was way overlapping the main column. I was able to quickly fix this within WordPress as I’d previously fixed file permissions so that I could use the built in theme editor.
That’s the second bug I’ve found with this theme, I shall have to write them up in another post as a trackback for them.
I’ve also made a small edit to the CSS file for the “SubscribeMe” plugin. I felt the links were pressed too closely up against the edge of the sidebar.
Sep 18
Website Updates admin
banner, comment box, css, header, text-transform
I’ve pushed on with this “Description 2.0″ theme, and I’ve figured out how to make a few adjustments to it.
- As mentioned earlier, I fixed the comment box width (comment.php).
- I’ve removed the “text-transform” so that the case of the header text is just as I write it (styles.css).
- I figured a banner image, based on the splash image from my original website might work well. Although I learned that the header is spilt into two <div>’s. So I took the banner I made, and made it into two files. I then went to this theme’s styles.css file and added a background image to each of the DIV ID’s for the header. This worked fine, once I removed the 10px padding gap from the menu DIV.
Apart from needing to return the banner images, and reducing the JPEG compression, I think it’s looking good. Of course, that’s a subjective comment, although it feels right to me. I’m interested in feedback from others though.
Twitter
Facebook
LinkedIn
Google
Flickr
YouTube
RSS