6 einfache Regeln für mobiles Webseiten Design

Posted By chris / Allgemein, Design / No Comments

Der mobile Trend ist unaufhaltsam und bald werden geschätzte 2 Milliarden Menschen ein Smartphone regelmässig benutzen. Die Unternehmen, die sich als Erste an dieses schnell wachsende Segment anpassen werden die meisten Vorteile haben und dementsprechend auch Erfolg.

Ihr Unternehmen muss leicht gefunden und erreichbar sein, nicht nur auf Desktop PCs, sondern auch über Smartphones oder Tablets. Nachfolgend sechs Regeln damit Ihre Webseite optimal auf mobile eingerichtet ist:

Zielgruppe kennen

Der grosse Vorteil von Online ist, dass alles gemessen werden kann und daraus abgeleitet entsprechende Verbesserungen für Ihr Business gemacht werden können. Durch die Analyse der Daten kann herausgefunden werden, mit welchen Geräten die Webseite besucht wird. Das Optimieren des Designs für jenes Gerät, das vom Grossteil der Besucher verwendet wird, ist sinnvoll, nichtsdestotrotz sollten aber die anderen Geräte und Betriebssysteme nicht vernachlässigt werden.

Inhalt ist massgebend

Da Webbrowser auf mobilen Geräten nicht den gleichen Funktionsumfang bieten wie Browser auf Desktop Rechnern, ist es wichtig zu definieren, welche Aspekte der Webseite am wichtigsten sind und dann sicherstellen, dass diese auch leicht zugänglich sind.

Weil oft nach Kontaktdaten wie E-Mail oder Telefonnummer gesucht wird, ist es wichtig, dass diese auf der Webseite prominent dargestellt und einfach angeklickt werden können.

Benutzer von Touchscreens nicht vergessen

Damit ist gemeint, dass Buttons und Links so gross designt werden, dass diese auf einem Touchscreen mit den Fingern einfach angetippt werden können. Auch sollte genügend Platz zwischen den einzelnen Elementen gelassen werden damit nicht aus Versehen ein benachbartes Element aktiviert wird.

Das Design einfach halten

Für mobile Webseiten Besucher ist es nicht wichtig, dass sie mit ausgeklügelten Designs verblüfft werden. Für sie ist es nur wichtig, dass sie schnell zu den gewünschten Informationen kommen ohne viel Grafiken und sonst welche Dateien herunterladen zu müssen.

Einspaltige Layouts

Anders als auf Desktop Rechnern ist die einzig wirklich gangbare Designlösung auf Mobile ein einspaltiges Layout. So können User die Informationen einfach und schnell finden.

Auch wenn heutige Smartphones relativ grosse Screens besitzen ist es dennoch mühsam durch lange und mehrfache Spalten scrollen zu müssen.

Integration von Social Media

Mobile User sind eher bereit Inhalte zu teilen, weil auf ihrem Smartphone alle Social Media Apps leicht verfügbar sind. Daher ist es wichtig immer Links zu Ihren Seiten auf Facebook, Twitter, LinkedIn, YouTube, Pinterest oder wo auch immer zu haben, damit diese mit einem einfachen Tippen erreicht und geteilt werden können.

Read More

7 grundlegende Techniken zur Verbesserung der Ladezeit einer Webseite

Posted By chris / Technologie / No Comments

Aus der Erfahrung von vielen Dutzenden Projekten wissen wir, dass man zur Beschleunigung der Ladezeit zum Beispiel die Anzahl der HTTP Request minimieren sollte. Dies kann mit Massnahmen im Frontend durch das Kombinieren von Files oder das Zusammenfassen von Icons in CSS Sprites erreicht werden. Andere Massnahmen erfordern etwas mehr Wissen und Aufwand und so haben haben wir nachfolgend die grundlegendsten Massnahmen zur Beschleunigung der Ladezeit einer Webseite aufgelistet.

HTTP Caching

Grundsätzlich unterscheidet man 2 Arten von Caching: Browser- und Server-Caching.
Browser-Caching erfordert das korrekte Setzen des Fileheaders, damit Ressourcen wie Bilder, CSS- und JavaScript-Files bei wiederholten Besuchen aus dem Cache des Browsers geholt werden können.
Beim Server-Caching können dieselben Ressourcen auch statisch auf dem Server zwischengespeichert werden und bei wiederholten Aufrufen anstatt dynamisch statisch an den Browser geliefert werden.
Moderne Content Management Systeme wie Typo3, WordPress oder Drupal haben solche Cachingmechanismen bereits integriert oder können mit entsprechenden Plugins erweitert werden.
Links

