Website-Optimierung: Das geht noch zum Jahreswechsel

website-Optimierung: Das kann man zum Jahreswechsel in Angriff nehmen und auch gleich umsetzen

Website-Optimierung: Das kann man zum Jahreswechsel in Angriff nehmen und auch gleich umsetzen

Website-Optimierung ist eine Daueraufgabe, denn eine Website ist nie optimal. Die Anforderungen ändern sich scheinbar so schnell, dass man mit Überarbeitungen kaum hinterher kommt. Gerade diejenigen Blogger, die ihre Webseite nicht professionell nutzen, führt diese Daueraufgabe schnell an ihre Grenzen. Und kleinere Unternehmen reifen das Thema vorzugsweise zur Zeit der Rück- und Ausblicke auf. Denn dann nimmt man oft auch seine Statistik etwas näher unter die Lupe.

Drei kleinere Dinge kannst Du meiner Einschätzung noch in der Zeit des Jahreswechsels für eine Website-Optimierung umsetzen. Sie haben einen positiven Effekt für die eigene Website  – egal ob Du sie privat oder geschäftlich nutzt.

Website-Optimierung: Was sagt die Statistik?

Die Statistik sollte man öfters mal unter die Lupe nehmen. Meistens aber begnügt man sich mit ein oder zwei Daten, für die man sich aktuell interessiert. Wie hat dieser und jener Artikel abgeschnitten? Wie entwickeln sich meine Besucherzahlen?

Dabei hat so ziemlich jede Statistik eine Unmenge an Daten, von denen man zumindest einige gut für die Website-Optimierung nutzen kann. Ich verwende Google Analytics. In anderen Statistik-Werkzeugen wird das so oder ähnlich ebenfalls enthalten sein. Hier drei Dinge, die man auch in neue Handlungen umsetzen kann.

Statistik: Mobile Besucher

Immer  mehr Besucher kommen mit mobilen Geräten auf Deine Seite. Vorzugsweise nutzen sie das Handy – und bekommen Dein schickes Desktop-Design gar nicht zu sehen. Bei Zielgruppe –> mobil –> Übersicht findest Du den Anteil der Smartphone-Surfer auf Deiner Website.

Wenn es Dir so geht wie mir, erstaunt Dich der hohe Anteil. Also gehe zur mobilen Ansicht Deines Browsers (oder nutze Dein Smartphone). Fast alle Browser haben heute Entwickler-Werkzeuge integriert. In Safari des Mac OS-X geht das in Deinem Browserfenster über Entwickler –> In Modus „Responsive Design” wechseln und dann das jeweilige Gerät anklicken. Wir wirken Deine Beiträge und Bilder und die Navigation hier? Funktioniert alles, wie es soll? Oder kannst Du speziell für mobile Geräte noch was in punkto Website-Optimierung tun?

Du suchst zuerst am besten nach den Artikeln, die Du für besonders wichtig hältst. Und dann sicherheitshalber noch nach denen, die bei Deinen Besuchern besonders nachgefragt werden

Statistik: Die wichtigsten Beiträge

Auch die findest Du in der Statistik: Gehe zu Verhalten –> Websitecontent –> Zielseiten. Das sind Deine am häufigsten besuchten Beiträge. Rechts oben kannst Du den Betrachtungs-Zeitraum ändern und beispielsweise einen Jahresrückblick ansehen.

Fast noch wichtiger ist, wie sich das in jüngerer Zeit entwickelt hat. Dazu gehst Du zu Verhalten –> Websitecontent –> Aufschlüsselung nach Content. Bei mir führt der Weg dann weiter über das Blog und dann – weil meine Beiträge chronologisch sortiert werden – weiter zum Ordner 2017 oder noch weiter zum Ordner /12/ für Dezember. Wenn Du das nacheinander für die letzten drei vier Monate machst, bekommst Du einen guten Eindruck davon, welche Art von Blogpost, welche Themen oder Kategorien gut nachgefragt wurden.

Und vielleicht hast Du einen richtigen „Renner”: Einen  Blogpost, der das Zigfache aller anderen Posts an Zugriffen hervorruft. Dann überleg Dir, ob Du zu diesem Thema nicht noch mehr Beiträge verfassen kannst.

Statistik: Besucherquellen

Und wo kommen die Besucher nun her? Sehr wahrscheinlich kommen die allermeisten über die Suchmaschine auf Deine Webseite. Genauer erfährst Du es, wenn Du hierhin gehst: Akquisition –> alle Zugriffe –> Quelle / Medium oder –> Verweise. Da werden aber neben Google wahrscheinlich noch Deine Social Media Accounts gelistet sein. Weiter hinten kommen dann diejenigen Webseiten, die einen Link zu Deiner Webseite gelegt haben.

