Beiträge

Mobiles Webdesign – Tipps und Tricks zur Umsetzung

Die Rezeption vom Websites auf mobilen Endgeräten gewinnt für das allgemeine Surfverhalten immer mehr an Bedeutung. Diese Entwicklung sollte vor allem von Unternehmen berücksichtigt werden, die auf eine starke Online-Präsenz bauen. Denn auch sie werden von potenziellen Kunden zunehmend über Smartphones und Tablet-PCs besucht. Um eine optimale Darstellung zu erzielen und den Besuch über mobile Endgeräte für die User so komfortabel wie möglich zu gestalten, gilt es das Webdesign anzupassen. Doch was sind hierbei die wichtigsten Faktoren? Wie bringt man eine Website auf den neusten Stand in puncto mobiles Webdesign?

Gut zu wissen: die essentiellen Grundlagen

Ein entscheidender Faktor bei der Darstellung von Seiten auf mobilen Geräten ist das responsive Webdesign. Dieses zeichnet sich durch flexible Strukturen im Websiteaufbau aus, was eine einwandfreie Anpassung an mobile Geräte überhaupt erst ermöglicht. Das betrifft unter anderem die Rastersysteme sowie das Framework und Layout. Die Website passt sich automatisch an die Breite des Bildschirms an und liefert so die beste Wiedergabe der Inhalte. Beim traditionellen Webdesign war es noch nötig, mehrere Versionen der Website zu entwickeln, um den verschiedenen Bildschirmauflösungen gerecht zu werden. Das responsive Webdesign ist demnach eine große Erleichterung für die professionelle Außendarstellung von Unternehmen.

Die dominierenden Betriebssysteme auf mobilen Geräten sind Google Android OS und Apple iOS. So stark die Systeme auch miteinander konkurrieren, beide setzen auf HTML5 mit CSS3. Die Programmier- und Stylesheet-Sprachen werden in Zukunft zu den wichtigsten Tools im Webdesign. Des Weiteren wird Flash in naher Zukunft ausgemustert, da der Adobe Flash Player für mobile Geräte nicht mehr verfügbar ist. Stattdessen werden Javascript-Plugins wie jQuery die notwendigen Zutaten für eine schicke Website ergänzen. Eine große Auswahl an jQuery-Plugins helfen bei der Gestaltung innovativer mobiler Websites. Bei der Neuentwicklung von Internetauftritten ist die Verwendung dieser drei Bestandteile empfehlenswert, denn sie bieten breitgefächerte Möglichkeiten für kreative Ideen und die beste Kompatibilität in der Darstellung.

Inspiration bei Technik und Optik

Auch bei der Optik gibt es bemerkenswerte Trends: So kommen immer öfter externe Fonts zum Einsatz, etwa über das Angebot von Google. Ein weiterer Trend sind zentrierte Header. Diese eignen sich hervorragend für den universellen Einsatz auf Desktop Browser und mobile Browser, da sie auch bei einer geringen Auflösung von Smartphones ihre Wirkung entfalten. Gleichzeitig werden sie immer öfter mit einer Call-to-Action ausgestattet. Diese Aufforderung zur Handlung locken Mobilnutzer bequem zur Kontaktaufnahme mit dem Anbieter. Dadurch kann die Konversionsrate enorm gesteigert werden. Neben einem attraktiven Webdesign und informativen Inhalte sorgt ergänzend die Suchmaschinenoptimierung für Traffic. Beim mobilen Computing kommt es darauf an, eine möglichst hohe „User Experience“ zu schaffen. Dies gelingt unter anderem durch kurze Aktionswege und optische Reize. Mit den aktuellen Trends können diese Ansprüche sehr gut erfüllt werden.

Weitere Infos (externe Seiten):

Was sind Google Web Fonts und wo und wie wendet man sie an ?

Google standardisiert das Internet – Das ist eine Erkenntnis, der man sich nur schwerlich entziehen kann. Durch eine Vielzahl an Projekten und der Mitarbeit in vielen Gremien hat das Unternehmen seit seiner Gründung Mitte der 1990er für eine klare Standardisierung des Internets in vielen Belangen, von der Definition von HTML bis hin zur Einführung neuer Technologien zur Darstellung multimedialer Inhalte gewirkt, zum Vorteil aller.

