Artikel der Kategorie: Web-Design

BrowserLab – Websites in mehreren Browsern testen

25. Januar 2012, 11:04 von Tobi | 1 Kommentar

BrowserLab ist ein Onlinedienst von Adobe, der vor allem für Webdesigner interessant ist. Mit dem Dienst können Webseiten ohne großen Aufwand in unterschiedlichen Browsern unter diversen Betriebssystemen getestet werden. Dazu wird lediglich die URL der gewünschten Webseite eingegeben und BrowserLab erstellt automatisch Screenshots der Seite mit unterschiedlichen Browsern. Die Screenshots werden jedes Mal neu erstellt und werden nach wenigen Sekunden angezeigt.

Aktuell werden folgende Browser und Betriebssysteme unterstützt, weitere sollen in Zukunft dazukommen:

  • Chrome 13.0 – Windows
  • Chrome 14.0 – Windows
  • Firefox 5.0 – OS X
  • Firefox 5.0 – Windows
  • Firefox 7.0 – OS X
  • Firefox 7.0 – Windows
  • Internet Explorer 6 – Windows
  • Internet Explorer 7 – Windows
  • Internet Explorer 8 – Windows
  • Internet Explorer 9 – Windows
  • Safari 5.1 – OSX

Die Screenshots können sowohl einzeln, als auch nebeneinander angezeigt werden. Um Unterschiede besonders deutlich zu machen, können zwei Screenshots zusätzlich halbtransparent übereinander dargestellt werden.

Zur Nutzung von BrowserLab wird ein Adobe-Account benötigt. Der Dienst kann bis 12. April 2012 kostenlos getestet werden. Danach wird er eventuell kostenpflichtig, was jedoch noch nicht feststeht.

Zu Adobe BrowserLab

Farbe von markiertem Text mit CSS anpassen

15. November 2011, 18:32 von Tobi | 1 Kommentar

In allen Browsern ist die standarmäßige Darstellung von markiertem Text auf weiße Schrift und blauen Hintergrund gesetzt. In letzter Zeit sehe ich jedoch immer mehr Webseiten, die sich davon abwenden. Einerseits um markierte Textstellen besser lesbar zu machen, andererseits um das Design noch einheitlicher zu gestalten.

Farbige Textmarkierungen können mit Hilfe von CSS realisiert werden. Dabei lassen sich die Text- und Hintergrundfarbe von markiertem Text ändern. Unterstützt wird der “selection”-Selektor von Opera ab Version 9.5, vom Internet Explorer ab Version 9, von Chrome und Safari. Firefox kann seit Version 3.6 ebenfalls damit umgehen.

