Viewport Meta Tag: Minimal-UI

With the introduction of iOS 7.1 Safari understands a new viewport meta tag which automatically reduces the mobile Safari ui to a minimum. I think it’s a great addition and hope other browsers will support it in the future, too.

<meta name="viewport" content="width=device-width, minimal-ui">

Here is my blog before and after adding minimal-ui:

minimal-ui-example

Hint: As a user you can get the menu bar back by tapping on the url.

Update: I wrote a follow up post explaining why minimal-ui might not be such a good idea.

Weekly Recap

This week the links are all on very different topics. Hope you like it.

  • A simple guide to responsive design.
    You are just getting started with responsive design and want an easy to understand introduction to some basic coding principles? Here you go, this is for you.

  • InstantClick
    This Javascript library preloads links you are about to click, more precisely when you hover over a link. There are even options for only preloading on mouse down so you don’t have to waste requests and still get a small performance boost. This is a pretty clever idea which will makes your site feel faster even if it isn’t.

  • Sublime Text Setup
    A simple starting guide to Sublime Text by Dave Rupert. Also lots of recommendations and tips in the comments.

  • Mediocre ideas, showing up, and persistence.
    Although this article by Chris Coyier is from last year, it’s good to revisit it once in a while. Now is this time.

  • Protecting Against Link Rot While Embracing the Future
    Making sure embedded content will always be accessible even if a service closes is a pretty good idea. Here is how you can do it with embedded CodePens. Even though we all hope we will never be without CodePen.

  • Parent selector: On has() and ^
    Hugo Giraudel explains the two possible syntax options for the upcoming CSS parent selector. I’m with him, by the way.

  • Multiple Simultaneous Ajax Requests (with one callback) in jQuery
    I’m still relatively new to Javascript, or jQuery, compared to HTML and CSS and am learning so much with every article I read on the topic. If you read this one, make also sure to read the comments, they provide an even simpler solution for the explained problem.

  • Harry Roberts on big CSS, working for Sky, and being a home bird
    Nice, short interview with Harry Roberts. Worth a read.

Screencast: Menüpunkte gleichmäßig horizontal verteilen mit text-align: justify;

Themenvorschläge? Wünsche für weitere Screencasts? Wenn es euch gefallen hat, vergesst nicht den Like. Danke! n_n

Mittlerweile wurde auch eine 100% funktionierende Lösung gefunden: CodePen. Ein Dankeschön geht an Christopher Bohnenberger!

Update: Funktioniert offenbar nicht in Firefox. :/

So funktioniert es in Firefox, dann bleibt aber noch der Abstand unten: CodePen.

Abonnieren für mehr Screencasts.

Using Google Web Fonts

Web Fonts are a big thing in Web Development at the moment and I think they will be for a long time to come.

While there are very good paid font libraries like Typekit or myfonts.com or the relatively new cloud.typography.com by the awesome H&FJ there is still the Google web fonts library, which contains a lot of really good free to use fonts.

What I did in the past was, I downloaded the fonts I wanted to use to host them on my on server for having total control and minimising my http requests. But a while back Sergej and I discovered that you shouldn’t do this even though you can. And here is why:

If you use one of the solutions Google presents you with, they will actually serve different, optimised font files depending on the browser and OS of your visitor.

Awesome, right?

I for one place the link tag in the head:

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

For a little performance boost you can add this line to your head before loading the font to prefetch the Google Fonts DNS:

<link href="//fonts.googleapis.com" rel="dns-prefetch">

Optional Tags in HTML

Jens O. Meiert:

For convenience and in order to allow for additional bits or bytes being saved in your markup, here’s a list of all optional tags according to the HTML 4.01 Strict DTD.

Last week or so I had a conversation on Twitter with Daniel whether you can resign html, head and body tags. Turns out that’s true and there are also some closing tags which are dispensable. Nevertheless I will continue to use all of them.

Harry Roberts HTML/CSS coding style

Harry Roberts:

When I write HTML and CSS I have a certain set of rules and guidelines I stick to with regards syntax and formatting. I‘ve decided to write them up here not to preach or tell you how to do things, but simply to share how I like to work.

Harry Roberts wrote about his HTML/CSS coding style. I think I’ll adopt some ideas and will write about my own coding style in the near future.
I wanted to do this for a long time and never got around to it. Harry’s article might be the kick in the ass I needed.

Bandwidth Media Queries

Chris Coyier:

That issue is: bandwidth. If I’m in a place / on a device that has super slow internet, I’d love to be served a very light web page so browsing is still acceptably fast. If I’m in a place / on a device that has super fast internet, by all means ratchet it up and deliver me more.

Chris Coyier wishes for media queries which could detect the bandwidth of the internet connection. This would be to cool to be true.
But even a picture tag, which could deliver different files for different screen sizes would be a step forward. Yes, there are Javascript solutions for that, but it is not perfect and it would be better if there was a simple HTML solution.

Automatisches Selektieren eines Textsnippets

Dass es bald eine read-only API für QUOTE.fm geben wird ist ein offenes Geheimnis und daher baue ich gerade den Labs-Bereich in dem die API erklärt wird, man eigene Apps anlegen kann und später auch diverse Snippets für die eigene Webseite findet.

Wer zum Beispiel schon mal mit der Twitter API gearbeitet hat, weiß, dass man für jede App, die man anlegt diverse geheime Codes bekommt, die man dann kopieren und irgendwo in den eigenen Code einfügen muss. Teilweise beinhalten dieses Codes so seltsame Zeichen, dass ein schnelles Markieren per Doppelklick nicht möglich ist. Natürlich kann man den Text dann auch ganz normal markieren und kopieren. Oft nervt das aber und hält unnötig auf.

