iPhoneBlog.de iPhoneBlog.de
van Alex Olma
1. August 2014 – 0:01 Uhr

iPhoneBlog.de 4.0 | Responsives Design

7 aus 10 (von euch) surfen aufs iPhoneBlog.de mit einem iPhone und iPad. Es ist an der Zeit, diesen (neuen) Zustand auch im Layout zu berücksichtigen. Ab heute gilt hier: ‚iPhone First‘. Das ändert alles. Wieder einmal.

IPhoneBlog de mac ipad iphone

Mein Blog führte in den vergangenen Monaten ein seltsames Doppelleben. Über das letzte Jahresviertel grübelten, diskutierten und experimentierten Kollege Philip Bräunlich und ich an der bislang größten Umgestaltung, die dieses Blog auf allen aktuellen (und hoffentlich auch zukünftigen) Geräten besser macht. Besser für euch, besser für Werbepartner und zu guter Letzt auch für mich.

Auch wenn’s kitschig klingt: Ich liebe es ein Blog zu schreiben, das ich selbst gerne lese. Mit dem neuen Layout habe ich nun den passenden Bilderrahmen für meine Schmierereien gefunden.

Hier die drei wichtigsten Changelog-Einträge:

  • Kein ‚Mobile Theme‘ und keine App: Ein responsives Design, das sich unabhängig der Bildschirmgröße anpasst, ist es geworden. Nun ist es egal ob du mit einem 4-Zoll-iPhone, einem 7.9-Zoll-iPad oder einem Retina-MacBook hier aufschlägst.
  • Meine Liebe zu Schwarz-Weiß ist offiziell beendet. Als zusätzliche Farbe – für Links und Zwischenüberschriften – stellt sich #149791, von mir liebevoll als smaragdgrün bezeichnet, vor.
  • Mein Vertrauen spreche ich außerdem zwei neuen Schriften aus, die sich allerdings nicht leicht aufspüren ließen. Eine gefühlte Ewigkeit haben wir uns bei der Auswahl durch den Typekit-Katalog getastet um schlussendlich bei Quadro Slab (für die Artikelüberschriften) und Proxima Nova (für den Fließtext) hängenzubleiben.

Podcast

Damit ist die technische Einleitung getan, für mehr Details haben Philip und ich uns ein paar Minuten vor das Mikrofon gesetzt. Die Aufnahme entstand (aus Gründen 1) bereits im April.

Business

iPhoneBlog.de ist mittlerweile im achten Jahr, davon fünf Jahre mein Vollzeitjob. Mit diesem Layout-Reset geht auch ein Neustart für die Vermarktung einher. Alle großen Reklamepartner sind raus, ich verkaufe meine Werbeplätze jetzt selbst – mit mehr Präzision aber ohne großflächige (oft blinkende) Wallpaper-Ads2.

Deshalb gilt: Ihr wollt ein Produkt bewerben? Ihr seid Entwickler und könnt in eurer Release-Woche ein bisschen Aufmerksamkeit gebrauchen? Lest doch mal in dieses Dokument rein und schreibt mir dann eine Mail!

IPhoneBlog de iphone

