Kategorien
Design HTML/CSS

CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche

Selbst als erfahrener Entwickler hat man nicht, wo man geht und steht, CSS-Vokabular vor Augen. Oder murmelst du etwa kontinuierlich CSS-Syntax vor dich hin? Sollte dem so sein, wundere dich nicht, wenn die Menschen beginnen, dich zu meiden. Hast du in letzter Zeit derlei Anzeichen bemerkt, weißt du ja jetzt, woran es liegen könnte. Schon gut, danke mir nicht.

Möglicherweise hilft dir das Projekt, das ich dir heute vorstellen möchte, den Anschein beginnenden Wahnsinns zu widerlegen. Also, anstelle CSS murmelnd durch die Straßen zu ziehen, bookmarke einfach das kleine Projekt „CSS Vokabular“ und mach den Kopf frei…

CSS Vocabulary: Not More To It
CSS Vokabular: Viel mehr gibt es nicht zu sehen

CSS Vokabular: Wissen, was was ist

Das kleine Helferlein namens CSS Vocabulary, das mit der Hilfe einiger engagierter Zeitgenossen inzwischen nicht nur in englischer, sondern auch in deutscher Sprache, sowie einigen weiteren, verfügbar ist, ist im Grunde komplett selbsterklärend. Es besteht aus nicht mehr als einem einzelnen Quelltext-Beispiel und und einer Sidebar mit Begriffen. Wählst du einen beliebigen Teil des Quelltextes per Klick aus, wird der dazu passende Begriff in der Sidebar farblich hervorgehoben.

Umgekehrt funktioniert es genau so. Klickst du auf einen Begriff in der Sidebar, werden die dazu passenden Code-Teile im Quelltext-Beispiel farblich hervor gehoben. Mehr gibt es nicht zu sehen.

CSS Vocabulary: Code Example
CSS Vocabulary: das Quelltext-Beispiel

Klar, CSS Vocabulary bringt dir nicht wirklich CSS bei. Aber, wenn es dir wenigstens manchmal so geht wie mir, dann wirst du an dir selbst bemerkt haben, dass die genauen Begrifflichkeiten im Kopf nicht immer sicher abrufbar sind. Das ist besonders dann ungünstig, wenn du gerade einen Text über CSS schreibst. Du weißt genau, was du schreiben wolltest, aber wie hieß jetzt dieser verflixte Begriff noch gleich genau? Mir passiert das auch gerne, wenn ich einen Style Guide dokumentiere. Da freue ich mich über eine schnelle unkomplizierte Nachschlagemöglichkeit wie CSS Vocabulary.

CSS Vocabulary: Sidebar
CSS Vocabulary: Sidebar

CSS Vocabulary ist ein Projekt der Finnen Ville Vanninen, Pasi Jokinen und Timo Moilanen, das inzwischen in einem größeren Projekt namens Vocabs aufgegangen ist. Neben CSS findest du auf Vocabs einen in gleicher Weise aufbereiteten Wortschatz für HTML, eben das HTML Vocabulary.

Vocabs kann völlig frei unter einer MIT-Lizenz genutzt werden und ist zuhause bei Workflower.fi. 

(Der Beitrag erschien zuerst im Sommer 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)

Beitragsbild: MikesPhotos auf Pixabay

Kategorien
Essentials Freebies, Tools und Templates Webdesign

Gewusst wie: Kostenlose E-Books für Designer und Entwickler

Wenn du ein Web-Designer oder -Entwickler bist, dann weißt du ja, dass du dich niemals genug weiterbilden kannst. E-Books bieten sich dafür an, denn hier erhältst du Lernstoff in komprimierter Form. Das ist vorteilhaft, denn unter Zeitmangel leidet wohl so ziemlich jeder Webworker. Ich habe mich daher für dich auf die Suche nach E-Books gemacht.

Kategorien
Infografiken Inspiration

Infografiken: So gehen sie viral, trotz starker Konkurrenz

Es klingt so einfach: Du trägst Daten zusammen, erstellst eine schicke Infografik und setzt sie auf die Website, um den Traffic zu erhöhen, Verkäufe anzukurbeln oder Leads zu generieren. Dabei bedenkst du zu selten, dass es bereits jede Menge Infografiken gibt, die in irgendeiner Ecke des weltweiten Netzes nur darauf warten, entdeckt zu werden – häufig erfolglos.

