As a run-up to a responsification of my site (which is about bloody time but I fear may turn into a bit of a redesign, hence putting it off for ages) I made some small tweaks to the site:
I added a max-width:800px to the main content div, after a reader with a widescreen monitor complained (there was previously no maximum). This is temporary while I research a better, more readable line length (current consensus seems to be about 66 characters/ 33 ems which seems absurdly short).
I removed the now-departed pubdate attribute of the time element in each article’s header, and replaced it with a microdata attribute. Each article is now associated with schema.org’s Blogposting type and the publication date marked up <time itemprop="dateCreated" datetime="2012-12-18">Tuesday 18 December 2012</time>.
I modified the WordPress behaviour of making the main heading on individual post pages a link to the same page, because (a) it’s daft and (b) a reader complained that (s)he couldn’t copy the title into the clipboard on a phone, because it always activated the link.
A screenreader user asked me to add an ARIA live region to the comment preview. I dug around the code for the Live Comment Preview plugin and added it on GitHub (kudos to the author Brad Touesnard who accepted my pull request the same day).
Next steps are to rationalise all the links in the sidebar – who really browses blogs by month? – and make it responsive.
I really love WordPress (apart from a few minor niggles). It maintains all my links, archives, it’s customisable – it’s a splendid piece of software, and the fact it’s free is fantastic. WordPress conforms to the basic level of accessibility, but most WordPress blogs don’t pass all the WAI/ WCAG Accessibility guidelines, so I decided to hack around with the code to make it more accessible. Continue reading WordPress accessibility hacks
I’m trying to add some stylistic gorgeousness to my pages, but don’t understand enough PHP to make WordPress produce the markup I need. Can you help? Continue reading WordPress PHP help wanted
“A redesign?!?!”, I hear you exclaim. “It looks exactly the bloody same!”
Well, it’s not ready for primetime yet, but I got tired of not blogging, so here’s my heavily-customised WordPress-powered redesign. "A redesign?!?!", I hear you exclaim. "It looks exactly the bloody same!"
Well, yes, but my design skills are not exactly renowned, and when I checked my server logs, I discovered someone’s blog entry saying "I absolutely adore the site design of brucelawson.co.uk. So clean and simple, and yet it looks gorgeous. Fantastic stuff."
With praise like that, I decided to leave it pretty much as-is, though I’ve still work to do styling the new bits and bobs (comments, extra nav, post metadata etc).
There’s loads of stuff still to do, the biggest of which is the removal of all <br /> tags that snuck into the posts when I was copying from the notepad html source of my old site into the WordPress Post entry text box.
If anyone can donate me a PHP script that can replace <br /> with "" (only in posts), I will love you forever.
I’m enormously gratetul to Matt Mullenweg for WordPress as I now have categories, archives, permalinks, comments and all the trappings of your proper blogbloke. There were a couple of minor niggles that I’ll note in case they can be noted for WordPress 2.0:
Although my xhtml always validated, there were still presentational elements in the markup: for example, the #header div had an anchor to the home page that was coded
<a href="index.htm"><span>Home page</span> </a>, using the css:
#Header h1, #Header a {display:block; background:url(images/bruce-logo.jpg) no-repeat center;width:auto; height:176px;} #Header h1 span, #Header a span{margin-left:-5000px;}
That has the added semantic bonus that, on the homepage where has no link to itself (cos Jakob commanded me), the page title is a header, rather than a simple <img> in the header, thus paying me Google dividends.
Similarly, the "ransom note" images for main nav were just a collection of images separated by <br /> tags. That needed to be moved into the css so that the images could be changed on a stylesheet switch. This is a bit more cumbersome. Here’s the xhtml:
ul#mainnav {list-style:none; margin-left:0px; padding-left:0px} ul#mainnav a {display:block;} ul#mainnav a span {margin-left:-5000px;} /* replace text for main nav buttons */ a#music {background:url(images/music.jpg); width:200px; height:72px;} a#about {background:url(images/about.jpg); width:184px; height:46px;} a#nav-photos {background:url(images/photos.jpg); width:200px; height:66px;} a#writing {background:url(images/writing.jpg); width:200px; height:68px;} a#links{background:url(images/links.jpg); width:190px; height:77px;} a#email{background:url(images/email.jpg); width:200px; height:88px;} a#home{background:url(images/nav_home.jpg); width:200px; height:88px;}
I don’t particularly like all the <span>s there for image replacement, and am toying with the idea of using the Image Replacement””No Span technique, but that requires polluting the CSS with box model stuff for IE5 (do I really give a shit about IE5?), so my internal jury is still out.