Kategorie: Design

Was bringt ein responsives Webdesign in Zeiten von Handy-Flatrates und Smartphones?

Webseiten, die sich an die Displaygröße der Nutzer anpassen (also responsive sind) haben derzeit Hochkonjunktur. Smartphones mit kleinen Bildschirmen machen es oft notwendig, den Inhalt anzupassen. Dafür muss nicht jedes mal eine neue Webseite erstellt werden sondern per .css werden die Ausgaben an die jeweilige Größe angepasst (mehr dazu => Wikipedia). Das macht trotzdem deutlich mehr Arbeit und erschwert die Entwicklung. Lohnt sich dieser Aufwand und bringen responsive Design Vorteile?

Diesen Beitrag lesen

So sieht eine gute Infografik aus

Infografiken sind ein sehr beliebtes Werkzeug, um Inhalte schön zu verpacken. Aber auch in der Suchmaschinenoptimierung werden Infografiken immer häufiger eingesetzt, um an begehrte Links zu kommen. Leider klappt das aber nicht immer – kein Wunder! Wer eine Infografik nur aufbaut, um Links zu erhalten, wird sein Ziel nicht erreichen. Ziel muss es sein, eine gelungene Infografik mit den besten Informationen zu gestalten und zur Verfügung zu stellen.

Diesen Beitrag lesen

Wo finde ich WordPress-Themes und was gibt es zu beachten?

Nach langer Zeit möchte ich mich mal wieder am Webmaster Friday beteiligen, der an diesem Freitag ein wirklich tolles Thema aufgegriffen hat: WordPress Themes: “WordPress-Themes – wo findet man sie und worauf sollte man achten?”. Ein Thema, mit dem ich mich selber recht häufig beschäftige, da die Theme-Anbieter dazu übergegangen sind, möglichst viele Funktionen in die Themes einzubauen, die aber von den User nicht alle genutzt werden. Zudem möchte ich noch ein wenig intensiver auf das Thema eingehen.

Diesen Beitrag lesen

Moqups: Webbasierte intuitive für Mock-Ups

Für Mock-ups, also rudimentäre und schemenhafte Zeichnungen von Webseiten, gibt es viele Tools und Hilfsmittel, die bei der Erstellung solcher Mock-ups behilflich sein können. Der Nachteil ist meistens nur, dass diese Software in den meisten Fällen gekauft werden muss, was sich aber für die seltene Anwendung nicht lohnt. Abhilfe schafft ein neues Tool Namens “Moqups”, welches nicht nur kostenfrei, sondern auch im Browser ausführbar ist.

MoqupsMoqups basiert auf HTML5 und bietet daher einige Möglichkeiten der Realisierung eines Mock-Ups an. So lässt sich zum Beispiel ohne Registrierung ein Wireframe mit mehreren Ebenen und vielen mehr erstellen. Was den Nutzer genau bei Moqups erwartet, wäre viel zu lang, um hier aufzulisten, daher möchte ich jetzt schon sagen, dass ich nicht alle Funktionen und Items erwähnen kann, die dieses sehr nützliche Tool bietet. Auf dem Screenshot auf der rechten Seite wird übrigens die Startseite der Software angezeigt.

Die Software bietet einen sehr großen Pool an Funktionen, der mehr als nur nützlich ist. Stellenweise wirkt er für unerfahrende auch etwas überladen, aber Mock-Ups-Kenner wissen, wie viel Funktionen die Gestaltung eines schemas wirklich braucht. Zunächst einmal bleibt zu sagen, dass in der Browser-App alles seinen festen Platz hat und gut Strukturiert ist.

Wer ein eigenes Mock-Up erstellen möchte, braucht sich nicht zu Registrieren. Die Möglichkeit einer Anmeldung ist gegeben, aber nicht zwingend notwendig. Es stehen genug Werkzeuge zur Auswahl, mit der sich die eigene schemenhafte Darstellung von Webseiten gestalten lässt. Eine kleine Auswahl folgt als Liste:

  • Überschriften
  • Texte
  • Rechteckte/Boxen
  • Links
  • Checkboxen/Radio-Buttons
  • Buttons
  • Formular-Eingabefelder
  • Slider
  • Map- und Bild-Platzhalter
  • Diagramme
  • und vieles mehr

Den Gestaltungsmöglichkeiten sind mit einer sehr großen Auswahl der sogenannten Items keine Grenzen gesetzt, so dass sich jeder Wunsch auch realisieren lassen könnte. Die Items lassen sich einfach per Drag&Drop auf die Vorlage legen. Wer mag, kann sogar eigene Bilder hochladen und für sein Wireframe verwenden, allerdings ist für diese Funktion eine kostenlose Registrierung nötig.