Kategorien
E-Business Social Media

SlideShare: So erstellen Sie eine erfolgreiche Präsentation

Wenn Sie bereits auf anderen Social-Media-Plattformen wie Facebook und Twitter erfolgreich sind, dann stellt sich die Frage: Was kommt jetzt? Natürlich gibt es noch viele weitere Soziale Medien, die Unternehmen nutzen können. SlideShare ist eine gute Möglichkeit, die eigene Marke bekannter zu machen. SlideShare wurde im Mai 2012 von LinkedIn aufgekauft und wies laut eigener Aussage im letzten Quartal des Jahres 2013 60 Millionen Besucher pro Monat und 215 Millionen Seitenaufrufe auf.

slideshare-teaser

Das ist SlideShare

SlideShare ist ein Dienst zur Erstellung von Online-Präsentationen, nicht ganz unähnlich dem Urvater PowerPoint. Mit etlichen, vorgefertigten Templates, Farb-Schemata, einfach zu erstellenden Charts und einem benutzerfreundlichem Editor benötigen Sie keine große Erfahrung im Erstellen von Präsentationen. Allerdings gibt es, wie bei jedem anderem Social-Media-Medium auch, einige Fallstricke. Daher stellen wir Ihnen in diesem Beitrag eine kleine Anleitung zur Verfügung, damit Sie schneller durchstarten können.

So erstellen Sie eine erfolgreiche SlideShare-Präsentation

Tipp 1: Schreiben Sie eine gute Überschrift

Der Titel einer SlideShare-Präsentation ist genauso wichtig wie die Überschrift eines Blogbeitrags. Anhand des Titels entscheiden die Besucher, ob sie eine Präsentation öffnen möchten oder nicht. Geben Sie sich daher bei dem Titel Ihrer Präsentation  Mühe. Es wird sich lohnen, wenn Sie erst mal den Dreh raus haben. Sollten Sie Unterstützung bei der Findung einer guten Überschrift benötigen, Dr. Web bietet Ihnen eine gute Anleitung zu diesem Thema mit vielen Beispielen.

Tipp 2: Wählen Sie eine Präsentationsstruktur

Wählen Sie eine einfach zu verfolgende Struktur für Ihre Präsentation. Je leichter der Inhalt „verdaulich“ ist, desto besser. Beispiele hierfür könnten folgende sein:

Eine Schritt-für-Schritt-Anleitung. Zeigen Sie Ihrer Zielgruppe, wie sie Schritt für Schritt ein Problem lösen könnten.

Informative Listen. SlideShare bietet unter anderem auch ein Listenformat. Zum Beispiel: „In 10 Schritten neue Geldgeber finden“.

Statistiken. Ähnlich einem Listenformat können Sie auch Statistiken an den Mann bringen. Hier ein Beispiel: „10 Dinge, die Sie über xxx noch nicht wussten“.

Erzählen Sie eine Geschichte. Verwenden Sie jede Folie, um eine Geschichte zu erzählen. Zum Beispiel könnte ein gemeinnütziger Verein seine eigene Erfolgsgeschichte teilen. Jede Folie bietet ein wenig mehr Informationen über den Verein und seine Geschichte.

Featured-Marketing-SlideShare

Tipp 3: Lernen Sie von erfolgreichen SlideShare Usern

Aller Anfang ist schwer. Das gilt besonders für neue Soziale Netzwerke. Allerdings kann man die Lernzeit bedeutend verkürzen, wenn man etwas von den erfolgreichsten Usern einer Plattform „abkupfert“. Das meint nun nicht das 1:1 Kopieren, sondern nur die ausgiebige Einholung von Inspirationen. Je öfter Sie sich die wirklich erfolgreichen Präsentationen anschauen, desto eher können Sie selbst welche erstellen.

SlideShare selbst macht Ihnen diese Aufgabe sehr leicht, denn dort hat mann die erfolgreichsten Präsentationen aus 2014 in einer Präsentation zusammengefasst.

The Must-Read SlideShares of 2014 from LinkedIn SlideShare

Tipp 4: Nutzen Sie visuelle Effekte und Hintergründe

SlideShare

Bedenken Sie eines: Eine PowerPoint-Präsentation dient immer nur zur Unterstützung des Vortragenden. Diese Möglichkeit bleibt Ihnen jedoch bei einer SlideShare-Präsentation verwehrt. Bei SlideShare muss nicht der Vortragende Redner überzeugen, sondern die Präsentation selbst. Sorgen Sie also dafür, dass der Inhalt für sich spricht.

