miradlo.com Auflösungen testen

In den letzten Wochen habe ich mich intensiver mit Responsive Webdesign befasst. Hierbei geht darum, die Inhalte einer Seite möglichst optimal für alle Geräte darzustellen. Egal ob mobiles Smartphone oder großer Monitor mit hoher Auflösung alle Nutzer sollen ein Layout finden, was zu ihrem gerade genutzten Gerät passt. Beim Barcamp Stuttgart habe ich am Samstag eine Session zu diesem Thema angeboten, dieser Beitrag enthält die Links und Infos hierzu.

Die Techniken im Hintergrund sind gar nicht so neu, vorgestellt wurde CSS 3 schon vor einigen Jahren. Sinnvoll einsetzbar wurde diese Möglichkeiten jedoch erst seit sie von den wichtigsten Browsern auch interpretiert wurden. Für mobile Geräte konnte man zunächst mittels media="handheld" ein anderes Layout festlegen, Geräte wie das iphone melden sich jedoch gar nicht als handheld und bekamen daher doch wieder dasselbe Design wie Nutzer mit großen Desktopmonitoren.

media queries je nach Auflösung

Mittels media queries aus CSS 3 wird ein Layout je nach Auflösung ausgegeben. Zunächst habe ich ein Layout erstellt wie es in meiner Arbeitsumgebung optimal passt. Mein erster Schritt war also das Layout für eine hohe Auflösung wie z.B. 1920 * 1080 Pixel anzulegen. Danach probierte ich immer kleiner werdende Auflösungen und sobald mir etwas nicht gefiel, passte ich es an. Das habe ich so lange gemacht bis ich eine weitere Verkleinerung nicht mehr für sinnvoll hielt, sprich bei weniger als 300 px Breite erzwinge ich einen Scrollbalken, Beispiel:

@media only screen and (max-width: 429px) {
#mainwrapper{
    min-width: 270px;
}
}

Genauer ansehen könnt ihr euch das CSS layout.css im unteren Teil von der Seite miradlo.com. Testen lassen sich Seiten:

• screenfly dort werden diverse Auflösungen je nach Gerät angezeigt, einfach die URL eingeben, z.B: miradlo.com
• Responsive Webdesign Testing zeigt direkt mehrere Auflösungen auf einen Blick, auch hier einfach die URL eingeben, z.B: miradlo.com

Responsive Webdesign vs. Apps

Ich halte diese Technik insbesondere für sehr sinnvoll. Damit werden weiterhin dieselben Inhalte auf allen Geräten ausgegeben und trotzdem wird das Design angepasst. Für große Seitenbetreiber, wie wikipedia können auch Apps für iphone, android usw. eingesetzt werden, um mobile Versionen zu nutzen. Bei der Mehrzahl aller Websites ist das jedoch nicht sinnvoll und meist auch finanziell nicht machbar. Plugins wie für WordPress die eine mobile Variante erstellen sind sicher oft besser als nichts, sie zeigen jedoch nicht mehr das Ursprungsdesign der jeweiligen Seite. Responsive Webdesign ist eine gute Lösung für viele Seiten und der Aufwand ist nicht so viel höher wie beim Erstellen einer App.

Je nach Design lässt sich das auch im Nachhinein noch relativ einfach anpassen, das klappt jedoch sicher nicht immer. Das gesamte Design muss mit flexiblen Breiten zurecht kommen. Die einzelnen div-Container müssen problemlos verschiebbar sein, sonst lohnt sich das nicht. Einige weitere Links zu diesem Thema:

• Responsive Webdesign – Verschiedene Devices simulieren und testen
• Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks
• Responsive Webdesign mit CSS3 Media Queries: So funktioniert’s

via Konni, der das auch kennt…

Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen.

• Flexible Layouts haben ihre Vorzüge, trotz Seitenzoom der Browser
• Ein weiterer Artikel meint es wäre gut nicht über die flexiblen Layouts zu streiten, sondern sie schlicht als Variante zu sehen.
• In obigem Artikel wird auf mehrere Videos zu YAML verlinkt, die gibt es auch als eine Präsentation, direkt bei Galileo

onli kommentierte daraufhin recht ausführlich. Beim Schreiben meiner Antwort fiel mir auf, dass es ein bisschen lang wird, deshalb jetzt als eigenen Artikel. onli schrieb:

“Ich bin über die Diskussionen über flexible Layouts immer wieder überrascht. Denn eigentlich führt die Diskussion am Thema vorbei. Das eigentliche Problem dürfte sein, dass CSS in derzeitiger Form ungeeignet ist für das, was ein dynamisches Layout erfordert. Man kann viele Dinge einfach nicht zuverlässig erreichen, die nötig wären: Elementen eine dynamische Größe zuordnen, aber mehreren Elementen immer die gleiche. Nachbarbeziehungen, die über ein float hinausgehen usw usf. Sicher, ich bin kein Profi, aber es scheint mir so, als sei die Ursache der Diskussion dergestalt, dass einige notwendige Layoutanforderungen mit dynamischen Layouts nicht oder nur schwer umsetzbar sind. Die Antwort sind dann aber nicht pixelgenaue Layouts, sondern Verbesserungen am Handwerkszeug.

Ich werde mir bei Gelegenheit die verlinkten Videos anschauen, vielleicht beinhalten diese ja Konzepte, die meine obige Argumentation ad absurdum führt, weil damit dann alles so umsetzbar ist wie ich es mir vorstelle. “

