Responsive Webdesign

Responsive Webdesign ist ein neues, gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tablets, reagieren können.
Der grafische Aufbau einer responsiven Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird.
Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (klicken, wischen).
Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JS.

 
titelbild

Webdesign Phasen


1. Planen

Ich beginnen bei der Planung ihrer neuen Webseite an verschiedenen Ausgangspunkten. Einerseits sind Überlegungen zur Zielgruppe wichtig, andererseits soll das Zusammenstellen von Inhalten von Anfang an Teil des Prozesses sein.
Wer wird ihre Website besuchen? Welche Interessen könnten diese Besucherinnen haben?
Welche Inhalte wollen sie präsentieren? Welche Texte, Bilder, welches Audio- oder Videomaterial soll berücksichtigt werden?


2. Designen

Auch wenn die Planung noch nicht vollständig abgeschlossen ist, kann mit dem Design begonnen werden. Wireframes oder Mockups sollen skizzenhaft die Struktur der Site zeigen. Heute wird dies direkt im Browser gemacht. Das responsive Verhalten wird dargestellt und dadurch nachvollziehbar. Farbkonzepte kommen ins Spiel.
Erst nach Abnahme der ersten beiden Phasen wird mit dem Codieren der Website begonnen.


3. Coden

Nach Abschluss der beiden ersten Phasen wird mit HTML5 und CSS3 und Javascript die Website nach neuesten Standards gebaut, sodass sie sicher sind, dass ihre Site in modernen Browsern richtig dargestellt wird.
Auf Wunsch kann ich auch Hacks einrichten, die ihnen die Abwärtkompatibilität zu IE6 + 7 garantieren, obwohl diese beiden Browser in der Schweiz nur noch von ca. 2.17% Desktops (Quelle Januar 2015: Marketshare) benutzt wird.
Bei den mobilen Geräten sind die Darstellungsprobleme vernachlässigbar, da sich IE hier mehr an die Standards hält, weil "best practices" im Google-Ranking begünstigt werden.


4. Onlinen

Bevor ich ihre Site online stelle, wird sie ausgiebig getestet.
Nach Bedarf werden sie in der Pflege ihrer Inhalte geschult.
Ob die Aktualisierung ihrer One-Page-Seite mittels File-Zilla und TextWrangler, oder das Backend ihres CMS, ich begleite sie weiter und sorgen dafür, dass ihre Site einen guten Start hat.


5. Finden

Damit ihre Seite gefunden wird, gibt es heute verschiedene SEO Massnahmen, damit ihr Angebot möglichst weit oben in den Rankings der Suchmaschinen erscheint.
Ich bin aber auch weiterhin präsent, wenn sie weitere Fragen bezüglich ihrer Website haben, oder ihre Seite ein Update nötig hat.

Rufen sie mich an (+41 79 325 31 08) oder schreiben sie mir ein !


Portfolio


www.atrionfini.ch
anatinna bild
Anatinna Trionfini

Link: www.atrionfini.ch

Einfaches Redesign
HTML5 | CSS3
Responsive Webdesign

Bestehende Seite wurde nur leicht angepasst und um den Menupunkt "Diverses" erweitert, unter welchem monatliche News zu Büchern hochgeladen werden können. Mit Webhosting Plus inklusive.

www.biowaves.ch
biowaves bild
Claudia Bossard

Link: www.biowaves.ch

Web Visitenkarte
HTML5 | CSS3
Responsive Webdesign

Einfache Visitenkarte im Internet, mit angepasster Schrift für Smartphones und Tablets. Telefonnummer direkt anwählbar.

www.christiangeiger.ch
geiger bild
Christian Geiger

Link: www.christiangeiger.ch

Web Visitenkarte
HTML5 | CSS3
Responsive Webdesign

Einfache Visitenkarte im Internet, mit angepasster Schrift für Smartphones und Tablets. Telefonnummer direkt anwählbar.

www.danielgoettin.ch
goettin bild
Daniel Göttin

Link: www.danielgoettin.ch

Screen Design
Flashsite
Programmierung

Leider wird Flash von iOS nicht unterstützt. Interessante Künstlerseite mit vielen Bilder-Slidern.

www.iyengar-yoga.ch
yoga bild
Maya + Vasili Vlachos

Link: www.iyengar-yoga.ch

Screen Design
HTML5 | CSS3
Semi Responsive Webdesign

Mit dem YAML 3.2 Framework gebaut. Sicherer Seitenaufbau auf allen gängigen Browsern. Gut lesbar auf Tablets.

www.pneu-helfenstein.ch
helfenstein bild
Erich Helfenstein

Link: www.pneushop-helfenstein.ch

Screen Design
HTML5 | CSS3
Responsive Webdesign

Einfache Responsiveness mit dem 1140px Grid.

www.stefanecker.ch
stefan bild
Stefan Ecker

Link: www.stefanecker.ch

Screen Design
HTML5 | CSS3
Responsive Webdesign

Das Foundation 4.0 Framework im Hintergrund garantiert, dass die Seite auf allen modernen Browsern gut dargestellt wird.

www.yoga-karl.ch
karl bild
Karl Strahlke

Link: www.yoga-karl.ch

Screen Design
HTML5 | CSS3
Semi Responsive Webdesign

Mit dem YAML 3.2 Framework gebaut. Sicherer Seitenaufbau auf allen gängigen Browsern. Gut lesbar auf Tablets.


SEO (Search Engine Optimization)

Wenn sie eine wunderschöne Website haben, diese von ihren Kunden jedoch nicht gefunden wird, ist das nicht einfach Pech. Dann haben sie die nötigen SEO Massnahmen nicht gemacht. Und die sind oft nicht sehr aufwändig oder teuer.
Ich kann sie beim Schreiben relevanter Titel und Texte, der adäquaten HTML-Strukturierung ihrer Site, der richtigen Verlinkung und der Anmeldung bei Google unterstützen.


Hosting

Da ich mich als rundum Dienstleister verstehe, gehört das Hostingangebot und das Einrichten ihrer Seite auf einem Server dazu. Sie können selbstverständlich einen eigenen oder anderen Hoster auswählen.

Webhosting Basic

CHF 7.90 / Monat

  • 100MB Speicherplatz
  • unbegrenzter Mailspace
  • 20 POP3 Mailboxen
  • 20 Mailadressen
  • 20 FTP Benutzer
  • 5 Sub Domains
  • 5 Mailinglisten
  • 5 MySQL Datenbanken

Webhosting Plus

CHF 12.90 / Monat

  • 100MB Speicherplatz
  • unbegrenzter Mailspace
  • 20 POP3 Mailboxen
  • 20 Mailadressen
  • 20 FTP Benutzer
  • 5 Sub Domains
  • 5 Mailinglisten
  • 5 MySQL Datenbanken
  • + 1 Änderung auf der Website pro Monat inklusive!

  • Stefan Ecker
  • Freiestrasse 71
  • 8406 Winterthur
  • Mobile: +41 79 325 31 08
  •  
  • apple logo html5 logo CSS3 logo