Das Jahr 2014 wird für die meisten vor allem wegen einem Ereignis in Erinnerung bleiben: Wir sind Weltmeister!
Neben der sportlichen Großtat unserer Nationalmannschaft hat sich in diesem Jahr aber auch im Internet viel getan: Neben verschiedenen Interface-Trends wie fixierten Navigationen, Parallax-Effekten und Sidebar-Menüs ist auch ein bereits bestehender Trend endlich zu einer festen Norm im Webdesign geworden: Responsive Webdesign.
Umdenken im Webdesign: Responsive Webdesign und Content First
Der Markt rund um mobile Geräte wie Smartphones und Tablets ist auch in Deutschland weiterhin steigend. Für uns als Internetagentur ist dabei besonders interessant, dass auch die Internetnutzung über diese Geräte (die sog. "mobile Internetnutzung") deutlich zunimmt.
Dieser Trend bestätigt unsere Arbeitsweise basierend auf einer ausführliche Konzeption und inhaltlichen Planung und unterstreicht die Bedeutung von Responsive Webdesign und Content First für Webseiten aller Art.
Sie hören die Bezeichnung "responsive Webdesign" gerade zum ersten Mal - oder haben sich schon immer gefragt, was dieses "responsive" eigentlich genau bedeutet? In diesem Fall hilft unser kurzes Video rund um responsive Webdesign bestimmt weiter.
Webdesign-Trends und Highlights des Jahres 2014
Neben den bereits erwähnten "Mini-Trends" rund um Parallax und scrollende Navigationselemente ist 2014 das Jahr, in dem sich das Flat Design als feste Gestaltungsrichtung etabliert hat.
Spätestens seit Apple mit den Betriebssystemen iOS7 und Yosemite mit Firmen wie Microsoft (Windows Phone, Windows 8) gleichzieht und sich vom lange vorherrschenden Skeuomorphismus verabschiedet, gilt: Flach und minimal ist in.
Das Designer-Team von Google legt mit "Material Design" sogar bereits nach: Neben zahlreichen Apps wird auch das neue Android-Betriebssystem (Android L) in einer Art "Flat Design 2.0" erstrahlen. Damit ist bereits jetzt klar, dass der Trend hin zu einer funktionalen und schlichten Gestaltung auch im nächsten Jahr fortgesetzt wird.
Wer mehr über die Richtlinien und Prinzipien hinter Material Design erfahren möchte, findet in unserer Einführung in Material Design, sowie in den Artikeln rund um Masse & Gewicht im Webdesign und den “Material Design”-Style zahlreiche Informationen zum Thema.
Das Jahr der Präprozessoren, Task Runner und Build-Tools
Neben gestalterischen Trends hat das Jahr 2014 auch den Workflow zur Erstellung von Webseiten revolutioniert. Insbesondere die Weiterentwicklung und Optimierung von CSS-Präprozessoren wie SASS, LESS und Stylus ermöglicht mittlerweile eine deutlich effektivere, schnellere und nachhaltigere Umsetzung eines Webdesigns.
Task Runner wie Grunt und Gulp ermöglichen eine zusätzliche Optimierung des Webdesign-Workflows. Durch die Automatisierung verschiedener Aufgaben (beispielsweise der Minifizierung von Dateien) haben wir Webdesigner mehr Zeit für unsere tatsächliche Arbeit - und können lästige Aufgaben einfach automatisiert beim Speichern oder in einem sogenannten "Build Process" vor der Veröffentlichung einer Webseite durchführen.
Im Zusammenspiel bieten SASS und Grunt beispielsweise eine deutliche Vereinfachung in der Entwicklung für verschiedene Browser (im folgenden Beispiel setzen wir globale SASS-Variablen und einen Build-Schritt mit einer grunt-autoprefixer-Task voraus, um die Definitionen für die verschiedenen Browser nicht selbt schreiben zu müssen):
/* With pure CSS */
.fancy-box {
padding: 5px;
margin-bottom: 20px;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.fancy-box-title {
font-size: 16px;
margin-bottom: 20px;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}
.fancy-box-title:hover,
.fancy-box-title:focus {
color: #b2ff59;
}
// ------------------------------------------------------
// With SCSS and grunt-autoprefixer
.fancy-box {
padding: 5px;
margin-bottom: $spacing-base;
box-shadow: 2px 2px 4px rgba(black, 0.5);
transform: rotate(5deg);
&-title {
font-size: $font-size-large;
margin-bottom: $spacing-base;
transition: color 0.2s;
&:hover,
&:focus {
color: $green-light;
}
}
}Auch das Content-Management-System Contao hat im vergangenen Jahr eine großartige Entwicklung hinter sich. Bereits mit der Veröffentlichung von Contao 3.3 hat das Entwickler-Team viele technischen Feinheiten bereitgestellt (wie Template-Vererbung, den DcaLoader und einen modernen Uploader) - die aktuelle Version 3.4 des Systems bietet als eines der ersten Content-Management-Systeme sogar Unterstützung für responsive Bilder und das <picture>-Element.
Spannend wird auch die Entwicklung von Contao im nächsten Jahr werden: Ab der Version 4.0 soll Contao dann auf dem Symphony-Framework basieren und somit eines der bekanntesten und modernsten PHP-Frameworks als Basis für eigene Entwicklungen bereitstellen.
Wir sind gespannt!
Winzer, Windenergie und Webdesign: Unser Jahr in Bildern
Auch wir haben ein bewegtes Jahr mit Projekten unterschiedlichster Größe und Branchen hinter uns. Gerne möchten wir an dieser Stelle ein paar Einblicke in unsere Arbeit des vergangenen Jahres präsentieren:
Besuch der Google-Zentrale in Dublin und Umzug in neue Büroräume
Für das neue Jahr haben wir bereits große Pläne: Direkt im Januar werden wir die europäische Hauptfiliale von Google in Dublin besuchen und bestimmt zahlreiche interessante Eindrücke mit nach Kiel bringen.
Außerdem werden wir ab dem 2. Februar 2015 in neuen Büroräumen zu finden sein. Wer unsere bisherige Lage direkt am Alten Markt geschätzt hat, darf beruhigt sein: Auch unser neues Büro liegt zentral in der Kieler Altstadt und befindet sich nur wenige Meter weiter, am Alten Markt 14.
Wir bedanken uns für ein erfolgreiches Jahr
Abschließend möchten wir uns bei Ihnen und euch für ein großartiges und erfolgreiches Jahr 2014 bedanken. Vielen Dank für das Vertrauen in unsere Arbeit und die produktive Zusammenarbeit!
Wir wünschen allen erholsame Feiertage, frohe Weihnachten und einen guten Start in das neue Jahr!