QUESTION Mobiltaugliche Seiten

[fralena33]

Seit geraumer Zeit verlangt GOOGLE mobiltaugliche Webseiten.
Meine Frage:
Muss ich das Template austauschen oder gibt es eine andere Möglichkeit?
Danke für eine hilfreiche Antwort.
Fralena33

[moped]

Naja, entweder du baust das vorhandene Template auf "responsive" um, oder du nimmst ein entsprechend vorbereitetes.

Gruß moped

[fralena33]

Naja, entweder du baust das vorhandene Template auf "responsive" um, oder du nimmst ein entsprechend vorbereitetes.

Gruß moped

Vielen Dank - wenn du mir jetzt auch noch sagen kannst, wo ich ein
Template mit der Eigenschaft „responsive" finde, wäre das klasse!

[moped]

Die hier fallen mal unter den Suchbegriff:
responsive Templates

[PauliOpa]

Ich habe folgendes über CSS probiert und es scheint zu funktionieren (sowohl automatische vertikale und horizontale Anpassung)

(zB: www.schwarzer-adler.co.at)

Was vielleicht noch möglich sein kann:
Die<<< min-width: 980px; >>> setzen (oder entsprechend den Angaben von GOOGLE, die eine Breite angeben, weil die Seite zu breit sein soll...)

zum Beispiel:
---------------------------------------
QUOTE
---------------------------------------
html{
padding:0;
max-width:1280px;
min-width: 1024px;
width: 1280px;
margin-left:auto;
margin-right:auto;
height: 101%;
}


body{
width:100%;
height: 101%;
/* zentriert */
margin-left:auto;
margin-right:auto;
margin-top: 0;
padding:0;
/* Werte individuell einstellen */
font-family: Arial, Verdana, Georgia, Arial,sans-serif;
font-size: 120%;
color:#333;
background: url(images/bg_tiles.jpg) repeat;
}
____________________________________
UNQUOTE
___________________________________

[fralena33]

Ich habe folgendes über CSS probiert und es scheint zu funktionieren (sowohl automatische vertikale und horizontale Anpassung)

(zB: www.schwarzer-adler.co.at)

Was vielleicht noch möglich sein kann:
Die<<< min-width: 980px; >>> setzen (oder entsprechend den Angaben von GOOGLE, die eine Breite angeben, weil die Seite zu breit sein soll...)

zum Beispiel:
---------------------------------------
QUOTE
---------------------------------------
html{
padding:0;
max-width:1280px;
min-width: 1024px;
width: 1280px;
margin-left:auto;
margin-right:auto;
height: 101%;
}


body{
width:100%;
height: 101%;
/* zentriert */
margin-left:auto;
margin-right:auto;
margin-top: 0;
padding:0;
/* Werte individuell einstellen */
font-family: Arial, Verdana, Georgia, Arial,sans-serif;
font-size: 120%;
color:#333;
background: url(images/bg_tiles.jpg) repeat;
}
____________________________________
UNQUOTE
___________________________________

Verstehe ich richtig, dass nur die Einstellungen in der css geändert werden müssen (können). Das wäre natürlich klasse...

---

Die hier fallen mal unter den Suchbegriff:
responsive Templates

Danke dafür.

[moped]

Verstehe ich richtig, dass nur die Einstellungen in der css geändert werden müssen (können).

Ja, das reicht schon, allerdings sind da je nach Auflösung umfangreiche Änderungen zu machen.
Es kann sein, dass Elemente bei kleiner Auflösung (z.B. Smartphone) ausgeblendet werden sollen, oder eine Liste anderst formatiert wird.
Absätze und Container werden schmaler, Grafiken kleiner skaliert, usw.
Einen kurzen Überblick findest du z.B. auf dieser Seite, hauptsächlich die Media Queries sind da für die Umsetzung wichtig.

[PauliOpa]