Um das zu gewährleisten, benötigen Sie zur Unterstützung des reinen Inhalts eine visuelle Komponente. Bilder und Grafiken können den Inhalt einer Präsentation betonen und dafür sorgen, dass der Content besser im Gedächtnis des Zuschauers bleibt. Kostenlose Fotos und Vektor-Grafiken ohne Backlinkpflicht bieten einige Dienste an. Dr. Web hat Ihnen bereits 43 solcher Dienste vorgestellt. Doch auch Videos lassen sich in die Präsentationen von SlideShare einfügen, experimentieren Sie also ruhig etwas.

Tipp 5: Erstellen Sie qualitativ hochwertigen Inhalt

Was auch immer Ihr Thema sein mag, verschwenden Sie nicht die Zeit anderer Leute mit schlechten Inhalten. Niemand kann erwarten, dass sich die Menschen durch 10 Slides klicken, wenn dort nur unwesentliche Inhalte stehen. Erstellen Sie Content, auf den Sie stolz sein können. Geben Sie sich mit dem Inhalt Mühe, dann werden andere Menschen davon früher oder später Notiz nehmen und – im besten Falle – die Präsentation erneut teilen.

Tipp 6: Fügen Sie Call-to-Action-Buttons hinzu

call-to-action-in-slideshare

Fordern Sie die „Leser“ Ihrer Präsentation ruhig mit ermunternden Links auf, eine ganz spezielle Handlung durchzuführen. Das könnte zum Beispiel das Abonnieren Ihres Newsletters sein. Allerdings sollten Call-to-Action-Links erst am Ende Ihrer Präsentation erscheinen, dann sind sie – wenn gute Inhalte verwendet worden sind – wirkungsvoller als an anderer Stelle.

Natürlich wäre auch ein Link auf die eigene Website denkbar. Vielleicht schreiben Sie einen kurzen Text hinzu, wie: „Mehr über unsere Produkte können Sie erfahren, wenn Sie den Link unten anklicken“. Es sollte die komplette URL auf der Folie erscheinen und kein Hyperlink-Text. Erstens wissen die Leser dann, wohin genau verlinkt wird und zweitens bietet sich Ihnen die Möglichkeit, diesen Link zu kopieren und in die Suchleiste des Browsers einzufügen. Sollte der Link zu lang sein, nutzen Sie einen Online-Dienst zum Verkürzen des Links. Hier bietet sich zum Beispiel Bitly an.

Natürlich können Sie die Menschen auch auffordern, Ihnen auf anderen Sozialen Netzwerken zu folgen. Bauen Sie die betreffenden Buttons in die Präsentation ein und teilen Sie Ihren Lesern mit, was zu tun ist: „Um uns auf Twitter oder Facebook zu folgen, klicken Sie das jeweilige Symbol an“.

Tipp 7: Teilen Sie Ihre Präsentation

Nachdem Sie Ihre Präsentation fertiggestellt haben, sollte sie über alle Ihre Sozialen Medien inklusive LinkedIn geteilt werden. SlideShare und LinkedIn arbeiten optimal zusammen. SlideShare wurde von LinkedIn gekauft, beide Dienste sind aufeinander optimiert worden.

Versuchen Sie, auf die Startseite von SlideShare zu kommen. SlideShare pickt sich täglich einige Slides heraus, um sie auf der Startseite zu zeigen. Natürlich bekommen die auf diesem Wege herausgestellten Präsentationen wesentlich mehr Aufmerksamkeit, als andere, sich nicht auf der Startseite befindlichen Slides. SlideShare selber hat eine Präsentation herausgegeben, in der Sie wichtige Tipps finden, um für die Startseite in Betracht gezogen zu werden.

http://www.slideshare.net/Slideshare/how-23431564

Tipp 8: Pro Blogpost eine Präsentation erstellen

Eine gute Promotion-Möglichkeit für Ihren (Firmen)-Blog könnte sein, pro Blog-Beitrag eine Präsentation zu erstellen. Menschen sind visuell orientiert und schauen sich gerne Videos oder Präsentationen an. Da kann es nicht schaden, jeden Beitrag im Blog mit einer kurzen Präsentation auf SlideShare zusammen zu fassen. Diese kann dann nicht nur über die Social-Networks geteilt werden, sondern auch unter jedem Blogpost verlinkt werden. Damit heben Sie sich von Ihrer Konkurrenz ab.

