PixelscheucherCSS, HTML, JS/jQuery, Browser, …
Obiges Bild von Brad Frost zeigt sehr deutlich, wieviele verschiedene Geräte und Bildschirmgrößen es so gibt – und das sind noch längst nicht alle –, auf denen eine Website benutzbar und gut aussehen sollte. Bestellt aber eben leider auch nicht jeder mit. Gesehen bei A non-responsive approach to building cross-device webapps, auf den ich durch einen Tweet von David Hellmann stoß.
As I’m currently happy with Sublime Text 2 as my editor of choice, I’m happy for all the Coda fans that Coda 2 is coming out on May 24th. And there will be an iPad version of it, too, which is called Diet Coda—nice little word play with Diet Coke but I guess you already figured it out.
You can read more about pricing and discounts in the first 24 hours (50 %!) in Panic’s announcement blog post.
Hell yeah, this blog post is written in somewhat english. I believe the english language is nice to handle and even this whole web development thingy is dominated by english texts, so why not write myself english posts from time to time? Have I already mentioned the word “english”?
Coda 2 in the Mac App Store | Diet Coda in the iPad App Store
Die Leute vom Smashing Magazine haben die dritte Ausgabe des Smashing Book veröffentlicht. Anders als die anderen Ausgaben gibt es nun ein festgesetztes Thema: Redesign the Web. Mitbestellen kann man sich auch das Smashing Book 3 1/3.
Kaufen kann man sie im Smashing Shop: gedruckt für 39,90 $, gedruckt im Bundle (mit 3 1/3) 49,80 $; als eBook-Bundle (3 und 3 1/3) für 19,90 $ und schließlich im Komplettpaket gedruckt und als eBook für 59,90 $. Sind gegenwärtig ca. 46 € plus Versand.
Werde mir vermutlich – trotz Kindle – die gedruckte Fassung besorgen. Im Zweifel auch das Komplettpaket aus Druck- und eBook-Variante.
Sehr kurzweilige Einführung in SASS und Compass von David Kaneda auf der Emerging Tech for the Enterprise Conference in Philadelphia. Mit SASS und Compass kann man seine Stylesheets mit Variablen, Funktionen und weniger Tipparbeit versehen. Auch Andreas Dantz hatte darüber einen Vortrag gehalten.
David Kaneda will cover the benefits of abstracting CSS by taking a deep look at Sass and Compass. The presentation will include general benefits of abstracted CSS as well as a live-coding demo to show, first-hand, how to get started.
Wenn ich am Schluss meiner Ausbildung – meine Güte ist das schon lange her – etwas gelernt habe dann, dass man für UI– und UX-Design nicht auf Max Muster als Dummynamen zurückgreifen sondern auch hier schon den Ernstfall proben sollte. Sehr gut eignet sich dafür folgender Name:
Ist unglaublich lang (43 Zeichen inklusive Leerzeichen), hat einen Bindestrich, zwei Vornamen und der Nachname lässt durch seine Bekanntheit eventuell den ein oder anderen schmunzeln, der aufs Design guckt.
Das viel größere Problem ist jedoch Bandbreite. Zum Vergleich: die Homepage von Jeriko ist mit allem drum und dran etwa 1 Megabyte groß. Für eine optimale Darstellung muss jedes Foto mit einer doppelt so hohen Auflösung hochgeladen und angezeigt werden. Bei elf Fotos wäre ich dann wohl um die vier Megabyte Traffic für einen Seitenaufruf, von Einzelseiten mit Bilderstrecken fange ich am besten gar nicht erst an.
via Das iPad 3 und die Präsentation von Fotos im Internet | Jeriko.
Christoph schreibt was über das neue iPad Retina-Display und wieviel mehr Daten mit hochaufgelösten Bildern übertragen werden müssen.
Adobe Shadow ist eine Tool-Sammlung für Windows oder Mac und iOS- sowie Android-Geräte um Webseiten auf verschiedenen Geräten zu testen. Martin hat sich das mal ein wenig genauer angeguckt.
Paul Irish stellt mal kurz box-sizing: border-box vor und stellt fest, dass man es auch benutzen kann, wenn das Projekt mindestens IE8 unterstützt, der Browser-Support scheint recht gut zu sein.
box-sizing: border-box macht im Grunde das, was der IE früher falsch gemacht hat: ein 200px breites Element bleibt im Gesamten 200px breit, auch wenn man padding, margin und Freunde hinzufügt. Normalerweise wirds ja dazu gerechnet, so dass eine Box dann 200px + margin + padding breit ist.
Lässt sich ja hoffentlich in den nächsten Projekten einsetzen, sollte aber vorher getestet werden. für IE7 und drunter gibts auch Polyfills, mehr dann aber im Artikel von Paul Irish.
(via * { box-sizing: border-box } FTW « Paul Irish.)
Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.
Anyway, I have a recommendation for your CSS going forward:
/* apply a natural box layout model to all elements */
* { box-sizing: border-box; -moz-box-sizing: border-box; }This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.