✔ Ebay Template responsive

Hallo liebe Leute,

ich hätte eine Frage speziell zur Einbindung eines responsiven Templates bei Ebay.

Ich habe ein Template erstellt welches sich automatisch der Breite des Browsers anpasst.

Allerdings habe ich nun damit ein Problem wenn ich das ganze als Artikelbeschreibung bei Ebay einstelle.

Die Seite verändert sich nicht. Sie bleibt starr stehen.

Wenn ich allerdings Ebay-mobile aufrufe wird alles korrekt angezeigt.

Falls irgendjemand irgendeinen Tipp für mich hätte würde mich das sehr freuen.

Ich habe bis jetzt in Erfahrung gebracht das Ebay die Artikelbeschreibung mittels eines IFrame mit einer festen breite von 950px anzeigt.

Anbei noch der Link zu der Datei: http://bit.ly/1FEDEM3

Ich muss dazu sagen das dies mein erster Versuch mit responsivem Design ist und ich bestimmt irgendwas übersehen habe.

Gruß floboof12

 

Entspricht der Link der Artikelbeschreibung?

Ich frage, weil sich die Seitenbreite im Browser problemlos skalieren lässt.

Die wirklichen Zutaten (Stichwort: "Media Queries") für ein "Responsive Design" kannst du z.B. hier entnehmen: http://code-tricks.com/css-media-queries-for-common-devices/

 

Hallo, erstmal danke für deine Frage.

Ja, der Link spiegelt im Grunde das wieder, was später in Ebay angezeigt werden soll. Die Inhalte (Bilder und Artikelbeschreibung) werden sich noch ändern (über eine EIngabemaske). Die Breite ist allerdings noch nicht auf den Ebay IFrame angepasst (im Moment eine max-width von 1000px).

Gruß

 

Kannst du das bitte auch mal einstellen und hier verlinken?

 

Dürfte in diesem Zusammenhang für dich von Interesse sein: http://blog.couchcommerce.com/2013/...rktfuhrer-nicht-auf-responsive-design-setzen/

Auszug:

 

Hallo,

anbei der Link zu dem Ebay-Angebot: http://ebay.eu/1cQcTXM

Danke, ich werde mir deinen link mal anschauen.

Gruß

 

Mir ist gerade noch aufgefallen:

bei diesem Template http://ebay.eu/1dmZyr2 funktioniert das responsive bei mir auch nur im IE und FF. Allerdings auch nicht hunderprozentig richtig.

Und wie gesagt wird mein erstelltes Template dann wenn man es z.B. über ein Smartphone aufruft richtig angezeigt.

Eventuell verbietet ebay das prinzipiell und man kann das nur mit viel gefrickel auf die Reihe kriegen.

 

Mit dem Smartphone wird man automatisch auf "m.ebay.de/..." umgeleitet

Die Subdomain "m" bedient somit mobile Endgeräte.

Und das genannte Template reagiert überhaupt nicht auf die Skalierung der Fensterbreite!

 

Hallo,

ja das ist mir bekannt es wundert mich trotzdem, das es dort korrekt angezeigt wird.
Eventuell müssten da noch @Media-Querys rein. Aber das wäre ja ein Haufen Arbeit.

 

Auf der Subdomain für mobile Endgeräte dürfte ein anderer Quellcode zum Einsatz kommen.

Leider kann ich den auf dem Smartphone nicht anlaysieren, und auf dem PC wird man von dort auf die normale Seite umgeleitet.

Ich vermute, dass du mit dem Umstand leben werden mußt. Siehe mein Link in Post #5.

 

Hallo,

alles klar. Mir fällt nun auch nichts mehr ein. Bin nun schon 2 Tage am recherchieren. Ebay ist da auch ziemlich untransparent.

Danke für deine Mühe.

 

@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.

 

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.

 

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

 

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..."?)

Code (CSS):

1. /* -----------------------------------------------
2. ---- Base ----------------------------------------
3. ------------------------------------------------*/
4. /* Basic-Styles - e. g. for 960/1.000 Pixel Wrap */
5. /* -----------------------------------------------
6. ---- Media Queries -------------------------------
7. ------------------------------------------------*/
8. /* Mobile/Smartphone - Portrait-Modus */
9. @media
10. only screen and (min-width: 320px) and (max-width: 479px),
11. only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
12. only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
13. only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
14. only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
15. only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
16. }
17. /* Mobile/Smartphone - Landscape-Modus */
18. @media
19. only screen and (min-width: 480px) and (max-width: 767px),
20. only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
21. only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
22. only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
23. only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
24. only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
25. }
26. /* Mobile/Tablets - Portrait-Modus */
27. @media
28. only screen and (min-width: 768px) and (max-width: 959px),
29. only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
30. }
31.  
32. /* New iPad - iPd 3 - Retina Display */
33. @media
34. only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
35. only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
36. only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
37. only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
38. only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
39. }
40.  
41. /* Desktops - Viewport 1.300+ Pixel */
42. @media
43. only screen and (min-width: 1300px) {
44. }

 

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

 

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.

 

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