Ich wiederhole mich, meine es aber vollkommen ernst: Ich hoffe das neue Layout macht euch genauso viel Spaß beim Lesen, wie es uns schon bei der Erstellung bereitet hat. Außerdem: Nur durch euer Interesse – per Web, RSS-Feed, Podcast, Facebook sowie am @iPhoneBlog und @iPhoneBlog_Link – ist das hier alles erst möglich. Und dafür bin ich euch weiterhin extrem dankbar.


  1. Warum das neue Layout nicht eher an den Start schritt, obwohl es startklar gewesen wäre, erzähle ich gerne jedem privat – bei einem Hipster-Milchkaffee, unter vier Augen. 
  2. Auch weiterhin gilt: Google Ads, Pop-up-Banner, bezahlte Artikel, Sponsor-Links und Co. gab es hier nie und wird es auch in Zukunft nie geben. 
  • Peter Schmidt

    Gefällt mir sehr gut! Mach weiter so!!!

  • n.ladas

    Sieht klasse aus. Ich lese dein Blog sehr gerne ! bitte weiterhin tolle Artikel bringen ;)

  • Du hast Dich ja lange dagegen gewehrt, auf dem iPhone „anders“ auszusehen als am Desktop. Der Schritt jetzt ist super gelungen!

  • Patrick

    +1 für den modernen Apple Blog :)
    Ist gut geworden.

  • Philippus

    mir gefällt es sehr gut freu mich schon auf zukünftiges lesen !

  • Johannes Schmidt

    Erst nach der Umstellung auf das neue Layout merkt man, was einem vorher gefehlt hat.
    Ein mutiger Schritt, die Bannerplätze selbst zu verkaufen, ich hoffe, es zahlt sich aus. Dein Ansatz stimmt mich zuversichtlich, dass Qualitätsjournalismus auch im Netz möglich ist – weiter so! :)

  • Deine Liebe zu Schwarz-Weiß ist mir bisher gar nicht aufgefallen, zu dominant war die hälftige, oft magentafarbige Umrahmung des Bannerhintergrunds!

    • Ohje! Editieren/korrigieren eines (ggfs. noch nicht gespeicherten) Kommentars scheint mit dem iPad nicht zu gehen. Nachdem ich ein mal den Cursor positioniert habe, kann ich nicht mehr tippen, nur noch copy, cut und paste :(

      • Schein ein Problem mit Disqus. Wenn du das Kommentarfeld verlässt (Fertig) und nochmal reinklickst, geht es (hier).

        Ist natürlich kein Lösung…schaue ich mir an.

      • Hier nicht. Behelfe mir, indem ich den Text in eine Notiz kopiere, dort fertig schreibe und hier wieder drüberpaste.

      • Alex

        Ist ein altbekannter Bug in disqus auf dem iPad. Tritt üblicherweise aber erst bei sehr langen Kommentaren auf, und damit nur sehr selten. Mit dem neuen Design der Seite scheint beim Verschieben des Cursors aber noch was anderes schief zu laufen, so dass das Problem auch schon früher auftritt. Daher besser immer gleich fehlerfrei schreiben, damit man den Cursor nicht versetzen muss ;-)

  • Ottker

    Erstmal großes Lob an Philip und an dich! Das Redesign ist euch sehr gut gelungen.
    Aber eine Sache ist mir aufgefallen:
    Meinst du, dein iPhoneBlog-Logo gegen Werbung zu tauschen ist eine gute Idee? Nicht, dass das hier nachher wie ein „CandyCrush“-Blog aussieht?!

    • Danke!

      Nun ja, ich will das mal ausprobieren. Vielleicht wird das angenommen, vielleicht nicht (sowohl von Lesern wie auch Werbepartnern). Ich finde es zumindest einen kreativen Ansatz, der mir die ganzen anderen (viel unangenehmeren) Werbeformate erspart.

      • auf dem iPad sehe ich gar keine Werbung. Cool! Bleibt das so?

      • Nö, hoffentlich nicht (wenn man dieses Blog weiter lesen möchte ;)).

      • Ottker

        Ok, da hast du Recht.
        Wenn uns ein kleines App-Logo den großen, rosa Rahmen um das iPhoneBlog erspart, haben wohl alle gewonnen. :D

  • Nico

    Ist richtig gut geworden – Glückwunsch!

  • olfi66

    Das neue Design gefällt mir sehr gut und funktioniert prima auf dem iPad. Sehr schön, das die rechte Seitenleiste verschwindet, wenn man das iPad im Hochformat hält. Das kannte ich bisher nicht von anderen Websites. Grosses Lob an Philip und dich.

  • speedlimiter

    Respekt! So geht Web in 2014.

  • Max Rebo

    Dinge, die ich hasse:
    -das neue iPhoneblog- Design
    -Ironie
    -Listen
    ;-)

  • Oliver Eichhorn

    Auch von mir gibts nur Lob (und Flattr). Der Font ist wirklich toll!

    • Das ist so gewollt. Ich verweise auf den Podcast. Siehe auch alle anderen Bilder im Blog.

  • karlimann

    Auf dem iPad und iPhone sieht die neue Seite wirklich toll aus!

    Am Rechner selbst mit 24″ hier in der Arbeit oder daheim am 27″ gibt es das „Problem“, dass die vorhandene Breite einfach nicht ausgenutzt wird. Der Text steht in einer schmalen Spalte mittig am Monitor.

    Kann man das nicht auch noch optimieren? Das sieht man ja leider bei vielen Seiten, daß die Breite nicht oder kaum genutzt wird.

    Seitlich gibt es Links zu deinen anderen Projekten. Die Seite von Superhyperturbo geht bei mir gerade nicht, ist die offline?

    • Das haben wir uns alles angeschaut. Dann werden die Zeilen zu lang oder die Schrift zu monströs.

  • Um es kurz zu machen: Gefällt mir!

  • Seb

    sieht super aus! :)

  • Sehr schön! Ok die Schrift Quadro Slap ist nicht so meins, dafür genieße ich die weit bessere Lesbarkeit auf dem iPhone. Eigene Werbeeinblendungen ergeben einen Sinn, denn da kann Adblock nicht so einfach mal alles filtern.

  • alwiz

    Sehr hübsch! Gefällt mir. Ich habe allerdings ein Darstellunsproblem auf einem Win7 PC mit Firefox, wenn man auf die „…“ Links klickt. Das Popup, das sich dann öffnet ist quasi nicht lesbar

    • Same here: Windows 7, Internet Explorer 10, Darstellung sieht genau so aus. Ansonsten sehr tolles Redesign, Glückwunsch Alex! Da schlägt jedem Webdesigner das Herz ein wenig höher :)

    • Ist bekannt. Wir arbeiten an einem Fix.

  • SirAnn

    Hi Alex! Das neue Design sieht echt auf allen meinen iDevices sehr gelungen aus. Am 24“ Bildschirm ebenfalls! Wenn du mal in Heidelberg sein solltest, dann bekommst du deinen Kaffee ;-)

  • BodenseeApple

    Hi Alex,
    sehr schön geworden.
    Bin gefühlt seit der ersten Stunde dabei und freu mich, dass es so gut läuft mit deinem Blog :D

  • nochsoeiner

    Hi Alex,

    ich schaue seit Jahren täglich vorbei und bin sehr begeistert von der neuen Version. Was mich nur ein wenig stört, ist der zu geringe Abstand zwischen den Artikeln (in dem Fall Office-Rechner: Windows, Chrome). Durch die (fast) gleiche Schriftgröße geht es fast unter.

    Wünsche Dir ganz viel Erfolg! :)

  • Andreas Schilling

    Hi Alex. Sehr, sehr schick, Glückwunsch!

  • Nikolaus Schickl

    Sieht super aus

  • Alex, meinen Glückwunsch. Ist sehr gelungen!

  • Alex

    Ich bin begeistert!

    Einziger Kritikpunkt: der Abstand zwischen den Artikeln ist zu klein, speziell wenn man den mit dem größeren Abstand bei den Zwischenüberschriften innerhalb eines Artikels vergleicht, wie z.b. bei diesem Artikel zu sehen.

  • ChiefPotato

    Auf dem Computer (hier betrachtet auf nem Retina Macbook Pro 15 Zoll) find ich den Artikel Text nen Tacken zu groß (finde die Textgröße bei Artikeln auf the Verge ideal).
    Zwischen verschiedenen Artikeln sollte auch ein größerer Abstand da sein.
    Abgesehen von solchen Kleinigkeiten siehts aber insgesamt auf Comp als auch mobile wesentlich besser aus als vorher, danke und Glückwunsch =)

  • Wirklich schön geworden, Alex!

  • Schön geworden :)

  • Markus B.

    hmm… kein Comic Sans?!?! ;)
    Ne, sieht wirklich klasse aus. Gute Arbeit!

  • Felix G.

    auf dem iPhone kommt das neue Design wirklich hervorragend rüber! Tolle Arbeit!

  • technikkram.net

    WOW Alex das neue Design gefällt mir sehr gut und ich finde es auch sehr mutig, dass Du deine Werbeplätze selber vermarkten willst und dabei drücke ich ganz fest die Daumen. Proxima Nova ist eine super Schrift, die ich selber verwende und am Desktop und Mobil einfach sehr schon zu lesen ist. Weniger (Artikel Anzahl) ist mehr (Qualität) und deine Artikel heben sich dadurch in fast allem, positiv von der „Konkurrenz“ ab. Mach also weiter so und hoch die Tassen auf die nächsten 8 Jahre.

  • Matthias

    Hallo Alex,
    Glückwunsch zu dieser wirklich „sauberen“ Arbeit (optisch und vermutlich auch vom Code). Der Podcast war sehr interessant und hat einem wirklich gezeigt, was in so einem Update steckt und gab Anregungen für eigene Projekte.

    Zu dem „Slide to unlock“-Banner fiel mir spontan ein, dass das ja auch im Videopodcast-Intro übernommen werden sollte. Wie wäre denn im Intro eine Schrift, die so einen Glanz überfährt wie im iOS-Lockscreen und dann das Icon „slidet“?:) natürlich nur eine Anregung, ehrlich gesagt gefielt mir das aktuelle Intro aber nie so richtig gut (vielleicht sind auch nur die Kanten zu wenig geglättet).

    Grüße und weiter so!
    Matthias

  • Na endlich :D Hab mich ja schon immer gefragt wie eine Website die iPhoneBlog heißt nicht wirklich zugänglich war (schön zugänglich) auf dem iPhone. Das ha ja jetzt ein Ende. Und schön viel Weißraum gibts jetzt auch, gefällt mir.

  • Schön geworden und danke für die Einblicke!
    Hoffe der neue Ansatz mit den Werbeplätzen funktioniert für dich…fände ein Zwischenfazit dazu in ein paar Monaten mal spannend.

  • Jacob

    Ich mag die vielen kleinen Details. Großes Kino.

  • Jan Michael Schult

    Total toll! Danke Alex :) mir als Verkäufer im Mobilfunk machst du mit gelassenem know how täglich meine Arbeit leichter! Viel erfolg weiterhin!

  • Daniel Demuth

    Schön: iPhoneBlog goes responsive! Macht es mir als Brillenträger gerade am Wochenende einfacher, morgens schnell noch nach Updates zu gucken. Die Schriftgröße ist klasse, der Typo klar.

    Design: Hm, ist mir fast schon ne Schüppe zu bieder. Vorteil: es lenkt nicht ab! Nachteil: es lenkt nichts ab…

  • montu

    Sieht toll aus. Lässt sich gut lesen.

    Danke!

  • Linuxuser1

    Gefällt!

  • Daumen hoch für ein schickes, prägnantes, doch angenehm zurückhaltendes Gewand.

  • Ich hab fünf Minuten nach dem Suchfeld gesucht ^_^

    Aber zum Glück muss man das nur einmal.

  • MG

    Wieso steht oben: „wird monatlich von 375.000 einzelnen Lesern besucht.“ und weiter unten im Text: „263.000 einzelne Web-Besucher (Unique Visitors)“

    ? :)

  • AlexRG

    Das ist wirklich hübsch und funktional geworden. Großes Lob.

    Zu deiner Information: Das Smaragdgrün ist für mich als farbsehschwachen nicht gesättigt genug und macht das erkennen von Links etwas anstrengend. Aber man kann es eh nie allen recht machen :)

  • sunnymtx

    Spitzenarbeit, Alex!
    Großes Lob – voll im Zeit-/Designgeist.
    Und die Schriften sind wunderbar. Besten Dank und alles Gute dafür!

  • SirAnn

    Würde das Design gerne in Verbindung mit Werbung sehen. Wann ist es denn soweit? ;-)

  • ge

    Gefällt mir insgesamt sehr gut!
    Kleine Einschränkungen: Den Größenunterschied zwischen Überschrift und Text finde ich etwas lau. Die Größe es Fliestextes finde ich an sich gut (meinen alten Augen gefällt das), aber bei der Spaltenbreite wirkt sie in meiner Meinung nach etwas „bollerig“. Und das 3D Logo gefällt mir nicht, aber das nimmt sich ja jetzt etwas mehr zurück :-)

  • Albert

    Sehr gelungen, endlich unterwegs lesbar. Herzlichen Glückwunsch

  • Pingback: Bits und so #387 (Omelette HQ) | Bits und so()

  • Ist der Footnote-Button im Theme oder ist das ein Plugin?

  • Pingback: iPhone 6 + 6 Plus: eine Handvoll unsortierter Ersteindrücke (+ Video) – iPhoneBlog.de()

  • Pingback: iPhoneBlog.de | Version 4.1 – iPhoneBlog.de()

Social

Abonnement

iPhoneBlog präsentiert wöchentlich neue Videos über App-Store-Apps und einen täglichen Ideenaustausch im privaten Slack-Kanal. Noch nicht dabei? Werde Abonnent.

Du hast schon einen Account? Login.

Support

App Store

Wer eine beliebige iPhone-App im App Store über diesen Link kauft, seinen Mac mit Software aus dem Mac App Store bestückt, ein Produkt seiner Wahl bei Amazon bestellt oder meinen Flattr-Button drückt, unterstützt das iPhoneBlog mit einem kleinen Prozentsatz des (unveränderten) Kaufpreises.

Archiv

Gastfreundschaften