Archiv der Kategorie: Themen

Themen für mobile Endgeräte

Mobile Endgeräte mit kleinem Display sind auf dem Vormarsch und erzwingen entsprechende Techniken bei der Webdesign, die auf diesen Umstand Rücksicht nehmen. Hat man früher eine mobile Version einer Website nach der Desktop-Version erstellt, ist es heute genau umgekehrt.

Klassische Webseiten sind meist horizontal organisiert und nutzen die Bildschirmbreite eines Heim-PCs aus. Wir wissen alle, wie mühsam die auf einem Handy winzigen Bedienungselemente werden können und dass man beim Hin- und Herschieben des Inhalts rasch das Interesse an der Seite verlieren kann.

Folgende Konzepte unterstützen mobile Endgeräte:

  • Mobile Website
  • Apps und WebApps
  • Responsive Design
  • OnePage Layout

Mobile Website

Eine mobile Website ist eine zweite Version für mobile Endgeräte, die sich meist automatisch aktiviert, wenn die Desktop-Version von einem Handy aufgerufen wird. Beispiel: http://derstandard.at/ und die dazugehörige mobile Seite http://mobil.derstandard.at/

Bei einer mobilen Webseite muss man zwei Webseiten pflegen, wobei es wegen der Zweigleisigkeit Nachteil bei Suchmaschinen geben kann.

Apps und WebApps

Wir kennen alle die große Zahl der Apps, die manchmal eigenständige Programme sind aber in de meisten Fällen mit einer Webanwendung kommunizieren.  Sie bieten statt einer scrollbaren Webanwendung ein Frontend in Form einer Vollseitenanwendung an.

Und es gibt nicht nur Apps, die man aus dem jeweiligen Store downloaden kann sondern auch WebApps, die nicht im Store erhältlich sind und deren Adresse man auf den jeweiligen Webseiten erfährt. Eine Webapp wird im Browser aufgerufen, verhält sich aber aus ergonomischer Sicht nicht wie eine scrollbare Seite sondern wie eine Vollseiten-App.

Responsive Design

Die CSS-Technologie hat sich in den letzten Jahren enorm weiterentwickelt und es ist nunmehr möglich, dass derselbe StyleSheet sich dem jeweiligen Endgerät automatisch anpasst. Praktisch alle modernen Themen für WordPress sind „Responsive“.

Meine Bank, die ERSTE, bietet sowohl Apps als auch responsive Webs aber auch die klassische Webseite parallel an.

OnePage-Layout

Ein besonders für Handys attraktives Design ist das OnePage-Layout, das sich – nach meinem Eindruck –  besonders für kleinere Projekte eignet, kommt man doch dabei überhaupt ganz ohne ein Menü aus.

Die Seite verfügt zwar auch über ein Menü, kann also auch klassisch navigiert werden aber die Startseite stapelt die Seiten ausgewählter Menüpunkte auf einer Seite. Und damit man die Abschnitte auch optisch gut unterscheiden kann, werden die Texte von Ganzseitenbildern unterbrochen, wobei nach jeder Seite ein neues Bild gezeigt wird.

Das neueste WordPress-Thema „Twenty Seventeen“ verfügt über ein solches One-Page-Design. Wir haben eine Basis-Installation hier gespeichert:

Das Bild rechts zeigt den Verlauf der Bilder und Texte, wenn man nach untenscrollt bzw. wenn man am Handy mit dem Finger nach oben streicht. Die Textteile sind einzelne Seiten, in diesem Fall – weil es ein Demo ist – sind die Abschnitte nur ganz kurz.

Es gibt zwei Möglichkeiten ein solches OnePage-Layout herzustellen:  Über ein PlugIn oder über ein bereits dafür eingerichtetes Thema.

Mit einem PlugIn können auch bestehende Themen OnePage-fähig werden:

Das Universal-Thema Enfold

Wer hätte gedacht, dass das Thema des Jahres 2015 aus Wien kommt? Genauer aus der Burggasse 121, von „Kriesi Media“.