Auch wenn das gegenüber dem Suchmaschinen-Verkehr eine geringe Rolle spielt: Wie wärs mit einem Dankeschön? Oder einen Link zurück? Oder einfach mal mit dem anderen Webseiten-Betreiber drüber reden, wie man kooperieren kann? Die meisten freuen sich über so eine Anfrage.

 

Die Über-Mich-Seite

Wahrscheinlich hast Du es in Deiner Statistik schon entdeckt: Die Über-mich-Seite ist eine der meist gelesenen Seiten. In Anbetracht dieses Stellenwertes sind viele Über-Mich-Seiten bemerkenswert schlecht (meine eigenen ist da nicht ausgenommen). Es gibt viele gute Anleitungen darüber, wie man eine anspruchsvolle (und wirkungsvolle) Über-Mich-Seite erstellt. Und es gibt viele tolle Beispiele, an denen man sich Anregungen holen kann.

Erster Schritt könnte auch sein, sich selbst ins rechte Licht zu rücken. Wenn es zu wenig gute Fotos von Dir gibt, dann mach doch selbst welche! Ich glaube, es gehört zum Wesen der Über-mich-Seite, dass sie einem veraltet vorkommt, wenn man sie das nächste Mal liest. Aber was solls: Dann ändere sie eben, aktualisiere, korrigiere.

Landingpages einrichten

Viele Blogger haben und auch Unternehmen haben auf ihren Webseiten etwas anzubieten: Einen kostenlosen Leitfaden, ein Rezept, ein gutes E-Book. Und oft steht dieses Angebot in einem entsprechenden Blogpost. Die Suchmaschine wirds schon richten, dass meine Besucher und Interessenten das auch finden.

Noch besser ist aber, wenn sie das auf einer speziellen Landingpage finden. Das ist eine sehr geradlinige, einzelne Seite ohne jede Ablenkung. Sie führt Deine Besucher direkt zu einer Anmeldung, zu einem Kauf, zu einem Download. All das, worauf Blogger so stolz sind, das Drumherum, die Themenvielfalt, vielleicht auch die Werbung und ganz sicher die Navigation sind einfach weg. Ziel ist, dass der Besucher direkt zur entscheidenden Stelle kommt, wo er mit einem Klick den Newsletter abonniert, das neueste Produkt kauft, an einer Abstimmung teilnimmt oder was immer auch Dein Anliegen ist.

Einige WordPress-Thems haben von Hause eine „blank page” ohne andere Elemente, die man dafür nutzen kann. Ist das nicht der Fall, kann man ein Plugin für Landingpages nutzen. Oder man verweist auf eine externe Einzelseite. Die kann auch außerhalb des Blogs liegen. Es gibt zum Beispiel einzelne „frei stehende” Seiten, für die man sich Vorlagen aus dem Netz herunterladen kann. Das ist nicht so komfortabel wie die Verwaltung in WordPress, muss aber nicht schlechter sein. Dort solltest Du auch den Code für Deine Statistik einbinden.

 

War das hilfreich?
Ich freue mich übers Teilen und Liken!

Warum Smartphone-Fotos für Blog und Website genügen

Smartphone-Fotos: Besser als man denkt

Smartphone-Fotos: Besser als man denkt

Smartphone-Fotos werden von den meisten Menschen noch immer nicht richtig für voll genommen. Dabei liefern die Immer-Dabei-Kameras hervorragende Qualitäten. Wenn man ein paar Punkte beachtet, bekommt man sprichwörtlich druckreife Ergebnisse.

„Ich habe nur ein Smartphone als Kamera.” Das höre ich öfters, wenn es darum geht, dass jemand mal eben auf die Schnelle ein paar Bilder machen sollte. Ganz abgesehen davon, dass niemand, der ernsthaft fotografiert gerne mal eben auf die Schnelle ein paar Fotos macht: Das Smartphone genügt für die meisten Zwecke durchaus. ich fotografiere mit einem iPhone und bin selbst immer wieder überrascht von den Ergebnissen, die selbst auf meinem großen Bildschirm ausnehmend gut aussehen. Und mit etwas Nachbearbeitung von den Ergebnisse anderer Kameras kaum zu unterscheiden sind.

