Old School Web Development Techniques

I've had this talk idea for a while now to go over 'Old School Web Development Techniques'.

Then, after a meetup with Todd Gardner, I remembered the idea, discussed with Todd, and he liked it.

Then, I put out a tweet and you all did a cracking job at replying :D

Here's a list of what we've gathered so far…

Thinking about old school web development techniques for a talk covering some of the following:

  • 1px.gif
  • Sliding doors
  • Rounded corners
  • Tables
  • Clear Fix
  • Calculating the box model
  • Floats
  • Using lots of JavaScript / jQuery where CSS can now be used
  • Liquid layouts
  • The golden layout
  • Image maps
  • Spritesheets
  • Flash headings with embedded fonts
  • Tiled backgrounds
  • Conditional includes
  • XHTML 1.0 strict
  • Skip intro
  • Images for letters
  • sIFR
  • Cufon
  • Web Rings
  • File extensions like HTM, PHP3, CGI, PL, etc
  • FlashKit
  • Websafe colours
  • Jake Smith
  • Netscape’s viewed source blinking any invalid markup
  • WAV files on page load
  • DHTML layers
  • Live changes to production over FTP
  • No version control
  • Best viewed in Internet Explorer 5.0
  • Best viewed at 480x360
  • Best viewed at 800x600
  • Best viewed at 1024x768
  • Hit counters
  • Frames
  • Flash/JS Nav menus
  • Table layouts with images for rounded corners
  • JS mouse trails
  •   everywhere
  • Snow particles
  • Image gradients in place of CSS gradients
  • Transparent PNGs in place of RGBA or backgrounds
  • Page background colours and table cell background colours not rendering the same
  • Repeating page background images with transparencies so the page background colour beneath it showed through
  • Carving large images up into loads of smaller images to load “quicker”
  • When Fireworks automated image slicing you thought photoshop 4’s days were numbered.
  • Keyword stuffing at bottom with white text on white background
  • Dean Edwards' IE7
  • MM_ImageSwap()
  • GoLive CyberStudio
  • spacer.gif
  • IE hasLayout property
  • Spinny logos
  • Netscape “thumpers”
  • Webrings
  • Text-only versions for people using Lynx
  • Search engine submission forms
  • flaming 🔥 logos
  • Flash
  • Image Slicing
  • IE Tan Hack
  • IE Holly Hack
  • jQuery png fix for IE6
  • zoom: 1;
  • Dreamweaver
  • Inline CSS
  • Font Tags
  • Proprietary IE filters
  • Haslayout, or as i used to call it, can haz layout.
  • Star hack
  • 960.gs
  • Faux columns. Y'know, a background image behind a container so it looks like both columns are taking the same full height?
  • Real Audio
  • Framesets
  • 216 colours web safe
  • VBScript
  • Java applets
  • WSIWIG editors
  • Drop shadow and bevels on everything when it was introduced in Photoshop 5.5
  • Curled up corner effects
  • Big chunky menu buttons with rollover effects to make it look like they had been pressed down
  • "Enter this site” landing pages
  • “This site is under construction” (with a men at work sign)
  • Using PHP and JavaScript to render headings like h1 in a fancy font before there were Web Fonts
  • Making text colors the same as bg colors for bad SEO meta data tactics
  • Canvas / Flash for fonts
  • 🚧 Under construction 🚧

Document Type Declaration

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd …">

Webmaster / GeoCities

1
[email protected]

Wap

1
<wml> <card id="main" title="First Card"> <p mode="wrap">This is page is optimized for the Nokia 3310.</p> </card> </wml>

Drop Shadows

1
2
3
<div class="shadow-box-top"></div>
<div class="shadow-box-content">Hello</div>
<div class="shadow-box-bottom"></div>

Blink, Marquee, Tables, Framesets, Inline Styles

1
2
3
4
5
6
7
8
9
10
11
<a href="javascript:void(0)">
<blink><marquee><font size="10" color="red">
<table>
<tr><td colspan="2">TABLES</td></tr>
<tr><td>FOR</td><td>LAYOUT</td></tr>
</table>
</font></marquee></blink>
</a>
<frameset>
<frame src="page.html">
</frameset>

Under Construction

1
<img src="Under%20Construction.gif">

Please reply with any others!


Like this post? Hire Me!