The text of this webpage example is excerpted from an INFP writers emails to me. The site was built as an experiment of balancing speed and beauty. Her text is worth reading. Almost all links are disconnected for this demo. Once the text snippets were put together and edited it made a nice philosophy about her writing. Notice she is talking conversationally about "why she cares." Very important and great example.
Low-bandwidth websites are about the actual making of DIY websites, the joy of building (and owning) something unique. It's about crafting faster websites using free and lowtech resources. LoBand borrows from antiquated code recycling, scavenging, and reuse. It takes abandoned, throwaway code and plays with it. Especially code that is considered old-school, unfashionable, taboo, or forbidden by mainstream "web standards" programmers. These are "old code" like HTML Frames, Tables, single-pixel GIFs, marquees, and others.
Complex technology is an enslaving force.
LoBand are built from rediscovering "web artifacts" belonging to another time, primarily the 1990s. Modern websites are too complex today. LoBand sites are nostalgic and have the mark of a craftsperson burnished into them. Reusing old elements is classic craft like during shortages or rationing in a web cottage industry. This provides timelessness in a constantly changing modern technical culture. LoBand are a response to modern plastic-blob consumer technology. They are built with low-tech tables, CSS tiling background and HTML text.
Low-bandwidth sites aren't mass-produced; they're anti-slickness and unique.
They rely heavily on re-purposing vintage, legacy, low-technology code and software tools. Production requires learning low-tech and no-tech techniques to deliver project's faster with little budget. They're built with small or zero investment. There is nothing dogmatic or Utopian about them. This blog is about reducing production lead times and getting things done now —about things that work today. Results and workarounds.
Low-bandwidth sites are the answer.
Buyers of products and services have been tuning out traditional forms of marketing and advertising. At the same time, buyers are increasingly relying on search engines, blogs and social networks to research, form opinions and compare solutions. As a result, the effectiveness of traditional marketing services has been waning rapidly. However, despite this transformation, most marketing agencies and professionals have not adapted. Low-bandwidth sites are the answer for fast adaptation.
Simple and Fast Decision-making Process
To create this fast-loading, lo-band, single-page website, I decided to apply the "tradeshow booth" formula I've described elsewhere. The simple elements are:
1) color, 2) foliage, 3) lighting, and 4) legibility.
Color
The color theme was determined previously --and I wasn't going to change it but I did enhance the palette with a sampled yellow.
Foliage
I selected a shot by searching on "purple flower" at stock.xchng - free stock photo site. The original image is shown below and was 3.7MB. Very large!
I then cropped and optimized the image as a 30Q 17K JPEG.
This was then placed as a HTML Table cell background image with an inline CSS style. This allowed HTML type to float above the background without "baking-in" the text on the image which would have made the text "fuzzy." JPEGs frequently don't render text as well as GIF images.
Lighting (depth and shadow)
A 13K GIF 32-color gradiant "string tile" was created in Photoshop to use as a CSS background image. It repeats in the x-axis at the top of the page. Gradients and shadows create a feeling of light-depth to a page. The screen at the top was "harvested" from a larger image after searching for images that were "delicate."
Legibility
The HTML Times New Roman author's title was black and horsey. It was hard to read. Adding an inline Style "text highlight" with a yellow #FFCC33 sampled from the flower made it pop and allowed the type size to be reduced significantly.
The column width is set to 50% of the screen size.
The website now is attractive and weighs very little (36.6K) --a bonus. What needs changing now? The carrot image no longer seem to match the theme so I used a pencil sketch Photoshop filter to make it a little more artistic.
Stretchiness
The page is extremely liquid as shown in the image below. And the window can collapse even further and still not break. Try it live.
No comments:
Post a Comment