::selection {background: #ff0000; color: #ffffff;}
::-moz-selection {background: #ff0000; color: #ffffff;}

Ursprünglich war der neue Selektor Teil der CSS3-Spezifikation. Mittlerweile wurde der Support eingestellt und der Selektor ist in der neuesten Spezifikation leider nicht mehr vorhanden. Durch die breite Unterstützung auf Browserbasis bleibt der “selection”-Selektor aber weiterhin interessant. Einziger Nachteil beim Einsatz ist, dass dieser Selektor nicht valide ist.

Ich habe euch eine Demo mit drei verschiedenen Beispielen erstellt. Dort könnt ihr selbst testen und den Quellcode kopieren:
http://www.antary.de/wp-content/uploads/2011/11/css_selection.html

 

Gewinnspiel: Webstandards-Magazin und 2 Bücher

1. November 2011, 22:19 von Tobi | 20 Kommentare

Ich wurde vom Webstandards-Magazin angeschrieben, ob ich nicht zwei selbstkündigende Jahres-Abonnements in meinem Blog verlosen möchte. Obendrauf gibts noch zwei Bücher. Das Gewinnspiel findet ihr weiter unten.

Doch was ist das Webstandards-Magazin überhaupt? Es ist eine Print-Zeitschrift für Webdesigner, Webworker, Entwickler und allgemein alle, die im Bereich Web interessiert sind. Die Themen sind sehr breit gefächert und reichen von aktuellen News bis hin zu Programmierung, Usability, Social Media und Layoutgestaltung. Die Artikel der aktuellen Ausgabe könnt ihr der vergrößerten Version des Bildes entnehmen.

Die Print-Zeitschrift erscheint vierteljährlich und kostet pro Ausgabe 7,80 Euro. Für ein Jahresabo sind 28 Euro fällig.

1. Preis

Der erste Preis besteht aus dem Buch “Praxisbuch Web 2.0″ und einem Jahresabo des Webstandards-Magazin. Hier die Beschreibung des Buches:

Dieses Buch bietet Ihnen eine umfassende und praxisorientierte Darstellung der Designtrends und Techniken des Web 2.0. Von der charakteristischen Seiten-, Text- und Farbgestaltung über Barrierefreiheit und Usability bis hin zum Einsatz von AJAX, Mashups, Wikis, Blogs und Podcasts – mit diesem Buch lernen Sie, was eine Web 2.0-Site ausmacht und wie Sie diese selbst entwerfen und umsetzen können. Zahlreiche Schritt-für-Schritt-Anleitungen – etwa zur Erstellung von grafischen Elementen mit Photoshop oder zur Umsetzung eines CSS-Layouts – unterstützen Einsteiger und Profis bei der Gestaltung einzelner Elemente oder vollständiger Web 2.0-Sites.

2. Preis

Als zweiter Preis gibt es das Buch “Der erfolgreiche Webdesigner” und ebenfalls ein Jahresabo des Webstandards-Magazin. Nachfolgend noch die Beschreibung des Buches:

Wer als Webdesigner erfolgreich sein will, muss vieles beherrschen. Er muss mit Kunden kommunizieren, Projekte akquirieren und Websites konzipieren. Er muss Webprojekte professionell umsetzen und dabei immer den aktuellen Stand der Technik und die aktuellen Trends kennen. Beruflicher Erfolg ist eben kein Zufall. Da sind Unterstützung und Hilfe vom Experten eine willkommene Lösung! Nils Pooker vermittelt Techniken, Strategien und Lösungen für Webdesigner, die erfolgreich sein wollen. In diesem Buch erfahren Sie alles über Kundengewinnung, Marketing, Usability und Konzeption sowie das wichtige Thema Forderungsmanagement, wenn Kunden einmal nicht zahlen. Kurzum – Sie erfahren alles, was Sie für professionelle und effiziente Arbeit wissen sollten. Sie erhalten viele Tipps, Hinweise und Hilfestellungen und lernen, wie Sie Ihre Tools sinnvoll, gezielt und effektiv einsetzen.

Wie könnt ihr gewinnen?

Zur Teilnahme am Gewinnspiel müsst ihr einen Kommentar in diesem Beitrag mit einer gültigen E-Mail-Adresse hinterlassen. Dafür erhaltet ihr 1 Los. Um eure Chance weiter zu erhöhen könnt ihr aber noch bis zu 4 weitere Lose verdienen.

  • Google+ (1 Los)
    Berichtet bei Google+ über dieses Gewinnspiel oder meinen Blog und verlinkt diesen Beitrag. Anschließend müsst ihr nur noch den Link zu eurem Google+-Beitrag in den Kommentar mit aufnehmen.
  • Blogbeitrag (3 Lose)
    Schreibt einen kurzen Beitrag über dieses Gewinnspiel in eurem eigenen Blog und verlinkt auf diesen Beitrag. Anschließend den Link zu eurem Blogbeitrag im Kommentar posten.

Die Gewinner werden von mir per Zufallsprinzip ausgelost. Anschließend benachrichtige ich beide Gewinner per Mail, achtet deshalb bitte auf eine gültige E-Mail-Adresse!

Das Gewinnspiel läuft bis Sonntag, 13. November 2011 um 20 Uhr. Allen Teilnehmern wünsche ich viel Glück!

Schöne Buttons mit CSS3 erstellen

8. Juni 2011, 17:51 von Tobi | 3 Kommentare

Im Rahmen eines kleinen Webprojekts für mein Studium, habe ich heute ein HTML-Formular erstellt. Da ich unbedingt schöne Buttons wollte, habe ich mich das erste Mal richtig mit CSS3 auseinandergesetzt. Wirklich toll was damit alles möglich ist.

Ich habe mir einen Button mit abgerundeten Ecken, leichtem Farbverlauf und Schatten gebastelt. Der Text hat ebenfalls einen leichten Schattenwurf bekommen und beim drüberfahren wird die Farbe der Buttons gewechselt, mit Animation natürlich. Anzumerken wäre noch, dass alles rein in CSS realisiert wurde und keine Grafiken zum Einsatz kommen. Auch am HTML-Code muss nichts geändert werden. Die Buttons funktionieren im Firefox 4, Opera 11.11 und Chrome 12 einwandfrei. Im IE9 muss man lediglich auf die Animation beim Hovern verzichten.

Hier das Ergebnis. Links im normalen Zustand, rechts wenn man mit der Maus drüberfährt:

Weiterlesen →

Präsentation über CSS3

9. November 2010, 19:55 von Tobi | Keine Kommentare

Gerade bin ich über eine sehr tolle Präsentation zum Thema CSS3 gestolpert.Folgende Themen werden auf insgesamt 103 Seiten behandelt:

  • Everything you ever wanted to know about CSS3 selectors
  • Transparency and new color formats, including RGBA
  • New ways to work with backgrounds, including CSS gradients, multiple background images and natively supported CSS sprites
  • Rounded corners and border images
  • Box and text shadows
  • Transforms, transitions and their potential downsides
  • New values, including calc(), attr() and new units
  • Browser support information and techniques to take advantage of the exciting new stuff with respect to browsers of the past, to create experiences that are enjoyable for everyone

Die Präsentation wurde von Lea Verou erstellt und sollte unbedingt mit der Betaversion von Firefox 4 angeschaut werden. Falls dies nicht möglich ist, kann man auf die Online-Version zurückgreifen.

Browser auf HTML5-Kompatibilität testen

14. April 2010, 19:42 von Tobi | 6 Kommentare

Unter html5test.com hat Niels Leenheer einen Test veröffentlich, um Browser auf ihre HTML5-Unterstützung hin zu testen. Ähnlich wie beim Acid3-Test werden Punkte vergeben, um die unterschiedlichen Browser besser vergleichen zu können. Das Ergebnis wird übersichtlich zusammengefasst und zeigt genau auf, welche HTML5-Funktionen bereits unterstützt werden und welche noch nicht.

Allerdings muss man bedenken, dass die Spezifikation von HTML5 noch nicht fertig ist und sich daher noch einiges ändern kann. Zudem räumt der Entwickler ein, dass der Test nur überprüft ob die Funktionen im Browser bereit stehen. Die richtige Implementierung bzw. Umsetzung werden nicht näher geprüft.

Aktuell können maximal 300 Punkte erreicht werden. Hier eine kleine von mir erstellte Übersicht:

Browser Punkte
Firefox 3.6.8 139
Firefox 4.0 beta 2 189
Chrome 5.0.375.125
 197
Chrome 6.0.472.22 dev
 217
Internet Explorer 8
 27
Opera 10.60
 159
Safari 5.0.208
 208

Grafiken und Bilder verlustfrei komprimieren

8. Januar 2010, 00:16 von Tobi | 5 Kommentare

Im Internet sollte man bei Bildern und Grafiken immer auf eine angemessene Dateigröße achten. Natürlich sollte die Qualität darunter nicht leiden. Deshalb verwende ich persönlich sehr gerne das verlustfreie Grafikformat PNG.

Es gibt auch die Möglichkeit, mit Optimierungen eine Datei verlustfrei zu verkleinern.
Hier kommt der kostenlose Service PunyPNG ins Spiel. Dort kann man Grafiken (PNG, JPG, GIF) bis 350 KByte hochladen und optimieren lassen. Anschließend erscheint eine Übersicht mit den hochgeladenen Dateien und die gesparte Dateigröße. Nun kann man die optimierte Datei wieder herunterladen. Bei mehreren Bildern kann man auch eine ZIP-Datei mit allen Bildern herunterladen.

Zur Veranschaulichung habe ich zwei Beispieldateien hochgeladen. Wie ihr sehen könnt, wurden die zwei PNGs insgesamt um 39,2 KByte verkleinert.

Gut zu wissen: Webdesigntrends 2010

24. November 2009, 19:14 von empy | 4 Kommentare

Nicht mehr lange, dann ist es getan. Das Jahr geht zu Ende. Überall beginnt es zu weihnachten. Die Zeit wird besinnlicher. Und uns stehen zahlreiche Jahresrückblicke ins Haus, bevor wir letzten Endes das neue Jahr willkommen heißen. Während der Eine noch über das vergangene Jahr mit all seinen Höhen und Tiefen sinniert, fiebert der Andere schon 2010 entgegen.

Minimalistisches Design - Fortschritt oder Rückschritt?

Minimalistisches Design - Fortschritt oder Rückschritt? (Quelle: http://www.markenpersonal.de)

Auch im Web hat sich in den letzten Jahren durchaus viel getan. Web 2.0. Social Communities. eCommerce. Das spiegelte sich natürlich auch im Erscheinungsbild des www wieder. Altbekanntes wurde verbessert, neue Technologien ersetzten alte und ermöglichten ganz neue Vorgehensweisen der Web-Präsentation. Traditionen wurden über den Haufen geworfen, neue Trends entstanden.

Und auch für das neue Jahr 2010 gibt es Tendenzen und Richtungen, in die die Gestaltung geht. Zwar ändert sich nicht alles am 1. Januar, doch die Entwicklung vom Beginn des Jahres bis jetzt zeigt doch recht klar, in welche Richtung der Weg gehen könnte. Das reicht von der optischen Gestaltung, der Platzierung von Headern und übergroßen Footern bis hin zum erneut auflebenden Retro-Look der im Gegensatz zum einschlägigen Minimalismus steht.

Die Trends unterscheiden sich nicht von Grund auf von dem was 2009 aktuell war. Und was auch immer der Anwender, Designer oder Programmierer von den Trends halten mag, ob sie gefallen oder nicht, hängt sicherlich auch von persönlichen Faktoren ab. Dennoch wollen wir uns die Trends zumindest ansehen, um gewappnet zu sein, mitreden zu können und uns evtl. weiterzuentwickeln…

Weiterlesen →

Gut zu wissen: 5 Tips zur SEO

18. November 2009, 22:12 von empy | Keine Kommentare

Beschäftigt man sich mit Webdesign, bemerkt man schnell, das das Geschäft weit über die Designarbeit hinausragt. Was verlangt wird ist mehr als das pure Look & Feel einer Website zu erstellen. Oft ist es wichtig, sich auch direkt um den Code fürs Front End zu kümmern.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

Weiterlesen →

Seite 1 von 212