Blog : Posts tagged with 'web design' : Page 1

*

Curious problem

In which FP has an obscure font problem, in annoyingly specific circumstances


Only a day after the new garden blog went live, I found myself with a problem. This morning, I noticed a problem with it, on K’s PC. Moreover, it was only a problem on K’s PC. On her PC, in Firefox and in IE, the heading font was hugely oversized compared to the rest of the page. In Chrome, everything was fine.

Now, I’d tested the site in all of my browsers. On my Windows PC, running Window 7 just like K’s, there were no problems in any of the browsers I’d tried. On my Linux box, all fine; on my FreeBSD box, all fine. But on K’s PC, apart from in Chrome, the heading font was completely out. Whether I tried setting an absolute size or a relative size, the heading font was completely out.

All of the fonts on the new site are loaded through the Google Webfonts API, because it’s nice and simple and practically no different to self-hosting your fonts. Fiddling around with it, I noticed something strange: it wasn’t just a problem specific to K’s PC, it was a problem specific to this specific font. Changing the font to anything else: no problems at all. With the font I originally chose: completely the wrong size on the one PC. Bizarre.

After spending a few hours getting more and more puzzled and frustrated, I decided that, to be frank, I wasn’t that attached to the specific font. So, from day 2, the garden blog is using a different font on its masthead. The old one – for reference, “Love Ya Like A Sister” by Kimberly Geswein – was abandoned, rather than wrestle with getting it to render at the right size on every computer out there. The replacement – “Cabin Sketch” by Pablo Impallari – does that reliably, as far as I’ve noticed;* and although it’s different it fits in just as well.

* this is where someone writes in and says it looks wrong on their Acorn Archimedes, or something along those lines.

3 comments so far. »

Keyword noise: , , , , , , ,

*

Public Information

In which people are alerted


Just a quick post to say that: readers who normally use their RSS reader to look at this site might want to click through today. To see what everything now looks like. There aren’t many of you, but you are all regular readers, so I thought I’d let you know.

7 comments so far. »

Keyword noise: , , , , ,

*

The size of things

In which we measure monitors


The redesign is now almost done, which means that soon you’ll be saved from more posts on the minutiae of my redesign. It’s got me thinking, though: to what extent do I need to think about readers’ technology?

When this blog first started, I didn’t really worry about making it accessible to all,* or about making sure that the display was resolution-independent. It worked for me, which was enough. Over time, screens have become bigger; and, more importantly, more configurable, so I’ve worried less and less about it. When it came to do a redesign, though, I started to wonder. What browsers do my readers actually used.

Just after Christmas, for entirely different reasons, I signed up for Google Analytics, rather than do my own statistics-counting as I had been doing. Because Google Analytics relies on Javascript to do its work, it gives me rather more information about such things than the old log-based system did. So, last week, I spent an hour or so with my Analytics results and a spreadsheet. Here’s the graph I came up with:

Browser horizontal resolutions, cumulative %

The X-axis there is the horizontal width of everyone’s screens, in order but not to scale; the Y-axis is the cumulative percentage of visits.** In other words, the percentage figure for a given width tells you the proportion of visits from people whose screen was that size, or wider.

Straight away, really, I got the answer I wanted. 93% of visits are to this site are from people whose screens are 1024 pixels wide, or more. It’s 95% if I take out the phone-based browsers at the very low end.*** The next step up, though, the graph plunges to only 2/3 of visits. 1024 pixels is the smallest screen width that my visitors use heavily.

Admittedly there’s a bit of self-selection in there, based on the current design; it looks horrible at 800 pixels, and nearly everyone still using an 800×600 screen has only visited once in the two-month sample period. However, that applies to most of the people who visit this site in any case; just more so for the 800-pixel users. Something like 70% of visits are from people who have probably only visited once in the past couple of months; so it’s fair to assume that my results aren’t too heavily skewed by the usability of the current design. It will be interesting to see how much things change.

