Tag Archives: web development

Responsive web design (in several senses)

Posted on by

In a nice follow-up, my post on random sampling with D was highlighted on Reddit, where content-wise it seems to have been very much appreciated.

Unfortunately it also uncovered a serious problem with the site’s readability on mobile phones. So, cue some reading up on responsive web design and some intensive tweaking of the site’s CSS. This should hopefully improve performance and usability of the site across all devices and screen sizes.

Among the changes made are:

  • Progressive tweaks to layout design as the screen width shrinks, designed to ensure that there are never clashes between page elements.
  • Removal of the embedded web fonts. Much as I love the Linux Libertine and Linux Biolinum font families, having them embedded into the site was costing lots of bandwidth and meant the site loaded very slowly indeed on some browsers (e.g. Google Chrome would need to wait for the font to download before displaying any text). Linux Libertine and Linux Biolinum are still requested by the CSS, so if you have them on your machine you’ll still see the best face of the design; but I’ve made careful secondary font choices that are likely to cover all platforms and will still keep the site looking good.
  • The use of SVG files for the site’s stylistic graphics. These are smaller than the PNG files used previously and should work on all modern browsers. They also allow me to size all elements of the page in relative terms rather than being tied to a particular resolution. (Actually, I did try doing this ages ago in an earlier iteration of this site, but abandoned it because browser support was not widespread enough. Fortunately things have changed…)

There remain a couple of niggles. The site’s drop-down menus seem unsuitable for use on touchscreens; I’ll have to do further research into an appropriate solution here. [Update 2012-07-27: should be fixed now.] There’s also a seeming possibility that the top-of-screen search box will either wrap or otherwise clash with other page elements on the smallest screens. Nevertheless, this website should now be substantially more usable on small-screen devices.

Feedback on the effect of these changes is welcome, as is advice on how to iron out any niggles :-)

Fixed(ish)

Posted on by

CSS for the site has been tweaked.  It still triggers Internet Explorer’s Compatibility View, but at least now that doesn’t bugger up the layout.

Thanks to the developers of the Toolbox theme, whose CSS this updated theme incorporates.

Let me know if the site is still embuggerated for you. (Oh, and: use a proper web browser. One that can support standards-compliant HTML and CSS without choking:-)

Die, Internet Explorer, Die …

Posted on by

(… this is German for ‘The, Internet Explorer, The’:-)

It’s been brought to my attention that the site is not displaying properly in Internet Explorer. The site design passes the W3C validators for HTML5 and CSS3, and displays fine in Firefox, Google Chrome, and others. IE on the other hand dumps the site into Compatibility View, where horrible horribleness takes place with the right border of the main text, and some aspects of the right-hand sidebar.

I’m at a loss to explain this, so any advice is welcomed. A brief check using the IE web developer tools, where I can force IE9 rendering, suggests that IE really is choking on some aspect of the rendering, though I can’t identify exactly what. However, the problem only occurs on some pages: for example, the original blog post renders fine.

I’m leaving the current theme in place (for now) working off the assumption that (a) a fix can be developed reasonably quickly and (b) if anyone more knowledgeable than me wants to be helpful and test the problem, you’ll need the embuggered theme in place to be able to do so.

In the meantime: kids, let this be a lesson. Use a proper web browser. ;-)

Platform Shoes …

Posted on by

So, after humungous amounts of effort trying to set up a blog using other platforms, I finally decided to do the obvious thing and go with WordPress.

Note to self for future reference: the obvious thing is not necessarily the wrong choice.

Here’s looking forward to blogging … :-D