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.
• 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).

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

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

Adv layout with no template messing

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}
 
.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}
 
.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}
 
.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}
 
.widgets_on_page ul {
list-style: none;
}
 
.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}
 
.widgets_on_page h2.post-title a  {
font-size:0.9em;
}
 
.featured_news h2.post-title a   {
font-size: 1.5em;
}
 
.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}
 
.widgets_on_page  {
font-size:0.9em;
}
 
.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}
 
#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}
 
img.attachment-thumbnail {
float: left;
}
 
.also_in_the_news img.attachment-thumbnail {
display: none;
}
 
.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}
 
li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}
 
li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}
 
li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page

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

I was faced the need to be able to place extra manageable content inside a wordpress page’s core content… and without an existing plugin available to do this I thought I’d write one of my own.

The output was the Widgets on Pages wordpress plugin which is at time of writing at version 0.0.4. The plugin basically allows the author to add a shortcode to their wordpress page or post which will then add the content of a predefined Widget area (or sidebar) at that point in the post/page

Widgets on Pages Options

The plugin approach allows the user to add a lot of extra control to their wordpress sites without the need for any coding or markup skills (PHP, MySQL, HTML etc).

UPDATE: In version 0.0.4 you are able to define an unlimited number of separate sidebars and call these all separately within the wordpress content.

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

WordPress.org

As part of my work for Gingerbread Design I have just released my first WordPress plugin into the wild. The plugin provides bulk functionality to help manage eCommerce web sites/stores. Details of the plugin can be found on the official plugin homepage and of course can be downloaded from the WordPress.org plugin directory.

Please, please try this out if you use the WP e-Commerce plugin in your own web site/store and let me know which other bulk features may be of interest and most use to you.

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

Pingdroid

Ping.fm as a service is growing constantly and the number of web services that it talks to is just ever-expanding and is certainly worth keeping an eye on if they don’t at present support the platforms that you use.

PingDroid was devloped by Bryan Waters and is available via the Android Market.

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

Klaxon for Android

I’ve never experienced a ‘force close’ from the application and anyone who wants more from an alarm than offered by default on the G1 could certainly do worse than give Klaxon a whirl.

Klaxon was developed by Koushik Dutta and is available via the Android Market.

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

I also hope that this won’t only be a move that the mobile phone manufacturers take up but also one that is followed by the producers of other portable devices such as MP3 players and SatNavs (of course these products may actually just be one piece of equipment by this point in time).

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

So now, 2 and a half years on I’ve finally got round to getting myself one. I lumped for the 901 Linux model which offers a 8.9″ screen in the same overall case size as the 701. It has a 20GB SSD, built in wireless and Bluetooth, SD card slot , 3 USB2.0 ports, a 1.3 mega pixel webcam and a host of other features. The little beauty set me back just over £210 exc. VAT.

Asus Eee PC 901

The Physicals

As previously mentioned the 901 comes in the same sized shell as the 701 model but offers a ncie 9.1″ screen giving a 1024×600 resolution. It seems to certainly be bright enough too ( even on the lower brightness settings). The keyboard is small, there’s really no getting away from this. But after practice it seems usable for sure, in fact I’m writing this very article on it whilst travelling back from work on the bus. To be honest though the pot-holes and erratic swerving by the bus driver are making it slightly more difficult than it should be. Overall the kit feels solid; the hinge attaching the screen doesn’t seem to be flimsy at all and everything else most definitely does not echo of a rushed cheap product.

The OS and software

Of course being a fan of open source software (and hardware – see the Arduino board) I opted for the Linux version of the Eee. It comes with Xandros – a debian derivative I think – pre-installed and is setup in an “Easy Mode” which offers nice big buttons for “Internet” and “Email” and the like. The default mode is very simple to use and users could be surfing the net and emailing pretty much straight out the box. I should probably mention that I’ve not yet come across a wireless network I couldn’t use (so far used a Sky connection, my N95 and a couple of hotspots)… though reading up on the net it seems that there are connections out there that perhaps do make life difficult for Eee users.

Other notable software which come with the Linux version include Skype, Star Office, and the Pidgin IM client.

The Performance

With a 1.6 atom powering the little gem it doesn’t seem to suffer at all when wanting to do some basic browsing, word processing or mailing. These tasks are likely to be the primary tasks undertaken on my Eee… with perhaps the odd movie viewed and maybe even some development (I’ve yet to see how it copes with the Eclipse IDE which I use for my Android work).

