zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Einbinden von Social Media Buttons in HTML5-Dokument

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 14.06.2013, 17:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2012
Beiträge: 57
herb3472 befindet sich auf einem aufstrebenden Ast
Standard Auf welchen bzw. wievielen Seiten soll ich Social Media Buttons einbinden?

Die Übung scheint gelungen....nun stellt sich mir die Frage, auf welchen bzw. wievielen Seiten ich die Social Media Buttons einbinden soll, damit es Sinn macht....soll ich lediglich die Startseite damit ausstatten, oder auch diverse Sub-Seiten mit unterschiedlichen Inhalten für "Quereinsteiger"? Derzeit habe ich bis auf die php-Kontakt- und Anfrageformulare alle Seiten mit den Buttons ausgestattet, bin mir aber nicht sicher, ob das nicht ein wenig zu viel des Guten ist...

MfG Herb

Gasthof Thaller Lebring/Austria

Geändert von herb3472 (14.06.2013 um 18:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 14.06.2013, 18:13
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

meine Meinung: gehört generell in den Head-Bereich, also auf jede Seite.

Was anderes: du hast die Seite responsive gemacht.. versucht. Kurz bevor der Scrollbalken kommt, passen deine SM Buttons nicht mehr (Screenshot).

Responsive generell: die Navi nach unten ist ok. Dann setz oben einen Skip-Link hin. Nach unten fehlt auch noch ein Breakpoint bzw. eine mindest Breite. Kleine Tablets haben z.B. 600x800px.
Schau dir den hover Effekt deiner Navi (unten) nochmal an.
Das ganze js besser nach unten in den Quelltext.
Im IE8 geht das responsive nicht richtig --> die Navi bleibt oben.
Angehängte Grafiken
Dateityp: jpg austria.jpg (37,8 KB, 3x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 14.06.2013, 20:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2012
Beiträge: 57
herb3472 befindet sich auf einem aufstrebenden Ast
Standard

@Manfred62:
Danke für die schnelle und umfangreiche Rückmeldung.

Zitat:
meine Meinung: gehört generell in den Head-Bereich, also auf jede Seite.
Dachte ich auch, und so hab ich's derzeit auch gemacht...mit zwei Ausnahmen. Die Kontaktformulare sind php-Dateien, und für die Kontaktformulare halte ich Social Media Buttons ohnenhin nicht für sinnvoll, oder?

Zitat:
Dann setz oben einen Skip-Link hin.
Was meinst damit.....was soll ich oben überspringen?

Zitat:
Nach unten fehlt auch noch ein Breakpoint bzw. eine mindest Breite. Kleine Tablets haben z.B. 600x800px.
Ja, ein leidiges Thema. Ich hab lange gesucht, aber kein Rezept für die optimalen Schwellenwerte gefunden. Und für eine einzige Website wollte ich kein Diplomstudium absolvieren. Ich habe z.B. ein iPad mit Retina Display, da hätte ich gern die Menüleiste oben wie beim Desktop..aber wenn ich die Schwellenwerte so einstelle, klappt es bei meinem Smartphone nicht, und vice versa. Ich weiß einfach nicht, welche Parameter ich wie am besten einstellen soll. Hast Du vielleicht einen Lösungsansatz für mich?

Zitat:
Schau dir den hover Effekt deiner Navi (unten) nochmal an
Tja *seufz*, die leidigen unteren Navis sind meine Stiefkinder Wie einfach war die Welt doch noch , als es nur Desktops und keine Smartphones, Tablets und Touchscreens gab!

Zitat:
Das ganze js besser nach unten in den Quelltext.
Alle js Scripts, auch den von Google Analytics?

Eine Frage bezüglich JQuery: ich verwende für die Slideshow auf der Startseite und für die 2Click Social Media Buttons das jquery 1.8.2. Eine Seite mit galleriffic.js Fotogalerie verwendet allerdings jquery 1.9.1 (war so vorgegeben). Ich dachte, jquery 1.9.1 sei abwärtskompatibel, und wollte die ältere Version 1.8.2 auch bei den Social media Buttons durch die neuere ersetzen. Funzt aber nicht...falsch gedacht, oder Fehler gemacht?

Zitat:
Im IE8 geht das responsive nicht richtig --> die Navi bleibt oben.
Ist mir bewußt, aber pragmatisch gedacht: 1. wer verwendet heute noch den iE8? Und 2. - die entscheidene Frage - wer verwendet den iE8 überhaupt auf einem Smartphone?

MfG Herb
Mit Zitat antworten
  #14 (permalink)  
Alt 14.06.2013, 21:24
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

SM Buttons: alle Seiten

skip-link: damit man weiss, dass es eine Navigation gibt. Der Link führt/springt dann nach unten.
Responsive Web Design Patterns | This Is Responsive
dort 'Footer Anchor'

Breakpoints: i.d.R. werden folgende Werte verwendet (kann, kein muss)
320px mobile Portät
480px mobile landscape
600px kleine (alte) Tablets Porträt
768px große Tablets Porträt
1024px Tablets landscape
1140px Desktop
1200px Desktop ...
Beispiel Code:
Code:
/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

}

@media only screen and (max-width: 479px) {

}

/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
Scripts: den GA auf alle Fälle. Die anderen auch --> testen.

Jquery: gibts ev. eine neuere Version des Scripts für die SM?
Da müsste man wohl eher ein JS Fachmann fragen.

IE8:
zu 1. alle Nutzer von Windows XP haben den 8er (Zielgruppe?? Freaks, welche immer den neuesten Hype-Browser nutzen. Oder ältere Herrschaften, welche von solchen Dingen eher wenig Ahnung haben.)
zu 2. dann einfach das responsive für den IE8 unterbinden durch eine feste Breite.
Mit Zitat antworten
  #15 (permalink)  
Alt 14.06.2013, 21:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2012
Beiträge: 57
herb3472 befindet sich auf einem aufstrebenden Ast
Standard

Herzlichsten Dank vorerst einmal! Brauche da jetzt ein paaar Tage Zeit, um das umzusetzen.

MfG Herb
Mit Zitat antworten
  #16 (permalink)  
Alt 14.06.2013, 22:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Breakpoints: i.d.R. werden folgende Werte verwendet (kann, kein muss)
[Gerätebezogene Pixelwerte]
Als wesentlich sinnvoller erweist es sich, die Breakpoints durch den Inhalt bestimmen zu lassen. Gerätemaße sind kein sinnvoller Maßstab, es gibt viel zu viele und es ändert sich dauernd.
Z.B. für die horizontale Navigation oben: Das Fenster so weit zusammenschieben, bis es noch gut reinpasst. Den Breitenwert vom html-Element in em umrechnen, das ist dann der passende Breakpoint für die Navigation -- völlig egal, mit welchem Gerät jemand ankommt. Und sogar egal, welche Schriftgröße eingestellt ist. Pixelbreiten und Text passen nicht zusammen.

Das wichtigste, wenn man ein Responsive Layout erstellen will, ist das Viewport-Meta-Element.
Code:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Sonst nützen die Media-Queries nicht viel.
Eine Trennung der Stylesheets halte ich auch für wenig sinnvoll, eben weil Breakpoints sich nicht pauschal auf alles anwenden lassen. Alles in ein Stylesheet, darin passende @media-Regeln verwenden.
Mit Zitat antworten
  #17 (permalink)  
Alt 15.06.2013, 13:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2012
Beiträge: 57
herb3472 befindet sich auf einem aufstrebenden Ast
Standard

@fricca:

Zitat:
Gerätemaße sind kein sinnvoller Maßstab, es gibt viel zu viele und es ändert sich dauernd.
Das mußte auch ich mit Bedauern feststellen.

Zitat:
Das wichtigste, wenn man ein Responsive Layout erstellen will, ist das Viewport-Meta-Element.
Leider ist mir das bei meinen bisherigen Recherchen entgangen. Es jetzt nachzurüsten, würde (wird?) umfangreiche Umbauarbeiten erfordern. Ich müßte den gesamten Kopfbereich ändern.

Zitat:
Sonst nützen die Media-Queries nicht viel.
Naja: nach meinem Geschmack macht sich mein Layout (für den Zweck, für den ich es gestaltet habe) ganz gut - sowohl auf dem Desktop als auch auf Smartphones und Tablets, sowohl im Landscape- als auch im Portrait-Format. Es ist übersichtlich, "aufgeräumt" und formatfüllend. Die (neu implementierten) Social Media Buttons wirken etwas störend - zumindest auf dem Smartphone. Aber da bin ich dabei, über eine bessere Lösung nachzudenken (sofern ich sie nicht überhaupt wieder ersatzlos entferne, denn ein Facebook- und Twitter-Freund bin ich sowieso nicht). Die Media-Queries dienen mir hauptsächlich dazu, die Bildschirm-Breite optimal auszunutzen und die Navigationsmenüs zwischen Desktop und Handheld umzuschalten. (Schönheitsfehler: auf einem iPad4 mit Retina Display würde sich das Desktop Menü besser machen als das Menü am Seitenfuß). Nicht einverstanden, nicht gut gelöst?

MfG Herb

Geändert von herb3472 (15.06.2013 um 13:15 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 15.06.2013, 13:33
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.494
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von herb3472 Beitrag anzeigen
... Leider ist mir das bei meinen bisherigen Recherchen entgangen. Es jetzt nachzurüsten, würde (wird?) umfangreiche Umbauarbeiten erfordern. Ich müßte den gesamten Kopfbereich ändern...
Kommt darauf an. Wenn jede Seite einzeln ist, dann ist das Aufwand. Arbeitest du mit einem Template, musst du das nur einmal im Template ändern.
__________________
Personal stuff
Mit Zitat antworten
  #19 (permalink)  
Alt 15.06.2013, 15:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2012
Beiträge: 57
herb3472 befindet sich auf einem aufstrebenden Ast
Standard

Ich schreibe jede Seite einzeln mit dem Texteditor. Der Aufwand, mich in ein CMS einzuarbeiten, erscheint mir für eine einzige Website doch ein wenig hoch. Vor Allem dann, wenn es an's Eingemachte geht - an die Gestaltung eigener Templates und um dynamische Inhalte.

Vorgefertigte Gratis-Templates sind normalerweise nicht resizeable und nicht für den Einsatz mit Media Queries gedacht (wie denn auch?), und auch nicht unbedingt Ausdruck herausragender gestalterischer Kreativität. In der Regel sind sie als Massenware erkennbar, manche damit gestaltete Seiten gleichen einander wie ein Ei dem anderen. Für News oder Blogs ist das ja o.k., für mich selbst möchte ich aber kein Design von der Stange.

Ich habe so gut wie keine dynamischen Inhalte zu verwalten. Saisonale Announcements mache ich grafisch mit Photoshop, und die paar Zeilen, die in der Speisekarte zu ändern sind, schreibe ich direkt mit dem Texteditor hinein.

Fazit:
Für statische Inhalte ist meines Erachtens eine einfache html-Seite ohne Datenbank-Overhead noch immer das Mittel der Wahl. Sie ist transparenter, einfacher zu warten (keine Versions-Upgrades), und unempfindlicher gegen Hacker-Angriffe. Freilich, wenn es um grundlegende, strukturelle Änderungen geht, die alle oder mehrere Seiten betreffen, artet das schon mal in Arbeit aus.

MfG Herb
gasthof-thaller.com
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 15.06.2013, 16:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von herb3472 Beitrag anzeigen
Leider ist mir das bei meinen bisherigen Recherchen entgangen. Es jetzt nachzurüsten, würde (wird?) umfangreiche Umbauarbeiten erfordern.
Das ist die Grundvoraussetzung, wenn du ein responsives Layout erstellen willst.



Zitat:
Naja: nach meinem Geschmack macht sich mein Layout (für den Zweck, für den ich es gestaltet habe) ganz gut - sowohl auf dem Desktop als auch auf Smartphones und Tablets, sowohl im Landscape- als auch im Portrait-Format.
Die mobilen Browser gehen ohne Viewport-Meta davon aus, dass dein Layout nicht angepasst ist. Deshalb wird alles ausgehend von ca. 980px Breite skaliert. Du hast zwar eine riesige Navigation, aber der Haupttext ist nicht lesbar. Das hilft nicht wirklich, weil man trotzdem rumzoomen muss. Nicht Fisch, nicht Fleisch.
Dann lieber dieses handheld.css weglassen und die mobilen Browser ihre Arbeit verrichten lassen.

Und ja, wenn du den Viewport-Meta dazunimmst musst du dein Stylesheet anpassen. Du brauchst z.B. keine riesigen Schriftgrößen für die Navigation. Im Moment ist die Seite auf Kleingeräten kaputt.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Offizielle Social Share Counter Buttons nicht valide? japanworm CSS 4 11.11.2011 16:52
SWF FLV Media Player einbinden? webseite_freaky (X)HTML 2 31.08.2008 11:06
Media Player einbinden und Datein abspiel von Lokalem ... ThorstenSt (X)HTML 6 21.04.2006 21:53
Problem mit dem Menü [erledigt] Julian CSS 2 16.01.2006 00:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:31 Uhr.