Daten von Google Reader zu Feedly übertragen

Das beste beim “Umzug” zu Feedly ist, dass man die Google Reader Daten nicht manuell exportieren und dann zu Feedly importieren muss. Sondern die Daten werden automatisch übernommen, vorausgesetzt man loggt sich vor dem 1. Juli mit seinem Google-Konto bei Feedly ein. Weitere Infos zu diesem nahtlosen Übergang von Google Reader zu Feedly findest du auf dem Feedly-Blog.

Die Einrichtung von Feedly

Durch das moderne Design von Feedly wird das Lesen der Feeds und das Finden neuer Artikel sehr viel ansprechender, als beim doch leicht veralteten Google Reader. Sowohl in der Desktop-Version von Feedly, als auch auf mobilen Geräten macht es Spaß, die RSS-Feeds zu lesen und nach neuen, interessanten Artikeln zu suchen.

Man kann die Ansicht der Feeds in verschiedenen Layout-Styles anzeigen, entweder nur die Titel der Artikel, oder alle Artikel mit Vorschaubildern, in einer offenen Magazin-Ansicht oder große Artikel untereinander.

Verschiedene Layout-Optionen auswählen.

Unter “Prefs” findest du außerdem die Option allgemeine Einstellungen anzupassen, um z.B. deine Startseite zu konfigurieren, das Standard-Layout zu bestimmen oder Schrift- und Spracheinstellungen festzulegen.

Grund-Einstellungen von Feedly festlegen.

Weitere Tipps zum Umzug von Google Reader zu Feedly und den möglichen Anpassungen kannst du übrigens auch auf dem Feedly-Blog nachlesen.

Weitere Vorteile von Feedly

Neben dem angenehm übersichtlichen Design gefällt mir auch die Feedly Mobile-App sehr gut. Ich habe mir Feedly bisher auf dem iPhone eingerichtet. Das führt hoffentlich auch dazu, dass ich etwas regelmäßiger in den Feeds lese und so nicht immer jede Menge spannende und informative Artikel verpasse oder sich die ungelesenen Artikel im Reader anstauen, wie es mir leider beim Google Reader viel zu oft passiert ist.

Artikel-Liste ohne Thumbnails in der Feedly App.

Die RSS-Feeds übersichtlich in Ordnern organisieren.

Wie ist mein Reader organisiert?

Wir du in den Screenshots schon siehst, habe ich meine Feeds grob in Themen wie Webdesign, WordPress, Coding, Inspiration etc. eingeteilt. Die schöne Übersicht der Themen bei Feedly, vor allem in der App-Version des Dienstes gefällt mir besonders gut. So macht das Sortieren und Organisieren in Themenbereiche natürlich gleich viel mehr Spaß.

Meine derzeitigen Lieblings-Blogs, die ich auf jeden Fall im Feed-Reader gespeichert habe sind:

• A List Apart ( Webdesign, Webentwicklung)
• Smashing Magazine ( Webdesign, Webentwicklung)
• .net Magazine ( Webdesign, Webentwicklung)
• Swiss Miss (Kreativ, Inspiration)
• CSS-Tricks (CSS, Webentwicklung)
• zenhabits (Inspiration, Blogging)
• Seth Godin (Inspiration, Blogging)
• Themeshaper (WordPress, Theme-Entwicklung)

Dein Feedback

Was sind deine Tipps zu Google Reader-Alternativen und welche RSS-Feeds aus den Bereichen Webdesign, Webentwicklung, WordPress oder Inspiration sollte man deiner Meinung unbedingt im Reader gespeichert haben? Über deine Tipps freue ich mich sehr!

Von unseren Theme-Nutzern hören wir immer wieder, dass sie sich sehr gerne auch die Seiten anderer Webseiten-Besitzer mit dem gleichen Theme ansehen. So kann man sich Inspirationen holen und schauen, wie andere das gleiche Theme im Einsatz haben. Und natürlich macht es auch uns selbt immer wieder riesigen Spaß, unsere Themes im Einsatz zu sehen und wir sind immer wieder überrascht, wie kreativ und vielseitig die Themes genutzt werden.

Damit die Webseiten mit Elmastudio-Themes noch besser gefeatured werden können, haben wir eine eigene Elmastudio Theme Showcase-Seite eingerichtet auf der wir zukünftig eine Auswahl an Webseiten mit Elmastudio-Themes zeigen möchten.

