Animationen richtig einsetzen, Navigationsleisten & Foundation 6

Animationen richtig einsetzen

Animationen auf Websites können dem Nutzer so richtig auf die Nerven gehen – oder ihn durch das Angebot leiten und sich nahtlos ins Webdesign einfügen. Gabrielle Gosha erklärt, dass der Designprozess einer guten Animation nicht bei der Frage beginnen darf, was technisch umsetzbar ist. Die Idee muss über den Code bestimmen, nicht der Code über die Idee. Außerdem sollten nicht unbedingt künstlerische Gesichtspunkte über die Optik der Animation entscheiden; die Usability muss im Fokus stehen. Insgesamt hat Gosha vier gute Tipps für alle, die gerne ein bisschen Bewegung in ihr Design bringen möchten.

Bilder mit PHP, jQuery und Ajax hochladen, zuschneiden und skalieren

Wollte man früher ein Bild bearbeiten, musste man notgedrungen auf ein Grafikprogramm zurückgreifen. Selbst wenn man nur die Größe eines Fotos verringern wollte, war es notwendig, ein Drittprogramm zu öffnen. Diese Zeiten gehören mehr und mehr der Vergangenheit an. Dank CSS muss man nicht einmal mehr zur Erstellung von Bildeffekten auf gesonderte Software zurückgreifen. Wie man mithilfe von PHP, jQuery und Ajax Bilder hochlädt, zuschneidet und skaliert, wird im folgenden Blogpost erklärt.

Ausfahrbare Navigationsleiste

Aus Gründen der Übersichtlichkeit ist es manchmal sinnvoll, auch solche Elemente eines Webseiten -bzw. App-Interfaces zu verstecken, die vom User regelmäßig gebraucht werden – z.B. die Navigationsleiste. Eine Möglichkeit, um Platz zu sparen und trotzdem wichtige Funktionen unmittelbar verfügbar zu halten, ist eine durch Klick/Tap ausfahrbare Navigationsleiste. Wie man so ein Feature unter Einsatz von HTML, CSS und jQuery erstellt, erklärt der kurze Artikel von Sebastiano Guerriero.

Datum oder Zeitraum? Veröffentlichungszeitpunkte verständlich darstellen

Wer wissen möchte, wie alt ein Artikel ist, kann natürlich auf das Datum schauen. Aber wie lange ist das jetzt eigentlich her? Drei Wochen, vier? Oft muss man für eine genaue Einordnung dann doch noch schnell einen Blick in den Kalender werfen. Aber das geht auch einfacher: „Vor 3 Stunden“, „vor 2 Wochen“ und „vor einem Monat“ sind manchmal nützlicher als ein genaues Datum. Osvaldas Valutis zeigt, wie das auch für die eigene Website möglich ist.

Entwicklung eines statischen Generator Workflow

Thomas Peham erläutert die Neuerungen in den Arbeitsabläufen seines Start-Ups, besonders im Hinblick auf Content-Management-Systeme, Software-Tools und Bug-Tracking. Er stellt beispielsweise Hugo vor, einen Static Site Generator. Er kreiert Webpages in dem Moment, in dem neue Inhalte erstellt oder bearbeitet werden. Mit Hugo erstellte Webseiten ermöglichen komplette Kontrolle über Inhalt und Webdesign. Mehr Details zum Thema bietet der entsprechende Artikel.

Foundation 6: Innovation Flex Grid

Einer der besten Parts von Foundation ist wohl das Grid-System. Das System ist das Rückgrat von Foundations Responsive Design und macht es möglich, alles von einem simplen zweispaltigen Layout bis hin zu einem mehrstufigen, komplizierten Ungetüm zu erstellen. Simon Codrington stellt nun in seinem Artikel das Flex Grid vor, einen neuen optionalen Ersatz für das Standard-Grid. Es ermöglicht mehr Flexibilität und Kontrolle, außerdem kann unter anderem die horizontale und vertikale Positionierung angepasst werden. Mehr dazu hier.

HowTo: Eine horizontale Zeitleiste coden

Timelines sind ein schönes Mittel, um die Abfolge von Ereignissen zu visualisieren und ins Verhältnis zu setzen. Während in Büchern horizontale Varianten vorherrschen, weil sie dort die Breite der Doppelseiten ausnutzen können, wird online meist auf vertikale Zeitleisten zurückgegriffen, da sie dem üblichen Scrollverhalten der User entsprechen. Um nicht vollständig dagegen anarbeiten zu müssen, wurde die horizontale Zeitleiste in Claudio Romanos Tutorial als Slider konzipiert, auf der die Events angewählt werden können, um sie dann auf voller Bildschirmweite darstellen zu können. Eingesetzt wurde dabei CSS3 sowie jQuery.