Getting it right

I have made the occasional remark about page design and use of html here and there, and received the occasional question about these things, but only very recently it dawned upon me (in fact it was just a few hours before dawn) that it would be handy to have all these remarks in one place, all for the sake of better web pages and better pictures.
For now things will be a bit messy and minimalist here, but I hope to get things completely right as soon as possible. If you have any urgent questions about page design and handling graphics, let me know:
.

Scanning tips

Is scanning difficult? Does it take years of experience and boundless knowledge? No. It's more about using the right material (at least a flatbed scanner) and finding out some easy tricks:

  • I scan at 240 (A4 and A5 pictures, or for the Americans: about the size of a Vogue page, respectively half the size of that) or 300 (smaller) dpi. Scanning at plus 600 dpi s often pointless, because
    • at 300 dpi most files are big enough to fill up nine or sixteen monitor screens put together.
    • many scanners scan at max. 300 dpi anyway; any higher dpi is achieved by resizing after the scan - which is about the same thing you can do in your graphics program.
  • While scanning I try to keep out stray light from outside and behind the paper with thick black paper. When scanning light pictures on thin paper, you often get the picture on the back side as an unwanted bonus. Black paper helps.
  • Also it's best to lay the picture is in line with the axis of the scanner, or 90/270 degrees tilted.
  • Important: on the (rather large) result you can use the blur or slight blur filter, so you can resize it without creating a 'moiré' effect. This is not needed when scanning from your own photo prints, or possibly when scanning a picture using a DPI higher than the real max. of your scanner (scanning at the software induced level of 400 DPI on my older max. 300 DPI created a natural blur which also prevented the moiré).
    My new scanner (a ca. 150 dollar Acer Prisa 620 that can handle slides and negatives too) has a 'de-screening option in the TWAIN driver software. If you have this, experiment with it, because for higher DPIs this might be more effective.
  • Usually I keep that copy, but for the web or for friends I create a resized copy of 800 or 600 pixels high, depending on composition and subject-matter.
  • I use more or less the default settings of my scanner, but in 'Quality' mode.
  • That's all there is to it really ...

Mikhail's Toolkit

