Alle Artikel von Steffen Mehner

Über Steffen Mehner

lebt in Dresden und ist Grafik- & Webdesigner. Studiert hat er Industriedesign - und das noch voll analog. Da sich die Grundfarben auch in der digitalen Welt nicht verändert haben, war das kaum von Nachteil. Gestaltungsprinzipien und Technologien, um diese auch gut umzusetzen, interessieren ihn immer wieder.

Viewport Responsive HTML5 Markup Devices

Der Viewport.

Ein Thema, welches gern vernachlässigt wird, ist der Viewport!

Einmal im Markup vergessen, geht auf mobilen Devices nix mehr korrekt. Dabei handelt es sich um die zahlreichen Möglichkeiten, Skalierungsfaktoren auf den Mobilgeräten zu definieren.

Als böser Fallensteller erweist sich dann auch speziell apple. Webdesigner werden vielleicht auch schon stundenlang gegrübelt haben, wenn ihre Kunden sich über „alternative“ Darstellung der Website auf dem iPhone – speziell im Landscape Modus – beklagt haben. Hier ein kleiner Leitfaden, was alles geht und wichtig ist – nicht nur bei den Geräten mit dem angebissenen Obst…

» Developer Guide

WordPress absichern

Eine wirklich gute und simple Maßnahme, dein WP-Blog oder Website vor sinnlosen Attacken, wie Spamkommentaren oder abstrusen Subscribe-Usern zu schützen, ist natürlich ein SSL-Zertifikat beim Provider. Damit kann man den Adminbereich wirkungsvoll dicht machen! Vorausgesetzt, man hat den entsprechenden Workarround in der Konfiguration integriert. Beim Aufrufen des Frontends kann es nun aber passieren, dass die komplette Site über das SSL-Zertifikat aufgerufen wird – das kann zu unschönen Darstellungen (falsche Pfade…) führen und nervt…

Aber es gibt ja immer fleißige und kluge Entwickler, die sich über diese „Schönheitsfehler“ einiger CMS immer wieder Gedanken machen. Ich zitiere daher ein solches Script, da es auch auf einer Website von mir erfolgreich zum Einsatz gekommen ist.

Bildquelle: www.thbhacking.com

Switch von Backend https zu Frontend http für WordPress:

/* *  Redirect WordPress front end https URLs to http without a plugin
* Necessary when running forced SSL in admin and you don’t want links to the front     end to remain https.
* @link http://blackhillswebworks.com/?p=5088
*/