Zur Umsetzung haben wir unser neuestes Foto-Theme Renkon genutzt, da sich das Theme besonders gut eignet, um Bilder (in diesem Fall die Webseiten-Screenshots) in einer praktischen Übersicht zu präsentieren. Wir hoffen euch gefällt das neue Elmastudio Theme Showcase und wir würden uns natürlich sehr freuen, wenn möglichst viele Elmastudio Theme-Nutzer ihre Webseiten im Showcase anmelden.

Anmelden kannst du deine Webseite entweder direkt auf der Showcase-Seite oder direkt auf der jeweiligen Theme-Seite hier auf Elmastudio.

1. Die Medien-Einstellungen für Bilder ändern

Das Plugin ist sehr einfach zu handhaben und du kannst in nur wenigen Schritten neue Beitragsbilder für deine Artikel erstellen. Als erstes musst du die allgemeinen Medieneinstellungen unter Einstellungen / Medien für deine Bilder an die Anforderungen deines neuen Themes anpassen.

Die Medien-Einstellungen für Thumbnails anpassen.

Hier gibst du bei “Größe der Miniturbilder” an, welche Maße du für deine Thumbnails du benötigst. Du kannst außerdem bestimmen, ob alle Thumbnails automatisch auf das festgelegte Format zugeschnitten werden sollen, oder ob du die Höhe lieber flexibel lässt, indem du die Option für die Beschneidung der Bilder wählst.

2. Das Regenerate Thumbnail-Plugin im Einsatz

Hast du deine neuen Medien-Einstellungen gespeichert, kannst du dir das Regenerate Thumbnails-Plugin über Plugins / Installieren hochladen und aktivieren.

Nach der Aktivierung findest du die Plugin-Einstellungen unter Werkzeuge / Reg. Thumbnails. Alles was du jetzt noch tun musst, ist den “Regenerate All Thumbnails” Button zu klicken.

Je nachdem wie viele Artikel du bereits veröffentlicht hast, kann das Laden der neuen Bilder eine Weile dauern. Der Ladebalken zeigt an, wenn alle Thumbnails neu geladen sind. Das war’s auch schon, deine Beitragsbilder sind jetzt in der neuen Größe verfügbar.

Alternativ zum Erstellen neuer Thumbnails von all deinen Artikeln, kannst du unter Medien / Medienübersicht auch noch neue Beitragsbilder für einzelne Bilder erstellen. Die Option “Regenerate Thumbnail” erscheint, sobald du mit der Maus über ein Bild in der Medienübersicht fährst.

Thumbnails einzelner Artikel neu erstellen.

Auch wenn das Plugin wirklich sehr simpel funktioniert, ist es inzwischen eines meiner Lieblings-Plugins und ich empfehle das Plugin immer sehr gerne weiter.

Deine WordPress-Plugin Tipps?

Welches ist dein Lieblings WordPress-Plugin? Und welches Plugin kennen und nutzen deiner Ansicht nach noch viel zu wenige WordPress-Nutzer? Über dein Feedback und deine weiteren Plugin-Tipps freue ich mich sehr!

Renkon optional mit oder ohne Headerbild

Die Off-Canvas Sidebar und Navigation von Renkon.

Fotobloggen leicht gemacht

Mit Renkon ist das Veröffentlichen von Bildern, Artikeln und Bildergalerien ganz einfach und du kannst dir schnell einen wunderschönen Foto-Blog einrichten. Das Theme unterstützt die WordPress-Artikelformate “Standard, Bild und Galerie”. Bild- und Galerie-Artikel werden dabei automatisch mit Vorschaubildern (Thumbnails) veröffentlicht, für Standard-Artikel kannst du die WordPress Thumbnail-Funktion nutzen, um auch längere Artikel (z.B. Fotoreise-Berichte) mit Vorschaubildern zu präsentieren.

Große Headerbild-Option

Als Intro zu deinem Foto-Blog hast du im Renkon-Theme die Möglichkeit ein großes Headerbild (Maße 1440px x 900px) auf der Blog-Seite zu zeigen. Um deine Webseiten-Besucher zu begrüßen, kannst du außerdem einen eigenen Intro-Slogantext über die Renkon-Theme Optionenseite einfügen.