Ich habe ja schon mal recht ausführlich über flexible Layouts geschrieben, ein paar Bildbeispiele wie sich flexible Layouts auswirken habe ich anlässlich eines Wechsels des Hintergrunds mal beschrieben.

Meines Erachtens sind flexible Layouts nicht schwierig, wenn man von vorne herein flexibel denkt. Das Hauptproblem ist, dass ein Design auf Papier in fester Größe entworfen wird und dann eben häufig auch nicht mehr so einfach flexibel umgesetzt werden kann.

Design bedeutet häufig, es ist ein Entwurf eines Designers, der gestern einen Flyer in A5 entwarf, morgen ein Plakat in A0 und deshalb heute beim Entwurf einer Webseite in 1024*768 denkt. Solche Entwürfe können sehr schwierig umzusetzen sein und sind oft auch nicht flexibel lösbar.

Für mich ist jedoch die Grundlage des Webs, dass ich eben nicht weiß, welches System, welche Auflösung mein Nutzer gerade verwendet, dass ich nicht weiß, ob er Schriftgrößen ändert und und und.

Ich versuche deshalb Layouts von vorne herein so zu erstellen, dass es nicht wichtig ist,welche Voraussetzungen gegeben sind. Leider ist die Tendenz jedoch nach wie vor, das Optimieren auf eine Auflösung und nicht das Erstellen eines anpassungsfähigen Layouts.

Yaml von Dirk Jesse auf das sich die Videos beziehen ist ein Framework, was den Webautoren schon vieles abnimmt. Enthalten sind in Yaml bereits Definitionen um Browserfehler zu umgehen. Es gibt z.B. auch WordPress-Yaml-Themes, die sich recht einfach anpassen lassen, weil vieles eben bereits berücksichtigt wurde. Der Nachteil ist offensichtlich, ein Framework muss alles berücksichtigen und ist deshalb schon ein dickeres Ding.

Ich selbst nutze natürlich auch Vorlagen und fange nicht bei jedem Layout bei 0 an, aber ich nutze kein Framework. Für meine eigen Layouts kenne ich mittlerweile den größten Teil der möglichen Probleme und ihre Lösung.

Im Gegensatz zu fast allen Designern entwerfe ich Layouts nicht auf Papier, auch nicht in einem Bildbearbeitungsprogramm, sondern wirklich live auf einer Testseite. Ich sehe so viel schneller, welche Idee problematisch werden könnte und überlege mir Alternativen, noch bevor das erste Layout fertig ist.

Ist CSS ungeeignet für Layouts?

onli überlegt, ob CSS nicht einfach ungeeignet ist und sich das Handwerkszeug verbessern müsste. Nein, das glaube ich nicht. Das Hauptproblem bei CSS-Layouts ohne Tabellen und in modernem Design ist nicht das CSS. Die Realisierung für standardkonforme Browser wie Firefox, Opera, Safari usw. die ist nicht so schwierig. Es kommt selten vor, dass es spezielle Anpassungen braucht, um ein Layout für diese Browser wie gewünscht zu realisieren. Das eigentliche Problem sind die alten Versionen der Internet Explorer und leider in manchen Fällen sogar der aktuelle IE8.

Manches ist irgendwann bekannt und lässt sich recht schnell auch für die IEs anpassen. Aber immer mal wieder passiert es, dass wegen eines IE-Fehlers Stunden drauf gehen, um eine Lösung zu finden. Microsoft möchte, dass jeder ihrer Browser auch die Seiten korrekt darstellt, die für eine fehlerhafte Vorgängerversion optimiert wurden. Dabei entstehen immer wieder Probleme und noch hat jede IE-Version teils haarsträubende Fehler. Das kommt zwar auch bei anderen Browsern mal vor, nur falls Firefox 2.14 etwas falsch darstellt, dann ist es das heute beim Stand von Firefox 3 nicht so schlimm, denn nur wenige nutzen aktuell diese eine Version, wenn ein Layout trotzdem lesbar bleibt, käme kaum ein Webautor auf die Idee, wegen dieser einen Version etwas zu ändern. Beim IE hält eine Version “ewig” der immer noch stark verbreitete IE6 ist aus dem Jahr 2001, da gab es noch gar keinen Firefox…

Was ist die Lösung für dynamische Layouts?

Die eine ultimative Lösung gibt es nicht. Denn ein modernes Layout mit dem Anspruch das zu zeigen, was heute Stand der Technik ist, das passt zu modernen Browsern. Der IE6 kommt aus einer Zeit als ganz andere Designs entworfen wurden, für die Layouts seiner Zeit war er auch kein Traum, aber noch akzeptabel. Für heutige Layouts ist er einfach ungeeignet und das führt dazu, dass es sehr aufwändig wird, wenn ein besonderes, aktuelles Design umgesetzt werden soll.

Meine Layouts, die nicht darauf aufbauen, dass sie pixelgenaue Linienführungen haben, lassen sich schon deshalb viel einfacher umsetzen. Außerdem habe ich nicht den Anspruch, dass ein Layout in jedem Browser absolut identisch aussieht. Für mich genügt es, wenn alles lesbar ist und die Optik nicht völlig verschoben. Wenn der IE6 das “miradlo bloggt”-Bildle nicht genauso darstellt wie alle anderen, dann ist mir das egal, es ist nicht so hübsch, aber auch nicht kaputt, ich höre an dieser Stelle auf und bastele dann nicht noch Stunden weiter, um mit Tricks und Schlichen eine identische Optik zu bekommen.