Dieses Ziel, neue Standards zu setzen, hat sich auch in den Google Webfonts niedergeschlagen: Wo früher einheitliche Fonts verwendet wurden, ermöglicht der Service den Gestaltern heute die Nutzung einer Breiten Palette von Schriftarten bei der Gestaltung ihrer Webseiten, ohne dabei Plattform-gebundene proprietäre Fonts nutzen zu müssen, die die Gestaltung gerade dynamisch generierter Inhalte beeinflussen würde.

Was sind also Google Webfonts, so im genauen? Google stellt mit diesem Projekt eine Reihe zur kostenlosen Verwendung freier Fonts zur Verfügung die sie bei der Gestaltung ihrer Webseite nutzen können. Seit sich die CSS3-Funktion [email protected] auch bei Mozilla Firefox durchgesetzt hat, erlebt diese eine wahre Hochphase, da es durch diesen Befehl möglich ist, extern und ohne Zutun des Nutzers möglich ist, externe Schriftarten in das eigene Design einzubinden und so auch dynamische Texte in Schriftarten einzubinden, die gar nicht lokal beim User vorliegen, sondern nach Bedarf, hier bei den Quell-Repositories von Google nachgeladen werden.

Der Vorteil liegt vor allem bei der Lizenzierung der Schriftarten: Da viele kommerzielle Fonts nicht für die Bereitstellung durch ebensolche Funktionen wie [email protected] vorgesehen sind, stößt Google in eine Marktlücke, in der sie eigene Fonts verbreitet, über deren Lizenzierung das Unternehmen sicherstellt, dass sie frei verwendet werden können, ohne dabei den Designer mit untragbaren Lizenzgebühren zu belasten. Hierfür spricht auch das Motto von Google Webfonts: „Making the web beautiful“ – „Wir machen das Web schöner“

Das trifft durchaus zu, denn durch die mehr als 500 Fonts, die Google in diesem Projekt zur Nutzung bereit stellt, bietet sich eine große Fülle an gestalterischen Möglichkeiten, die auch von der Community genutzt werden, wie die Vielzahl an Adobe Photoshop Plug-Ins sehr deutlich beweist. Das Programm, das aktuell den faktischen Standard in Sachen Webdesign darstellt – da in allen größeren Agenturen als Werkzeug für das Design von Internetseiten genutzt, ermöglicht es durch diese Plug-Ins, valide Google Webfonts in die Gestaltung einzubinden und später korrekt bei der Darstellung als fertige Webseite auszugeben.

Damit die Datenübertragung besonders gering bleibt – viele Fonts haben in ihren mindestens 3 Formaten für die unterschiedlichen Plattformen durchaus ein Volumen an 1 Megabyte und mehr – werden die Fonts an der Schnittstelle Seitens Google komprimiert übertragen und erst auf dem Zielgerät entpackt: So ist ein schneller Seitenaufbau garantiert und die Verwendung von Webfonts nicht nur auf die Theorie beschränkt, die an den nicht überall verfügbaren Breitbandanschlüssen scheitert. Besonders gut arbeitet in diesem Zusammenhang das Projekt mit dem hauseigenen Browser Google Chrome zusammen, der sich nach und nach zum eindeutigen Marktführer auf allen x86- und x64-Plattformen entwickelt und damit das Tempo und die Richtung für die Konkurrenz vorgibt, seit der Mozilla Firefox durch einige Projektfehler vom Schnellstarter Chrome abgelöst wurde.

Die Google Webfonts sind aber nicht nur auf stationären Geräten Verfügbar: Durch die Google Fint API wurde es ermöglicht, die Schriftarten auch ebenso einfach in die beliebten Apps der Mobilen Geräte auf der Plattform Android einzubinden, denn die Gestaltung der Mini-Programme auf den mobilen Begleitern erfolgt im Regelfall ebenfalls durch das hochaktuelle CSS3, und die API stellt eine konkrete Möglichkeit da, die Corporate Identity auch in den mobilen Angeboten ihrer Kunden und Projekten zu gewährleisten. Das funktioniert so gut, das es sogar auf der Konkurrenzplattform iOS funktioniert, da die API intelligent auf die verwendete Plattform reagiert und so auch für die Apple-Nutzer stets den richtigen Font unkompliziert bereitstellt und sich so ganz neue Möglichkeiten in der Gestaltung mobiler Anwendungen und Webseiten ergeben.

