Responsive Webdesign und Webentwicklung aus Chemnitz

Über uns

Was wir für Sie tun können

Pixelstun.de ( Chemnitztalstr. 22, 09114, Chemnitz, SN) ist eine Manufaktur für hochwertige Webanwendungen in Chemnitz. Neben modernem Webdesign und aktueller Technik liegt unser Fokus auf komplexen, suchmaschinenoptimierten (SEO) und mobiloptimierten (responsive) Anwendungen nach Kundenwunsch. Wir setzen ihre Idee mit dem Content-Management (CMS) oder Framework Ihrer Wahl um.

Design

Wir nehmen uns die Zeit, auf Ihre Wünsche und Vorstellungen einzugehen und entwickeln in enger Zusammenarbeit mit unseren Kunden Designs, die so einzigartig sind wie diese selbst. Im Web nutzen wir Responsive Design für ein optimales Ergebnis auf allen Geräten.

Konzeption

Durch individuelle Konzepte sorgen wir dafür, dass Ihre Botschaft den Empfänger erreicht. Wir planen Ihre Software und Apps. Egal Online-, Print- oder Full-Service-Auftrag, wir setzen Ihre Projekte zeitnah und professionell um.

Webentwicklung

Ihr Projekt in den besten Händen. Wir arbeiten mit neusten Standards und Frameworks. Wir entwickeln CMS-Erweiterungen, Datenbanken und komplexe Anwendungen in PHP/Python kombiniert mit perfekten multimedialen Frontends in HTML5, JavaScript und CSS.

Wartung

Wir lassen Sie nicht im Regen stehen - Wir bringen Ihre Website auf den neuesten Stand, kümmern uns um Updates, aktuelle Inhalte und reparieren defekte oder kompromittierte Software zum Beispiel nach einem Hackerangriff.

Optimierung

Sind Sie unzufrieden mit den Ergebnissen in Suchmaschinen, der Leistung, dem Umfang oder der Erreichbarkeit Ihrer Website? Wir verfügen über umfangreiches Wissen zur Suchmaschinenoptimierung (SEO), gestalten Ihre Website barrierefrei und rasend schnell.

Inhaltsverwaltung

Content-Management-Systeme (CMS) sind bei uns Standard. Dies ermöglicht eine einfache und nachhaltige Bearbeitung von Inhalten direkt durch den Kunden ohne Folgekosten. Ob Joomla, Drupal, TYPO3 oder WordPress: wählen Sie Ihren Favoriten!

Portfolio

Einige ausgewählte Arbeiten

projekt-schliessen
  • Webdesign - KGV Am Birkenhain e.V.

    KGV Am Birkenhain e.V.

    Webdesign
    http://ambirkenhain.deFür den Chemnitzer Kleingartenverein "Am Birkenhain" e.V. wurde eine Website mit dem CMS Joomla erstellt. Der Fokus lag auf der einfachen Bearbeitung von Inhalt und Terminen durch die Mitglieder. Suchmaschinenoptimierung, Geschwindigkeitsoptimierung und responsive Design für die optimale Darstellung auf mobilen Endgeräten wie Smartphones und Tablets waren essentieller Bestandteil des Projektes. Entwickelt wurden weiterhin eine Erweiterung für das Einstellen freier Gärten und vereinsinterner Kleinanzeigen.
  • Webdesign - VAW Chemnitz

    VAW Chemnitz

    Webdesign
    http://vaw-chemnitz.deFür die Versicherungsagentur Wagner, einem Spezialisten für Kleingartenversicherungen entstand ein Website mit CMS im Design nach Wunsch des Kunden. Da das Klientel der Agentur hauptsächlich aus Senioren besteht, wurde eine einfache Optik gewählt und jede mögliche Ablenkung vom Inhalt vermieden. Die Website wurde nach dem mobile-first Prinzip erstellt, d.h. speziell für Smartphones und Tablet PCs optimiert. Eine Geschwindigkeitsoptimierung und bedingte Maßnahmen zur Suchmaschinenoptimierung (SEO) wurden durchgeführt.
  • Webdesign - flipmarket.de

    flipmarket.de

    Corporate Design
    In Deutschland nutzen täglich mehrere Millionen Menschen die Möglichkeit, im Internet Preise zu vergleichen, Produkte zu erwerben oder etwas zu verkaufen. Mit Flipmarket.de wird zum ersten Mal der Markt nicht vom Anbieter, sondern vom Käufer bestimmt. Nutzer können über die Plattform anonyme und auch unspezifische Gesuche (z.B. Smartphone, Tablet, Notebook, aber auch Möbel etc.) einstellen. Danach erhalten sie von lokalen Anbietern wie z.B. Einzelhändlern auf sie zugeschnittene Angebote. Diese können damit den im Onlinehandel fehlenden Service ausgleichen und technisch weniger begabte Kunden erschließen. In diesem Fullservice-Auftrag erarbeitet Pixelstun.de plattformübergreifende Lösungen und eine einheitliche Corporate Identity für alle Medien.
  • Webdesign - divvy.de

    divvy.de

    Webdesign
    Aktuelle Schnnäppchen, Preisfehler, Gratisartikel und mehr. Die Community von divvy.de stellt ebendiese Inhalte der breiten Öffentlichkeit zur Verfügung. Das Projekt befindet sich derzeit noch im Aufbau und soll gegen Ende des Jahres offiziell gestartet werden. Für die Umsetzung wurde das Content Management System Joomla gewählt, welches für die Nutzer ein einfaches Bereitstellen von Inhalten ermöglicht. Das CMS wurde mit diversen Plugins und eigens entwickelten Komponenten erweitert.
  • Webdesign - Kaffeesatz

    Kaffeesatz

    Corporate Design
    Im Rahmen eines Designstudiums entstand diese Konzeptarbeit in Form eines Corporate Designs.
  • Webdesign - Bianca Böhme

    Bianca Böhme

    Webdesign
    Für die RnB-Sängerin und Songwriterin Bianca Böhme (bekannt unter Anderem aus "The Voice of Germany") war eine Webseite zu entwerfen. Für die Umsetzung wurde das CMS Joomla gewählt.
  • Webdesign - fal-franke.de

    fal-franke.de

    Corporate Design
    http://fal-franke.deFür FAL - Franke, einen Spezialisten im Bereich Instandsetzung von Anlassern, Lichtmaschinen und Klimakompressoren, entwickelt Pixelstun.de ein modernes Webdesign auf Basis des bisherigen Corporate Designs. Ein zielgruppengerechtes Design in mehreren Sprachen ermöglicht auch den vielen internationalen Kunden von FAL - Franke eine einfache Navigation und Kontaktaufnahme.
  • Webdesign - Robert Ibisch Portfolio

    Robert Ibisch Portfolio

    Webdesign
    https://ibisch.netJeder Designer benötigt ein Portfolio um seine Leistungen und Arbeiten vorzustellen. So auch der kreative Kopf von Pixelstun.de, Robert Ibisch. In der Galerie finden sich einige ausgewählte Werke. Bei der Umsetzung wurde besonderer Wert auf die platformunabhängige Gestaltung und Optimierung für mobile Endgeräte (responsive Design) gelegt.

