Mobile Webseite erstellen aus vorhandener Desktop Webseite

[Khan]

Hi Leute,

habe eine Webseite gebaut, Template gekauft und verändert. HTML und CSS mit JS und PHP scripten. Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.

Könnte diese als Mobile Seite umbauen und beim Eingang per PHP Script auf m.domain.de weiterleiten. Jedoch raffe ich das nicht, wie ich die Seitenbreite und Bildergröße bestimmen soll. Es gibt ja dieses Responsive Webdesign, habe 2 Tagelang nur gesucht im Netz, alles nur Bla Fasel was da besprochen wird, ohne konkrete Beispiele. Brauche keine Kapitel wie was wo, sondern Tatsachen und alle texten sich erstmal einen ab!

Und Templates für eine Mobile Seite gibs auch nicht, wenn dann nur zusammen mit der Desktop Version.

Könnt ihr mir mit kurzen Worten erklären was zu tun ist?

Danke euch sehr!

MfG Khan

[krueger]

Hi,

Hi Leute,

habe eine Webseite gebaut, Template gekauft und verändert. HTML und CSS mit JS und PHP scripten. Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.

Was verstehst du unter einer "richtige Mobile Seite"?

Etwa das hier?:

m.domain.de

Das ist eine Technik aus dem letzten Jahrzehnt, wenn nicht sogar Jahrhundert. Damals waren "Responsive Websites" schwer bis garnicht hinzukriegen, da entweder die entsprechenden CSS-Regeln noch nicht existierten oder die Browser diese nicht unterstützten. Also hat man zwei komplett verschiedene Websites gebastelt. Eine für Mobile und eine für Desktop. Mittlerweile baut man eine Website für alles. Sie wird mit css media queries und anderen schnickschnack an das jeweilige Ausgabegerät angepasst.

Wenn deine Seite gut auf mobilen Geräten aussieht, dann ist das Template vermutlich schon responsive. WEnn nicht, dann hast du dein Geld zum Fenster rausgeworfen.

Gruß

Krueger

[marctrix]

Hej Khan,

Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.

Ohne viel Text:

Meistens reicht es die @media-Direktive und Flexboxen zu kombinieren und ein Konzept zu erarbeiten, das die Möglichkeiten der zu unterstützenden Browser berücksichtigt.

Das war es dann eigentlich auch schon!

Falls Dir das jetzt wider Erwarten nicht geholfen haben sollte, könntest du vielleicht mal in Erwähnung ziehen doch noch mal einen Blick in die Texte zu werfen ;-)

Übrigens: wenn man eine konkrete Antwort haben mag, kann es nicht schaden, konkrete Fragen zu stellen. Nicht konkret ist: wie mache ich eine Webseite rersponsiv, die ihr nicht kennt?

Marc

[pl]

Hi Leute,

habe eine Webseite gebaut, Template gekauft und verändert. HTML und CSS mit JS und PHP scripten. Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.

Guck Dir die Benutzerführung auf kleinen Displays an: Vieles, was aufm Desktop geht, ist da nicht mehr möglich. Grafiken und Texte scalieren sich zwar fast von selbst, aber haupsächlich um das Menu zur Navigation musst Du Dir Gedanken machen.

Ausklappbare Menus mit Untermenus sind auf einem Mobilgerät genauso untauglich wie eine horizontale Anordnung von Klick- oder Eingabeelementen. Menüpunkte also untereinander anordnen und relativ auf 100% scalieren. Führt einer der Links in ein Untermenü, machst Du wieder eine Liste, vergiss aber nicht, den Zurück-Nach-Oben-Link/Button.

Letztendlich läufts auf ein Durchklicken/Durchhangeln hinaus ähnlich wie beim Norton Commander oder im rechten Fenster vom Windows-Explorer (links wäre die hierarchisch visuelle Anordnung).

Ich bezweifle, dass Du das allein mit @MediaQueries hinbekommst. Da werden ja Inhalte nur ein- oder ausgeblendet. D.h., Verschiedene Ansichten werden zum Browser übertragen, obwohl sie gar nicht alle gebraucht werden, das Transfervolumen erhöht sich unnütz und genau das ist bei mobilen Geräten eben schlecht.

Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.

[Khan]

Also das Template sieht auf Mobile genauso aus wie Desktop, nur halt nicht wie eine Mobile Seite, bei welcher man das App Gefühl hat. Die Texte sind zu klein, zuviel Rand links und rechts und zuviel Infos, mobil brauch nur die Hälfte dargestellt werden.