Es gibt eine – wahrscheinlich auch noch tausend andere – Möglichkeit, das schneller und einfacher zu machen. Deswegen wird man in der QUOTE.fm API einfach irgendwo in den Code klicken können und hat automatisch die komplette Zeile markiert und kann sie kopieren. Nur ein Detail, was die Arbeit aber etwas angenehmer macht, da man sowieso immer den kompletten Schlüssel braucht.

Die Lösung dafür ist ganz simpel. Statt irgendeines anderen Containers nehmen wir für den Code einfach ein input-Feld, setzen es auf readonly und stylen es als wäre es normaler Text.

<input class="key select" type="text" value="bYRlJaCBHJaksjdhaAS)(§Uk8o6IfbQMemhW7TOQ" readonly />

Das dazugehörige CSS:

.key {
    width: 100%;
    color: #3c3c3c;
    font-family: 'Monaco','Courier',monospace;
    font-size: 15px;
    line-height: 15px;
    border: 1px solid bold;
    font-style: italic;
}

Soweit sind wir optisch fertig. Jetzt brauchen wir nur noch einen jQuery Schnipsel und fertig sind wir. Und jQuery einbinden nicht vergessen.

$('.select').click(function(){
    $(this).select();
});

Wenn wir also irgendwo auf der Webseite einen Text automatisch ausgewählt haben wollen, können wir einfach die Klasse .select vergeben und brauchen uns nicht weiter um irgendwas kümmern.
In diesem Fall hätte ich mir eine der beiden Klassen sparen können, in einem größeren Projekt ergibt die Aufteilung aber durchaus Sinn. Viel Spaß damit!

Den Trick verwendet dribbble übrigens auch auf den Einzelseiten für die Permalink urls.

Update: Habe es auch mal kurz bei jsfiddle gebaut, damit ihr es testen könnt.

Inline styler für HTML E-Mails

Noch besser als der Inliner von Mail Chimp und genau der, den ich nicht mehr wieder fand. Danke Ingo.

Wie mich Dragonball Z ins Internet brachte

KAAAMEEEE HAAAMEEEE HAAAA!
Diesen Ausruf hat wohl jeder schon mal gehört, der schon mal Kind war. Son Goku und seine treuen Weggefährten schrien das immer, wenn sie eine ihrer berühmten Energieattacken auf einen Gegner schleuderten.

Dragonball habe ich nur stückeweise gesehen. Dragonball Z dafür bis zum Exzess. Mir fehlt nur eine Folge von rund 290 oder so. Es kam immer passend zur Abendessenszeit aus RTL II. Meine Eltern fanden das nicht so toll, ich habe mich trotzdem immer mit meinem Brot in mein Zimmer verkrümelt.

Im Rückblick kann ich nur sagen “Danke Mama, danke Papa”, denn Dragonball hat mich dazu gebracht mit Webdesign und -entwicklung anzufangen.
DragonballZ.de war damals eine verdammt große und bekannte Seite und ist es vielleicht auch heute in den einschlägigen Kreisen noch.

Für einen Freund und mich war klar: Wir wollen auch eine Dragonball Z Fanpage machen. Das muss so in der 7. oder 8. Klasse gewesen sein. Wir überlegten uns also was denn so alles da rein soll und wie das ganze auszusehen hat. Und dann musste das nur noch irgendwie gebaut werden.

Meine ersten Schritte machte ich mit einem HTML Buch eines Freundes und Microsoft Frontpage, gefolgt von, damals noch, Macromedia Dreameaver MX. Dateien lud ich per Firefox Addon FireFTP hoch. Oh Mann, das waren noch Zeiten.
Um Grafiken erstellen zu können, kaufte ich mir in einem Elektrofachhandel Photoshop Elements, nur um relativ schnell fest zu stellen, dass mir die Möglichkeiten nicht ausreichen.

Es war irgendwie ein großes Abenteur. Es gab so viel neues zu lernen. Nächtelang habe ich mir mit HTML, CSS, Photoshop, FTP-Servern und dem ganzen Kram um die Ohren geschlagen und häufig am nächsten Morgen fest gestellt, dass das Design doch scheisse ist.
Aber der Lerneffekt durch Trial und Error in dieser frühen Zeit war unglaublich groß. Außerdem hatte ich zum Glück jemanden, den ich jederzeit mit Fragen löchern konnte und dessen Hilfe ich erst jetzt im Nachhinein wirlich einschätzen kann. Danke Samuel. Schade, dass wir uns nie persönlich begegnet sind.

Ich erinnere mich noch daran wie ich mich ärgerte, dass alle Links einer Webseite offenbar die gleiche Farbe haben müssen bis ich merkte, dass man CSS Klassen auch mit Links nutzen kann.

Die Dragonball Z Fanpage haben wir nie fertig gemacht. Ich habe dann an privaten Seiten und vor allem Warhammer Fanpages gebaut. Ich hatte Warhammer-Asuryan.de und dann Tabletopfreunde.net. In diesem Zuge fing ich auch an erste Schritte in PHP zu machen. Alles nur doch anschauen, nachmachen, ausprobieren.

Und danach ging auch schon visuelleGedanken.de los. Damals noch als kleiner privater ToonBlog, stark inspiriert von Jojo.

Es gab auch mal eine Zeit als ich mit zwei Freunden ein Browsergame anfing. Konzept und Ideen waren eigentlich ziemlich gut. Das ganze verlief dann allerdings irgendwie im Sand.

Danke Son Goku, dass du so eine coole Sau warst und dafür gesorgt hast, dass ich Webkram lerne.