Wozu auch? Denn mein sich anpassendes Layout sieht je nach Auflösung sowieso immer ein bisschen anders aus. Für mich ist es wichtig, dass Besucher in etwa ein Design bekommen, was aktuell ist, dass alles lesbar und bedienbar ist und möglichst wenig Scrollbalken hat. Dieses Ziel lässt sich mit CSS und flexiblen Layouts recht gut erreichen.

Manches lässt sich nicht dynamisch und zuverlässig erreichen?

onli fragt sich, ob nicht einfach was fehlt um zuverlässig z.B. Elementen eine dynamische Größe zuzuordnen, aber mehreren Elementen dabei immer die gleiche.

Auch das fällt für mich unter Browserprobleme. Es ist mit standardkonformen Browsern durchaus möglich solche Anforderungen zu erfüllen. Die Grenze dessen ist vor allem der IE6. Für mich kein Grund das nicht zu nutzen, denn ich mag die speziellen Stylesheets die per Conditional Comments z.B. nur genau dem IE6 sagen, was er zu tun hat. Damit bekommt der IE6 dann eben etwas was nicht so flexibel ist, aber für einen Browser der so alt ist, kann ich damit leben.

Falsch finde ich etwas nicht zu nutzen, nur weil der IE6 es nicht kann. Ebenso überflüssig finde ich es Tage in eine Lösung für den IE6 zu investieren, nur um irgendwas auch da noch hinzubekommen. Allerdings halte ich auch nichts davon, “das Kind mit dem Bad auszuschütten” und dem IE6 einfach gar kein Layout und Warnhinweise zu geben. Die Nutzer eines IE6 nehmen ihn entweder, weil er ihnen am Arbeitsplatz vorgeschrieben wird oder weil sie nicht in der Lage oder bereit sind einen anderen Browser zu installieren.

Insgesamt meine ich geht es um genau zwei Punkte:

• Das Web ist nicht aus Papier, ein Layout sollte daher nicht für “welche Auflösung auch immer” optimiert werden
• Eine Webseite muss nicht in jeder Umgebung identisch aussehen

Berücksichtigt man das, dann gibt es kein Problem mit flexiblen Layouts, so einfach ist das.

• Ethischer Hacker als Zertifikat davon berichtet Dirk, mir geht es wie ihm, ich denke es wäre ein Schritt in die Richtung, den teils noch immer schlechten Beigeschmack des Begriffs Hacker zu vermeiden.
• Deutscher Multimedia Award Jens schaute den Gewinner unter die Haube, außer Flash gab’s wenig und was es gab hat leider nichts mit semantischem Code zu tun.
  Ebenfalls leicht kritisch äußert sich Gerrit: Killt die Killerwebsites
• Wer nach doch noch durchgeführtem automatischen Update auf WP 2.8 weiter die Meldung bekommt, dass es eine neue Version gäbe, kann mit einer kleiner Änderung das für die Zukunft verhindern.
• Weil es hier ja wunderbar passt: Selbst den ganz einfach zu ändernden Trackback-Fehler, den manche haben, haben die Entwickler in der aktuellen Version nicht geändert. Begründung: Das Problem ist ja der Transportweg, der hat mit uns nichts zu tun. Aha!
• Firefox entthront Microsofts Internet Explorer und übernimmt die Führung. Manche zweifeln daran, dass die Zahlen korrekt sind, ich finde das Zeichen an sich schon positiv, selbst wenn absolut noch der IE führen sollte. via pixelgraphix Auch Spiegel online berichtet über den Fortschritt des Firefox via macx
• Die Seite müsst ihr euch anschauen: mein blog.tk Selbst in den Neunzigern gabs kaum was, was da rankommt… via webdesignlounge
  
• Schade, dass selbst ein alter Hase im Web, Jeffrey Zeldman, der vieles mit voran gebracht hat, bei seiner eigenen Seite nach dem Relaunch nicht auf Webstandards achtete… Artikel mit ausführlicher Kritik bei sprungmarker
• Flexible Layouts haben ihre Vorzüge, trotz Seitenzoom der Browser meint zumindest Dirk von highresolution.info und verlinkt auf weitere Artikel dazu. Da ich das ebenso sehe, freue ich mich über jeden Bericht, der das noch einmal aufgreift.
• Stefan von Webkompetenz überlegt, ob es nicht sinnvoll wäre, nicht über die flexiblen Layouts zu streiten, sondern sie schlicht als Variante zu sehen. Er verlinkt dabei Videos die Dirks flexible YAML-Layouts erklären.

• Soll ich die Kategorien weiter pflegen?
• Wieso ist Navigation und Funktion miteinander in der gleichen Liste?
• Welches Layout sollte ich nun nutzen?
• Gefällt das alte Design den Kunden mehr als das Neue?

Solche Gedanken hat man ja immer, wenn man eine Webseite neu gestaltet.
Und deshalb bin ich auf folgende Idee gekommen:

Lass doch das Design vom Kunden auswählen

In bestimmten Rahmen kann man sich erlauben zwei- oder drei Designs anzubieten.
Wenn man auf die Seite kommt, erscheint das aktuelle Design.
Wenn man dann ein anderes Design, mit z.B. mehr Funkionalität, haben will, kann man dies auswählen.
Das Design wird gewechselt und der Kunde hat andere Möglichkeiten als zuvor.

