hover bei Touch-Devices


  • Hi,ich bin Tommy und neu hier, bin gerade 14 geworden und stehe noch ziemlich am Anfang.
    Ich habe für meinen Opa eine Seite gebaut http://schmalfilm-überspielen.de , Opa hat den gesamten Content geschrieben, ich habe die Seite gemacht.


    Mir ist klar, dass die Site noch extrem einfach gestrickt ist und noch viel gemacht werden muss, es ist halt mein erstes online gestelltes Übungsprojekt, und Opa zahlt den Provider.


    Jetzt möchte ich die Site responsive umgestalten und habe das Problem, das natürlich das hover bei den Untermenüs der Nav ohne Maus bei Touchgeräten nicht funktionieren kann. Aus Platzgründen möchte ich jedoch nicht auf die Untermenüs verzichten.


    Im Web habe ich dafür eine scheinbare Lösung gefunden, leider habe ich noch ein Problem mit der Übergabe der Parameter.


    Der HTML Code lautet: <script>document.addEventListener("touchstart", function(){}, true);</script>


    der CSS-Code dazu:
    element:hover, element:active { CSS-Eigenschaften; -webkit-user-select: none; -webkit-touch-callout: none}


    Ich habe den CSS-Code in die CSS-Datei und den HTML-Code erst einmal testweise in eine unwichtige Unterseite im Footer eingebunden (Links), bin mir jetzt aber nicht im Klaren, wie ich die Parameter einbinden und spezifizieren muss.
    Es wäre schön, wenn mir wer helfen könnte, denn bisher klappt es leider nicht. :(
    Der Quellcode (nur Unterseite Links) ist ja einsehbar.


    Denkbar wäre folgende Lösung: Erste Berührung: Es offnet sich das Untermenü des Listenelementes der Nav, so als wäre die Maus drüber.
    Zweiter Touch auf einen Untermenüpunkt öffnet dann die entsprechende Zielseite.


    Es wäre schön, wenn mir wer helfen könnte. Und vielleicht auch erklären könnte.


    Vielen Dank an die Profies, Tommy

  • Wenn du noch neu bist und möglichst schnell ein Ergebnis erzielen möchtest,
    empfehle ich dir den Einsatz eines Frameworks, z.B. Bootstrap, Foundation oder Materializecss.
    Dort gibt es vorgefertigte Lösungen, gerade in Sachen Menüs, welche zuverlässig funktionieren.


    Hier noch ein paar Empfehlungen für den Einstieg:


    Peter Müllers "Little Boxes" ist ein solides Fundament, welches du auch Online komplett nachlesen kannst
    http://little-boxes.de/little-boxes-teil1-online.html



    Wir geben unseren Praktikanten, welche sich für Web interessieren,
    immer "Schrödinger lernt HTML5, CSS3 und JavaScript" vom Rheinwerk Verlag (ehemals Galileo Computing) an die Hand.



    Ich persönlich finde es wichtig zu erst aus einer Quelle, bzw. von einer Person, zu lernen,
    selbst wenn sie manche Sachen vielleicht etwas umständlich oder nicht nach "Best Practise" macht,
    doch bietet das eine solidere Basis als sich CodeSnippets zusammen zu suchen ;-)



    Schreib mich ruhig an, solltest du weitere Fragen haben.



    Viele Grüße
    Sebastian



    P.s. Eine Seite von welcher ich nicht besonders viel halte, die jedoch ein paar Grundlagen sehr gut erklärt, bietet ein komplettes Anfängerbeispiel für ein DropdownMenü
    https://www.w3schools.com/howto/howto_js_dropdown.asp




    Ist zwar auf Englisch, aber damit solltest du dich schnell anfreunden, wenn du ernsthaft in Sachen Web einsteigen möchtest ;)

  • Hi djtheke, hi Taucherglocke,


    danke für Eure Rückmeldungen. Hat zwar etwas gedauert mit meinem Feedback, aber ich musste erst einmal die ganzen Schulprüfungen hinter mich bringen.


    @ djtheke: Das ist keine kommerzielle Seite. Dahinter steckt auch keine Firma sondern eine Interessengemeinschaft von Fernsehleuten, die sich der bestmöglichen Restauration von alten analogen Filmen zum Hobby gemacht haben. Allerdings mit einer Technik im Rücken, die manch eine kommerzielle Digitalisierungsfirma vor Neid erblassen lassen würde. Die haben halt ein hochmodernes Fernsehstudio zur Verfügung und jahrzehntelange Erfahrung auf dem Buckel. Und jede Menge Zeit während der nächtlichen Sendebereitschaft. Opa ist der "Anführer der Bande" aber leider auch total "old school". Null Ahnung von HTML und co.

    Hat nicht einmal ein Smartphone, nur ein "dummes Handy".

    Deshalb habe ich ihm damals zum Geburtstag die Site geschenkt. Gleichzeitig war (und ist) das für mich ein schönes Übungsprojekt.


    Mittlerweile habe ich mich - weil auch die Lehrer in der Schule von dieser Materie Welten entfernt sind - autodidaktisch (also nur aus dem Web) ganz schön in die Materie hinein gekniet und (hoffe ich) eine ganze Menge dazu gelernt. Danke Taucherglocke für Deinen Hinweis auf "Little Boxes". Ich habe die ganze Geschichte von Anfang bis Ende nachgebaut und auch einiges dazu gelernt. Ich habe auch dem Peter Müller eine Mail geschickt, leider hat er nicht geantwortet.


    Wie ich ja schon angedeutet habe, möchte ich die Site responsiv machen. Leider habe ich bis jetzt noch keine funktionierende Lösung für das Hover-Problem (siehe #1) gefunden.


    Daher habe ich darauf ganz verzichtet und angefangen, die Site von grundauf neu zu bauen. Das Grundgerüst steht auf test.schmalfilm-überspielen.de (Stand 19.6.17)


    Jetzt habe ich aber ein neues Problem, an dem ich schon seit Tagen "forsche" und einfach nicht hinbekomme: Die Navigation verhält sich einfach nicht richtig proportional zur Größe des Viewports, obwohl ich durchgängig relative und gleiche Einheiten verwende.


    Die Nav ist links gefloatet, aber ab einer Browserbreite größer 960px verhält sich die horizontale Breite nicht mehr proportional. Zwar könnte ich mit einem Media Querie die Breite begrenzen, dass sieht aber bei hohen Auflösungen doof aus. (siehe main.css)


    Frage 1: Woran liegt das asymmetrische Verhalten der nav ? (genau genommen: nav a ) Sehr gut ist das im Footer zu sehen. Dort habe ich 2 navs mit gleichem Style aber unterschiedlicher Anzahl der li übereinander gestellt. Ich finde einfach keine Erklärung.


    Frage 2: Wenn das o.g. Problem schon nicht in Griff zu bekommen ist: Kann man die nav (nur im Media Querie über 768 pix) irgendwie zentrieren, sodass durch die Zentrierung das Problem obsolet wird?


    Über eine Antwort würde ich mich sehr freuen.


    Viele Grüße von Tommy

  • Hallo


    Dein Vorgehen entspricht nicht mehr dem Stand der HTML-Technik.


    Ich würde folgendermaßen vorgehen. Zu folgendem HTML-Quelltext


    das folgende Grund-CSS:


    Die weitere Gestaltung ( Abstände, Farben, ... ) geschieht dann ganz normal über CSS.


    Eine Beispielseite könnte dann folgendermaßen aussehen:


    Beispielseite für Navigation


    Gruss


    MrMurphy

  • Hi :)


    erstmal vorne weg kurz zu "kommerziell sollte man an ne Agentur geben". Ich bin selbst betroffen, meine Page an der ich bastle ist auch komerziell... aber wenn man Interesse und Spaß an html und css3 hat und ohnehin eine Webseite da ist, warum sollte man sich eine zweite basteln zu irgend einem Hobby... und die Fragen sind die gleichen...


    Eventuell könnte man drüber nachdenken pikiert zu sein, wenn einer ne Webagentur betreibt und mit dem hier erlangten Wissen direkt Geld verdient, aber auch das finde ich pers. ok. In einem Forum ist eine Gemeinschaft und jeder trägt bei was er kann und wenn jemand ein Profi ist, dann trägt er viel bei und wenn er sich dann auch mal um Wissen bereichert, auch wenn das dann für seine gewerbliche Agentur ist, ist das doch ok.


    Aber nur meine Meinung :)


    Bezüglich der Frage


    Technisch kann ich Dir leider nicht besonders helfen. Aber ich habe erst kprzlich meine Homepage, die über die Jahre gewachsen, leider jedoch völlig veraltet war, umdesinged. Alles auf Html5 und css3 und selbstverständlich mobile first.


    Ich hab auch viel mit der Navi gekämpft. Dann war ich glücklich und Stolz wie Oskar, dass ich es geschafft hatte ein Grid zu bauen, das responisve war. Sah aber scheiße aus, zu viele Buttons auf der Seite. Dann, nach zähem Ringen erfolgreich eine Flexbox mit Dropdown gebastelt die auch in der Navi funktioniert hat... nur, da war für mich Ende der Fahnenstange, die zweite Ebene... no way. Ich hab ungelogen über 30 intensive Stunden darin versenkt zu versuchen mir ne Navi zu bauen, nur für die Funktionalität der Navi, vom Rest reden wir da gar nicht und dann aufgegeben.


    (Auch an der Stelle nochmal, von wegen man versucht Geld zu sparen anstelle ne Agentur zu beauftragen... alleine für den Umbau jetzt sind sicherlich über 100 Stunden reingeflossen und noch sehe ich das Ende nicht wirklich)


    Ende vom Lied... ich hab mir ne Navivorlage genommen.


    Nun mag ich Dir nicht raten aufzugeben und Dich einer Vorlage zu bedienen, wenn Du es selbst schaffen willst, aber wenn am Ende des Tages schlussendlich das Ergebnis das ist, was zählt, google mal nach responsive Navigation, da kommen viele verwertbare Ergebnisse, die Du Dir dann individualisieren kannst.

  • Hallo MrMurphy, hi Gunni,


    danke erst mal für Eure Rückmeldungen.

    @ Gunni:

    natürlich hast Du Recht mit "kommerziell sollte man an ne Agentur geben".

    Ich bin aber erst 15 Jahre alt und werde ganz bestimmt keine Konkurrenz zu einer Werbeagentur sein, zumal ich gerade wieder einmal feststelle, dass ich noch ne Menge lernen muss. Vielleicht werde ich in ein paar Jahren dazu in der Lage.


    MrMurphy

    vielen Dank für Deine Mühe. Jetzt muss ich mich erst einmal in die Thematik Flexbox einlesen. Das ist für mich ein völlig neues Thema.

    Was mir aufgefallen ist: Die Beispielsite ist ganz schön abhängig vom Browser. Bei älteren Browsern, egal ob IE, Firefox oder Opera bleibt der Tablettstyle einspaltig, während bei neueren Browsern der geile 2spaltige Style angezeigt wird. Da die Zielgruppe jedoch die Opa-Generation ist, gehe ich mal davon aus, das eine große Anzahl der pot. User noch ältere Browser im Einsatz haben. Frage: Könntest Du eine Korrektur für IE ab 7, (viele Opas haben leichtsinnigerweise noch XP) und die anderen "Opa-Browser" für diese Variante Flexbox einfügen?

    Als Editor verwende ich Dreamweaver CS6 (Version 12.0 Build 5867 - hab leider kein Geld für CC). Dort wird der Desktop-Style gar nicht angezeigt, weder im Entwurf noch in der Live-Ansicht. Nur der mobile-style. Da Du ja das CSS in den HTML-Style eingepflegt hast, kann es an einer fehlenden CSS nicht liegen. Ich glaube, das hat etwas mit den browsereigenen CSS-Styles zu tun. Ich habe mal gelesen, dass man auf der anzuzeigenden Site das browsereigene CSS Browser resetten kann, um dann einheitlich zu stylen. Geht das auch mit der Flexbox?


    So, jetzt muss ich erst einmal was für die Schule machen (nerv!). Ich bedanke mich für Eure Hilfe und würde mich freuen, wenn das Browserproblem noch gefixt werden könnte.


    Viele Grüße

    Tommy

  • Hallo

    Zitat

    Da die Zielgruppe jedoch die Opa-Generation ist, gehe ich mal davon aus, das eine große Anzahl der pot. User noch ältere Browser im Einsatz haben.

    Mal abgesehen davon, dass es überhaupt keine Zielgruppen gibt:


    Wenn ich so einen Unsinn lese kriege ich einen dicken Hals. Das ist schlicht eine Falschinformation. Grade die ältere Generation hat das Geld und die Lust sich aktuelle Geräte zu kaufen.


    Seltsamerweise kommt diese Falschinfo immer von Personen, die sich offensichtlich vor aktuellen HTML-/CSS-Entwicklungen drücken wollen, auch wenn diese bereits seit Jahren problemlos verwendet werden können.


    Gruss


    MrMurphy

  • Na ja, darüber kann man sich streiten. Beide Thesen sind wohl etwas zu verallgemeinert.


    1. Nicht alle älteren Leute nutzen alte Technik.

    2. Nicht alle älteren Leute haben Geld und Lust für bzw. auf aktuelle Technik.


    Die Wahrheit liegt wahrscheinlich wie immer irgendwo dazwischen.


    Bei der Aussage, dass aktuelles HTML und CSS mittlerweile eigentlich bedenkenlos benutzt werden kann, bin ich schon eher bei dir.


    Es gibt zwar immer noch Leute, die alte Browser einsetzen, die solche Techniken nicht unterstützen, aber das ist überwiegend ein sehr kleiner Prozentsatz, den man nicht mehr wirklich beachten muss.

  • Am Besten Du liest meinen Beitrag nochmal, ich hab ne Lanze für Dich gebrochen nicht gegen Dich gerichtetet. ;)


    Das mit den Browsern sehe ich genauso und die Exoten muss man m.e. ohnehin nicht glücklich machen. Deren Leidensdruck befördert das Durchgühren eines Updates

  • Hall MrMurphy,


    Zitat:

    Mal abgesehen davon, dass es überhaupt keine Zielgruppen gibt:


    Wenn ich so
    einen Unsinn lese kriege ich einen dicken Hals. Das ist schlicht eine
    Falschinformation. Grade die ältere Generation hat das Geld und die Lust sich
    aktuelle Geräte zu kaufen.

    Zitat Ende.


    Das stimmt so nicht. Die Zielgruppe, die mit diesem Thema angesprochen werden soll, sind

    Leute im Alter über 70 Jahre. Genau die Seniorengeneration, die in den 50ern und 60ern in ihrer Jugend mit Schmalfilmkameras gefilmt haben, jedoch keinen Ratterprojektor mehr haben, um die alten Filmrollen aus den Nachkriegszeiten sich anzuschauen. Natürlich hat die

    ältere Generation das Geld und die Lust sich aktuelle Geräte zu kaufen. Fast jeder Rentner hat heute einen DVD-Player und Flatscreen. Aber für den Inhalt der alten Filmrollen interessieren sich nun mal in der Regel nur die Leute, welche die damals sehr teuren Filme auch gedreht haben und auf diesen auch jung und schön zu sehen sind. Meistens geht es den alten Leutchen darum, Verwande und Bekannte noch einmal zusehen, welche schon lange verstorben sind. Das ist mit Sicherheit kein Thema für meine Generation. Das wäre ungefähr so, als würdest Du viel Geld für einen Film ausgeben, auf dem wildfremde Menschen stundenlang in der Ostsee planschen.


    Für die Zielgruppe Senioren ist das aber etwas ganz anderes. Bei denen werden Erinnerungen und Assoziationen durch diese Aufnahmen erweckt, die den alten Leutchen eine Menge Freude bereiten.


    Da ich die Site ja für meinen Opa mache, weiss ich auch von ihm, dass tatsächlich fast ausschließlich nur Rentner das Angebot zur 8mm Film Überspielung auf DVD nutzen. Also kann man in diesem Fall tatsächlich von einer Zielgruppe (Ü70) sprechen.


    Daher verstehe ich Deinen Ausraster nicht.

    "Mal abgesehen davon, dass es überhaupt keine Zielgruppen gibt: Wenn ich so
    einen Unsinn lese kriege ich einen dicken Hals. :cursing:Das ist schlicht eine Falschinformation."


    Genau das ist es eben nicht.:!:


    Zitat:

    "Seltsamerweise kommt diese Falschinfo immer von Personen, die sich
    offensichtlich vor aktuellen HTML-/CSS-Entwicklungen drücken wollen, auch wenn
    diese bereits seit Jahren problemlos verwendet werden können."

    Zitat Ende.


    Ich bin gerade mal 15 und beschäftige mich seit reichlich 3 Jahren hobbymäßig mit dem Bau von Internetseiten, und das neben der Schule. Glaubst Du wirklich, ich will mich vor der aktuellen HTML-/CSS-Entwicklung drücken?


    ...auch wenn

    diese bereits seit Jahren problemlos verwendet werden können."


    Vor Jahren habe ich gerade mal Lesen gelernt.


    Eigentlich schade,:( Dein Ausraster. Dein Script hat mir eine Menge Anregungen gegeben.


    Viele Grüße von Tommy










  • neuen Thread​ aufmachen - "schmalfilm-überspielen.de" optimieren?​ 2

    1. Ja (2) 100%
    2. Nein (0) 0%

    Hi - ich muss auch mal meine Senf dazu geben :)
    bitte bitte keine schlechten Emotionen. Dass passiert schnell, weil nur Text schnell Missverständnisse entstehen lässt.

    Jeder möchte hier etwas lernen bzw. unterstützen. Daher Danke an alle für die Beiträge.


    Und zur Schmalfilmseite. Ich finde so einen Dienst gut, da für die Zielgruppe die eigenen Erinnerungen (egal ob Filme oder Fotos) Gold wert sind. Ich habe es bei meiner Mutter erlebt, wie begeistert Sie von den alten überspielten Filmen (nur VHS auf unser NAS) war.


    Und genial ist immer, wenn man eine klare Zielgruppe hat.

    Und was lernen wir aus der Diskussion: Erst mal den Betrieber der Seite frage, wer so die Zielgruppe ist.


    Ich finde es auch beeindruckend, dass man mit 14 eine solche Website auf die Füße stellt und sich auch der Diskussion stellt. Weiter so - so bekommt man eine steile Lernkurve hin. Und ich kann mir vorstellen, dass dies viel mehr bringt, als irgend eine angeblich professionelle Lösung. Warum: Opa und Enkel stellen etwas auf die Beine und können so lange daran feilen, dass es perfekt passt. Und das für ein Service, der schätzungsweise mehr aus Liebe zur Technik und Film als wegen Geld betrieben werden dürfte. Daher wäre es auch nicht so sinnvoll, es aus den Händen zu geben und dann mit einem festgefrorenen Stand zu arbeiten.


    Die Seite hat noch Potential. Was haltet ihr davon, dass wir einen neuen Thread aufmachen - "schmalfilm-überspielen.de" optimieren? Vorschläge von Diskussionsteilnehmern und die Umsetzung dann von Tommy2. Ich denke es ist auch interessant, wenn man die Entwicklungsstände per Screenshoots festhält (wenn das für Tommy2 und seinen Opa ok ist).

  • Hi Gunni,


    ich hab das schon so (positiv) verstanden, wie Du das gemeint hast.


    Axel : Ich schreibe später was dazu, versprochen.


    Ich lese mich aber erst einmal in die Flexbox ein. Völlig neuer stuff für mich. Ich habe da blos das mit den Achsen noch nicht so begriffen, kriege ich aber hin. Da ich aber alles ganz genau wissen will, kann das bissl dauern. Ich fange gerade erst an. Danke für Eure Unterstützung.


    Gruß Tommy

  • Hallo Axel,


    versprochen ist versprochen (oder sollte es besser heißen: angedroht ist angedroht ...):evil:
    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:cursing:)

    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.:evil:


    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. :saint:

    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? :?:

  • Ich bin ja auch ein Anfänger und bastel rum ohne die Wissenstiefe zu haben, die ich haben sollte, was immer wieder Hürden für mich darstellt weil ich dDnge die total einfach sind versuche neu zu erfinden oder mir einfach grundlagen fehlen, die mich verzweifeln lassen... alleine display, float und block haben mich schon Stunden über Studen gekostet, einfach aus unwissenheit...



    Daher will ich technisch gar nicht so viel sagen, nur zwei kleine Anmerkungen.


    Wenn Du ne endlos lange Seite hast und die Leute sollen wieder zurück zum Anfang kommen können musst Du die Navi nicht nochmal unten einbauen, da langt ein augenfälliger link "zurück zum Seitenanfang" Guck mal unter dem Thema "Sprungmarken". :) Im Grunde einfach. Wo auch immer du willst fügst Du in ein Element (kann z.b, auch ein < p > sein einfach ein id="name" ein (zb. Id="anfang" oder mitte oder was auch immer, also z.B. <h1 id="anfang">) und Deine Sprungmarke ist dann effektiv ein link mit dem Ziel href="#anfang" wird der angeklickt springt die Seitenanzeige hoch zum vergebenen id. Probiers einfach mal aus.


    Wer sagt denn, dass bei ner Flexbox keine Listen verwendet werden? :)

    Bezüglich Flexbox und Navigation ist das hier vielleicht ganz hilfreich https://css-tricks.com/flexbox-bar-navigation/

    Da sieht man schön was was macht, wie die Veränderung ist und auch das ist mit Listen gebaut :)


    Nicht vom javascript abschrecken lassen, flexbox geht auch ganz ohne js, das ist nur damit man die Einstellungen testen kann. Du kannst die Flexbox auch als Dropbox gestalten zum auf und zuklappen von Unterpunkten und Du kannst ein Topmenue drüber hängen damit das übliche Erscheinungsbild auf kleinen Bildschirmen erreicht wird. Multilvl geht auch... hab ich mir sagen lassen, aber da hab ich entnervt irgendwann aufgegeben und mir ne navi mit checkbox zu eigen gemacht und umgebastelt :)

  • Hi Gunni,

    danke für Deine Rückmeldung. Thema Sprungmarke nach oben: Das habe ich ja auf der alten Site eingesetzt. Die Idee war:


    Variante alt (mit Sprungmarke): 1.User klickt (oder wischt) nach oben, um dann im Nav noch mal zu klicken, um auf die nächste Unterseite zu kommen. Also 2 Mal klicken.


    Variante neu (mit Navi unten): 1.User ist am Ende der Seite und klickt OHNE Umweg SOFORT zur nächsten Seite. OHNE Zwischenschritt "Sprungmarke nach oben" und OHNE ggf. noch mal "Menü aufklappen"


    Du sparst dadurch einen Wisch und 2 Touch ein.


    Zum Thema Flexbox und Nav: Schau Dir mal den Quellcode von MrMurphy (Beitrag #5 in diesem Thread) an. Das Nav funktioniert, hat aber kein ul und li.


    Gruß Tommy

  • Zur Nav und ul: Es gibt immer mehrere Möglichkeiten sein HTML aufzubauen. Mit der Zeit haben sich bestimmte Dinge, wie z.B. die Verwendung einer ul in einer Nav, mehr oder weniger zum Standard entwickelt. Dies heißt aber noch lange nicht, dass man sich daran halten muss.


    MrMurphy macht das in dem Fall ein wenig anders, aber das ist auf keinen Fall falsch. In vielen Fällen ist das vielleicht sogar die praktischere Variante. Aber zu seinen Beweggründe soll er selber was sagen...



    Tommy2 Ich muss echt sagen, in gewisser Weise beeindruckt mich deine Geschichte. So Stories hört man immer gerne. :)


    Von einem solchen Dorf habe ich auch noch nie was gehört. Dass Leute immer noch so alte Technik verwenden, kann man gar nicht mehr richtig glauben heutzutage. :D

  • @ JR:

    MrMurphy macht das in dem Fall ein wenig anders, aber das ist auf keinen Fall falsch.


    Ich habe nicht gesagt, dass ich das für falsch halte. Ganz im Gegenteil: Ich bin begeistert, dass das so einfach funktioniert. Nur wollte ich wissen, wieso das ohne Deklaration von ul und li funktioniert.


    Zu der (etwas abschweifenden) Hintergrundgeschichte: Ich habe das blos geschrieben, weil in #5 geschrieben wurde

    Mal abgesehen davon, dass es überhaupt keine Zielgruppen gibt

    Es ging um Browserfixes für ältere Browser für die Zielgruppe Ü70.

    Zumindest bei älteren Dorfbewohnern hier im Ort ist das tatsächlich so, dass diese veraltete Technik und Software benutzen. Die sind das aus der DDR so gewohnt, dass man einmal Angeschafftes lange benutzt und erst ersetzt, wenn es nicht mehr zu reparieren ist. Offensichtlich war das früher so, dass die Dinge "für die Ewigkeit" gebaut wurden und tatsächlich "ewig" hielten. Große Weiterentwicklungen an einer einmal gekauften Sache gab es kaum, sagt Opa. Außer, wenn der Nutzen offensichtlich ist. Moderne Flachbildfernseher haben (fast) alle. Aber mit einem alten Computer kann man genauso Briefe und Mails schreiben bzw. Surfen, wie mit einem neuen. Deshalb kaufen sie sich lieber einen neuen Fernseher oder ein neues Auto, als einen neuen Computer, solange der alte noch läuft. Ist halt so (zumindest bei den meisten Älteren hier im Dorf):(


    Gruß Tommy