CSSGURU.DE » Allgemein

Firefox 4.0 Beta ist da

admin — Wed, 07 Jul 2010 09:13:13 +0000

Ab sofot steht die Firefox 4 Beta 1 zum download bereit, allerdings nur in englisch und nur für Windows, Linux und OS X.
Zu den ersten Verbesserungen gehören Support for WebM Video, CSS 3, Canvas, Web Sockets, ein neuer Add-ons Manager, Crash Protection und ein Jetpack SDK update. Eine Übersicht aller Änderungen findet man in den Release-Notes.
Ausserdem würde an der Ladegeschwindigkeit gearbeitet, sodass die 4er Version deutlisch schneller läuft als die 3.x.

Mozilla feiert zwei Milliarden Firefox Add-on Downloads

admin — Mon, 05 Jul 2010 17:54:13 +0000

Laut Mozilla haben Firefox-Benutzer mittlerweile über zwei Milliarden Add-ons für ihren Browser heruntergeladen.
Die erste Milliarde hatte Mozilla mit den zusätzlichen Tools für Firefox im November 2008 geknackt
Laut eigenen Angaben hatten die Verantwortlichen damit gerechnet, dass es wohl drei Jahre dauern würde, bis man diese Zahl verdoppeln könnte. Zur Feier des Tages ruft Mozilla alle Firefox-Benutzer dazu auf, die besten 25 Add-Ons zu wählen.

Wireframing Tools und Templates

admin — Sun, 07 Feb 2010 18:43:59 +0000

Planung und Kommunikation sind zwei wichtige Elemente bei der Entwicklung einer erfolgreichen Website.
Das Wireframing bietet eine schnelle und einfache Methode einen Prototypen einer neuen Website zu erstellen.
Es ist einer der besten Möglichkeiten um Ideen mit anderen zu kommunizieren und zu planen, oder um Funktionen zu definieren und diese dann zu überprüfen.
Wie auch immer, der heutige Beitrag besteht aus einer Sammlung an nützlichen Tools und Templates für das Wireframing.

Online Wireframing Tools:

pidoco.com

iplotz.com

hotgloo.com

gomockingbird.com

gliffy.com

Templates und Toolkits

Free Sketching & Wireframing Kit

Form, Button, Windows etc.

Wireframe Icons

OmniGraffle Wireframe UI Stencils

Warum der IE6 noch benutzt wird

admin — Wed, 15 Jul 2009 17:48:28 +0000

Vor kurzem hat Digg in seinem Blog einen Beitrag veröffentlicht in dem es seine User fragt ob man den IE6 noch unterstützen soll, da noch ca. 10% der Nutzer mit dem Dinosaurier bei Digg unterwegs sind. Bei der Umfrage wollte man wissen welche Browser zuhause und welche am Arbeitsplatz verwendet wird und warum dabei noch der IE6 zum Einsatz kommt.

Hier erstmal das Ergebniss der Umfrage als Grafik:

Bildquelle: http://blog.digg.com

Wie es aussieht können ca. 75% der User am Ihrem Arbeitsplatz nicht upgraden weil: Sie entweder keine Administrationsrechte besitzen, oder das Betriebssystem es nicht zulässt (bzw jmd versucht es ihnen einzureden). Hier liegt das Problem höchstwahrschenlich an den alten Windows Betriebssystemen (Windows 2000, ME, 98) bei welchen ein Update auf IE7/8 nicht möglich ist, und auf der anderen Seite an den Admins die es nicht für nötig halten auf deren Client-PC’s einen aktuellen Browser wie Firefox oder Chrome zu installieren.
Den Kommentar für die restlichen 25% werde ich mir sparen

Ob man den IE6 supporten möchte oder nicht bleibt jedem selbst überlassen. Im schlimmsten Fall verzichtet man auf ca. 10% seines Traffics (was meiner Meinung nach doch noch ziemlich viel ist). Youtube hat jedenfalls vor den Stecker für den IE6 zu ziehen – andere werden wohl bald folgen.

