webconsul

Jeder Webentwickler steht heute vor der Herausforderung attraktive Webdesigns (nicht wie das von webconsul.de ) zu entwickeln und dabei alle möglichen Geräte zu berücksichtigen.
Von Desktops, über Laptops, iPads, iPhones, beliebige Smartphones (bspw. mit Android) bis zu ultrabreiten Bildschirmscreens

Das Beispiel zum Anschauen findet ihr hier: Responsive Design CSS Check.

Die Browser sowohl von Desktop-/PC-/Laptopumgebungen sowie mobile Geräte können diese Unterscheidung mittlerweile gut durchführen.
Die Unterscheidung basiert dabei immer auf der Bildschirmgröße und sieht folgendermaßen als Code aus:

Smartphones (portrait and landscape)

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  /* Styles */
  body{background-color:yellow;}
  h1#smartphone{display:block}
}

Smartphones (landscape)

@media only screen
and (min-width : 321px)
and (max-width : 480px) {
  /* Styles */
  body{background-color:lightyellow;}
  h1#smartphonelandscape{display:block}
}

Smartphones (portrait)

@media only screen
and (max-width : 320px) {
  /* Styles */
  body{background-color:orange;}
  h1#smartphoneportrait{display:block}
}

iPads (portrait and landscape)

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  /* Styles */
  body{background-color:green;}
  h1#ipads{display:block}
}

iPads (landscape)

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  /* Styles */
  body{background-color:lightgreen;}
  h1#ipadlandscape{display:block}
}

iPads (portrait)

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  /* Styles */
  body{background-color:darkgreen;}
  h1#ipadportrait{display:block}
}

Desktops and laptops

@media only screen
and (min-width : 1224px) {
  /* Styles */
  body{background-color:blue;}
  h1#desktop{display:block}
}

Large screens

@media only screen
and (min-width : 1824px) {
  /* Styles */
  body{background-color:lightblue;}
  h1#largescreens{display:block}
}

iPhone 4

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  body{background-color:red;}
  h1#iphone4{display:block}
}

Im jeweiligen Block unter /* Styles */ müsst ihr natürlich noch die eigenen Werte für das jeweilige Layout und Gerät ergänzen.
Im Normalfall empfehle ich einen generellen und vorgelagerten allgemeinen Designblock und dann für das spezielle Gerät nur noch Größenanpassungen der jeweiligen DIVs.

Gerade ist der Green Panther Award 2012 vorbei und ich will hier nicht umhin um ein paar lobende Worte für Rittler & Co. zu verlieren.
Die professionelle Internetagentur hat sich nicht nur der Herausforderung gestellt einem traditionsreichem Weingut ein neues Aussehen zu verleihen sondern hat es vielmehr geschafft den aktuellen Zeitgeist in den Auftritt zu bringen.

Gerade das Angebot für Startups finde ich interessant und bei Animationen wie dieser hier sollte man wirklich anfragen:

Die Leistungen reichen weit über das übliche Angebot hinaus und behinhalten sowohl Webdesign & Entwicklung, Grafik & Design sowie SEO aber auch (und das ist meiner Einschätzung nach entscheidend) Film & Animation. Mehr Infos gibt es direkt bei der kreative Design-Agentur.

Wir selbst arbeiten oft auch mit Contao dem OpenSource-Shop und CMS-System, genauso wie die Grazer Webdesigner.

Die Expertise sieht man hier auch deutlich, denn die Jungs betreiben nicht nur die eigene Agentur sondern zeigen auch auf ihrem eigenen Event-Portal (styria-events.com), dass Wissen in die Praxis umgesetzt werden muss.

Bulletproof Webdesign ist der Titel eines Buches von Dan Cederholm, das sich an Webdesigner und Entwickler richtet und mittlerweile als DAS Nachschlagewerk schlechthin für modernes Webdesign gilt. Es zeigt Best Practices für universell darstellbare Webseiten auf und schlägt entsprechende Entwurfsmuster und Richtlinien vor.