Wo legt man zB fest das auf der Mobilen Seite nur einspaltig dargestellt werden soll, kein Hintergrundbild undkleinere Bilder dargestellt werden soll und das nur gewisse Infos angezeigt werden sollen, nicht alles?

[Matthias Apsel]

Hallo Khan,

Also das Template sieht auf Mobile genauso aus wie Desktop, nur halt nicht wie eine Mobile Seite, bei welcher man das App Gefühl hat. Die Texte sind zu klein, zuviel Rand links und rechts

verwende <meta name="viewport" …

Wo legt man zB fest das auf der Mobilen Seite nur einspaltig dargestellt werden soll, kein Hintergrundbild undkleinere Bilder dargestellt werden soll und das nur gewisse Infos angezeigt werden sollen, nicht alles?

Allgemein mit mediaqueries.

Bis demnächst
Matthias

[Auge]

Hallo

Also das Template sieht auf Mobile genauso aus wie Desktop, nur halt nicht wie eine Mobile Seite, bei welcher man das App Gefühl hat. Die Texte sind zu klein, zuviel Rand links und rechts und zuviel Infos, mobil brauch nur die Hälfte dargestellt werden.

Wo legt man zB fest das auf der Mobilen Seite nur einspaltig dargestellt werden soll, kein Hintergrundbild undkleinere Bilder dargestellt werden soll und das nur gewisse Infos angezeigt werden sollen, nicht alles?

Nichts für ungut und auch nicht ganz ohne Sarkasmus: Das steht bestimmt auf den von dir so geschmähten Seiten mit dem vielen Bla-Fasel-Text.

Grundsätzlich gilt: Mit Media Queries definierst du (typischerweise) Breitenbereiche, für die du dann die dort gelten sollenden Regeln notierst. Dabei hat sich als sinnvoll herausgestellt, zuerst die allgemeingültigen Regeln, wie z.B. Schrift- und Hintergrundfarben, sowie jene regeln für die schmalsten Viewports zu definieren. Danach folgen für aufsteigende Viewportbreiten die von den soeben notierten Standardregeln abweichenden Regeln.

html {
color: #000;
background: #fff;
font-size: 1.25em;  /* vergrößerte Schrift für unfähige Browser */
font-size: 1.25rem;  /* vergrößerte Schrift für fähige Browser */
margin: 0;
padding: 0;
}
body {
margin: 0.25em;
}
h1, h2, h3, h4, p, li, th, td {
margin: 0.5rem;
padding: 0;
}
@media (min-width: 32em) {
  html {
  font-size: 1em;  /* normale Schriftgröße nach Browservorgabe für unfähige Browser */
  font-size: 1rem;  /* normale Schriftgröße nach Browservorgabe für fähige Browser */
  }
  body {
  margin: 1em;
  }
  h1, h2, h3, h4, p, li, th, td {
  margin: 1em;
  margin: 1rem;
  }
}
@media (min-width: 50em) {
  body {
  margin: 1em auto;
  }
  h1, h2, h3, h4, p, li, th, td {
  margin: 1.5em;
  margin: 1.5rem;
  }
}

Das ist hier nur ein Beispiel für den grundsätzlichen Aufbau. Weder sind die angegebenen Grenzen noch die einzelnen Angaben ausgewogen gewählt. Es sollte aber klar werden, wohin die Reise geht. Notiere Regeln, die du im „Spezial“-Fall „breiterer Viewport“ bei Bedarf überschreibst.

Tschö, Auge

[Khan]

Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?

[Matthias Apsel]

Hallo Khan,

Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?

display: none; Damit verhinderst du allerdings nicht, dass der Inhalt trotzdem übertragen wird. Bilder sollten allerdings nicht übertragen werden, wenn du die MQ von klein nach groß ordnest (mobile first).

EDIT Siehe auch https://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign

Bis demnächst
Matthias

[Auge]

Hallo

Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?

Ja.

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Wenn du diese Bilder per CSS als Hintergrundbilder einbinden solltest, kannst du, je nach Media-Query-Abschnitt ein anderes Bild wählen. Es gibt aber auch Techniken in HTML (srceset-Attribut und <picture>), die von den aktuellen Browsern zwar unterschiedlich aber – natürlich mit Ausnahmen – ausreichend gut unterstützt ^[1] werden. Ich habe das selbst noch nicht druchprobiert, kann also dazu nichts Näheres ausführen. Infos dazu findest du nicht nur im Reiter „Ressources“ auf den oben verlinkten Seiten, sondern auch im Wiki.

Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?