GZip Komprimierung

Mit GZip- oder Deflate-Komponenten können Seiten und deren Ressourcen um ein Vielfaches komprimiert werden und viel Ladezeit eingespart werden. Deflate kann einfacher aufgesetzt werden, GZip ist aber effektiver und weiter verbreitet. Einfach darauf achten, dass nur text-basierte Ressourcen wie HTML, CSS, XML, JSON oder JavaScript komprimiert werden, Bilder und PDF sind bereits komprimierte Ressourcen.
Links

HTTP-Requests minimieren

Diese Massnahme ist eine der Schlüsselfaktoren für eine schnelle Ladezeit. Hierzu gibt es verschiedene Möglichkeiten:

  • Kombinieren von Files: Mehrere Files der gleichen Sorte (also CSS mit CSS und JS mit JS) können jeweils in ein einziges File kombiniert werden.
  • CSS Sprites: Mit dieser Technik werden Bilder in ein einziges grosses File kombiniert und im HTML mittels background-image und background-position richtig angezeigt.
  • Inline Bilder: Dies ist eine relativ neue Technik und wird auch nur von den neusten Browser unterstützt. Dabei werden Bilder nicht über den -Tag aufgerufen, sondern direkt mittels Base64 in den Code geschrieben. Dies macht das File etwas grösser, aber die Anzahl der HTTP-Requests wird um ein Vielfaches gesenkt.

Links

Stylesheets oben, JavaScripts unten

Da das Laden von JavaScript-Files die Darstellung der Seite blockiert sollten diese an das Ende des HTML-Dokumentes gestellt werden. Die Stylesheets sollten vor dem abschliessenden -Tag gestellt werden, um weisse Seiten im IE zu verhindern.

Einsatz von CDN

Die örtliche Distanz des Webseitenbesuchers zum effektiven Standort des Servers, der die Webseite bereitstellt, hat auch einen Einfluss auf die Ladezeit einer Webseite. Mit sogenannten Content Delivery Networks (CDN) können Inhalte auf weltweit verstreuten Servern zur Verfügung gestellt werden und somit dem Webseitenbesucher die Adresse mit den wenigsten Netzwerk Hops ausgeliefert werden.
Links

Wollen Sie weitere Massnahmen zur Beschleunigung der Ladezeit Ihrer Webseite erfahren? Dann kontaktieren Sie uns unverbindlich unter info@design42.ch. Wir finden bestimmt eine Handvoll von Massnahmen um Ihre bestehende Seite noch schneller zu machen!

Read More

Redesign für La Casa del Habano Zürich

Posted By chris / Allgemein / No Comments

Die Casa del Habano ist ein Franchise-Unternehmen von Habanos S.A. in Kuba. Momentan existieren 135 dieser Geschäfte in rund 50 Ländern rund um den Globus.

Für die Franchise in Zürich – www.la-casa-del-habano.ch – hat Design42 ein komplettes Redesign mit responsivem Design plus Onlinekatalog konzipiert, umgesetzt und online gestellt.

Auf Basis von WordPress kann der Kunde alle Inhalte wie News, Seiten und Produkte selber bearbeiten.

Weiteres zu Casa del Habano (über Intertabak AG): Die Casas garantieren dem Aficionado nicht nur die Authentizität der Produkte, gelagert unter perfekten Bedingungen, sondern bieten ausserdem ein vollständiges Sortiment an Habanos-Marken und -Formaten. Die Casas beziehen (außer in Cuba, wo Habanos S.A. die Casas natürlich direkt beliefert) ihre Produkte über die jeweiligen Exklusivimporteure der Länder.

Die Casas bieten nicht nur den perfekten Raum für den Verkauf von Habanos, sie führen außerdem bestimmte Habanos-Spezialitäten und -Raritäten, die sonst nicht im Fachhandel erhältlich sind. Neue Produkte sind dort immer zuerst erhältlich. Fachkundiges Personal in den Casas begleitet den Geniesser auf dem Weg durch die Welt der Habanos, angefangen über die richtige Wahl bis hin zu Informationen über die Entstehung dieser “Juwele”.

In der Schweiz existieren heute zwei Casas del Habano: in Zürich und Basel.

Read More

where are we ? click for google map