Einschränkungen gibt es natürlich, und die seien auch gleich vorneweg genannt. Wer ein episches Landschaftsfoto schießen will, auf dem letzte Details auch in der Ferne gut zu erkennen sind, der stößt rasch an die Grenzen des kleinen Sensors. Aber das ändert sich acuh noch nicht bei Kompaktkameras und Micro-Four-Thirds-Kameras. Erst ab APS-C kommen hier nach meiner Einschätzung sehr gute Ergebnisse zustande.

Zweite Einschränkung ist die Lichtempfindlichkeit: Bei schlechtem Licht werden die Smartphone Bilder eher körnig und verlieren an Details und Zeichnung.

Wenn man sich jetzt ansieht, womit die meisten Blogs und Unternehmens-Webseiten „gefüttert” werden, dann kann man diese Einschränkungen getrost hinnehmen.

Das Gitter ist hilfreich, ebenso das indiviiduelle Wählen der Messpunkte und der AE/AF-Lock (Screenshot)

Das Gitter ist hilfreich, ebenso das indiviiduelle Wählen der Messpunkte und der AE/AF-Lock (Screenshot)

Drei wesentliche Tipps für gute Smartphone-Fotos

Ran an ans Motiv!

Niemand will von Bildern mit vielen ablenkenden Details in der Umgebung später Ausschnitte herauspfrimeln. Auch wenn es schwer fällt: Greife ins Geschehen ein, arrangiere Objekte und auch Personen so lange, bis auf dem (vergleichsweise riesigen) Display alles so ist, wie Du es haben möchtest. Im Nahbereich sind die kleinen Kameras ausgesprochen gut und scharf.

Gutes Licht suchen

Suche gutes Licht. Das gibt es auch in dunkleren Räumen, an Fenstern zum Beispiel oder an Lampen. Im Gegensatz zu Kompaktkameras erkennt man bei den meisten Smartphone-Kameras die verwendeten Belichtungszeiten, die Blende und die ISO-Zahl nicht. Und unser Auge erkennt auch keinen so riesigen Unterschied zwischen der Mitte eines Raumes und einem Platz am Fenster. Der Sensor schon.

Am iPhone tippt man auf den bildwichtigen Teil, der richtig belichtet sein soll. Dann erscheint neben dem Fokus-Kästchen ein Schiebe-Regler, mit dem man die Belichtung verändern kann. Das Ergebnis sieht man gleich auf dem Display.

Faustregel: Im Zweifelsfall bei großen Kontrasten darauf achten, dass die Lichter nicht „ausfressen”, also keine Zeichnung mehr aufweisen. Damit wird der dunklere Teil zwar noch dunkler, aber den kann man ggf. später noch aufhellen. Was im Bild einmal weiß ist wird auch später keine Details mehr enthüllen.

Die Kamera stabilisieren

Das klingt jetzt leichter gesagt als getan. Es wird doch niemand ein Smartphone auf ein Stativ setzen wollen? Doch, genau das. Ich verstehen die Hemmungen, damit womöglich vor Publikum zu hantieren. es sieht einfach ein bißchen lächerlich aus, ein Stativ auszupacken und dann das Handy daruf zu montieren. Aber wenn man weiß, dass die Situation eintritt und man bei schlechtem Licht fotografieren muss, sollte man das probieren. Es muss ja nicht gerade das große Dreibein-Stativ sein. Youtube-Vlogger haben die kleinen Gorillapod-Stative populär gemacht, so dass man damit statt Kopfschütteln durchaus anerkennden Blicke erntet.

Bilder gestalten

Am iPhone kann man den Punkt für Fokus und Belichtung „feststellen”: Diese Funktion erreicht man durch längeres Drücken auf einem Punkt im Display und sie heißt AE/AF-Lock. Die Schärfe wird nicht mehr an einem anderen Bildteil festgemacht, wenn wir den Ausschnitt ändern oder wenn jemand durchs Bild läuft. Mit einer App kann man auch den Punkt für Fokus und Belichtung in zwei Zonen trennen, was aber nicht zwingend ist: Denn auch bei dem AE/AF-Lock kann man noch immer mit dem Schieberegler die Bleichtung verstellen. Und man kann in den Voreinstellungen im iPhone ein Raster einblenden, das einem hilft, das Bild zu gestalten.

Das unbearbeitete Bild.

Das unbearbeitete Bild.

Fazit

Mit dem iPhone (und vielen anderen Smartphones) kann man viel mehr machen als die meisten denken. Auch die meisten Fotografen unterschätzen Smartphone-Kameras noch immer. Das Gute an diesem Thema: Im Netz gibt es sprichwörtlich tonnenweise Infos dazu, wie man mit dem iPhone gute Bilder macht. Fast alle sind kostenlos. Ein guter Einstieg ist der Youtube-Kanal iPhone photography course (in englisch).

