webksde

webks.de: Relaunch

Ein hartes Stück Arbeit war das, aber es hat sich gelohnt. Unsere rundum erneuerte Unternehmenswebsite http://www.webks.de ist online. Wie auch schon einige unserer Kundenseiten, komplett responsive, dank CSS Media-Queries. Technisch setzen wir selbstverständlich auf eine Drupal 7 Lösung. 

So selten man für die eigenen Websites inzwischen Zeit findet, folgt nun – möglichst zeitnah – ebenfalls der Relaunch unserer Drupal Themenseite DROWL.de. Selbstverständlich ebenfalls stark verschlankt und responsive.

Zum Ende natürlich noch ein frohes neues Jahr 2013, allen Lesern viel Erfolg und alles Gute im neuen Jahr!

    Kleines 1140px Grid Helper Script

    Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.

    Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.

     

    #grid-helper{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:none;
}
#grid-helper .grid-row{ 
  float:left;
  height:100%;
  width:4.85%;
  margin-right:3.8%;
  background-color:rgba(185,255,110,0.5);  
}
#grid-helper .grid-row.last{
  margin-right:0; 
} 

#grid-trigger{
  position:fixed;
  top:50%;
  right:0;
  margin-top:-50px;
  background:#000;
  color:#fff;
  padding:20px;
  cursor:pointer;
  opacity:0.1;
}
#grid-trigger:hover{
  opacity:1.0; 
}

    function webks_customer_theme_grid_helper() {
  (function($) {

    $('#page').css('position','relative')
		$('#page').append('
    ');
		//Trigger
		$('body').append('
    Show / Hide
    ');
		$("#grid-trigger").click(function() {
		  $('#grid-helper').toggle();
		});
		//Load Stylesheets
    $('').appendTo("head");
   
  })(jQuery);
}

      Google Anfahrtsrechner flexibel (responsive) darstellen

      Leider sind viele Google Widgets aktuell nicht auf der der Höhe der Zeit, so auch der Anfahrtsrechner. Dieser lässt sich allerdings leicht anpassen:

      table.gadget, table.gadget iframe{ width:100% !important; } 
table.gadget #fields table,table.gadget #fields #from, table.gadget #fields #to{ width:auto; }

        Windows 7: Datenträgerverwaltung Partition lässt sich nicht verkleinern

        Folgende Meldung erscheint, insbesondere beim verkleinern von Partitionen, in der Datenträgerverwaltung: „Der angegebene Dienst kann nicht gestartet werden. Er ist deaktiviert oder nicht mit aktivierten Geräten verbunden. “ Benutzt man eine SSD wird in der Regel der Defragmentierungsdienst beendet, da er bei dieser Bauart mehr schadet als das er nutzt. Eben dieser Dienst wird offensichtlich zur Partitionierung herangezogen, weshalb obige Meldung erscheint.

        Lösung

        Ganz pragmatisch: Dienst vorrübergehend wieder aktivieren. Bei Samsung funktioniert das ganz flink über das Tool „SSD Magican“ (falls bereits installiert). Sonst über die Services.msc (ausführen), „Defragmentierung“ / „defragsvc“ suchen und dort den Dienst entsprechend starten und später wieder beenden.

          webks: Responsive Module Plugin for jQuery

          Ein großes Problem beim gestalten von Oberflächen für Mobilgeräte, stellen Tabellen dar. Tabellen sind aufgrund ihres „Wesens“ schon gänzlich ungeeignet für schmale Displays, viele Spalten, platzraubender Inhalt. Und so nehmen sich Tabellen den Platz welchen Sie benötigen, mit der Folge das sie über die Website hinausragen und der User nach rechts scrollen muss, Katastrophe.

          Zusammen mit meinem Kollegen Julian Pustkuchen bei webks: websolutions kept simple haben wir nun eine jQuery Lösung entwickelt, welche für Jedermann kostenfrei zum Download bereitsteht.

          Anregungen und Wünsche zur Optimierung des Moduls nehmen wir selbstverständlich gerne entgegen.

            Internet Explorer IE :hover reagiert nur direkt über der Border

            Das Problem ist mir so noch nicht untergekommen, in diesem Fall ein Div, stellte den :hover-Style nur dar, sobald man sich direkt auf der Border des Divs befand, nicht aber über dem Inhalt. Die Lösung ist so einfach wie amüsant, man gebe dem Div einfach einen Hintergrund, seih es Grafik oder Farbe. 

            Damit ist das schwarze Loch im Div dann gestopft!

              Disable Firefox Zoom

              Nutzt man Firefox als Entwicklungsbrowser, ist der Zoom eine doch eher lästige Funktion die einen schonmal über einem garnicht existenten Problem brüten lässt. Um nun nicht den Zoom manuell immer wieder auf 100% setzen zu müssen, folgendes Vorgehen

              1. „about:config“ in die Firefox Adresszeile tippen
              2. „zoom.maxPercent“ auf 100
              3. „zoom.minPercent“ auf 100
              4. Firefox neu starten, fertig.

                Sprungmarken in HTML Newslettern (insb. Simplenews Content Selection)

                Nach meiner Recherche zum Thema kann ich sagen: Das Thema geistert nicht selten durchs Netz, ich hoffe dieser Artikel hilft Anderen etwas weiter.

                Das Problem: Outlook akzeptiert die aktuelle Form, sprich IDs, von Sprungmarken nicht, obwohl (angeblich) der Internet Explorer als Renderer zum Einsatz kommt (was hier Version 9 entsprechen würde, welcher es definitiv kann). Folgende Grundsätzliche Tipps kann man also geben:

                1. name UND ID verwenden
                2. Der Zielanker sollte Inhalt haben

                Unsere Lösung sieht also folgendermaßen aus:

                


                Ueberschrift Text
                

                Ueberschrift Text

                  Tipp: Panels Layout-Designer gerundete Spaltenbreiten

                  Da mir gerade so ein bisschen die Schuppen von den Augen fielen, will ich andere Unwissende auch teilhaben lassen.

                  Beim Panels Layout-Designer ärgerte ich mich immer darüber, dass sich die Prozentwerte der Spaltenbreiten nicht vernünftig einstellen ließen. Drückt man aber, wie auch in nativen Programmen üblich die Shift-Taste beim ziehen, erhält man runde Werte.

                  Das war´s auch schon 🙂