The future of testing is yellow

Pingdom, my favourite service for monitoring my servers, released a new tool yesterday that saves you from becoming a click monkey: Transaction Monitor.

What it does is accessing your webpage, clicking links, filling out forms and checking on the results (URL, Status Codes, etc.). I just implemented it for checking all of our stores checkout processes once a day.
Setting up is straigt forward and easy (as long as you have a check left in your Pingdom account). The Check editor offers context sensitive suggestions on actions and validations and has instant feedback on how long it took to perform the action and wether it was successful or not.
check-editor

So with the Transaction Monitor annyoing repetitive task can be automated and thanks to that performed even more often as when executed manually.

check

For some inexplicable reason however there is an artificial limit on the number of steps you can add to a check which is currently 25 and limits the usefulness unnecessarily.

Viel heiße Luft

Es gibt ja auch noch andere Shopbetreiber die bloggen. Und zumindest so tun, als würden sie der Community was zurückgeben.

Natürlich gilt es Chancengleichheit für alle Kollegen zu gewährleisten: wer die Präsentation ebenfalls haben möchte, schreibt mir einfach eine mail

Habe ich gemacht. Mehrmals. Und der Kollege auch. Reaktion: Keine. Auch Kommentare im ‘Blog’ werden ignoriert, indem sie einfach nicht freigeschaltet werden.

Da bleibt mir nur zu sagen: Put your money where your mouth is. Oder einfach keine leeren Versprechungen abgeben.

#btconf – Take 2

I was very exited to be part of beyond tellerrand 2012 and I didn’t get disappointed.

While the conference in 2011 was great, this year it was even greater. And I got a sneak peak on next years speakers and 2013 might be even greaterer. And there is another good news: We won’t have to wait a whole year this time as Marc switches the dates for Play! and Web and the later will take place in May 2013, 27th to 29th to be exact.

My fellow german colleagues often nickname Beyond Tellerrand as „Klassentreffen” (class reunion) for the german webworker scene and that exactly nails it. You can meet everybody in Düsseldorf and it was great to see Sandra, Eric, Christian, Marc and all the others again and meet new talented guys like Dennis and Andreas. Plus we had nice vegan food together.

Those who follow me on Twitter might have noticed that I didn’t tweet that much this time. And I barely took notes. This is because I was afraid to miss something from all these great talks. And all of them were fascinating, both those with more technical details and those without. So I won’t get into any details here, others have already done this and more will follow. Marc will most likely put a nice list of all posts on Lanyrd or somewhere else. Marc is collecting all write-ups on the conference’s lanyrd-page.

What I love most about this conference is most likely this familiar flair that’s everywhere. And this is most likely because of Marc. No matter how busy he might be, there is always time for a little chat or a beer. Thanks to this you don’t feel like just attending a conference but being part of it. Of course his team does also a tremendous job to run this so smoothly and a great thank you goes out to them, too.
The worst thing is that I’m in such a passive role. I’m just not used to it, I’m a maker in everything I do. You’ll for instance never see me in a baseball stadium just watching. So this is really hard for me. And I’ll have to change this one day.

Pictured above is BTW my brand new Wacom Bamboo Stylus which I ‘won’ at the conference. Thanks to Wacom for the Bamboo and thanks to Marc for throwing an orange one in my direction, as orange is my favorite color.

Der schnellste Erzgebirge-Palast, den es je gab.

Schnell ist der Erzgebirge-Palast ja eigentlich schon immer. Also spätestens seit Ende 2008, wo zum ersten Mal der Server etwas geschwächelt hat und ich viel optimiert habe. Seit dieser Zeit kommen auch die statischen Inhalte größtenteils von Amazons Cloudfront CDN. In den letzten Jahren hat es der Shop mit diesen Optimierungen in Google’s PageSpeed auf einen Wert von 95 (100 ist der Maximalwert) gebracht.

Ich habe auch viel dazu geschrieben, wie man mit einfachen Mitteln ähnliche Werte erreichen kann. Was ich nie erwähnt habe ist die Sache mit dem CDN, weil das schon eher Highlevel ist und weil mein bisheriger Workflow, Cloudfront war damals quasi frisch geschlüpft und konnte noch nicht wirklich viel, doch sehr umständlich ist:
Inhalte mussten auf Amazon S3 liegen, was man zwar mit einem Tool wie s3sync mehr oder weniger automatisieren kann, aber aufwendig ist es trotzdem. Und da ich lange Expire-Header nutze musste ich beispielsweise dem CSS immer ein Datum mitgeben, das ganze syncen und schließlich die Referenz im <head> auch noch anpassen. Nichts, was man irgendwem raten möchte, nachzubauen.