Ja aber, dann muss man ja Kundendaten speichern!

Wenn man will, dass der Kunde beim nächsten Mal das gleiche Design vorfindet, muss man mindestens einen Cookie auf der Kundenmaschine abspeichern.
Oder noch komplizierter: Der Kunde muss sich am System anmelden.
Das wäre bei einem normalen Blog oder einer normalen Webseite wirklich ein Overkill.
Ich will einfach nur die Wahlmöglichkeit bereitstellen. Wenn ein Kunde dann das Design wechseln will, soll er hierzu eine Möglichkeit erhalten.
Falls der Kunde Cookies zulässt, kann man immer noch über eine permanente Umstellung nachdenken.

Ist das nicht eine halbherzige Idee?

Ich denke nicht. Es lässt dem Kunden die Freiheit, zwischen verschiedenen Designs auszuwählen.
Vielleicht ist der Kunde heute positiv eingestellt und will eine schöne, leuchtende Darstellung?
Vielleicht will er heute nur Text, da er schnell was suchen muss?
Wenn man sich den Mehraufwand leisten kann, dann wäre es vermutlich eine gute Idee mehr als ein Design zur Verfügung zu haben.

• Briefmarken gesucht? Oder schreibt ihr nur noch elektronisch? Selbst dann gibt s beim tuxlog.de einen Tipp: Briefmarken mit Gimp selbst gestalten. Eine schöne bebilderte Schritt-für-Schritt-Anleitung, entweder mit Hilfe eines Plugins oder mit einem Tipp, wie es auch ohne Plugin geht.
• Layer- und Schatteneffekte per Plugin im Gimp nutzen, mit Installationsanleitung und ausführlicher Beschreibung.
• Wer noch ein bisschen mehr übers Zeichnen lernen wissen möchte, kann sich die im akademie-Blog empfohlene Serie auf akademie.de mal ansehen. Klasse gemachte Animation dazu bereits im Blogbeitrag, schaut selbst…
• Einfach weil die Meldung schon klasse klingt: Hacker im Beirat des US-Heimatschutzministeriums
• WordPress 2.8 kam ja am Donnerstag raus, mittags dann bereits auch in deutscher Version. Wer noch nicht aktualisiert hat und Bedenken wegen genutzter Plugins hat, sollte sich mal die Liste getester Plugins bei WordPress ansehen. Vielleicht kommt es mir nur so vor, aber ich finde es gibt mehr Problemmeldungen bei diesem Update als auch schon. Klar, im Forum gibts auch Hilfe- und Fehleranfragen dazu, die nichts mit WordPress selbst zu tun haben, aber sowas wie 32 MB Memory Limit reichen nicht für WordPress ohne Plugins, na denn…
• Ansonsten war es ja die erste (K)Ubuntu-Woche bei mir/uns. Dirk und Roman berichteten, bei Roman gabs noch den Link zu Wie ich zu Ubuntu kam und warum ich es so mag
• Gefühlt finde ich Ubuntu beim Hochfahren schon nicht so langsam, aber das Ziel ist es in unter zehn Sekunden zu schaffen.
• Wo ist das mobile Webdesign? fragt sich Björn vom Webzeugkoffer, interessant auch ein sehr ausführlicher Kommentar hierzu. Noch nutzen nicht so viele auch mobile Geräte, aber die Nutzerzahlen steigen.
• LinuxAdvanced nicht nur für die Schule Artikel und Links zu EDU-Systemen mit Linux bei RTFM!
• Jeffrey Zeldman geht wieder zurück beim Webdesign und nutzt für die eigene Seite ein Retrodesign.

• Mal wieder ein nettes, kleines Analysetool, um zu sehen, welches System nutzt eine Seite, welche Services werden angeboten, welche Eigenschaften hat die Seite usw. Sympathisch finde ich, dass Webmastercoffee.com damit wirbt: ” Kostenlose Homepage-Analyse. Für den Webmaster. Für die Webmistress.” Wer die Webmistress explizit erwähnt bekommt von mir einen Pluspunkt. via Frank
• Ich habe mich ja auch schon über Sinn und Unsinn von fixen, fluiden und elastischen Layouts ausgelassen. Allerdings nicht so ausführlich und gut bebildert, wie das Smashing-Magazine diese Woche (englischer Artikel) Inzwischen lohnt es sich bei der Entscheidung auch immer mehr an mobile Geräte wie das ichphone zu denken…
• Man braucht sie meist nicht täglich, aber immer mal wieder, nur wenige sind topfit, meist liest man mal eben nach, eine tolle Übersicht zu Regulären Ausdrücken gibts im Essential Guide to Regular Expressions vom Smashing Magazine.
• Zur ominösen IE8 Kompatibilitätsliste gibts Erklärungen und Hinweise in Gizas Blog via Flocke und ebenfalls von Jens den Hinweis zu gaaaanz tollen Bugs des neuesten Browsers von Microsoft.
• Zunächst nur als Gerücht gehandelt, nicht von allen geliebt, siehe auch Kommentar von Dennis bei Frank, scheint es jetzt laut t3n doch sicher, dass WordPress und WPMU vereint werden. Aus meiner Sicht die einzig sinnvolle Entscheidung.
• Achso ja, falls uns jemand sucht, wir sind beim Barcamp Dornbirn.
• Falls jemand die Diskussion auf Guggat emol zum Thema Software neu erstellen oder optimieren bezogen auf ein Newssystem mit verfolgen möchte, insbesondere in den Kommentaren (Übrigens in diesem, wie in allen von unseren Blogs kann man Kommentare auch per Mail abonnieren, auch dann wenn man selbst nicht kommentiert hat, den Kommentar-Feed gibts natürlich außerdem…):
  • Wieso will ich das Newssystem nicht als WP-Plugin erstellen?
  • Variante 1 Eigenentwicklung
  • Variante 2 mit WordPress kombinieren
  • Variante 3 als WP-Plugin

