Hallo Axel,
versprochen ist versprochen (oder sollte es besser heißen: angedroht ist angedroht ...)
Egal, ich finde Deinen Vorschlag richtig gut, obwohl ich glaube, dass gestandene Profis dafür kaum Zeit und Lust haben werden. Opa ist das egal (der hat es nicht so mit dem net) und ich würde mich sehr freuen, von den "alten Hasen" etwas zu lernen.
Mir geht es nicht darum, eine "superprofessionelle" Site zu gestalten, das Herantasten an diese (zumindest für mich jetzt noch) unglaublich komplexe Thematik und das Lernen des Handwerks ist für mich viel viel wichtiger.
Da ich leider Niemanden habe, den ich bei Problemen fragen oder mit dem ich Erfahrungen austauschen kann, bleibt mir nur die Netzgemeinde.
Das "HTML-SEMINAR" fand ich hierfür von der Idee und vom Namen her interessant. So zumindest meine ursprüngliche Intension.
Die Anregung von MrMurphy (#5) habe ich (nachdem ich das Prinzip FLEXBOX zumindest oberflächlich verstanden habe) zur Grundlage genommen, um die Site noch mal ganz neu zu bauen. Das flexible Testvideo funktioniert nun, nachdem ich mich noch mal mit der Thematik figure eingelesen hatte. Ich bin mir aber nicht sicher, ob ich die themenbezogene Dekoration (Perforation des Schmalfilms) "flexboxgerecht" implementiert habe. 
Zumindest funktioniert es rechts und links (gekacheltes Hintergrundbild in 2 zusätzlichen Divs), aber unten habe ich das einfach nicht hinbekommen, dass die Proportionen bei flexiblen viewports stimmen. Deswegen vorerst nur eine einfache Border.
Vielleicht hat jemand eine Idee, wie man das besser machen könnte. Das Perforationsbild liegt im Image-Ordner. ( test.schmalfilm-überspielen.de falls ihr die "Baustelle" mal runter laden wollt) Oder vielleicht gibt es eine noch bessere (themenbezogene) Style-Idee.
Evtl. was ganz ausgefallenes. Ist ja schließlich keine kommerzielle Site. Opa verdient sein Geld beim TV.
Übrigens: Das die nav 2x drin ist (oben und unten), und dann auch noch aufgeklappt, ist kein Fehler. Ich habe mir gedacht, dass der User dadurch einen Klick (oder Wisch) spart, um gleich weiter lesen zu können ohne erst nach oben scrollen und bei mobile aufklappen zu müssen.
Für mich als "newbie" wäre aber auch eine kurze Erklärung für den Code wichtig, etwa so wie bei dieser Erklärung zum Thema figure:
Beispiel:
"Folgende Einstellungen sind wichtig:
Zeile> max-width:90em;: Der body nimmt auf großen Monitoren eine maximale Größe von 90em ein, bei kleineren Viewports wird er entsprechend schmaler.
Zeile> figure img {width:100%;}: damit die Bilder in einem schmaleren figure nicht überstehen, skalieren sie sich an die verfügbare Größe.
Zeile> @media only screen and (max-width:800px): Wird der Bildschirm schmaler als 800px werden nur noch 2 Bilder nebeneinander angezeigt, bei weniger als 600px nur noch eins.
Die Werte von 48%, bzw 96% ergeben sich aus den 100% Breite des body, von denen das padding von 1% (links und rechts) abgezogen wird.
Zitat Ende
Ich weiß, dass das für einen Profi total nervend sein muss, sowie für einen Professor für Nuklearphysik, der seinen Studenten das ABC erklären soll.
Vielleicht noch mal etwas kurz zum Thema Zielgruppe und Browserfixes:
Ich wohne hier in einem kleinen Dorf. Fast alle Jugendlichen, die mit der Schule fertig sind, sind nicht mehr hier. So kommt es, das wir sehr viele ältere Bewohner hier im Ort haben.
Mittlerweile bin ich hier bissl als Computernerd "verschrien". Wenn Jemand ein Problem mit einem Computer hat, kommen die Leutchen erst mal zu mir. Oft sind es ganz einfache Sachen, wo ich tatsächlich helfen kann. Und ich mache das auch gern und selbstverständlich kostenlos, auch wenn manchmal ein Stückchen Kuchen oder so rausspringt.
Dabei sehe ich aber auch, wie leichtsinnig viele sind. Unser Bäckermeister hat z.B. noch Win2000 auf seinem Rechner (ich sage jetzt bewusst nicht, wie unser Dorf heißt, sonst komme ich in den Backofen) 
und unser Fleischer nimmt als Schreibprogramm ein uraltes 16-Bit-Programm namens AMIPRO, ein früher Vorläufer von Word, was 14 Jahre älter ist als ich. Und er lässt sich einfach nicht überreden, zu modernisieren. Angeblich hat er "eine gefühlte Million" docs in diesem Format, die er nicht konvertieren möchte (oder kann). Außerdem kenne er das Programm sehr gut und es kann alles, was er braucht.
Was soll man da noch sagen? Und Opa? Der ist ein super TV-Designer, hat sogar alte schwarz-weiß Filme aus dem 1.Weltkrieg nachträglich coloriert. Seinen privaten Rechner musste ich aber damals erst aus der Steinzeit ins 21.Jahrhundert bringen. Eben old-school.
Aber bei der Schmalfilm-Site ist das eben genau die Altersgruppe, die ich (MrMurphy möge mir verzeihen
)
in #7 als Zielgruppe bezeichnet habe.
Daher denke ich, das die Browserfixes in diesem speziellen Fall doch wichtig sind.
(@ Gunni:
Zitat:Das mit den Browsern sehe ich genauso und die Exoten muss man m.e. ohnehin nicht glücklich machen. Deren Leidensdruck befördert das Durchführen eines Updates"
Zitat Ende.
Ich habe deshalb für alle Fälle eine Warnung implementiert (Ihr Browser ist veraltet...).
Aber ein schlauer Mensch sagte mal: "Der Wurm muss nicht dem Angler schmecken, sondern dem Fisch." Ihr wisst, was ich meine...
Und bei der "Zielgruppe" der Schmalfilm-Site trifft das haargenau zu (zumindest bei der Mehrheit)
Jedoch einen Vorteil hat das fixen von Computerproblemchen in unserem Ort: Ich kann ihnen Opas Site zeigen und so Gestaltungsanregungen aus Rentnersicht (fast alle haben schon eine Brille) bekommen.
So mögen fast alle lieber dicke schwarze Schrift auf weißen Hintergrund, den font-size nicht zu klein. Und sie mögen keine Sidebars und mehrspaltige Seiten. Achtung, um niemanden auf den Schlips zu treten: Das ist nicht repräsentativ sondern nur eine lokal begrenzte persönliche Augenblickseinschätzung. Es gibt auch erfreuliche Gegenbeispiele, siehe Computer Club 2. Leider ist das aber nicht die Mehrheit - denke ich jedenfalls. Vielleicht liege ich da auch falsch.
Das hängt wohl mit den Lesegewohnheiten der alten Leutchen zusammen. Also habe ich alle Sidebars wieder entfernt und verschiedene Layoutversion mit ihnen an ihren eigenen Rechnern durchgespielt, und zwar mit vielen verschiedenen Rentner-Usern.
Mit dem Web Developer kann man das ja sehr gut vor Ort machen. Auch das nunmehr einspaltige Layout habe ich x Mal verändert, bis es schließlich das (zugegeben extrem gewöhnungsbedürftige) Layout im Stil der Glamrock-Generation erhalten hat (zumindest auf der Landingpage)
Nur ein paar passende Bilder fehlen noch. Leider kann ich nicht sehr gut malen, und das Urheberrecht im Internet für fremde Bilder ist (zumindest für mich) ein Minenfeld.
Also sieht die (nicht responsive) alte Site noch so aus, wie sie eben aussieht.
( http://www.schmalfilm-überspielen.de )
Mit allen Anfangsfehlern, Spaghetticodes usw.
Validieren sollte man diese Site auf gar keinem Fall, sonst wird der Rechner blitzartig zur Supernova.
Sobald ich aber die neue responsive Site fertig habe, wird die Originalsite relaunched.
Übrigens: Als ich die Site für Opa online gestellt habe, lag diese im Googleranking irgendwo im 4-stelligen Bereich, und dort blieb sie auch fast 1 Jahr.
Dann habe ich ein Buch geschenkt bekommen namens "Guerilla SEO", was ich super interessant fand. Und da hat mich dann der Ehrgeiz gepackt - und ich kann SEHR ehrgeizig sein, wenn mich ein Thema interessiert.
Ich habe dann mich sehr intensiv mit dem Thema SEO beschäftigt,
mich bei allen möglichen (nunmehr) seriösen Plattformen angemeldet (seobility, OnPage, sistrix, xovi) und voila, jetzt steht die site auf Platz 1 im Googleranking mit den Keywords SCHMALFILM und ÜBERSPIELEN , auf die ich optimiert habe. 
Sogar beim nicht geogetaggten Google (http://www.google.com/ncr)
Im Nachhinein ist mir dann auch klar geworden, das der Umlaut in überspielen keine so gute Idee war. Aber das ist nun mal nicht mehr zu ändern, auch wenn das mit den canonicals und der 301 ganz schön ätzend ist.
Also, ich freue mich auf Eure Feedbacks.
Viele Grüße von Tommy
P.S. Kann mir jemand auf die Schnelle erklären, wieso bei der Flexbox bei der nav kein ul und li verwendet wird und stattdessen nur die Links in ein div eingeschlossen werden?
Die oben beschriebenen Probleme konnte ich dadurch fast alle selbst lösen.
Hab mal das Ergebnis hochgeladen. Das einzige Problem, was ich noch nicht lösen konnte, ist das Fallback für ältere Browser. 
