Mobile Webseite erstellen aus vorhandener Desktop Webseite – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Mobile Webseite erstellen aus vorhandener Desktop Webseite Wed, 27 Jan 16 20:25:40 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659559#m1659559 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659559#m1659559 <p>Hi Leute,</p> <p>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.</p> <p>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!</p> <p>Und Templates für eine Mobile Seite gibs auch nicht, wenn dann nur zusammen mit der Desktop Version.</p> <p>Könnt ihr mir mit kurzen Worten erklären was zu tun ist?</p> <p>Danke euch sehr!</p> <p>MfG Khan</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Wed, 27 Jan 16 21:03:16 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659560#m1659560 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659560#m1659560 <p>Hi,</p> <blockquote> <p>Hi Leute,</p> <p>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.</p> </blockquote> <p>Was verstehst du unter einer "richtige Mobile Seite"?</p> <p>Etwa das hier?:</p> <blockquote> <p>m.domain.de</p> </blockquote> <p>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.</p> <p>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.</p> <p>Gruß</p> <p>Krueger</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 06:49:13 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659566#m1659566 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659566#m1659566 <p>Hej Khan,</p> <blockquote> <p>Die sieht auf Mobilgeräten auch gut aus, ist aber halt keine richtige Mobile Seite.</p> </blockquote> <p>Ohne viel Text:</p> <p>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.</p> <p>Das war es dann eigentlich auch schon!</p> <p>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 ;-)</p> <p>Ü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?</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 07:42:28 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659569#m1659569 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659569#m1659569 <blockquote> <p>Hi Leute,</p> <p>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.</p> </blockquote> <p>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.</p> <p>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.</p> <p>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).</p> <p>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.</p> <p>Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:14:47 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659583#m1659583 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659583#m1659583 <p>@@Khan</p> <blockquote> <p>Könnte diese als Mobile Seite umbauen und beim Eingang per PHP Script auf m.domain.de weiterleiten.</p> </blockquote> <p>Keine gute Idee.</p> <blockquote> <p>Könnt ihr mir mit kurzen Worten erklären was zu tun ist?</p> </blockquote> <p>Die Mutter alle Artikel <a href="http://alistapart.com/article/responsive-web-design" rel="nofollow noopener noreferrer">Responsive Web Design</a> von Ethan Marcotte gibt’s auch <a href="http://www.intertain.me/news/responsive-web-design-von-ethan-marcotte/" rel="nofollow noopener noreferrer">auf deutsch</a> und enthält auch anschauliche Beispiele.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 17:59:25 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659733#m1659733 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659733#m1659733 <p>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.</p> <p>Das wäre doch was :)</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 08:07:30 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659570#m1659570 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659570#m1659570 <p>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.</p> <p>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?</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:38:30 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659587#m1659587 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659587#m1659587 <p>@@pl</p> <blockquote> <p>Ich bezweifle, dass Du das allein mit @MediaQueries hinbekommst. Da werden ja Inhalte nur ein- oder ausgeblendet.</p> </blockquote> <p>Nein.</p> <p>Da werden Inhalte bspw. auch anders angeordnet.</p> <blockquote> <p>D.h., Verschiedene Ansichten werden zum Browser übertragen, obwohl sie gar nicht alle gebraucht werden,</p> </blockquote> <p>Verschiedene Stylesheets per <em>media queries</em> einzubinden wäre eine Möglichkeit, aber keine gute. Besser ein Stylesheet, in welchem per <em>media queries</em> Inhalte anders angeordnet werden. Dann ist</p> <blockquote> <p>das Transfervolumen erhöht sich unnütz und genau das ist bei mobilen Geräten eben schlecht.</p> </blockquote> <p>kaum irrelevant.</p> <blockquote> <p>Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.</p> </blockquote> <p>Nein.</p> <p>Nicht andere Inhalte, sondern andere ans jeweilige Gerät angepasste Darstellungen derselben Inhalte.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 20:18:27 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659621#m1659621 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659621#m1659621 <p>Hej pl,</p> <blockquote> <blockquote> <p>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.</p> </blockquote> </blockquote> <blockquote> <p>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.</p> </blockquote> <p>Wieso das denn? Wie wäre es mit <a href="http://jasonweaver.name/lab/flexiblenavigation/" rel="nofollow noopener noreferrer">Flexnav</a>, um nur ein Beispiel zu nennen...</p> <p>Dein Vorschlag klingt furchtbar kompliziert.</p> <blockquote> <p>Eine Lösung für dieses Problem heißt Content Negotiation: Andere Geräte, andere Inhalte.</p> </blockquote> <p>Nein - alle Inhalte für alle Geräte. Anders ist doof!</p> <p>Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem <a href="http://www.amazon.de/Samsung-Monitor-400Mx-3-TFT-Monitor-Kontrastverh%C3%A4ltnis/dp/B004PR6DB4" rel="nofollow noopener noreferrer">40''-Monitor</a> daheim... ;-)</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 08:19:45 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659571#m1659571 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659571#m1659571 <p>Hallo Khan,</p> <blockquote> <p>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</p> </blockquote> <p>verwende <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer"><meta name="viewport" …</a></p> <blockquote> <p>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?</p> </blockquote> <p>Allgemein mit <a href="https://wiki.selfhtml.org/wiki/Mediaqueries" rel="nofollow noopener noreferrer">mediaqueries</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 08:32:07 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659572#m1659572 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659572#m1659572 <p>Hallo</p> <blockquote> <p>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.</p> <p>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?</p> </blockquote> <p>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.</p> <p>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.</p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.25em<span class="token punctuation">;</span> <span class="token comment">/* vergrößerte Schrift für unfähige Browser */</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.25rem<span class="token punctuation">;</span> <span class="token comment">/* vergrößerte Schrift für fähige Browser */</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2, h3, h4, p, li, th, td</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 32em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token comment">/* normale Schriftgröße nach Browservorgabe für unfähige Browser */</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token comment">/* normale Schriftgröße nach Browservorgabe für fähige Browser */</span> <span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2, h3, h4, p, li, th, td</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1em auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2, h3, h4, p, li, th, td</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>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“ <em>bei Bedarf</em> überschreibst.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.<br> Jan Koum, Mitgründer von WhatsApp, im <a href="http://heise.de/-3074714" rel="nofollow noopener noreferrer">Heise.de-Interview</a> </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 09:15:17 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659574#m1659574 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659574#m1659574 <p>Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?</p> <p>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.</p> <p>Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 09:28:01 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659576#m1659576 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659576#m1659576 <p>Hallo Khan,</p> <blockquote> <p>Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?</p> </blockquote> <p>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).</p> <p><strong>EDIT</strong> Siehe auch <a href="https://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 09:47:04 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659579#m1659579 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659579#m1659579 <p>Hallo</p> <blockquote> <p>Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?</p> </blockquote> <p>Ja.</p> <blockquote> <p>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.</p> </blockquote> <p>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 (<a href="http://caniuse.com/#feat=srcset" class="language-html" rel="noopener noreferrer"><code class="language-html">srceset</code>-Attribut</a> und <a href="http://caniuse.com/#feat=picture" rel="noopener noreferrer"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span></code></a>), die von den aktuellen Browsern zwar unterschiedlich aber – natürlich mit Ausnahmen – ausreichend gut unterstützt <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> 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 <a href="https://wiki.selfhtml.org/wiki/Picture" rel="nofollow noopener noreferrer">auch im Wiki</a>.</p> <blockquote> <p>Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?</p> </blockquote> <p>Das ist etwas kniffliger. Du kannst diesen Block bei bestimmten Viewportgrößen per CSS ausblenden. Die Daten werden aber dennoch übertragen. Wenn es sich <em>nicht</em> 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.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.<br> Jan Koum, Mitgründer von WhatsApp, im <a href="http://heise.de/-3074714" rel="nofollow noopener noreferrer">Heise.de-Interview</a> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Zu den Browsern, die das nicht unterstützen, gehören der IE (Desktop, lädt, wie ehedem, das in <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> 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. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 20:08:20 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659620#m1659620 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659620#m1659620 <p>Hej Khan,</p> <blockquote> <p>Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?</p> </blockquote> <p>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.</p> <p>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...</p> <blockquote> <p>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.</p> </blockquote> <p>Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!</p> <blockquote> <p>Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?</p> </blockquote> <p>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.</p> <p>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...</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:06:33 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659581#m1659581 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659581#m1659581 <p>@@Auge</p> <blockquote> <p>Opera Mini (Asbach Uralt)</p> </blockquote> <p>Nein. Opera Mini ist aktuell. Er unterstützt <em>responsive images</em> aus Prinzip nicht. Kann er gar nicht, weil er <a href="https://de.wikipedia.org/wiki/Opera#Opera_Mini" rel="nofollow noopener noreferrer">ganz anders arbeitet</a>.</p> <blockquote> <p>und Safaris, deren nächste Versionen Unterstützung bringen sollen.</p> </blockquote> <p>?? Du hattest doch <a href="http://caniuse.com/#feat=srcset" rel="noopener noreferrer">Can I use</a> verlinkt: Grünes Licht für die aktuelle Version.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:18:51 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659585#m1659585 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659585#m1659585 <p>Hallo</p> <blockquote> <blockquote> <p>Opera Mini (Asbach Uralt)</p> </blockquote> <p>Nein. Opera Mini ist aktuell. Er unterstützt <em>responsive images</em> aus Prinzip nicht. Kann er gar nicht, weil er <a href="https://de.wikipedia.org/wiki/Opera#Opera_Mini" rel="nofollow noopener noreferrer">ganz anders arbeitet</a>.</p> </blockquote> <p>Jaja, die vorkomprimierten Inhalte per Man-in-the-Middle-Aktionen bei unverschlüsselten wie verschlüsselten Inhalten. Hatte ich ganz verdrängt.</p> <p>Die auf Can I use? in allen Tabellen als aktuellster Opera Mini ausgewiesene Version 8 mit Veröffentlichung im Jahr 2014 <em><strong>ist</strong> uralt</em>. 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.</p> <blockquote> <blockquote> <p>und Safaris, deren nächste Versionen Unterstützung bringen sollen.</p> </blockquote> <p>?? Du hattest doch <a href="http://caniuse.com/#feat=srcset" rel="noopener noreferrer">Can I use</a> verlinkt: Grünes Licht für die aktuelle Version.</p> </blockquote> <p>Nicht so für <a href="http://caniuse.com/#feat=picture" rel="noopener noreferrer"><code><picture></code></a>. Von dort habe ich „abgelesen“ und dabei nicht mit „scrset“ verglichen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.<br> Jan Koum, Mitgründer von WhatsApp, im <a href="http://heise.de/-3074714" rel="nofollow noopener noreferrer">Heise.de-Interview</a> </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:40:45 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659588#m1659588 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659588#m1659588 <p>Ok ich glaube ich habe es gerafft, fehlt jetzt natürlich die Umsetzung.</p> <p>Könntet ihr anhand der Website sehen was da falsch läuft bzw. getan werden muß?</p> <p>MfG Khan</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 10:51:06 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659590#m1659590 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659590#m1659590 <p>Hallo</p> <blockquote> <p>Könntet ihr anhand der Website sehen was da falsch läuft bzw. getan werden muß?</p> </blockquote> <p>Da du sie uns nicht genannt oder – so wär's noch besser – verlinkt hast, nein. Ansonsten könnten wir schon …</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.<br> Jan Koum, Mitgründer von WhatsApp, im <a href="http://heise.de/-3074714" rel="nofollow noopener noreferrer">Heise.de-Interview</a> </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 11:16:18 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659592#m1659592 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659592#m1659592 <p>Danke schonmal vorab. Ich habe gerade den Viewport in der Index.html rausgenommen, war nur testweise drin.</p> <p>Der Link ist</p> <p><a href="http://www.raksclub.de/rnb" rel="nofollow noopener noreferrer">http://www.raksclub.de/rnb</a></p> <p>Ich möchte aber das die Mobile Seite z. B. so aussieht:</p> <p><a href="http://m.raksclub.de/rnb" rel="nofollow noopener noreferrer">http://m.raksclub.de/rnb</a></p> <p>(Bitte mit Smartphone anschauen, auf Desktop ist sie nicht schön!)</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 11:32:19 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659596#m1659596 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659596#m1659596 <p>@@Khan</p> <blockquote> <p>Der Link ist</p> <p>www.raksclub.de/rnb</p> </blockquote> <p>Da ist nichts verlinkt.</p> <blockquote> <p>Ich möchte aber das die Mobile Seite z. B. so aussieht:</p> <p>m.raksclub.de/rnb</p> <p>(Bitte mit Smartphone anschauen, auf Desktop ist sie nicht schön!)</p> </blockquote> <p>Wie bitte soll man das denn tun, wenn du die Seite nicht verlinkst?</p> <p>Ich korrigiere dein Posting jetzt mal. Das nächste Mal verlinkst du bitte selber.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 21:08:22 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659628#m1659628 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659628#m1659628 <p>Hi Marc,</p> <p>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.</p> <p>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.</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 08:46:19 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659659#m1659659 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659659#m1659659 <p>@@marctrix</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <p>Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!</p> </blockquote> <p>Sicher ist ein halbes Megabyte auch für Desktop zu viel. Das sollte sich mit vernünftiger Bildbearbeitung auf unter 100 Kilobyte bringen lassen.</p> <p>Da sollte einen aber nicht davon abbringen lassen, für kleine Geräte ein noch kleineres Bild vorzuhalten. <a href="http://alistapart.com/article/responsive-images-in-practice" rel="nofollow noopener noreferrer">Responsive Images in Practice</a></p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 06:16:24 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659646#m1659646 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659646#m1659646 <blockquote> <p>Nein - alle Inhalte für alle Geräte. Anders ist doof!</p> <p>Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem <a href="http://www.amazon.de/Samsung-Monitor-400Mx-3-TFT-Monitor-Kontrastverh%C3%A4ltnis/dp/B004PR6DB4" rel="nofollow noopener noreferrer">40''-Monitor</a> daheim... ;-)</p> </blockquote> <p>Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet, da kannste Anordnen, Umordnen und hin und herschieben wie du lustig bist.</p> <p>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.</p> <p>Andererseits spricht natürlich nichts gegen ein Menu, was auf dem Desktop horizontal erscheint und bei kleineren Bildschirmauflösungen in eine vertikale Anordnungen wechselt.</p> <p>Schöne Grüße</p> <div class="signature">-- <br> Familiennachzug hat ja nun mit Flucht überhaupt nichts mehr zu tun. </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 21:20:15 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659632#m1659632 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659632#m1659632 <p>Hej Khan,</p> <blockquote> <p>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.</p> </blockquote> <p>Die Zweispaltigkeit wird ja erst durch CSS-Anweisungen "erzwungen" - natürlicherweise stehen die divs, die in der Desktopversion nebeneinander stehen ja untereinander.</p> <p>Du musst also "nur" die Stelle, in der die Zweispaltigkeit geregelt wird, mit folgendem umgeben:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">only</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <p>Die 40em kannst du natürlich anpassen, wie es dir gefällt...</p> <p>divs nehmen sich dann automatisch die ganze Breite.</p> <blockquote> <p>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.</p> </blockquote> <p>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.)</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 21:23:25 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659633#m1659633 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659633#m1659633 <p>Hej Khan,</p> <blockquote> <p>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.)</p> </blockquote> <p>sorry, Rechtschreibprüfung. Sollte padding heißen...</p> <p>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... ;-)</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 21:25:33 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659634#m1659634 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659634#m1659634 <p>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ß.</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 22:25:16 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659641#m1659641 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659641#m1659641 <p>Aloha ;)</p> <blockquote> <blockquote> <p>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.)</p> </blockquote> <p>sorry, Rechtschreibprüfung. Sollte padding heißen...</p> <p>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... ;-)</p> </blockquote> <p>You and your Rechtschreibprüfung, sir, just made my day :P</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[ </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Thu, 28 Jan 16 21:31:16 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659636#m1659636 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659636#m1659636 <p>Hej Khan,</p> <blockquote> <p>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ß.</p> </blockquote> <p>Nein. alles andere steht bei dir doch schon einspaltig untereinander - sind doch nur die beiden kurzen Texte:</p> <p>" HAMBURGS E R S T M A L I G E S EVENT DIESER ART IN EINER ANGESAGTEN LOCATION "</p> <p>und</p> <p>"SAMSTAG 09. APRIL 2016 23:30 UHR CLUB HAMBURG R E E P E R B A H N 48 (KIEZ)"</p> <p>Die Icons oben passen vermutlich auch auf dem Smartphone nebeneinander.</p> <p>Und die @media-Direktive gehört ins CSS, nicht ins HTML! ;-)</p> <p>Ü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.</p> <p>Mein Tipp: Weg mit allen anderen Interaktionsmöglichkeiten!</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 06:59:44 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659652#m1659652 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659652#m1659652 <p>Hej Camping_RIDER,</p> <blockquote> <blockquote> <p>sorry, Rechtschreibprüfung. Sollte padding heißen...</p> <p>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... ;-)</p> </blockquote> <p>You and your Rechtschreibprüfung, sir, just made my day :P</p> </blockquote> <p>Ist auch im Jahr 2016 a.d. für Perlen des Wortwitzes gut... ;-)</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 07:06:28 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659653#m1659653 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659653#m1659653 <p>Hej pl,</p> <blockquote> <blockquote> <p>Nein - alle Inhalte für alle Geräte. Anders ist doof!</p> <p>Freilich müssen Inhalte auf dem Smartphone anders angeordnet werden, als auf dem <a href="http://www.amazon.de/Samsung-Monitor-400Mx-3-TFT-Monitor-Kontrastverh%C3%A4ltnis/dp/B004PR6DB4" rel="nofollow noopener noreferrer">40''-Monitor</a> daheim... ;-)</p> </blockquote> <p>Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet,</p> </blockquote> <p>Klar. Da hilft nur die Verwendung bestimmter (bereit zu stellender) Geräte vorschreiben oder neu machen!</p> <p>Weg lassen ist da keine Lösung!</p> <blockquote> <p>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.</p> </blockquote> <p>Verstehe ich jetzt nicht - klingt aber nach einer "Lösung", die selbst auf dem Desktop wenig nutzerfreundlich ist...</p> <p>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)...</p> <p>So was kommt ja vor - hin und wieder ;-)</p> <p>Gruß,</p> <p>Marc</p> <p>Marc</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 08:18:38 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659656#m1659656 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659656#m1659656 <blockquote> <p>Ich habe beruflich schon vor 10 Jahren Seiten mobil verfügbar gemacht</p> </blockquote> <p>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.</p> <p>Komplexe Backends kann/muss man evtl. unter einem anderen Blickwinkel betrachten. Das war hier aber nicht gefragt.</p> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 08:39:44 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659658#m1659658 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659658#m1659658 <p>@@pl</p> <blockquote> <p>Es gibt Anwendungen, die sind ganz einfach nicht für Mobile geeignet, da kannste Anordnen, Umordnen und hin und herschieben wie du lustig bist.</p> </blockquote> <p>Man darf natürlich nicht beim <em>Visual Design</em> anfangen, sondern ganz unten in Jesse James Garretts Diagramm <a href="http://www.jjg.net/ia/elements.pdf" rel="nofollow noopener noreferrer">The Elements of User Experience (PDF)</a>: bei den Bedürfnissen der Nutzer. Möglicherweise muss für Mobile die Information anders strukturiert sein. Und sicherlich ist ein anderes <em>Interaction Design</em> erforderlich.</p> <p>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.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 09:59:15 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659666#m1659666 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659666#m1659666 <p>Hallo marctrix,</p> <blockquote> <p>Ist auch im Jahr 2016 a.d. für Perlen des Wortwitzes gut... ;-)</p> </blockquote> <p>Zumal auch inhaltlich Pudding und padding nicht weit auseinander liegen. Aus Pudding wird padding.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 16:50:12 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659725#m1659725 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659725#m1659725 <p>Kleiner bekomme ich diese transparente PNG nicht hin, JPG wäre schon was anderes, das Template verlangt aber transparente Bilder bei einigen. Leider...</p> <blockquote> <p>@@marctrix</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <p>Warum nicht für alle Auflösungen das schnell ladende Bild? Speed is a feature gilt auch für den Desktop!</p> </blockquote> <p>Sicher ist ein halbes Megabyte auch für Desktop zu viel. Das sollte sich mit vernünftiger Bildbearbeitung auf unter 100 Kilobyte bringen lassen.</p> <p>Da sollte einen aber nicht davon abbringen lassen, für kleine Geräte ein noch kleineres Bild vorzuhalten. <a href="http://alistapart.com/article/responsive-images-in-practice" rel="nofollow noopener noreferrer">Responsive Images in Practice</a></p> <h3>LLAP </h3><p>„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar)</p> </blockquote> Mobile Webseite erstellen aus vorhandener Desktop Webseite Fri, 29 Jan 16 17:14:01 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659729#m1659729 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659729#m1659729 <p>@@Khan</p> <blockquote> <p>Kleiner bekomme ich diese transparente PNG nicht hin, JPG wäre schon was anderes, das Template verlangt aber transparente Bilder bei einigen. Leider...</p> </blockquote> <p>Nein. Es geht wohl um <code>panorama.png</code> (555 kB).</p> <p>In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe <code>#0a0909</code> 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.</p> <p>Dein Hintergrundbild <code>images/bg.png</code> kannst du entsorgen, das sieht man sowieso nicht.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Sat, 30 Jan 16 03:16:39 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659758#m1659758 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659758#m1659758 <p>@@Gunnar Bittersmann</p> <blockquote> <p>In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe <code>#0a0909</code> gefüllt. […]<br> Dein Hintergrundbild <code>images/bg.png</code> kannst du entsorgen, das sieht man sowieso nicht.</p> </blockquote> <p>Oder du füllst die neue Ebene nicht einfarbig, sondern lädst dort deinen Verlauf, d.h. <code>images/bg.png</code> rein.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Mobile Webseite erstellen aus vorhandener Desktop Webseite Sat, 30 Jan 16 11:10:05 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659764#m1659764 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659764#m1659764 <p>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.</p> <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <p>In Photoshop geöffnet, neue Ebene dahinter gelegt, mit deiner Hintergrundfarbe <code>#0a0909</code> gefüllt. […]<br> Dein Hintergrundbild <code>images/bg.png</code> kannst du entsorgen, das sieht man sowieso nicht.</p> </blockquote> <p>Oder du füllst die neue Ebene nicht einfarbig, sondern lädst dort deinen Verlauf, d.h. <code>images/bg.png</code> rein.</p> <h3>LLAP </h3><p>„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar)</p> </blockquote> Mobile Webseite erstellen aus vorhandener Desktop Webseite Sat, 30 Jan 16 11:20:10 Z https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659765#m1659765 https://forum.selfhtml.org/self/2016/jan/27/mobile-webseite-erstellen-aus-vorhandener-desktop-webseite/1659765#m1659765 <p>Hallo</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Dieses Verhalten haben aber wohl alle komprimierenden Grafikformate. Also auch PNG und GIF.</p> <p>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.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.<br> Jan Koum, Mitgründer von WhatsApp, im <a href="http://heise.de/-3074714" rel="nofollow noopener noreferrer">Heise.de-Interview</a> </div>