Schriftgrößenänderung über Schlüsselwörter, Prozentwerte und ems im CSS ermöglichen eine optimale Steuerung der Darstellung durch die Anwender – ohne Überraschungen. Modernere Browser erlauben es dem Anwender, Schriftgrößen auf einfache Art und Weise über browserspezifische Bedienelemente den eigenen individuellen Anforderungen anzupassen. Das ist nur für sehr alte gebrauchte Software noch nicht möglich. Als Webdesigner hat man keinerlei Möglichkeit, diese Schriftskalierung zu kontrollieren – man muss ein Layout erstellen, das bei Änderungen der Schriftgröße durch den Betrachter nicht auseinanderbricht (Bulletproof Webdesign). Der Internet Explorer etwa verweigert dem Nutzer die Skalierung, sobald auf einer Website absolute Angaben in Punkt oder Pixel angegeben werden. Schriftgrößen solltest Du – im Interesse des Benutzers beziehungsweise Auftraggebers – immer relativ angegeben, sonst lieferst Du kein Bulletproof Webdesign und der Kunde oder Anwender werden sich früher oder später beschweren.

In vielen aktuellen Browsern, darunter auch die beliebten Programme Internet Explorer, Opera und Firefox, steht dem Benutzer eine Zoom-Funktion zur Verfügung, die nicht nur Textelemente und weitere, von der Schriftgröße abhängige Elemente manipuliert, sondern sämtliche Bestandteile einer Webseite. Auf diese Art skalierte Bilder sehen leider sehr oft unscharf oder pixelig aus – allerdings bleibt das Layout in seiner Grundstruktur erhalten. Da sich aber bei Verwendung der Zoom-Funktion oft auch die gesamte Breite eines Layouts erhöht, mit dem Effekt, dass der Browser die allgemein ungeliebten horizontalen Scrollbars anzeigt, ist auch die Zoom-Funktion keine echte Lösung für Betrachter, die Wert auf ein großes Bild legen. Der Weg reiner Textskalierung wird auch künftig wichtig bleiben – und deren mögliche Auswirkungen sollten von Dir berücksichtigt werden, wenn ein Bulletproof Webdesign gefordert ist.

Viele Webanwendungen und Webseiten verfügen über horizontale Elemente, wie etwa Suchfelder, Breadcrumb-Leisten, Header Images, Login-Formulare, und Weitere. Content-Bereiche, etwa Elemente die einen aufgerufenen Blog-Artikel, bestehend aus Text und Medien, beinhalten, werden üblicherweise so entworfen, dass sich die Dimensionen des enthaltenden Elements den Erfordernissen vom Content anpassen, also quasi “mit dem Content mitwachsen”. Bulletproof Webdesign ist auch bei horizontalen Elementen (fast) ohne weiteres möglich, auch wenn dies derzeit noch recht selten umgesetzt wird. Häufig werden solche Elemente über Tabellenzellen gestaltet und mit Blind-GIFs “eingerückt” oder “abgerundet”. Unnötige Grafiken sollten jedoch vermieden werden, ein Nachteil des Tabellen-Designs ist, dass die Zellen bei einer Erhöhung des Schriftgrads über die Browser-Einstellungen umbrechen und schwer kontrollierbar werden.

Bulletproof Webdesign setzt auf Floats für gitterähnliche Anordnungen. Anstelle der Verwendung von Layouts auf Basis von Tabellen werden sogenannte floats empfohlen, um Seitenelemente gitterartig zu layouten. Hierbei werden statt der Zellen Container eingesetzt, die über deren CSS-Eigenschaft “float” positioniert werden.

Um für alle möglichen Darstellungsszenarien gewappnet zu sein, bedarf es einer klaren Trennung von Inhalt und Design für ein Bulletproof Webdesign, so dass Text auch dann lesbar ist, wenn Bilder nicht angezeigt werden oder das zur Webseite gehörige CSS File nicht geladen wird. In den meisten Browsern kann der Anwender veranlassen, dass Webseiten ohne CSS angezeigt werden. Über diesen Weg lässt sich leicht testen, ob die Struktur eines (X)HTML-Dokuments gut durchdacht ist. Es gibt zudem verschiedene Tools, um zu testen, ob sich eine Webseite auch ohne Bilder und CSS gut darstellen lässt.