Die Zielsetzung, der Quasi-Standard der Branche bei der Einbindung von systemfremden Schriftarten zu werden, ist noch nicht ganz erreicht, doch scheint in Anbetracht der massiven Vereinfachung der Zugänglichkeit und vor allem des langfristigen Hostings der Schriftarten durch Google nur noch eine Frage der Zeit zu sein, da die vielen Nischenlösungen, wie etwa das eigene Hosting von Free Fonts entfällt und schlichtweg auf das Angebot von Google zurück gegriffen wird, denn eines ist sicher: An Rechenleistung und Speicherplatz mangelt es dem Internetriesen Google ganz sicher nicht. Das lässt auf einen neuen, einfachen Webstandard vorausblicken, der das Internet eben doch ein wenig schöner machen wird, ganz nach dem eigenen Motto für Google Webfonts.

Robots.txt – Anweisungen für Suchmaschinen

Mit der Datei robots.txt können Anweisungen an Suchmaschinen übermittelt werden, um diesen das Auslesen von Webverzeichnissen zu gestatten oder zu verbieten. Die Anweisungen gelten für das gesamte Webprojekt. Alternativ müsste jede HTML-Datei in den Metatags entsprechende Hinweise liefern, was jedoch nur für die jeweilige Datei und gegebenenfalls Verweise Gültigkeit hat. Die robots.txt muss im Wurzelverzeichnis der Domain abgelegt werden.

Textdatei mit Datensätzen

Als reine Textdatei kann die robots.txt mit jedem Editor erstellt und bearbeitet werden. Die Anweisungen für die Webcrawler der Suchmaschinen werden in Datensätzen definiert. Im ersten Teil eines Datensatzes erfolgt die Angabe, für welche Suchmaschine die Anweisung gilt. Die Crawler werden mit User-Agent angesprochen. Im zweiten Teil des Datensatzes kann dem angesprochenen Crawler ein Verbot ausgesprochen werden. Ein Verbot wird mit Disallow eingeleitet und gilt immer für das angegebene Verzeichnis und alle Unterverzeichnisse. Soll das Verbot für mehrere Suchmaschinen gelten, werden diese untereinander aufgeführt. Die robots.txt könnte also folgendermaßen aussehen:

User-agent: Suchmaschinen-Crawler a
User-agent: Suchmaschinen- Crawler b
Disallow: /template/
Disallow: /privat/

Jeder Einleitung folgt ein Doppelpunkt und ein Leerzeichen. Im obigen Beispiel wird den Crawlern der Suchmaschinen a und b ein Verbot für die Verzeichnisse /templates und /privat erteilt. Enthält die robots.txt mehrere Datensätze, werden diese durch eine Leerzeile voneinander getrennt. Sollen pauschal alle Robots angesprochen werden, geschieht dies mit dem Zeichen *:

User-agent: *
Disallow: /templates/
Disallow: /privat/

Alternativ zu ganzen Verzeichnissen kann auch für bestimmte Dateien in einem Verzeichnis ein Verbot erteilt werden. Zu diesem Zweck wird der Pfad inklusive der Datei angegeben. Sind alle Verzeichnisse der Domain betroffen, geschieht dies mit

User-agent: *
Disallow: /

Es wird also jeglichen Crawlern das Indizieren sämtlicher Verzeichnisse der Domain untersagt.

Sinn der robots.txt

Mit den Verboten, bestimmte Verzeichnisse auszulesen, soll in erster Linie erreicht werden, dass nur relevante Inhalte in den Suchmaschinen gelistet sind. Dies ist beispielsweise sinnvoll, wenn ein Verzeichnis ausschließlich Template-Dateien für den Internetauftritt enthält, die keinen informativen Wert haben. Auch wenn, wie in obigem Beispiel, der Inhalt des Verzeichnisses /privat nicht gelistet werden soll, kann das über die robots.txt gesteuert werden. Die Suchmaschinen werden somit nach Möglichkeit frei von irrelevanten oder unerwünschten Inhalten gehalten.

Zugriffe ausdrücklich erlauben

Für die Erlaubnis, Domaininhalte zu indizieren, gibt es keine Definition. Allerdings ist es möglich, einem bestimmten Crawler den Zugriff auf alle Verzeichnisse zu gestatten:

User-agent: Suchmaschinen-Crawler c
Disallow:

Die fehlende Angabe hinter Disallow gestattet dem Suchmaschinen-Crawler c die Indizierung aller Verzeichnisse und Unterverzeichnisse.

Grenzen der robots-txt