Deine Fotos groß featuren

In den Einzel-Ansichten deiner Artikel kannst du deine Bilder dann schön groß und mit angenehm Weißraum präsentieren. Das moderne Off-Canvas Layout von Renkon bietet dafür den nötigen Platz.

Für mobile Geräte optimiert

Natürlich ist auch das Renkon-Theme wieder mit einem responsive Webdesign ausgestattet und passt sich automatisch an verschiedene Bildschirmformate an. So ist dein Blog sowohl für die Ansicht auf kleinen Smartphone-Bildschirmen, als auch auf großen Desktop-Monitoren optimal vorbereitet.

Renkon Live-Demo & Theme-Seite

Um dir das Renkon-Theme selbst in Ruhe anzuschauen, schau dir doch einfach die Renkon Live-Demo an. Weitere Theme-Features, Anleitungen und die Kauf-Option findest du außerdem auf der Renkon-Themeseite. Wir hoffen dir gefällt das Renkon-Theme. Über dein Feedback, Optimierungs-Vorschläge und Fragen zum Theme freuen wir uns schon sehr!

1. Ein Themenbereich wählen

Natürlich ist es nicht unbedingt nötig, sich auf ein Thema für den eigenen Bloggen festzulegen. Aus meiner Erfahrung ist aber gerade am Anfang sehr hilfreich, sich einen bestimmten Themenbereich auszuwählen. So weiß man etwas konkreter, worüber man schreiben kann und es ist einfacher neue Artikel-Ideen zu finden und mit Leidenschaft am Blog-Thema und am eigenen Blog dran zu bleiben.

2. Die eigenen Erwartungen definieren

Um Enttäuschungen vor falschen Erwartungen vorzubeugen ist es sinnvoll, sich genau Gedanken darüber zu machen, warum man eigentlich bloggen möchte und mit welchen Erwartungen man sich an die Arbeit eines eigenen Blogs macht.

Möchte man eine bestimmte Message vermitteln und an andere weitergeben? Möchte man sich intensiver mit einem Thema beschäftigen und die eigenen Fähigkeiten verbessern? Möchte man gewisse Lebensereignisse festhalten und mit anderen teilen? Oder möchte man professionell bloggen, eventuell sein Hobby zum Beruf machen und so den eigenen Lebensunterhalt als Blogger verdienen?

Gründe, um einen Blog zu starten gibt es wirklich jede Menge. Wichtig ist also vor allem, das man sich selbst darüber klar wird, warum man eigentlich bloggen möchte. Man sollte sich auch Gedanken darüber machen, was man bereit ist zu investieren, um die eigenen Blog-Ziele zu erreichen.

3. Etappenziele setzen

Um die Motivation und den Spaß am Bloggen nicht schnell wieder zu verlieren, ist es wichtig sich immer wieder kleinere Ziele zu stecken. Zum Beispiel kann das eine bestimmte Anzahl von Artikeln im Monat oder im Jahr sein oder man startet eine kleine Artikelserie (z.B. ein Tutorial oder ein mehrteiliger Reisebericht) und bringt diese erfolgreich zu Ende.

Auf diese Weise ist immer was auf dem Blog zu tun, auch wenn am Anfang vielleicht noch nicht so viele Besucher auf den Blog kommen und man noch nicht das gewünschte Feedback zum eigenen Blog bekommt.

4. Beständigkeit zeigen

Ein Blog zu führen macht sehr viel Freude und kann einen sowohl beruflich, als auch privat enorm weiterbringen. Doch natürlich passiert das nicht von heute auf morgen und welche Ziele man für den eigenen Blog auch hat, man braucht meist sehr viel Muße, um diese Ziele zu erreichen. Beständigkeit bei der Arbeit am eigenen Blog ist daher meiner Meinung nach einer der wichtigsten Tipps für einen erfolgreichen Blog.

Dazu gehört dann auch, dass sich manchmal zum Schreiben hinsetzt, auch wenn man gerade nicht sonderlich inspiriert ist. Aus meiner Erfahrung kommt der Spaß am Bloggen aber schnell zurück, sobald man sich erst einmal an die Arbeit gemacht hat.

5. Notizbuch für spontane Artikel-Ideen