add_action( ‚template_redirect‘, ‚bhww_ssl_template_redirect‘, 1 );
    function bhww_ssl_template_redirect() {
        if ( is_ssl() && ! is_admin() ) {
        if ( 0 === strpos( $_SERVER[‚REQUEST_URI‘], ‚http‘ ) ) {
       wp_redirect( preg_replace( ‚|^https://|‘, ‚http://‘, $_SERVER[‚REQUEST_URI‘] ), 301 );
exit();
} else {
       wp_redirect( ‚http://‘ . $_SERVER[‚HTTP_HOST‘] . $_SERVER[‚REQUEST_URI‘], 301 );
exit();
          }
     }
}

» Link zum Autor

 

Safari == MSIE

Zitat: „Es ist schwer herauszufinden, warum Apple so vorgeht. Sie schicken nie jemanden zu Web-Konferenzen, ihr Surfin‘-Safari-Blog ist nur noch ein Schatten seiner selbst, und bis zum nächsten WWDC weiß keiner, was die nächste Version von Safari enthalten wird. Auf eine Art ist Apple wie Santa Claus, der einmal im Jahr zu uns runterkommt, um uns ein paar sehnlichst erwartete Geschenke zu bringen, ohne Vorwarnung, welche unserer Wünsche er dieses Jahr erfüllt. Und offen gesagt sind die Geschenke in der letzten Zeit immer kleiner geworden…“ Quelle: http://t3n.de

Zur Obstkritik

Material Design

Was auch immer dies heißt – Google gibt hier offenbar die zukünftigen Webstandards für UI- oder GUI-Designer, Webdesigner und Entwickler mit Gestaltungshintergrund vor. Der Name beschreibt nicht zu 100% das, was dahintersteckt. Die Idee ist gut und Googles Flat-Design inklusive der grundlegenden Animationen bzw. Transitions für Aktionen oder Interaktionen trägt eine klare Sprache. Bild/Video: Google

WordPress!

Dass man mit WordPress sehr passable Websites erstellen kann, ist usus. Vielen immer noch als Blogging-Engine geläufig und geschmäht für den Einsatz als CMS, kann ich nur sagen – ich liebe es. Webdesign für Kunden bedeutet oft: Es muss bedienbar sein – und nun hat es scheinbar auch der Mittelstand begriffen – auf den wichtigsten Endgeräten laufen…Mein neuestes Projekt: Der Relaunch der Website für die Sportoberschule Dresden. Funktioniert sogar im IE! Mit dabei: XML-Importe für Vertretungspläne – hier war der WP-All-Import das geeignete Tool. Nicht unerwähnt möchte ich das Basistemplate lassen. Es ist das Theme „16“ von Oliver Gast einem unermüdlichen Webworker und WordPressentwickler.

Genial

Genericons sind ja nun nicht neu – der Ansatz, fontbasierend Icons via CSS einzubinden und diese dann auch mit allen Optionen editieren zu können, begeistert mich immer wieder! Das ganze ist ja auch noch vektorisiert und damit skalierbar bis zum Himmel…

Falls es immer noch Webentwickler gibt, die von alledem keine Ahnung haben – hier der entsprechende Link.

Browserstats

Erschreckend ist`s, wenn man mal wieder in die Statistik schaut. Man glaubt es kaum mehr – aber der Liebling aller Webdesigner ist allgegenwärtig. 54% Marktanteil hat der Internet-Explorer (MSIE) – nach wie vor – und etwas versöhnlich stimmt die Tatsache, dass dieser nun wenigstens mit den Basics des modernen Webdesigns umgehen kann. Effektvolle Websites mit den Versionen < 9,10,11 aufzurufen, löst extreme Kopfschmerzen aus! Der WinXP-Support läuft ja 2014 aus – doch sehr viele nutzen auch weiterhin die „alte“ Technik. Mac-User sind da schmerzbefreiter… Bildquelle: ferchau.engineering

Parallaxen

Die neuen Möglichkeiten in HTML5 & Co machen experimentierfreudiger denn je.
Parallax-Scroller bieten auch einige reizvolle Navigationsprinzipien. Unter FirefoxOS kann man die vertikale Scrollfunktion des Browsers mal ausreizen. Bei Billy`s Diner ist es der reine Effekt. Irgendwie Trend in 2013 gewesen… Ich würde es fast mit dem Wischeffekt beim Touchscreen vergleichen – sogar mit der Chance, 3D-Umgebungen zu simulieren. Vielleicht wird man sich daran gewöhnen müssen. Ich habe es als „Underwater“-Effekt ebenfalls mal integriert und bin irgendwie fasziniert…

Lieber mehr weniger.

Wie und in welcher Form  – schnell und gut präsentieren? Darum geht es bei Layout-und Screendesign, insbesondere wenn man benutzerfreundlich ankommen will…

Über responsibles Webdesign wird auch hier heftig gegrübelt – als wenn es nicht schon schwer genug wäre, es jedem und allen Recht zu machen. Barrierefrei, browserübergreifend und natürlich konsistent im Erscheinungsbild sollten gute Websites, Portfolios oder eShops schon programmiert sein, um sich als Lesezeichen einen gebührenden Platz in den persönlichen Hitlisten zu sichern!

Das wird auch immer das Hauptthema des von L@b404 bleiben. Ob der schönen unendlichen Möglichkeiten ist eine Website ja auch nie richtig fertig. Manch Designer wird dies anders sehen. Hier wird aber dennoch öfter mal umgebaut, denn für einige (mobile) Geräte auf dem Markt sind noch keine Breakpoints gesetzt. Und die Liste wird immer länger. Die wichtigsten sind:

  • 320 Pixel (iPhone Hochformat)
  • 480 Pixel (iPhone Querformat)
  • 649 (Kleines Tablet Querformat)
  • 768 Pixel (iPad Hochformat)
  • 1024 Pixel (iPad Querformat)
  • 1200 Pixel (Laptop)
  • 1600 Pixel (Mega-Displays und TV)

Creme Flash

Trotz aller Hoffnungen, dass HTML5 die Flash-Anwendungen für Webvideos und vieles mehr überflüssig machen würde, bleiben einfach noch zu viele Hürden. Die Unmengen von Flash-Inhalten – wie etwa Advertising-Files – werden so bald kaum verschwinden!

HTML5 ist ein zeitintensives Medium für Kreative und immer noch nicht in allen Browsern und Plattformen konsistent umzusetzen. Das ist sicher die größte Enttäuschung : Selbst der sauberste HTML5-Code liefert nicht die saubere Performance, die ein gut kodierter Flash-Film bietet… (frei übersetzt | Quelle: WDD)

Zum Originalbeitrag

UX meets scrolltop

Alles gut und reizvoll – die herrlichen Möglichkeiten, die uns die HTML5-Welt so bietet. Da wird gescrollt und getraggt, gemouseovert und vieles andere mehr. Es geht fast alles – natürlich muss man den richtigen Browser verwenden – es soll ja noch Leute geben, die gar nix von der Existenz geeigneterer Web3.0-Tools wissen – sich lieber mit dem vorinstallierten Microsoft-Browser rumärgern… One-Page-Sites sind eine schöne Sache – weil sehr interaktiv und oft mit vielen Effects versehen – auch hier gilt dennoch: Less is More.

Eine Website wie http://moto.oakley.com ist wahnsinnig gut gemacht – wenn man nicht unbedingt was Bestimmtes schnell sucht. Hier geht alles mit den Pfeiltasten – man muss es nur wissen… Bildquelle: webdesignerdepot.com

Publishing Ideas

Ein schnell konfigurierbarer VideoPlayer für alle Anforderungen – ist der JW-Player.
Viele Unternehmen, Blogger, Designer und Entwickler verwenden diesen, um ihre Videos zu teilen.

Durch die duale HTML5 & Flash-Wiedergabe ermöglicht der Player atemberaubende Videos auf mobilen Geräten genauso wie auf dem Desktop. In der aktuellen Version 6 sind zehn topaktuellen Funktionen integriert. Man kann auch die freie Version des JW-Players in beiden Varianten verwalten –  Cloud- oder self-gehosted.  Es muss also nicht immer nur der Youtube-Channel sein!

Hier gibts den JW-Player

Networkz

Netzwerken ist mittlerweile ein Wirtschaftsfaktor und interessanter Content vielleicht das Non + Ultra. Ein Zitat: „Ich verdiene meinen Lebensunterhalt durch die Beziehungen, die ich über LinkedIn geknüpft habe…“ Natürlich sind das ernstzunehmende Businessnetzwerke. Es gibt nicht  nur die Klassiker wie FB, In oder Xing, sondern mittlerweile sehr viele  – noch unpopuläre Portale und vermeintliche „Sammelstellen“ für alle und jeden Geschmack – und das ist gut so. Ein – zumindest grafisch – interessantes Netzwerk habe ich vor Kurzem entdeckt. Das heißt – ich entdecke es noch, denn es ist manchmal auch recht schwierig, deren Sinn oder Zweck auf den ersten Blick zu erkennen…

Zu Good Stuff

jQuery Mary

Alles, was der Webdesigner von heute so braucht[?] – und das unter dem Motto:

„[Always*with_a][ Difference]; „

Ausgehend von CSS3 Mediaqueries über Less bzw. Sass gibt es so schöne Tools – wie GridPak , die einem viel Zeit beim Layouten sparen. Die Zeitersparnis wird allerdings vom Internet Explorer   – zumindest bis Version 9/10 – wieder völlig zunichte gemacht. Viele Frontend-Spezialisten wissen, wovon die Rede ist. Um moderne Websites auch auf dem Microsoft-Browser korrekt anzeigen zu können, wurden und werden auch immer noch Browser-Weichen sowie alternative Style-Sheets integriert.

Erstaunlich ebenso ist, wie lange sich ein so schlechtes Produkt gegen die stets W3C-konformeren und besser zu navigierenden Browser wie Firefox, Chrome oder Safari behaupten konnte.

Ohne die Monopolstellung unter Windows hätte das nie funktioniert. O.g. aktuelle Versionen unter Win7 und 8 scheinen nun auf dem Weg der Besserung. Es wurde echt höchste Zeit…

Responsive oder Quatsch?

Kontroverse in Boomzeiten der Responsive-Offensive. Diskussionswürdig allemal – die User Experience wird es immer zeigen…

Warum responsive Webdesign Schrott ist…(?)


Und deshalb habe ich gleich mal ein responsives Template installiert, um zu testen, was man damit alles so machen kann.  Der Slider im Header brauchte schon noch so kleine Anpassungen – ist aber nun schön herunterskalierbar und auch auf einem Tablet PC/ iPad, Androidhandy oder dem iPhone noch funktional.

Sehen kann man das hier