Home
Blog
New
Site Map
Music
Sailing
Climbing
Running
KLL
WebFor what it’s worth, this site (petestack.com) was my first and I learned on the hoof! So its original incarnation (launched 24 October 2000) took me a month or so of ‘teach yourself’ HTML/CSS and hand coding (in Notepad!) to put together, but my code was valid (if not ideally semantic) right from the start because I needed to understand what I was doing and why and always cared about getting things ‘right’. And it’s still recognisably the same site, with the same navigation icons, page backgrounds and styling of navy and red elements, although considerable effort has since been thrown at tightening up the sprawling mess that my inexperience left me and making the navigation more consistent and user-friendly as it’s grown.
Now, much of what’s written below used to be found on a page in my root directory (‘first introduced to explain my temporary flirtation with frames’), but it always bothered me that it was basically there by accident and the site lacked a better place to talk about my design philosophy and showcase some of my other designs (several of which had effectively disappeared through no longer being required or available at their original locations). So in 2007 I finally dug ‘web design’ out of the root directory to give it some space of its own (complete with main menu link and new Current and Archive sections), and here it is! Which means that my older designs can once again be seen and, for the time being at least, I can give the rest of this page over to maintaining and expanding the old commentary on everything else (although I’d better point out that a fair amount of commentary on the coding and evolution of this site has also found its way via What’s New to the Update History archives)...
So I’ve been working with HTML and web design for years, but still keep finding resources I wish I’d known about sooner (and some that didn’t exist sooner)! However, since the internet’s just as full of good, bad and indifferent resources for web designers as good, bad and indifferent resources of any other kind, I’m not going to play Google here but simply cite an almost arbitrary few that have helped or impressed me along the way for their inspiration and/or ‘why’ as well as ‘how to’ of web standards.
Now, while I rarely frequent web design sites these days unless I’m looking for renewed inspiration or a reminder of how to do something, I’ve certainly read some thought-provoking articles over the years at A List Apart. Even the briefest of walks through CSS Zen Garden should be able to convince anyone of the power of CSS and I’ve also found Dan’s Web Tips a thought-provoking and useful resource at times. But for comprehensive references, tutorials and reminders, my first port of call these days is more typically the wonderful w3schools, sometimes cross-checked against the definitive W3C specifications, where I’ll still frequently run my stuff through the Markup Validation Service.
Despite the obvious dangers of computing books being out-of-date the moment they go to print (not that theoretically more instant websites always stay current!), I like books and bought quite a few web design, programming and OS reference books in the past. But the ones I’d have to rate most inspiring for web design in the days before increasing reliance on Google and the comprehensive currency of w3schools rendered my aging books almost redundant would be Jeffrey Zeldman’s Designing with Web Standards (I have the 2003 first edition), Steve Krug’s Don’t Make Me Think (2006 second edition) and Eric A. Meyer’s CSS: The Definitive Guide (2007 third edition).
It should hopefully be obvious by now that any decisions to disregard good advice and insist on doing things my way are mine (and mine alone), but equally obvious that I’ve thought (and still think) about what I’m trying to do! So, having suffered for years as a serious internet user on 56K dial-up before 2Mb ADSL arrived at our Highland village on 27 July 2005, you shouldn’t be looking at a site full of thoughtlessly unoptimised graphics making it unusable for those on slower connections and needlessly clogging up the world’s pipes. And, while you might still find some deprecated elements kicking about from Netscape 4 ‘compatibility’ days (when dinosaurs roamed the earth!), they’ve been vociferously weeded out as new design work of a global nature touches the older pages. So way back in 2007 the music pages became my first to go XHTML 1.0 Strict as, inspired by Elizabeth Castro’s Bye Bye Embed article at A List Apart, I finally managed to implement valid, functional, cross-browser Sibelius Scorch pages and eliminate the only proprietary HTML I’ve ever even remotely tolerated on this site! :-D
Since other languages have joined (X)HTML and CSS in my ‘toolbox’ over the years, perhaps I should add a word or two about them. So, despite getting ‘rusty’ at times when I’m not working with them much, I’ve made fairly serious attempts to get to grips with PHP (as demonstrated by some parts of this site) and XML/XSLT (in which I wrote the User Help for SMF 1.0) and dabbled with MySQL and JavaScript (neither of which I’ve yet taken very far at all despite every intention of doing so). And since May 2016 we have HTML5 replacing XHTML everywhere bar the blog.
Since Petestack first went online, I’ve designed a number of other sites from scratch, run several web forums and spent considerable time developing a straightforward web editor (now just an outdated ‘museum piece’!) for our high school site, but have since removed the links to most of these because they’ve run their course, been mothballed or both. However, I’ve kept working on some projects, and the creation of my Petestack web design section in 2007 gave me the opportunity to restore some of the old designs (mostly in intentionally reduced screenshot form) to an archive here.
While I’ve always worked primarily with good-sized monitors, I rarely browse full-screen on them and certainly don’t design for them! So I frequently resize to more ‘book-shaped’ windows to read text on pages (including my own) where greater width impairs readability by producing lines with too many characters and too little leading (by which I mean inadequate line spacing for the width and not literally old-style leading!). And I test my sites in windows of all shapes and sizes (as well as now Chrome Developer Tools), not ignoring the effects of varying heights but focusing primarily on the trickier width problems of keeping them usable for tablets and mobile phones but taking due advantage of larger desktop monitors. On which note I might point out that my ‘current’ and ‘archive’ screenshots represent (now modest) erstwhile standard 4:3 ratio 800x600 and 1024x768 sizes, with toolbars removed more to keep my development server URLs and bookmarks out of the picture than to squeeze more page content in!
Having treated accessibility and browser compatibility seriously enough to have been validating my pages since my first forays into HTML, I’ve not only discovered that backwards compatibility and standards compliance are two different animals but also learned that validation alone isn’t good enough if the markup isn’t properly structural. So perpetual backwards compatibility might sound great, but it was tiresome enough back in the day cooking up anachronistic fudges for Netscape 4, and it would be hard to explain to newcomers now just what a relief I found my decision to stop supporting version 4 browsers in late 2002. But anyone who suspects me of equating ‘valid’ with ‘problem free’ or ‘standards-compliant’ with ‘safe’ can rest assured that my ‘test bench’ still includes recent versions of Firefox (my browser of choice on both Windows and Linux), Internet Explorer, Opera (sometimes making use of its development tools and emulation modes) and Chrome.
While I’d have to admit to being no expert in typography, I’d still be prepared to risk the claim that my interest extends to an understanding of most of the basic terms and principles. So, if some aspects of my site presentation (eg the use of proper quote marks) took some time to approach the standards I’d expect as a matter of course in print, it’s because they were held back by the lack of consistent browser support for the necessary HTML entities and CSS rather than by ignorance or laziness on my part.
Having had reservations for two years about the availability of Cooper Black as my original first choice font for major headings, I decided to replace it by the far more widely installed Georgia in October 2002. Since Verdana and Trebuchet MS were already my first choices for everything else, the whole site is now intended to render in these three ‘core web fonts’ (although, given guaranteed availability, I might now prefer the major headings in something like Lucida Bright).
Some bits and pieces on web typography I’ve found useful include Typefaces designed for the screen and More MS faces for the screen by Daniel Will-Harris, with Webmonkey’s Web Typography Tutorial by Nadav Savio and Why Type on the Web Is So Bad by Eric Eaton (which now seems to be AWOL) also good.
Further significant doubts about the wisdom of putting up with ‘feet’ marks for quotes and apostrophes when I wouldn’t tolerate them in print finally led to a simultaneous decision to start replacing them with what I thought were the ‘proper’ forms of ‘ and ’. But, while it was Netscape 4’s lack of support for these entities — not to mention others such as —, – and • — that initially held me up here, it seems ironic that I’m still considering the wisdom of adopting awkwardly-coded entities for typographic apostrophes and quote marks in place of typewriter equivalents for this site just as their use through automatic substitution in platforms like WordPress seems to be making them increasingly mainstream in places including my blog here and most of my other sites!
I’ve been using Xara Photo & Graphic Designer (formerly Xara Xtreme, Xara X and CorelXARA) for most of my graphic work (both on and off the web) for years. It’s fast, powerful, attractive to use and very modestly priced, has a useful range of import/export options, and you can download a free 30 day trial version. My site icons, page backgrounds (subtlely varied for music, sailing and photo gallery purposes), animated GIFs, Glencoe Boat Club course charts (imported as greyscale versions from Acorn Draw originals!) and various other things were created with Xara, and it’s even proved excellent for optimising JPEGs (on which note I must also mention IrfanView, which is both deceptively powerful and free).
I’ve enjoyed writing my own HTML right from the start, and all of my site until late December 2000 was written in Notepad and checked by Dave Raggett’s HTML Tidy. But that was before I discovered NoteTab Pro, which knocks Notepad into a cocked hat for power, and features integrated support for HTML Tidy (which I haven’t actually used for years now) to boot! Not to forget that I’ve got (or had!) a Linux box all set up for development, but don’t know gedit like NoteTab Pro and really ought to learn Emacs sometime... :-/
Feedback to webmaster@petestack.com
