Warum Seiten auf iOS 9 skaliert werden

shrink to fit auf iOS9

Neulich habe ich eine Website in unterschiedlichen Browsern durchgetestet und da ist mir aufgefallen, dass sie auf iOS 9 beim Laden kurz runter skaliert wird und dann auf die eigentliche Größe springt. Das ist bei jedem Click auf einen Link passiert, was auf Dauer sehr nervig war. Ich konnte nicht herausfinden, was der eigentliche Grund war für das hin und her springen (wahrscheinlich habe ich irgendwas bei den Abmessungen verpfuscht ;)), aber zumindest weiß ich jetzt warum auf iOS 9, und nur auf iOS 9, überhaupt irgendetwas skaliert wird.

(mehr …)

Mehr lesen

Inspiration: Portfolio Websites

unique Wireframe

Es gibt schon seit Längerem große Aufregung darüber, dass im Web alles gleich aussieht. Dass alle die gleichen WordPress-Themes verwenden und die gleichen Bootstrap basierenden Websites bauen. Dass alle Websites ein großes Heroimage mit Call To Action (Scroll üblicherweise), 1 - 3 Spalten und irgendeinen Parallax-Spass haben. Dass alle DesignerInnen die gleichen Stockfotos und Iconsets verwenden, und so weiter.

Wenn man sich umschaut, wird man sehen, dass das auch wirklich so ist. Aber wessen Schuld ist das? Unsere! Natürlich ist mir klar, dass man bei den meisten Projekten wahrscheinlich nicht die gestalterischen Freiheiten hat, die man sich wünsche würde. Es gibt aber eine ganz gute Möglichkeit, wie man sich selbst kreativ verwirklichen und zeigen kann, dass es auch andere Wege gibt Websites zu gestalten: Die eigene Portfolio Website.

Nachdem meine Website nicht nur nicht schön ist, sondern sich auch in irgendeinem kostenlosen Standard WordPress Theme kleidet, habe ich nicht groß zu reden. Aber ich bin bereit mich zu bessern und habe vor, optisch etwas aus meinem Online-Auftritt zu machen.
Deswegen habe ich mich umgesehen und umgehört und ein paar Inspirationen gesammelt. In dieser kleinen Sammlung sind nicht nur zwangsweise sehr schöne, dafür aber programmier- oder layouttechnisch irgendwie besondere und auffällige Werke dabei.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #3

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Image tag vs background property

https://pawelgrzybek.com/image-tag-vs-background-property/
object-fit: cover ist für img-Tags was background-size: cover für Hintergrundbilder ist.

MediumEditor

https://yabwe.github.io/medium-editor/
Ein Inline-Editor.

CSS Best Practices

http://fantasai.inkedblade.net/style/talks/best-practices/#title
Ein paar CSS Tipps. (Mit Click/Tap blättern.)

Mehr lesen

Meine Top Picks der letzten Woche #2

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

The A11Y Project

http://a11yproject.com/
How-Tos, Checklisten, Patterns, Tests, Tipps und Mehr zum Thema Accessibility.

vienna.js

http://www.meetup.com/viennajs/
Ich war letzte Woche das erste Mal beim vienna.js Meetup und kann es nur empfehlen!

BEM with Emmet

https://pawelgrzybek.com/bem-with-emmet/
Emmet Filter für den BEM Syntax.

Critical Web Fonts

http://www.zachleat.com/web/critical-webfonts/
Kritische Buchstaben zuerst laden und dann erst den Rest.

Mehr lesen

AutoFileName: Projektroot in Sublime ändern

Autofilename Root angepasst

Ich könnte mir die Arbeit in Sublime ohne dem Plugin AutoFileName nicht mehr vorstellen. Bis vor Kurzem hat mich aber eine Sache gestört. Immer wenn ich einen Pfad mit / begonnen habe, wurde der Pfad relativ zum Root meines Computers vervollständigt, anstatt relativ zum Root meines Projekts. Zum Glück kann man den Projektroot in Sublime ändern.

Wie ich dieses Problem gelöst habe, erkläre ich gleich. Vorher möchte ich aber AutoFileName kurz vorstellen.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #1

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Jank Free

http://jankfree.org/
Artikel, Videos und Slides zum Thema „Ruckelfreie Animation mit CSS (und Javascript)“.

Vienna

http://www.vienna-rss.org/
Open Source RSS Reader für OS X

How to Create Visually Effective Calls-To-Action

http://rafaltomal.com/visually-effective-cta/
Ein kurzer Artikel, der beschreibt was man für effektive Calls-To-Action beachten kann/soll.

About Those Lava Lamps

https://gist.github.com/marick/3ec112bc38b2af267e15
Ein nette Anekdote zur Mitarbeitermotivation

Mehr lesen

Toolbar in Chrome für Android einfärben

Toolbar in Chrome für Android einfärben

Es wird wahrscheinlich aufgefallen sein, dass manche Browserfenster auf Android seit einigen Monaten überraschend bunt sind. Das ist möglich seit Chrome 39 für Android, weil in dieser Version ein neuer Meta-Tag vorgestellt worden ist.

<meta name="theme-color" content="#123456">

Mit dem theme-color Meta-Tag kann man die Status- und Adressleiste einfärben, wie man in den Screenshots oben sehen kann.

Auf iOS funktioniert der Meta-Tag nicht, da kann man nur einstellen wie die Statusleiste im Fullscreen-Modus aussieht.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Damit man die Darstellung der Statusleiste in iOS ändern kann, muss die Website im Fullscreen-Modus sein, deswegen werden beide Meta-Tags benötigt. Eigene Farben kann man nicht angeben, man hat nur die Wahl zwischen default, black und black-translucent.

Mehr lesen