Home
What’s New?
Site Map
Music
Sailing
Climbing
Hill Running
Kinlochleven
Web DesignFor 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 July 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 also finds its way onto my What’s New and associated Update History pages)...
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 Dan’s Web Tips is another thought-provoking and invaluable repository of the sort of tips and advice we could all use but can’t always find. For the definitive specifications, however, all roads eventually lead to the World Wide Web Consortium, which is not only home to most of the official web standards (eg HTML, XHTML and CSS) but packed with other useful resources such as their Markup Validation Service (which I still use all the time!) and Dave Raggett’s concise tutorials and handy HTML Tidy (which factored heavily in the early days of this site).
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 have bought a number of web design, programming and OS reference books over the years. But the three (so far!) that have particularly inspired me where web design is concerned are 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 there are admittedly still some deprecated elements kicking about from Netscape 4 ‘compatibility’ days, they’re being vociferously weeded out as new design work of a global nature (eg the revamped main menu) touches the older pages. Speaking of which, the music pages have now (22 July 2007) become the first to go XHTML 1.0 Strict as, inspired by Elizabeth Castro’s Bye Bye Embed article at A List Apart, I’ve 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 (as I write this paragraph in August 2006 and revisit it in July 2007) I’d say that, 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 my use of XHTML and CSS is also naturally still improving (to the extent that I’d long regarded much of the coding behind this site — which was my first — as cumbersome/inelegant before finally finding the necessary time and inclination to excise some of the worst of it through a ground-up overall of the main menu!). But, despite understanding that XHTML served as text/html isn’t really being treated as XML at all, I’m still trying to suss out the full implications of XML declarations (sure, I’m supposed to use them if I’m not using UTF-8, but don’t they trigger quirks mode in IE?), XHTML media types (so why does the W3C’s XHTML 1.1 Conformance Definition state that ‘XHTML 1.1 documents SHOULD be labeled with the Internet Media Type text/html as defined in [RFC2854] or application/xhtml+xml as defined in [RFC3236]’ when their Note on XHTML Media Types states that they should not be served as text/html?) and all that jazz with regard to non-conforming browsers and what happens when they get it wrong...
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 for our high school site, but removed the links to most of these in 2005 because they had either run their course or been mothballed due to lack of further development. However, I’m still working on different projects like the new Impala 28 Class Association site (first ‘public’ airing 3 February 2007), and the creation of my new Petestack web design section in July 2007 has given me the opportunity to restore some of the old designs (mostly in intentionally reduced screenshot form) to an archive here.
While I’ve been working with a 20" TFT-LCD at 1600x1200 since November 2007 (and 19" CRT at 1280x960 before that), I don’t always browse full-screen at these resolutions 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. And I test my sites in windows of all shapes and sizes, not ignoring the effects of varying heights but focusing primarily on the trickier problems of keeping them usable at 800px width, balanced at 1024px and not too empty at 1152px and beyond. On which note I might point out that my ‘current’ and ‘archive’ screenshots represent standard 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 (which explains why I’ve left the bottom status bars visible)!
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 I’d naturally prefer to be writing strict XHTML (still using the transitional doctype as I write this, but most of it validates as strict!) and controlling its presentation entirely through CSS than cooking up anachronistic fudges for Netscape 4, and it’s difficult in that respect to look back at my decision to stop supporting version 4 browsers in late 2002 with any real regret. But anyone who suspects me of equating ‘valid’ with ‘problem free’ or ‘standards-compliant’ with ‘safe’ can rest assured that my ‘test bench’ (influenced by my site stats) still includes recent versions of Firefox (my browser of choice on both Windows and Linux), Internet Explorer (still trying to accommodate IE 5.0 in 2007!), Opera (sometimes making use of its development tools and emulation modes) and even (from July 2007) the new Windows Safari.
Something I should perhaps make clear is that I’m aware that I haven’t made any attempt to provide separate stylesheets for any media (eg handhelds) bar standard computer browsers. But I might also point out that I have absolutely no evidence of a significant audience on such devices (typically just a few hits per month from PDAs over the first half of 2007), so please feel free to tell me if the lack of a dedicated stylesheet is driving you away! And I must also observe that I know about pixel font sizes and text scalability in IE (not quite such a problem now IE 7 does zooming?), but still have my reasons for specifying pixels for this site.
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 have always been 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’d probably now prefer the major headings in Lucida Bright).
Some bits and pieces on web typography I’ve found useful include:
But I simply couldn’t stop myself linking to some less web-specific ‘pages’ as well:
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 might have to revisit this whole area sometime having since discovered that they’re not safe for XHTML served as application/xhtml+xml either!
I’ve been using Xara Xtreme (formerly 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).
A comprehensive support site for Xara users is maintained by Gary Priester at xaraxone.com, to which I might add the user forums at TalkGraphics and (now sadly defunct) Pixelparity as useful sources of information.
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 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 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