Blog

Das schreibt Pixelstun.de

Barrierefreies Webdesign: Eine Einführung

Das Internet ist für alle Menschen gemacht, egal welche Hautfarbe, Herkunft oder körperliche Fähigkeiten sie besitzen. Doch besonders Menschen mit beeinträchtigter Sicht und Blinde haben schwer im Web. Sie sind auf technische Hilfsmittel wie Screenreader angewiesen um sich im Internet zurechtzufinden, doch die wenigsten Website-Betreiber machen sich darüber Gedanken.

Dabei stoßen insbesondere blinde Menschen immer wieder auf Hindernisse die so nicht sein müssten. Vor allem veralte Websites mit Layouts auf Basis von Tabellen machen ihnen zu schaffen. Doch beim barrierefreiem Webdesign gibt es noch viel mehr zu beachten. In diesem Beitrag sollen die häufigsten Stolpersteine bei der Gestaltung einer Website aufgedeckt und Hinweise zu deren Beseitigung gegeben werden.

Wie sehbehindete und Blinde Menschen eine Website sehen

Die barriefreie Gestaltung einer Website geht eng mit der Suchmaschinenoptimierung einher. Sowohl Suchmaschinen als auch blinde Menschen sind auf eine korrekte Struktur des Inhaltes und sachgemäße Verwendung von HTML-Elementen angewiesen um eine Website benutzen zu können und zu verstehen.

Betrachten wir einmal die Startseite von Pixelstun.de mit Lynx, einem Textbrowser, der die Inhalte ähnlich wie ein Screenreader verarbeitet.

Screenreader: Darstellung einer Website im Lynx-Browser

Man sieht, dass jegliche Design-Elemente Fehlen und nur strukturiertes HTML angezeigt wird.

Im Gegensatz zum richtigen Screenreader, werden hier auch versteckte HTML Elemente angezeigt. Eine Übersicht, wie man Inhalte exklusiv für Screenreader oder Displays zugänglich machen kann, findet sich hier.

Das Ausblenden bestimmter Elemente funktioniert am besten mit CSS Media Queries und kann in folgender Form stattfinden:

@media tty, braille, speech{
element{
display: none;
}}

Aber auch die „neuen“ ARIA Attribute sind dafür geeignet.  So kann man auch mit aria-hidden="true" Elemente verstecken. Die Unterstützung in den verschiedenen Browsern und Screenreadern ist jedoch sehr unterschiedlich. Hier gibt es einen sehr guten Artikel dazu.

Layouts auf Tabellenbasis

Eigentlich sind Layouts auf Basis von Tabellen ein Relikt der 90er Jahre, doch immer wieder findet man auch heute noch Websites die Tabellen zweckentfremden und für Designs nutzen. Dabei bringen Tabellen prinzipiell nur Nachteile: sie lassen z.B. sich nicht ohne weiteres für’s responsive Design nutzen und sind schwer zu pflegen. Minimale designtechnische Änderungen  ziehen oftmals sehr viel Aufwand nach sich, sobald Tabellen im Spiel sind.