• KDE-Buchhaltungsprogramm kann jetzt auch anderes als 19% Umsatzsteuer, für Windows gibts ja unzählige Programme, für Linux ist das nicht ganz so einfach. Deshalb freue ich mich über jedes Programm unter Linux.
• Wer zuweilen mal präsentieren darf, muss, will, sollte sich auf jeden Fall an die 10 Tipps um die nächste Präsentation zu verhauen halten. Mal in umgekehrter Form, jedoch leider noch immer nicht bei vielen wirklich angekommen, sonst gäbe es nicht so viele schlechte Präsentationen…
• Google Chromium jetzt erstmals für Linux und Mac als eigene Version verfügbar. Steckt jedoch noch ziemlich in den Kinderschuhen, siehe Google-WatchBlog.
• Eine nette Übersicht (englisch) der do’s und don’ts im Webdesign auf vier Seiten. Im Großen und Ganzen halten wir uns alle Punkte, wobei vielleicht für manche noch was neues dabei ist. Aus meiner Sicht ist es keine Katastrophe auch mal anders vorzugehen, doch sollte man wissen, was und warum man da tut. via twitter
• Umfangreiche Liste voller Tipps zu gutem Webdesign von webzeugkoffer.
• WordPress-Tipp, wer Kommentare mit einer gewissen Zahl Links moderiert, könnte so nett sein, das den Kommentierenden auch zu sagen, toscho zeigt wie sich das einbinden lässt.
• Ich hatte ja schon vor kurzem über Spickzettel berichtet, dazu passt ein Spickzettel für WordPress-Theme-Autoren, mit dem sich prüfen lässt, ob man an alles gedacht hat, eine handliche DIN-A4-Seite als PDF, prima.
• WordPress-Anpassungen mit benutzerdefinierten Feldern einfach und gut erklärt (englisch) vom Smashing-Magazine.

• Gimp Farbe wählen

Von vielen, die mit Photoshop begonnen haben, kommt die Kritik, Gimp sei unübersichtlich und bestehe aus so vielen Einzelfenstern. Ich meine zumindest unter Linux ist das kein Problem. Ich habe mir meinen Gimp einmal so angepasst, wie er für mich optimal ist und jetzt öffnet er sich jedesmal genau so.

Der Gimp bekommt bei mir eine eigene virtuelle Arbeitsfläche, die Hintergrundfarbe ist so angepasst, wie ich sie für die Bildbearbeitung als angenehm empfinde. Zusätzlich zum Werkzeugfenster brauche ich häufig das Ebenenfenster deshalb ist das ebenfalls immer offen. Immer mal wieder brauche ich auch Schriften und als eigenes Fenster lässt sich ein eingebundener Schriftzug mittels der Pfeiltasten komfortabel in verschiedenen Schriften testen. Suche ich eine Schrift in einer bestimmten Richtung so habe ich auf diesem Weg auch direkt eine gut sichtbare Vorschau.

Ich nutze den Gimp fast für alle Bilder, die ich in Blogbeiträge einbinde, ich mag, wenn sie immer ein vergleichbares Seitenverhältnis haben, ich wähle meist den passenden Ausschnitt von Hand. Insbesondere bei Screenshots bietet sich das an, denn was auf 1920*1200 gut aussieht passt nur selten als Vollbild auf meine meist genutzte Bildgröße 400*300.

Screenshot speichere ich immer als *.png in guter Qualität und bearbeite sie erst anschließend für Beiträge. Immer wieder kommt es vor, dass ich später nochmal etwas anderes möchte, einen anderen Ausschnitt oder ähnliches. Sobald ein Bild als *.jpg vorliegt bedingt jedes weitere Speichern einen Qualitätsverlust.

Bearbeite ich Fotos so erstelle ich zuerst vom Original eine Gimpversion, sprich ich speichere als *.xcf so ist auch Zwischenspeichern ohne Qualitätsverlust möglich. Möchte ich mehrere Zwischenstände behalten, weil ich etwas ausprobiere, dann speichere ich diese einzeln ab. Klappt alles wie erhofft, lösche ich die Zwischenversionen, geht mal was schief, so kann ich ohne größeren Aufwand wieder zurück. Das lohnt sich, wenn ich beispielsweise Personen mittels eines Pfads ausschneide und den Hintergrund weichzeichnen möchte, denn das Ausschneiden Punkt für Punkt kostet ein bisschen Zeit.

Gimp und Farben

Der Gimp ist ein Bildbearbeitungsprogramm, damit eignet er sich vor allem für Fotos und Screenshots. Gimp ist kein Programm um Grafiken für die Druckvorstufe zu erstellen. Druckvorstufe ist die Bezeichnung für die Version, die man bei Visitenkarten, Flyern oder ähnlichem an die Druckerei weiter gibt. Für den Druck ist eine weit höhere Bildqualität nötig, als beispielsweise im Web. Meist erwartet die Druckerei eine Vorlage in CMYK, das kann der Gimp normalerweise gar nicht, weil er dafür nicht erstellt wurde.