Das ist etwas kniffliger. Du kannst diesen Block bei bestimmten Viewportgrößen per CSS ausblenden. Die Daten werden aber dennoch übertragen. Wenn es sich nicht um Daten handeln sollte, ohne deren Vorhandensein sich der Inhalt der Seite nicht erschließt, kannst du die Daten in Abhängigkeit der Viewportgröße auch mit einem Ajax-Request nachladen. Wenn die Daten für das Verständnis der Seite hingegen unerlässig sind, verbietet sich ein Ausblenden bei kleinen Viewports von selbst.

Tschö, Auge

---

1. Zu den Browsern, die das nicht unterstützen, gehören der IE (Desktop, lädt, wie ehedem, das in <img src=""> angegebene Bild), Opera Mini (Asbach Uralt) und Safaris, deren nächste Versionen Unterstützung bringen sollen. Die werden typischerweise von den Nutzern recht schnell aktualisiert, so dass das ein vorübergehendes Manko ist. ↩︎

[Gunnar Bittersmann]

@@Auge

Opera Mini (Asbach Uralt)

Nein. Opera Mini ist aktuell. Er unterstützt responsive images aus Prinzip nicht. Kann er gar nicht, weil er ganz anders arbeitet.

und Safaris, deren nächste Versionen Unterstützung bringen sollen.

?? Du hattest doch Can I use verlinkt: Grünes Licht für die aktuelle Version.

LLAP 🖖

[Auge]

Hallo

Opera Mini (Asbach Uralt)

Nein. Opera Mini ist aktuell. Er unterstützt responsive images aus Prinzip nicht. Kann er gar nicht, weil er ganz anders arbeitet.

Jaja, die vorkomprimierten Inhalte per Man-in-the-Middle-Aktionen bei unverschlüsselten wie verschlüsselten Inhalten. Hatte ich ganz verdrängt.

Die auf Can I use? in allen Tabellen als aktuellster Opera Mini ausgewiesene Version 8 mit Veröffentlichung im Jahr 2014 ist uralt. Da beißt die Maus keinen Faden ab. Dass laut Wikipedia die Version 10 von 2015 aktuell ist, ist nicht nur an mir, sondern wohl auch an den meisten Anderen vorbei gegangen.

und Safaris, deren nächste Versionen Unterstützung bringen sollen.

?? Du hattest doch Can I use verlinkt: Grünes Licht für die aktuelle Version.

Nicht so für <picture>. Von dort habe ich „abgelesen“ und dabei nicht mit „scrset“ verglichen.

Tschö, Auge

[marctrix]

Hej Khan,

Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?

So ungefähr. Leider steckt der Teufel im Detail und manchmal gibt das vorhandene HTML nicht die nötige Flexibilität für die Umgestaltungswünsche her.

An gegebenen Umständen muss man improvisieren und Kompromisse eingehen - oder in den Code des Themes eingreifen. Bei Wordpress wären Child-Themes das Mittel der Wahl, sofern nicht zu viele Änderungen nötig sind. Weil wenn man eh an jede Datei ran muss, kann man ruh gleich ein eigenes Theme machen...

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!

Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?

Niemand mag Crippleware. Selbst wenn jemand die ausgeblendeten Informationen nicht braucht, wird er immer das Gefühl haben, auf dem Handy etwas zu verpassen oder gar als Besucher zweiter Klasse behandelt zu werden. Fatal, weil die Mehrheit der Nutzer inzwischen mobil auf deine Website kommt. - Wenn du jemanden verärgern willst, rate ich dir, das mit den Desktop-Usern zu machen. Ist aber nicht der Sinn von responsivem Webdesign, dass für alle da sein soll.

Platz spart man mit Elementen, die der Nutzer bei Bedarf einblenden kann. summary und details sind hier Deine Freunde - aber auch dafür musst du wieder ins HTML...

Marc

[Khan]

Hi Marc,

