Google Chrome 13 ist veröffentlicht worden und enthält Instant Pages
verfasst von Pascal Bajorat, veröffentlicht am 03.08.2011 und noch nicht kommentiert
Google hat eine neue Version meines aktuellen Lieblings-Browser Chrome veröffentlicht, so ist die aktuelle Version nun die Nr. 13. Die wichtigste Neuerung im neuen Chrome ist wohl die Instant Pages Funktion, die bereits in der Beta-Version enthalten war und von vielen Usern gerne angenommen wurde.
Instant Pages soll das Laden von Webseiten beschleunigen, die über die Suchergebnisse in Google aufgerufen werden. Das ganze funktioniert wie folgt: Der User tippt sein entsprechendes Suchwort in die Google Suche ein und bekommt dank Google Instant bereits relativ schnell die Ergebnis-Liste präsentiert.
Nun errechnet Google die Wahrscheinlichkeit welche Ergebnisse der Nutzer letztendlich anklicken wird und lädt diese Seiten bereits im Hintergrund vor. weiterlesen…
Eigene CSS-Dateien (Systemweiche/Browserweiche) für Desktop-Computer, Smartphones (iPhone, Android, ect.) und Tablet-PCs (iPad)
verfasst von Pascal Bajorat, veröffentlicht am 20.05.2011 und noch nicht kommentiert
In diesem Tutorial möchte ich euch zeigen, wie ihr mittels CSS @media extra StyleSheets für Desktop-Browser, Smartphones (iPhone, Android, WebOS, ect. – Geräte) und Tablet-Computer (speziell iPad) anlegen könnt. Mittels dieser Methode könnt ihr ein und denselben HTML / CSS Code für alle Geräte optimieren. Fälschlicherweise bezeichnen viele diese @media Einbindungen als CSS-Browserweiche, dabei ist es eher eine Systemweiche, wenn man es überhaupt so nennen kann.
Jedenfalls tun sich durch diese Variante einige Vorteile für euch auf:
- einfachere Optimierung von mobilen Seiten, da keine extra mobile Seite angelegt werden muss
- alles in einer CSS, die Codes können so aufeinander aufbauen
Wie genau das mit @media funktioniert möchte ich euch nun zeigen:
weiterlesen…
Anzeige - Hier werben…
Must have AddOns für den Mozilla Firefox
verfasst von Pascal Bajorat, veröffentlicht am 02.08.2010 und 1 mal kommentiert
Der beliebteste Browser bei den Webdesignern ist bekanntlichermaßen der Mozilla Firefox. Dieser Browser ist perfekt für die Webentwicklung geeignet, vorausgesetzt man hat die richtigen AddOns installiert. Ich möchte euch in diesem Beitrag nun die “must have” Grundausstattung an AddOns für Webdesigner zeigen.
Firebug
Das wohl mächtigste AddOn für die Webentwicklung speziell für HTML, CSS, JavaScript entwicklung ist der Firebug. Mit dem AddOn Firebug können im Browser sämtliche CSS, HTML und JavaScript Codes direkt geändert werden. Das bedeutet, dass Ihr bei einem vorhandenen Fehler nicht erst wieder in eurem Coding Tool bearbeiten müsst, sondern das ganze direkt im Browser ändern könnt und die Auswirkungen direkt im Browser seht. Des Weiteren verfügt das Firebug AddOn über einen guten JavaScript Debugger und Tools zur Anzeige der Ladegeschwindigkeit von Dateien wie z.B. Bildern oder Scripten. Dies macht den Firebug definitiv zu einem der wichtigsten “must have” AddOns überhaupt.
AddOn Seite auf Mozilla.org
Eigenen Firefox Theme erstellen
verfasst von Sascha Rudolph, veröffentlicht am 01.08.2010 und noch nicht kommentiert
Noch nie war es so einfach seinen eigenen Firefox Skin / Theme zu erstellen wie jetzt. Seit anfang des Jahres gibt es die Möglichkeit ohne Programmierkenntnisse einen sogenannten “Persona” zu erstellen. Wie schnell und einfach das geht, und was Ihr dazu benötigt, erklären wir euch in diesem Artikel. Alle nützlichen Links findet Ihr wie immer unter dem Vorschaubild.
Persona Firefox Addon
Persona Vorlage für Photoshop (50kb)
Persona Upload Seite von Mozilla
weiterlesen…CSS 3 Unterstützung in IE 6-8 mit CSS3 PIE
verfasst von Pascal Bajorat, veröffentlicht am 24.07.2010 und 1 mal kommentiert
Langsam aber sicher ist CSS 3 in immer mehr Browsern verfügbar, aktuelle Vorreiter sind hier die Webkit Browser wie z.B. Apples Safari oder Googles Browser Chrome. Der Mozilla Firefox macht seine Sache ansich auch schon ganz gut, wenn auch nicht ganz soviel Unterstützung da ist wie in den Webkit Browsern. Das eigentliche Sorgendkind bzw. die Sorgenkinder sind wieder einmal die Browser aus dem Hause Microsoft. Die Internet Explorer, in den immer noch weit gefächerten Versionen von 6-8, haben keine bis sehr mäßige CSS 3 Unterstützung.
Ähnlich dem png Problem mit fehlenden Transparenz gibt es auch hier eine Lösung über eine *.htc Datei. Konkret nenn sich diese Lösung CSS3 PIE von Jason Johnston (327 Creative LLC). CSS3 PIE lässt sich relativ einfach einbinden und erweitert die Internet Explorer 6-8 um einige CSS 3 Selektoren sowie Attribute.
Folgende CSS 3 Attribute werden durch CSS3 PIE unterstützt: border-radius, box-shadow, border-image, -pie-background (multiple background images), -pie-watch-ancestors, rgba color values, gradients.
Eine detaillierte Liste mit allen unterstützen CSS 3 Attributen findet ihr unter http://css3pie.com/documentation/supported-css3-features/
Conditional Comments verwenden
verfasst von Pascal Bajorat, veröffentlicht am 18.07.2010 und 1 mal kommentiert
In dem Blog Beitrag “Webseiten auf Browser-Kompatibilität testen, aber richtig” habe ich euch gezeigt, wie ihr Webseiten in diversen Browsern testen könnt. Das einzige, dass jetzt noch fehlt, ist das ich euch sage wie ihr Darstellungsfehler in unterschiedlichen Browsern beheben könnt. Wenn wir mal ganz ehrlich sind, dann treten die meisten Fehler eher weniger in den Webkit (Safari, Chrome, usw.) oder Gecko (Firefox) Engine Browsern auf, sondern in den diversen Versionen des Microsoft Internet Explorers.
Gerade für solche Fälle gibt es eine sehr gute Lösung um speziell für den Microsoft Internet Explorer zugeschnittene CSS-Daten zu erstellen. Diese Lösung nennt sich Conditional Comments. Conditional Comments bieten eine relativ einfach zu verwendende Möglichkeit für diverse Versionen des Internet Explorers eine ganz eigene CSS-Datei einzubinden. In Ausgeschriebener Form sind z.B. folgende Möglichkeiten denkbar: Wenn der verwendete Browser älter oder gleich Internet Explorer 7 ist dann soll die Stylesheet Datei ie7.css eingebunden werden.
weiterlesen…Webdesign Podcast auf Facebook
Newsletter
Immer auf dem neusten Stand bleiben, mit unserem Newsletter. Einfach E-Mail eintragen und los geht's
Anzeigen - Hier werben…
