WebDesign

The first edition of www.hupi.ch was named "Hupi's Page" and went online 1999. Later the site was extended with "The Dome", which was a virtual building walk-down. A bit later, I added "HurzelNet". A funny, non-existing IT company. :-)

The page was created with Frontpage. To start, it was the easiest way, since almost no HTML knowledge was required. I created it based on a frame layout, tables and animated gifs, which was common these days.

In 2004 the creation of a new webpage for the "Swiss Corvette Club" was started and went online shortly after. This page survived (with almost no design changes) until 2013.

For the second edition of www.hupi.ch, I changed the name slightly to "Hupi's World". It went online in 2007.

I changed tool-wise to ExpressionWeb and started to work with some minor CSS. It was still a frame based layout but with some flash animations. 2009 it was extended with a asp.net based photo gallery generator and a javascript based viewer called "clearbox".

In the beginning of 2013, a total remake was made. The time is running fast and technical aspects are getting more and more important.

For this version of this page I dumped all of above tools as Frontpage, ExpressionWeb, Flash, etc.) and the old technical aspects (frames, etc.) as well. I started to work with Notepad++ to get a clean result without lots of overhead in the code. Technically I changed to strictly HTML5 and CSS3. I wanted to have a responsive design, that supports all devices correctly (Desktops, Pads, Phones) and works on all (up to date) browsers.

The only thing from the old technical part I kept, was the asp.net based photo gallery generator, which still did the job perfectly. It's purpose was to create thumbnails from all pictures within a folder (on the fly) and then generating the photo gallery page. This saves a lot of time for the maintenance of the pages and allows to add more galleries in a snap. However, I updated it slightly to work with a different viewer called "PhotoSwipe v3" for better mobile support.

In the actual version of the site, I migrated everything to PHP. Especially the used asp.net based photo gallery generator did not deliver the functionality I had in mind anymore. Therefore it was translated to PHP too. The basics did not change. So it still creates thumbnails of all pictures within a folder (on the fly) and then creates the photo gallery page. However, there are more options and possibilities included now (showing EXIF data, captions, etc.). I thought about to update from "PhotoSwipe v3" to "PhotoSwipe v4". But soon I quit again with this idea. The reasons are simple: Photoswipe v4.0.8 seams not to work as perfect as Photoswipe v3.0.5. It felt apart, specially on smart phones (when changing from portrait to landscape by rotating the device). Further Photoswipe v4.0.8 does not make use of JQUERY any more and is therefore pretty tricky to implement.




Used Tools

Notepad++ is one of the best free editor that can be found on the web. I recycled all of the other tools (Frontpage, ExpressionWeb, Flash, DreamWeaver, etc.) some time ago and started to use Notepad++ exclusively. I think it is the best way to get a clean result without a big amount of code overhead.

Notepad++

Since every day more people do use some mobile devices to surf around the globe, I integrated PhotoSwipe v3.0.5 to show all photo galleries and pictures. It is probably the easiest way (or at least the only way I found which makes sense to me), since it is usable on all devices (desktops, pads and phones). Additionally it was pretty simple to be integrated with my existing scripts.

P_Swipe

Backstretch was easy to integrate as well. JQUERY is already used by PhotoSwipe v3.0.5, so it's a simple extension to some existing scripts and not too much additional code to be loaded. Additionally it supports my site concept pretty well.

B_Stretch