Fazit

In dieser kurzen Anleitung haben wir Ihnen einige Tipps gegeben, wie Sie einen leichten Einstieg auf SlideShare finden können. Orientieren Sie sich ruhig an den wirklich erfolgreichen Erstellern von Präsentationen und experimentieren Sie etwas. Der Erfolg wird sich irgendwann einstellen, wenn Sie kontinuierlich qualitativ hochwertige Präsentationen abliefern.

Links zum Beitrag

(dpe)

Kategorien
Inspiration Showcases Webdesign

Best Practice: 30 Websites mit Video-Hintergründen

Video-Hintergründe werden immer populärer. Nachdem nun auch Dienste für frei und kostenlos zu verwendende HD-Videos gibt, wird die Popularität wohlmöglich noch zunehmen. Der für seine kostenlosen und backlinkfreien Bilder bekannte Dienst Pexels bietet neuerdings auch Videos an. Diese Videos sind unter der Creative Commons Zero (CC0) license veröffentlicht, eine Nennung der Quelle oder ein Backlink ist also nicht nötig. Mit Mazwai existiert ein weiterer Dienst für Stock-Videos, allerdings muss hier eine Namensnennung des Autors stattfinden. In diesem Artikel geht es jedoch vornehmlich um die Darstellung von Best Practices, also inspirierende Beispiele von Websites, die bereits einen Video-Hintergrund nutzen – entweder nur im Bereich des Headers, oder als vollflächiger Hintergrund, der den gesamte Viewport des Browsers einnimmt.

30 Video-Websites

Hier bekommen Sie Videos für die Hintergründe

1. Pexels Video

pexels-free-stock-videos

Pexels Video bietet Ihnen kostenlose und völlig frei zu verwendende HD- oder Full-HD Videos. Alle Videos sind hierbei unter der Creative Commons Zero (CC0) license veröffentlicht. Daher müssen Sie sich keinerlei Gedanken um Backlinks oder Namensnennung bei der Verwendung machen.

2. Mazwai

Mazwai Stock-Videos

Mazwai bietet ebenfalls etliche hochqualitative Videos an, allerdings sind diese unter der Namensnennung 3.0 Deutschland (CC BY 3.0 DE) lizensiert. Das bedeutet, dass mindestens eine Namensnennung des Video-Autors erfolgen muss. Ein im Sinne der Lizenz korrekter Backlink kann so aussehen:

Video: Zuerich Airport von Niklaus Gerber/Mazwai.com, Lizenz: CC BY 3.0

Inspirierende Websites mit Video-Hintergründen

1. Vimeo

Vimeo

2. Mahedine

Mahedine

3. Airbnb

airbnb

4. Dadaab Stories

Dadaab-Stories

5. Tool FNA

Tool FNA

6. Kickstarter

Kickstarter

7. Hangar

Hangar

8. Oh Land

Oh-Land

9. Art, Copy & Code

art-copy-code

10. MediaBOOM

mediaBOOM

11. Poolhouse Digital

poolhouse

12. Coulee Creative

Coulee Creative

13. Risk Everything

Beispiel

14. Joe San Clothing

Joe-San-Clothing

15. L’attrape rêve

Beispiel

16. Whiteboard

Whiteboard

17. BKWLD

BKWLD

18. Bienville Capital Management

Bienville-Capital-Management

19. Exponent

exponent

20. We are Spry

we-are-spry

21. Monsorro

Monsorro

22. Story & Heart

story-and-heart

23. De Haus

De Haus

24. Adidas

Adidas

25. sketchin

Sketchin

26. Todoist

Totoist

27. Somproduct

SomProdukt

28. Fresh Cotton

Fresh Cotton

29. Harvest

Harvest

30. Wim Vanhenden Internet Artist

Wim-Vanhenden

 Fazit

Websites mit Video-Hintergründen haben definitiv ihren Reiz. Man kann mit dem Medium Video viel experimentieren. Man könnte es einmal nur im Header einsetzen oder als Ersatz für ein Hero-Hintergrundbild (ein den Sichtbereich ausfüllendes Bild) nehmen. Hat man sein persönliches Rezept gefunden, kann man sehr individuelle Websites gestalten. Da es nun kostenlose und frei zu verwendende Videos gibt, ist eine Website, die solche Elemente nutzt, keine Kostenfrage mehr.

