Welcome to the Heart of Europe

Rearranging information in this webpage by a handful of central themes felt like a never-ending Sisyphean undertaking. It turned out that most touched topics contained random references that would fall under the category "Miscellaneous", which usually hosts a bit of everything that wouldn't fit anywhere else, a pell-mell or a mixture of "cabbage & turnips (Kraut & Rueben)", as they call it in German. The old "Quargel & Himbeersaft" example comes to mind: One could also say, "Raspberry juice is good, smelly cheese is good, how good must even raspberry juice with smelly cheese taste?"


Rationale behind this Webpage

Lasting Impression. Some people plant a house or build a tree, or the other way round, if they can afford it (or find a sponsor to help them out). But in the end it is all about doing something yourself and most of all, making a positive impression to others, ultimately leaving this planet with your tracks still visible behind you.

Distinctive Dialogue. "Hello from the Heart of Europe" is one of those start ups in a telephone conference that is recognizable up to a point where it replaces an introduction of the attendant. Over the years, I have had various reactions including imitations like "Hello from the Heart of Michigan" or "Hello from Munich, the real Heart of Europe." What mattered the most was people responding with a smile. When I was searching for a motto for my website relaunch, initial thoughts circled around "The Heart of Europe at your fingertips" to symbolize that no matter how far we live apart, we are just one click away, really. If I would set up my own company, I would probably call it "Heart of Europe (un)ltd." Of course, I could also go for "Oliver & Co.," but that had been already used for a Disney movie.

Evolution of a Webpage!

New Millenium's Resolution. In the year 2001, I made two "millennium"-resolutions: I wanted to capture memories of my kids on digital video as long as they are not too grown up. That lead to our DVD "The Funniest Home Videos", with short clips underlaid with music, as no one over here really takes the time to watch hour-long family movies, anyway. On the other hand, while I had trouble with slow Internet connection and too big e-mail photo attachments back then, I planned on creating a website for friends and family around the globe to visit. A "modern" way of keeping them up to date with our life or maybe just giving them an alternative to boring TV evenings, if any. Besides publishing pictures online I started writing articles about this and that, as I had always enjoyed to document things in one way or another, in order to be able to find information again later on. Further motivation included to keep up to date with technology and practice non existent foreign language skills. As such it became a hobby and an unusual form of relaxation at the end of a tiresome day, following the good old motto: "You don't ask, we answer!" For a start, I would use free webspace and an online webbuilder tool. In order to get rid of annoying pop-up advertisement and achieve better performance with loading time, I decided to "go commercial" so to speak, and invest € 0,99 a month to rent webspace and an own domain name. Keeping the overall structure, I would modify the html code directly, which made the pages longer and longer up to a point where they became mostly unreadable.

Double-U Domain. As my provider went out of the hosting business (not because of me), I decided not just to migrate the "classic" webpage but also to give it a fresh start in 2009 with a new, more modern framework. Hearing a lot about the "new web" and the importance of making a sustainable impression on the "double-u double-u double-u," I started designing a new online experience based on three main characteristics: Optical presentation, navigation and practicality. Initial milestones included a significant improvement in appearance, combined with a dynamic menu structure and a higher level of automation with the publishing of changes, while keeping my hobby low cost. My timeframe got tighter, as an upcoming family event with new pictures to share became a personal goal for getting back online. At one point I had to take the decision to discontinue the bilingual mishmash and just go for an English website in order to reach a wider audience, achieve a higher level of clarity and reduce maintenance efforts with German back-translation. It is a nice feeling to get occupied with a hobby and forget the time you put into it. And so here is another product of late evenings. However, I am thankful for any helpful suggestions regarding structure, usability and content, as a base for further improvement.

Considerations on a new Website

By review of different sites, I have noticed the following factors to consider as ground rules for designing and building the own webpage anew. A first sketch was quickly drawn on paper, a tool selected with good reviews in the lower price segment and for about one week the evenings got extremely late!

Optical Impression. The appearance of a website has to be inviting, sparking interest to go on visiting it deeper inside. Dynamic pull down menus and well arranged pictures, in combination with flash animation support a vivid appearance. A larger image, positioned in the center, serves as an eye catcher. On the other hand, interactive features should be limited to a point where they create a value, not cause distraction or visual overload, whereas a bigger number of flashy and blinking features just tires out visitors.

The top of the page should contain an unmistakable logo or motto that is connected to the website. Typically, many pages have it surrounded by soft images such as clouds to transport a pleasant impression. Making people feel "at home" will motivate visitors to later return to the same appealing site.

A news section can inform about changes and guide visitors to recently updated content. A regular update is vital to keep the site alive. This includes both the occasional exchange and addition of images as well as texts, as reoccurring changes in appearance and content will provide input for re-promoting the same webpage over and over again.

Practicality of Design. Whereas commercial sites may require a detailed style guide, for private pages the general approach of consistency in colours and typography may be sufficient. Apart from a clear menu structure as a backbone for consistent navigation experience, occasional cross-links may spark interest in other sections. Reading about the ineffectiveness of right-hand columns, I decided to flip the sides on the splash page to provide a classic surf experience with the news section and quick links as part of left oriented navigation.