War das hilfreich?
Ich freue mich übers Teilen und Liken!

Shop-Umzug: manchmal muss es sein

Shop-Umzug: für die Daten-Migration zu einer neuen Shop-Software gibt es Helfer. Foto: Kai Oberhäuser @ unsplash.com

Shop-Umzug: für die Daten-Migration zu einer neuen Shop-Software gibt es Helfer. Foto: Kai Oberhäuser @ unsplash.com

Wer einen Shop im Internet betreibt, der betrachtet den wahrscheinlich noch kritischer als eine eigene Website ohne Verkauf. Ist das Design noch aktuell, ist die Darstellung der Produkte noch ansprechend? Und stimmt die Technik? Oder gibt es da nicht schon längst bessere Alternativen?

Gründe für einen Shop-Umzug gibt es viele. So sind die Angebote an responsiven Designs für Shops je nach System höchst unterschiedlich entwickelt. Auch das Argument, mit WooCommerce einen Shop unter dem Dach des Redaktionssystems WordPress mit all dessen Vorteilen (Vielfalt der responsiven Designs zum Beispiel ) nutzen zu können, ist verlockend. Auch die Administration erscheint bei einem System vielleicht deutlich angenehmer als bei einem anderen.

Ein Shop-Umzug mit dem Wechsel auf eine andere Software erscheint zunächst einmal als mittlere Katastrophe: Da müssen Datenbanken angepasst werden, manchmal muss auch der Shop komplett neu aufgesetzt werden. Sind dann alle Kunden weg?

Ich kann hier nicht für alle Shops sprechen. Aber die beruhigende Nachricht ist, man kann prinzipiell mit seinem Shop umziehen. Auf einen anderen Server, zu einer anderen Software, zu einem neuen Layout. Wer von OS-Commerce über den XT Shop zu Modified Shop gewandert ist, der braucht vielleicht einige besondere Anpassungen. Denn die deutschsprachige Shop-Software hat zwar hierzulande viele Vorteile, ist aber von internationale Dienstleistern offensichtlich noch nicht so gut angenommen worden.

Hier ein paar eigene Erfahrungen und Tipps für den Shop-Umzug. Aber vorneweg: Man sollte sich darauf einstellen, dass man alle Eigenheiten des neuen Shopsystem (und deren Schwächen) wahrscheinlich erst dann entdeckt, wenn man umgezogen ist. Dann heißt es Augen zu und durch.

Cart2cart: Schon der Name weist auf einen Helfer für den Shop-Umzug.

Cart2cart: Schon der Name weist auf einen Helfer für den Shop-Umzug.

Helfer für den Shop-Umzug

Wem wie mir die technischen Details eines Shop-Systems eher ein Gräuel sind, der sucht sich Helfer. Beim Thema Shop-Umzug hat man die schnell gefunden. Meine Fundstücke waren diese Dienste:

cart2cart

litextension.com

Beide bieten einen Umzug der Daten von so ziemlich jedem Shopsystem zu so ziemlich jedem anderen Shopsystem an. Die Unterschiede liegen eher in der Handhabung.

Litextension bietet ebenfalls Unterstützung bei einem Wechsel der Shop-Software an.

Litextension bietet ebenfalls Unterstützung bei einem Wechsel der Shop-Software an.

Die Gemeinsamkeiten:

  • Beide bieten eine Kostenschätzung für den Umzug an, die von der Menge der Daten abhängt (nicht vom Shopsystem).
  • Bei beiden ist man mit unter 100 € schon dabei. Aber einige Dinge, wie die Password-Migration kosten extra. Und die halte ich für ziemlich wichtig, damit die bestehenden Kunden ohne Verzögerung gleich weiter einkaufen können.
  • Beide geben eine Art Zufriedenheitsgarantie bzw. eine Geld-zurück-Garantie.
  • Und beide bieten Hilfe während und nach dem Umzug an. Nach meinen Erfahrungen ist der Support gut, ohne dass zwingend Kosten anfallen.

Die Unterschiede:

cart2cart wickelt den Umzug einmal selbstätig ab. Man kann hier im Voraus die genauen Kosten ermitteln und sogar einen kostenlosen Demo-Durchlauf machen. Nötigenfalls kann man dann die Daten seines alten Shops noch in Ordnung bringen bzw. anpassen. Das verkürzt die Zeit des „Nacharbeitens”, die bei mir mit beiden Versionen angefallen ist.

