Restoring your long-lost web site & making it mobile-friendly: easier than you think!

Joined
Jan 14, 2011
Messages
3,133
Location
St. Louis
Have you let your old web site expire and would like to get it back? It's easier and cheaper than you think. For most of you, you might be able to do this with only a couple of evenings or Saturdays of work! Don't be intimidated if you had a huge, complex site. Start "basic" to just get your best/core work online, and add complexity later. Register a domain for 10-20 bucks, then ten bucks a month should get you a good hosting plan for it.

Search engines and users today like good content and a clean look, not necessarily complex or flashy designs. A one-column site with text and pictures is perfectly fine - that's going to be SEO and user friendly, which is what you want with today's web. Remember that more than half of your traffic will come from tablets and phones!

CMS and gallery systems

If you don't want to deal with html and just want to get a photo gallery back online, a simple route is to use a service like Zenfolio, Wix or Smugmug. With these, you can register a domain name and point it to that account, and use their systems to manage the site. With the ZF and SM gallery sites, you have the added bonus of being able to sell prints. You can use Archive.org's Wayback Machine to retrieve old chase accounts to go with the images so you won't need to retype things from memory. Don't forget, you can use Stormtrack to host your (reasonably sized) gallery!

Restoring an old site

Step 1: Download and install necessary software

These are shareware apps that have the functionality you'll need. This is not a paid endorsement or anything like that, just the ones I've used:

  • TextPad: Good way to edit your html code.
  • Advanced Find and Replace: This allows you to make global changes in the html code on every page of your site, without having to open every page and do it manually.
  • WinSCP FTP: For uploading your files to your web server

Step 2: Retrieve your site from archive.org's Wayback Machine

  • a.) Make a folder on your computer for your old site.
  • b.) Go to http://archive.org
  • c.) The Wayback Machine likely has your entire site saved. You can choose which date/edition of your site to retrieve. Simply enter your old URL into the field, choose the date, and volia, each page of your old site can then be saved by choosing File > Save for each page!
  • d.) You may have to "right click > save as" individual images on each page if you don't have those backed up anywhere.

Step 3: Remove the archive.org path in the hyperlinks and image tags

Use the find and replace software to remove archive.org's code from the page's links and image calls. Each link and image tag will have URLs like this:


Simply put the "/web/20011031051442/" (the exact code will be different than this, just copy what's there in your pages) into the find-and-replace software and leave the "replace with" field blank. This will remove all instances of the archive.org code and make your site work on a web server again. If your old domain is no longer available, you can use the find-and-replace software to change everything to your new one.

Step 4: Make your site mobile-friendly

The easiest way to make your site mobile-friendly is to move to a single-column layout with navigation links at the top and bottom of each page. Again, use the find-and-replace app if all of the code is the same at the top and bottom of your pages.

a.) IMPORTANT: Add this Meta tag code somewhere within the header (<head></head>) tags at the top of the page. This has to be there or else the adaptive styles below won't work on phones or tablets.

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">

b.) Wrap your page content in an "adaptive" div or table with this code (change 1000px to whatever pixel size you want your site to be on a desktop computer):

<center><table border=0 cellpadding=10 cellspacing=0>
<tr>
<td style="width:100%; max-width:1000px;">

Your page's content

</td>
</tr>
</table></center>

OR

<center><div style="width:100%; max-width:1000px; padding:10px;">

Your page's content

</div></center>

c.) Add adaptive code to all of your images:

<img src="my-picture.jpg" style="width:100%; max-width:700px;">

Change 700 to whatever the actual width of the full-size image is. This makes all images scale down to any screen size.

Make sure that ALL images on the page have this adaptive code, otherwise the page won't scale down on smaller screens.

Step 5: Upload the files

Use the FTP software to upload your files. If you had an old site, you probably are familiar with this already.
 
Last edited:
I kind of like Smugmug. It's reasonably priced, efficient, fast, fairly customizable, and not too difficult to master. Plus they provide free smartphone apps for mobile access. Also they provide a very clean Lightroom plugin to manage uploads and edits without a lot of "processes" and hoops to jump through if you decide to edit a photo. And they also support videos.
 
Back
Top