Die besten Ideen hat man meistens nicht, wenn man am Computer sitzt und arbeitet, sondern unterwegs, in der Freizeit oder wenn man sich zu Hause entspannt. Daher ist ein Notizbuch oder eine Notiz-App auf dem Smartphone oder Tablet eine toller Tipp, um die eigenen Ideen für den Blog sofort festhalten zu können. Außerdem hat man so an weniger kreativen Tagen eine Material-Sammlung, mit der man arbeiten kann.

6. Nicht zu Ergebnis-orientiert arbeiten

Ein Blog zu führen ist definitiv ein längerfristiges Projekt und die eigenen Ziele sind meist nicht so schnell zu erreichen, wie man es gerne hätte. Daher ist es denke ich ganz wichtig, dass man nicht zu sehr auf Erfolge oder eine gewisse Resonanz von außen (wie die Blog-Besucherzahlen, die Anzahl an Kommentaren oder Erwähnungen auf Twitter oder Facebook) hinarbeitet. Sonst verliert man wahrscheinlich sehr schnell den Spaß am Blog, wenn die Erfolge nicht gleich sichtbar werden und man anfangs nur wenig Feedback für seine Arbeit bekommt.

7. In der Community aktiv werden

Natürlich macht das Bloggen mehr Spaß, wenn die eigenen Artikel auch gelesen und diskutiert werden. Daher ist es vor allem beim Start eines neuen Blogs sinnvoll, wenn man in der Community zum eigenen Blog-Thema aktiv wird und z.B. auf anderen Blogs, auf Twitter, Facebook oder Google+ mitliest und kommentiert bzw. sein Wissen weitergibt. So kann man Kontakte knüpfen und es kann nach und nach eine richtige Web-Community entstehen.

8. Hilfsbereit und großzügig sein

Den meisten Erfolg hat man meiner Ansicht nach immer, wenn man anderen gegenüber großzügig und hilfsbereit ist und auch bereit, in erster Linie uneigennützig die eigenen Erfahrungen zu teilen und Wissen weiterzugeben. Aus meiner Erfahrung bekommt man gerade dann, wenn man nichts von anderen zurück erwartet am meisten geschenkt. Bei einem Blog kann das z.B. positives Feedback, das gute Gefühl anderen weiterhelfen zu können oder die Anerkennung für die eigene Arbeit sein.

9. Artikel mit Mehrwert

Wenn man gerne mehr Leser auf dem eigenen Blog hätte, ist wahrscheinlich einer der wertvollsten Tipp Artikel zu veröffentlichen, die einen gewissen Mehrwert für andere haben. Man kann z.B. Tipps zu einem Fach-Thema weitergeben, Tipps über die eigene Stadt oder einem Reiseland, das man besucht hat zusammenstellen, tolle Rezepte ausprobieren und veröffentlichen, Anleitungen und Tutorials zu einem Thema verfassen, Freebies erstellen und veröffentlichen und vieles mehr.

10. Nicht aufgeben

Einfach nur “nicht aufgeben” klingt natürlich etwas simpel. Aber wenn man sich möglichst über Jahre immer wieder selbst motivieren muss, um den Traum vom eigenen, erfolgreichen Blog nicht aufzugeben und sich stattdessen anderen, neuen Hobbys zu widmen, wirkt eine so einfache Regel manchmal Wunder. Ich selbst hätte zum Beispiel anfangs nie daran gedacht, dass aus der kleinen Elmastudio-Idee und einem Blog auf der Unterseite unseres Webdesign-Portfolios, einmal mein absoluter Traum-Job werden könnte, der es heute ist. So, go for it!

Wie ist deine Meinung?

Welche Tipps kannst du anderen Bloggern und Blog-Newbies geben, um längerfristig mit Freude einen Blog zu führen und welche Erfahrungen hast du schon beim Bloggen mitnehmen können? Über dein Feedback und deine weiteren Tipps freue mich sehr!

FitText für automatisch skalierbare Texte. (Credit: Vektor-Icons von Etienne Mansard)

Das Plugin ist nicht für Fließtexte gedacht, sondern um große Schrift-Slogans, Webseiten-Titel oder Texte in einem großen Header-Bild automatisch an das responsive Design anzupassen. Und so funktioniert die Einbindung des JavaScript-Plugins.

FitText verwenden