Seriöse Suchmaschinen halten sich an das „Robots-Exclusion-Standard-Protokoll“. Dieses regelt, dass die Crawler beim Auffinden einer Webseite zunächst die Datei robots.txt auslesen. Eine Garantie dafür gibt es allerdings nicht, auch können auf diese Weise keine Inhalte vor Zugriffen geschützt werden. Diesem Zweck dient beispielsweise der Verzeichnisschutz über die Datei .htaccess.

Tipps & Tricks für die Planung einer KMU-Website

Die Unternehmenswebsite ist das Aushängeschild eines jeden KMU. Viele Unternehmer wollen so schnell wie möglich im Internet erreichbar sein und launchen übereilt eine Homepage. Das ist jedoch keine optimale Lösung, denn das Wichtigste bei einem professionellen Internetauftritt ist die Planung. Ohne diese können sich eine Menge Komplikationen ergeben, die durch eine gute Organisation vermieden werden. Mit ein paar nützlichen Hinweisen werden Stolpersteine bei der Gestaltung von KMU-Websites aus dem Weg geräumt.

Das A und O bei der Planung ist das Konzept. Gibt es keins, dann endet die Planung schnell im Chaos. Deshalb sollte man sich im Voraus einige Fragen stellen, die teilweise auch bei der Profilierung des eigenen Unternehmens aufkommen: Etwa die Frage nach der Zielsetzung der Website. Welche Zielgruppen sollen angesprochen werden? Welche Dienstleistungen oder Produkte werden angeboten? Wodurch erreicht die Seite einen Mehrwert für Besucher? Und so weiter. Als nächstes sollte sich der Website-Inhaber bewusst machen, welche Aspekte hinter der Gestaltung einer Website stehen. Da zählen nicht nur redaktionelle und multimediale Inhalte oder das Template, sondern auch die technische und administrative Umsetzung. Wer baut die Website und wer pflegt sie? Welches Budget wird pro Jahr dafür aufgebracht? Wie gestaltet sich die Online-PR?

Besonders letzteres sollten KMU beachten, denn die Webpräsenz muss sich seitens Struktur und Design optimal in die gesamte Marketingstrategie einfügen. Eine davon losgelöste Homepage ist nur wenig ergebnisorientiert und somit kaum effektiv. Stattdessen sollte sie in einem ausgeklügelten Mix aus Suchmaschinenoptimierung, Social Media und E-Mail-Marketing etc. angesiedelt sein. Der Hintergedanke an den eigenen Marketing-Plan beeinflusst wiederum den Aufbau der Seite. So können für die Kunden diverse Widgets zur Verfügung gestellt oder User-generated Content integriert werden. Es gibt zahllose Möglichkeiten, eine attraktive und individuelle Homepage zu entwickeln. Über die Auswahl der Optionen sollte man sich daher frühzeitig Gedanken machen.

Im Internet finden Interessierte umfangreiche Check-Listen, die KMU dabei helfen, wirklich nichts zu vergessen. Allerdings sollte sich das Unternehmen nicht in eine allzu steife Step-by-Step-Planung verrennen. Das Internet zeichnet sich durch sein dynamisches Wesen aus, dem entsprechend empfiehlt sich eine flexible Grundhaltung bei der Planung. Umso wichtiger ist Flexibilität, da die Website-Konzeption ein komplexes Anliegen ist, an dem oft mehrere Personen arbeiten. Web-Designer, Texter und Projektleiter sind dabei nur ein Bruchteil der beteiligten Kompetenzen. Ein gutes Team – welches auch von einer externen Agentur gestellt werden kann – ist daher weiterhin eine wichtige Voraussetzung für das Gelingen der Unternehmenssite.

Ist ein Grundkonzept schließlich erarbeitet und Stil, Design, technische Umsetzung und administrative Fragen geklärt, dann geht es an die Realisierung des Website-Projekts. Nach der Veröffentlichung sollten die Inhalte – das betrifft sowohl Texte als auch Bilder, Videos und ähnliches – regelmäßig aktualisiert werden. Das lockt nicht nur Besucher an, sondern wirkt sich auch positiv auf die Sichtbarkeit bei Suchmaschinen aus. Alle genannten Aspekte verdeutlichen, wie umfangreich die Entwicklung einer Unternehmenswebsite tatsächlich ist – und wie wichtig eine kluge Planung des Webauftritts im Vorfeld sein kann.

Weiters kann man überdenken ob man einen Onlineshop verwendet. Hier kann man nicht nur leichter verkaufen sondern über moderne Shopssysteme kann man auch Rechnungen erstellen.

Weitere Infos (externe Seiten):

Web 2.0 – Was ist damit gemeint?