I’m testing the new design in the still-popular 1024×768 resolution, to make sure everything will still work. I’ll probably test it out a fair bit on K’s phone, too. But, this is a personal site. If you don’t read it, it’s not vital, to you or to me. If I don’t test it on 800×600 browsers, the world won’t end. The statistics, though, have shown me where exactly a cutoff point might be worthwhile.

* For example, in the code of the old design, all that sidebar stuff over on the right comes in the code before this bit with the content, which does (I assume) make it a bit of a bugger for blind readers. That, at least, will be sorted out in the new design.

** “visits” is of course a bit of a nebulous term, but that is a rant for another day.

*** Most of that 2% consists of: K reading the blog on the bus on her way home from work.

No comments yet. »

Keyword noise: , , , , , , , , , , ,

*

Development

In which we anticipate the new design


Incidentally, the Grand Redesign plans, as mentioned here several times previously, are still trundling along at their own pace. Parts, indeed, have already been finished and are up on the server; although, as they’ve not been linked-to, nobody can get to them yet.

The slowest part, though, has been: backtracking through the entire post history and editing every post to conform to the new type: proper tags, proper excerpts, and so on. It’s a long slog, given that there are 3 1/2 years’ worth of posts,* and rereading them all has been hard work. It’s been a strange experience, too, because in many cases I’d forgotten an event, and reading all the posts jogged my memory in unexpected ways.**

The end is in sight now, though; so it won’t be long before I can check everything over, finish tidying up the new design, and put it all live. Fingers crossed that when it does go live, it’s all going to work.

* about 750ish, following the long hiatus last summer

** In some cases I’ve completely forgotten events – there are some posts where, if someone had showed them to me, I wouldn’t even have realised that I’d written them myself. And there are plenty of “guarded posts” where, now, a few years later, I’ve forgotten exactly what events I was describing

3 comments so far. »

Keyword noise: , , , , , , , , , , , , , ,

*

Classification

In which we discuss tagging and filksonomies


Another design point that’s come up as part of the Grand Redesign I keep promising you: tagging. The little bundle of links at the bottom of each post that I didn’t really think did very much.

I was a latecomer to tagging. When this site first started, it didn’t have any for the first month or so. After a while I started adding them, pointing them to Technorati. Back then, WordPress was still on version 1.5.something, and it didn’t have any built-in tagging support. I don’t like to have too many plugins, and I didn’t think that tag management* mattered that much; so I wrote all the tags manually. Like this:

<small>Keyword noise: <a class=”tag” rel=”tag” href=”…”>tag</a></small>

Which worked, quite well; there was a visually distinct “tag” class, because I wanted tag links – which all led to Technorati – to be visually distinct from the rest, which would go to something more topically relevant.

Things move on, though, and WordPress has since gained built-in tagging functionality. Given that I’m redesigning the whole site, and putting in new built-from-scratch layout templates, I thought I may as well switch to using a more organising tagging system. For one thing, it means less typing each time I write a post. All that code up above is replaced by one little chunk in the template:

<p id=”thetags”><small><?php the_tags(‘Keyword noise: ‘, ‘, ‘ ,”);?></small></p>

I know all those commas and quotes look a bit confusing; but really they’re not that bad. And the point is: that bit of code there only has to be written once; the previous chunk had to be typed out every time. The most awkward part is that WordPress isn’t flexible enough to let you set the class of each link individually, hence the <p class=”…”> at the start.** The big change this leads to, though, is that the tag links no longer point to Technorati. Now, they point back to the site itself: you get a page containing every post with that tag on. And, already, that’s shown that people do indeed click on the tags. People, particularly people coming from searches, do seem to use them. Whether they find them useful or not is another matter, of course;*** but they do get used.