Das FitText JavaScript-Plugin von Paravel (der Firma des Webdesigners Trent Walton) kannst du dir kostenlos auf GitHub downloaden und zusammen mit jQuery (z.B. über die Google Hosted Libraries) innerhalb des head-Tags deiner Webseite einbinden:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>

Achte beim Kopieren des Code-Beispiels vor allem darauf, dass die Datei jquery.fittext.js auch im richtigen Verzeichnis deiner Webseite liegt (also z.B. im Ordner “js”).

FitText in WordPress-Themes einbinden

Wenn du WordPress-Nutzer bist, solltest du das JavaScript besser mit Hilfe der WordPress-Function wp_enqueue_script über die functions.php Datei deines Themes oder Child-Themes einbinden. jQuery selbst kannst du so über die WordPress-eigene jQuery-Version nutzen, indem du das entsprechende handle “jQuery” im Code setzt:

function my_scripts_method() {
wp_enqueue_script( 'fittext', get_template_directory_uri() . '/js/jquery.fittext.js', array( 'jquery' ), '1.1' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Die CSS-Klasse oder -ID deines Text-Elements angeben

Jetzt musst du die CSS-Klasse oder ID deines Text-Slogans nehmen und diese im folgenden JavaScript-Code innerhalb deines head-Tags angeben:

<script type="text/javascript">
jQuery("#responsive_headline").fitText();
</script>

In einem WordPress-Theme musst du den JavaScript-Code im folgenden No-Conflict Mode setzen, wenn die WordPress-eigene jQuery-Version genutzt wird:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#responsive_headline").fitText()
});
</script>

Hat dein WordPress-Theme eine eigene custom.js Datei (z.B. im Order “js”) kannst du deinen FitText-Code am besten dort unterbringen.

FitText-Optionen

Die Nummer 1.2 im Code zeigt die Stärke der Skalierung an. So kannst du beeinflussen, wie sehr der Text skaliert werden soll. 1 ist dabei der Standard-Wert. Wenn du also 0.8 angibst, wird dein Text etwas geringer bzw. langsamer skaliert:

jQuery("#responsive_headline").fitText(0.8);

Praktisch ist auch die Möglichkeit, eine minimale und maximale Text-Größe in Pixeln zu bestimmen. So hast du eine bessere Kontrolle, wie dein Text auf der Webseite angezeigt wird. Die Text-Größen Begrenzungen kannst du so im Code angeben:

jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

Wichtig ist trotz des Einsatzes von FitText in deinem CSS ebenfalls eine Text-Größe für deinen Text anzugeben. So wird der Text auch ohne Aktivierung von JavaScript noch korrekt angezeigt.

FitText WordPress-Plugin

Möchtest du den Code nicht selbst in dein WordPress-Theme einbinden, kannst du alternativ auch das WordPress-Plugin “FitText.js, a jQuery plugin for inflating web type” zur Einbindung des JavaScripts installieren.

Weitere JavaScript-Plugins für responsive Webdesigns

Weitere interessante JavaScript-Plugins für responsive Webdesigns von Paravel sind übrigens auch FitVids für die automatische Skalierung eingebetteter Videos und Lettering.js für eine individuelle Kontrolle einzelner Buchstaben mit Hilfe von JavaScript.

1. Welches Related Posts-Plugin ist das richtige für deinen Blog?

Da es wie gesagt jede Menge Plugins im offiziellen WordPress.org Plugin-Directory gibt geht es vor allem darum, das passende Plugin für den eigenen Blog zu finden.

Folgende Punkte sind zu klären:

• Möchtest du die ähnlichen Artikel selbst beim Schreiben oder bearbeiten eines Artikel auswählen, oder soll die Liste automatisch erstellt werden?
• Willst du bestimmen können, wo die Liste der ähnlichen Artikel genau angezeigt wird (indem du den benötigten PHP-Schnipsel selbst in die Template-Datei, meist content-single.php einfügst)?
• Möchtest du die ähnlichen Artikel mit Thumbnails (Miniatur-Bildern) anzeigen oder als reine Text-Liste? Benötigst du eine zahlreiche Auswahl an vorbereiteten Darstellungs-Optionen?
• Manche Plugins nutzen für die Auswertung der ähnlichen Artikel die eigene Datenbank deines Servers, andere speichern diese Daten auf ihrem eigenen, externen Server und sind somit weniger Speicher-intensiv. Welche Lösung möchtest du nutzen?