Beim Blättern in den Folien von Christian Schäfer kam mir dann der Gedanke, dass ich mir ja grad mal das PageSpeed-Resultat vom Shop anzeigen lassen könnte. Weiterhin 95, aber ein Punkt tauchte dort auf, der mich eigentlich schon immer nervt, seit ich auf das CDN umgestellt habe: Die CSS-Datei ist nicht gzip-komprimiert. Und wir reden hier von 65kB vs. 12kB! Aus dem Grund hatte ich da auch schon mal versucht, was zu bauen, was aber nie wirklich funktioniert hat (Datei bereits gezippt ablegen und mit entsprechendem Zusatzheader ausliefern). Kurz gegoogelt und darauf gestoßen, dass Cloudfront schon seit einiger Zeit ‘custom origin’ unterstützt. Das hat zwei Vorteile:

  1. Die Inhalte müssen nicht mehr wie bisher auf S3 liegen sondern können von einem beliebigen Webserver kommen.
  2. Header, die der Original-Webserver schickt, werden von Cloudfront genau so weitergegeben.

Man braucht dazu nur zwei Dinge:
Eine Domain, die cookieless arbeitet. Also einen vhost einrichten, der das selbe DocumentRoot hat wie der eigentliche Webauftritt und diesem sagen, dass er sämtliche Cookies verwerfen soll: Header unset Cookie.
Mit dieser Domain, nennen wir sie mal static.example.org, legen wir jetzt eine neue Distribution in Cloudfront an, geben an, dass die Header so übernommen werden sollen, wie sie von der Quelle kommen, warten einen Moment, bis das alles deployed ist und können das ganze dann wie bisher nutzen. Statt von S3 holt Cloudfront jetzt aber die Daten von unserem Server. Das passiert auch nur genau beim ersten Request, denn ab dann hat Amazon das ganze ja im Cache.

Damit kann man Cloudfront nicht nur mit gzip nutzen, sondern sogar mit mod_rewrite, denn die eigentlichen RewriteRules werden ja auf dem eigenen Server ausgeführt. Das eröffnet völlig neue Möglichkeiten und so hat mein CSS keinen von Hand eingetragen Datumsteil mehr, sondern einen dynamisch ausgelesenen Zeitstempel des letzten Modifikationsdatums:
http://cdn6.wstatic.com/templates/erzgebirge/styles-yui-min-1350656989.css

Wer sich übrigens dafür interessiert, wie ich das für xt:Commerce umgesetzt habe, dass die statischen Inhalte über Cloudfront ausgeliefert werden, möge dies bitte in den Kommentaren kundtun. Dann kann ich das auch mal in einem Artikel entsprechend aufbereiten.

Was das ganze gebracht hat sind zwei weitere Punkte auf der Skala: 97 von 100. Der Rest liegt nicht mehr wirklich in meiner Macht, außer, ich würde Google Analytics, olark und die SSL-Logos rauswerfen.

Sublime Text 2 Settings

Martin over at The Amazing Web asked for Sublime Text 2 Settings yesterday, so here we go:

{
    "font_face": "Consolas",
    "font_size": 15.0,
    "word_wrap": "true",
    "highlight_line": true,
    "tab_size": 4,
    "translate_tabs_to_spaces": false,
    "line_padding_bottom": 1
}

I’m a huge fan of Microsoft’s Consolas font, so this is my default in both Sublime Text 2 and iTerm 2. The font size looks a little bit to large, but Consolas in 15pt is similar to Monaco in 13pt.
As Martin I hate scrolling horizontally and like my lines highlighted, however, I prefer tabs over spaces when it comes to indentation. The line padding is taken from Martin, it makes things way mare readable.

There are no color scheme settings in my config. As most Sublime Text 2 users I was a long-time Textmate user before and loved their Twilight theme (also on a dark background). However, I instantly fell in love with Sublime’s default Monokai theme and I’m still happy with it.

And I’m pretty happy I finally had the chance to play with Lea Verou’s great prism.js for this post.

Remote Debugging Safari on iOS

Remote debugging finally comes built into Mac OS and iOS 6. All you need is Safari 6 (which is, as the windows version of Safari was discontinued silently, only available on Mac OS) and the afore mentioned iOS 6.

If not done so already you have to turn on the Developer menu in the safari settings.

On the device, go to ‘Settings’ – ‘Safari’ – ‘Advanced’ and turn on ‘Web Inspector’ (which was translated to ‘Webinformationen’ in german).

Once you connect your device thru USB it shows up with it’s name in the Developer menu and you can start debugging sites opened in Safari or chrome-less web apps. This also works with pages opened in the simulator and will make tools like iWebInspector obsolete. However, as it only works on iOS, there is still a gap when it comes to debugging on android devices which, so there is still a place for Adobe Shadow out there.