Ein nettes Feature, welches die Browser-Applikation anbietet, ist die Gestaltung auf mehreren Ebenen. Wer also mehr wie nur eine Seite für sein Mock-Up benötigt, kann eine zweite Seite nehmen und so zum Beispiel eine Unterseite simulieren oder eben eine Seite, auf die man nach einem Klick auf einen bestimmten Link gelangt. Wird auf einer Seite mehr Platz benötigt, kann das Hauptfeld durch einfachen ziehen der Maustaste am Rand vergrößert oder eben auch verkleinert werden.

MoqupsDas eine Registrierung keine Pflicht ist, habe ich schon erwähnt. Aber dass die Anmeldung ein paar Vorteile bringt, dazu komme ich jetzt zu sprechen. Denn als registrierter Nutzer stehen mir neben dem Upload eigener Bilder auch Funktionen wie das Speichern eines Mock-Ups bereit. Diese lassen sich dann jederzeit im von mir Bearbeiten oder Löschen – sofern ich eingeloggt bin.

Auch in Bezug auf die farbliche Gestaltung bietet Moqups fast die völlige Freiheit: Für Boxen, Texte, Icons, Buttons und vielen weiteren Items lässt sich über eine umfangreiche Farbpalette die gewünschte Farbe auswählen und einstellen. Besonders Interessant finde ich die Icons, von denen unzählige zur freien Gestaltung zur Verfügung stehen. Diese sind ebenfalls frei einsetzbar, so dass sich diese nicht nur einfach neben Texten platzieren lassen, sondern sich mit den Icons auch Buttons oder Alert-Boxen gestalten lassen.

Wer Moqups testen oder komplett verwenden möchte, findet die Applikation unter www.moqups.com

CSS3 via Photoshop-Plugin erstellen

Die CSS3-Buttons werden unter den Grafikern und Entwicklern immer beliebter und immer öfters finden sie ihren Einsatz. So lassen sich immer mehr Buttons im CSS3-Style auf den Webseiten im Internet finden, welche entweder durch vorgefertigte Stylesheets, die man sich kostenlos im Internet herunterladen kann, in die Layouts der Webseiten eingebunden werden können, oder von cleveren Entwicklern selbstgeschrieben werden. Wer keine Ahnung von Cascading Style Sheet 3 hat, so die lange Fassung von CSS3, sich aber trotzdem die schönen Buttons, mit denen sich ohne dem Einsatz von Bildern auch Farbverläufe und Animationen umsetzen lassen, selber erstellen möchte, der kann sich die Buttons in Photoshop erstellen und dann den entsprechenden CSS3-Quellcode mittels einem Plugin ausgeben lassen.

Das kostenfreie Photoshop-Plugin “CSS3PS” ist für die Creative Suite-Versionen 3 bis 6 verfügbar und lässt sich direkt einsetzen. Ist das Plugin installiert, braucht nur noch eine Form in der gewünschten Farbe erstellt werden, aus der später ein Button erstellt wird. Das tolle an dem Plugin ist, dass wirklich nur die Form und die Farbe des Buttons benötigt wird und mit einem Klick aus zwei CSS3-Vorlagen ausgewählt werden kann, wie der Button letztendlich aussieht. Hat man sich für eine Vorlage entschieden, reicht ein Klick und das Plugin gibt einen Quellcode aus, der in die Stylesheet eures Layouts eingefügt werden muss, damit der Button im Browser richtig angezeigt werden kann.

Das Plugin lässt sich hier herunterladen.

Die einfachsten Toggle-Funktion

Die Toggle-Funktion ist einer der meistbenutzten JavaScript Funktionen.
Viele Frameworks haben schone diese  Funktion / Methode. Hier ist eine Idee für eine Toggle-Funktion, man das auch für andere Zwecke modifizieren.



Toogle

Toggle me

Digg hat ein Sicherheitsloch, Yigg auch.

Wie es bekannt wurde soll Digg angeblich ein Sicherheitsloch haben. Ich habe eins auch bei Yigg gefunden. Unter Umständen ist es möglich, dass ich meine Besucher eine Story yiggen lasse, ohne das sie etwas davon merken. Wie das geht, veröffentliche ich noch nicht. Ich gebe dem Yigg-Team bis nächste Woche Zeit.

Social news sites, wie Yigg. Readster und Webnews werden immer beliebter, die Betreiber sollen die Community ernst nehmen.