Ohne, dass ich selbst das OnePage Layout verwendet hätte, bekam ich eine Frage eines Clubmitglieds bezüglich eines solchen Layouts und dabei ist mir eben eingefallen, dass mein eigenes Thema Enfold das ja kann. Ich selbst verwende nur die Basis-Installation von Enfold (http://fiala.cc) aber man könnte zum flüssigen Lesen einige Schwesterseiten eines Kapitels zu einem OnePayge-Layout zusammenfassen. Vielleicht mache ich das einmal.

Wie vielgestaltig ein solches Thema sein kann, zeigt eine Liste aller Demos des Themas Enfold. Zu meiner Schande muss ich gestehen, dass ich auf diese Möglichkeiten allein durch die Grundinstallation nicht gekommen wäre, aber gerade dazu sind ja die Demos da.

Einige von diesen Demos sind als OnePager ausgeführt.

Und das besonders Praktische: man kann diese Demos so wie sie sind importieren und muss sie dann nur verändern.

Thema anpassen

In WordPress hat man vollen Zugang zum Source-Code eines Themas. Man kann daher über Die Funktion Dashboard -> Design -> Editor so ziemlich alles verändern. Aber das sollte man nicht tun.

Genau so wie PlugIns unterliegen auch Themen einer fallweisen Aktualisierung. Wenn daher ein Update erfolgt, kann es sein, dass diese Änderungen wieder durch eine neue Version überschrieben werden.

In WordPress ist dieser Fall der Anpassung eines Themas bereits geregelt. Man legt nämlich ein so genanntes Child-Thema an, und das geht so:

Man erzeugt einen neuen Ordner mit dem Namen des Child-Theme an. Nehmen wir an, das Thema TwetyFifteen soll verändert werden.

https://panel.clubcomputer.at -> Einloggen

DateiManager -> „Domäne“ -> wwwroot -> (wp ->) -> wp-content -> themes

Hier legt man den Neuen Ordner twentyfifteen-neu an.

NeuesThema

In diesem Ordner legt man zwei Dateien an: style.css und functions.php (Im Bild ist auch noch die Datei Hintergrund1.jpg dazugekommen, die für den geänderten Stil erforderlich ist.)

NeuesThema1

In style.css schreibt man den Kopf der gleichnamigen Datei aus dem ursprünglichen Thema twentyfifteen.

/*
Theme Name: Twenty Fifteen Muth
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: Franz Fiala
Author URI: https://http://mondon-muth.clubcomputer.at//
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Template: twentyfifteen
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.hentry {
background-color: #dddddd !important;
background-image: url("Hintergrund1.jpg");
color: white;
}

Wichtig ist die markierte Zeile „Template: twentyfifteen“, die sagt, welches Thema die Grundlage für diese Änderungen/Ergänzungen ist.  Nach dem Kopf (markiert durch /*… */) kommen alle Stile, die anders sind als im Original. In diesem Beispiel wurde der Stil mit der Klasse .hentry neu formuliert. Die Hintergrundfarbe wurde von ursprünglich #fff auf #dddddd geändert, die Textfarbe ist jetzt weiß und es gibt ein Hintergrundbild. (Gleichzeitige Angabe von Hintergrundfarbe und Hintergrundbild ist eigentlich zuviel, das Bild setzt sich durch.)

Kleine Schwierigkeit: Bei der css-Datei fehlt rechts neben dem Dateinamen der Bleistift, man kann die Datei daher nicht bearbeiten. Man kann daher entweder die Datei mit Ftp uploaden oder einen Trick anwenden: Man benennt die Datei mit dem Symbol rechts in style.css.txt um, dann kann man die Datei normal bearbeiten. Nach der Einfügung des Textes, benennt man die Datei wieder auf style.css um.

In functions.php schreibt man Folgendes:

<?php
function theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Diese Zeilen sorgen dafür, dass die neue Datei style.css auch korrekt an die bestehende Datei im Ordner twentyfifteen angehängt wird.

Jetzt muss man das Thema nur noch aktivieren. In Dashboard -> Design -> Themes sollte man das neue Thema finden. Anklicken und aktivieren. Fertig.

Die genauere Beschreibung findet sich hier:
http://codex.wordpress.org/Child_Themes

Jetpack

Geht man in PlugIns->Installieren, dann findet man „Jetpack“ unter den ersten Vorschlägen.