Update: The ink’s not yet dry on this post as Adobe discontinued Shadow and replaced it with Edge Inspect, which is part of the Creative Cloud and therefore no longer free.

#smashingconf 2012

This is a somewhat different review for the first Smashing Conference. Actually it’s more about my learnings. If you prefer real reviews check out this article by t3n (german) or Brad Frost’s liveblogs on the talks (english). He has done a tremendous job.
For even more reviews and slides check out the lanyard page for Smashing Conference.

Our workflow and our tools are broken

My workflow hasn’t changed much over the last decade. Sure, I made the transition from Windows to Mac OS and I fought at the front when we moved away from table-based layouts. But the way I design (I’m not a designer, but that’s a different story) and build websites is still pretty much the same. And it doesn’t make a real difference on which OS you use Photoshop or if you write <div> or <table> in your favorite editor.

However, this time it’s not just switching tables for divs and font-Tags for inline-styles.

This time, we have to reinvent our workflow from scratch. For as long as the web exists we were used to work for an audience that has a desktop computer. This is definitely over.

Gridsystems

I know, I’m late to the party. But I’ve never been into gridsystems like 960.gs. And every time I see a template that uses one I know why. There are so many classes in the markup that are only there for presentational reasons I’d like to punch someone in the face. I like my markup clean and uncluttered.

But attending Andy Clarks great workshop on responsive webdesign made me rethink this. However, I will not take 960.gs and say ‘Hooray!’. No, I will build my own grid that fits every project best and gridsetapp.com will come in handy. As Andy’s very own page proofs a grid has not to be present in the markup. Andy likes his markup clean and uncluttered, too (Don’t believe me? Buy his book).

RWD

Not designing with a responsive approach in 2012 is like using table-based layouts in 2005. This might sound obvious. Or harsh, especially to those of you who are doing crap as in the screenshot above.

But let’s face the reality:
As you might know I sell cuckoo clocks (and some other stuff) for a living. Most of our customers are everything but tech-savvy.

These numbers reflect the first eight month on three of our stores (both english and german). The cuckoo clocks lead the bunch with 16% mobile usage! And non of our stores is responsive by any means!

Honestly, I should have checked these numbers earlier. Our latest project will launch in a few days and it will not be responsive. Well, lesson learned.

Getting responsive

Designing for a responsive web is however way more than throwing in some media queries to target different viewports. We have to rethink the whole process, we have to talk about typography, color and texture first and layout last. Focus on the mood, as Andy Clarke pointed out. Style guides, as shown by Stephen Hay, can help us to achive this.

But there is even more to responsiveness than that. We have to focus even more on performance (check out my articles in german on this topic). The user is willing to wait five seconds for your website to load and most users expect it to load even faster than on the desktop. They are probably on the go and want the information fast. Performance is invisible and you can’t mock that up in Photoshop.

And they want the thing, as Brad Frost named it. In an e-commerce context this means they don’t want product reviews, similar products and what the last guy, who bought it, ate yesterday. They want the product, the price and the description. Period. You can point him to the other information and then load the stuff conditional if the user really wants to know more about that Falafel.

To wrap this up: In RWD, you have to use your brain first and Photoshop second.

This means a lot of work ahead, especially when I look at the OXID shop system and how it currently handles things (but that’s an other story, too). But we build the world of tomorrow. This is an exiting journey and it’s great to be part of it.


Ein Paypal-Account, mehrere Shops, verschiedene Logos

Ein Paypal-Account, mehrere Shops, verschiedene Logos

Der Titel ist zugegebenermaßen etwas sperrig. Bei Elmastudio ist gestern ein Artikel erschienen, wie man die Paypal-Bezahlzeite etwas individualisieren kann.
Hat man jetzt mehrere Shops auf einem Paypal-Account laufen muss man sich aber nicht zwingend für das Logo der ‘Dachgesellschaft’ entscheiden, das der Kunde vermutlich gar nicht kennt und eher vorsichtig skeptisch reagiert. Denn man kann für das Paypal Standard Payment über entsprechende Parameter das gewünschte Logo mitgeben:

cpp_header_image
ist die max. 750×90 Pixel große Kopfgrafik
cpp_logo_image
ist das max. 190×60 Pixel große Logo

Bei cpp_logo_image muss man darauf achten, dass die übergebene URL maximal 127 Zeichen lang sein darf. Wer also bereits http://www.verein-zur-erhaltung-historischer-feuerwehrfahrzeuge-und-geraete.de/ 1 als Domain hat sollte sich bei Pfad und Bildnamen eher kurz halten.

Und so sieht das dann aus:




1 Wer meint, den Fehler gefunden zu haben, kann sich ja mal in den Kommentaren melden. Ich überleg mir was schönes.

Page 4 of 9« First...23456...Last »