Author Archives for Hans Christian

Wo sind meine abgerundeten Ecken?

by

Sorry for this german post. For more information on this topic please check out the post “Where Are My Rounded Corners?”. Thanks to Daniel and Steffen at /gebrüderheitz.

Manchmal sind unsere Kunden verwirrt, wenn sie sich ihre neue Website im Browser anschauen und sie anders aussieht, als das Design, dass sie freigegeben hatten. In diesem Merkblatt erklären wir, warum es viele Vorteile gibt, diese Unterschiede zu akzeptieren und dass diese Vorteile die Nachteile überwiegen.

Lange Zeit haben wir die Gestaltung von Websites so gehandhabt, als ob es Printmedien seien. Hier findet nun ein Umdenken statt, denn das Internet unterscheidet sich sehr stark von den Printmedien.

Webentwickler haben lange versucht, den spezifischen Charakteristiken einzelner Browser entgegen zu wirken, indem sie Browser “zwangen”, die Website möglichst gleich dazustellen. Zum Beispiel ist es möglich, auch im Internet Explorer 7 oder 8 abgerundete Ecken darzustellen, damit sind jedoch andere Nachteile verbunden.

Es hat viele Vorteile, wenn man akzeptiert, dass das Internet sich anders als Printmedien verhält. Unserer Meinung nach sind das folgende:

#1 Mehr Zeit für das Wesentliche.

Feinheiten im Design wie abgerundete Ecken, Verläufe und Schlagschatten in älteren Browsern wie dem Internet Explorer 7 oder 8 umzusetzen, ist zeitaufwändig und teuer.
Bei Projekten mit limitiertem Budget und knapper Zeit ist es oft besser, die Zeit in wichtigere Bereichen zu investieren, wie zum Beispiel in das Verständnis von Geschäftszielen oder in Benutzertests. Zeit mit kleinen ästhetischen Details auf Kosten der wichtigeren Ziele zu vergeuden, kann den Erfolg der Website negativ beeinflussen.

#2 Steigende Userzahlen.

Zu viel Zeit in die Optimierung der Darstellung auf älteren Browsern wie Internet Explorer 7 oder 8 zu investieren ist kontraproduktiv, da diese Browser von leistungsfähigeren Versionen (wie beispielsweise Internet Explorer 9) ersetzt werden, die dann auch diese visuellen Verbesserungen unterstützen. Warum also Geld in einen schwindenden Markt investieren, wenn Sie ein zukunftssicheres Design für die nächste Generation von Browsern erstellen können?

#3 Bessere Leistungsfähigkeit der Website.

Eine Website in allen Browsern bis ins Detail gleich darzustellen, bedeutet, dass sehr viel mehr Bilder und auch Programmcode in die Website einzubinden sind. Dadurch wird die Ladezeit der Seite erhöht.
In einer Welt mit ungeduldigen Nutzern ist es wichtig, dass die Ladezeit möglichst kurz ist.

#4 Bessere Platzierung in Suchmaschinen.

Google weiß, dass Nutzer schnelle Webseiten bevorzugen. Deshalb beziehen sie die Größe einer Website in den Suchalgorithmus mit ein. Wenn die Ladezeit der Website kurz ist, wird sie im Lauf der Zeit bei Suchmaschinen besser gelistet. Aufgeblasener Code zur Anpassung älterer Browserversionen verhindert dies.

#5 Eine zukunftssichere Website.

Eine Website nicht in erster Linie für ältere Browser zu gestalten, stellt auch die Zukunftsfähigkeit der Website sicher. Wir Webdesigner wissen in welche Richtung sich die Browserunterstützung entwickelt und wollen unseren Kunden daher eine Website gestalten, die der Zukunft Stand hält. Programmcode für alte Browser, wie dem Internet Explorer 7 und 8 birgt das Risiko, dass Ihre Seite in neuen Browserversionen nicht funktionieren könnte.

#6 Einfachere Instandhaltung & Aktualisierung

Ein sauberer und schlanker Programmcode vereinfacht Anpassungen der Website. Programmcode, der für ältere Browser erstellt wurde, kann hierbei allerdings Kopfzerbrechen bereiten. Stellen Sie sich vor, Sie möchten die Farbpalette Ihrer Website ändern. Wenn Ihre Website abgerundete Ecken für den Internet Explorer 7 oder 8 unterstützt, bedeutet dies, dass viele Grafiken farblich angepasst werden müssen. Das ist zeitaufwendig und teuer.
Wurde Ihre Seite allerdings mit dem Fokus auf aktuellen Technologien gelegt, ist dies ein Aufwand von wenigen Minuten.

#7 Mehr Gestaltungsmöglichkeiten.

Zu guter Letzt sind manche Designansätze gar nicht in älteren Browsern umsetzbar. Internet Explorer 7 und 8 können manche Designs nicht darstellen, die in fortschrittlicheren Browsern sehr gut aussehen werden.

#8 Wird die Zielgruppe damit umgehen können?

