✔ Ebay Template responsive
- Themenstarter floboof12
- Beginndatum
Artesia
Grafiker
@floboof12:
Das Problem muss nicht bei dir liegen, eBay hat zurzeit jede Menge hausgemachte technische Probleme. Am schlimmsten ist die App betroffen aber auch in anderen Bereichen funzt alles eher suboptimal. In eBay-Forum hagelt es schon seit Monaten mit Beschwerden. Mit dem Programmierer von eBay will man im Moment nicht tauschen. ;-)
Ich schreibe mittlerweile alles in simplem HTML ohne Breitenangaben, nur mit margin und padding, anstatt Grafiken gibts nur CSS und auf Bilder verzichte ich in AB möglichst ganz.
Im Endeffekt ist der ganze Schnickschnack, Logos und Sonstiges auch irrelevant. Die meiste eBayer interessieren sich nur noch für den Preis und die Bilder im Galerie. Selbst die AB wird kaum gelesen.
Das Problem muss nicht bei dir liegen, eBay hat zurzeit jede Menge hausgemachte technische Probleme. Am schlimmsten ist die App betroffen aber auch in anderen Bereichen funzt alles eher suboptimal. In eBay-Forum hagelt es schon seit Monaten mit Beschwerden. Mit dem Programmierer von eBay will man im Moment nicht tauschen. ;-)
Ich schreibe mittlerweile alles in simplem HTML ohne Breitenangaben, nur mit margin und padding, anstatt Grafiken gibts nur CSS und auf Bilder verzichte ich in AB möglichst ganz.
Im Endeffekt ist der ganze Schnickschnack, Logos und Sonstiges auch irrelevant. Die meiste eBayer interessieren sich nur noch für den Preis und die Bilder im Galerie. Selbst die AB wird kaum gelesen.
Hallo,
danke für deine Antwort. Ich hab es nun auch etwas anders gelöst.
Ich arbeite mit festen Breiten solange eine bestimmt Bildschrimbreite gegeben ist. Kommt man unter diese Bildschirmbreite (Smartphone etc.) werden unwichtige Elemente ausgeblendet und statt festen Breiten kommen wieder die relativen Breiten zum Einsatz.
So wird das Template vernünftig in der Desktop-Ansicht als auch in der mobilen Ansicht (Ebay-App etc.) angezeigt.
danke für deine Antwort. Ich hab es nun auch etwas anders gelöst.
Ich arbeite mit festen Breiten solange eine bestimmt Bildschrimbreite gegeben ist. Kommt man unter diese Bildschirmbreite (Smartphone etc.) werden unwichtige Elemente ausgeblendet und statt festen Breiten kommen wieder die relativen Breiten zum Einsatz.
So wird das Template vernünftig in der Desktop-Ansicht als auch in der mobilen Ansicht (Ebay-App etc.) angezeigt.
Guten Tag Zusammen,
es tut mir leid, wenn ich das Thema nochmals aufgreifen muss.
Könnte mir bitte auch kurz jmd. bei der Umsetzung des Media Query behilflich sein? Gerne auch per PN.
Den Link von SpiceLab (http://code-tricks.com/css-media-queries-for-common-devices/) hatte ich bereits vor Tagen im Netz gefunden. Nur leider schaffe ich es nicht dieses in einer CSS Datei mit meinem aktuellen Template "zu verbinden".
Könnte mir kurz jemand auf die Sprünge helfen, wie ich die Fehlermeldung "Inhaltsbreite - Die Inhaltsbreite ist größer als die Viewport-Breite" von http://www.i-ways.net/mobile-friendly/de beseitige? Alle anderen Meldungen, welches der Drittanbieter zur mobilen Ansichts-Überprüfung bemängelt habe, konnte ich beseitigen... Nur leider nicht die Inhaltsbreite.
Kann ich den MediaQuery in die HMTL Datei direkt einsetzen? Wie / Wo / Was?
Danke
Bin für jeden Tipp / Link / Hinweis dankbar!
Beste Grüße
Bnic3
es tut mir leid, wenn ich das Thema nochmals aufgreifen muss.
Könnte mir bitte auch kurz jmd. bei der Umsetzung des Media Query behilflich sein? Gerne auch per PN.
Den Link von SpiceLab (http://code-tricks.com/css-media-queries-for-common-devices/) hatte ich bereits vor Tagen im Netz gefunden. Nur leider schaffe ich es nicht dieses in einer CSS Datei mit meinem aktuellen Template "zu verbinden".
Könnte mir kurz jemand auf die Sprünge helfen, wie ich die Fehlermeldung "Inhaltsbreite - Die Inhaltsbreite ist größer als die Viewport-Breite" von http://www.i-ways.net/mobile-friendly/de beseitige? Alle anderen Meldungen, welches der Drittanbieter zur mobilen Ansichts-Überprüfung bemängelt habe, konnte ich beseitigen... Nur leider nicht die Inhaltsbreite.
Kann ich den MediaQuery in die HMTL Datei direkt einsetzen? Wie / Wo / Was?
DankeBin für jeden Tipp / Link / Hinweis dankbar!
Beste Grüße
Bnic3
Edit: Sorry für erneutes Schreiben aber,
ich hab dazu auch noch etwas anderes gefunden.
Was ich nur nicht verstehe, muss in dem CSS noch etwas editiert werden oder kann ich das 1:1 so übernehmen und dann (wie?) in HTML einbinden.
Kann auch gerne meinen HTML Code per Mail oder anderweitig zusenden, wenn dies hilfreich ist - mir zu helfen.
Das hier habe ich noch gefunden: (Muss hier was in die geschweiften Klammern? So wie bei dem Link von SpiceLab --> "Your style goes here..."?)
ich hab dazu auch noch etwas anderes gefunden.
Was ich nur nicht verstehe, muss in dem CSS noch etwas editiert werden oder kann ich das 1:1 so übernehmen und dann (wie?) in HTML einbinden.
Kann auch gerne meinen HTML Code per Mail oder anderweitig zusenden, wenn dies hilfreich ist - mir zu helfen.
Das hier habe ich noch gefunden: (Muss hier was in die geschweiften Klammern? So wie bei dem Link von SpiceLab --> "Your style goes here..."?)
CSS:
/* -----------------------------------------------
---- Base ----------------------------------------
------------------------------------------------*/
/* Basic-Styles - e. g. for 960/1.000 Pixel Wrap */
/* -----------------------------------------------
---- Media Queries -------------------------------
------------------------------------------------*/
/* Mobile/Smartphone - Portrait-Modus */
@media
only screen and (min-width: 320px) and (max-width: 479px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
}
/* Mobile/Smartphone - Landscape-Modus */
@media
only screen and (min-width: 480px) and (max-width: 767px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
}
/* Mobile/Tablets - Portrait-Modus */
@media
only screen and (min-width: 768px) and (max-width: 959px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
/* New iPad - iPd 3 - Retina Display */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
}
/* Desktops - Viewport 1.300+ Pixel */
@media
only screen and (min-width: 1300px) {
}
Zuletzt bearbeitet von einem Moderator:
Hallo
du scheinst noch nicht viele Erfahrungen mit Foren zu haben. Deshalb zunächst ein paar grundsätzliche Infos.
In der Regel wird es nicht gern gesehen wenn alte Diskussionen "geentert" werden. Für neue Anfragen sollten auch neue Themen eröffnet werden. Häufig trennen Admins solche Vermengungen wieder auf.
Auch abgetrennte Einzelberatungen sind in der Regel nicht gerne gesehen. Die Helfenden fordern keine Bezahlung, ihr "Lohn" ist aber dass ihre Antworten vielen Usern helfen können. Außerdem kann ich mich zum Beispiel nur weiter entwicklen, wenn andere User ihre Meinungen zu meinen Antworten beitragen.
Warum zeigst du deinen Quelltext nicht? Es kommt mir immer etwas seltsam vor, wenn Hilfswilligen Informationen vorenthalten werden, die aber im Endeffekt der ganzen Welt gezeigt werden (sollen). Du kannst ja auch nur den relevanten Teil der Webseite bei einem Freeware-Provider wie bplaced.net veröffentlichen. So muss nicht jeder Hilfswillige aus deinen Angaben seine eigene, dazu noch unvollkommene, Webseite erstellen.
Zu deinem eigentlichen Problem:
Da hast du leider veraltete Informationen erwischt. Zu Beginn des responsive Layout waren einige Webseitenersteller der Ansicht, dass es mobile Geräte nur mit einer überschaubaren Anzahl von Auflösungen geben wird. Das hat sich aber schnell als Irrtum erwiesen. Inzwischen gibt es bereits über 250 unterschiedliche Touchscreengrößen, zu denen immer wieder neue hinzukommen.
Deshalb hat es sich als unmöglich und unsinnig erwiesen Webseiten an verschiedene Geräte anzupassen.
Als sinnvoll hat sich hingegen erwiesen, das responsive Design dem Inhalt anzupassen. Dabei wird geschaut bei welchen Fensterbreiten sich Probleme im Layout ergeben und diese dann korrigiert.
Als zweitbeste Lösung wird ein allgemeines responsives Layout erstellt und der Inhalt so eingefügt dass alles passt. Das ähnelt dem Vorgehen von Frameworks wie zum Beispiel Bootstrap. In der Regel wird dazu ein Grid-System angelegt.
Bei Ebay müssen einige Einschränkungen beachtet werden.
Als wichtigster Grundsatz gilt, dass user-eigene CSS-Angaben sich nicht auf das Ebay-Layout auswirken dürfen, also den Angaben die Ebay auf der Webseite bereitstellt. User, die das nicht beachten, werden meist ohne Diskussion oder gar Widerspruchsmöglichkeit gesperrt.
Ebay führt grade einige Verschärfungen ein, speziell für gewerbliche Anbieter. So werden Angebote mit einem responsive Layout wohl bevorzugt (weiter vorne) als solche mit einem veraltetem starren Layout in den Ergebnislisten angezeigt.
Der eigene Quelltext wird über ein iFrame eingebunden, welches mittels JavaScript mit den Angaben von Ebay verknüpft wird. So ist für die Informationen in den iFrames kein eigener head-Bereich und kein Doctype vorgesehen.
Von daher müssen CSS-Angaben in den eigenen HTML-Quelltext eingefügt werden. Entweder mit einem Link zu einer externen CSS-Datei. Das bleibt meiner Kenntnis nach zulässig und erscheint mir am sinnvollsten. Oder in einem style-Element im HTML-Quelltext. Das ist zwar nach den HTML-/CSS-Regeln so nicht vorgesehen, wird aber von den verbreiteten Browsern korrekt ausgeführt.
Mit dem bislang häufig benutzten Inline-CSS über das style-Attribut direkt in einem Element ist ein von Ebay gefordertes responsive Layout mit Media Queries nicht möglich.
Gruss
MrMurphy
du scheinst noch nicht viele Erfahrungen mit Foren zu haben. Deshalb zunächst ein paar grundsätzliche Infos.
In der Regel wird es nicht gern gesehen wenn alte Diskussionen "geentert" werden. Für neue Anfragen sollten auch neue Themen eröffnet werden. Häufig trennen Admins solche Vermengungen wieder auf.
Auch abgetrennte Einzelberatungen sind in der Regel nicht gerne gesehen. Die Helfenden fordern keine Bezahlung, ihr "Lohn" ist aber dass ihre Antworten vielen Usern helfen können. Außerdem kann ich mich zum Beispiel nur weiter entwicklen, wenn andere User ihre Meinungen zu meinen Antworten beitragen.
Warum zeigst du deinen Quelltext nicht? Es kommt mir immer etwas seltsam vor, wenn Hilfswilligen Informationen vorenthalten werden, die aber im Endeffekt der ganzen Welt gezeigt werden (sollen). Du kannst ja auch nur den relevanten Teil der Webseite bei einem Freeware-Provider wie bplaced.net veröffentlichen. So muss nicht jeder Hilfswillige aus deinen Angaben seine eigene, dazu noch unvollkommene, Webseite erstellen.
Zu deinem eigentlichen Problem:
Da hast du leider veraltete Informationen erwischt. Zu Beginn des responsive Layout waren einige Webseitenersteller der Ansicht, dass es mobile Geräte nur mit einer überschaubaren Anzahl von Auflösungen geben wird. Das hat sich aber schnell als Irrtum erwiesen. Inzwischen gibt es bereits über 250 unterschiedliche Touchscreengrößen, zu denen immer wieder neue hinzukommen.
Deshalb hat es sich als unmöglich und unsinnig erwiesen Webseiten an verschiedene Geräte anzupassen.
Als sinnvoll hat sich hingegen erwiesen, das responsive Design dem Inhalt anzupassen. Dabei wird geschaut bei welchen Fensterbreiten sich Probleme im Layout ergeben und diese dann korrigiert.
Als zweitbeste Lösung wird ein allgemeines responsives Layout erstellt und der Inhalt so eingefügt dass alles passt. Das ähnelt dem Vorgehen von Frameworks wie zum Beispiel Bootstrap. In der Regel wird dazu ein Grid-System angelegt.
Bei Ebay müssen einige Einschränkungen beachtet werden.
Als wichtigster Grundsatz gilt, dass user-eigene CSS-Angaben sich nicht auf das Ebay-Layout auswirken dürfen, also den Angaben die Ebay auf der Webseite bereitstellt. User, die das nicht beachten, werden meist ohne Diskussion oder gar Widerspruchsmöglichkeit gesperrt.
Ebay führt grade einige Verschärfungen ein, speziell für gewerbliche Anbieter. So werden Angebote mit einem responsive Layout wohl bevorzugt (weiter vorne) als solche mit einem veraltetem starren Layout in den Ergebnislisten angezeigt.
Der eigene Quelltext wird über ein iFrame eingebunden, welches mittels JavaScript mit den Angaben von Ebay verknüpft wird. So ist für die Informationen in den iFrames kein eigener head-Bereich und kein Doctype vorgesehen.
Von daher müssen CSS-Angaben in den eigenen HTML-Quelltext eingefügt werden. Entweder mit einem Link zu einer externen CSS-Datei. Das bleibt meiner Kenntnis nach zulässig und erscheint mir am sinnvollsten. Oder in einem style-Element im HTML-Quelltext. Das ist zwar nach den HTML-/CSS-Regeln so nicht vorgesehen, wird aber von den verbreiteten Browsern korrekt ausgeführt.
Mit dem bislang häufig benutzten Inline-CSS über das style-Attribut direkt in einem Element ist ein von Ebay gefordertes responsive Layout mit Media Queries nicht möglich.
Gruss
MrMurphy
Hallo MrMurphy,
vielen Dank für Dein ehrliches Feedback.
In der Tat ist es so, dass das im Allgemeinen mein 2ter oder 3ter Forumsbeitrag ist. Daher ein Danke an die Hinweise/Zurechtweisung und ein Entschuldigung (an alle) gleich hinterher.
Ich wollte hier kein Chaos verursachen oder in Missgunst fallen. Mir war nur bewusst, dass es anderweitig immer heißt "benutze die Forensuche und erstelle nicht ständig ein neues Thema..." - dachte das greift hier auch... Sorry
"Per PN" nur als Option, dass ich nicht andere mit den jedem-außer-mir bekannten Lösungen nerve und einen für alle HTML / CSS versierten User/Leser einen in ihren Augen überflüssigen Beitrag erstelle. Der HTML Code "gehört" nicht wirklich mir, sondern ich versuche mit meinem begrenzten Verständnis einem befreundeten Händler zu helfen. Daher konnte ich bisher noch nicht abklären, ob eine Veröffentlichung soweit i.O. geht.
Zu dem eigentlichen Problem und Deinem Feedback dazu:
Verschiedene, an Anzahl ständig wachsende Displaygrößen: hab ich verstanden - macht mit Deiner Erklärung Sinn.
Media Query fällt für uns also als Lösungsansatz weg. (Sofern man diesen nicht ständig mit neuen Displaygrößen füttern möchte.)
(Hoffe das mit dem Zitieren funktioniert - wie gesagt: Foren-Amateur )
Wie genau schaut das aus? Wie kann ich das einfach umsetzen und in HTML einbinden? Gibt's da was fertiges für alle? Kann ich das wo nachlesen und mit begrenztem Know-How in der Sache selbst erarbeiten? Das "einfachste" wäre natürlich wenn es etwas open-yource fertiges gibt ála hier in den headBereich kopieren.
Der Shop ist bereits seit einiger Zeit am Laufen (Template nicht responsive, Bilder, Verkäufe etc. stehen...). Der Shop soll nun "nur" für die ebay-Auflagen / i-ways mobile Reform angepasst werden. Ich habe mir zusammengelesen, dass es (auf Deinen ersten Tipp: Das Design den Inhalt anpassen) mit dem Befehl <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> funktionieren sollte, was es aber leider nicht tut.
"Mein" Headbereich für ein ebay template schaut wie folgt aus:
.......
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="http://.....cssmenuetabelle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="......Responsive_Design_Versuch.css" type="text/css" media=screen"/>
(hier hatte ich versucht die CSS Datei des oben veröffentlichten Media Query zu nutzen)
</head>
.....
Danke Dir für Deine Mühen.
vielen Dank für Dein ehrliches Feedback.
In der Tat ist es so, dass das im Allgemeinen mein 2ter oder 3ter Forumsbeitrag ist. Daher ein Danke an die Hinweise/Zurechtweisung und ein Entschuldigung (an alle) gleich hinterher.
Ich wollte hier kein Chaos verursachen oder in Missgunst fallen. Mir war nur bewusst, dass es anderweitig immer heißt "benutze die Forensuche und erstelle nicht ständig ein neues Thema..." - dachte das greift hier auch... Sorry
"Per PN" nur als Option, dass ich nicht andere mit den jedem-außer-mir bekannten Lösungen nerve und einen für alle HTML / CSS versierten User/Leser einen in ihren Augen überflüssigen Beitrag erstelle. Der HTML Code "gehört" nicht wirklich mir, sondern ich versuche mit meinem begrenzten Verständnis einem befreundeten Händler zu helfen. Daher konnte ich bisher noch nicht abklären, ob eine Veröffentlichung soweit i.O. geht.
Zu dem eigentlichen Problem und Deinem Feedback dazu:
Verschiedene, an Anzahl ständig wachsende Displaygrößen: hab ich verstanden - macht mit Deiner Erklärung Sinn.
Media Query fällt für uns also als Lösungsansatz weg. (Sofern man diesen nicht ständig mit neuen Displaygrößen füttern möchte.)
(Hoffe das mit dem Zitieren funktioniert - wie gesagt: Foren-Amateur
)Wie genau schaut das aus? Wie kann ich das einfach umsetzen und in HTML einbinden? Gibt's da was fertiges für alle? Kann ich das wo nachlesen und mit begrenztem Know-How in der Sache selbst erarbeiten? Das "einfachste" wäre natürlich wenn es etwas open-yource fertiges gibt ála hier in den headBereich kopieren.
Der Shop ist bereits seit einiger Zeit am Laufen (Template nicht responsive, Bilder, Verkäufe etc. stehen...). Der Shop soll nun "nur" für die ebay-Auflagen / i-ways mobile Reform angepasst werden. Ich habe mir zusammengelesen, dass es (auf Deinen ersten Tipp: Das Design den Inhalt anpassen) mit dem Befehl <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> funktionieren sollte, was es aber leider nicht tut.
"Mein" Headbereich für ein ebay template schaut wie folgt aus:
.......
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="http://.....cssmenuetabelle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="......Responsive_Design_Versuch.css" type="text/css" media=screen"/>
(hier hatte ich versucht die CSS Datei des oben veröffentlichten Media Query zu nutzen)
</head>
.....
Danke Dir für Deine Mühen.
Hallo
wie bereits geschrieben
und
verstößt dein Vorgehen gegen die Ebay Richtlinien und kann zur Sperrung des Kontos führen.
Angaben im head-Bereich können sich nun mal auf die gesamte Webseite auswirken, auch auf die Bereiche die Ebay sich ausdrücklich selbst vorbehält. Der iFrame-Inhalt wird von dem Inhalt der übergeordneten Webseite bei Ebay nun mal nicht so streng getrennt wie ansonsten üblich.
Heißt: Ebay erwartet dass du mit deren head-Angaben zurecht kommst. Änderungen oder eigene Erweiterungen können zur Sperrung deines Kontos führen.
Ich wiederhole das absichtlich, weil Ebay Verstöße meist sehr restriktiv handhabt.
Gruss
MrMurphy
wie bereits geschrieben
und
verstößt dein Vorgehen gegen die Ebay Richtlinien und kann zur Sperrung des Kontos führen.
Angaben im head-Bereich können sich nun mal auf die gesamte Webseite auswirken, auch auf die Bereiche die Ebay sich ausdrücklich selbst vorbehält. Der iFrame-Inhalt wird von dem Inhalt der übergeordneten Webseite bei Ebay nun mal nicht so streng getrennt wie ansonsten üblich.
Heißt: Ebay erwartet dass du mit deren head-Angaben zurecht kommst. Änderungen oder eigene Erweiterungen können zur Sperrung deines Kontos führen.
Ich wiederhole das absichtlich, weil Ebay Verstöße meist sehr restriktiv handhabt.
Gruss
MrMurphy