Doing it this way means that I put more tags on each post, simply because there’s much less typing to do. Conversion, though, is going to be a bit of a job. There are 760-odd posts on this site, all of which I’m having to reread and re-tag. It’s going to take a while, but hopefully the majority of it will be done by the time the new design is finished.**** The only problem with this transitional phase is that: the current template is, because of its age, completely unaware of tags. So it doesn’t really know what a tag-based archive page is; so when you click on a tag, there’s no explanation as to what you’re looking at. I’m not sure if this is going to be a problem for you readers or not; and, hopefully, it’s only going to be a short-lived situation.

The word “folksonomy” has often been used to describe this sort of tagging system. I’m not sure it’s an ideal term for what I’m doing, though. “Filksonomy” might be more relevant: a bit like a folksonomy, but rather more whimsical and silly.

* as opposed to tagging itself.

** it has also buggered about with the quote marks in that fragment of code. Whatever you do, don’t copy and paste it – if you want to use it, retype it!

*** particularly now they point back within the site rather than outwards to see what other people have said on the topic.

**** In any case, there are other parts of the new design that also need each post checking and editing.

No comments yet. »

Keyword noise: , , , , , , , , , , ,

*

Design points

In which nothing, design-wise, is accomplished


As I mentioned recently, I’m embarking on a Grand Epic Ground-Upwards Redesign of this site, because, well, the design hasn’t been changed since I first set it up. I knocked it together in a few days holiday in August ’05; back then my holiday year ended in August and I often had a few spare days at the end of the month where I had nothing to do and needed to keep myself occupied. In 2005, this blog was the result.

Anyway, my point is: it was put together in a bit of a hurry, with most of the design code ripped out of a standard theme I downloaded, without me really understanding what each bit did. The design’s always had a few rough edges, and there are lots of things that I’ve meant to develop further but never have. Hopefully, some of those points will be addressed, attacked, and taken by storm.

Thinking about the design, though, and what I want it to achieve, has made me thnik about one of the things I was most unhappy with when I first put this site together. One of the things I liked about this theme when I first saw it was:* the little boxes for the date on each post. You know, these ones:

Date with cardinal number

But one thing I didn’t like, though, was the cardinal number. Maybe it’s because I’m English, that that’s how I was taught, but when I read a date, I always read it with an ordinal number. “January 11th”, not “January 11″.

I can’t remember, to be honest, if it was possible to fix that easily when I first started using WordPress. Possibly it was, possibly it was something that’s been added later.** In any case, I didn’t fix it. I know I tried to, at one point; but abandoned the fix and didn’t go back to it. Then I forgot the issue, until, coming back to the redesign, I tried the fix again the other day. When I retried it, I remembered that I’d given it a go before. Because this is the result

Date with ordinal number

Those two extra characters mean that on most days, the text is just marginally too long to fit in the box. The box gets pushed down. Which isn’t so bad; but, it doesn’t always happen. You can’t necessarily know what the date box will look like; how it will relate to the elements around it. Moreover, I don’t know how it will look on other computers, where the fonts have slightly differing metrics to mine.

There are ways to fix it, of course. The box could be slightly wider. I could make sure that the horizontal line always comes underneath the date box, although that might leave annoying white space under the post title. The question, though, is whether it’s worth doing. However many times I tweak it, I’m not sure I’d ever get it quite right based on the current design.

And so, this all is partly why I’m going to start pretty much from scratch. The risk is that I’ll reinvent the wheel; the upside is that at least I’ll know how it works from its heart.

* and still is

** To be pedantic: it’s not a feature of WordPress itself, it’s a feature of PHP, the underlying language. I’m too lazy to go back through PHP’s version change logs and find out when the feature in question – the “S” character in date formatting strings – was added.

No comments yet. »

Keyword noise: , , , , , , , , ,

*

Upgrade

In which I try to update the site


An administrative note: I’ve just upgraded the site to WordPress 2.7, the new, latest version, before I start on the planned epic redesign. And: it’s different. To you, the site itself should look just the same as before. On the underside, writing and managing the site, it looks completely different. I’m all-at-sea. Everything has moved about, and it’s going to take me a few days to relearn how to work the thing. That’s upgrades for you.

