Responsive Webdesign ::: von mobil bis Riesenmonitor
3. Oktober 2011 ute
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
Ähnliche Beiträge
Kategorie css, web | 1 Kommentar »
Schriften und Schriftbetrachter für Ubuntu
27. September 2011 ute
Ein ganzer Beitrag im inkscape-Forum listet Links zu verschiedenen Seiten auf, die freie Schriften zum Download anbieten: inkscape-forum.de Mir gefällt www.dafont.com besonders gut. Man kann sich die Schriften in gut sortierter Form mit einem selbst gewählten Text betrachten. Mir ist wichtig, dass Schriften möglichst auch mit deutschen Umlauten und “ß” zurecht kommen. Ich nehme dafür Wörter die Umlaute und “ß” enthalten. Wenn ich für einen bestimmten Begriff eine Schrift suche, ist es ebenfalls einfacher, wenn ich genau diesen Begriff als Suchbegriff eingeben kann.
Je nach Verwendungszweck sollte man sich die Lizenz genauer ansehen. Für den privaten Gebrauch gab es bei www.dafont.com keine Einschränkung, für kommerzielle Zwecke sieht es teils anders aus. Manch eine Lizenz unterscheidet zwischen der Nutzung im Web und für andere Zwecke.
Schriftbetrachter
Ich habe bei den als Paket installierten Schriften etwas aufgeräumt und die entfernt, die ich beispielsweise wegen fehlender Umlaute nicht nutze. Laut Dolphin mit der Eingabe fonts:/ habe ich trotzdem 800 Schriften installiert. Weder beim Nutzen in Gimp, noch in inkscape macht es Spaß eine Schrift zu beurteilen, ob sie geeignet ist. Wesentlich besser klappt das mit dem Schriftbetrachter Waterfall, (siehe auch Schriftenmanager auf ubuntuusers.de). Um für einen bestimmten Text Schriften durchzublättern schätze ich jedoch weiterhin Gimp:
- Text eingeben
- Schriftenmanager öffnen
- mit den Pfeiltasten navigieren
Ähnliche Beiträge
Kategorie Linux, tipps | 0 Kommentare »
Fehlermeldungen: Bitte die Breite eingeben! ;)
23. September 2011 ute
Amüsante Bugs
Fehlermeldungen insbesondere deutlich erklärende Fehlermeldungen sind sinnvoll und nötig. Die Meldung sollte so eindeutig wie möglich sein, damit Nutzer auch wissen, was genau sie tun müssen und an welcher Stelle.
Das ist das gewünschte Endergebnis. In der Entwicklungsphase eines Projekts klappt das nicht immer ganz perfekt. Wir nutzen ein auf Cake-PHP basierendes System, welches wir selbst entwickelt haben: miradlokit. Grundlage der Texte des System ist immer Englisch, das hat Vorteile, denn häufig ergeben sich daraus zunächst weniger Probleme.
Die Übersetzungen ins Deutsche werden nicht pro Meldung innerhalb des Quellcodes gemacht, sondern mittels Sprachdateien an zentraler Stelle. Das ist grundsätzlich sinnvoll. Während des Übersetzens fehlt jedoch zuweilen der Zusammenhang und es entstehen Fehlermeldungen, die jenseits aller Logik liegen:
Im Feld Vorname oder Spitzname (schon das passte an dieser Stelle nicht, da es in dieser Webapplikation keinen Spitznamen geben soll) wurde nichts eingegeben. Gut, es erscheint die Fehlermeldung, die sollte jetzt einen nutzerfreundlichen und verständlichen Hinweis auf den fehlenden Vornamen geben. Nun, sollte… 
Bitte die Breite eingeben!
Wir haben laut gelacht, denn diese Meldung hat keiner von uns erwartet. Manche Fehler haben also durchaus Unterhaltungswert. 
Ähnliche Beiträge
Kategorie krimskrams | 0 Kommentare »
Schriften mit @font-face
20. September 2011 ute
So ganz allmählich lassen sich Schriftarten sinnvoll einsetzen, die nicht auf dem Rechner des jeweiligen Nutzers installiert sind. Es gibt viele freie Schriften, die dafür genutzt werden können, jedoch für deutschsprachige Blogs eignen sich nicht alle.
uteles Blog als erste Testecke, siehe Screenshot.
Um einen Überblick über die Schriften zu haben und weil ich eine eigene Auswahl aus Schriften mit Umlauten wollte, habe ich mir eine eigene Seite für Schriften angelegt. Vorsicht, es dauert einen Moment bis die Seite vollständig geladen ist (eher nicht mobil geeignet): http://www.miradlo.info/schriften/
Es gibt Browser – insbesondere manche ältere Browser – die die Schriften nicht darstellen können. Für die Schriftenseite ist das natürlich ungeschickt, aber für den Alltagseinsatz ist es kein Problem, denn mit Angabe von Alternativschriften wird alles korrekt angezeigt, nur eben nicht so hübsch.
@font-face
Die Einbindung der Schriften, die dann vom jeweilien Browser runtergeladen und angezeigt werden, mache ich mit @font-face im CSS. Im Internet Explorer sollte es wohl bereits ab IE 6 klappen, zumindest bei meinen Tests. Aktuelle Browserversionen von Opera, Safari, Chrome usw. kommen gut damit zurecht, der Firefox kann es seit Version 3.5. Der Konqueror mag bei mir nicht, obwohl ich die Einbindung so mache wie auch empfohlen. Unterm Strich sind die Schriften für mich ein zusätzlicher Hingucker, schön wenn es angezeigt wird, aber wenn es halt mal nicht klappt ist es auch nicht schlimm.
Ladezeit für Schriften
Auf einem üblichen Rechner mit DSL fällt es kaum auf und durch Angabe etwaige bereits vorhandener Systemschriften muss auch nicht in jedem Fall die Schrift geholt werden. Der Browser speichert die Schriften, damit ist es schlimmstenfalls beim ersten Aufruf nötig die Schriften zu holen. Für den üblichen Webeinsatz spricht also nichts dagegen es zu nutzen.
Mobile Geräte
uteles Blog brauchte im explizit abgewählten mobile-Theme auf dem iphone im lokalen Netz rund 3 Sekunden, mit ein bissel weniger starkem Zugang ist das dann keine so gute Idee. Sprich beim Einsatz im Alltag wäre es sinnvoll mobile Themes anzubieten, die ohne die speziellen Schriften auskommen.
Freie Schriften und Umlaute
font-squirrel bietet eine große Auswahl und eine Schrift kann mit einem Kit runtergeladen werden, mit dem die Einbindung dann recht einfach klappt, siehe auch: @font-face-Tipp
Leider ist in der Übersicht nicht erkennbar, ob eine Schrift mit Umlauten zurecht kommt, das lässt sich mit dem Testdings probieren, da wird angezeigt, was man eingibt. Es gab einige Schriften, die mir gut gefallen haben, die jedoch deshalb nicht in Frage kommen, weil sie keine Umlaute darstellen. Die ein oder andere, die ich jetzt mit eingebunden habe, kommt mit dem “ß” nicht zurecht. Je nach Einsatzzweck, kann das für Überschriften jedoch trotzdem noch akzeptabel sein. Keine Umlaute sind dagegen ein klares no-go.
Effekte und Probleme
Einige Schriften sind sehr verspielt und damit schwer lesbar, aber für spezielle Überschrifteneffekte oder andere spezielle Ansichten ist das ja durchaus mal akzeptabel. Die ein oder andere Schrift bietet nicht alle Font-Formatierungen an, die CSS an sich kennt. Teils übernimmt dann der Browser die Darstellung, das klappt nicht überall so hübsch, wie bei Schriften, die selbst einen fetten oder kursiven Stil anbieten.
Alles wird gut
Noch ist nicht alles gut, ein Browser ist nach wie vor keine Textverarbeitung mit allen Möglichkeiten von Schriften. Aber aus meiner Sicht ist es ein großer Schritt weg von Webseiten, die nur mit den paar üblichen Schriften auskommen müssen, die bislang im Web einigermaßen übergreifend unterstützt wurden. Was mir gut gefällt ist das problemlose Fallback auf Alternativen und dass eine Schrift nicht jedesmal runtergeladen werden muss. Ein klarer Vorteil für Stammleser einer Seite. Wenn sich die Schriften verbreiten, wird es auch seltener, dass eine Schrift noch nicht installiert ist.
Es ist noch nicht alles gut, es braucht noch intensives Testen im Umgang damit, aber ich bin fürs Erste völlig zufrieden, dass es jetzt einen Weg gibt, der ohne Flash, Bilder oder sonstige Krücken auskommt um eine besondere Schrift anzubieten.
Ähnliche Beiträge
Kategorie tipps, web | 0 Kommentare »
Sozialversicherungsdaten verpflichtend elektronisch mit Windows…
16. September 2011 ute
Seit dem 1.7.2011 sind Arbeitgeber verpflichtet Entgeltbescheinigungen elektronisch an die Krankenkassen zu übermitteln. Bis vor kurzem gab es zusätzlich zur Version sv.net/classic die nur mit einigen Windowssystemen läuft die Variante sv.net-online mit der solche Bescheinigungen übertragen werden konnten.
sv.net/online gibt es zwar weiterhin, aber mit der Verpflichtung ab dem 1.7.2011 wurde das Modul “Entgeltbescheinigungen” aus sv.net/online entfernt.
Verpflichtung seit Juli 2011: “Bis einschl. 30.06.2011 wurden die Verdienst- bzw. Entgeltbescheinigung zur Berechnung von Entgeltersatzleistungen wie Krankengeld, Verletzten- und Mutterschaftsgeld auf dem Postweg an die Krankenkassen und Berufsgenossenschaften übermittelt. Seit dem 01.07.2011 gilt nur noch die maschinelle Übermittlung per Datenträgeraustausch.”
Soweit so gut, bis auf eins, die
Betriebssystemunterstützung
Angeboten und durch Support des Anbieters gesichert, wird das somit verpflichtende sv.net/classic nur für:
- Windows XP
- Windows Vista
- Windows 7
- alle anderen Betriebssysteme wie Windows 2000, Mac Os und Linux werden nicht unterstützt.
Der Anbieter von sv.net/online schreibt:
“sv.net/classic unter Linux, Ubuntu, etc. und MAC OS:
da sv.net derzeit ausschließlich für die Windows Plattformen entwickelt wird, haben wir die Lauffähigkeit unter anderen Betriebssystemen untersucht. (:::) WICHTIGER HINWEIS:
Der erfolgreiche Test in virtuellen Umgebungen ist KEINE Freigabe für diese Plattformen!
Die Installation und der Betrieb von sv.net/classic in virtuellen Betriebssystemumgebungen erfolgt auf Ihre eigene Verantwortung.
Wir können leider keine Unterstützung dafür bieten!”
Staatliche Verpflichtung für ein Betriebssystem
Im AOK-Rundschreiben der folgenden Stellen steht unter anderem:
- GKV-Spitzenverband, Berlin
- Spitzenverband der landwirtschaftlichen Sozialversicherung, Kassel
- Deutsche Rentenversicherung Bund
- Deutsche Gesetzliche Unfallversicherung e. V., Berlin
- Bundesagentur für Arbeit, Nürnberg
“Mit Wirkung vom 01.01.2011 wird der Datenaustausch Entgeltersatzleistungen auch für die Arbeitgeber verpflichtend (vgl. Artikel 21 Absatz 11 in Verb. mit Artikel 1 Nummer 13 Buchstabe b Doppelbuchstabe aa des Gesetzes zur Änderung des Vierten Buches Sozialgesetzbuch und anderer Gesetze vom 19.12.2007 [BGBl I. Nr. 67 S. 3024]).
Aufgrund notwendig gewordener Änderungen und um ein sicheres Anlaufen dieses neuen Verfahrens zu gewährleisten, werden optional bis zum 30.06.2011 die bisherigen Entgeltbescheinigungen weiterhin neben den bereits bestehenden elektronischen Meldungen der Datensätze in den Versionen 4.0 und 5.0 auch in Papierform von den Krankenkassen angenommen.
Alle Verfahrensbeteiligten erachten diese Vorgehensweise als zielführend, um die größtmögliche Sicherheit für den Austausch der Daten zur Berechnung von Entgeltersatzleistungen zu gewährleisten.”
Mir ist egal was sie glauben, was zielführend sei. Es kann nicht sein, dass eine verpflichtende Abgabe nur mittels einer willkürlichen Auswahl von Betriebssystemen möglich ist. Bei freiwilligen Systemen kann ein Anbieter entscheiden, unter welchen Voraussetzungen seine Software läuft, aber doch nicht dann, wenn verpflichtende Angaben nötig sind. 
Ähnliche Beiträge
Kategorie Linux, krimskrams | 0 Kommentare »
KDE Kontrollleiste verliert die Transparenz
13. September 2011 ute
Wann genau es passierte, weiß ich im Nachhinein nicht mehr, aber plötzlich fehlte die Transparenz meiner Kontrollleiste (Ubuntu und KDE 4). Ich suchte in den Systemeinstellungen vergeblich, weder in den allgemeinen Einstellungen noch in denen des genutzten AIR-Themes änderte sich das Problem beim Ausprobieren.
Miniprogramme in der Kontrollleiste
Erstmal ließ ich es, und vermutete es wäre nach dem nächsten Booten weg. Das klappte jedoch nicht, also suchte ich nochmals unter anderem in den Einstellungen der Miniprogramme, aber auch da änderte sich zunächst nichts. Eher zufällig fand ich die Lösung, beim Sperren der Miniprogramme hatte sich wohl was verschluckt. Die Lösung war einfach:
- Miniprogramme entsperren
- Transparenz ist wieder das
- Miniprogramme wieder sperren
- Transparenz bleibt da
Manche Lösungen sind sehr einfach!
Ähnliche Beiträge
Kategorie Linux, tipps | 0 Kommentare »
GIMP kann Photoshop-Gradients (Verläufe) nutzen
9. September 2011 ute
GIMP Farbverlauf
Christian verlinkte auf eine Seite mit vielen Photoshop-Gradients und dem Hinweis, die sollten auch in GIMP nutzbar sein. Einige sahen ganz interessant aus, also schaute ich mal nach einer Möglichkeit sie in GIMP zu nutzen. Einfach öffnen nützte nichts, da wurde nichts erkannt, was ein Verlauf werden könnte.
Deshalb recherchierte ich und fand eine Anleitung, wie das geht. Es braucht ein Plugin für GIMP
GIMP-Plugin für Verläufe
- Plugin Sample a Gradient Along a Path wird nach dem Download einfach im Systemordner des Benutzers gespeichert: home/user/gimp_version/scripts/
- beim nächsten Öffnen von GIMP ist es nutzbar.
- bei den Verläufen, die ich wollte, war ein *.jpg eines Verlaufs
- Bild des Verlaufs öffnen
- Pfadwerkzeug nehmen und den Verlaufspfad aus dem Verlauf markieren
- zum Farbverlaufseditor wechseln
- einen beliebigen Verlauf anklicken -> rechte Maustaste -> Sample Gradient wählen
- es öffnet sich ein Fenster (bei mir immer hinter dem anderen Einträgen, falls nichts passiert mal danach schauen)
- unter Gradient Name einen eindeutigen Namen eingeben
- fertig
Im Verlaufseditor gibt es jetzt einen weiteren Verlauf, der genutzt werden kann.
GIMP Verläufe
Wem das zu viel, der kann sich auch einfach einige GIMP-Verläufe holen, z.B. bei gimp-tutorials.net 130 Verläufe für GIMP
Sicherungen nicht vergessen
Um Plugins, eigene Verläufe, Muster usw. nicht zu verlieren bei einer Neuinstallation, sollte der Gimp-Ordner natürlich gesichert werden. Bei mir ist er mit Versionsnummer benannt, bei einem Update existiert dann oft ein weiterer Ordner, die Plugins usw. müssen dann noch reinkopiert werden, damit sie in der neuen Version nutzbar sind.
Ähnliche Beiträge
Kategorie software, tipps | 0 Kommentare »
« Vorherige Einträge