Responsive Web Layouts mit CSS und so

Responsive Web Layouts passen sich dynamisch an das Ausgabemedium an. Im Gegensatz zu den rein an der Bildschirmbreite angelehten Skaliermethoden verwenden moderne sites flexible grids und Bildgrößen die die Seite dem Medium entsprechend aufbauen bzw. reduzieren.

Da es mittlerweile neben dem Standardbrowser verschiedenste Ausgabemedien gibt und mobile Endgeräte fast von selbst ins Internet gehen ist eine Anpassung an folgende Medien ratsam:

Standardbrowser ca. 1292 Pixel
Notebooks und Ipads ca. 1025 Pixel
Handys und Smartphones ca. 480 Pixel

Eine Media query fragt nun die Auflösung ab und lädt dann das entsprechende Layout.

Hier ein paar Beispiele:

http://designmodo.com/responsive-design-examples/

http://designmodo.com/minimal-responsive-web-designs/

http://www.alistapart.com/articles/responsive-web-design/

Und Anleitungen auch auf deutsch:

http://www.drweb.de/magazin/media-queries-mobile-version-von-websites-mit-css3-erstellen/

http://www.yaml.de/resources.html

Februar 7, 2012 | Kategorie Allgemein, über webdesign | Kommentieren

CSS schrumpfen – unnötige Leerzeichen aus CSS entfernen

Eben wieder gehabt: Ein css file hatte plötzlich 4000 Zeilen?! Und das obwohl der Code eher gering ist. Manuell löschen würde zu lange dauern – daher:

Für solche am besten den CSS Kompressor benutzen:

http://page-speed.net/css/minify-css.html

und hier direkt ohne blabla:

http://compressor.ebiene.de/

Geht schnell und macht nette kleine Dateien. Auch für Javascript geeignet!

Januar 9, 2012 | Kategorie über webdesign | Kommentieren

Webfonts – besser als der Standard?

Nach dem einbetten von Grafiken anstatt von Schrift (im letzten Jahrtausend), der Verwendung von Flash und der totalen Reduktion auf Standardschriften wie Arial & Co haben die Webfonts ein neues Zeitalter eingeleitet.

Jetzt kann im Web schon fast wie bei Drucksachen gestaltet und gewütet werden. Wer gestalten kann mag das excellent finden, Hobbydesigner tun das ihre dazu um die Sache wieder fraglich erscheinen zu lassen. Die Webdesigner unter uns möchten eigentlich nur wissen WIE, schliesslich möchte der Kunde X das haben!

Hien ein paar Quellen:

Fontsquirrel – mit Generator für Webfonts und Freefonts

Ermöglicht Auswahl aus bestehenden Fontkits und bietet den Code zum einbetten via @fontface – eine rundum gute Sache. Wer allerdings meint damit alles umwandeln zu können sei gewarnt: Bestimmte Schriften werden einfach abgelehnt, wenn die Lizenz nicht geeignet ist.

http://www.fontsquirrel.com/

Typekit

Schriften bis zu 25.000 Pageviews pro Monat kostenlos einbetten. Hier ist es wie mit den Traffic beschränkten Webspaces – eine unsichere Sache.

http://typekit.com/

Fonts.com

Ähnlich wie beim Typekit nur bis zu 25.000 Pageviews mit Registrierung möglich.

http://webfonts.fonts.com/

Kostenlos für alle: Google Webfonts

Wie könnte es anders sein: Auch Google mischt bei den Webfonts mit. Gratis.

http://www.google.com/webfonts

Noch mehr Infos finden sich unter http://www.fontwerk.com/1029/webfont-services/ wo sich weitere Foundries und Möglichkeiten finden.

März 16, 2011 | Kategorie über webdesign | Kommentieren

Social Media – Nutzen und Gefahren

Social Media ruft bei manchen Menschen Euphorie hervor – ander lehnen diese Aktivitäten aus Datenschutzgründen total ab. Die Hochschule St. Gallen hat nun die Relevant von Social Media für Unternehmen untersucht und gibt Befürwortern wie Gegnern Argumente in die Hand.

Was letztendlich zu tun ist entscheiden Sie am besten selbst. Ich halte Social Media für ein sehr gutes Marketinginstrument! Und: Es 5:3 an Risiken – Verweigerer haben deutlich mehr Risiken! Use it, sage ich nur.

A. Die Risiken der Verweigerung

1. Verlust an Relevanz:

Das Internet steht für Kommunikation, Offenheit und Öffentlichkeit. Unternehmen sind schon längst keine rein statischen Gefüge mehr. Das Internet ist eine feste Säule des Multi-Channel-Marketing und Vertriebsmixes geworden. Ist ein Unternehmen im Internet lediglich über die Homepage zu finden, wird sowohl die Useraktivität in Bezug auf die Brand als auch die Bedeutung derselben für die User sinken. Ebenso werden die Berührungspunkte über Suchmaschinen und Links abnehmen.