Falls man jedoch ein Foto in CMYK für den Druck braucht, so gibts es dafür ein Plugin, siehe Gimp fürs Webdesign einsetzen. Speichert man mit dem Plugin Separate als Separate, dann wird ein Foto in CMYK umgewandelt. Ist der eigene Monitor nicht mittels Farbprofilen und Kallibrierung so eingestellt, wie es die Druckerei erwartet, sollte man vor dem eigentlichen Druck mit der Druckerei klären, ob alles stimmt, denn am Monitor sieht man nicht mehr die späteren Druckfarben.

Möchte man Farben umrechnen, z.B. den im Web üblichen RGB-Wert in der Form #fff als dezimalen Wert, hier dann 255 255 255 für weiß, so sieht man das in der Farbübersicht des Gimp recht einfach. Andere Programme erwarten als Eingabe eines RGB-Wert meist die Version mit 255 255 255, z.B. Scribus das vektorgrafikbasierte Layoutprogramm, doch dazu ein anderes Mal mehr.

• miradlo international

Wir haben inzwischen vier internationale Seiten, die speziell für Kunden, die nicht aus Deutschland kommen erstellt wurden:

• Die spanische Seite gibt es schon recht lang, die habe ich eingerichtet, als ich die ersten Linuxkurse auf Spanisch gab, die Teilnehmer konnten mit unserer deutschen Seite ja gar nichts anfangen.
• Schweizer Kunden haben wir bedingt durch die Grenznähe – rund zwei Kilometer Luftlinie – sowieso immer mal wieder. Deshalb bot es sich an, eine Seite für die Schweizer Kunden einzurichten.
• Anfragen aus Österreich sind bisher eher selten, obwohl Bregenz deutlich schneller zu erreichen ist, als Stuttgart.
• Unsere englischen Seiten entstanden ebenfalls weil es schon Anfragen gab von Kunden, die selbst mit nicht-deutschsprachigen Kollegen zusammenarbeiten.

Bei unserer Unternehmensgröße können wir nicht dieselben Inhalte für alle länderspezifischen Domains zur Verfügung stellen, wie auf deutsch, aber für einen Einblick ist das ja auch nicht nötig. Die Seiten an sich hatten wir teils schon einige Monate fast fertig, aber wir waren uns bei der Optik nicht sicher. Klar, einerseits hätte es auch was, ein sehr individuelles Design für jede Domain zu erstellen. Häufig werden Kunden jedoch von der länderspezifischen Domain doch noch zur Unternehmensseite wechseln und deshalb war uns der Wiedererkennungswert wichtig.

miradlo.de miradlo.com miradlo…

Das Design der länderspezifischen Seiten ist jetzt nahezu identisch mit dem Design unseres Portals auf www.miradlo.de. Dort schreiben wir eher praxisnah, es gibt dort einen Demoshop, es gibt Berichte wie miradlo entstand usw. Eben all das, was nicht so recht auf eine übliche Unternehmensseite passt. Auf miradlo.de weisen wir auch auf unsere weiteren Domains hin, die Demoversion der Terminverwaltung (die produktiv laufende Variante gibt es auf mietervereine.eu), den Styleswitcher usw.

Nach längerer Zeit haben wir uns jetzt entschieden das Design in etwa auf allen länderspezifischen Domains zu belassen, und nur mit angepassten Icons und Favicons die optische Unterscheidung zu treffen.

Unterschiedlich gewählt haben wir die Zoomstufen der Anfahrtspläne der Domains, so dass der Zusammenhang zwischen dem Herkunftsland der Besucher möglichst häufig noch deutlich wird.

Warum mit vielen Domains und nicht nur mit einer?

Es gibt mehrere Gründe, weshalb wir mit vielen Domains arbeiten:

• bei Eröffnung habe ich mal recherchiert, wie es mit einem Namensschutz aussehen würde, der war jedoch eher kompliziert und nur mit recht viel Geld zu bekommen
  • deshalb gab es von Anfang zwei Domains die miradlo.de war aktiv, die miradlo.com habe ich reserviert
• nach und nach kam noch die ein oder andere hinzu, teils zunächst, weil im Komplettpaket auch mehrere Domains enthalten waren
• zu Beginn der .eu-Domains kam auch diese hinzu
• die miradlo.ch und die miradlo.at habe ich ebenfalls reserviert, um auch den Namen zu sichern
• anfangs hatten wir ja im Laden auch noch Kunstgewerbeartikel und begannen eher im Hintergrund mit Informatik
  • deshalb bot sich die klare Trennung der Bereiche an die miradlo.de bekam Kunstgewerbe da das Ladenschild auf .de lautet
  • die ersten Informationen zur Informatik und zum Webdesign kamen dann auf die .com
• die miradlo.info enthielt mal einige Zeit eine Kundendomain, als ein Umzug nicht sofort realisiert werden konnte, diese dadurch bereits bekannte Domain sollte anschließend nicht nur mit dem Hinweis verstauben, dass da mal was anderes war
• mit dieser Domain begann ich, als ich die ersten Versionen des Mitarbeiterbereichs einrichtete
  • später kam das Blog hinzu erstmal nur zu Testzwecken, Stück für Stück dann immer aktiver

