CSS Grids für Responsive Design Projekte

In diesem Artikel habe ich eine Auswahl von Grid-Systemen zusammengestellt, die mir gut gefallen haben.
Es sind alles Raster, die einen Responsive-Design-Ansatz verfolgen, also mit einem Fluid Grid arbeiten und verschiedene Bildschirmgrößen bis hinunter zum Smartphone unterstützen.

The 1140px CSS Grid System

Dieses Framework wird ’s werden fürs nächste Theme. Ich habe mich in der Systematik gut zurechtgefunden, und für mich ist es der beste Kompromiss zwischen Funktionalität und Übersichtlichkeit.
The 1140px CSS Grid System
Weiterlesen CSS Grids für Responsive Design Projekte

Responsive Web Design (3): Media Queries

Serie Responsive DesignDer erste Teil dieser Serie gab eine kurze Einführung ins Thema Responsive Design. Im zweiten Teil habe ich das erste Modul dieser CSS-Technik, den „Fluid Grid“, vorgestellt. Im dritten Teil geht es um das Thema „Media Queries“.

Wie funktionieren Media Queries?

Media Queries sind Abfragen: Die Website fragt ab, wie groß der Monitor ist, den der Besucher vor sich hat. Ist es ein Desktop-Computer, ein Netbook oder ein Smartphone? Nachdem die Größe des Bildschirms festgestellt wurde, lädt der Browser ein dazu passendes Stylesheet. Das heißt, der Designer der Website hat mehrere Stylesheets hinterlegt. Je nachdem mit welchem Endgerät die Seite aufgerufen wird, erscheint ein anderes Layout.

Weiterlesen Responsive Web Design (3): Media Queries

Responsive Web Design (2): Der Fluid Grid

Serie Responsive DesignIm zweiten Teil dieer Serie geht es um die erste der drei Techniken, die zusammen das Responsive Web-Design ausmachen: Fluid Grids. Das Layout einer Website wird nicht mehr in einer fixen Größe angelegt, sondern die Elemente sind beweglich und passen sich wechselnden Bildschirmgrößen an.

Üblicherweise orientiert man sich beim Design einer Website an einem mittleren Wert für die Bildschirmgröße. Meist sind das 1024 x 768 Pixel. So kann die Seite auch auf kleineren Bildschirmen dargestellt werden und wer einen größeren Monitor hat, der hat sowieso keine Probleme.

1024 Pixel für alle?

Nach wie vor basieren die meisten Websites auf einem festen Raster, die Breiten sind fix.
In gewisser Weise ist es einfacher, mit festen Werten umzugehen. Nicht zuletzt deshalb, weil man damit die Illusion hat, das Erscheinungsbild der Website wäre auf jedem Endgerät dasselbe.
Kunden und Designer werden nervös bei dem Gedanken, dass ihre Seite nicht immer genau so aussieht wie auf ihrem Monitor im Büro.

Weiterlesen Responsive Web Design (2): Der Fluid Grid

Deutsch oder Englisch? Unser Panel für SXSW 2012

Als Webdesigner  und Entwickler beziehen wir viele unserer Informationen aus englischsprachigen Quellen. Unsere Kunden sprechen durchweg deutsch, aber unsere Kollegen rund um den Erdball tauschen sich auf Englisch aus.

Also twittern wir auf englisch und bloggen hier auf deutsch. Gelegentlich twittern wir auch auf deutsch und bloggen auf Englisch – letztendlich pflegen wir eine bunte Mixtur aus beiden Sprachen.
Und bei jedem neuen Projekt oder Produkt, das wir uns ausdenken, diskutieren wir die Frage: Deutsch oder Englisch? Sollen wir eine deutschsprachige Zielgruppe ansprechen oder lohnt es sich, weiter zu denken und ins Englische zu wechseln?
Weiterlesen Deutsch oder Englisch? Unser Panel für SXSW 2012

Responsive Web Design (1): Einführung