Wer freilich Vorsorgen möchte und einen zweiten Versuch für die Migration haben möchte, der muss eine Versicherung abschließen und kann dann in einem begrenzten Zeitraum evt. ein weiteres Mal umziehen.

Litextension dagegen versorgt den Kunden mit einem Plugin, der damit dann so oft umziehen kann, wie er möchte. Ggf. muss man dafür seine Datenbank nochmal löschen, aber man hat auf diese Art mehrere Versuche. Interessant ist das für all diejenigen, die den neuen Shop parallel entwickeln und einrichten. Sie können dann, bevor der neue Shop online geht, eine weitere Migration durchführen. Auch wenn das erst Wochen später erfolgt.

Es gibt übrigens auch noch einige andere Dienste. Die meisten dieser Angebote funktionieren wohl so, dass sie nicht frei für alle Wechsel verfügbar sind. Sie dienen vielmehr dem Wechsel zur Shop-Software des einen Anbieters der neuen Shop-Software. Also meistens auch für kostenpflichtige Shops, während Modified Shop, WooCommerce und einige andere ja keinen Kauf notwendig machen.

Mein Fazit:

Die beiden Dienste funktionierten bei mir in mehreren Shops zuverlässig. Nacharbeiten musste ich bei beiden. Einmal sind Daten auf eine andere Art übernommen, einmal hat das neue Shopsystem eine andere Datenstruktur. Und in allen Fällen müssen – weil man ja wahrscheinlich gleich ein neues Layout mit responsivem Inhalt und größeren Bildern nutzen wird – die Bilder überarbeitet werden. Was aber im Zweifelsfall mit einem Plugin auch automatisch gehen kann, wenn vorher schon die Basis-Bilder groß genug waren.

In meinen Fällen waren die Artikelbestände der Shops recht überschaubar, so dass auch dieses Nacharbeiten relativ zügig vonstatten ging. Wer einen großen Shop umzieht, der muss Testläufe nutzen oder im Nachhinein mehrere Versuche anhängen bis es klappt.

Die Kosten von rund 100 bis 200 € haben sich in jedem Fall gelohnt. Und sind im Vergleich zu den anderen Anpassungen (Layout, Shopstruktur) vergleichsweise gering.

War das hilfreich?
Ich freue mich übers Teilen und Liken!

WordPress Bildgrößen in vielen Variationen

Im neuen Layout braucht man meistens auch andere WordPress Bildgrößen.

Im neuen Layout braucht man meistens auch andere WordPress Bildgrößen.

Sie sind ein unerschöpflicher Quell der Freude: Gute Bilder in einem WordPress-Blog machen das Lesen leichter. Sie ziehen Besucher an und bieten manchmal mehr Informationen auf einen Blick, als ein langer Text. Sie sind aber auch manchmal lästig: Google meckert rum, weil die Bilder zu große Datenmengen aufweisen und die Schnelligkeit der Webseite beeinträchtigen. Die Bilder sind nie in der passenden Größe und Auflösung dort, wo sie sein sollen. Und die Bildbearbeitung frisst inklusive der Bilder für Soziale Medien fast so viel Zeit, wie das Schreiben des Artikels – vom Fotografieren mal gar nicht zu reden.

Was tun? Weniger Bilder sind ja auch keine Lösung. Und die falschen WordPress Bildgrößen erst recht nicht. Mit etwas Planung und ein paar Helferlein kann das auch reibungsloser verlaufen.

WordPress: interne Bildverarbeitung

Zunächst einmal können wir uns alle freuen. Denn die Bildverwaltung in WordPress ist viel komfortabler geworden. Und auch Bildverarbeitung ist jetzt möglich. Wem das noch nicht genügt, der kann auf Plugins zurückgreifen.

Weitere WordPress Bildgrößen per Plugin

Das Plugin Simple Image Size erlaubt zusätzliche Bildgrößen festzulegen, auf die die Bilder automatisch beim Hochladen zurechtgeschnitten werden. Wer also bestimmte Größen braucht, die noch nicht in der functions.php seines Themes festgelegt sind, der kann sich damit prima behelfen.

Heißt das, ich kann jetzt einfach meine Riesen-Bilder aus der Super-Duper-DSLR hochladen? Kann man machen, sollte man aber nicht. Die effektivste Art Bilddaten sinnvoll zu reduzieren funktioniert mit Photoshop und dem Befehl „Für Web und Geräte speichern”. Dort genügt in der Regel die Qualitätsstufe hoch. Wenn es keine besonders hochwertigen Aufnahmen sondern eher Info-Bilder sind, kann man an an der Qualität auch Abstriche machen.