Besonders problematisch sind Tabellen zudem für alle Menschen die unter einer Sehbehinderung leiden. Screenreader lesen eine Tabelle Zelle für Zelle und der Inhalt der Website wird damit unter Umständen entstellt. Nutzen Sie Tabellen also ausschließlich dafür, wofür sie gedacht sind – um (statistische) Daten darzustellen.

Kontraste

Sehr wichtig sind auch Kontraste. Prüfen Sie ob sich der Inhalt genug vom Hintergrund abhebt. Dies betrifft nicht nur Texte, sondern auch Bilder. Der WCAG 2.0 Level AA-Test erfordert mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text bzw. 3:1 für großen Text. Für das Level AAA sind Kontrastverhältnisse von 7:1 für normalen Text und 4,5:1 für großen Text nötig. Großer Text wird dabei definiert als: 14pt+ und fett, oder 18pt+.

Tools mit dem die Kontrastverhältnisse überprüft werden können, finden sich am Ende des Beitrages.

Inline Styles, Schriftgrößen und Überschriften

Vermeiden Sie die Nutzung von Stil-Deklarationen in HTML. Als inline-Style wird z.B. folgendes definiert:

<div style="border:1px solid red">...

Verwenden Sie stattdessen ausgelagerte CSS-Dateien um Ihre Website zu gestalten. Tückisch sind dabei immer WYSIWYG-Editoren, denn diese legen meist alle Stil-Definitionen als inline-Attribute an, ohne dass sich der Autor darüber bewusst ist.

Versuchen Sie immer relative Größenangaben zu verwenden, insbesondere bei der Schrift. Dies ist nicht nur für responsive Design günstig, sondern ermöglicht auch ein flexibles Anpassen der Schriftgröße für alle Elemente der Website. Sie müssen nur die Basisschriftgröße verändern. 😉

Auch für Überschriften sollten Sie nur die dafür vorgesehenen HTML-Elemente verwenden (<h1>-<h6>).

Bilder und alt-Attribute

Das alt-Attribut ist für die Beschreibung von Bildern gedacht. Im Textbrowser oder bei einem fehlgeschlagenen Ladevorgang wird dieses Attribut angezeigt. Vergeben Sie also für jedes Bild eine Bildbeschreibung und lassen Sie diese nur in Ausnahmefällen leer, z.B. wenn das Bild ein reines Design-Element ist und sich nicht anders einfügen lässt. Verwenden Sie die Beschreibung nicht um Keywords zu platzieren. Auch wenn das früher eventuell funktioniert hat: Suchmaschinen kennen diese Tricks seit langem und analysieren die Bilder nun selbsständig.

Alt-Attribute sind für valides HTML5 übrigens zwingend vorgeschrieben.

<img src="pfad/zum/bild.jpg" alt="Bildbeschreibung" />

JavaScript, Videos und Flash

Manche Elemente können von verschiedenen Programmen (Screenreader, Browser) und Geräten nicht wiedergegeben werden. Fast kein Smartphone kann Flash wiedergeben aber auch Textbrowser und Screenreader haben Probleme mit JavaScript und Adobe Flash.

Prüfen Sie daher ob sich Ihre Website ohne Flash-Plugin und mit deaktiviertem JavaScript nutzen lässt.

Suchmaschinen gehen zwar langsam dazu über JavaScript auszuführen und CSS-Dateien zu laden und die Website zu inspizieren wie Sie in einem „echtem“ Browser angezeigt wird, für Screenreader sind diese Techniken allerdings immer noch ein riesiges Hindernis.

Verwenden Sie Videos auf ihrer Website? Beachten Sie, dass es auch Nutzer mit beeinträchtigtem Hörvermögen gibt. Erstellen Sie ein Transkript zu jedem Video.

Ist meine Website barrierfrei?

Sie möchten Ihre Website auf Barrierefreiheit testen? Die folgenden Tools funktionieren dazu sehr gut und decken prinzipiell alle relevanten Tests ab und geben Hinweise zur Verbesserung:

achecker.ca – Prüft Websites nach folgenden Standards:  BITV 1.0 (Level 2) , Section 508, Stanca Act, WCAG 1.0 (A/AA/AAA),WCAG 2.0 (A,AA,AAA)

wave.webaim.org – Prüft Websites und stellt alle problematischen Elemente  dar

Verlassen Sie sich allerdings nicht nur auf diese Tools. Versetzen Sie sich in die Lage eines seh- oder hörbehinderten Menschen und testen Sie ihre Website auf jede erdenkliche Art und Weise, insbesondere mit einem Textbrowser.

Neugierig? Zum Blog!

Kontakt

Wir freuen uns auf euch!

Haben wir Sie überzeugt? Vereinbaren Sie noch heute einen Termin oder fordern Sie ein unverbindliches Angebot an. Nutzen Sie dafür bitte unser Kontaktformular oder rufen Sie uns an:
0371 - 52 46 88 95

senden