Serie Responsive DesignIm ersten Teil dieser Artikel-Reihe geht es darum, was Responsive Web Design ist und wozu es gut ist. In den folgenden Teilen erkläre ich die einzelnen Techniken etwas genauerIm letzten Teil möchte ich das Thema in einen größeren Zusammenhang einordnen: Was bedeutet Responsive Design für das moderne Webdesign, wo gibt es Kritikpunkte, wie geht es weiter?

Was ist Responsive Web Design?

Responsive Design ist eine CSS-Technik, mit der man das Layout einer Website beweglich machen kann. Die Seite passt sich dann automatisch an unterschiedliche Bildschirmgrößen an. Ganz gleich, ob man mit dem Smartphone oder mit einem Desktop-Computer eine Website betrachtet, alle Inhalte bleiben gut lesbar.

Weiterlesen Responsive Web Design (1): Einführung

Kleines Einmaleins Typografie im Web

Wer eine Website oder ein Blog ins Leben ruft, muss sich zwangsläufig auch mit dem Thema Typografie befassen. Irgendwie muss der Text ja formatiert werden. Schriftarten gibt es wie Sand am Meer. Arial und Times sind jedem aus der Textverarbeitung vertraut. Aber wer hat jemals etwas von „Univers Light Condensed“ oder „Metroscript Swash“ gehört?
Die Entscheidung für eine Schrift und der richtige Umgang mit ihr ist keine einfache Aufgabe. Dieses Thema füllt ganze Bücher. Ich möchte mich hier auf ein paar wenige, praktische Tipps beschränken, die jeder einfach umsetzen kann.
»Weiterlesen bei www.bohncore.de

Dieser Artikel ist als Gastartikel in Ralf Bohnerts Blog Bohncore erschienen.

Projektmanagement mit KanbanPad

Bei Recherchen nach einem Tool, über das mehrere Freelancer an einem komplexen Projekt arbeiten können, bin ich auf KanbanPad gestoßen. Es ist wunderbar einfach aufgebaut, intuitiv zu bedienen und dabei außerordentlich leistungsstark.
Das Wort „Kanban“ kommt aus dem Japanischen und bedeutet so viel wie „Tafel“. Angeblich hat Toyota damit schon 1947 seine Produktivität verbessert. Im Prinzip geht es darum, die Arbeitsschritte innerhalb eines Workflow zu visualisieren. Darin gibt es Schritte, die in einer bestimmten Reihenfolge passieren müssen und es gibt Aufgaben, die parallel abgearbeitet werden.

Das Ziel ist, dass jeder auf den ersten Blick sieht, wo er steht und was gerade zu tun ist. Engpässe und Konflikte werden so unmittelbar sichtbar und dadurch erhöht sich die Produktivität.

KanbanPad ist in Ruby On Rails programmiert. Was ich besonders toll finde: Es funktioniert sogar auf dem iPad problemlos. Das haben ähnliche Tools (z.B. SmartQ) nicht geschafft. Die Entwickler von The Hybrid Group stellen das Tool kostenlos zur Verfügung.
Thanks a lot, guys!

Preis: kostenlos
System: Web App

www.kanbanpad.com


Creative Commons und GNU GPL

Open-Source-Software ist beliebt. Sie steht kostenlos im Netz und jeder kann damit machen, was er will. Manchmal steht irgendwo klein gedruckt etwas von einer Lizenz, aber darum muss man sich nicht weiter kümmern. Oder doch?

Was bedeutet es eigentlich, wenn ein Programm, ein Bild oder eine Grafik lizensiert ist?
Zunächst einmal heißt das, dass es jemanden gibt, der das Urheberrecht für das Werk hat. Auf dieses Recht verzichtet er nicht einfach so, sondern er räumt anderen das Recht ein, sein Werk in einem definierten Rahmen zu nutzen. Das ist dann eine Lizenz.

Weiterlesen bei www.bohncore.de

Dieser Artikel ist als Gastartikel in Ralf Bohnerts Blog Bohncore erschienen.