2. Negative Brandingeffekte:

Mit der schwindenden digitalen Relevanz von Unternehmen sind auch die neuen Möglichkeiten für Marketing und Unternehmenskommunikation limitiert, welche insbesondere im Rahmen von Social Media innovative Konzepte und vielfältige Varianten der Markenbildung bieten.

3. Fehlende Interventionsmöglichkeiten:

PR-Abteilungen in Unternehmen schätzen insbesondere die Aktualität und Direktheit der Interaktion mit Kunden und Stakeholdern. Einerseits ermöglicht Social Media die Früherkennung von aufkommenden oder potentiellen Krisen, andererseits bietet es die Chance zur unmittelbaren Intervention. In kritischen Situationen ist diese Möglichkeit unentbehrlich, da sich negative Informationen über das Unternehmen oder die Produkte beispielsweise in Blogs wie ein unaufhaltsames Lauffeuer verbreiten können.

4. Wettbewerbsnachteile durch mangelnde Wissensverarbeitung:

Abhängig von der Branche ist die Verarbeitung von Kundeninformationen eine wichtige Komponente zum Erhalt der Wettbewerbsfähigkeit. Kunden teilen ihre Wünsche und Bedürfnisse offen mit. Eine ausreichend große und qualitativ hochwertige Datenmenge eröffnet Chancen für eine effizientere Produktgestaltung oder für optimierte Dienstleistungen und Prozesse. Diesen Wettbewerbsgedanken haben Unternehmen weitestgehend noch nicht verinnerlicht.

5. Sinkende Mitarbeiterbindung:

Schließlich haben viele Unternehmen das Risiko einer sinkenden Mitarbeiterbindung durch das Verbot der Nutzung von Social Media am Arbeitsplatz bisher noch nicht erkannt. Sie müssen dahingehend sensibilisiert werden. Denn Social Media hat insbesondere bei Wissensarbeitern einen bedeutenden Einflussauf die emotionale Bindungan das Unternehmen. Unternehmen können die Potentiale von Social Media nutzen und dabei gleichzeitig die benannten Risiken (wenn auch nicht immer vollständig) vermeiden.

Hier das Original: http://www.internetworld.de/Nachrichten/Medien/Social-Media/Risiken-von-fehlender-Unternehmenskommunikation-in-Social-Media-Wer-relevant-sein-will-muss-mitreden-53546.html

B. Die Risiken der Nutzer

1. Mangelnde Feedbackverarbeitung:

Die Studie verdeutlicht die Problematik, dass Informationen aus Social-Media-Applikationen nicht ausreichend verarbeitet und ausgewertet werden können. Die Gründe dafür liegen in der Überforderung von Marketing und Kommunikationsabteilungen, da diese darauf nicht ausgerichtet oder nicht entsprechend personell ausgestattet sind. Werden die Daten von einer anderen Abteilung ausgewertet, liegt es nahe,dass dadurch eine korrekte und unverzügliche Kommunikation nach außen nicht gerade beschleunigt wird. Kurz: Es fehlt an Ressourcen und somit an der strategischen Ausrichtung innerhalb des Unternehmens.

2. Dysfunktionales Kommunikationsverhalten:

Unternehmen sind sich oft im Unklaren darüber, welche Rolle die eigenen Mitarbeiter bei der externen Kommunikation spielen. Nur mit Hilfe von Social-Media-Richtlinien kann den Mitarbeitern vermittelt werden, welche Informationen sie in welcher Form nach außen darstellen und wiedergeben sollen. Die Meinungen und Aussagen der Mitarbeiter können der institutionalisierten, zentralen Unternehmenskommunikation widersprechen und zu kontraproduktiven Effekten führen. Daher sollte die Implementierung von Kontrollmechanismen bei der Formulierung einer Kommunikationsstrategie zumindest thematisiert werden.

3. Kontrollverlust und Verstärkung negativer Informationen:

Aufgrund der Eigendynamik von Social Media müssen Unternehmen befürchten, dass sich Kommunikationsinhalte nicht mehr gänzlich steuern lassen. Dies kann unter Umständen sogar zu einer negativen Verstärkung von kommunizierten Inhalten führen. Informationen können sich im interaktiven, sozialen Medium unabhängig von sachlicher Richtigkeit oder ganzheitlicher Betrachtungsweise rasch verbreiten und das Image beziehungsweise die Brand beschädigen.

