Simon Griffee · Design · Photography · Writing · Illustration

Websites

2015 December 2 · 13 minute read

A few websites I have made in the past.

International Plant Protection Convention website homepage sketch.

Sketch of the homepage with a drawing of Darwin who I imagined at the time would be a potential user of the site if he were alive.

  <a href="http://www.ippc.int"><img src="/img/work/InternationalPlantProtectionConvention.png" alt="International Plant Protection Convention website redesign." title="International Plant Protection Convention website redesign." width="532"></a>
  <p class="caption">Homepage.</p>

  <a href="/ippc/workarea/countryeditor/1.0/dashboard.html"><img src="/img/work/InternationalPlantProtectionConventionAdmin.jpg" alt="International Plant Protection Convention website redesign admin page." title="International Plant Protection Convention website redesign admin page." width="532"></a>
  <p class="caption">Admin page.</p>

  <a href="/ippc/work/texteditor/"><img src="/img/work/TextEditingSystem.png" alt="International Plant Protection Convention website redesign text editing system." title="International Plant Protection Convention website redesign text editing system." width="532"></a>
  <p class="caption">Text editing system.</p>

  <a href="/ippc/work/icons.html"><img src="/img/work/IPPC-Design-Docs-Icons.png" alt="International Plant Protection Convention design docs example." title="International Plant Protection Convention website design docs example." width="532"></a>
  <p class="caption">Design documentation page example.</p>
  
  <a href="http://ippc.int" title="Visit the International Plant Protection Convention website."><img src="/img/work/InternationalPlantProtectionConvention2015.jpg" alt="International Plant Protection Convention website 2015 redesign." title="International Plant Protection Convention website 2015 redesign." width="532"></a>
  <p><i>Latest version (2015), built with <a href="http://djangoproject.com" title="For perfectionists with deadlines.">Django</a> and <a href="http://mezzanine.jupo.org/" title="The best Django content management system.">Mezzanine CMS</a>.</i></p>
</td>
<td>
  <h2 class="title" id="ippc">International Plant Protection Convention</h2>

  <p><em>User experience design, graphic and identity design, <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript, user testing, debugging.</em></p>

  <p>The <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> is an international agreement on plant health to protect cultivated and wild plants by preventing the introduction and spread of pests.</p>

  <h3>Problem</h3>

  <p>The existing <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> site contained a wealth of information which was difficult to access in an unclear hierarchy. Navigation was difficult for visitors, content updates were complex for staff and the site lacked a visual voice.</p>

  <h3>Solution</h3>

  <p>I worked with <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> staff to produce a new <a href="http://www.ippc.int">www.ippc.int</a> design based on web standards. </p>

  <p>A design process was carried out which consisted of the following:</p>

  <ol>
  <li>Identify main site user groups</li>
  <li>Understand site content and organize it into logical sections</li>
  <li>Create wireframe and visual design mockups based on findings from the above</li>
  <li>Create code templates based on the visual designs</li>
  <li>User testing and modifications</li>
  <li>Site launch</li>
  </ol>

  <p>After the <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span>’s</acronym> main audiences were identified the information architecture was drawn out and a wireframe prototype was created which allowed direct use in a browser and better initial feedback.</p>

  <p>A visual design was chosen from a series of mockups which were presented to the <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> Secretariat. </p>

  <p>Site elements were separated into clean code consisting of semantic <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym> for content, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym> for layout and visual presentation and JavaScript for accessibility-enhancing behaviors such as text-resizing. Page templates using this code were produced for the <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> programmer to implement.</p>

  <p>I then created a custom backend administration interface design for the website which makes management and updates much easier for <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> and countries’ staff to use.</p>

  <p>User testing was carried out with www.ippc.int audience members and staff and modifications were made based on test results before, during and after the new site launch to identify and resolve problems.</p>

  <p>Throughout the project I worked closely with <acronym title="International Plant Protection Convention"><span class="caps">IPPC</span></acronym> staff both remotely and in the Food and Agriculture Organization offices which I eventually joined as a staff member.</p>

  <h3>Work Done</h3>

  <p>User experience design, graphic and identity design, <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript, user testing, debugging.</p>

  <p>See also:</p>
  <ul>
  <li>A <a href="/ippc/work/texteditor/">text editing system</a> I hacked together using existing tools to help people that were having formatting problems when publishing content.</li>
  <li>Example of a <a href="/ippc/resources/">wireframe</a> for an IPPC sister website</a>.</li>
  <li><a href="https://docs.google.com/document/d/1XPQTZtQ5ppJ-CFGo6pkAQY7BWygBgE4jyfjYxe8bMmE/edit?authkey=CNHC2MUF&amp;authkey=CNHC2MUF#heading=h.4tz8d1ohyaap">IPPC newsletter template in Google Docs</a></li>
  </ul>
  