Zwischendurch gab es schon immer mal Überlegungen alles auf einer Domain zusammenzufassen und alle anderen nur umzuleiten, doch für manche Inhalte war die Aufteilung eben auch praktisch. Inzwischen ist es für uns normal, dass jeder Teilbereich seine eigene Domain bekommt.

• Passend zu dem, was ich schon öfter gefragt wurde von Menschen, die nicht so oft im Netz sind gibt es bei akademie.de einen Artikel zum Reputationsmanagement. Was kann man wie tun, um auch im Netz den Ruf zu haben, den man haben möchte.
• Welch grauenerregend schlechte Formulare es noch im Web gibt, davon berichtet Trixy mit Beispielen und Bildern.
• Bei der Web 2.0 Konferenz in München diese Woche ging um Firmenblogs, angesprochen werden in dem Artikel von interworld.de das Saftblog und das Daimlerblog, die ich ja auch bei meinen Beispielen zu Unternehmensblogs genannt hatte.
• Dieter steigt mit in die aktuell laufende CSS-Framework-Diskussion ein: Pro und Contra YAML mit vielen Links zu den diversen Beiträgen für und gegen solche Frameworks.
• Ergänzend dazu schreibt auch Jens Meiert über CSS-Frameworks.
• Die erste Ausgabe des – auf Papier gedruckten – Webstandards-Magazins ist im Handel erhältlich; abonnieren kann man es auf der Website. Mein erster Eindruck: Einiges kannte ich schon, zumindest so in etwa in dieser Form, der ein oder andere Artikel ist jedoch lesenswert und auch für mich neu. Wäre das Pflichtlektüre für alle Webautoren, Webdesiner usw. dann gäbe es weiter weniger schlecht gemachte Seiten…

• Handzettel | Flyer miradlo

Den ein oder anderen derartigen Satz erwarten Kunden ja auf den Standard-Unternehmensseiten. Mit den meisten dieser Sätze habe ich Mühe. Ich will nicht bei allem noch einen tollen Spruch hinzufügen, der identisch klingt, wie auf allen anderen Seiten.

Mir fällt es schon schwer dort – anders als hier – brave “Sie-Texte” zu schreiben. Wenn ich dann noch lauter wundervolle Buzzwords nehmen muss, bin ich überfordert.

Trotzdem haben auch wir eine Unternehmensseite, die in diesem Stil aufgebaut ist, weil die meisten Kunden schon schwer genug daran kauen und Befürchtungen haben, was sie jetzt alles tun müssen, wenn sie etwas anderes bei ihrer Homepage haben wollen. Noch schwerer ist es für Erstkunden, die bisher noch keinen Webauftritt hatten. Deshalb ist unsere miradlo.com so aufgebaut, dass sie vor allem Laien verstehen.

Auch im Umgang mit Menschen geht es mir ähnlich, ich mag nicht mit Fachbegriffen um mich werfen, die z.B. Kunden nicht verstehen. Ich habe eine Vorliebe für alles was einfach und verständlich ist. Statt zu erzählen:

Wir realisieren Ihre Website interaktiv, validierend, weboptimiert nach den Kriterien des Web 2.0, wir bedenken SEO und layouten tabellenfrei in XHTML strict, State of the art ist ja ein CMS mit dem Sie Ihre News selbst online stellen können…

Setze ich mich mit Kunden lieber direkt an den Rechner

• zeige was ich vorschlagen würde
• frage anhand von Beispielen, was sich die Kunden vorstellen
• erkläre was ein Kontaktformular ist und wozu es gut ist,
• erzähle, dass es die Möglichkeit gibt, z.B. die Öffnungszeiten selbst anzupassen
• sage, dass wir darauf achten, dass die Seiten auch gefunden werden, dass wir jedoch keine Platzierungen versprechen können
• versichere dass wir uns um die gängigen technischen Punkte kümmern
• ebenso achten wir darauf, dass keine Regeln verletzt werden, wie
  • Bildrechte oder
  • fehlendes Impressum

Handzettel und Werbematerial

Wir werben nur sehr eingeschränkt außerhalb des Webs, weil alle Versuche zeigten, dass nur ganz selten jemand im Telefonbuch oder aufgrund einer Anzeige zu uns kommt. Die meisten kommen durch Mund-zu-Mund-Propaganda, die anderen über Suchmaschinen, manche übers Impressum unserer Kundenseiten.

Als wir über den Flyer verhandelten – Handzettel ist ja eher unmodern – diskutierten wir zu fünft relativ lange über den Teil, der uns beschreibt. Für mich passten all die tollen Sätze mit Begriffen wie “innovatives, Superunternehmen” nicht. Ich wollte etwas hinter dem ich stehen kann. Nach vielen verworfenen Texten und mehreren Gegenstimmen es in unserer Sprache zu beschreiben, kam am Ende doch Folgendes dabei heraus:

Die Idee war mehrfach verworfen worden, weil ein Programm viel zu viel Text braucht, weil es dem “verständlich für Laien” widerspricht. Weil doch alle anderen was anderes schreiben…
Manchmal ist es gut die Chefin zu sein. Ich bestand darauf es wenigstens mal zu entwerfen und mal in die Vorlage einzubauen.

Am Ende gab es so dann doch eine Mehrheit für diese Form der Selbstbeschreibung. Meine Argumente waren:

