Links6.4.15, 18:55 - Dies und Das
Google wird seinen Suchmaschinenalgorithmus zum 1.4.15 ändern. Ich verwende für meine kleinen Webprojekte seit langer Zeit die Blogsoftware simplePHPblog. Leider wurde diese nie für die Benutzung duch Telefone / Smartphones / Tablets optimiert.
Um jetzt nicht aus der Suche zu fliegen habe ich mich dran gesetzt und ein paar Grundlagen eingebaut, um die Seite für iGedöns anschaulicher zu machen.
Google gibt mir eine Starthilfe auf der Seite https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=de
Es gibt bei der Software einiges zu erledigen: Die Bilder hier im Blog werden auf einen fixen Wert runterskaliert, wenn sie zu groß sind. Das ist natürlich vollkommener Quatsch. Ich füge relative Werte ein. So sind die Bilder immer in der richtigen maximalen Größe. Das Titelbild hier hatte ne ähnliche Macke. Aus irgendeinem Grund war es als Hintergrundbild eingesetzt und ließ sich somit nicht skalieren. Also raus aus dem Hintergrund und die Größe relativiert. fertig.
Für kleine Bildschirme wird am Ende der Stylesheets noch ein Wenig am Schriftgrad und der Anordnung auf der Seite gefeilt. Eine Art Kochrezept für simplePHPblog ist am Ende bei weiterlesen zu finden.
Ich hoffe die neue Darstellung ist für die Augen meiner Leserschaft angenehm
Die zu ändernden Dateien im der Blogsoftware simplePHP sind
scripts/sb_header.php und sb_formatting.php
Man füge zu allererst also folgende Zeile in den scripts/sb_header.php:
<meta name="viewport" content="width=device-width, initial-scale=1">
Anschließend knöpe man sich die scripts/sb_formatting.php vor:
an der Stelle an der die Rede ist von "auto_resize = true; "
"auto_resize = false;"eintragen.
Damit sind jetzt erstmal alle Bilder unskaliert... aber nicht lange ...
In den Stylesheets (themes/modern/themes/modern/user_style.php) füge ich folgende Zeilen hinzu:
(1) im Abschnitt page die Seitengröße auf 90% Setzen:
/ max-width: <?php echo $page_width; ?>px;
width: 90%;
(2) im Abschnitt img
img {
border-style: none;
max-width:98%;
height: auto;
}
Damit haben die Bildscher wieder das richtige Format :)
(3) Jetzt für die Headergrafik im oberen Abschnitt header
#header img { max-width:100%;
max-height:100%;
display:block;
margin-left: auto;
margin-right: auto;
}
und padding auf 5 5 5 5 gesetzt....Und nun extra für Geräte mit kleinem Display
(4) Am Ende einfügen:
@media only screen and (max-width: 480px) {
#page { width: 100%; }
#header { width:100%;}
#maincontent { width:98%; }
#maincontent .entry .blog_body,
#maincontent .static .blog_body,
#maincontent .comment .blog_body
{
font-size: 1.1em;
}
#sidebar { width:98%;
font-size: 1.1em;
}
}
Zum Schluss habe ich am /themes/modern/themes.php gearbeitet und alle Werte zu relativen Werten umgeschraubt
$theme_vars[ 'content_width' ] = "80%";
$theme_vars[ 'menu_width' ] = "20%";
und den Header in den Vordergrund gerückt -- das ist weiter unten im Abschnitt
// Begin Page Layout HTMLbrutal mit dem html tag <img src="bla>.
?>
<body>
<div id="page">
<div id="header">
<!--?php if ( $blog_config->getTag('BLOG_ENABLE_TITLE') ) { echo($blog_config->getTag('BLOG_TITLE')); } ?-->
<img src="themes/modern/images/header750x100.jpg" alt="Netzherpes">
Wer auch immer dieses ding entworfen hat hat niemals damit gerechnet, das irgendwann einmal sich die Bildschirme ändern, weder größer noch kleiner werden ;)