origins

a brief history of cliffandrew.com.

i built this website in 2010, in adobe dreamweaver, out of two jpegs and a few invisible hotspots. sixteen years and a couple of jobs later, it's still up. here's a short tour before it gets replaced.

i. — exhibit a

the whole site, circa 2010.

behold. two jpegs and a thin grey rule. still served at cliffandrew.com today — at least until this site replaces it.

original 2010 main image — 'Cliff Andrew /contact.' with Facebook and LinkedIn icons
cliffandrew.com — original artwork 2010 — present
ii. — how it began

built in dreamweaver, on a long weekend.

it was 2010. the done thing for a personal site, when you weren't really a web developer, was to design the whole layout in photoshop, save it as a jpeg, and lay invisible clickable areas on top so that the parts that looked like links actually were.

that's exactly what this is. adobe dreamweaver, two exported jpegs, three invisible rectangles — one for facebook, one for linkedin, one for the email address — and roughly thirty lines of xhtml wrapping it all together. the whole thing weighs about 32 kilobytes.

the html still earnestly references an adobe spry menu and a twitter widget. neither has rendered correctly in years. both are politely ignored by every browser since around 2014. the email at the bottom, though — cliffandrew@gmail.com — has been routing to the same inbox the entire time.

iii. — a field guide to its quirks

things that were normal in 2010.

four design decisions that made perfect sense at the time and feel a little like archaeology now.

specimen 01

image maps.

the html <map> element, with rectangular <area> children, used to be how you made parts of an image clickable. cliffandrew.com (v.1) has three of them. visually invisible, completely unreadable to search engines, and now considered a serious accessibility anti-pattern. charming, though.

specimen 02

adobe spry.

spry was adobe's javascript library for adding tabs, accordions, and dropdown menus to dreamweaver-built websites. it had a brief, glorious moment around 2007–2010, and adobe quietly stopped supporting it in 2012. the site still loads its css file every time, faithful to a framework that no longer exists.

specimen 03

xhtml 1.0 transitional.

the doctype reads <!DOCTYPE html PUBLIC "…XHTML 1.0 Transitional…">. it was 2010's flavor of html — complete with self-closing <br /> tags and the lingering hope that the web would become more xml-shaped. (it did not.)

specimen 04

fixed at 931 pixels wide.

the "safe" content width when most monitors were still 1024×768. anyone with a wider screen gets a generous expanse of empty white background. anyone on a phone gets a horizontal scroll bar. this was, in 2010, considered fine.

iv. — the source

the entire site, in its entirety.

roughly thirty lines of xhtml. unedited. stray empty divs and all.

index.html — cliffandrew.com, 2010 ~1 KB · XHTML 1.0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>cliffandrew.com</title>
<link href="styles/ca_styles.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/ca_menu.css" rel="stylesheet" type="text/css" />  <!-- a framework no longer in existence -->
<link href="twittercss/new.css" rel="stylesheet" type="text/css" />          <!-- a twitter widget that no longer renders -->
</head>

<body>
<div id="container">

  <div id="banner"><img src="CA_02.jpg" width="931" height="266" alt="Banner" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="696,-7,875,65" href="http://cliffandrew.com/" target="_self" />
    </map>
  </div>

  <img src="main_image.jpg" alt="Main Image" width="931" height="634" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="789,391,822,423" href="http://www.facebook.com/cliffandrew" />
    <area shape="rect" coords="841,391,874,424" href="http://www.linkedin.com/in/cliffandrew" />
    <area shape="rect" coords="511,83,634,115" href="mailto:cliffandrew@gmail.com" />  <!-- still works -->
  </map>

</div>
</body>
</html>
v. — the ledger

what's stayed. what's gone.

stayed.

  • cliffandrew@gmail.com routing the same inbox since 2010.
  • cliffandrew.com renewed every year, mostly out of habit.
  • the general impulse to put something on the internet with my name on it.
  • that red badge it earned a place in the new design.

gone.

  • adobe spry deprecated 2012. r.i.p.
  • the twitter widget stopped rendering long ago. twitter, also.
  • the facebook profile still online. i am not.
  • 1024×768 the screen size everything was designed for.
  • 32 kb of jpeg as a defensible foundation for a website.

same address. new paint on the door.