Now and then people ask me what programs I'm using. O.k., here they come:

  • Frontpage 2002. Very pricey for a first time user, but I got value for money. Unlike Frontpage Express and the Netscape Thingy very stable, and saves lots of time if you have a lot of web editing to do. Wysiwyg editing and editing in raw html, great interface and no sneaky tampering in existing code. One definite minus: installing it might floor any Office '97 app in the neighbourhood, terminally.
    It keeps track of which files should be sent to your website because they're new or changed, and then ftp's them for you. The separate Upload Wizard of Microsoft might do the same, I don't know. For emergency cases I still have a free version of CuteFTP (thanks, Tripod).
  • Irfan View. For quick and dirty viewing and converting of picture. Freeware, highly recommended. For viewing anything else:
  • Quick View. Not free, unless you happen to be a Corel WordPerfect user. (It's more or less hidden on the cdrom, and won't show up in the installer. Don't ask me why.)  Time-limited trial version available.
  • Thumbs Plus. A program to manage my vast picture collection, but it also makes thumbnails pages and is also very good in filtering, resizing, cropping, adding marks and in general actions that concern the complete picture. Also a starting point for making scans. Leaves Jasc Mediacentre and anything I've seen like it dead in its tracks. Shareware.
  • Paintshop Pro (v7). Started off as a basic viewer and image converter, but now great fun as a drawing program. If Photoshop is too much for you, this might be your Swiss Army knife for graphics editing. I tried several versions of Corel Photopaint (up to v8), but that's too unwieldy and unstable for me.
  • Cathy. A no-frills, text-only database to keep an eye on the files on my Zip-disks, main picture directories and CDroms. The latest version also looks if there is some space left on them (not on the CDroms of course). Freeware.
  • Oh, and I use a virus scanner. Definitely.

Some basic dos and don'ts

Follow these few obvious tips, and you're pretty on the way to a very accessible website.

  • Keep your opening page small and simple. No large graphics, no JAVA or Basic wizardry. Tell the people what your page is about, and link them to the rest of your site.
    Personally I don't see much point in those 'Hi, this is a fur page. Click here to enter' pages - if that's all you have to say, you may as well include the linked contents. Of course, it's different if you want to warn people for explicit content.
  • To me pictures can never be large enough, but put anything up from 20 Kb behind a thumbnail.
  • Avoid advanced technologies if you don't really, really know what you're doing: apart from the risk of serious mistakes or blockades to users with older or smaller machines, many are plagued by incompatibilities that require heavy reading in those bricksized manuals and computer books to cure, if they can be cured.
  • A dislike: 'Galleries' where you have to crawl from picture one to picture two to picture three. Of course, commercial sites love this, as this forces you to see everything if you want to be sure you don't miss anything good. Instead, put your thumbnails together on one page, so people don't have to download what they don't care for.

Frames

If you use frames, include the links to your framed pages on the frameset pages between <noframes></noframes> tags. This is much more easier than it sounds (see the source of my own index.htm file how to do it:

<HTML>
<HEAD>
<TITLE>
Mikhail's Soft Spot
</TITLE>
</HEAD>

<FRAMESET frameborder="0" border="NO" framespacing="0" rows="105,103%">
<FRAME marginwidth=
"0" marginheight="0" src="header.htm" name="header" noresize scrolling="no">
<FRAMESET cols=
"150,100%">
<FRAME marginwidth=
"0" marginheight="0" src="ind.htm" name="ind" scrolling="auto">
<FRAME marginwidth=
"0" marginheight="0" src="welcome.htm" name="content"
>
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
If you are looking at this text in your normal browser window, your browser is not enabled for frames. ... Blablabla .... For questions, remarks and criticism regarding Mikhail's Soft Spot, contact <A href="mailto:mikhailk@geocities.com">mikhailk@geocities.com</A>.
</P>

<P>
<A href=
"welcome.htm">Welcome</A>! (General information, recent changes, counter, webring)<BR>
<A href=
"mssidea.htm">Looking for ideas</A><BR>  ... etc., etc.

</BODY>
</NOFRAMES>

</HTML>

I hope this helps!

Graphic Formats

  • JPEG or .jpg. The picture format most used on the web. It has the best compression, but at a price: every time you save it, the new copy has lost some of its information. Usually this loss is neglectable, but have a close look at some of the pictures that are around, and you'll see that a copy of a copy of a copy is something to avoid.
    Proper graphics programs allow you to adjust the compression rate: 75 to 80 % quality (or 25 to 20 % compression) should get it right. Don't be surprised if the subtler shades of fur turn into a one-colour blot, or if the glitter on a ring disappears though. But that can even happen at 90 % quality. Which is what I use, but I am a data junkie.
  • Gif or .gif. In some cases - e.g. ultra small pictures like the 'buttons', 'banners' or `arrows' you see on many pages - Gif pictures are smaller than jpegs. Gifs are limited to 256 colours in one picture. That seems a lot, but in a real multicolour picture, some parts are bound to suffer. A larger gif-picture is more often than not larger that a Jpeg of the same size. Only use these for the mention buttons and banners.
  • Animated gif.  The same as above, but several pictures combined in one file to form an animation. Most of them are a waste of bandwidth and processor cycles. Probably invented in the days when web people were afraid their readers would leave their page to go watch telly if their page didn't flicker like a pinball machine.
  • Ping or .png. The answer to the problems hampering the jpg and gif files. It's full-colour, the compression is as good as it gets without being lossy and it doesn't use the rights-protected type of compression that Gifs use. Unfortunately, the files are to big to use on the web and your browser can't read them. Great to save scans that still need working on. Like .tga or .tif files, but these often run into compatibility issues, as they have different flavours.

Storytime

Did you ever look into a novel and see something like this?

`Oh John!'

`Yes?'

`Yes! Yes! ... Yes!'

Even his cigarette afterwards tasted better than with Angela.

The Brooklyn rush hour is too bad for comprehension, if you've never experienced it. Yet, John could make it in time to the shop. If only that old lady in front of him ...

I don't think so. In a decent book, it would look like this:

`Oh John!'
`Yes?'
`Yes! Yes! ... Yes!'
Even his cigarette afterwards tasted better than with Angela.

The Brooklyn morning rush hour is too bad for comprehension, if you've never experienced it. Yet, John could make it in time to the shop. If only that old lady in front of him ...

Apart from my terrible English, it makes so much more sense now, does it? You actually see where one paragraph ends and the next one starts. The secret is this:

<p>`Oh John!'<br>
`Yes?'
<br>
`Yes! Yes! ... Yes!'
<br>
Even his cigarette afterwards tasted better than with Angela.
</p>

<p>The Brooklyn morning rush hour is too bad for comprehension, if you've never experienced it. Yet, John could make it in time to the shop. If only that old lady in front of him ...

In Frontpage (any flavour), in Netscape Composer, or even in Word, hit the shift-enter-key combination for a simple line break (<br>), and  the enter-key only for a new paragraph <p>. Yes, I know, it should have been the other way around, but there it is ... Remember about literature being 10% inspiration, and 90 % perspiration?
An alternative is to use search-and-replace cleverly - replace the <enter><enter>-codes most people use for new paragraphs into something unprobably like
xqxq, if necessary convert or save your document to html, search-and-replace every paragraph break into <br>-codes, and then switch the xqxq back into <p>s. Enjoy.

To be continued ...!

Back to main page