2. Meine Related Posts Plugin-Favoriten

Nachdem ich mir einen ersten Überblick über die verschiedenen Optionen der Related Posts-Plugins gemacht habe, hier eine Kurze Beschreibung meiner drei Plugin-Favoriten:

2.1. Related Posts for WordPress

Das Related Posts for WordPress-Plugin ist eine tolle Option, wenn du bei jedem Artikel selbst auswählen möchtest, welche Artikel als ähnliche Artikel angezeigt werden sollen. Das bedeutet natürlich etwas mehr Arbeit beim Schreiben der Artikel, bietet dir aber auch am meisten Kontrolle darüber, ob auch wirklich relevante Artikel in der Liste angezeigt werden.

Die Einstellungs-Optionen des Related Posts for WordPress-Plugins.

Meiner Ansicht nach ist Related Posts for WordPress eine gute Wahl, wenn du noch nicht allzu viele Artikel in deinem Blog geschrieben hast oder gerade ganz neu mit einem Blog anfängst. Bei größeren Blogs ist die automatische Auswahl ähnlicher Artikel wahrscheinlich besser geeignet.

2.2. YARPP (Yet Another Related Posts Plugin)

YARPP kann wohl als eines der Klassiker unter den Related Posts WordPress-Plugins bezeichnet werden. Das Plugin gibt es schon sehr lange, es wird von etlichen Bloggern eingesetzt und auch sehr regelmäßig vom Plugin-Autor gepflegt bzw. weiterentwickelt, was natürlich auch ein Vorteil ist. Allerdings nutzt es die WordPress-Datenbank deines eigenen Servers und ist daher etwas Speicher-intensiv.

Die Plugin-Einstellungen von YARPP.

Von den Einstellungen her ist das Plugin recht einfach gehalten. Du kannst z.B. angeben, welche HTML-Tags du für die Anzeige der Artikel-Liste nutzen möchtest. So kannst du leicht eigene CSS-Klassen wählen, um die Liste ähnlicher Artikel individuell zu stylen. Auch Thumbnails deiner Artikel können angezeigt werden.

2.3. nrelate Related Content

Möchtest du lieber nicht die WordPress-eigene Datenbank zum Speichern der Daten für das Related Posts-Plugin nutzen, ist das nrelate Related Content-Plugin eine beliebte Alternative. Die Daten werden auf dem externer Server von nrelate gespeichert.

nrelate Related Content-Plugin Einstellungen

Das Plugin bietet auch etliche Darstellungsmöglichkeiten und im Gegensatz zu YARPP auch mehrere Optionen zur Einbindung. Mit Hilfe des Template-Tags kannst du so auch manuell die Platzierung der ähnlichen Artikel bestimmen oder mit einem Shortcode ähnliche Artikel nur für bestimmte Artikel anzeigen (mehr Infos in der Plugin-Beschreibung).

Fazit

Für den Elmastudio-Blog habe ich mich letztendlich für eine eher schlichte Lösung mit YARPP und ein paar eigenen CSS-Styles entschieden. Da es schon sehr viele ältere Artikel auf unserem Blog gibt, war mir die automatische Auswahl von Artikeln besonders wichtig. Mit der Anzeige der Artikel bin ich bis jetzt sehr zufrieden, gewählt habe ich die Option “nach Zeitstempel sortiert, von aktuell nach alt”.

Dein Feedback?

Welche Erfahrungen hast du mit Related Posts-Plugins für WordPress schon gemacht? Wie ist dein Feedback zu den vorgestellten Plugins und worauf kommt es deiner Meinung nach bei bei der Auswahl eines geeigneten Related Posts-Plugins besonders an? Über dein Feedback und deine Tipps freue ich mich sehr!

Elmastudio.de auf Am I Responsive?.

Gezeigt wird die Webseiten-Ansicht für Desktop (1600x992px), Laptop (1280x802px), Tablet (768x1024px) und Smartphone (320x480px) und per Drag’n'Drop kann sogar die Anordnung der Geräte im Bild geändert werden.

Das Tool ist auf jeden Fall eine tolle Sache, um kurz einen Überblick über die eigene Webseiten-Präsentation auf verschiedenen Geräten zu bekommen und schöne Screenshots der eigenen responsive Webseite vorzubereiten.

