| Leistung | Satz | Preis in € |
|---|---|---|
| Domain buchen/ einrichten | pauschal | 40.00 + tatsächliche Domainkosten |
| Cloud bereitstellen/ einrichten | Stunde | 40.00 + Projektanteil der tatsächlichen Cloudkosten |
| Installationen | pauschal | 70.00 |
| Responsive Web Design (RWD) | pro Seite | 70.00 - 150.00 |
| MicroData nach schema.org | pro Rubrik | 30.00 |
| Webentwicklung Planung | Stunde | 40.00 |
| Webentwicklung | Tag | 300.00 - 800.00 |
| Webentwicklung Magento | Tag | 400.00 |
| Webentwicklung WordPress | Tag | 300.00 |
Ich freue mich auf unser Gespräch.
Technisch basiert Responsive Webdesign (RWD) auf einem Zusammenspiel aus mehreren Kerntechnologien und Prinzipien, die dafür sorgen, dass eine Website fließend auf unterschiedliche Bildschirmgrößen und Endgeräte reagiert:
| Geräte | Typische Bildschirm-größe | Gängige physische Auflösungen (Pixel) | Typischer Einsatzzweck / Beispiele |
|---|---|---|---|
| Small Screen Smartphone | 4 – 5.5 Zoll | 720 × 1280 (HD), 1080 × 1920 (FHD) | ältere/kompakte Budget-Handys |
| Big Screen Smartphone | 6 – 6.9 Zoll | 1080 × 2340 bis 1440 × 3200 (QHD+) | Moderne Flaggschiffe (iPhone Pro Max, Galaxy Ultra) |
| Small Tablet | 7 – 8.9 Zoll | 800 × 1280, 1536 × 2048 | iPad Mini, kompakte Android-Tablets |
| Big Tablet | 10 – 14.6 Zoll | 1668 × 2388, 2048 × 2732, 1848 × 2960 | iPad Pro, Galaxy Tab S-Serie, Surface Pro |
| PC / Laptop (Medium/ Big) | 13 – 32+ Zoll | 1920 × 1080 (Full HD), 2560 × 1440 (WQHD), 3840 × 2160 (4K UHD) | Standard-Monitore, Business-Laptops, Gaming-PCs |
HTML (Hypertext Markup Language):
Bildet die semantische Grundstruktur der Website, stellt Inhalte, Texte und Medien bereit und nutzt für alle Geräte dieselbe Codebasis.
überprüfe den HTML- Aufbau einer Webseite mit dem HTML- validator von w3 https://validator.w3.org/
CSS (Cascading Style Sheets):
übernimmt die gesamte optische Anpassung und das Layout. Dazu gehören:
Flexible Grids & Layouts: Arbeiten mit relativen Maßeinheiten (wie Prozent %, vw/vh, fr im CSS Grid oder flexbox) anstelle von starren Pixel-Werten (px).
Media Queries (@media):
CSS- Regeln, die die Eigenschaften des Endgeräts (vor allem die Bildschirmbreite, Höhe oder Ausrichtung) abfragen und bei sogenannten Breakpoints (Haltepunkten) das Layout gezielt umschalten.
@media screen and (max-width: 680px) {}
@media screen and (min-width: 681px) {}
@media screen and (min-width: 800px) {}
Flexible Typografie: Skalierbare Schriftgrößen (z. B. über clamp(), rem oder em), damit Texte auf einem kleinen Smartphone genauso lesbar bleiben wie auf einem 4K-Desktop.
Responsive Medien (Bilder & Videos):
Durch CSS-Anweisungen wie max-width: 100% passen sich Grafiken und Videos flexibel in ihren Container ein, ohne über den Bildschirm hinauszuragen.
CSS Beispiel für die obere JavaScript Galerie img {
max-width: 100%;
height: 6em;
display: block;
}
Moderne CSS-Layout-Module:
CSS Flexbox: Ideal für eindimensionale Anordnungen von Elementen (Zeilen oder Spalten).
CSS Grid Layout: Ideal für zweidimensionale, komplexe Rasterstrukturen, die sich an die Bildschirmbreite anpassen.
Viewport-Meta-Tag:
Ein HTML-Tag im <head>-Bereich (z. B. <meta name="viewport" content="width=device-width, initial-scale=1.0">), der dem Browser sagt, wie er die Seite auf mobilen Geräten skalieren soll. Ohne diesen Tag würden Smartphones versuchen, eine Desktop-Ansicht verkleinert darzustellen.
JavaScript (optional/ergänzend): Kommt für dynamische oder interaktive UI(User Interface - Benutzeroberfläche)-Elemente zum Einsatz – etwa für ein ausklappbares Hamburger-Menü, das sich auf kleineren Bildschirmen anders verhält als eine Desktop-Navigation.
Performance- und Bild-Techniken (z. B. srcset): über das HTML-Attribut srcset oder das <picture>-Element werden dem Browser je nach Bildschirmauflösung unterschiedlich große Bilddateien serviert, um Ladezeiten auf dem Smartphone zu sparen.
Welche strukturierten Daten werden erkannt? Auf der Webseite https://validator.schema.org/ finden Sie den Validator und alle Möglichkeiten zur Darstellung von strukturierten Daten.
HTML beschreibt hauptsächlich die Struktur und Darstellung einer Website. Schema.org ergänzt die semantische Bedeutung der Inhalte. Suchmaschinen verstehen die Webseite besser. Damit reduzierst Du Interpretationsspielraum.
Können durch strukturierte Daten besser einordnen: Wer hinter einer Website steht. Welche Dienstleistungen angeboten werden. Welche Produkte existieren. Welche Person oder welches Unternehmen gemeint ist. Wie einzelne Seiten miteinander zusammenhängen.
Strukturierte Daten können dazu führen, dass Google bestimmte Inhalte erweitert darstellt. Produktinformationen mit Preis und Verfügbarkeit. Bewertungsinformationen. Veranstaltungsinformationen. Rezeptinformationen. Breadcrumb-Navigation.
Wichtig: Schema.org garantiert keine erweiterten Suchergebnisse. Google entscheidet selbst, ob und wie solche Informationen angezeigt werden.
Welche Rich-Suchergebnisse hat die Webseite?
search.google.com/test/rich-results