A primarily technical question-
I am developing an interface that – put basically – will have a somewhat-randomized-looking background using predefined square tiles. Each tile will very simply have a number of arbitrarily placed circles of varying sizes inside it. There will be a lot of tiles- and let’s assume they’ll all be unique.
One option I’ve been toying with is the idea that I could use text; periods of varying font-sizes and a white-space: pre-wrap style for each tile. I think I’ve determined that in terms of file-size, this would be smaller than using images of the circles… it would also be somewhat clever.
There are certain things I’m not hip to, however. For instance, perhaps the caching of images would end up making them eventually load faster than blocks of spaces/periods on page-load even though they would take a bit longer initially to download.
I’ve considered that determining the overall dimensions of text would be a bit of a nightmare, but I don’t really need to know that information, and I figure if I use a font like Georgia (which seems to be included across all systems/browsers), I could probably find that information anyways.
If you had all the time in the world and you wanted to make the project as aesthetically perfect as you could (internally and externally), how would you approach this scenario?
If you’re looking to do a background, I would not use text—to me that is a little gross.
Personally, since the background isn’t ‘content’, I believe it stay out of your HTML and should be done with CSS or Javascript.
In this case I would use background images.
Look into the cicada principle.
Using only a few images, you can get very cool, random looking backgrounds.
This example is less than 7k of images.
Here’s another that could be duplicated with circles.