Hier wählt man die größte Größe aus, die man für WordPress, Instagram, Facebook & Co. verwenden möchte. Die kann man jetzt auch auf WordPress hochladen, dort werden automatisch die verschiedenen Bildgrößen erzeugt.  Diese Größe kann man dann aber auch für die Sozialen Medien verwenden.

… oder manuell in der functions.php festlegen

Wers noch detaillerter möchte und selbst im Maschinenraum seiner WordPress-Installation herumwerkeln möchte, der sucht nach einer Anleitung,wie man die entsprechenden Befehle in die functions.php einbaut (zum Beispiel hier)

Ein Genesis-Theme: Die größe WordPress Bildgröße bleibt gleich.

Ein Genesis-Theme: Die größe WordPress Bildgröße bleibt gleich.

Intelligent Bilder „nachladen”

Eine andere Möglichkeit, das Ladeverhalten seiner Seiten positiv zu beeinflussen bietet das Plugin Lazy Loads. Es bewirkt, dass nur diejenigen Bilder geladen werden, die gerade sichtbar sein sollen. Wer also auf seiner Startseite die letzten 10 Blog-Posts anzeigt und jeder hat etliche „schwere” Bilder, der ist mit dem Einsatz dieses Plugins sowieso gut bedient.

Auf die Möglichkeit der WordPress-Bildbearbeitung fürs Verkleinern sollte man übrigens nur in Notfälle zurückgreifen: Hierbei wird nämlich nur die Darstellung verkleinert. Das Bild selbst bleibt so groß (und schwer) wie vorher. Sprich: Nicht die Datenmenge wird reduziert, sondern nur die Darstellung.

Die Datenmenge ist ganz in Ordnung, wenn die Bilder etwa 200 KB groß sind. Da das – je nach Theme und Layout – nicht immer eine befriedigende Lösung ist, bleibt oftmals nur die Möglichkeit, entweder in Photoshop nochmal selbst Hand anzulegen. Oder auf Apps und Dienste wie JPGMini oder compressor.io zurückzugreifen.

Retina – immer zwei Varianten?

Und was ist nun mit den hoch gelobten Retina Displays bei Apple? Muss ich für eine ordentliche Darstellung nicht sowieso die größten und besten Bildqualitäten einstellen? Ja und nein. Ideal wäre es natürlich, wenn je nach Display und Anforderung die richtige Bilddatei eingebunden wird. Das kann das Plugin WP Retina 2x.

Prima! Dann kann ich ja meinem responsiven Theme die Wahl der richtigen WordPress Bildgröße überlassen. Die Plugin-Autoren weisen jedoch daraufhin, dass eine responsive Darstellung bevorzugt werden sollte, die Auswahl des Bildes über ein javascript die Fallback-Methode sein sollte.

Wordpress Bildgröße 620 px in der Desktop-Variante - aber 850 Pixel in Tablet-Modus.

WordPress Bildgröße 620 px in derDesktop-Variante – aber 850 Pixel in Tablet-Modus.

170130_jo_620

Responsiv – wie groß ist das genau?

Gibts sonst noch Hürden? Nur wenige. Beachten könnte man vielleicht noch, dass das Umspringen eines responsiven Layouts Bildgrößer erfordert, die man eventuell gar nicht auf dem Plan hatte. In diesem aktuellen Layout meiner Website zum Beispiel ist die größte Bilddarstellung 620 Pixel breit.

Wer jetzt mit dem Mauszeiger auf die rechte untere Ecke geht und beginnt, das Browser-Fenster zusammen zu schieben, der stellt fest, dass das Layout umspringt. Bei der Tablet-Größe verschwindet erst die rechte und später (fürs Smartphone) schließlich auch die linke Sidebar.

Die Folge: Die Bilder werden dann 850 Pixel groß dargestellt. Sind die Bilder mit nur 620 Pixel Kantenlänge hochgeladen, bleiben sie an manchen Stellen kleiner, als der dafür vorgesehene Platz im Layout. Aber damit kann man leben, wenn man nicht gerade als Fotograf die eigenen Werke anpreist.

Neues Layout – neue Bilder?

Aber nichts hält ewig. Irgendwann entscheidet sich jeder WordPress-Benutzer mal für ein andere Layout, gerne mit größerer Bilddarstellung. Nur die Beiträge der vergangenen Jahre wirken jetzt etwas verloren – denn sie sind viel zu klein für das neue Layout. Schließlich ist das Internet schneller geworden, der Rechner leistungsfähiger.

