General / All pages Fewer browser-specific CSS files: + Easier to maintain and bugfix + Quicker to add in new features (once, instead of 5 times) + No browser-sniffing required UPDATE: Having worked with the CSS, I'm coming to the conclusion that it would be best to have a base.css file with generic selectors in, then page-specifc .css files (news.css, front.css, sledging.css, etc) as these contain a fair few properties that only apply to limited areas of the site. There may be an ie.css added if other areas of the site don't want to play ball between browsers. Furthermore, the base.css can be broken down into 3 files (colours.css, layout.css, typography.css) - these would be stored as three files, but brought together by base.asp (with a text/css http header) and delivered as one file to the end-user (fewer http connections = quicker). I'll write a page up to explain this better. No JavaScript needed to load CSS: + No "bare" pages when JS is not available (incl. mobile phones) + JS is not a requirment to use the menu (better for those that have it disabled / unsupported Menu does not require JS to work + Uses CSS only - far more accessible - JS should NOT be required for navigation + Easier to maintain and update + Can still be extracted along with other header code into an external file, and included in templates. Eliminated frames: + Saves on data transfer + Gives quicker loading times + More accessible for some users, including those using mobiles = Changed structure of page slightly to give CSS hooks to copy what were the frame borders - Needs new image to put on bottom of page, for those with monitors taller than height of page - Ticker would currently reload on each page - May be solved with JavaScript / AJAX Valid and semantic (X)HTML & CSS + Ensures better visual cross-browser compatibility, including for future browsers, means less time bug-fixing + Allows for better search engine optimisation + Allows for better accessibility through supportive technologies (which might not be as forgiving as a "normal" browser) + Site can still be used effectively even with a text-only browser (no JS, no CSS, no images) + Can implement new technologies (microformats, XML delivery, etc) + Easier to move to new standards (HTML5, XHTML2) when suitable supported (years away yet) + No disadvantage to not being valid! Change to UTF-8: + Better support for "foreign" characters including the GBP (£) sign + Supported on non-Windows systems Improved Document Titles: + Added better description for the title element, to aid bookmarking and navigation. meta http-equiv="Content-Type" = Currently left in, but should be delivered by the HTTP header; at a higher level than the HTML document. May even be able to set server default for different extensions bt.js moved to bottom of page: + Quicker rendering of pages as HTML below JS cannot be parsed until the script is parsed + DOM manipulation via JS can only be done once HTML element is parsed into the DOM + Can be inserted with other footer elements template. Google urchinTracker() "bug" fixed # In Firefox with Adblock extension, (and also IE6?), urchinTracker code gives a warning (function not defined) + Bug is fixed, with no loss of functionality + Only writeFooter function needs to be changed. Removed JS + All JS can be aggregated and moved into external file - Demo pages don't have the JS functionality + Can see how the site works without it supported/enabled Typographical corrections + Apostrophes have been replaced where needed with entity ’ (right single quote) Will also do the same with ellipses (…) and various em and en dashes, and hyphens (see http://garyjones.co.uk/development/typography ) Specific Pages front.html (.asp in final version): = Kept the source order of content the same - "What is" section is good to be near the top + Moved JS into external files, as this moves content even further up the page. = Focus script could be made more accessible. =
should be written server-side *if needed*. + whatLink made into a normal link to another page (whatis.html), with unobtrusive javascript progressively enhancing the user experience by allowing the current behaviour. + Added semantic HTML via H1 and label elements. testcenter.html (rehash of front.html) = Tried changed away from tables for layout - content is NOT tabular data. Had to write the code and CSS from scratch, and am not convinced it's better. All things considered (I hate to be beaten), the table is the best solution here to sort the vertical-alignment. (See testcenter.html for CSS solution) whatis.html (can be .asp in final version): + Created a new page, so that users without JS can still access the What IS Battrick content forgotpw.html (.asp in final version): + Used whatis.html template to create + Added semantic HTML via label element contactus.html (.asp in final version): + Used whatis.html template to create Still need to make form elements semantically correct main.html: + Menu icons added as an example = Removed ad-specific code as not currently being used + Faster logo loading (see http://garyjones.co.uk/nl/testlogo.html) Future changes possible + Rebuild CSS from scratch, using reset-fonts-grids.css from Yahoo UI - even better cross-browser compatability, quicker to generate new templates + Take more advantage of cascading property, meaning less CSS hooks (class, id) needed - cleaner HTML, smaller file size, quicker load times, less server load + Split CSS into separate files - quicker to load on repeat page requests, easier to find selectors for certain areas + Merge some image files together, using CSS Sprites method to show - far less HTTP requests, giving quicker load times, less server load + Use .asp templates for HTML - quicker generation of new pages, content is separated (May already be used) + Elimination of JS as a REQUIREMENT - Allow forms to work without it (submitted via POST), then add JS unobtrusively via the DOM on top for those that support it + Move all JS to external files - cleaner HTML, moves actual content closer to top of page, giving better SEO, smaller file sizes, quicker load times, less server load + Move to XHTML 1.0 Strict, at least for the front-end - see reasons above for why being valid + Use new Google Tracker code - more statistical analysis + Re-structure the site, to use folders _css, _js and _img - the underscore prefix highlights that it's not a public folder, and puts it at the top of an alphabetically-sorted directory. 26-12-2007 Update: Currently doing a proof of concept (ahem, complete re-write) of rules.asp, so that it requires no AJAX to work, is more accesible, but should still have funky features for those with JS enabled. Just need to tidy the 1200+ HTML errors first....by hand.... joy ;o)