There are three “performance” options available from the system tray which include “Power Saving”, “High Performance” and “Super Performance” as well as an “auto” option which chooses the mode depending on whether or not you’re running the Eee under battery power. If you’re watching a video clip or film then I suggest not using the “Power Saving” mode as this appears to make the images a bit juddery.

The Battery

So far battery life seems good. With the wireless on I get about 5 hours (though not using it much) and as a (yes, pretty large) MP3 player I got more like 8 hours. In fact at present I’ve been typing for about 30 minutes with the wireless off and I’ve used 6%..

The bottom line

I’m overjoyed with how good this little puppy is so far. I have made some few tweaks to be fair (like enabling the full desktop mode, removing some unwanted packages and installing some more software) but this is of course one of the plus-points of the Linux system. I’ll be detailing how I performed these tweaks in later posts… so keep ‘em peeled.

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

T-Mobile Android G1

For those that don’t know the T-Mobile Android G1 was the first released mobile device which runs the open Android operating system (developed by Google). The OS is open source which essentially means that all the code monkeys out there can dig right into the device and develop applications for it to their hearts content. The G1 hardware wise is actually a branded HTC device. HTC prior to this move are probably most famed for their Windows Mobile handsets such as the MDA/XDA ranges.

Anyhoo, back to my first thoughts…

Form Factor

Lots of folks think the G1 isn’t a pretty phone… perhaps they’re right, but to be honest I’m not one of them. And after much much use I actually think the phone is nice and well built. The sliding full qwerty keyboard is extremely usable and feels solid. The small angled portion of the phone helps it sit nicely in my pockets too. It doesn’t seem to big or fat even. One thing that does bug me however is the fact that one handed use is a tough. I don’t think I put this down to the fact that I have small hands but just that the “back” or “return” button is too far left to reach with your left thumb. This small niggle could be resolved by adding a “soft” button to the OS and applications… and given that this phone appears to be a developer’s dream it’s probably not long before this starts to appear.

The battery is poor… there’s no denying it. It would get me through a day of modest use with certain precautions taken like turning off bluetooth, WLAN and turning down the screen brightness but this seems absurd when I think that my old SE P910 would last for days even with extreme use levels. A fair point maybe the use of 3G which is known to be a real battery drainer and has plagued other handsets such as Nokia’s N95.

One thing that does really bother me about the G1 is the lack of a 3.5mm headphone socket. As someone who doesn’t want to have an MP3 (or OGG) player as well as my phone this is a real pain in the derrier. Adapters are available but that’s not really the point.

I suppose that I should make it clear that the hardware for me is certainly at the bottom of my thoughts when I talk about the G1… so lets move on and you’ll find out why.

The Goods

Because of the G1′s open-ness the “Market” (Android’s sister to the iPhone App Store) was full of applications very soon after the phone’s launch. Scores of developers had been using the Android SDK to make all sorts of pieces of software (many useful, many not so much) that could be downloaded directly to the phone. The open-ness also meant that many of the core phone features could be accessed by these developers… things such as the GPS, WLAN, contacts and SMS are all available to be used. Another key benefit that the Android OS offers is that internal architecture is extremely flexible and expandible. Basically if there’s something you don’t lke about any of the software (including the pre-installed apps from Google such as their Contacts applicaation) then these can be re-written and replaced.

The Bads

At the moment there’s only a couple of things I don’t like about the G1 when it comes to the OS and software, these being the lack of Outlook syncing, Bluetooth being limited to audio use (I.e. no PIM transfer) and no inbuilt support for using the phone as a modem. What we have to remember here is that these are (hopefully) only short-term issues thanks to the Android OS (in fact some clever folks have already come up with a tethering work around). Another point to remember is that support for “paid for” applications in the Market Place should be available in the first quarter of 2009 and that a whole host of offerings including an ActiveSync application should be available very soon after.

Powered by Android

The Bottom Line

It’s amazing… yes it is. The G1 itself has a few faults – which I quite happily forgive it for – but this I suppose isn’t what I think is amazing. It is in fact the Android OS that creates a whole world of possibilities. If you don’t like the look of the G1 then don’t worry, they’ll be scores of Android powered terminals coming out over the next year and I’m sure they’ll be one that you’ll feel happy about getting out in the pub.

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