würde ja auch gehen wenn ich alle Inhalte der Desktop Seite auch Mobil darstelle, aber halt einspaltig und mit verkleinerten Bildern, bzw. die Bilder und Spalten sich automatisch anpassen an jeweilige Endgeräte. Das kriege ich wohl mit dem vorhandenen Template nicht mehr hin, von daher muß ich wohl eine eigene Mobile Seite machen, dann per Befehl in der Index Mobilgeräte auf die m. Seite verweisen.

Das Ding ist nur, welche Seitenbreite gibt man da vor? Sind es 100% oder doch nur 320px? Dazu konnte ich keine erklärende Antwort finden. Die einen Schreiben %, die anderen px usw.

[marctrix]

Hej Khan,

würde ja auch gehen wenn ich alle Inhalte der Desktop Seite auch Mobil darstelle, aber halt einspaltig und mit verkleinerten Bildern, bzw. die Bilder und Spalten sich automatisch anpassen an jeweilige Endgeräte. Das kriege ich wohl mit dem vorhandenen Template nicht mehr hin, von daher muß ich wohl eine eigene Mobile Seite machen, dann per Befehl in der Index Mobilgeräte auf die m. Seite verweisen.

Die Zweispaltigkeit wird ja erst durch CSS-Anweisungen "erzwungen" - natürlicherweise stehen die divs, die in der Desktopversion nebeneinander stehen ja untereinander.

Du musst also "nur" die Stelle, in der die Zweispaltigkeit geregelt wird, mit folgendem umgeben:

@media screen only and (min-width: 40em) {

}

Die 40em kannst du natürlich anpassen, wie es dir gefällt...

divs nehmen sich dann automatisch die ganze Breite.

Das Ding ist nur, welche Seitenbreite gibt man da vor? Sind es 100% oder doch nur 320px? Dazu konnte ich keine erklärende Antwort finden. Die einen Schreiben %, die anderen px usw.

Keine Seitenbreite vorgeben. Dann passt alles automatisch - vielleicht noch ein Abstand zum Seitenrand, damit die Texte etwas Platz rundum lassen (mit einem Pudding für body z. B.)

Marc

[marctrix]

Hej Khan,

Keine Seitenbreite vorgeben. Dann passt alles automatisch - vielleicht noch ein Abstand zum Seitenrand, damit die Texte etwas Platz rundum lassen (mit einem Pudding für body z. B.)

sorry, Rechtschreibprüfung. Sollte padding heißen...

Obwohl genügend Pudding auch durchaus für Abstand zur Umgebung sorgen kann, wenn man genug davon isst - mal überlegen, ob sich das in Schulungen als Analogie zu padding verwenden lässt - ist ja schließlich ein Binnenabstand... ;-)

Marc

[Khan]

Danke für den Hinweiss, ich schau morgen nochmal. Klingt für mich fast so, als wenn jedes einzelne Div, Bild, Feld etc. einen eigenen @media Tag bekommen muß.

[marctrix]

Hej Khan,

Danke für den Hinweiss, ich schau morgen nochmal. Klingt für mich fast so, als wenn jedes einzelne Div, Bild, Feld etc. einen eigenen @media Tag bekommen muß.

Nein. alles andere steht bei dir doch schon einspaltig untereinander - sind doch nur die beiden kurzen Texte:

" HAMBURGS E R S T M A L I G E S EVENT DIESER ART IN EINER ANGESAGTEN LOCATION "

und

"SAMSTAG 09. APRIL 2016 23:30 UHR CLUB HAMBURG R E E P E R B A H N 48 (KIEZ)"

Die Icons oben passen vermutlich auch auf dem Smartphone nebeneinander.

Und die @media-Direktive gehört ins CSS, nicht ins HTML! ;-)

Übrigens wird davon abgeraten auf Landing pages Social media buttons zu verwenden, weil sie vom eigentlichen Sinn ablenken - hier willst da ja eine Konversion zu Newsletter-Abonnenten erreichen.

Mein Tipp: Weg mit allen anderen Interaktionsmöglichkeiten!

Marc

[Camping_RIDER]

Aloha ;)

Keine Seitenbreite vorgeben. Dann passt alles automatisch - vielleicht noch ein Abstand zum Seitenrand, damit die Texte etwas Platz rundum lassen (mit einem Pudding für body z. B.)

sorry, Rechtschreibprüfung. Sollte padding heißen...

Obwohl genügend Pudding auch durchaus für Abstand zur Umgebung sorgen kann, wenn man genug davon isst - mal überlegen, ob sich das in Schulungen als Analogie zu padding verwenden lässt - ist ja schließlich ein Binnenabstand... ;-)