Links zum Beitrag

(dpe)

Kategorien
Design Webdesign

Blick in die Glaskugel: die ultimativen Webdesign-Trends 2015

Jeden Webworker beschäftigt die Frage, in welche Richtung sich das Webdesign des Jahres 2015 bewegen wird. Denn auch das Design von Webseiten unterliegt einer Mode – und das ist auch gut so. Sonst würde das Internet noch wie in seinen Anfängen in den 1990er Jahren aussehen. Und dieses Design von damals möchte sicher niemand zurückhaben. Wohin wird nun also der Trend im Jahre 2015 gehen? Lassen Sie uns also gemeinsam die Glaskugel anwerfen und einen Blick in Richtung Zukunft wagen.

Die ultimativen Webdesign-Trends für 2015

Webdesign-Trends für 2015 – was wird kommen?

Auf jeden Fall wird Flat-Design auch 2015 nicht zu bremsen sein. Dabei geht es allerdings mehr in Richtung Material-Design, inspiriert vom neuen Android 5.0 „Lollipop“-Design und niedergelegt in den entsprechenden Design-Guidelines aus dem hause Google. Background und Full Screen Videos sind weiterhin interessant und werden vermehrt eingesetzt werden. An Bildformaten könnten sich entweder SVG oder aber das verlustfrei zu komprimierende WebP durchsetzen. Der mobile Trend im Webdesign wird überwiegend in Richtung Wearable und Health (Fitness/Body-Tracking etc.) gehen. Dabei ist von einer Android-First Strategie auszugehen, da Android weltweit circa 80% Marktanteil stellt. Das mobile, responsive Webdesign ist in 2015 immer noch ein Must-Have. Inwieweit es Apps verdrängen wird, oder ob es am Ende selbst durch Apps abgelöst werden wird, ist Spekulationen zugänglich. Apps sind jedenfalls nicht nur ein willkommener Service, sondern pure Benutzerfreundlichkeit, wenn sie gut gemacht sind.

Der Aufstieg von Flat- und Material-Design

Einer der größten Trends in 2014 war zweifellos das Flat-Design. Aufgrund seines einfachen, sauberen und klaren Stils wird es auch in 2015 weiterhin die große Rolle spielen und populär sein. Großen Einfluss auf Flat Design nimmt erkennbar bereits jetzt Googles Vorstellung eines „Material Design“. Dabei handelt es sich um ein Design, welches Google für sein Mobil-Betriebssystem Android implementiert wissen möchte. Das funktioniert ganz erfolgreich, denn nicht nur Android 5.0 „Lollipop“, sondern auch viele Apps erstrahlen bereits im neuen Material Design.

Probieren Sie doch einfach das Material Design-Theme für Bootstrap 3 aus, welches Designern und Entwicklern erlaubt, das Material Design mit jedem Front-End-Framework Ihrer Wahl zu nutzen.

Das Google Material Design für Bootstrap 3

Wichtige Links

Background- und Fullscreen Videos

HTML5-Background-Videos, die im Hintergrund einer Webseite ablaufen, waren bereits in 2014 populär und werden es auch in 2015 sein. Der Grund dafür ist recht simpel: Die Menschen mögen lieber ein Video anschauen, als Text-Artikel zu lesen. Auch ist es wesentlich einfacher, die Geschichte eines Unternehmens in bewegten Bildern zu erzählen und so Emotionen zum Besucher zu transportieren, als über rein statische Text- und Bildelemente. Zwei gute Beispiele für vollflächige Hintergrundvideos sind Spotify und die mediaBOOM Agentur. Weitere Beispiele stellt dieser diesem Artikel zusammen.

Spotify mit Hintergrundvideo

Die mediaBOOM Agentur mit Hintergrundvideo

Wichtige Links

Mobile Apps von Websites und Soziale Netzwerke werden 2015 dominieren