Auch bei Tabellen solltest Du auf ein schlankes Markup achten, und möglichst viele der erforderlichen Formatierungsanweisungen über CSS umsetzen. Konkret bedeutet das, etwa anstelle der Angabe von Rahmen und Abstand über cellpadding und border im Tag die korrespondierenden CSS Attribute border und padding zu verwenden. PHP Entwicklung bei ProDoWeb muss man beim Bulletproof Webdesign unbedingt beachten, denn CSS und Design ist die eine Seite, auf der anderen braucht man guten Code der die Funktionalität liefert. Dafür gibt es diverse Experten, wenn man die Entwicklung nicht im eigenen Haus leisten kann.

Wie heute schon berichtet arbeite ich gerade für einen Kunden an seinem Webdesign beziehungsweise programmier gerade das zugehörige Template. Das Content Management System dahinter ist einfach ein WordPress, aber das tut an dieser Stelle nichts zur Sache.

Die Aufgabenstellung war, die “gelben Boxen” beim Überfahren eines Bildes zu deaktivieren. Nachdem ich herausgefunden hatte, dass damit die title- und alt-Tags bei den Bildern gemeint waren, war die Sache einfach.

So werden aktuell aus SEO-technischer Sicht zwar die Tags geschrieben, aber mit folgendem Code beim Seitenladen mittels JavaScript entfernt:

for(var i=0; i<document.getElementsByTagName('img').length; i++){
  document.getElementsByTagName('img')[i].removeAttribute('title');
  document.getElementsByTagName('img')[i].removeAttribute('alt');
}

Das mag zwar vielleicht den Google-Richtlinien widersprechen, aber heey, das hat mehrere Vorteile. Einerseits wird das Layout dadurch freundlicher und konnte dem Kundenwunsch entsprechend angepasst werden, andererseits wird vermieden, dass die Browserplugins für den 0815 Suchmaschinenoptimierer oder der konkurrierende SEO-Agentur nützliche Informationen preisgeben und letztlich ist es Google erstmal egal, da die Tags trotzdem gewertet werden.

Somit muss kein Plugin für das WordPress Template extra gehackt werden, welches die Standardoption der Tags abändert und der dicke Bonus obendrauf ist, dass man dem barrierefreiem Web nicht im Wege steht. Denn gerade Browser die keine Bilder anzeigen können und JavaScript deaktiviert haben, ist es letztlich egal, denn hier sind alle Informationen enthalten, die gebraucht werden.
Der Beweis, dass Google dynamische Inhalte oder genauer Modifikationen am DOM des Browsers aktuell nicht interessiert, habe ich damals schon getestet. Von daher: einfach machen!

Zusätzlich habe ich für einfachen Bilderklau, über den Rechtsklick, das Kontextmenü sowie den Klick deaktiviert:
  document.getElementsByTagName('img')[i].setAttribute('onmousedown', 'return false;');
  document.getElementsByTagName('img')[i].setAttribute('oncontextmenu', 'return false;');

Das hilft zwar nicht gegen jemanden der sich auskennt, denn dagegen gibt es keine wirklich wirksame Methode, aber für den 0815-Webuser dürfte das ausreichen.

Für einen Kunden habe ich gestern folgende Methode implementiert um effektiv die Unternehmensadressen für Spambots unzugänglich zu machen.

Das Prinzip ist relativ einfach, denn der gewünschte E-Mail Link wird folgendermaßen gesetzt:
<a href="mailto:#" title="username">username --at-- example . de</a>

Damit funktioniert der Klick auf die E-Mail-Adresse noch nicht. Der gesetzte title-Tag verrät aber schon, dass aus diesem die E-Mail-Adresse erzeugt werden soll, sodass man doch mit einem Klick den Empfänger im zum Beispiel Microsoft Outlook schon gesetzt hat.

Es reicht jetzt am Seitenende folgendes JavaScript zu laden:
for(var i=0; i<document.getElementsByTagName('a').length; i++)
  if(document.getElementsByTagName('a')[i].href.match(/mailto:/))
    document.getElementsByTagName('a')[i].href =
       'mailto:'+document.getElementsByTagName('a')[i].getAttribute('title') +'@example.de';