Auf jeden Fall! Zunächst einmal nutzen viele User fortschrittlichere Browser wie
Internet Explorer 9 oder Google Chrome. Wie auch immer: Viel wichtiger ist, dass die Website auch in Internet Explorer 7 und 8 einigermaßen gut aussieht. Die Chancen sind gut, dass die Besucher der Website gar nicht bemerken, dass einige Feinheiten im Design fehlen, weil sie die Website niemals in einem anderen Browser öffnen werden. Wahrscheinlicher ist, dass Kritik von Kollegen geäußert wird, die das Design überprüfen. Dabei ist wichtig zu bedenken, dass die Kollegen wahrscheinlich nicht Ihrer Zielgruppe angehören.

Wir glauben, dass die Vorteile überwiegen, wenn kleine ästhetische Unterschiede für einen kleinen Kreis von Benutzern zugelassen werden. Wir denken heute schon an die Zukunft. Tuen Sie dies auch.

Disclaimer

Dies ist eine Übersetzung des Hefts “Where Are My Rounded Corners” von Paul Boag.
Gefunden bei Paul Irish

Credits: Paul Boag for Headscape

Download

Feel free to use this text and share it with your customers and other web-developers that suffer under the same issues.
English Version    German Version


“Where Are My Rounded Corners?” – German Translation

by

Some weeks ago Paul Irish published his article about TAFEE (Tiered, Adaptive Front-end Experiences) and shares Paul Boag’s booklet called “Where are my rounded corners?” which tries to describe why it is better to design for the future and modern browsers and not spending too much time trying to get the website’s design working in older browsers (namely Internet Explorer 7 and 8). The booklet was originally published in Paul Boag’s blog. Paul describes why he did this this: One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off

Read more


CSS3: Rotate Images on Click

by

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago. In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating. I’m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the

Read more


Touch-Icons for Android-Devices: Y U No Working?

by

Sven asked me some stuff about the HTML5 Boilerplate Favicon PSD-Template while he was using it for a project. He discovered one problem I was not aware of and I don’t know how to work around: Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3. I do not know of any other usage of the icons in prior versions of Android. But this article by Rob Flaherty stats that it is working for Android 2.1 and 2.2 with some minor changes. He also set up this demo-page. Feel free

Read more


Text-Shadow in Internet Explorer

by

This mothereffin shit is worth a blog-post. Even if it’s just a short one. At this very moment I’m celebrating the fact that Internet Explorer 10 now supports text-shadows kinda excessively! Finally! Even Internet Explorer made it! Yayyyy! For more details on this, please go and check out the Internet Explorer 10 Guide for Developers. Microsoft developers explain the usage of text-shadow here. But I guess it should be pretty clear how to use them as other browsers support them like forever. Thanks goes out to Louis Lazaris for his tweet about it. Also @IE tweeted about this. There are also

Read more


HTML5 Boilerplate Favicon PSD-Template

by

No longer maintained Version 3.1 – Update 25.11.2012 Add current 16x16px favicon. Version 3.0 – Update 25.05.2012 And again Daniel updated the template with some great things. It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is. Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default. Version 2.0 – Update 21.03.2012 Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built

Read more


Pseudo-Elements in Print-Styles for References in Links

by

This morning @t3node asked me about something CSS-related. This was kinda new for me because he never did this before I guess… He showed me a website he had printed and asked me to explain him, how it is possible to show links in printed websites with their reference printed next to it. He was kinda upset why not every frontend-developer includes this in his/her stylesheet when it comes to designing a new website. I wanted to explain everything that’s related to this topic that I’ve ever heard of but he asked me to write this blogpost as he is not pretty used to CSS

Read more


Add Style-Syntax in Comments with `, _ and *

by

You may be familiar with the syntax of writing code-Tags like `some code here`. This is what is used by Github for example. At Daring Fireball they wrote up the syntax. Not only for code-Tags but for various features that are connected to style and semantics. In the comments of this blog it is possible to use some of the rules to add some markup to them. For instance when you write: Some fancy text with **styled _markup_** and `code`. It will be transfered to Some fancy text with <strong>styled <em>markup</em></strong> and <code>code</code>. I really like to use these tags

Read more


Offer Files as Download with a@download

by

So the spec introduces a new attribute on a-tags (so called “links” – this may be new to you ;-)) called download (short: a@download – this technique of connecting attributes with tags is written up and documented by Mathias Bynens). When you link to a file like an image or a PDF-document it will be displayed within the browser normally. The download-attribute in links prevents this behavior and offers the file as a download in your browser. Definition The spec allows the attribute for having a value. This value can be a string which defines the name of the downloaded file. As a default

Read more


Mobile Design is not only Responsive

by

When I read this article by Henrik Eneroth about redesigning Safari’s interface I thought we as webdesigners somehow do this with websites and web-apps. While Apple misses to add different behavior for different browser-sizes it’s a kind of standard to build a website with a special mobile version that looks not like the website on a desktop computer but fulfills the need of someone who visits the mobile version of the website. In Vitaly Friedman’s (Smasing Magazine) presentation “Webdesigntrends 2011” I recognized this nice photo. Vitaly states that someone who visits your page with a mobile device may need other

Read more