Dieses Jahr etwas früher als sonst: Unser Weihnachtsgruss in Form eines extra produzierten Spots, der gleichzeitig Appell an uns selber ist
Wir wünschen allen unseren Kunden, Partnern und Freunden eine schöne Adventszeit und entspannte Festtage.
Dieses Jahr etwas früher als sonst: Unser Weihnachtsgruss in Form eines extra produzierten Spots, der gleichzeitig Appell an uns selber ist
Wir wünschen allen unseren Kunden, Partnern und Freunden eine schöne Adventszeit und entspannte Festtage.
… bietet dir die Möglichkeit in interdisziplinären Web- und Mobile-Projekten von Anfang an als vollwertiges Teammitglied mitzuwirken und Verantwortung zu übernehmen. Du betreust als wichtiger Bestandteil des Development Teams bestehende Projekte und konzipierst und entwickelst neue Funktionen für das stationäre Web und für mobile Endgeräte. Du begleitest unterschiedliche Projekte in allen Projektphasen, was deinen Beruf besonders interessant macht.
… technologiebegeistert sein, ein hohes technisches und analytisches Verständnis und sehr gute Kenntnisse in der Programmierung mit Objective C, Java Script, sowie im Umgang mit HTML und CSS mitbringen. Ausserdem solltest du sowohl selbständig als auch im Team arbeiten können und ein Gespür für Benutzerfreundlichkeit und Gestaltung haben.
Stellenanzeige als PDF anzeigen
… bietet dir die Möglichkeit in interdisziplinären Designprojekten von Anfang an als vollwertiges Teammitglied mitzuwirken und Gelerntes in der Praxis anzuwenden. Zu deinen Aufgaben gehören die Konzeption und Entwicklung von interaktiven Benutzeroberflächen für statische und mobile Endgeräte und das Umsetzen von Prototypen und Design-Entwürfen und natürlich der Kontakt zu Vertretern von Nutzergruppen und Experten.
… am besten bereits etwa die Hälfte deines Designstudiums oder einer vergleichbaren Ausbildung absolviert haben und gerne im Team arbeiten. Zudem solltest du ein ausgeprägtes Gespür für Benutzerfreundlichkeit mitbringen und gute Kenntnisse im Umgang mit Photoshop oder Indesign sowie mit HTML und CSS haben.
Heutzutage stehen eine Vielzahl von Devices für das auf die jeweiligen Bedürfnisse zugeschnittene Surferlebnis zur Verfügung. Ob mobil oder stationär. Darauf mittels gutem Webdesign zu reagieren liegt in der Verantwortung von Designern und Developern.
Fast jeder Kunde möchte seine Inhalte ebenfalls über eine mobile Version der eigenen Webseite verfügbar machen. Am besten spezifisch für iPhone, iPad, Android Phones & Pads, Blackberry, Netbooks und zahlreiche weitere Devices.
In den nächsten Jahren wird diese Entwicklung nicht zurückgehen, auf die es deshalb zu reagieren gilt.
Es gibt verschiedenste Möglichkeiten, um Informationen auf attraktive Weise auf verschiedensten Geräten zur Verfügung zu stellen und dabei eine konsistente Optik aufrecht zu erhalten. Zum Beispiel alternative Web-Frontends, Mobile (Web-)Apps im Browser, native Apps und vieles mehr.
Heute möchte ich euch eine Möglichkeit und zugleich ein Denkansatz im Webdesign vorstellen, mit dem sich zentral für verschiedenste Devices arbeiten lässt.
“Reagierendes Webdesign” ist ein Ansatz der darauf abzielt, dass Design und Development möglichst dynamisch und flexibel auf das Nutzerverhalten und Umfeld basierend auf Bildschirmauflösung, Plattform und Ausrichtung reagieren sollen.
Dieser Ansatz ist vorallem für Webprojekte relevant, wo das Erstellen einer eigenen, separaten Website oder mobile-App für die ganzen verschiedenen Geräte undenkbar, bzw. praktisch gesehen nicht relevant ist.
Dabei ist vorallem wichtig, dass es beim responsive Webdesign nicht nur um angepasste Layouts und automatisch skalierende Bilder geht, sondern dass es sich dabei um eine Denkweise im modernen Webdesign handelt.
Auflösung und Device