Jetpack ein PlugIn mit einer Vielzahl von Funktionen, die sich auf alle möglichen Bereiche von WordPress auswirken.

Der wichtigste Vorteil aller dieser Tools ist aber, dass sie von wordpress.com stammen und dass man sich deshalb auf ihre reibungslose Funktion verlassen kann.

Gleichzeitig ist das aber auch ein Nachteil, weil man sich für den vollen Leistungsumfang bei wordpress ein Konto nehmen muss und damit eine gewisse Bindung mit wordpress eingeht und damit auch Daten seiner Webseite preisgibt.

Diese Verbindung mit wordpress,com bietet aber eine ganze Reihe organisatorischer Vorteile:

Man besitzt damit nämlich ein anwendungsübergreifendes Verwaltungstool, wenn man mehr als eine WordPress-Instanz zu verwalten hat. Diese zentrale Verwaltung achtet auch darauf, dass alle PlugIns aktuell sind.

PlugIn-Übersicht

  • Alle (36)
  • Design (8)
    • Gravatar Hovercards
    • Individuelles CSS
    • Mobiles Theme
    • Photon
    • Shortcode-Einbettungen
    • Unendlich scrollen
    • Widget-Sichtbarkeit
    • Zusätzliche Seitenleisten-Widgets
  • Empfohlen (9)
    • Mobiles Theme
    • Monitor
    • Photon
    • Publicize
    • Schützen
    • Sharing
    • Verwalten
    • Website-Statistiken
    • Ähnliche Beiträge
  • Entwickler (3)
    • JSON-API
    • Omnisearch
    • Single Sign-On
  • Fotos und Videos (5)
    • Gekachelte Galerien
    • Karusell
    • Photon
    • Shortcode-Einbettungen
    • VideoPress
  • Mobile (1)
    • Mobiles Thema
  • Schreiben (8)
    • Erweiterte Verbreitung
    • Individuelle Inhaltstypen
    • JSON-API
    • Markdown
    • Per E-Mail veröffentlichen
    • Rechtschreibung und Grammatik
    • Schöne Mathematik
    • Shortcode-Einbettungen
  • Social (9)
    • Abonnements
    • Gefällt mir
    • Gravatar Hovercards
    • Kommentare
    • Publicize
    • Sharing
    • Shortcode-Einbettungen
    • WP.me Kurz-URLs
    • Zusätzliche Seitenleisten-Widgets
  • Sonstiges (5)
    • Benachrichtigungen
    • Kontaktformular
    • Website-Verifizierung
    • ValutPress
  • Website-Statistiken (1)
    • Website-Statistiken
  • Zentralisierte Verwaltung (1)
    • Verwalten

Was dieses JetPack alles kann, lernt man erst nach und nach. Zum Beispiel hat mich die Funktion Monitor verblüfft. Monitor registriert nämlich eventuelle Ausfälle der Website. Hier ein Beispiel für eine solche Ausfallsmeldung der Seite fiala.cc:

Hi ffiala,

Jetpack Monitor is on the job, keeping tabs on http://fiala.cc. During our last check on Friday, October 23, 7:58 am, we noticed that your site was down.

If you’re concerned about your site’s status, you might want to get in touch with your hosting provider. We’ll continue keeping track, and will let you know when your site is up and running again and the total downtime.

Cheers,
The Jetpack Team

Themen

Titel der Homepage Adresse Thema
Digital Society https://digisociety.at alora
ClubComputer https://clubcomputer.at alora
cc-Communications https://www.ccc.at alora
Austrian Microsoft User Grouo http://amug.at alora
Planung und Archiv des cc-camp http://cc-camp.at matheson
Paulis Blog http://blog.belcl.at xtreme-one
Ferdinands Projektseite http://www.spielen.at twenty ten
Franz Blog/Seiten http://fiala.cc twenty fifteen (violett)
Werners Blog http://www.illsinger.at admired
Hier kann man üben http://wp.clubcomputer.at twenty fourteen
Basisinstallation http://wp.clubcomputer.at/mini twenty fifteen
Rapid-Tagebuch http://rapid.fiala.cc twenty fifteeen (green)