Lab Notes
Lab notes is a diverse collection of subjects relevant to web
design. Most will be single page issues, a few may be longer.
Some topics are based on questions which originated on forums and
for which an explanatory page seemed to be required.
In the case of 'layers' and 'links' I felt that there was a lack of
readily available information consolidating the material that a
designer might need so I have made attempts to remedy that.
Initially, at least, the notes will have a bias towards issues
related to using the KompoZer web authoring package but many
of the issues will have a wider application.
Design approach
At the moment Lab Notes is the most active part of my site. Over the
years I have refined my approach to design a little and so lab Notes
reflect my latest. Perhaps a summary may be of interest.
I would describe my site as simple. Pretty well straight HTML and
CSS — no dynamic images, php or cms and very little scripting.
I basically design for standards-compliant browsers using Firefox as
reference then check and correct for deficiencies in IE6 and 7 with a
final check with Safari and Opera. Corrections for ie are made using
the ie7 script and Targeting techniques detailed on other pages here.
Finally, of course, the HTML and CSS is validated using the W3C
validators.
I am mostly using HTML 4.01 and CSS2.1. Browsers are starting to
support CSS3 so I have started to use a few which find useful. My
criteria would be that they must be supported by the browsers listed,
possibly with the assistance of the ie7/8 script. I am prepared to
accept a little degradation of rendering on IE6 and 7 if the damage is
not serious and IE8 renders correctly.
Although I suppose most of my visitors will be using fair sized
screens I also want to cater for other sizes. All pages have fluid
width with the maximum measure set to about 60em so that lines do not
become unreadably long. By using the IE7 script I can set a maximum
width even with IE6. Similarly I try to design so that pages to be
satisfactory on screens as narrow as 800px.
I have never made much use of scripts. Though I have just admitted
to adding a new one I have now virtually eliminated all others. The one
I was using to provide fly-out panels on some menu items has now been
replaced by CSS. This will of course be better for the few who have
disabled scripts but, more importantly, it reduces the amount of html
required so cleans up the source code significantly.
Many argue that menus are essentially lists of links and as such
should be implemented using list elements. I have never fully agreed
with this, I mean the 'should be' bit, but I have now decided to make a
change. Up to this, my menu buttons were constructed using
sibling divs but I have now switched to unordered lists. There is no
more code and, because at the same time
I switched from scripts to CSS for the flyouts, the code has actually
reduced and become much cleaner.
I
continue to abhor inline styles. As routine they are retained only for
images where the alternatives are even more difficult to maintain.
Classes are retained where particular features are required repeatedly
e.g. display boxes, floats. My preferred method is however to set up a
set of rules using descendent elements as selectors. Once the
stylesheet has been written styles are invoked automatically as the
html is written with just the occasional id or class thrown in. Magic!
Having written a page on improving links I have improved the ability
to navigate the area by keyboard without a mouse.
Most people will probably use the site on screen where it is fully
navigable. Occasionally people may prefer paper copies. There seems to
be a fundamental mismatch between screen-based and page based material
but CSS does provide properties for paged media and browser
support for these is improving (though in my experience not as well as
some surveys suggest). Sometimes one browser will print a page better
than an other at other times the situation will be reversed. I have
tried to offer the best support I can.
As it says below the menu this site designed using KompoZer. Mainly version 0.7.10
which is the latest solid version. That is used for wysiyig and source
code editing and also for stylesheet creation. At some point I move the
stylesheet to a text editor, that allows me to add comments and the
CSS3 content. For publication I use the Firefox FireFTP addon.
I always have Firefox equipped with Marc Gueury's HTML Validator. It
just sits in the background and its little green tick almost guarantees
that the page code is valid HTML. However it finds many problems that
the W3C validators miss like empty elements so is invaluable in helping
to clean up pages.
I implied the need to test on multiple versions of IE. I have been
doing this using Joe Maddalone's Multiple IE from TredoSoft. For IE8 I am
at present using Core Services IE Tester
though as IE8 is fully deployed this combination will need revision.
Other useful Firefox addons are the web developer
toolbar and Firebug. I
find these most useful when troubleshooting though the web
developer toolbar allows you to see what the page will look like on
different sized screens.
Enjoy