Die klassische Webseite (auch responsiv) wird es in 2015 insgesamt zugunsten der mobilen Apps schwerer haben. Verschiedenen Studien zufolge nutzen immer weniger Menschen zu ihrer Information den Browser, sondern präferieren die mobilen Apps. Websites, die bereits heute Ihre Apps im Google Play Store und im Apple-Store anbieten, können daher in 2015 im Vorteil gegenüber ihren Konkurrenten sein, die nur eine statische Website oder eine responsive Ansicht ihrer Webseite anbieten. Eine App ist im Gegensatz zu einer responsiven Website im ganzen Handling komfortabler. Es wird spannend, zu sehen, inwieweit sich der Trend fortsetzt. Der Zuwachs wurde bereits im Vergleich zwischen 2013 und 2014 ziemlich deutlich.

Apps versus Web

apps-vs-web

Die Beschäftigung mit und das Posten auf Sozialen Netzwerken wie Facebook und Twitter wird weiterhin zunehmen, so dass diese eher zur ultimativen Nachrichten- und Informationsquelle werden.

app-time-spent

Wichtige Links

The rise of mobile apps and the decline of the open web — a threat or an over-reaction?

Infografiken werden durch interaktive Webgrafiken ersetzt werden

Die Zeit der „normalen“ Infografiken wird sich dem Ende zuneigen. Im Vormarsch sind eindeutig die interaktiven Webgrafiken, die optisch und erzählerisch ansprechender sind. Sie ermöglichen es den Benutzern, mit der zur Verfügung gestellten Information physisch zu interagieren, dies schafft ein einprägsameres Ergebnis. Die Zukunft des Car-Sharing verfügt über eine wunderschön aufbereitete interaktive Webgrafik, mit der ein Besucher interagieren und davon lernen kann.

future-of-car-sharing

Wichtige Links

The Bright Future of Car Sharing

Mikro-Interaktionen

Mikro-Interaktionen (zu gut Englisch: micro interactions) werden ein weiterer, beliebter und großer Trend in 2015 sein. Micro-Interactions sind etwa Buttons, die kleine Aufgaben erfüllen, wie zum Beispiel das Raten eines Songs, das Ändern einer Einstellung oder das Liken eines Artikels. Sie fördern das Engagement der Besucher und werden verwendet, um eine Website noch einnehmender zu gestalten.

Infografik Micro-interactions

Ein Beispiel von gut umgesetzten Mikro-Interaktionen:

Ein Beispiel gut umgesetzter Mikro-Interaktionen

Wichtige Links

Improve your websites with microinteractions

Mehr Webseiten – weniger Coden

Das manuelle Coden (oder Entwickeln) von Webseiten mittels Auszeichnungs- und Programmiersprachen nimmt ab, da immer mehr visuelle WYSIWYG (What you see is what you get) Editoren (mal wieder) auf den Markt drängen. Somit wird es auch Menschen ohne HTML- und CSS-Kenntnisse möglich, ansprechende Websites zu erstellen. Selbstverständlich kann darüber debattiert werden, ob dies die richtige Richtung ist. Denn schliesslich hat das Web davon mehr als profitiert, dass visuelle Editoren im letzten Jahrzehnt kaum genutzt wurden.

Ein brauchbarer visueller Editor wären zum Beispiel Macaw. Jedoch gibt es noch einige mehr, hier eine Liste von 13 visuellen Editoren. Bei Dr. Web haben wir Webydo und Wix  schon desöfteren näher betrachtet.

macaw-editor

Wichtige Links

Große Bilder und Videos werden die Slider ablösen

Große sogenannte „Hero„-Bereiche mit großen (zum Teil unscharfen) Bildern oder Videos werden immer mehr Karussels und Slider ablösen. Ghost-Buttons sind ebenfalls ein Riesen-Trend, der eng mit großen Bildern und Background-Videos verzahnt ist.

Exposure

Wichtige Links

Responsive Design mit besserer Performance

Auch wenn Responsive Design schon bald von mobilen Apps überholt sein könnte, so ist es doch ein Must-Have in 2015 und darüber hinaus. Jedoch sollte man in diesem Jahr viel mehr Wert auf die Performance einer responsiven Website legen. Grundsätzlich sollten nur die wirklich notwendigen Elemente in die mobile Ansicht übernommen und diese dann auch auf Leistung optimiert werden. Ein hervorragendes Beispiel ist die mobile Ansicht des Smashing Magazine. Nur die essentiellen Bereiche wurden übernommen und dann auf Ladegeschwindigkeit optimiert.

smashingmagazine

Mobile portrait (320×480)

smashingmagazine-mobile

Wichtige Links