Der Begriff geistert seit geraumer Zeit durch die Medien – überall spricht man von „Web 2.0“. Doch was ist dieses Web 2.0? Was beinhaltet das Konzept? Und welche Optionen bietet es Privatpersonen und Unternehmen?

Bevor diese Fragen beantwortet werden, wollen wir an dieser Stelle zuerst die Wurzeln dieses regelrechten Internet-Evolutionssprungs klären. Maßgeblich involviert in der Entwicklung von Web 2.0 ist der amerikanische Software-Entwickler und Unternehmer Tim O’Reilly und seiner gleichnamige Firma O’Reilly. Nach dem jähen Ende der Dotcom-Blase im Jahr 2001 fand ein Brainstorming zwischen MediaLive und O’Reilly statt. Thema war unter anderem die Zukunft des Internets nach der virtuellen Wirtschaftskrise. Im Verlauf des Treffens waren sich die Teilnehmer einig, dass das Internet noch lange nicht Geschichte sei, sondern schon bald eine weit größere Bedeutung erlangen würde als bisher. Etliche neue Produkte der unterschiedlichsten Anbieter würden das Internet zu einer verbesserten Version reifen lassen, sozusagen als Version 2.0 – dem Web 2.0. Es wurden in Folge einige Ansätze gesammelt, die das neue Phänomen beschreiben sollten.

In seinem Artikel „What is the Web 2.0?“ erklärt Tim O’Reilly, welche Merkmale das Konzept im Einzelnen ausmacht. Alle genannten Eigenschaften werden von ihm sehr ausführlich beschrieben, sollen hier jedoch nur in zusammengefasster Form ausgedrückt werden. Einfach formuliert werden unter der Bezeichnung Web 2.0 eine Reihe verschiedener Social Media-Dienste und Web-Portale zusammengefasst, die bestimmte Eigenschaften gemeinsam innehaben. Interaktion zwischen den Anwendern ist dabei die vielleicht wichtigste Komponente. Ob das Posten von Statusmeldungen, das Verfassen von Wikipedia-Artikeln, das Präsentieren von selbst geschossenen Fotos auf Flickr oder das Drehen eigens produzierter Video-Clips für YouTube: So genannter User Generated Content macht das Web 2.0 erst zu dem, was es ist. Hier kann jeder ein Macher sein, jedermann kann seine Meinung äußern und sogar die Kleinigkeiten des Alltags mit anderen teilen, sofern er will. Dabei spielen natürlich auch die Social Networks wie XING oder Facebook eine große Rolle.

Noch nie war der Austausch von Informationen so leicht. Aus dem Datenfluss ist mittlerweile eine regelrechte Daten-Flut geworden. Besonders für Unternehmen eröffnen sich mit der Entwicklung des Web 2.0 ganz neue Marketing-Strategien, die in vielen Fällen (noch) kostenlos sind. Cleveres Viral Marketing kann sich in der Blogosphäre rasend schnell verbreiten und ermöglicht zudem eine Reichweite, die andere Medien kaum schaffen. Dabei kann es sich etwa um einen aufwändig produzierten Werbefilm handeln oder um einen Aufruf zu einem so genannten Flash Mob, bei dem sich hunderte Menschen zu spontanen Aktionen im ‚Real Life’ treffen. Aufgrund seiner Innovationskraft hat sich die ‚verbesserte’ Version des Webs zu einem wichtigen Allround-Instrument sowohl auf der privaten als auch geschäftlichen Ebene etabliert. Und ein Ende scheint noch lange nicht erreicht. Es bleibt spannend, welche Blüten Web 2.0 und Social Media noch treiben werden. Denn hier gilt: Je ungewöhnlicher, desto besser.

Quellangaben und weitere Infos (externe Seiten):

Individualprogrammierung nach Kundenwunsch von Webprojekten aller Art

Sie haben ein Webprojekt bekommen dies aber nicht umgesetzt?

Dann sollten Sie uns vielleicht kurz kontaktieren. Wenn sich Ihre Wünsche nicht mit erprobten CMS Lösungen wie z.B. WordPress, Joomla, Typo 3, Drupal oder anderen umsetzen lassen können wir in unsere Trickkiste greifen und selbst programmieren was es noch nicht gibt.

Nutzen Sie unser Wissen und unsere jahrelange Erfahrung damit Sie mit Ihrer Internetpräsenz hervorstechen und Ihre Kunden immer wieder gerne auf Sie zurückkommen!