</td>
Food News website homepage.
  <a href="https://news.ycombinator.com/item?id=6564878" title="Food News on Hacker News!"><img src="/img/work/food-news-on-hacker-news.png" alt="Food News website homepage." title="Food News on Hacker News!" width="532"></a>
  
  <img class="pull-right" src="/img/logbook/HotSprings.png" alt="" title="The ♨ glyph in the logotype is Unicode character 'Hot Springs' (U+2668) in the Miscellaneous Symbols Unicode block 2600-26FF." width="215" height="189">
  
  <p class="caption">Food News on the Hacker News front page. Below is the blog post announcing the project.</p>
  
  <p><strong><a href="http://food.hypertexthero.com">♨ Food News</a></strong> is a website to publish and discuss links about healthy sustainable food, ranked by readers. It uses <a href="https://persona.org">Mozilla Persona</a> for authentication and no passwords are transmitted to or saved on the <a href="http://food.hypertexthero.com">food.hypertexthero.com</a> server.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> The code is <a href="http://gitlab.com/simongriffee/fn">open source</a>.</p>
  <p>Links on the homepage are ranked using a <a href="http://blog.jupo.org/2013/04/30/building-social-apps-with-mezzanine-drum/#time-scaled-ranking">time-scaled ranking algorithm</a>. This means that both the time since a link was published (its age) and the amount of up-votes a link has received (its popularity) affect a link’s rating, so fresh, interesting links should be present on the homepage every day, especially if the site becomes popular. I.e. The <a href="http://food.hypertexthero.com/">homepage</a> lists the most recent links with most votes, while the <a href="http://food.hypertexthero.com/new/">New</a> page lists the most recently posted&nbsp;links. </p>
  <p>People publishing on Food News have a ‘karma’ number, which is a measure of their reputation on the site. Karma increases when a person’s links or comments are up-voted. Recent comments with most upvotes are listed in <a href="http://food.hypertexthero.com/best/">Best</a>.  </p>
  <p>Ideally, food lovers, as well as people with knowledge in food-related sciences and disciplines such as agriculture, animal health, biodiversity, climate, forestry, gender, plant protection, land tenure, nutrition, soils, water, etcetera, would use Food News to publish links and comments with good information about food to help us develop better eating habits that are less damaging to our planet and the species living on it, including us humans! Note that links to not-for-profit endeavours are preferred and that spam will be&nbsp;deleted.</p>
  <p>Thanks to <a href="http://blog.jupo.org/">Stephen McDonald</a> for <a href="http://mezzanine.jupo.org/">Mezzanine</a> and <a href="http://drum.jupo.org/">Drum</a>, upon which Food News is built, and to <a href="http://mkelly.me/">Michael Kelly</a> for help with a <a href="http://django-browserid.readthedocs.org/">django-browserid</a> <a href="https://github.com/mozilla/django-browserid/issues/205">issue</a>.</p>
  <p>Comments, criticisms and suggestions are welcome at the <a href="https://news.ycombinator.com/item?id=6564878">Hacker News</a> thread!</p>
  <p>—Simon</p>
  <!--[^1]: The ♨ glyph in the logotype is Unicode character 'Hot Springs' (U+2668) in the [Miscellaneous Symbols Unicode block (2600-26FF)](http://en.wikipedia.org/wiki/Miscellaneous_Symbols), which I am using in the text above. For the Food News site, I made a PNG image of it for reliable rendering across browsers. -->

  <ol>
  <li id="fn:1">
  <p>For a good explanation of how this works see the ‘How it Works’ section of James Bennett’s <a href="http://www.b-list.org/weblog/2013/sep/05/persona/">Personafied</a>.&nbsp;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>
  </li>
  </ol>
</td>
<td>
    <h2 class="title" id="foodnews">Food News</h2>

    <p><em>Web Application Hacking, Python, Django, <span class="caps">HTML</span>, <span class="caps">CSS</span>, JavaScript, Graphic Design.</em></p>

    <h3>Problem</h3>

    <p>No problem. I wanted to see if I could create a <a href="http://news.ycombinator.com/">Hacker News</a> clone with <a href="http://persona.org/">Mozilla Persona</a> for authentication. I had already made two attempts at this type of web application, one for <a href="https://gitlab.com/simongriffee/hir">Rome links and stories</a> and <a href="https://gitlab.com/simongriffee/dayzlog">another for a zombie apocalypse game called Day Z</a>, so I thought I’d do one for food while working at the Food and Agriculture Organization.</p>

    <h3>Solution</h3>

    <p>I hacked together <a href="http://food.hypertexthero.com/" title="See the Food News website.">food.hypertexthero.com</a> building upon the work of <a href="http://blog.jupo.org/">Stephen McDonald</a>’s <a href="http://blog.jupo.org/2013/04/30/building-social-apps-with-mezzanine-drum/">Drum</a>, which was itself built upon his own excellent <a href="http://mezzanine.jupo.org/">Mezzanine content management system</a>.       <p>Food News was the first thing I made that appeared on the front page of <a href="https://news.ycombinator.com/item?id=6564878">Hacker News</a>, which was exciting for me!</p>

    <h3>Work Done</h3>

    <p>Web application hacking (<a href="http://python.org" title="Elegant, beautiful to use and to read.">Python</a>, <a href="https://www.djangoproject.com/" title="For perfectionists with deadlines.">Django</a>), <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym>, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript and graphic design.</p>

        <p>The ♨ glyph in the logotype is Unicode character &lsquo;Hot Springs&rsquo; (U+2668) in the <a href="http://en.wikipedia.org/wiki/Miscellaneous_Symbols">Miscellaneous Symbols Unicode block (2600-26FF)</a>, which I am using in the text above. For the Food News site, I made a PNG image of it for reliable rendering across browsers.</p>
  
</td>
Homepage. Software overview page.

Lightcrafts Photo Editing Software Wireframes

Wireframe Visual Mockups

Some wireframes I made for a proposal to redesign the Lighcrafts Lightzone image editing software website.

IPPC IT Wishlist website about page.
  <img src="/img/work/ItWishlistHome.png" alt="IPPC IT Wishlist website homepage." title="IPPC IT Wishlist website homepage." width="532">

  <img src="/img/work/ItWeeklyReport20140328.jpg" alt="IPPC IT Wishlist website page." title="Another IPPC IT Wishlist website page." width="532">

  <img src="/img/work/ItWishlistPost.png" alt="IPPC IT Wishlist website new post page." title="IPPC IT Wishlist website new post page." width="532">

  <!--<img src="/img/work/ItWeeklyReport20140530.jpg" alt="IPPC IT Wishlist website page." title="IPPC IT Wishlist website page." width="532">-->
</td>
<td>
    <h2 class="title" id="itwishlist">IPPC IT Wishlist</h2>

    <p><em>User Experience Design, Interaction Design, Back End and Client Side Web Development (Python, Django, <span class="caps">HTML</span>, <span class="caps">CSS</span>, JavaScript), Graphic Design.</em></p>

    <h3>Problem</h3>

    <p>The <a href="https://www.ippc.int">International Plant Protection Convention</a> needed to a better way to organize, manage and produce its IT work to better support its mission.</p>

    <h3>Solution</h3>

    <p>I hacked together a <a href="https://gitlab.com/simongriffee/itwishlist" title="The source on GitLab.">web application</a> where anyone in the team could post a bug report or feature request and also vote on others’ posts, thus creating an <a href="http://agilemanifesto.org/" title="Manifesto for Agile Software Development.">agile</a>, organic todo list.</p> 

  <p>In addition, I made:</p> 

  <ul>
  <li>A <a href="https://gitlab.com/simongriffee/itwishlist/tree/master/apps/fileupload" title="See the horrible source code.">file upload system</a> where people could drag and drop files directly onto the browser window and upload many files at once instead of spending lots of time uploading files one by one using the existing system. A lot of extra time spent in front of computers was saved, which made many people happier.</li>
  <li>A <a href="https://news.ycombinator.com/">Hacker News</a> clone to <a href="/logbook/2013/10/intro-food-news/" title="Read the announcement in the Logbook.">post links about food</a> called <a href="/design/websites/#foodnews" title="Not online any longer, but you can read about it and see the source code.">Food News</a> which used <a href="http://persona.org/">Mozilla Persona</a> for authentication. It is no longer online, but you can check out <a href="https://gitlab.com/simongriffee/fn">the source code on GitLab</a>.</li>
  <li>A <a href="/design/websites/#fafaq" title="The fucking accessible FAQ!">f_cking accessible <abbr title="Frequently asked questions.">FAQ</abbr> page</a>, inspired by Joe Pesci in the film <i>Casino</i>.</li>
  </ul>


    <h3>Work Done</h3>

    <p>User experience design, interaction design, web development (<a href="http://python.org" title="Elegant, beautiful to use and to read.">Python</a>, <a href="https://www.djangoproject.com/" title="For perfectionists with deadlines.">Django</a>, <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym>, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript), graphic design.</p>
  </div>
</td>
Simple web typography template (HTML and CSS).

Web Typography Template

  <p><em><span class="caps">HTML</span>, <span class="caps">CSS</span>, Georgia Typeface</em></p>

  <p>Good design involves <a href="/logbook/2012/04/web-design-where-to-begin/">good writing</a> and good typography. To offer the latter to anybody looking to make reading easy on a web browser or a mobile device I <a href="/typography/" title="See an example of the typography template.">made an HTML &amp; CSS template using the first chapter</a> of Olaf Stapledon’s <a href="https://ebooks.adelaide.edu.au/s/stapledon/olaf/star/" title="The author of Star Maker.">Star Maker</a> as example text.</p> 

  <p><a href="https://gitlab.com/simongriffee/typography/" title="Public domain. I.e. Use it for whatever you wish, including the making of money. Modify it as you wish. No need to credit me.">Here’s the HTML and CSS code</a>.</p>

  <p>A <a href="http://hypertexthero.github.io/roboto-typeface-template/">a template using the Roboto typeface is also available</a>.</p>

</td>
About This Particular Macintosh.
  <p>ATPM cover designs:</p>
  <p><img src="/img/work/atpm-001.gif" alt="The ATPM cover depicts the word 'Macintosh' in red, blue, and yellow bold letters emerging from a tangle of grey lines." title="The ATPM cover depicts the word 'Macintosh' in red, blue, and yellow bold letters emerging from a tangle of grey lines." height="280" width="420"></p>

  <p><img src="/img/work/atpm-004.png" alt="The November 2010 ATPM cover is a drawing of an Adobe Flash cage being opened by CSS, JavaScript and HTML5, releasing the open web." title="The November 2010 ATPM cover is a drawing of an Adobe Flash cage being opened by CSS, JavaScript and HTML5, releasing the open web." height="280" width="420"></p>

  <p><img src="/img/work/atpm-002.png" alt="The ATPM cover is a cartoon of a person playing videogames on a Windows harddrive from the comfort of their Macintosh HD." title="The ATPM cover is a cartoon of a person playing videogames on a Windows harddrive from the comfort of their Macintosh HD." height="280" width="420"></p>
</td>
<td>
    <h2 class="title" id="atpm">About This Particular Macintosh</h2>

    <p><em>Website design</em></p>

    <h3>Problem</h3>

    <p>About This Particular Macintosh (<span class="caps">ATPM</span>.com) is an online magazine which <del>has been</del> <a href="http://atpm.com/18.05/publishers-letter.shtml">was</a> around since the beginning of the Web in 1995. The magazine symbolizes one of the best qualities of the internet: free content by a passionate community of volunteers. </p>

    <p><span class="caps">ATPM</span>’s design needed some refreshment to be brought up to date with modern web design techniques whilst keeping the familiar look and feel. I took the job.</p>

    <h3>Solution</h3>

    <p>I worked with <a href="http://mjtsai.com/" title="Mjtsai.com">Michael Tsai</a> and Christopher Turner to create a new <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>-based layout, with more generous whitespace and other graphical refinements. The new layout and  semantic markup also reduced the site’s file sizes by almost half.</p>

    <h3>Work Done</h3>

    <p>Graphic design, <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>. </p>

    <p><a href="http://atpm.com" title="ATPM.com">Visit site →</a></p>
</td>

A screenshot of the FAQ.

F*!@#$% Accessible FAQ

    <p><em>Web page</em></p>

    <h3>Problem</h3>

    <p>When a question is asked I want to be able to easily select and send a link to an answer located in a single HTML page. The answer should also be visible with JavaScript disabled.</p>

    <h3>Solution</h3>

    <p>An accessible FAQ page was created. See <a href="/faq/">an example</a> and the <a href="https://gitlab.com/simongriffee/F-Accessible-FAQ#deployment" title="On GitLab">source code</a>.</p>

    <h3>Work Done</h3>

    <p><span class="caps">HTML</span>, <span class="caps">CSS</span>, JavaScript hacking.</p>
</td>
PastaClock.com

Pasta Clock

  <p><em>Graphic design, website and application design, copywriting</em></p>

  <h3>Problem</h3>

  <p>Overcooked pasta.</p>

  <h3>Solution</h3>

  <p>I worked with <a href="http://simongriffee.com/jimmyboss/" title="The Boss!">Jimmy Boss</a> to cobble together a web application that helps everyone cook pasta <em>al dente</em> rather than <em>al mush</em>.</p>

  <h3>Work Done</h3>

  <p>Graphic design, <acronym title="Hypertext Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript hacking. <a href="/pastaclock/" title="PastaClock.com">Visit application →</a></p>

</td>
Cantos.com landing pages.

Cantos

Website Design

    <h3>Problem</h3>

    <p>Cantos needed to attract new visitors interested in online business video to their website. An audience accustomed to seeing a great deal of financial information on a daily basis proved to be a challenge.</p>

    <h3>Solution</h3>

    <p>Simon worked together with a marketer to create a group of clear, modern, accessible <span class="caps">HTML</span> landing pages targeted by a focused Google Ad campaign. The landing pages succeeded in bringing a large number of new visitors to explore Cantos’ services with very high impression-to-click rates.</p>

    <h3>Work Done</h3>

    <p>Graphic design, <acronym title="Hypertext Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, <acronym title="Content Management System"><span class="caps">CMS</span></acronym> templates and implementation. </p>
</td>
Australian Postgraduate Study in Plant Biosecurity Program website design.

Australian Plant Biosecurity Program

    <p><em>Website Design: Graphic Design, <span class="caps">HTML</span>, <span class="caps">CSS</span>, JavaScript, <span class="caps">CMS</span>, Forum</em></p>

    <h3>Problem</h3>

    <p>The Plant Biosecurity Program of the Australian Government needed a website to promote a postgraduate course in plant biosecurity offered by a consortium of Australian universities.</p>

    <h3>Solution</h3>

    <p>I created a new design, coded the markup and stylesheets and implemented a <acronym title="Content Management System"><span class="caps">CMS</span></acronym> for the program staff to update the website as well as a private forum for student discussion. The website art direction uses imagery from <a title="The Endeavour Botanical Illustrations online exhibit at http://www.nhm.ac.uk/." href="http://www.nhm.ac.uk/jdsml/nature-online/endeavour-botanical/"><em>The Endeavour Botanical Illustrations</em></a> online exhibition currently at the <a title="http://www.nhm.ac.uk" href="http://www.nhm.ac.uk">Natural History Museum</a>.</p>

    <h3>Work Done</h3>

    <p>Graphic design, <acronym title="Hypertext  Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>, JavaScript, <acronym title="Content Management System"><span class="caps">CMS</span></acronym> implementation, User Forum implementation.</p>

    <p><a href="http://plantbiosecurity.edu.au/" title="Postgraduate Study in Plant Biosecurity Website">Visit site →</a></p>
</td>
Website for Angelo Paionni.

Photographer Angelo Paionni

    <p><em>Website</em></p>

    <h3>Problem</h3>

    <p>A photographer wanted to show his work online.</p>

    <h3>Solution</h3>

    <p>I created a website.</p>

    <p></p>

    <h3>Work Done</h3>

    <p>Graphic design, web design &amp; development. </p>

  <a href="http://www.angelopaionni.it/">Visit site →</a>
  
</td>
Descriptedlines : A website for a writer to write and readers to read.

Descriptedlines

    <p><em>Website design</em></p>

    <p>A writer needed a website to publish her writing, so I made one.</p>

    <p><a href="https://amberpaulen.com/descriptedlines/dostoevsky-s-madnesses" title="Descriptedlines.com">Visit site →</a></p>
</td>

Imaginary Lines

    <p><em>Website design</em></p>

    <p>I was <a href="/logbook/2013/09/the-function-of-education/" title="The Function of Education.">reading</a> a <a href="/logbook/2013/04/what-do-you-think-of-indians/" title="What do you think of Indians?">lot</a> of <a href="/logbook/2013/02/on-the-occasion-of-joseph-ratzingers-resignation/" title="Truth is a pathless land.">Jiddu Krishnamurti</a>, so I made a website to write and link to things concerning conflict caused by division caused by fear. Borders, nationalism, organized religion and so on.</p>

    <h3>Work Done</h3>

    <p>Graphic design and web design.</p>

    <p><a href="http://simongriffee.com/imaginarylines">Visit site →</a></p>
  
</td>
A graphic depicting the PID Server website.

Plant Treaty Internal Website

  <p><em>Website design</em></p>

  <h3>Problem</h3>

  <p><a href="http://www.itworks.it/" title="www.ITWorks.it">IT Works</a> was working on a website that helps the <a href="http://www.planttreaty.org/" title="PlanTreaty.org">International Treaty on Plant Genetic Resources for Food and Agriculture</a> (<span class="caps">ITPGRFA</span>, phew!) do its job of facilitating the sharing of plant genetic resources among countries around the world. </p>

  <p>IT Works needed the client-side of the website to be as easy to use as possible for an audience spread across most of the planet using a wide variety of computer systems and of varying computer skills.</p>

  <h3>Solution</h3>

  <p>I designed the front-end for the <span class="caps">ITPGRFA</span> internal website. An easily customizable site was made and built on a foundation of web standards with maximum usability, accessibility and simplicity. This ensured the site was as usable to someone with a modern computer and a <span class="caps">DSL</span> connection as to someone with an old machine and a 14400 bit/s modem.</p>

  <h3>Work Done</h3>

  <p>Graphic design, <acronym title="Hypertext Markup Language"><span class="caps">HTML</span></acronym> markup, <acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym>.</p>
  
</td>

What

Send