Funktionelle Webdesign-Typographie

Unterschiedliche Bildschirmauflösungen und Medien, mit denen Webseiten konsumiert werden, erfordern eine bessere, vielseitigere und ansprechendere Typographie. Designer nutzen bereits seit längerem Webfonts wie die umfassenden Google Fonts. In 2015 werden wir noch mehr und größere Fonts, insgesamt mehr Vielfalt zu sehen bekommen. Entdecken Sie in der folgenden Liste die perfekte Verwendung der beliebten Google-Web-Fonts.

Perfekte Verwendung von Google-Web-Fonts

Wichtige Links

„Karten“-Designs werden immer wichtiger

Ein weiterer, durch den Anstieg der mobilen Nutzung des Internets beeinflusster Trend, ist die zunehmende Popularität des sogenannten Card-Designs. Card-Design ist die Unterteilung einer Webseite in „mundgerechte“ Karten. Diese Karten enthalten im Wesentlichen kurze Texte, Benutzernamen, ein Bild und/oder einige Share-Buttons. Dieses Design-Format hat die Social-Media-Website Pinterest berühmt gemacht. Es wurde seither zügig von vielen Designern adaptiert. Mittlerweile haben auch Twitter und Google (für Google Now) dieses Design aufgegriffen.

Das Cards-Design von Google Now

Wichtige Links

Mobile Webdesign-Trends

Hier noch einige Trends zur Zukunft des mobilen Webdesigns.

wearable

Wichtige Links

Fazit

Auch wenn vielleicht nicht alle unserer vorhergesagten Webdesign-Trends eintreffen, so war und ist das Web doch immer in Bewegung und entwickelt sich beständig weiter. Jeden Tag kommen neue und spannende Dinge hinzu. Scheuen Sie sich also nicht, einige davon einmal auszuprobieren und anzuwenden. Denn nur dann kann das Internet immer interessanter, spannender und benutzerfreundlicher werden. Analysieren Sie ruhig, wieviel Einfluss diese neuen Trends auf Ihr Unternehmen haben werden und was Sie auf Grundlage dieser neuen Kenntnisse erreichen können. Was ist Ihr persönlicher Supertrend 2015?

Links zum Beitrag

(dpe)

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden.

magic-demo-site

Magic.css: Viel Bewegung auf der Website

CSS3 Animations sind im Kommen, aber noch nicht so weit verbreitet, wie man glauben könnte. Vor einigen Tagen erst stellten wir hier bei Dr. Web einen leicht verständlichen Pocket-Guide für Einsteiger in CSS3 Animations vor. Christian Pucci aus Italien, auf Github und auch sonst im Web unter dem Pseudonym miniMac unterwegs, erleichtert den Einsatz mit seinem stetig wachsenden Stylesheet Magic.css ganz ordentlich.

Von einem halben Dutzend Effekte im Juli 2013 steigerte er den Umfang auf 55 Effekte im Mai 2014. Neben den eigentlichen Effekten lässt sich noch die Zeitdauer der Ausführung, respektive bis zur Ausführung steuern. Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.

Auf der Demoseite zum Projekt können Sie alle verfügbaren Effekte ausprobieren, wenn auch die Umsetzung der Demo nur wenig beeindruckt. Ein roter Diamant wird auf die unterschiedlichen Weisen in das umgebende Quadrat hinein- oder hinausbewegt. Da hätte man sich etwas spannenderes vorstellen können. Sei’s drum, das Prinzip wird jedenfalls klar.

magic-einzeldemo
Magic.css Demo: Rechts den Effekt klicken, links den Diamanten in Bewegung sehen

Magic.css: weitere Effekte in Arbeit

Christian schraubt aktuell intensiv an dem Repository. Man wird wohl in Kürze mit weiteren Effekten rechnen dürfen. Das Stylesheet enthält alle Definitionen mit den erforderlichen Prefixes für alle modernen Browser, während die Demoseite selber zuverlässig nur im Chrome und Safari funktioniert.

Derzeit arbeitet Christian an der minifizierten Version, um die knapp 100 kb des Stylesheets nach unten zu drücken. Die minifizierte Datei liegt zwar schon im Repository, ist aber noch leer.

Magic.css vereinfacht die Anwendung von CSS3 Animations deutlich und gehört auf jeden Fall in Ihre Bookmark-Sammlung.

Links zum Beitrag