Also jetzt alle Bilder nochmal raussuchen, neu bearbeiten, nochmal hochladen? Auch dafür gibts ein Plugin: Regenerate Thumbnails legt die nächst kleineren Bildgrößen neu an. Egal ob man jetzt einfach in den WordPress-Voreinstellungen die Maße geändert hat oder – was öfters vorkommt – ein neues Theme installiert hat.

Aber auch hier gilt wie immer in der Bildbearbeitung: Größer machen geht nicht. Wenn ich also stets nur Bilder mit 620 Pixel Breite hochgeladten habe, kann ich daraus für mein neues Thema keine Header-NBilder mehr mit 1180 Pixel Breite machen.

Mein Fazit:

  1. Die eigene Bildbearbeitung für eine „leichte” Version des größten benötigten Bildformates ist immer hilfreich. Ob ich das mit Photoshop, einer anderen App oder online mache ist egal. Das Original des Fotos sollte ich sowieso immer unverändert behalten.
  2. Die größte Online-Variante sollte das Bildmaß enthalten, dass ich für Webseite oder Soziale Medien brauche. Ausnahme ist Pinterest: Hier funktionieren Hochformate am besten, das verlangt zusammen mit der Nutzung als „Textbilder” immer eine eigene Verarbeitung.
  3. Für responsive Layouts darauf achten, wann ein Bild die größte Darstellung aufweist. Das  ist nicht immer in der Desktop-Version der Fall.
Wordpress Bildgrößen in einem modernen Layout: Große Header. Die sind aber noch am einfachsten auszuwechseln.

WordPress Bildgrößen in einem modernen Layout: Große Header. Die sind aber noch am einfachsten auszuwechseln.

War das hilfreich?
Ich freue mich übers Teilen und Liken!

WordPress-Theme aus dem Baukasten

Divi mit Theme-Builder: Hier geht auch eine Echtzeit-Bearbeitungen des WordPress-Theme und Darstellung der Inhalte.

Divi mit Theme-Builder: Hier geht auch eine Echtzeit-Bearbeitungen des WordPress-Themes und Darstellung der Inhalte.

WordPress-Themes sind wirklich ein Sinnbild für den Spruch „Qual der Wahl”. Die Auswahl ist mittlerweile so überwältigend groß (und gut), dass die meisten Suchenden nach einigen hundert Beispielen völlig frustriert sind. Mir geht es da nicht anders. Wenn ich anderen Leuten Vorschläge zu ihrer Website mache, fühlen sich viele überfordert.

Wie man die Auswahl für ein WordPress-Theme etwas einengen kann  habe ich hier schon einmal beschrieben. Ich merke aber immer öfter, dass Kunden auch damit überfordert sind. Und das trifft dann wohl auch für viele Blogger und Geschäftsleute zu, die das richtige Layout für Ihre Seite suchen.

Ausschlaggebend für den Frust der Suchenden ist dabei oft die Vorstellung, ein Layout werde speziell für sie designed. Nach dem Motto: Das gibt es nur einmal, das ist unverwechselbar. Dieser Anspruch ist erstens unrealistisch und zweitens nicht hilfreich. Ähnlich frustriert müssen Autokäufer sein, die ihr ganz individuelles Gefährt suchen – das dennoch wie viele anderen vom Band kommt.

Denn fast alles, was man mit Layout machen kann, hat heute schon mal einer gemacht. Die traurige Wahrheit: individuell und einzigartig wird die Website erst durch die Inhalte. Das ist die Handschrift, die den Stil ausmacht. Alles anderen haben wir „irgendwo schon einmal gesehen”. Letztlich ergibt sich die Individualität durch eher kleine Gestaltungsunterschiede – und ganz wesentlich durch die Inhalte.

Warum also nicht gleich eine Art Baukastensystem für die Erstellung eines eigenen WordPress-Theme  nutzen? Inzwischen gibt es einige etablierte und bewährte Modelle, mit denen man sich seine Seite maßschneidern kann. Wer dann noch unbedingt andere Schriften braucht oder andere Farben für Buttons und Links, der kann entweder auch hier auswählen. Oder er muss in die Trickkiste greifen und selbst ein paar individuelle CSS-Anweisungen einfügen. Die Maske für diese Eingabe ist oft schon vorgesehen. Sie sorgt auch dafür, dass bei einem Update des Themes diese Änderungen erhalten bleiben.

