7. Februar 2015

How to Make Your Site Responsive and Mobile Friendly in Minutes

Assumed you have a web site for years. It has a traditional layout with a header, a menu sidebar, and a content area. The menu sidebar and also the header do not fit very well on a smartphone screen.

We need a scrolling friendly vertical design. It should appear automatically whenever the screen width is the size of a smartphone. We need an overlay menu instead of the menu sidebar.

And we need it quickly without a complete redesign. 

This is what I just did for my old web site http://www.galactic-developments.de

(Because it went so smooth and easy, I'll report what I did. Maybe it helps someone. Paying back to the Web.)

Starting with a typical nice static, not responsive, not smartphone compatible design:

We will turn it into a responsive design with popup menu:

...in 10 minutes.

The Basic Principle:

HTML5/CSS3 offers a simple mechanism to switch designs based on device properties: media queries. A media query applies the enclosed CSS only if the query condition is met. 

I insert this into the HTML of the page template of my CMS (I could also add it to my CSS file):

@media screen and (max-width:700px) {
  // here will be CSS

Media Queries override general CSS-styles. Inside the curly braces I will now redefine some of the styles. By redefining I can make elements disappear, change sizes, and change the layout.

The above CSS means, that the styles will be applied to screens (not when printed) and which are smaller than 700 pixels.

Things to do:

1. Remove Header, Footer, and Frame

The frame in the background must disappear. The background consists of three <div>s with a background image each. Top and bottom <div>s also contain other graphics and buttons. They will all disappear. The center <div> also has my text and the menu. The center <div> will stay. But it will loose it's background. Luckily these three <div>s already have IDs. So I can add these lines inside the media query:

  #bgtop { display: none; }
  #bgcenter { background: none; }
  #bgbottom { display: none; }

... which makes my new media query CSS look like:

@media screen and (max-width:700px) {
  #bgtop { display: none; }
  #bgcenter { background: none; }
  #bgbottom { display: none; }

See, how the header and the vertical frame disappeared:

2. Menu

The menu should not be statically on the left side. It should be invisible at start and accessible from a menu button. If I press the menu button, then the menu should appear.

I decided, that the menu button should be in the top right corner of the screen and the menu will appear on the right side. Reason: the button in the top right corner will cover less of the text. There is free space at the top right while the top left always has text. I move the menu from the left side, which is also left of the text, to right side and above the text. My menu <div> has the ID "menu":

#menu {
  position:fixed; right:0px; top:0px; 
  background-color:#ffffff; padding:4px; 

The position will to be fixed even if the page is scrolled. There is a 4 pixel padding which is filled by a white background color for a small distance between the content below and the menu:

If you make the window wide, then it has still the original design.

3. Menu Button

This will be my menu button:

I insert the button <div> into the HTML (I put it just before the header <div>):

<div id="menubutton"></div>

Add CSS for the menu button:

#menubutton {
  display: block; position:fixed;
  right:4px; top:4px; width:24px; height: 24px;

Shift the the menu down to make room for the menu button:

  #menu { margin-top:28px; }

Add a small JavaScript section to the HTML to toggle the visibility of the menu, when the menu button is pressed (jquery would be overkill, could use jquery for fade/slide animations, though):

document.getElementById('menubutton').onclick = function()
    var m = document.getElementById('menu'); 
    m.style.display = (m.style.display == 'block' ? 'none' : 'block');

    When the page loads, then the menu should not be visible (it will be shown by the menu button):

      #menu { display: none; }

    4. Device Scaling:

    Pixel densities on mobile devices are usually higher than on desktop/laptop screens. And they differ. But all devices should show about the same amount of text. This means, that a scaling factor must be applied, which scales the page depending on the DPI of the device. The command for that comes as a meta tag. Add it to the HTML <head> section (of the web site template):

    <meta name="viewport" 

    That's basically it:

    5. Additional Tweaks:

    Pixel densities on mobile devices are usually higher than on desktop/laptop screens. So I changed the baseline font size from 12px to 14px (this might be more effort depending on your existing CSS). In my case:

    * { font-size:14px; }

    On small smartphone screens, like old iPhones, the menu is too long. I remove some menu entries, which are not really important. I do this by assigning IDs to menu entries like. I changed:

    <li><a href="stuff.html">Wallpapers</a></a>


    <li id="menuWallpapers"><a href="stuff.html">Wallpapers</a></a>

    ...and add this to the CSS:

      #menuWallpapers { display: none; }

    As you see in the screen shot, my text is too wide. The reason is, that in my original design I assigned a fixed width to the content area, so that the text does not flow outside the border. Now, the text width should adjust to the device width. In my case, there are two <div>s to be fixed:

      #bgcenter, #main { width: auto; }

    I want to remove the page URL from the top. I don't think it's very useful, especially on a mobile screen. The page URL is only on the start page. It is a page content, not in the template of all pages. Still, I can hide it with a CSS in the same place as the other CSS tweaks.

    In other words: a style which is only used by a single page is configured globally by the media query CSS section. No problem. Since the link is inside a <div class="link">:

      .link { display: none; }

    A small shadow for the menu is no mistake:

      #menu {
        -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
        -moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
        box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);




    The complete CSS:

    @media screen and (max-width:700px) {
      #bgtop { display: none; }
      #bgcenter { background:none; }
      #bgbottom { display: none; }
      #menu { margin-left: 0px; }
      #menu { 
        position:fixed; right:0px; top:0px; 
        background-color:#ffffff; padding:4px; 
      #menubutton {
        display: block; position:fixed;
        right:4px; top:4px; width:24px; height: 24px;
      #menu { margin-top:28px; }
      #menu { display: none; }
      * { font-size:14px; }
      #menuWallpapers { display: none; }
      #bgcenter, #main { width: auto; }
      .link { display: none; }
      #menu {
        -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
        -moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
        box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);


    A bit HTML and JavaScript for the menu button:

    <div id="menubutton"></div><script>
      document.getElementById('menubutton').onclick = function()
        var m = document.getElementById('menu'); 
        m.style.display = (m.style.display == 'block' ? 'none' : 'block');
    A meta tag in the HTML <head>:

    <meta name="viewport" 


    Of course, there are other ways to make a responsive web site. You could use a mobile friendly CSS package, like bootstrap. But that probably means, that you will redesign your site, which won't be done in an hour.

    Of course, there are more modern ways to program the menu button. You could use jquery and this JavaScript:

      $('#menubutton').click(function() { $('#menu').fadeToggle(); });

    But you have to include 100 kB jquery library:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    13. Januar 2015

    Animated GIF

    Auf dem 31C3 hat Felix Mütze einen netten Vortrag gehalten über das Zombieleben von GIF. Auf seinem Blog hat er noch mehr zum Thema GIF gesammelt. Da ich bei den Anfängen von animated GIF dabei war haben wir uns danach unterhalten und ich habe versprochen noch ein paar Details aufzuschreiben. Hier also...

    Animated GIF

    Anfang 1995 hatten wir an der Universität Ulm eine Modelleisenbahn ins Netz gestellt. Die Besucher konnten den Zug im Kreis fahren lassen. Eine Kamera machte Bilder. Dafür musste man natürlich im Browser RELOAD drücken. Wir wollten, dass man ein Live-Video bekommt und haben nach Möglichkeiten gesucht, das mit der damaligen Technik zu machen. So sind wir auf GIF89a gestoßen (Konrad Froitzheim und ich). Ich habe ein animated GIF im Hex-Editor zusammengebaut. Dann das GIF den aktuellen Browsern vorgeworfen (XMosaic, Netscape Navigator) und es geschah: nichts, außer einem Bild. GIF wurde nur als Bildformat, nicht als Animation unterstützt.  

    Noch schlimmer: Mosaic wollte alle Bilder komplett runterladen, bevor das erste Stück HTML angezeigt wurde. Das war offensichtlich nicht geeignet für Live-Video. Live-Video wollten wir nämlich als ein nicht endendes animated GIF vom HTTP-Server zum Browser schicken. Aber Netscape 1.1 zeigte ein interessantes Verhalten: progressives Dekodieren. Damals sehr innovativ. Immer wenn neue Daten ankamen, wurde mehr angezeigt. Damit war klar, dass die Softwarearchitektur für Animationen geeignet war. Man musste das nur noch Netscape klar machen.

    Deshalb habe ich das Feedback Formular von Netscape auf die Webseiten der Modelleisenbahn kopiert, wo dann viele Besucher der Modelleisenbahn ihre Bitte um GIF-Animationen an Netscape (vor-)formuliert abgeschickt haben. Eines Tages meldete sich Scott Furman von Netscape und bat um mehr Informationen zum Thema animated GIF. Ich schickte ihm alles und ein paar Beispieldateien. Kurze Zeit später kam Navigator 2.0 mit animated GIF. Scott hatte dabei den Loop-Marker erfunden. Da GIF98a als Stream gedacht war und kein Loop enthielt, machte er den Loop-Marker als GIF-Comment. Das war wirklich eine coole Idee und hat überhaupt erst die ewig loopenden Icons ermöglicht. 

    Live Video

    Netscape's Marketing hatte wohl nichts davon erfahren, denn die großen Features waren Javascript, Framesets und Cookies. Von Animationen keine Rede. Aber sie gingen. Sowohl als Endlosschleife, als auch im Stream-Modus wo der Server die Verbindung hält und immer mehr Bilder schickt.
    Ich schrieb also einen Videoserver, der den Stream von der Kamera in ein unendliches animated GIF kodierte (in C als nph-cgi). Nach dem ersten Vollbild, suchte der Videoserver die geänderten Bereiche, kodierte das Bild nur für diese Rechtecke neu und schickte es auf die Leitung. Der URL des Streams verpackt als <img src=> im HTML zeigte tatsächlich ein Video. 

    Die Besucher der Modelleisenbahn konnten etwa im Sekundentakt sehen, wie der Zug um das Oval "hopste". Unglaublich, dass es dann plötzlich einfach so klappte. Das erste Live-Video im Web. Und für lange Zeit das einzige echte "live" Video im Web überhaupt.

    Dann kam PNG und ich hatte damals Kontakt mit Thomas Boutell. PNG ging ja durch viele Revisionen, aber im Thomas wollte keine Animationen einbauen. "Erst machen wir das Bildformat. Wenn sich das durchgesetzt hat, dann Animationen". Er hatte befürchtete, dass die Animation es komplizierter machen würde und so PNG schaden würde. Vielleicht hatte er Recht. Aber am Ende hat genau die Animation gefehlt, um GIF abzulösen. Ein Browser-Entwickler, der parallel zu animated GIF jetzt PNG einbauen will, fragt sich eher, was er mit den Codestellen machen soll, wo GIF noch mehr Bilder liefert, PNG aber nicht. Also muss er sie sinnvoll leer lassen. Wenn er dann nochmal den Code anfassen muss, weil jetzt doch PNG Animationen kommen sollen, muss man die stillgelegten Stellen wieder umbauen. Noch schlimmer, wenn die PNG Animation MNG heißt und einen anderen MIME-Type hat. Dann muss man neben PNG noch einen fast identischen Dekoder integrieren, der aber jetzt doch so wie GIF funktioniert. Das ist alles etwas mühsam. Jedenfalls mühsamer, als wenn man gleich parallel zu aGIF den aPNG Code eingebaut hätte. 

    Klar war aber auch, dass GIF mit den Farbpaletten nicht ideal für Fotos und Kamerabilder ist. Deshalb lag es nahe, das Animationsprinzip von GIF auf JPEG anzuwenden. Eigentlich ja ganz einfach. GIF hat einen Header, dann ein Vollbild, dann Teilbilder, die per Koordinate irgendwo im Screen einen Teil überdecken können. Also eine differentielle Kodierung ohne weitere Optimierung, aber viel besser, als immer Vollbilder zu übertragen. 

    Animated JPEG

    JPEG ist ganz ähnlich strukturiert wie GIF (und PNG). Der Kompressionsalgorithmus ist ganz anders. Aber beide bestehen aus sogenannten Chunks (Datenpaketen), die hintereinander gehängt werden. Der Header ist ein Datenpaket oder auch mehrere. Die Daten, die ein Bild ergeben sind in einem Datenpaket. Kommentare, Loop-Marker, Geo-Koordinaten, Datum sind alles einzelne Datenpakete. Bei animated GIF kommen nach dem ersten Bild-Paket noch weitere Bild-Pakete. Die haben alle eine Größe und eine Koordinate und legen sich quasi über die vorherigen Bilddaten. Zusammen mit dem Delay ergibt das eine Animation.

    Genauso wäre es bei JPEG. Normalerweise ist bei JPEG ein Header, dann ein Vollbild, dann Schluss. Würde man nach dem Vollbild weitere Chunks mit Teilbildern schicken, jedes mit einem Delay, Koordinate und Größe, dann wäre die Animation schon fertig. Noch ein Loop-Marker und fertig ist die Truecolor-Animation.

    Das haben wir programmiert (Michael Merz, Holger Bönisch und ich) und Tom Lane angeboten, der den JPEG-Code verwaltete. Leider hat er ihn abgelehnt mit der Begründung, dass MPEG für Animationen vorgesehen ist. Da hat er recht. Aber das hätte man von GIF auch behaupten können. Hat man aber nicht. Ein MPEG-Dekoder ein unglaublich aufwändiges und erstaunlich empfindliches Stück Software. Kein Browserhersteller hat MPEG direkt integriert. Das kam immer nur als Plugin oder mit Quicktime. Viele Movies waren inkompatibel und brachten den Browser zum Absturz. Als Microsoft den Browsermarkt dominierte haben sie es auch nicht geschafft, Movies auf einfache Art in Seiten einzubinden. Microsoft ist so spektakulär gescheitert, dass Flashplayer mit einer Konkurrenztechnologie für lange Zeit Truecolor-Animationen dominierten. 

    Es hat 15 Jahre gedauert hat, bis man endlich ein MPEG per <video src=> einfach einbinden konnte, ohne Flash-Player und viel Aufwand. Wäre damals JPEG parallel zu aGIF als Animationsformat erweitert worden, dann hätten wir seit 1997 eine einfache Art, Truecolor-Animationen zu machen. GIF wäre höchstens noch für kleine animierte Icons zuständig, animated JPEG für "kurze" Truecolor-Animationen mit anständiger Komprimierung und richtige Video-Codecs für ganze Filme mit der besten Komprimierung. 

    Eigentlich wäre animated GIF durch animated JPEG abgelöst worden. Und eigentlich wäre das auch heute noch eine gute Idee. 

    Hier mein erstes im Hexeditor gebautes animated GIF mit dem ich damals Browser getestet habe. Wenn es eine 1 zeigt, dann kann der Browser kein animated GIF. Bei 2 kann er. 

    Heute ist es gar nicht so einfach die 1 zu sehen.

    Das wahrscheinlich erste GIF-Movie. Zumindest das erste nach der Wiederentdeckung von animated GIF. Auf jeden Fall das erste, das von einem Web-Browser dargestellt wurde.

    Ich brauchte was Längeres, als die kleinen Testbilder, um die Streaming-Fähigkeit von Browsern zu testen. Erstellt durch Copy-Paste jedes einzelnen Frames.

    Ein Bild der Modelleisenbahn. Von rechts nach links: PC für Zugsteuerung, Kamera, Mac mit Videoserver:

    Die zugehörige Website (klassisches Web 1.0 Design): 


    Nebenbei bemerkt: 300.000 Besucher bis Mai 1997. Schon eine gute Zahl für damals.

    14. Dezember 2014

    ConfigSharp - Scripting Configuration in C#

    ConfigSharp (github, nuget)

    Config files are C# source files, managed by Visual Studio like any other code file: intellisensed, refactorable, resharpered, syntax checked, compiled, type safe.

    Write real code with control structures and classes in config files. Include other local or remote (HTTP) config files.

    No more key-value lists of string based app settings in XML. These settings are typed properties of CLR objects, even aggregated types. No more workarounds for complex settings, which do not fit properly in strings.

    Devops friendly, because admins can program their config files. Developers can document settings with examples in their own code, which also is the admins's config file.

    BTW: this is what everyone (PHP, Python, RoR) does. Configuration in your main language.


    static void Main(string[] args)
        var config = new MyConfig();
        var prop1 = config.SomeProperty;
        // or
        var prop2 = Config.Global.SomeProperty;
        var prop3 = App.Settings.SomeProperty;
        var prop4 = AppSettings.Get("SomeProperty", "default");
    public class MyConfig : ConfigSharp.Container
        public string SomeProperty { get; set; }
        public int OrAsMemberVariable = 41;
        public DateTime PlainOldCLRTypes;
        public NLog.Config ComplexAggregatedTypes;
    namespace MyProgram.Configuration // any namespace
        class ConfigFile : MyProgram.MyConfig // Derived from your config class
            public void Load()
                SomeProperty = "42";

    More on github and nuget.


    Tags: Config, Roslyn, C#, Script, Scripting, CLR, Configuration, File, HTTP, Remote, C# Script, Devops

    Rant: XML config files. Static, unreadable XML hell. What where they thinking? Anyone is configuring their app in the native project language. Only poor high level language coders use XML or ini files. Even worse: generating XML config files for different environments with XSLT transformations from master XML config files. Are they out of their mind? Web.config Transformation Syntax for Web Application Project Deployment. <add... xdt:Transform="Replace" xdt:Locator="Condition(@name='oldname' or @providerName='oldprovider')"> --- Condition(), or, @, What? There is already a proven syntax: it is called C#. There is already a good transformation: it is called compiler. This must end now, once and for all.

    10. Dezember 2014

    Quadcopter Entlaufen

    Etwa einen Monat nach meinem Post "Quadcopter Erstflug" habe ich den Phantom 2 verloren.

    Ich wollte die Baustelle neben unserem Haus von oben aufnehmen. Aufsteigen, Photo, weiter aufgestiegen, Kamerawinkel korrigieren, Photo, weiter vorsichtig aufsteigen, Photo, rumdrehen zum Rückflug, leichte Abdrift, korrigieren, starke Abdrift, über nächstes Haus, Adrenalin, nur noch klein am Himmel, Steuerung Not-Aus. Das sollte ihn wieder heimbringen, da er eine automatische Heimflug-Funktion hat, wenn er das Steuersignal verliert. Aber er kommt nicht zurück, verschwindet hinter einem Haus. Bei der Entfernung muss er schon die nächste Straße überquert haben. WLAN verliert Verbindung ... aus.

    Suche in den anliegenden Straßen: kein Ergebnis. Keine Chance in der Stadt. Der größte Teil der Flächen ist von der Straße nicht einsehbar. Hat sich bestimmt mit 10 m/s entfernt. Hatte noch 10 Minuten Flugzeit auf dem Akku. Kann überall sein. Hoffentlich ist niemand zu Schaden gekommen.

    Hier ein Phantombild des Flüchtigen:

    Wahrscheinliche Flugroute:

    Fun Fact:
    Den Copter habe ich bei Conrad gekauft, nicht online, damit man Hilfe bekommt und mit jemandem reden kann, wenn man ein Problem hat. OK, ich hab ein Problem. Also zu Conrad und Fehler reklamiert. Mitarbeiter von Conrad ist sehr verständnisvoll und nimmt die Reklamation gerne entgegen. Ich müsste nur den Copter vorbei bringen. Keine Reklamation ohne Gerät. Thank you for Nothing.


    PS: Man kann natürlich immer sagen: das war ein Pilotenfehler. Das kann aber nicht sein im GPS Modus. wenn alle Hebel auf null stehen, dann bleibt der Copter still in der Luft, stabilisiert durch GPS.

    Oder der Wind. Dann wäre auch der Pilot schuld. Am Boden und in den Bäumen war aber kaum Wind zu sehen war. Sonst wäre ich ja nicht aufgestiegen.

    Aber schon komisch, dass trotz 7 GPS Satelliten plötzlich die Position instabil ist und ganz schnell weg fliegt. Es könnte auch das mysteriöse Flyaway Problem sein.

    Jedenfalls kam das Ding irgendwo runter. Hoffentlich kam niemand zu Schaden. Angesichts der Tatsache, dass der Umsatz mit Drohnen exponentiell wächst, müssen wir damit rechnen, dass noch mehr Drohnen vom Himmel fallen.

    21. November 2014

    Techie, agil, skalierbar, sucht...

    Liebe Freunde, ehemalige Kollegen, entfernte Bekannte,

    viele Jobs werden durch Empfehlungen aus dem eigenen Netzwerk besetzt. Deshalb schreibe ich euch heute an. Vielleicht seid ihr oder eure Firma auf der Suche nach einem CTO oder ihr kennt Freunde von Freunden, die jemanden wie mich suchen.

    Wie ihr wisst, habe ich für mehrere Firmen eine IT-Abteilung mit kundenorientierter agiler Softwareentwicklung aufgebaut. Jeweils mit Millionen Umsatz oder Millionen Usern. Das möchte ich gerne wieder machen. Ich suche eine Stelle als CTO, IT-Leiter, Entwicklungsleiter oder Technical Director. Fokus: High-Performance Web, Skalierung, Online Marketing, Data-Driven, Realtime, Native, Games.

    Wenn ihr Tipps und Empfehlungen habt, freue ich mich über eure Kontaktaufnahme. Mein ausführliches Profil findet ihr hier: http://wolfspelz.de/Profil.pdf

    XING: https://xing.com/profile/Heiner_Wolf

    Viele Grüße
    Heiner Wolf


    PS: Das schwierigste an einer Email ist das Subject. Nach einigem Brainstorming standen diese Subjects zur Auswahl. Welches hättet ihr genommen?
    • Ich suche einen neuen CTO-Job
    • Suche coole CTO Stelle
    • Genie sucht Wahnsinn
    • Cooler CTO sucht heiße Stelle
    • Typ sucht Job
    • Schuster sucht neue Leisten
    • CTO will anheuern
    • Alter Wein sucht neue Schläuche
    • Rennpferd sucht Stall
    • Surfer sucht perfekte Welle
    • Quarterback sucht neues Spielfeld
    • Philae sucht Tschuri
    • Vogel sucht Grippe
    • Honey sucht Pot
    • Hamster sucht neues Laufrad
    • Rennpferd sucht Rennstall
    • CTO sucht Startup
    • Ochse sucht Karren
    • Turbine sucht reißenden Strom
    • Ich will arbeiten
    • Techie, agil, erfahren, sucht...
    • Techie, agil, skalierbar, sucht...
    • CTO, agil, skalierbar, sucht...
    • Agil Alter!
    • Sowas von agil
    • Was mit Web...

    13. November 2014

    Philae: The Biggest Jump Ever

    (Philae not to scale)
    So, Philae bounced twice before coming to a halt. 'Bounce' does not quite describe it correctly. Philae did by far the biggest #jump ever. The f*cking tallest, longest, slowest JUMP ever done by a human made object (including humans). Without using thrusters, just by pushing off from a rock. That's something for the Guiness Book of Records.

    And Philae was lucky as hell. It jumped about 1 km high and 1 km wide on a rock barely 2 km large. Had it jumped only a little bit more, then it would have missed this side of the comet and probably crashed head first into some other part. Philae jumped off very slowly at about 1/5 walking speed. Had it been twice as fast, then it would have left the comet entirely and it would be lost in space by now.

    Lucky Philae.

    This record will stand for a very long time. Jumping so high is only possible in very low gravity. Only on a small object with small escape velocity. This makes a jump very risky. If you jump too far, then you drift away into the darkness. Trying it would be foolish. But still, 50 years from now, there will be an astronaut/cosmonaut/taikonaut who happens to stand on a small celestial body for commercial or science reasons. And he/she will try to excel the Philae record. Probably with a recovery option. But it will still be difficult and dangerous. No safety leash is allowed for the record attempt to be valid.


    PS: As André Côté (commenter here) and Neil Armstrong (famous moon lander) said: "A giant jump for a robot, a giant step for humanity".

    9. November 2014


    Einkaufsliste für den Fluchtrucksack für 2 Personen / 3 Tage.

    Es ist zu viel, für dauerhaftes Tragen. Die Idee ist, dass die zweite Person sich ihren leeren Wanderrucksack schnappt und man dann aufteilt.

    Der Fluchtrucksack ist dafür da, dass man innerhalb von 2 Tagen aus der Stadt zu einer sicheren Zuflucht kommt.

    Der Einfachheit halber bestelle ich online alles bei Amazon.

    NotrationF-100 Compri (in größeren Mengen besser von autarka.de)6Amazonhttp://www.amazon.de/Bundeswehr-Camping-Nahrungskonzentrat-Milchpulver-Notverpflegungsration/dp/B00MHTFGOC
    Alu Rettungsschlafsack1Amazonhttp://www.amazon.de/Grand-Canyon-306001-Aluminium-RETTUNGSSCHLAFSACK-Silber/dp/B001QC53HQ
    Wasserentkeimung Tablettenfür 100 l1Amazonhttp://www.amazon.de/Katadyn-Wasserentkeimung-Micropur-Forte-MF/dp/B000G5OVL8
    TaschenlampeLED, Kurbel1Amazonhttp://www.amazon.de/PEARL-Mini-Solar-Taschenlampe-zus%C3%A4tzlichem-Dynamo-Schl%C3%BCsselring/dp/B005RXJBGE
    Wasserdichte Dokumentenhülle1Amazonhttp://www.amazon.de/WASSERDICHTE-DOKUMENTENH%C3%9CLLE-Aufbewahrung-Wertpapiere-N%C3%A4sseschutz/dp/B003WJG4BA
    Verbandszeugklein (zu klein?)1Amazonhttp://www.amazon.de/Holthaus-Aktiv-Verbandtasche-1-Set/dp/B003ODQLLW
    Desinfektionsspray250 ml1Amazonhttp://www.amazon.de/Octenisept-Mit-Spr%C3%BChpumpe-L%C3%B6sung-250/dp/B007A1396O
    SchokoladeZartbitter 100 g2Einzelhandel
    Zitronentee-Pulver500 g1Einzelhandel
    Klopapieroder Küchenrolle1Einzelhandel
    Schnur100 m1Einzelhandel
    WaschzeugZahnbürste, Zahnpasta, Rasierer, Seife1Drogeriemarkt
    Teelichte8h Langzeit30Drogeriemarkt
    Immodium akutDurchfall 12 Tabletten1Apotheke
    IbuprofenSchmerzen (Fieber) 40 Tabletten2Apotheke
    VomacurÜbelkeit 20 Tabletten1Apotheke
    LandkarteWanderkarte Region3Tankstelle
    Lange Unterhose1Haushalt
    Eßbesteckeigentlich nur Löffel1Haushalt
    Müllsackals Wasserschutz für Rucksack1Haushalt
    Müllbeutelals Tüten3Haushalt
    Notizbuch, Stift1Haushalt
    DokumenteKopien von Ausweis, Diplom
    NachweiseImmobilien-, Finanzanlagen, Rentennachweis