Alternative CSS-Datei für den Internet Explorer

admin — Thu, 12 Feb 2009 16:55:14 +0000

Da der IE in den meisten Fällen HTML Seiten anders als z.b. der Firefox anzeigt, kann man das Problem entweder mit einem Hack, oder mit einer CSS Datei die nur für den IE importiert wird lösen. Diese Methode nennt sich “conditional comments” und ermöglicht einen validen CSS Code für alle Browser.

Ein paar Zeilen Code werden dafür einfach in den “head” Bereich eingebunden:

Beispiel für alle Internet Explorer

Beispiel nur für den IE6

Beispiel nur für den IE7

Beispiel nur für alle IE Browser Versionen unter IE7

Beispiel für alle IE Browser Versionen die entweder IE7 sind oder dadrunter

Footer bottom hack

admin — Sun, 01 Feb 2009 17:55:02 +0000

Es gibt viele Möglichkeiten den Footer immer am unterem Ende einer Seite auszurichten. Hier meine Lösung welche nur ein paar Zeilen Code benötigt und in dem meisten Browsern wie IE 6/7, Firefox und Safari einwandfrei funktioniert.

Das CSS sieht wie folgt aus. Zu beachten wäre, dass der untere negative Margin der “content” klasse die selbe Höhe hat wie auch die “footer” und “push” Klassen.

* {
    margin: 0;
}
 
html, body {
    height: 100%;
}
 
.content  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px auto;
}
 
.footer, .push {
    height: 100px;
    clear: both;
}

Und jetzt die HTML Struktur:

<html>
  <head>
  ....
  </head>
  <body>
    <div class="content">
      <p>Hier der Inhalt</p>
      <div class="push"></div>
    </div>
    <div class="footer">
      <p>Footer Inhalt</p>
    </div>
  </body>
</html>

Tools für Webentwickler

admin — Tue, 18 Nov 2008 19:19:16 +0000

Auch wenn man mit seinem Editor zufrieden ist, können Tools und Plugins bei der Entwicklung von Websites helfen. Deshalb stelle ich heute ein paar Development-Tools für Webdesigner vor:

Firebug (Firefox)
Ein abslutes “must have” für jeden Developer. Der Firebug verfügt über eine Konsole die sich in der unteren Browser hälfte befindet. Links bietet Firebug eine Struktur des HTML Codes, rechts CSS Spezifikationen. Mit dem “Inspect” Tool kann man CSS und HTML Live editieren. Zudem lässt sich auch JavaScript Code ansehen und bearbeiten sowie die DOM Struktur betrachten.

Web Developer Toolbar (Firefox)
Die Web Developer Toolbar / Extension ist auch eine sehr gute Erweiterung für den Firefox.
Eine genauere Beschreibung was man damit alles anstellen kann findest du hier.

Web Developer Toolbar (Internet Explorer)
Ja, auch für den IE gibt es was. Zwar nicht so ganz spektakulär wie die Firefox Version aber zum debuggen unter IE ziemlich hilfreich.

smush.it
Smush.it passt zwar hier nicht ganz rein, aber es ist ein geniales Tool um Grafiken zu optimieren.
Man gibt einfach eine URL ein und smush.it schaut nach ob man Bilder die sich auf der Website befinden optimieren kann. Das Geniale daran ist, dass man sich die optimierten Grafiken auch gleich downloaden kann. Einfach mal ausprobieren.

YSlow! (Firefox)
Ein sehr hilfreiches Plugin von den Yahoo! Entwicklern um die Performance einer Seite zu analysieren und zu verbessern.

Internet Explorer Collection
Für alle die verschiedene Internet Explorer zum testen benötigen, gibt es jetzt eine Sammlung mit allen Versionen des IE (1-8) zum downloaden.

Reset.css

admin — Mon, 20 Oct 2008 09:52:08 +0000

Hier mal eine simples reset CSS-File aus der Yahoo UI Library:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}