Dark text on light background increases the readability. Appearing more serious and professional, at the same time it bears the danger of being perceived as exchangeable and boring. Especially in combination with smaller font sizes, the letters must be in an easily readable text style, such as Arial or Sans-serif. With longer texts, the column size should be within the standard visual range rather than spreading across the whole screen. The text should be broken up into paragraphs, additionally preventing the visitor from too easily losing the line during reading.

Honey, you are on TV! One of these screams coming to my mind when watching one of our home movies.

First draft of the new "Splash page"-layout.

Fancy and Fast. White background has the benefit to allow the pre-compilation of images, without having to use image formats like gif, which support transparency to better blend into the background. The size of the webpage should support lower resolutions. The main window frame should be aligned to 768x1024 pixels. A smooth transition from page to page looks nice, but is not practical in case of slow internet connection. Fancy soft fade effects delay the display of the next page for requiring all images to load ahead of time, even in lower sections, unless off-screen buffering techniques can be leveraged.

While its width should never exceed the standard, especially with pages that transport news it is no problem to have a longer entry page, pepped up with headlines and quick links. In this case there will be the possibility to scroll down to find additional information. However, too long pages should be avoided for matters of loading time in combination with too many image files and because of too easily lost interest of visitors of monster pages. In any case, bigger sections should be broken up into smaller, easily digestible chunks, just as with eating an elephant. For sometimes less is more, also in this context.

Easy to Read. Visual arrangement supports the identification of useful information in times of increasing complexity. In analogy to the front page of a newspaper, one should be able to tell the importance of a message at first glance from its position in the overall compound. According to Western reading direction, a piece of information placed on the top-left is hierarchically more important than bottom-right. Object size and colour coding can further identify the hierarchical structure and suggest inter-relationship between passages.

As texts grew longer over time, I tried to split up pages or add a short introduction, meant as a teaser, at the top of pages. Furthermore, the blog-style content would become easier to read by starting each paragraph with a short catch phrase that would relate to its key message, or emphasize its essence in a "snappy" takeaway tagline. Rearranging pages in the menu structure to improve logical grouping would conclude the maintenance exercise. Still, this website may not be perfect, but with the help of constructive feedback, further adjustment for the better may happen over time.

Of Signs and Crosswalks

Ped X-Ing? This is my favourite sign. Just another street sign in America, like many others, and still something like a symbol for things coming together. Being over a couple times, it really only caught my eye on the cover of a Coverdale-Page CD. Going over to the US for the first time, I remember that the sign "PED X-ING" sounded somewhat Chinese to me, while really just being an abbreviation for Pedestrian Crossing. In Disneyland we would discover a variation of the same sign, saying "TOON X-ING." Cartoons crossing the street!

Zee For Zebra? "Ped xing" in China really is "Xing Ren Jiao Cha Lu," literally "walker junction across street," where "xing" stands for walking. In the UK you say "zebra crossing" for crosswalk. Also in German it is called "Zebrastreifen - zebra stripes" and there is this dispute whether a zebra is just a horse after lying down on a freshly painted pedestrian walk... similar to the Mandarin word for zebra: "Ban-ma," striped horse. And "zebra" is a good example for different pronunciation in British and American English. At the end of their Alphabet Song the singing English teachers Danny & Gerry dispute, whether it is "zee" for "zeeebra" (US) or "zed" for "zaebbra" (GB).

Michigan: US Road sign for Merging Traffic.

California: Disneyland sign for 'Toons Crossing.

A Word about Logos

Trademark Message. A logo can be helpful. It may support later recollection and up to transport messages and trigger association. The Gospel of John starts with "In the beginning was the Word." A translation of the Greek "en arche ein ho logos," where "logos" actually stands for more. It has a range of meanings from the thought "idea" to the spoken "word" up to the underlying "logic." Private family crests and commercial signboards had been early forms of identifiers. Logotypes on the other hand came up to speed up the setting process with printing, by casting frequently used letter combinations into one type (ligature). Over the years, logos (the plural, not the Greek form!) developed as combinations of letters and graphics. In modern times they are found almost everywhere, be it on product labels or letter heads, advertisements or websites. Good logos catch the eye. They should not be too complicated to be easier remembered and reproduced, capable for "enlightening" as neon signs, while remaining distinctive. Under the aspect of marketing and branding, logos of sub-brands may carry variations and quotations of the mega brand inside, just as it is possible to play with logos by adding seasonal influences, such as snow on it's letters, as long as not overlaying the unmistakable appearance. Especially the top of letters has to remain intact, for during reading we mostly recognize the ascenders. The topography of typography has to remain clear.

Identification Point. Sometimes we say "logo" as a short form of logical, a standard answer when everything is clear. Using some imagination, a logo should sum up values it stands for (besides dynamic, positive and future oriented as most common requirements to its design) and be something to identify with. This is why a logo can be helpful as one of the first things to brainstorm on when setting up and scoping a big project. As an example, nearby you will find my take on a certain sticker, found on most PCs. Back then, the Euro currency was introduced in quite a few European markets at the same time, for accounting purposes with the beginning of the fiscal year. Hearing a speech about logos, I would also think one up for this website (respectively its predecessor). A logo can be a typeset, a colour, a sign, an angle meant to describe goals. To reflect on those isn't a bad idea anyway. What could your logo look like?

The next page is about a few calm Moments.
Here are shortcuts to the sections Infotainment and Development.

You found a mistake or have any other important comment about these pages?
Just do us a favour and help us improve: Fire an e-mail to the webmaster....
Highly appreciated!