nicht angemeldet
Alte Webside für Mobilgeräte anpassen
Chico_wau
Alte Webside für Mobilgeräte anpassen
Chico_wau
Matthias Scharwies
Der Martin
Gunnar Bittersmann
Rolf B
JürgenB
kai345Hallo Leute,
ich bin ein etwas älteres Semester (Jahrgang 1944) und habe meine Homepage (http://www.ahnenforschung-scharnberg.de) vor 18 Jahren erstellt, nachdem ich mir Selfhtml und CSS autodidaktisch beigebracht habe. Seitdem wird nach altem Standard nur noch ergänzt und erweitert.
2003 waren Mobilgeräte noch nicht so vertreten wie heute, deshalb ist die Seite auch nicht an Mobilgeräte angepasst. Geht das auf einfache Weise oder muss ich dafür Selfhtml und CSS komplett neu lernen? Google beklagt sich z.B., dass die Nutzerfreundlichkeit meiner Seite für Mobilgeräte schlecht sei - und das kann ich auch verstehen. Ich würde meine Seite gern an die heutigen Mobilgeräte anpassen, weiß aber nicht, ob ich die dafür notwendigen Techniken überhaupt noch verstehe.
Gibt es dafür eine einfache Methode, die selbst ich verstehe?
Wäre für einen Tipp sehr dankbar.
LG Chico
-
Servus!
Hallo Leute,
ich bin ein etwas älteres Semester (Jahrgang 1944) und habe meine Homepage (www.ahnenforschung-scharnberg.de) vor 18 Jahren erstellt, nachdem ich mir Selfhtml und CSS autodidaktisch beigebracht habe.
Herzlich willkommen zurück!
2003 waren Mobilgeräte noch nicht so vertreten wie heute, deshalb ist die Seite auch nicht an Mobilgeräte angepasst. Geht das auf einfache Weise oder muss ich dafür Selfhtml und CSS komplett neu lernen? Google beklagt sich z.B., dass die Nutzerfreundlichkeit meiner Seite für Mobilgeräte schlecht sei - und das kann ich auch verstehen. Ich würde meine Seite gern an die heutigen Mobilgeräte anpassen, weiß aber nicht, ob ich die dafür notwendigen Techniken überhaupt noch verstehe.
Gibt es dafür eine einfache Methode, die selbst ich verstehe?
Lies dir mal die ersten zwei Kapitel zum Grundverständnis durch, dann das dritte, was konkret geändert werden soll.
In Deinem Fall auf die Schnelle:
- HTML-Grundgerüst
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">Achtung: Zeichencodierung nicht nur angeben, sondern alle Dateien auch so speichern.
-
Ich würde die Navigation und die linke Spalte in einer Navigation zusammenfassen. Deine Familie zuerst und dann die Namensliste, alte Zeiten, etc.
-
HTML5-Elemente anstelle von divs
-
CSS Bis jetzt hast du floats verwendet. Studier mal das Grid Layout und versuche (d)eine Seitenstruktur in Grid Layout zu realisieren.
Du kannst uns jederzeit fragen, wenn Du nicht weiter weißt!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Servus!
Du hast ein ziemliches Chaos, das wsl. so gewachsen ist:
<span id="fam87" class="gr">LENCKERSTORP Andreas</span> <br />* 1696 Grönwohld (Papiermühle) † 16.11.1746 Trittau <br />Eltern: <a href="baum.html#fam88">Linckerstorp M. Andreas</a>, <a href="baum.html#fam18">Burmeister Anse </a> <div class="fam"><b>oo 11.11.1725</b> Trittau <br /><span class="fr">STEFFEN Cathrin Elsabe</span> ev <br />† 01.01.1755 Trittau <ol class="kind"> <li><b>Hans Hinrich</b> † Mai 1730 Trittau</li> <li><b>Anna Dorothea</b> * 14.09.1730 <div class="ehe">oo 16.07.1756 Trittau, <a href="baum.html#fam93">Meins Frantz</a></div></li> <li><b>Unbekannt</b> * Jan. 1737 Trittau [] 27.03.1740 Trittau</li> </ol></div>Ich würde die Familien in ein eigenes div-Element packen und dann evtl dl-Listen verwenden:
HTML/Tutorials/Listen/Beschreibungslisten
<div id="fam87" class="fam"> <h2>LENCKERSTORP Andreas</h2> <dl> <dt>*</dt><dd>1696 Grönwohld (Papiermühle)</dd> <dt>†</dt><dd>16.11.1746 Trittau</dd> <dt>Eltern</dt><dd><a href="baum.html#fam88">Linckerstorp M. Andreas</a>, <a href="baum.html#fam18">Burmeister Anse </a></dd> <dt>∞</dt><dd><b>11.11.1725</b> Trittau</dd> <dt class="frau">Frau</dt><dd>STEFFEN Cathrin Elsabe ev</dd> <dt>†</dt><dd>01.01.1755 Trittau</dd> <dt>Kinder</dt><dd> <dl> <dt><b>Hans Hinrich</b></dt> <dt>*</dt><dd>Mai 1730 Trittau</dd> <dl> </dl> <div ><!--- sollte auch in obere dl eingefügt werden! ---> <ol class="kind"> <li><b>Hans Hinrich</b> † Mai 1730 Trittau</li> <li><b>Anna Dorothea</b> * 14.09.1730 <div class="ehe">oo 16.07.1756 Trittau, <a href="baum.html#fam93">Meins Frantz</a></div></li> <li><b>Unbekannt</b> * Jan. 1737 Trittau [] 27.03.1740 Trittau</li> </ol></div> </div>Wenn Du alles in utf-8 gespeichert hast, kannst du auch auf die HTML-Entities
üusw. verzichten.Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo,
Wenn Du alles in utf-8 gespeichert hast, kannst du auch auf die HTML-Entities
üusw. verzichten.die sind auch dann schon überflüssig, wenn man eine ältere 8bit-Codierung wie ISO-8859-x oder Windows-1252 (im Windows-Jargon gelegentlich auch ANSI genannt) verwendet. Also eigentlich schon immer. 😉
Man braucht sie eigentlich nur, wenn der begründete Verdacht besteht, dass eines der beteiligten Systeme oder Programme "nur" ASCII beherrscht. Und sowas ist mir seit rund 25 Jahren nicht mehr begegnet.
Anders sieht es mit den HTML-Sonderzeichen aus: <, " und eventuell '[1] sowie & braucht man, weil die Zeichen, die sie repräsentieren, in HTML bzw. in einem Link eine spezielle Bedeutung haben, wenn sie unmaskiert auftreten.
Live long and
proshealthy,
Martin--
Fische, die bellen, beißen nicht.
Nur wenn man Attributwerte in einfache Hochkommata einschließt (nicht empfohlen) ↩︎
-
Moin
<div id="fam87" class="fam"> <h2>LENCKERSTORP Andreas</h2> <dl> <dt>*</dt><dd>1696 Grönwohld (Papiermühle)</dd> <dt>†</dt><dd>16.11.1746 Trittau</dd> <dt>Eltern</dt><dd><a href="baum.html#fam88">Linckerstorp M. Andreas</a>, <a href="baum.html#fam18">Burmeister Anse </a></dd> <dt>∞</dt><dd><b>11.11.1725</b> Trittau</dd> …sind denn die Zeichen
*,†und∞barrierefrei genug oder sollte es da noch zusätzliche Informationen geben, z.B.<dfn title="geboren">*</dfn>Gerade
∞ist ja weder in der Theorie („bis dass der Tod euch scheidet“) noch der Praxis unendlich.Viele Grüße
Robert-
Hallo,
sind denn die Zeichen
*,†und∞barrierefrei genug oder sollte es da noch zusätzliche Informationen geben, z.B.<dfn title="geboren">*</dfn>Gerade
∞ist ja weder in der Theorie („bis dass der Tod euch scheidet“) noch der Praxis unendlich.zumal das korrekte Zeichen in der Genealogie eigentlich aus zwei ineinander verschlungenen Ringen besteht, AFAIK. Weiß aber nicht, ob Unicode das hergibt.
Live long and
proshealthy,
Martin--
Fische, die bellen, beißen nicht.-
Servus!
sorry, das war gestern auf die schnelle mal nur angeregt.
zumal das korrekte Zeichen in der Genealogie eigentlich aus zwei ineinander verschlungenen Ringen besteht, AFAIK. Weiß aber nicht, ob Unicode das hergibt.
Ich auch nicht. Hab's mal rausgesucht:
⚭
Also im HTML-Markup so:
<dt class="married">verheiratet</dt><dd><b>11.11.1725</b> Trittau</dd>und im CSS so:
.married { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background: url("image-replacement.png"); } .married::after { content:'⚭'; }Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“ -
@@Der Martin
Gerade
∞ist ja weder in der Theorie („bis dass der Tod euch scheidet“) noch der Praxis unendlich.zumal das korrekte Zeichen in der Genealogie eigentlich aus zwei ineinander verschlungenen Ringen besteht, AFAIK. Weiß aber nicht, ob Unicode das hergibt.
Öffne die Zeichenübersicht, tippe „marr…“ ins Suchfeld.
😷 LLAP
--
„Man darf die Klimakrise doch echt jetzt nicht überbewerten.
Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“
— @HalleVerkehrt-
Hallo Gunnar,
hast Du auch einen guten Vorschlag, wie man die Symbole mit zugänglichem Text versieht? Das title-Attribut wird da relativ schlecht gemacht.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
hast Du auch einen guten Vorschlag, wie man die Symbole mit zugänglichem Text versieht? Das title-Attribut wird da relativ schlecht gemacht.
mit vor Sehenden verstecktem Text.
Gruß
Jürgen
-
-
Hallo Gunnar,
als ich gesehen habe, dass du dich auch im Thread zu Wort meldest, dachte ich erst, du wolltest den Ausdruck Webside kritisieren.
Dann mach ich das jetzt mal:
- Webseite (englisch web page) ist eine einzelne Seite eines Webauftritts.
- Website (im Englischen gewöhnlich getrennt geschrieben: web site) ist die Gesamtheit aller zu einem Webauftritt gehörenden Seiten.
Aber Webside gibt es nicht - oder höchstens im übertragenen Sinn (The dark side of the web).
Live long and
proshealthy,
Martin--
Fische, die bellen, beißen nicht.-
Moin
(The dark side of the web).
von
<span style="color:#f0f">Flyod</span>😉
Viele Grüße
Robert-
Hallo Robert,
(The dark side of the web).
von
<span style="color:#f0f">Flyod</span>fast getroffen. 😉
Das kannte ich übrigens noch nicht, danke.Live long and
proshealthy,
MartinPS: Deine Farbe ist ein sattes Telebum-Magenta. Ich hätte eher #F8C genommen.
--
Fische, die bellen, beißen nicht.-
Moin Martin,
(The dark side of the web).
von
<span style="color:#f0f">Flyod</span>fast getroffen. 😉
Das kannte ich übrigens noch nicht, danke.Mir fiel dazu direkt The dark side of the Moon ein – das ist ja von Pink Floyd (und man muss es mit guten Kopfhörern hören).
PS: Deine Farbe ist ein sattes Telebum-Magenta. Ich hätte eher #F8C genommen.
Das von mir verwendete „Pink“ kenne ich als Farbe um Auffälligkeiten in Bildern (vor allem Screenshots) per Rahmen hervorzuheben. Es ist so knallig, dass es direkt auffällt und es ist eine Farbe, die normalerweise nicht anderweitig verwendet wird.
Viele Grüße
Robert-
Hallo,
Moin Martin,
(The dark side of the web).
<span style="color:#f0f">Flyod</span>Das kannte ich übrigens noch nicht, danke.
Mir fiel dazu direkt The dark side of the Moon ein
das sagt mir immerhin was, wenn auch nur dem Titel nach.
Das von mir verwendete „Pink“ kenne ich als Farbe um Auffälligkeiten in Bildern (vor allem Screenshots) per Rahmen hervorzuheben. Es ist so knallig, dass es direkt auffällt und es ist eine Farbe, die normalerweise nicht anderweitig verwendet wird.
Das ist (hoffentlich) richtig. 😀
Live long and
proshealthy,
Martin--
Fische, die bellen, beißen nicht.
-
-
printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);<span style="color:#f0f">Flyod</span>[...]
PS: Deine Farbe ist ein sattes Telebum-Magenta.[…]
Nö, siehe Wikipedia. Auf der Seite kann man deutlich sehen, daß ein erheblicher Farbunterschied (Farben links oben zu rechts unten) besteht
/K
-
-
@@Robert B.
(The dark side of the web).
von
<span style="color:#f0f">Flyod</span>The dark side of the grid von Manuel Matuzovic.
😷 LLAP
--
„Man darf die Klimakrise doch echt jetzt nicht überbewerten.
Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“
— @HalleVerkehrt-
@@Gunnar Bittersmann
(The dark side of the web).
von
<span style="color:#f0f">Flyod</span>The dark side of the grid von Manuel Matuzovic.
The dark side of the mind von Pink Freud.
😷 LLAP
--
„Man darf die Klimakrise doch echt jetzt nicht überbewerten.
Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“
— @HalleVerkehrt
-
-
-
@@Der Martin
als ich gesehen habe, dass du dich auch im Thread zu Wort meldest, dachte ich erst, du wolltest den Ausdruck Webside kritisieren.
Bin im Urlaubsmodus; da kann mir sowas schon mal durch die Lappen gehen. 😏
😷 LLAP
--
„Man darf die Klimakrise doch echt jetzt nicht überbewerten.
Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“
— @HalleVerkehrt
-
-
-
-
-
Hi there,
Ich würde meine Seite gern an die heutigen Mobilgeräte anpassen, weiß aber nicht, ob ich die dafür notwendigen Techniken überhaupt noch verstehe.
Die Technik dahinter ist nicht so kompliziert, soweit ich das bei Deiner Seite gesehen habe wird's beim Content eher ohnehin wenig Probleme geben, was Du Dir aber überlegen mußt, wie Du Deine Menüstruktur auf einem Mobilgerät realisieren willst.
Wenn Du (eine andere Möglichkeit gibts imho eh nicht) die Menüzeile oben als Hauptmenü und die Menüpunkte, die jetzt links stehen, als Submenü ausführst, dann stellt sich vor allem die Frage, wie Du Deine Seite überhaupt generierst. Schreibst Du das alles in einem Editor oder erzeugst Du Menü und/oder Inhalt aus einer Datenbank? In letzterem Fall wären Änderungen am Menü natürlich um einiges weniger aufwendig.
Gibt es dafür eine einfache Methode, die selbst ich verstehe?
Nachdem ich nicht verstehe, was Du verstehst, verstehe ich nicht, was ich Dir drauf antworten soll. Ich denke halt, vor einer Änderung solltest Du Dir im Klaren sein, wie Deine Seite auf Mobilgeräten aussehen soll und wie Du das wie oben beschrieben organisieren willst. Wenn Du damit mit Dir im Reinen bist(😉), dann erst machen Fragen über Gridlayout, Utf8-Codierung oder wie das generell technisch umzusetzen ist, Sinn...
-
Hallo,
Gibt es dafür eine einfache Methode, die selbst ich verstehe?
Nachdem ich nicht verstehe, was Du verstehst, verstehe ich nicht, was ich Dir drauf antworten soll.
die Frage verstehe ich schon (glaube ich), aber die Antwort ist trotzdem unbequem: Responsivität, also nutzerfreundliches Verhalten der Anzeige auch unter beengten Verhältnissen, wie man sie halt bei Mobilgeräten hat, kann man nicht mal eben so nachrüsten. Dazu braucht es schon eine klare, saubere Strukturierung, auf die man dann mit einem flexiblen CSS aufsetzen kann.
Flexibles CSS heißt: Möglichst keine festen Größenangaben; das Layout so wenig wie möglich einengen, sondern frei fließen lassen; ein Raster (soweit sinnvoll und gewünscht) z.B. mit CSS-grid realisieren; eventuell mit Media-Queries auf stark unterschiedliche Display-Größen reagieren.
Live long and
proshealthy,
Martin--
Fische, die bellen, beißen nicht.-
Hi there,
Gibt es dafür eine einfache Methode, die selbst ich verstehe?
Nachdem ich nicht verstehe, was Du verstehst, verstehe ich nicht, was ich Dir drauf antworten soll.
die Frage verstehe ich schon (glaube ich)[...],
Die Frage hab ich auch verstanden, was ich meinte, daß ich seinen Wissensstand nicht kenne und somit auch nicht beurteilen kann, was er unter "einfach" versteht.
aber die Antwort ist trotzdem unbequem: Responsivität, also nutzerfreundliches Verhalten der Anzeige auch unter beengten Verhältnissen, wie man sie halt bei Mobilgeräten hat, kann man nicht mal eben so nachrüsten. Dazu braucht es schon eine klare, saubere Strukturierung, auf die man dann mit einem flexiblen CSS aufsetzen kann.
Deswegen hab ich ja geschrieben, daß er sich vorher ein paar grundlegende Gedanken darüber machen sollte, ehe er sich mit technischem Kleinkram beschäftigt…
-
-
-
Wenn du die Seite nicht komplett umgestalten willst (was ich dir beim Anblick raten würde) könntest du es mit einem leichtgewichtigen modularen CSS Framework versuchen z.B. Pure CSS (https://purecss.io) dort kannst du nur einzelne Elemente des Frameworks benutzen z.B. Grid, Buttons usw.
Besser wäre aber ein komplettes Redesign mit einem umfangreicheren Framework z.B Bulma (https://bulma.io) oder Bootstrap (https://getbootstrap.com) zu den letzten beiden findest du auch jede Menge Dokumentation im Internet und wenn man einmal das Prinzip verstanden hat ist es nicht schwer, auch nicht für Mobilgeräte Layouts. Im Grunde passt man nur die Spaltenbreiten für die Geräteklassen entsprechend an.
--
I like 2 Code
