19 Artikel in der Kategorie Webentwicklung

Responsive Design mit Media Queries

Responsive Design ist derzeit in aller Munde. Ich bin derzeit an einem Redesign für Chukki.de und bin in diesem zuge auch drauf gestoßen – ein Design, welches sich dem Nutzer – bzw. dessem Endgerät anpasst. Dies kann ein Desktop PC in verschiedenen Auflösungen, ein Notebook, ein iPad oder auch ein iPhone sein. Jedes dieser Geräte hat ein eigenes Nutzerverhalten und benötigt daher eine eigene Sicht auf die Inhalte einer Website, sofern der Betreiber einer Seite daran interessiert ist einen möglichst hohen Grad an Usability zur Verfügung zu stellen. Doch wie stellt man das am besten an?

Lesen

jQuery: floating Menü

Sie scheinen zurzeit der große Trend zu sein: floating Menüs – also Menüs oder Interface-Elemente, die mit den Interaktionen des Users „mitfliegen“. So hat z.B. Google in GMail vor ein paar Tagen diese Funktion eingebaut und dadurch das Bearbeiten der Mails deutlich erleichtert. So wird interaktives Design geschaffen und mit einer leichten Funktion der Nutzwert von Applikationen enorm erhöht.

Weitere Einssatzzwecke dieser Funktion sind z.B. Social Media Buttons: Wer einen hohen Wert auf diese Buttons legt, könnte sie rein theoretisch mit dem Benutzer beim Lesen mitfliegen lassen – so dass der User jederzeit die Möglichkeit hat die Buttons während des Lesens aufzufinden und den Beitrag zu teilen.

Ich habe das floating Menü (oder auch floating DIV) gestern hier auf Chukki.de eingebaut, wenn der User nun nach unten Scrollt bleiben ihm trotzdem die wichtigsten Funktionen erhalten – das Menü, die Suche und die Social Media Links. Auf einer Seite wie Chukki.de nicht unbedingt wichtig für ein gutes User Interface, aber ein Beispiel dafür wie man mit jQuery den Nutzwert einer Seite doch sehr leicht erhöhen kann.

Lesen

Die Suche nach dem richtigen Webhoster

Oft kriege ich Mails in denen ich gefragt werde, bei welchem Webhoster ich bin oder welchen ich empfehlen könnte. Dadurch das ich ständig mit Kunden zusammenarbeite die Teilweise noch keinen Webspace besitzen, stoße ich immer wieder auf diese Frage. Jedes mal analysiere ich den Kunden und überlege mir welche Eckdaten der Kunde benötigt und welcher ein angemessener Preis ist, doch in den Grundzügen ist da eigentlich jeder Kunde gleich.

Was ist für einen guten Webspace von Wichtigkeit?

  • Hohe Erreichbarkeit
  • Möglichst performant (wichtig für SEO)
  • Aktuelle PHP / MySQL Version
  • Unterstützung von Apache Modulen & htaccess
  • Ausreichend Speicher
  • Ein guter Preis
  • Guter Service
  • Übersichtliche Administrationsoberfläche

Lesen

Facebook Fan-Box Design anpassen mit CSS

Das Design der Facebok Fan-Box bzw. Like-Box ist sicherlich jedem bekannt. Es orientiert sich an dem Design von Facebook mit weiß und einigen blautönen. Dies hat einen hohen wiedererkennungswert zu folge, oftmals ist dies jedoch sehr unpassend bei vielen Designs. Auf dunklen Seiten ist dies z.B. total unpassend und zerschießt das komplette Design.

Das Design lässt sich eigentlich sehr leicht durch einen zusätzlichen Aufruf von ein paar CSS Klassen regeln, ist von Facebook selber jedoch schlecht bis garnicht dokumentiert.

Wichtig: Um das Design anzupassen muss das alte fb:fan anstatt des neuen fb:like-box benutzt werden, denn dort hat Facebook die Designanpassungen bisher nicht unterstützt. Die etwas ältere Facebook Lib wird geladen und mit der „profile_id“ wird eure Fan-Site mitgegeben – diesem Code muss lediglich der Link zur CSS Datei hinzugefügt werden (css=“fb.css?1″):

Lesen

WordPress: Post-Formats für den Tumblr-Look

Seit der WordPress Version 3.1 ist es möglich seinen Blog ein wenig Tumblr-Like zu gestalten… die Post Formats wurden eingeführt. Auf den ersten Blick keine große Neuerung, man gibt jedem Blogeintrag einfach einen bestimmten Typen und hinterlässt im Code eine Weiche wie es denn auszusehen hat wenn man dieses Format einsetzt.

In der neusten Version von Chukki.de, welche seit gestern online ist, habe ich nun auch erstmals darauf gesetzt um Gallerien und Twitter Status-Updates einzubinden. Das schöne daran ist die Tatsache das es nicht immer ein komplett neuer Blogbeitrag sein muss um die Seite am leben zu halten. Ein Statusupdate bei Twitter oder ein paar geschossene Fotos sind schneller mal angelegt als ein Tutorial über jQuery Funktionen o.ä.

Tumblr ist dafür gerade durch diese Funktion bekannt geworden zwischen den Post Types zu unterscheiden und hat sich auch deswegen von WordPress.com immer stärker differenziert. Hier hat WordPress nun endlich nachgezogen und ein schönes Stilmittel bereitgestellt. Einfach mal kurz einen Link Posten, den letzten Twitter Statusupdate, oder ein paar geschossene Hipstamatic Fotos – all dass ist nun ganz leicht einbindbar.

Lesen

jQuery Selektoren verstehen und benutzen

Wie ihr in meinen bisheringen Blogeinträgen sehen könnt bin ich ein großes Fan von jQuery. Einfach gesagt: mit jQuery kann man soooo viel machen – etwas mehr im Detail: jQuery hat eine sehr gute Engine um Effekte und Funktionen zu erstellen die bisher nur mit Flash oder sehr sehr viel Aufwand per handgeschriebenem AJAX zu erreichen waren. Mit etwas Logik und dem Verständnis für die Selektoren und Funktionen ist es eigentlich sehr sehr einfach und für jeden der schon mal etwas mit (Web)Programmierung zu tun hatte schnell zu erlernen.

Heute möchte ich gerne auf die jQuery Selektoren eingehen – diese sind so ziemlich das wichtigste was es in jQuery zu beachten gibt. Ein falsch gesetzter Selektor kann die Performance einer jeden Website sehr stark abfallen lassen, was wieder der Usability schadet – doch dieser sollte eigentlich durch das Framework geholfen werden.

Lesen

WordPress: WP-Content kann nicht gefunden werden

Seit der WordPress Version 2.7 kann man sowohl die Plugins als auch die WordPress Version über das Backend automatisch Updaten. So checkt WordPress automatisch von welchem Plugin die neuste Version verfügbar ist und zeigt es einem an. Nach eingabe der FTP Verbindung wird dann alles autmatisch erledigt: Download, Entpacken und Aktivierung – so sollte es zumindest sein.

Ich habe zuletzt einige WordPress Versionen – vornehmlich auf Hosteurope gehosteten Seiten – installiert und kam immer wieder zu dem Problem das dieses Feature nicht funktionierte. Die Fehlermeldung lautete „WP-Content konnte nicht gefunden werden“.

Als ich mich daran machte alles über den FTP Client zu checken …der Order, war da – Rechte, alle vernünftig vergeben… was nun?

Lesen