You and your Rechtschreibprüfung, sir, just made my day :P

Grüße,

RIDER

[marctrix]

Hej Camping_RIDER,

sorry, Rechtschreibprüfung. Sollte padding heißen...

Obwohl genügend Pudding auch durchaus für Abstand zur Umgebung sorgen kann, wenn man genug davon isst - mal überlegen, ob sich das in Schulungen als Analogie zu padding verwenden lässt - ist ja schließlich ein Binnenabstand... ;-)

You and your Rechtschreibprüfung, sir, just made my day :P

Ist auch im Jahr 2016 a.d. für Perlen des Wortwitzes gut... ;-)

Marc

[Matthias Apsel]

Hallo marctrix,

Ist auch im Jahr 2016 a.d. für Perlen des Wortwitzes gut... ;-)

Zumal auch inhaltlich Pudding und padding nicht weit auseinander liegen. Aus Pudding wird padding.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@marctrix

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!

Sicher ist ein halbes Megabyte auch für Desktop zu viel. Das sollte sich mit vernünftiger Bildbearbeitung auf unter 100 Kilobyte bringen lassen.

Da sollte einen aber nicht davon abbringen lassen, für kleine Geräte ein noch kleineres Bild vorzuhalten. Responsive Images in Practice

LLAP 🖖

[Khan]

Kleiner bekomme ich diese transparente PNG nicht hin, JPG wäre schon was anderes, das Template verlangt aber transparente Bilder bei einigen. Leider...

@@marctrix

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!

Sicher ist ein halbes Megabyte auch für Desktop zu viel. Das sollte sich mit vernünftiger Bildbearbeitung auf unter 100 Kilobyte bringen lassen.

Da sollte einen aber nicht davon abbringen lassen, für kleine Geräte ein noch kleineres Bild vorzuhalten. Responsive Images in Practice

LLAP 🖖

„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)

[Gunnar Bittersmann]

@@Khan

Kleiner bekomme ich diese transparente PNG nicht hin, JPG wäre schon was anderes, das Template verlangt aber transparente Bilder bei einigen. Leider...

Nein. Es geht wohl um panorama.png (555 kB).

In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe #0a0909 gefüllt. Exportieren > für Web speichern. Bei PNG-8 mit 16 Farben komme ich auf 97 kB, bei JPEG mit Qualität 60 (kann man weiter runtersetzen) komme ich auf 74 kB.

Dein Hintergrundbild images/bg.png kannst du entsorgen, das sieht man sowieso nicht.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe #0a0909 gefüllt. […]
Dein Hintergrundbild images/bg.png kannst du entsorgen, das sieht man sowieso nicht.

Oder du füllst die neue Ebene nicht einfarbig, sondern lädst dort deinen Verlauf, d.h. images/bg.png rein.

LLAP 🖖

[Khan]

Es gibt sogar noch einen Weg in PS um noch etwas mehr Dateispeicher einzusparen: Mal angenommen ihr habt 2 Ebenen, die Hintergrundebene ist komplett schwarz und die darauf liegende Ebene hat die Grafik. Bevor man Als Web Speichern wählt, die schwarze Hintergrundebene ausblenden, so daß nur die Grafik zu sehen ist, die hat meisst einen transparenten Hintergrund. Im Als Web Speichern Dialog selektiert man JPG, dann als Hintergrundfarbe schwarz - Fertig und ein paar KB eingespart. Vielleicht interepretiert PS dann die schwarze Hintergrundfarbe als # Code, anstatt als Raster der Ebene.

@@Gunnar Bittersmann

In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe #0a0909 gefüllt. […]
Dein Hintergrundbild images/bg.png kannst du entsorgen, das sieht man sowieso nicht.

Oder du füllst die neue Ebene nicht einfarbig, sondern lädst dort deinen Verlauf, d.h. images/bg.png rein.

LLAP 🖖

„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)

[Auge]

Hallo

Mal angenommen ihr habt 2 Ebenen, die Hintergrundebene ist komplett schwarz und die darauf liegende Ebene hat die Grafik. Bevor man Als Web Speichern wählt, die schwarze Hintergrundebene ausblenden, so daß nur die Grafik zu sehen ist, die hat meisst einen transparenten Hintergrund. Im Als Web Speichern Dialog selektiert man JPG, dann als Hintergrundfarbe schwarz - Fertig und ein paar KB eingespart. Vielleicht interepretiert PS dann die schwarze Hintergrundfarbe als # Code, anstatt als Raster der Ebene.