Wichtig ist dabei, dass der Code im Template am Ende eingefügt wird, am besten vor oder nach dem schließenden body-Tag.
In dem kurzen JavaScript-Snippet wird jeder Link auf der Seite betrachtet, falls er “mailto:” enthält, wird der Link mit “mailto:$title@exmaple.de” ersetzt. Wobei $title eben den Wert des gesetzten Attributs enthält.

Ziemlich einfach, oder?
Damit kann man als Webdesigner den Kunden einfach zufrieden stellen und das Layout bzw. Webtemplate schnell und effektiv absichern.

Vor einiger Zeit gab es ja schon die erste Site Clinic von Google und heute kam der zweite Beitrag zur Serie raus: Google Grants Site Clinic: Überarbeitung der Website-Struktur

Dabei wird die Struktur der Seite www.kenia-hilfe.com beleuchtet und wichtige Tipps gegeben.

Gut, dass man auf Title- und Meta-Tags achten soll ist nicht wirklich was neues, auch, dass man eine Sitemap verwenden soll, um Google das Crawling zu erleichtern beziehungsweise zu ersparen. Gerade bei der Empfehlung hier und dem Sitemap Generator hier sollte wohl jeder wissen, dass sich der Einsatz lohnt.

In dem Artikel wird auch nochmals auf 301-Weiterleitungen und die 404-Fehlerseiten eingegangen. Zu den 301 Redirects will ich nur kurz sagen, dass man Weiterleitungen auf jeden Fall so umleiten soll, außer man will ein Problem temporär lösen, aber bei einer nachhaltigen Änderungen muss der 301 verwendet werden.
Zu den 404-Fehlerseiten muss mehr gesagt werden. Einerseits sind die Seiten auch für den User verdammt sinnvoll. Gerade bei irgendwelchen kaputten Verlinkungen, umgezogenen Seiten und Vertippern, braucht der User einen Guide, der ihn an der Handn immt und zur gewünschten Seite bringt. Damit wird der Besucher nicht verloren und ob es ein Besucher oder ein Crawler ist, ist dabei egal.
Daher kontrolliert nochmals eure Fehlerseiten und wenn auch diese korrekt und gut arbeiten, dann könnt ihr jetzt verdient und entspannt in das Wochenende gehen.

Überall werden zur Zeit Ausblicke auf das kommende Jahr 2010 gebloggt und teils mit wilden Spekulationen versehen.

Ich bin der Meinung, dass die Welt nicht zusammenbricht und die Suchmaschinen und -optimierungen nur besser werden (können).

So durfte ich heute bei Bill einen interessanten Post zum Google Patent lesen.
In diesem Patent steht mehr oder weniger drin, dass je nach Kontext auf ähnliche Suchbegriffe zurückgegriffen wird.
Es werden hier Synonyme oder Umschreibungen verwendet.
Zum Beispiel:
auto versicherung
zu
versicherung kfz
oder ähnliche Variationen.

Das hatte ich schon länger im Hinterkopf und verweise an dieser Stelle nochmals auf zwei “offene” Synonym-Datenbanken:

Die Entwickler drüben bei Yahoo! stellen regelmäßig gute Talks ihres YUI Theaters online.
Einer davon ist “Design Fast Websites” von Nicole Sullivan.

Schaut auf jeden Fall mal rein:

Gerade eben war ich auf der Suche nach einem freien Weblayout für eine Nonprofit-Organisation und bin dabei auf drei tolle Auflistungen beim DESIGNM.AG gestoßen.

Zum einen gibt es die Liste von 40 Nonprofit Designs von denen mir am besten die Africa Tour 2008 gefällt.
Zum andern gibts bei vandelydesign die 50 und 35 besten Designs für kirchliche Organisationen.

Schaut euch die Vorlagen einfach mal an, die ein oder andere Idee kann man auf jeden Fall aufgreifen.
Sobald ich eines der Templates in Verwendung habe, berichte ich natürlich hier.