Petestack Blog

[Update: 19 May 2016]
Have to say some of what’s below already smacks slightly of ‘false dawn’, but hopefully cracked it now through a combination of further reading, real-life phone feedback/screenshots and Chrome Developer Tools as apparently the only mobile phone emulator I can trust. So now we’ve got the meta viewport tag, HTML5 replacing XHTML everywhere except the blog (apparently some work to do on validation there), some more thoughtfully-tweaked ‘break points’ in line with what I’ve learned and seen, and things looking/working much better?

Also bashed ahead with a long-desired rebuild of the whole site to parse all those irritatingly uneditable legacy static HTML files as PHP to include main menus, section sub-menus etc. from a much smaller, more maintainable repository, so now much, much easier to make quick site- or section-wide changes where things should be almost infinitely adaptable because the layout’s been predominantly freeflowing/unconstrained from the very start.

[Original 15 May post with some annotations]
As a hand-coding, standards-compliant web designer from my first forays into HTML and CSS to create this site 16 years ago, nobody should be surprised that I’ve always believed in fluid/flexible layouts. But I doubt many designers were really thinking about phones or even tablets back then (I still don’t use them for Internet myself, but try not to forget folk who do), and have been aware for a while now (= years!) that some site elements here like the main menu (still a slicker variation of the original 2000 concept) and blog sidebar (a 2009 addition) were going to be at least ugly on smaller tablets and impossible for many phones. So now finally (!) some quick belated hacks to keep things more or less usable [edit: fail!] in narrow viewports:

1. CSS max-width now overriding hard-coded sizes for all site images (with a few necessary exceptions like the Kinlochleven main photo) so they shrink with the viewport width.
2. Hide the menu text at <= 768px width (yes, I’m still thinking way narrower!) because that’s basically neater than reducing font size, allowing word wrap, hiding overflow etc.
3. Add HTML title attributes to the menu images for when the text’s hidden. [No use when you can’t hover with fingers?]
4. Restyle the blog sidebar to make it slightly narrower and send it to the foot of the page when there’s no longer room for it down the side. [Stayed put on some phones where I’d expected to see it gone, but hopefully getting there now I’m starting to twig stuff like the difference between physical and logical pixels?]

Now I don’t have a smartphone when my idea of a mobile phone’s a weatherproof, ruggedised brick for the great outdoors, but I have tested my modifications down to phone-type widths in computer browsers without finding anything unusable to the previous degree. So perhaps some of my smartphone-wielding, mobile-browsing friends could give things a whirl (especially the blog) with actual phones and let me know if they’re still finding any absolutely ‘stopper’ issues?