1. Fixe Navigationsleisten

Derzeit extrem beliebt sind fixe Navigationsleisten oder Navigationselemente wie Menü-Buttons oder Logos. Zwar gibt es unter den mobilen Browsern noch einige schwarze Schafe, die fixe Elemente (CSS position:fixed) nicht optimal unterstützen, aber auf Desktop-Browsern funktioniert der Effekt einwandfrei und wird dementsprechend gerne eingesetzt.

Designed to Move

Plain

Weightshift

2. Off-Canvas Elemente in Desktop-Browsern

Off Canvas ist definitiv ein heißes Thema im responsive Webdesign (z.b. neu im Einsatz bei Mashable oder The Next Web). Doch warum sollte man eigentlich nicht auch auf Desktop-Browsern Platz optimal nutzen und gewisse Webseiten-Informationen in Off-Canvas-Bereichen unterbringen? Diese Webseiten zeigen, wie der Trend in der Praxis aussehen kann.

A Memoir Project

The Skybox

Teehan + Lax

3. Split-Screen Webdesigns

Wunderbar experimentell und aktuell immer beliebter ist der Trend, Webseiten quasi in zwei Hälften zu teilen und unabhängig scrollbar zu machen. Diesen, nennen wir es einmal Split-Screen Webdesign-Trend kannst du dir auf den folgenden drei Webseiten anschauen.

Coffee Surfing

Seidenstrasse

Valentina Gallo

4. Riesige Headerbilder mit Typografie

Okay, große Headerbilder sind sicher nichts neues im Web, aber inzwischen gibt es einen deutlichen Trend zu riesigen Headerbildern, die meist den kompletten Bildschirm einnehmen. Durch die großen Bilder kann ein schöner, atmosphärischer Effekt erzieht werden. Kombiniert werden die Headerbilder meist mit einem mittig gesetzten Intro-Slogan.

The Brooklyn Soap Company

Demi Creative

Osborn Barr

5. Große, Full-Screen Slider

Neben riesigen Headerbildern werden auch die Slider immer größer und die Slider-Bilder werden meist als Fullwidth-Bilder umgesetzt. Auch hier erzeugen die Bilder als Einstieg in die Webseite viel Atmosphäre.

AÃRK Collective

Neopolitan Clothing

Substrakt

6. Großzügige Single Page-Websites

Ein modernere, aktuell sehr beliebter Trend sind auch großzügige, Single-Page Websites, die mit sehr viel Weißraum arbeiten. Dieser Webdesign-Trend kommt oft für die Präsentationen von Produkten, Apps und Web-Services zum Einsatz.

Eden

Negative

SpellTower

7. Responsive Grid-Layouts

Aktuell auch super-beliebt sind großzügige, asymmetrisch angelegte Grid-Layouts. Dieser Webdesign-Trend eignet sich auch sehr gut für responsive Webdesigns, da die Grid-Elemente auf kleinen Bildschirmen wunderbar untereinander “gestapelt” werden können.

Etch

Future Insights Live 2013

Karl Anders

Wie gefallen dir die Webdesigns und welche der Design-Trends findest du besonders modern? Über dein Feedback und weitere Webdesign-Tipps freuen wir uns sehr!

Hilfreiche CSS-Tipps modern und leicht verständlich aufbereitet.

Das zweite Tutorial “A Beginner’s Guide to HTML & CSS” bringt dir in einer ebenfalls wunderschönen, modernen Aufmachung die Grundkenntnisse von HTML & CSS näher. Besprochen werden in 8 Einheiten z.B. Themen wie die HTML-Struktur und Syntax, Semantik, das Box-Modell, typografische Elemente, Listen oder Audio & Video.

Es gibt auch noch einen fortgeschrittenes Tutorial den “Advanced Guide to HTML & CSS”. Hier geht es u.a. um Responsive Webdesign, jQuery oder Transitions und Animation.

Durch das schöne, ansprechende Design der beiden Tutorial-Seiten macht das Lernen richtig Spaß und man kann sich in einer ruhigen Stunde entspannt mit einer heißen Tasse Tee oder Kaffee hinsetzen, um mehr über HTML & CSS zu erfahren. Viel Spaß beim Üben!