Sollten Elemente zu klein sein, vergrößere ich sie "mit Daumen und Zeigefinger"...
Im übrigen ist "width" im html tag fix + min/max width fest definiert mit 1280 /1280 /1024.
ansonsten verwende ich für die Elemente innerhalb %-Angaben (100% ist dann im body 1280px + -
und für andere Größenangaben "em" oder % (zB. font-size), etc).
Anmerkung: Diese Variante habe ich selber entwickelt (war viel suchen, lesen und testen...)

Das sollte normalerweise reichen, denn Homepages in Smartphones werden nur relativ kurz zum Suchen von Begriffen oder andere Infos verwendet. Und bei Tablets sollte diese Variante auch reichen (wennDr. Google zufrieden ist ( ;-))))

Der Link von moped ist sicherlich hilfreich, ich bleibe bei meiner Variante (reicht für mich und mein Umfeld normalerweise aus)

[moped]

Hallo PauliOpa,

ansonsten verwende ich für die Elemente innerhalb %-Angaben

das mag bei deinem Template, und vielleicht anderen auch, funktionieren.
Andere Templates bauen auf einem pixelbasiertem Grid System auf, da klappt das so nicht.
Ich will aber hier nicht sagen was richtig oder falsch ist, es geht ja um die Möglichkeit der Umsetzung. Da kann man verschiedene Varianten schon mal nennen.

[fralena33]

Vielen Dank für Eure Hilfe.
Ich finde es schade, dass GS kein Update oder wenigstens eine Anleitung zum Umbau zur Verfügung stellt. Die Problematik betrifft doch nicht nur uns.

[moped]

Das ist ja nicht die Aufgabe von GS. Es gibt ja genug responsive Templates.
Welches du nimmst, ob das für verschiedene Auflösungen und Geräte tauglich ist, entscheidest du selbst.
GS stellt nur den Unterbau.

[PauliOpa]

... das mag bei deinem Template, und vielleicht anderen auch, funktionieren.
Andere Templates bauen auf einem pixelbasiertem Grid System auf, da klappt das so nicht.

OK, vielleicht dort nicht, aber viele Templates haben eine CSS Datei für "Layout und Steuerung". Prinzipiell lässt sich jedes Template dort entsprechend "flexibel" oder "liquid" anpassen, mit %-Angaben und "em" - Definitionen.

Da lege ich dann nur einmal im html TAG die fixen Breiten fest, alles andere passt sich dann automatisch an.

GS stellt nur den Unterbau.
OK, aber dazu ein möglicher Weg und eine Idee (die ich demnächst umsetzen möchte):

Es gibt feste Angaben/Eigenschaften
(Rahmen/2 Säulen/3 Säulen...) == TOP - HEADER/LOGO - MENUBAR - LEFT und/oder RIGHT SIDEBAR -CONTENT - FOOTER) und andere fixe Eigenschaften, die immer gleich bleiben.

und variable Angaben, wie LOGO (Bild), Schriftarten, Schriftgrößen Überschriften, Farben (Header-Hintergrund/Seitenhintergrund) etc.

das bedeutet:

Teilt man die fixen Einheiten und die Variablen Einheiten in zwei CSS Dateien und lädt die variable CSS nach der fixen, dann verändert sich das Aussehen der Website entsprechend den Definitionen, aber "das Gerüst und die Mechanik" bleiben gleich.

Zum anderen verwendet man dann noch "Stanbdard-Plugins" (Danke für die GetSimple Plugins von Martin Vlcek == Kontakt/Galerien/Nested Menu/etc) und man hat auf einfache und schnelle Art und Weise vielseitigste Möglichkeiten, relativ schnell Homepages/Templates "individuell" zu generieren.

Übrigens ist die Idee ja nicht neu, ich erinnere an die seinerzeitige weltweite Aktion ZEN GARDEN -- Guckstu: ZEN GARDEN Homepage == vielleicht auch die eine oder andre Idee für Designs... (derzeit sehe ich über 200) (Wermutstropfen: Site in Englisch)