Hier im Original: http://www.internetworld.de/Nachrichten/Medien/Social-Media/Risiken-von-Unternehmenskommunikation-in-Social-Media-Mangelndes-Feedback-ist-die-groesste-Gefahr-53544.html

Februar 6, 2011 | Kategorie über webdesign | Kommentieren

Von Lightboxn und Javascript Frameworks

Wem ist das nicht schon passiert – man baut ein Javascript ein und irgendwann geht es nicht mehr. Der denkende Webdesigner überlegt dann – was habe ich als letztes verändert? Vielleicht ein anderes Script eingebaut?

Dieses Phänomen traf nun die altbekannte und beliebte Lightbox, die durch das Framework jquery ausgehebelt wird. Was ist zu tun? Es gibt natürlich Lightbox clones: Die Greybox… Ob es damit geht?

Am besten mit dem Framework weiterbasteln. Hier ein paar Ansätze:

September 1, 2010 | Kategorie über webdesign | Kommentieren

iPhones erobern das Web – Designanleitungen

Die Grundlage – ein PSD zur Gestaltung.

iPhone-Basteln: GUI als PSD — datenkind/blog.

http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

12 Tipps für iPhone Development

iPhone-development-12-tips

Entwicklungstipps auf deutsch mit Scripten

http://rootserver-blog.de/javascript/webentwicklung-fur-den-iphone-safari/

Lass dich inspirieren – ein Verzeichnis.

http://cssiphone.com/

Februar 8, 2010 | Kategorie über webdesign | Kommentieren

Woran man Amateure erkennt | Fehler, Webdesign | Dr. Web Magazin

Schon 2003 war dem Macher von Dr.Web und Smashing Magazine klar was schlechtes Webdesign bedeutet. Daran hat sich bis heute nichts geändert – geht es doch um grundlegenden Dinge wie Gestaltung und Benutzbarkeit /Usability/.

Woran man Amateure erkennt | Fehler, Webdesign | Dr. Web Magazin.

Trotzdem finde ich dass man das ganze locker sehen sollte und auf gutes Design zu recht stolz sein kann.

Februar 5, 2010 | Kategorie über webdesign | Kommentieren

CSS Transparenz by Tobias Otte

Super Tutorial zum Thema CSS Transparenz:

CSS Transparenz | Tobias Otte.

Februar 4, 2010 | Kategorie über webdesign | Kommentieren

Von Tooltips, dem Title tag – das mal raus und mal rein soll

Tooltips sind eine schöne Sache um platzsparend Hinweise im Text unterzubringen. In allen Browsern werden diese automatisch erzeugt sobald das Attribut “title” einem Link hinzugefügt wird. Man kann so weitere Informationen zu einem Link bei Bedarf sichtbar machen. Diese Informationen werden bei der verweildauer von einigen Sekunden angezeigt und verschwinden dann wieder.
Darüber hinaus gibt es Tooltips auch bei lokaler Software wie Wikipedia weiss: http://de.wikipedia.org/wiki/Tooltip.

Es gibt Freunde der Tooltips die diese sogar vergrößern und mit css formatieren wollen:

per Javascript: http://www.walterzorn.de/tooltip/tooltip.htm
http://webmatze.de/wirklich-einfache-javascript-tooltips/
Mit Javascript Bibliotheken wie jQuery lassen sich diese ebenfalls darstellen: http://flowplayer.org/tools/tooltip.html
Geht aber auch mit css: http://www.webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de

Es wäre alles so einfach wenn jeder diese Features, die aufwändig eingebaut und entworfen wurden auch mögen würde. Ist aber nicht so.

Das Smashing Magazine geißelt die Tooltips besonders bei der Verwendung in Menüs. Durchaus verständlich wenn sie keine zusätzlichen Funktionen sondern nur eine Wiederholung des Menüpunkts darstellen. Hier mehr dazu ….

Remove Tooltips – Tooltips entfernen

Also weg mit dem Zeug, aber wie?
Die einzig durchschlagenden Möglichkeit sehe ich im radikalen Entfernen des title Attributs.

Tooltips bei Joomla

In Joomla fehlen die Title tags, solange man das Standard Menü verwendet. Des einen Freud’ ist des anderen Leid, daher gibt es auch eine sehr ausführliche Anleitung wie man diese reinkriegt: http://www.gn-webdesign.de/joomla-tutorials/mainmenu-title-attribut.html.

Januar 29, 2010 | Kategorie über webdesign | Kommentieren

Templates für alle möglichen und unmöglichen CMS

Auf dem http://www.themeswiki.org/ finden sich Anleitungen zum Erstellen von Templates von vielen verbreiteten Content Management Systemen.
Eine wunderbare Sammlung, wenn auch nur auf englisch.

Januar 27, 2010 | Kategorie über webdesign | Kommentieren

Nächste Einträge →