• eigentlich könnte man den Text beim “Wir über uns” auf einem Handzettel weglassen, denn Kunden kennen das Blabla und lesen es sowieso nicht
• inhaltlich enthält diese Minifunktion genau das worauf wir Wert legen:
  • optisch ansprechend aber nicht hypermodern mit allem Firlefanz
  • stabil, sprich notfalls soll das Zeug auf “einem Stück Holz auch noch laufen”, falls es da einen Browser gibt
  • uns sind Anforderungen und ihre Umsetzung wichtig, bei mir kommt das schon vom Studienschwerpunkt des Requirements Engineering (Anforderungsanalyse)
  • wir, in erster Linie Roland und ich, kommen vom zweiten Bildungsweg zur Informatik und haben daher bereits einige andere Branchen schon vorher kennengelernt
• die Begriffe dieser kleinen Funktion kann man auch verstehen, wenn man nicht versteht, was ein Computerprogramm ist

Es kommt nicht oft vor, dass es Rückmeldungen zu dem gibt, was wir so veröffentlichen, seien es Visitenkarten, Anzeigen, Flyer oder unsere Webseiten. Ausnahme ist natürlich das Blog und dieses Miniprogramm im Flyer, zu dem gab es schon mehrfach positive Kommentare, gerade auch von Laien.

• miradlo Webdesign und Informatikdienstleistungen Konstanz

Weisst du, wer bei euch im Unternehmen für den Arbeitsschutz verantwortlich ist?

Ja, bei uns im Unternehmen bin ich verantwortlich, da miradlo Informatikdienstleistungen mein Unternehmen ist.

Hat dein Unternehmen eine Fachkraft für Arbeitssicherheit (FASi) und hat diese Person auch weitere Aufgaben?

Nein, miradlo hatte bisher nie mehr als fünf Mitarbeiter und davon auch nicht alle in Vollzeit. Daher gibt es keine Fachkraft speziell für dieses Thema, wie das in großen Unternehmen der Fall ist.

Fühlst du Dich in deinem Unternehmen gut betreut?

Tja, da ich entscheide, was ich für wichtig halte, fühle ich mich auch gut betreut.

Was wolltest du in Bezug auf Sicherheit und Gesundheit im Unternehmen schon immer mal wissen?

Wann immer ich etwas wissen wollte, dann habe ich mich darüber auch informiert.

miradlo und Arbeitsschutz

• miradlo Räume in Richtung Balkon und Garten

Ein kleines Unternehmen, in dem Software erstellt wird – überwiegend Webapplikationen und Webseiten – muss über manche Arbeitsschutzthemen gar nicht erst nachdenken. Wir arbeiten nicht mit irgendwelchen Maschinen, die leicht zu Unfällen führen können. Schutzkleidung, Schutzbrille oder gar Atemmasken brauchen wir nicht.

Informationen

Wer neu bei miradlo anfängt und sei es auch nur für ein ein-wöchiges Praktikum bekommt Zugang zum Mitarbeiterbereich und wird darauf hingewiesen sich auch die Seite zum Thema Arbeitsschutz durchzulesen. Dort stehen die Notfall-Telefonnummern, es wird beschrieben wo man Feuerlöscher und Verbandskasten findet, die verschiedenen Möglichkeiten die Räume zu verlassen werden erwähnt.

Sicherheit in den Räumen

Beim Renovieren vor Eröffnung wies die Architektin auf einige Punkte hin, die Höhe der Mauer, die die Treppe in den unteren Stock begrenzt beispielsweise, die musste aus Sicherheitsgründen höher werden, als ich ursprünglich wollte.

Pausen und Bildschirmarbeitsplatz

Alle Mitarbeiter werden darauf hingewiesen sich ihren Bildschirmarbeitsplatz auf ihre Bedürfnisse anzupassen, sei es die Sitzhöhe oder die Höhe des Monitors bezogen auf die Körpergröße.

miradlo hat einen Balkon, den wir auch für Besprechungen häufig nutzen. Selbst in der kühlen Jahreszeit finden immer mal wieder kurze Gespräche trotzdem draußen statt. Im unteren Stock gibt es die sanitären Anlagen, die Spüle und die Kaffee- und Getränkeecke. Dadurch müssen sich alle zwangsläufig immer mal wieder von ihrem Arbeitsplatz entfernen.

Unsere Räume liegen einer Ladenkette, wir haben eher eine Ladenatmosphäre als ein Büro bedingt durch die Lage und das Schaufenster. Im Alltag kommt daher auch immer mal wieder jemand rein, seien es Besucher, der Briefträger oder jemand der fragt, ob wir auch Rechner reparieren.

Raumklima

Die Vorderseite unserer Räume liegt nordöstlich, oberhalb des Schaufensters gibt es noch ein Vordach. In Richtung Süden liegt der überdachte Balkon innerhalb eines Gartens mit großen Bäumen. Sommerliche Hitze ist daher nur sehr selten ein Problem. Da wir alle mit Laptops arbeiten, die abends in den Tresor eingeschlossen werden, können sowohl der Balkon wie auch das Untergeschoss zum Arbeiten genutzt werden.

Belüftung ist bei uns ebenfalls nichts, woran explizit gedacht werden muss, durch die Ladentür auf der einen und die Balkontür auf der anderen Seite, wird automatisch immer wieder gelüftet. Unsere Räume sind darüberhinaus rund 2,90 Meter hoch für das Raumklima ist diese Höhe sehr angenehm.