Zwei Modelle möchte ich hier vorstellen, stellvertretend für einige andere.

Das Enfold-Theme hat eine vereinfachte Darstellung für alle Möglichkeiten. Das funktioniert auch mit älteren Browsern und Computern ganz gut.

Das Enfold-Theme hat eine vereinfachte Darstellung für alle Möglichkeiten. Das funktioniert auch mit älteren Browsern und Computern ganz gut.

WordPress-Theme mit einem Themebuilder

Als Beispiel führe ich hier einmal die Themes Flatsome und Enfold auf (beide habe ich im Einsatz). Beide gibt es auf der Plattform Themeforest.net (ich bin kein Affiliate). Dort findet man auch viele andere Themes, die ähnlich funktionieren. Daneben gibt es noch einige Beispiele, die ich beobachtet habe, aber nicht selbst ausprobiert wie SimpleMag. Dort heißt das Tool zum Gestalten der Seiten Page Composer.

Die Kosten dieser Themes beginnen bei rund 60 €. Das Prinzip ist einfach: Es gibt neben den Vorgaben von WordPress (Seiten mit und ohne Sidebar zum Beispiel) eine Reihe von Gestaltungselementen und Blöcken. Diese kann man auf jede einzelne Seite oder auch auf alle zusammen übertragen kann.

So finden sich bei vielen Startseiten oben Slider oder ein unbewegtes Headerbild mit Links zu den Inhalten. In der Mitte folgen meist verschieden gestaltete Blöcke mit einer oder mehreren Spalten. Und auch die Art Inhalte ist meist einfügbar: Videos, Portfolios, Bildergalerien, Testimonials.

Fuß und Sidebar können in WordPress von Hause aus durch Widgets gestaltet werden. Etliche Themes bieten hier weitere Widgets an oder sogar die Möglichkeit, eigene Widgetbereich zu definieren.

Prima, werden jetzt viele sagen. Damit kann man dann endlich per Mausklick Elemente hin- und herschieben, alles ganz einfach. Aber in der Praxis ist nicht alles so selbsterklärend, wie es scheint. Der Teufel steckt im Detail. Bei den meisten Modellen gibt es eine mehr oder minder steile Lernkurve. Und abends mal schnell eine Website gestalten geht gar nicht.

Ist dann noch ein Shop integriert, gilt es sich mit den Einstellungen von Woocommerce und anderen Pluguins ausgiebig zu beschäftigen und das Ergebnis zu testen. Also am besten doch viel Zeit mitbringen.

Flatsome im Design-Modus: gibt einen optischen Eindruck

Flatsome im Design-Modus: gibt einen optischen Eindruck

Mehrere WordPress-Themes, ein System

Dieses Modell kenne ich nur von Elegant Themes (hier bin ich Mitglied und Affiliate) und es ist im Prinzip das gleiche, wie oben beschrieben. Nur zahlt man hier nicht für ein Theme, das man genau einmal auf einer Website verwenden kann. Sondern man bekommt mit einer einjährigen Mitgliedschaft Zugriff auf zumindest zwei Themes, die dieses Modell nutzen. Und eine Vielzahl weiterer Themes, die man auf herkömmliche Weise anpassen muss.

Was ist dann genau der Unterschied? Das Modell „1 Theme für eine Website” verursacht einmal Kosten. Danach hat man in der Regel begrenzte Zeit Zugriff auf Updates und den Support.  Das Modell Mitgliedschaft ist von vorneherein auf eine längere Zusammenarbeit ausgelegt. Auch hier kann man das Ganze nach einem Jahr beenden und trotzdem mit den heruntergeladenen Themes weiter arbeiten.

Die Praxis zeigt, dass man in beiden Fällen längerfristig eine Beziehung eingeht – wenn man nicht gerade Instant-Websites baut, für die man nicht länger als ein Jahr zuständig ist. Beim Kauf eines einzelnen Themes heißt das, irgendwann für den Support bezahlen, denn Updates sind unumgänglich. Beim Modell Mitgliedschaft kann man diese ebenfalls nach einem Jahr beenden. Wer weiterhin auf dem Laufenden bleiben will und ab und an Support braucht, ist in der gleichen Situation wie beim Einzelkauf.

Das Gleiche beim Wechsel auf ein neues Theme. Das bedeutet entweder neuer Einzelkauf im einen Modell. Oder Fortsetzung der Mitgliedschaft beim anderen Modell mit einem neuen Theme.

 

War das hilfreich?
Ich freue mich übers Teilen und Liken!