One comment. »

Keyword noise: , , , , ,

*

Footnote

In which we debate a design detail


Regular readers might have noticed that yesterday’s post was a bit of an experiment. In case you didn’t spot what the experiment involved, here’s a clue:

Screenshot

Ever since it started, this blog has gone in for copious footnotes, on just about every post,* flagged up with stars in the usual way. One thing I’ve never been entirely happy with, though, is that the more footnotes you have, the more stars each note requires. A fifth or sixth footnote starts to get unwieldy, as Monday’s post shows. So I’ve been idly thinking about other ways to indicate a footnote: symbols, numbers, or something else.

You can tell I’ve been idly thinking about it, because it’s taken me over three years to try an experiment with using numbers instead. I’m not really sure, though, whether I like it or not. K, I know, definitely doesn’t like the new numbered style; she was almost tempted to leave a comment saying “Bring back the stars!” so she must care. Or I could try out a series of different symbols, instead of a line of stars. More experimentation might be called for.

* When I first started drafting this post, it didn’t have any. “Oh, the irony”, I thought to myself, “of having no footnotes on a post about footnotes.” Fortunately, one soon came to me.

5 comments so far. »

Keyword noise: , , , , , ,

*

Bad news

In which we get hacked


It’s never a good sign when you come back from tent-shopping (a story for another day), check your email and find an emergency security alert from your web-hosting people. It’s an even worse sign when it says: your site has been compromised. Ah. Oh dear.

My FTP details had been compromised, apparently. This is intriguing, because my FTP password is unique, unrelated to any other I have, and stored solely inside my head. Either some sort of network-sniffing was going on – entirely plausible with the entirely insecure FTP* – there’s some flaw in my hosts’ FTP daemon, or the fault lay elsewhere.

Anyway, it’s prompted me to upgrade myself to WordPress 2.5, released recently. Upgrading WordPress is one of those jobs which I tend to put off and put off, for no good reason because it’s really not that painful; and there’s a good chance that WordPress was the loose link here. Old versions do have known holes, and if I’d upgraded sooner, the break-in might never have happened.

* I nearly said “FTP protocol” there. But that would be “File Transfer Protocol protocol”, which is Just Wrong.

8 comments so far. »

Keyword noise: , , , , , ,

*

Rotation

In which we crunch numbers and look at the site design


It almost slipped by without me realising: yesterday was this site’s second birthday. This is, I’m told, post number 538, which means I’ve managed to post something on average every 1.36 days. It’s been slipping recently, I know. For completeness’s sake: there are 771 comments visible,* and an inordinately greater number which have been deleted.**

After two years, is it time for a redesign? I’m not sure. I don’t believe in celebrating anniversaries for their own sake, and I do still like the design as it is. Not looking at it for a few days means I come back and look at it with fresh eyes. There’s a lot of white space round the screen; and if something is in lots of categories then the post header goes a bit ugly.*** Whether I can improve on it very much is another matter. The non-blog pages are still lurking behind the scenes undecorated – I’m tempted to use them to try some new designs out. If I can come up with some new designs, that is.

* 1.43 per post; or one comment every 22 3/4 hours.

** It’s not actually inordinate, of course – there have been around 7000 of them.

*** The list of categories wraps round beneath the date.

One comment. »

Keyword noise: , , , , , ,

*

Search this site

*

Contact

E: feedback [at] symbolicforest [dot] com

IM: Ask me if you'd like to know

*

Post Categories

Artistic (118)
Dear Diary (349)
Feeling Meh (48)
Geekery (109)
In With The Old (34)
Linkery (37)
Media Addict (164)
Meta (79)
Photobloggery (94)
Political (113)
Polling (7)
Sub category (19)
The Family (31)
The Office (70)
Unbelievable (53)