Nein, das ist nicht zutreffend. Das Bild wird weder in seinen physikalischen Ausmaßen (Breite und Höhe in Pixeln) kleiner nochfällt die transparent geschaltete Farbe weg. Genau genommen gibt es in JPEG keine transpoarenten Farben. Einfarbige Flächen lassen sich aber viel stärker komprimieren. Deine Beobachtung, dass sich die resultierende Dateigröße verringert, trifft also zu.

Dieses Verhalten haben aber wohl alle komprimierenden Grafikformate. Also auch PNG und GIF.

Wenn du so richtig™ sparen willst, mache das Bild nur so groß, wie es wirkich sein muss, croppe die Ränder etc. und setze für den umgebenden Bereich, der nicht vom Bild selbst abgedeckt wird, einfach eine dem Bildhintergrund entsprechende Hintergrundfarbe in CSS. Hat Gunnar ja ausch schon irgendwo im Thread empfohlen.

Tschö, Auge

[Gunnar Bittersmann]

@@pl

Ich bezweifle, dass Du das allein mit @MediaQueries hinbekommst. Da werden ja Inhalte nur ein- oder ausgeblendet.

Nein.

Da werden Inhalte bspw. auch anders angeordnet.

D.h., Verschiedene Ansichten werden zum Browser übertragen, obwohl sie gar nicht alle gebraucht werden,

Verschiedene Stylesheets per media queries einzubinden wäre eine Möglichkeit, aber keine gute. Besser ein Stylesheet, in welchem per media queries Inhalte anders angeordnet werden. Dann ist

das Transfervolumen erhöht sich unnütz und genau das ist bei mobilen Geräten eben schlecht.

kaum irrelevant.

Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.

Nein.

Nicht andere Inhalte, sondern andere ans jeweilige Gerät angepasste Darstellungen derselben Inhalte.

LLAP 🖖

[Khan]

Ok ich glaube ich habe es gerafft, fehlt jetzt natürlich die Umsetzung.

Könntet ihr anhand der Website sehen was da falsch läuft bzw. getan werden muß?

MfG Khan

[Auge]

Hallo

Könntet ihr anhand der Website sehen was da falsch läuft bzw. getan werden muß?

Da du sie uns nicht genannt oder – so wär's noch besser – verlinkt hast, nein. Ansonsten könnten wir schon …

Tschö, Auge

[Khan]

Danke schonmal vorab. Ich habe gerade den Viewport in der Index.html rausgenommen, war nur testweise drin.

Der Link ist

http://www.raksclub.de/rnb

Ich möchte aber das die Mobile Seite z. B. so aussieht:

http://m.raksclub.de/rnb

(Bitte mit Smartphone anschauen, auf Desktop ist sie nicht schön!)

[Gunnar Bittersmann]

@@Khan

Der Link ist

www.raksclub.de/rnb

Da ist nichts verlinkt.

Ich möchte aber das die Mobile Seite z. B. so aussieht:

m.raksclub.de/rnb

(Bitte mit Smartphone anschauen, auf Desktop ist sie nicht schön!)

Wie bitte soll man das denn tun, wenn du die Seite nicht verlinkst?

Ich korrigiere dein Posting jetzt mal. Das nächste Mal verlinkst du bitte selber.

LLAP 🖖

[marctrix]

Hej pl,

habe eine Webseite gebaut, Template gekauft und verändert. HTML und CSS mit JS und PHP scripten. Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.

Ausklappbare Menus mit Untermenus sind auf einem Mobilgerät genauso untauglich wie eine horizontale Anordnung von Klick- oder Eingabeelementen. Menüpunkte also untereinander anordnen und relativ auf 100% scalieren. Führt einer der Links in ein Untermenü, machst Du wieder eine Liste, vergiss aber nicht, den Zurück-Nach-Oben-Link/Button.

Wieso das denn? Wie wäre es mit Flexnav, um nur ein Beispiel zu nennen...

Dein Vorschlag klingt furchtbar kompliziert.

Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.

Nein - alle Inhalte für alle Geräte. Anders ist doof!

Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem 40''-Monitor daheim... ;-)

Marc

[pl]