Hunderte verschiedene Bildschirme und Auflösungen existieren heute. Kleine und grosse Touch-Screens, grosse und kleine LED-Bildschirme – beliebig im hoch oder Querformat einsetzbar. Und es werden noch mehr dazukommen. Es steht also die Frage im Raum, wie man im Webdesign konkret mit dieser Situation umgehen soll.
Flexibilität statt Redundanz
Bereits vor einigen Jahren gab es flexible Layouts im Web, wobei diese äusserst selten aufzufinden waren und sich die Flexibilität oft stark in Grenzen hielt. Heutzutage gibt es wesentlich mehr technische Möglichkeiten, browserkompatible, flexible Layouts umzusetzen, auch wenn das an den an Photoshop und statische Layouts gewöhnten Designer ganz neue Anforderungen stellt. Dies ist ein Kernansatz von responsive Webdesign.
Hier einige kurz beschriebene Techniken im Frontend Development, um Flexibilität zu gewärhleisten:
Früher haben Bilder oft flexible Layouts zerstört. Bilder können heute mittels CSS einfach skaliert werden.Eine weitere Technik ist es, Bilder zu croppen (zuschneiden). Dies funktioniert mit einer Kombination aus einem <div> mit einem Background-Image das per CSS eingemitted wird und dessen <div> je nach Auflösung eine dynamische Breite hat. Mittels dem benutzerdefinierten HTML5-Attribut data-fullsrc und etwas javaScript (http://filamentgroup.com/examples/responsive-images) kann man ebenfalls ein niedrig und ein hochaufgelöstes Bild mit dem selben<img>-Tag gegeneinander austauschen, je nach Screen Auflösung.Vorteil: Weniger unnötiger Load auf mobilen Devices.

Bei extremen Grössenunterschieden kann es nötig werden, das gesamte Layout anzupassen. Das kann mit einem neuen, separaten CSS geschehen, oder besser, mit CSS media queries. Damit lassen sich – wenn bestimmte Situationen zutreffen – bestehende CSS Klassen überschreiben oder neue ergänzen. So kann flexibel auf extreme Auflösungen reagiert werden. Alte Browser, die Media-Queries nicht unterstützen, werfen keine Fehler, sondern ignorieren diese einfach.
Code-Beispiel:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Mittels javaScript wäre es ebenfalls möglich solche Befehle zu implementieren, insbesondere wenn Browser unterstützt werden sollen, die media queries noch nicht unterstützen. Die allermeisten Smartphones und alle gängigen Browser aber, für die diese queries in erster Linie relevant sind, unterstützen sie auch.
Oft ist es nötig auf mobilen Geräten auf diverse, nebensächlichere Zusatzinhalte zu verzichten, um den Blick des Betrachters auf das Wesentliche zu lenken. Hierfür eignet sich der CSS-Befehl display:none, der ebenfalls im Zusammenhang mit den media-queries flexibel eingesetzt werden kann.
Ein weiterer Aspekt ist das unterschiedliche Handling von Webseiten via Touchscreens. Diesen Aspekt möchte ich aber in einem separaten Artikel behandeln, den ich hier verföffentlichen werde.
Beispiel
Ich habe euch noch ein kleines, einfaches Beispiel gemacht
(einfach die Seite beliebig skalieren und die Ausgabe betrachten!)
http://projects.guavestudios.com/resp-design-test/
Die SBB rüstet etliche Wagons für Familien mit kleinen Kindern zu fahrenden Spielplätzen um. Mit viel Detail und Charme kommen die neuen Wagons daher:
Wir hatten die Gelegenheit, die SBB Ticki Park Memory App für den Zeitvertreib während der Zugfahrt umzusetzen.
Verfügbar ist die App im iTunes Store für iPad, iPhone und iPod touch.
Memory ist ein einfaches aber erfolgreiches Spielprinzip, das keine langen Erklärungen benötigt, jedoch sehrwohl unterhalten kann.
Zudem ist es möglich, dass an einem Gerät mehrere Spieler spielen.
Also perfekt für Kinder und deren Eltern. Mittels lustig animierten Vektorgrafiken und Soundeffekten realisierten wir eine unterhaltsame
App ganz im Ticki-Stil. Eine kleine Highscore Liste bringt ein bisschen Wettbewerb – ohne grossen Leistungsdruck auszuüben.
Hier ein paar Shots:
Im Zusammenhang mit den interaktiven Medien sind wir immer weniger an den klassischen Computer gebunden. Schon vor einigen Jahren haben Notebooks Ihren Besitzern eine gewisse Mobilität verliehen. Diese Geräte sind heute so ausgereift, dass es für den klassischen Anwender immer weniger wichtig wird, sich einen Mobilitäts- und Platzraubenden Desktop – Computer zuzulegen.
Zudem sind wir heute noch einen Schritt weiter – immer kleinere und praktischere Devices haben immer mehr Funktionalitäten.
Also habe ich es für wichtig befunden, hier kurz darauf einzugehen, was das für eine Auswirkung auf das Medium Internet hat.
Schon seit geraumer Zeit ist eine Entwicklung im Gange, die meines Erachtens schon Ausmasse erreicht hat, die es schlichtweg unmöglich machen, diese Veränderungen zu ignorieren.
Das Web wird mobil – Immer mehr Menschen (noch vordergründig jüngere) möchten unterwegs die Vorzüge und Möglichkeiten nutzen, die Ihnen das WWW bietet. Wer möchte nicht beispielsweise gerne beim Einkaufsbummel sehen können, wo es das selbe Produkt am günstigsten gibt und auch noch eine Wegbeschreibung dahin erhalten, die Bahnfahrkarte noch schnell online lösen, unterwegs Neuigkeiten lesen, oder während einer langen Zugfahrt mit Freunden schreiben oder TV schauen?
Alleine in der Schweiz schätzt man, das etwa 15% der Bevölkerung bereits ein Smartphone besitzt. Ausserdem sollen alleine in der Schweiz rund 600 000 Personen ein IPhone besitzen (Quelle: http://www.mfx.ch/2009/12/19/statistik-zum-iphone-in-der-schweiz/). Tendenz natürlich steigend. Auch die Datentarife werden (wenn auch etwas verzögert) langsam erschwinglich.
Künftig können mittels Augmented Reality, diversen Tags und dem WWW auch stärkere Verbindungen zwischen dem “realen Leben” und dem “virtuellen Profil” hergestellt werden. Das wird starke Auswirkungen auf das Interaktionsdesign haben (Anwendungen sind Touch & Surface Computing, Augmented Reality, Real<->Social,…)
Natürlich gibts noch etliche Beispiele. Ich freue mich auch über mehr Beispiele von euch!
… die wir als digital Media Agenturen haben ist, uns auf diese Entwicklung frühzeitig (wenn nicht schon geschehen: JETZT) einzustellen, sie genau zu untersuchen, auszutesten und sich keinesfalls vor ihr zu verschliessen.
Wir sind gespannt, wo uns diese Entwicklung hinführen wird und sind offen für Neues!
Wenn ihr auch Erfahrungen gemacht habt, oder interessante Projekte in dem Zusammenhang gefunden habt, zögert bitte nicht, uns diese bei den Kommentaren zu posten!
Gruss
Sandro