Nein - alle Inhalte für alle Geräte. Anders ist doof!

Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem 40''-Monitor daheim... ;-)

Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet, da kannste Anordnen, Umordnen und hin und herschieben wie du lustig bist.

Ich habe beruflich schon vor 10 Jahren Seiten mobil verfügbar gemacht, einzelne Seiten, die sich innerhalb komplexer Backends befinden, nahtlos eingebaut als Unterseiten in umfangreichen Backends, die für den Desktop gebaut sind. Den ganzen Überbau ans Mobile auszuliefern ist da blödsinnig und mit heute verfügbaren Mediaqueries ebensowenig zu machen.

Andererseits spricht natürlich nichts gegen ein Menu, was auf dem Desktop horizontal erscheint und bei kleineren Bildschirmauflösungen in eine vertikale Anordnungen wechselt.

Schöne Grüße

[marctrix]

Hej pl,

Nein - alle Inhalte für alle Geräte. Anders ist doof!

Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem 40''-Monitor daheim... ;-)

Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet,

Klar. Da hilft nur die Verwendung bestimmter (bereit zu stellender) Geräte vorschreiben oder neu machen!

Weg lassen ist da keine Lösung!

Ich habe beruflich schon vor 10 Jahren Seiten mobil verfügbar gemacht, einzelne Seiten, die sich innerhalb komplexer Backends befinden, nahtlos eingebaut als Unterseiten in umfangreichen Backends, die für den Desktop gebaut sind. Den ganzen Überbau ans Mobile auszuliefern ist da blödsinnig und mit heute verfügbaren Mediaqueries ebensowenig zu machen.

Verstehe ich jetzt nicht - klingt aber nach einer "Lösung", die selbst auf dem Desktop wenig nutzerfreundlich ist...

Auch hier wäre meine Empfehlung, so etwas nicht als Beispiel zu nehmen. Kann ja sein, dass für die Neukonzeption so einer komplexen Anwendung weder der Mut noch das Budget reicht. sollte man hier aber nicht als Beispiel für "geht nicht" bringen, sondern höchstens dafür, dass man im Arbeitsalltag manchmal mit unlösbaren Aufgaben konfrontiert wird, z. B. dem Wunsch des Auftraggebers eine Anwendung responsiv zu machen, die dafür konzeptionell nicht ausgelegt ist (für die es vielleicht niemals ein UX-Konzept gegeben hat)...

So was kommt ja vor - hin und wieder ;-)

Gruß,

Marc

Marc

[Mitleser]

Ich habe beruflich schon vor 10 Jahren Seiten mobil verfügbar gemacht

Vor 10 Jahren war eigenes Markup für Handys(so hießen die damals noch vorwiegend) ja auch ein gutes Stück weit unumgänglich. Nächstes Jahr wiederum ist es dann 10 Jahre her, dass eine gewisse Keynote die Veränderung eingeleitet hat.

Komplexe Backends kann/muss man evtl. unter einem anderen Blickwinkel betrachten. Das war hier aber nicht gefragt.

[Gunnar Bittersmann]

@@pl

Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet, da kannste Anordnen, Umordnen und hin und herschieben wie du lustig bist.

Man darf natürlich nicht beim Visual Design anfangen, sondern ganz unten in Jesse James Garretts Diagramm The Elements of User Experience (PDF): bei den Bedürfnissen der Nutzer. Möglicherweise muss für Mobile die Information anders strukturiert sein. Und sicherlich ist ein anderes Interaction Design erforderlich.

Bspw. wird sicherlich niemand Photoshop auf einem Smartphone haben wollen. Das heißt aber nicht, dass Nutzer keine Bildbearbeitung auf dem Smartphone machen wollen. Wollen sie, nur eben ans Gerät angepasste.

LLAP 🖖

[Gunnar Bittersmann]

@@Khan

Könnte diese als Mobile Seite umbauen und beim Eingang per PHP Script auf m.domain.de weiterleiten.

Keine gute Idee.

Könnt ihr mir mit kurzen Worten erklären was zu tun ist?

Die Mutter alle Artikel Responsive Web Design von Ethan Marcotte gibt’s auch auf deutsch und enthält auch anschauliche Beispiele.

LLAP 🖖

[Khan (Lösung?)]

Habe mit dem Support geschrieben, die jenigen die das Template vertreiben. Die schauen ob die das Design mehr mobiltauglich machen können und wollen sich bei mir melden.

Das wäre doch was :)