Bezahlbar ins Internet
Professionelle Webseiten
für Desktop, Smartphone und Tablet

WebDesign Berlin Brandenburg - Wir erstellen ihre Homepage

preiswert 

transparente Preise
günstig und fair

einfach 

unbürokratische Abläufe
persönlich direkt

mobil 

für Smartphones
und Tablets

flexibel 

zügige Umsetzung
hochwertig ansprechend

Wir erstellen Ihre Webseite 
preiswert - professionell - schnell


Bei der Erstellung der Website richten wir uns nach den geltenden Standards und den aktuellen Webtechnologien und wir achten - neben einer persönlichen, auf den Kunden abgestimmten Note - vor allem auf Einfachheit, Übersichtlichkeit und leichte Bedienbarkeit.

Nachfolgend sehen Sie eine Auswahl der von uns angebotenen Produkte, Services und Dienstleistungen.
 Die genauen Kosten lassen sich nur in den seltensten Fällen ganz genau vorhersagen.

Referenzen

1984 begann ein kanadischer Farmer, seine Kühe als Werbeflächen zu vermieten.
Wir brauchen keine Kühe. - Wir haben das Internet.

noch mehr Referenzen

News

Wie verbessere ich meine Homepage!

SEO Trends 2020
Neben einer passenden Keyword-Strategie sowie einer nutzer¬gerechten und fokussierten Landingpage-Optimierung bleibt natürlich eine technisch saubere Umsetzung weiterhin erforderlich. In der Regel liegen die größten SEO-Aufgaben weiterhin in einer ordentlich aufgestellten Indexierungssteuerung sowie der internen Verlinkung – immer mit der mobilen Website als Grundlage der Bewertung. Vermutlich hat der Großteil aller Websites hier noch immer großen Nachholbedarf. Erst wenn die Basis steht, sollte man eigene Prozesse etwa durch Automatisierung gestalten.

Page-Speed auch 2020SEO relevant
Page-Speed, das in den letzten Jahren zunehmend wichtiger geworden ist, zeigt sich nicht zuletzt in den Weiterentwicklungen von Googles kosten¬frei verfügbarem Performance-Tool Lighthouse sowie der Veröffentlichung des Chrome-User-Experience-Reports. ¬Dieser Bericht ist interessant, weil er Einblick in die tatsächliche Website-Geschwindigkeit im Vergleich zum ¬Wett¬bewerb liefert.

Aufmerksamkeit durch neue Markups
Google setzt immer mehr auf strukturierte Daten, um den ¬Content auf Websites besser zu erfassen. Selbst Daten, die nicht mit ¬schema.org ausgezeichnet sind, werden immer besser verarbeitet.
Der Klick auf ein Suchergebnis – insbesondere im ¬informativen Bereich – wird immer weniger nötig. Gleichzeitig bieten die ¬Formate auch Chancen für zusätzliche Aufmerksamkeit in den Such¬ergebnissen.

Die bestmögliche SEO ist strukturiertes, standardkonformes Webdesign
Der Ursprung des World Wide Web liegt in der Erfindung von HTML. Diese Auszeichnungssprache gibt Inhalten eine nachvollziehbare Aufstellung und konnektiert sie gemeinsam über Links. Suchalgorhithmen durchsuchten also schlicht jene Strukturen und verstanden sie über Marker, wie H1, P . So konnten sie die Inhalte nach Relevanz einordnen. Die Links verfolgten sie weiter und konnten in dieser Art Zuletzt den Gesamtumfang einer Website erkennen, wie ebenso deren Einbettung in die Gesamtstruktur des Netzes. Natürlich wertete die Suchmaschine Seiten höher, wenn sie aus der Gesamtstruktur des Netzes vielfach via Link angesprungen wurden und niedriger, wenn das nicht der Fall war.

Und auf diese Weise ist es bis heute geblieben. Die perfekte und effektivste SEO ist also ein standardkonformes Webdesign, das seine Auszeichnungsmöglichkeiten ausschöpft, also gewissermaßen H1 verwendet, wo es vernunftgemäß ist.

Die erstmalige SEO-Maßnahme für Designer besteht deshalb darin, standardkonformes HTML zu schreiben.

Verwende Tags wie vorgesehen
HTML ist eine Struktursprache. Seitenbesucher, die nicht mit den Augen kommen, darunter natürlich ebenfalls die Crawler der Suchalgorhithmen, die erkennen über HTML die Inhalte und können sie so richtig einstufen.

Vermeide unnötige Elemente
Letztendlich geht es Suchalgorhithmen bloß um Inhalte, niemals um Optik. Von demnach solltest du auf Designelemente danach verzichten, wenn sie den Inhalt nicht sofort assistieren. Dem Inhalt gebührt der volle Fokus. Überlege exakt, ob die winzige Meinungsbefragung in der Sidebar oder das lustige Minispiel oder das selbststartende Streifen wahrhaft diesem Inhalt zuträglich sind. Wenn nicht, lass sie weg.

Sie sind nicht ausschließlich Hindernisse während der Relevanzbewertung, anstelle könnten außerdem zum Besucherschreck avancieren. Daraus entsteht daraufhin das, was SEOs als eine hohe Bounce-Rate bezeichnen. Die Menschen springen kurz nach dem Betreten deiner Seite erneut ab. Das erkennt Google und wertet es natürlich negativ. Bei alldem hat das Verhalten unter Umständen gar nichts mit dem konkreten Inhalt zu tun, stattdessen bloß ein bisschen mit deiner zu spielerischen Herangehensweise an die Belegung des Bildschirmplatzes.

Sorge für eine klare Linkstruktur
Deine Navigation ist das wichtigste Detail für die Indexierung der Website. Von hier aus sollten die Suchmaschine jede Seite deines Angebots erreichen können. Hierbei solltest du die Navigation technisch in dieser Art problemlos wie wahrscheinlich entwerfen und nicht exemplarisch ein komplexes Javascript-Konstrukt ins Leben rufen. Gerade für die Fütterung der Suchmaschine haben sich XML-Sitemaps als vernünftig erwiesen.

Achte darauf, keine Seite verwaist zu lassen. Ohne Links hat die Suchmaschine keine Möglichkeit, eine konkrete Seite zu finden und zu indexieren.

Links wiederum sollten kurz, trotz alledem sprechend sein. Zwar arbeitet Google automatisch intern indessen bevorzugt mit numerischen IDS und scheint den sogenannten hübschen URLs wenigstens im Ranking keine Benefits mehr zu verschaffen. Allerdings ist die Suchmaschine allein der eine Teil deines Besucheraufkommens. Personen werden mit sprechenden URLs erheblich besser klarkommen, sie besser memorieren und sie ebenfalls leichter mit dem Thema assoziieren, wenn sie sie beispielsweise in Social-Media-Kanälen sehen.

Zur Linkhygiene gehören zwei übrige Aspekte. Achte darauf, dass ausgehende Links funktional sind und tausche tote Links allzeit zeitnah aus. Lass deine Website nicht unnötig ausufern. Stattdessen halte sie kompakt, also mit in dieser Art wenig Seiten wie denkbar.

Setze Fotos als Fotos, Buttons als Buttons, Fonts als Fonts ein
Bilder sind nicht hierzu erdacht worden, um darin Text zu aufzeichnen. Nur weil der normal sehende Besucher jene Finte nicht genauso bemerken würde, lautet das nicht, dass es ebenso für die Suchmaschine kein Problem wäre. Fotos benötigen allzeit Alt-Tags, hierdurch Google und Co. allumfassend die Aussicht haben, zu erraten, worum es im für den Crawler unsichtbaren Bild denn wahrscheinlich geht. Fotos ohne Alt-Tag wirst du in der Bildersuche keineswegs finden.

Auch als Call-to-Action eignen sich Fotos nicht. Immerhin ist der Call-to-Action dein gegebenenfalls wichtigstes Interaktionselement. Lege das besser, wie vorgesehen, als Button mit einem als fundamental ausgezeichneten Text an.

Typografie ist in der neuartigen Gestaltung essentiell. Früher konnten wir schicke Schriftarten bloß als Text im Bild verwenden. Heutzutage müssen wir das nicht mehr. Denn wir haben Webfonts. Allein in Google Fonts finden sich indessen 819 Schriftfamilien. Da wird mutmaßlich was hierbei sein. Webfonts steigern womöglich einerseits die Zeit zum Laden deiner Website, entlasten sie nichtsdestominder auf der sonstigen Seite gleichwohl von Bildern.

Setze die essenziellen Meta-Tags
Titel und Beschreibung einer Seite solltest du nicht unterschlagen. Nicht in dieser Art sonderlich auf Grund des streitigen Ranking-Vorteils, anstelle an erste Stelle demzufolge, weil es der Titel und die Beschreibung sind, die deine Seite in den Suchergebnissen repräsentieren. Selbstverständlich sollten beide Teile auf diese Weise knackig wie wahrscheinlich ausgedrückt sein. Der Titel erhält um die 70 Zeichen, die Beschreibung maximal 160. Bei alldem ist es ratsam, mögliche identifizierte Keywords der passenden Seite wenn irgend wahrscheinlich weit vorne in Titel und Beschreibung zu platzieren.

Erstelle Websites responsiv
Responsives Designkonzept hat den Nutzen, dass es jeden Inhalt nur einmal gibt und das Konzeption längst konzeptionell tendenziell schlank gehalten wird.

Achte auf die Performance deiner Website
Je schneller deine Website lädt, umso besser. Das gefällt deinen Eingeladenen und daher gefällt es gleichfalls der Suchmaschine. Währenddessen existieren ungezählt viele Evaluationen, die nachweisen, dass Besucher lange Ladezeiten mit dem Verlassen der Website quittieren. Was verlassen wird, kann nicht ausgesprochen relevant sein und gehört dementsprechend nicht hoch oben auf die Suchergebnisseite.

Und was ist mit dem Content?
Content is King, oder?
Der Designer im engeren Sinne wird allerdings nicht der Lieferant dieses Contents sein, weshalb sämtliche Aspekte zum Inhalt ausgeklammert wurden.
Generell gilt indes gleichermaßen hier, je hochwertiger der Inhalt, umso höher das Ranking.

Was bedeutet Mobile-First-Index?
Seit Juli 2019 stammen die Suchergebnisse aus dem Mobile-First-Index. Somit sind die mobilen Versionen einer Homepage und deren Informationen entscheidend für das Ranking bei den Suchmaschinen. Die bisher benutzten Desktopversionen einer Webseite verlieren immer mehr an Bedeutung. Das bedeutet für die Suchmaschinenoptimierung ein komplettes Umdenken, denn die größte Aufmerksamkeit sollte in erster Linie auf der Prüfung und Erweiterung der mobilen Version liegen.
Wie kann ich meine Webseite prüfen?
Mit der Search Console von Google kann der Status der Indexierung und des Crawlings geprüft werden.
Wie gestalte ich meine Homepage um?
Es wird ein WebDesign benötigt, das sich automatisch an alle Endgeräte optimal anpasst („Responsive Design“).
Dieses WebDesign ist Benutzerfreundlich und garantiert, dass alle Inhalte bestens angezeigt werden. Es muss kein separates mobiles Design erstellt werden – es wird nur eine URL benötigt. Somit muss nur eine Homepage gepflegt werden
Haben Sie Fragen zur Umgestaltung ihre Homepage?
Nehmen Sie mit uns Kontakt auf!
Wir erstellen Ihre Webseite neu. 

Was sind Strukturierte Daten?
Strukturierte Daten gewinnen für die Darstellung der Suchergebnisse enorm an Einfluss.Damit bekommen meine Inhalte mehr Aufmerksamkeit von den Suchmaschinen.
Wie geht das mit den strukturierten Daten?
Strukturierten Daten bieten den Suchmaschinen Bots weitere Informationen zu den Inhalten auf der Webseite.
Das einfachste Beispiel dafür ist das Datum eines Artikels. Man sagt der Suchmaschine, wann ein Beitrag veröffentlicht wurde und diese übernimmt die Information dann direkt in die Suchergebnisseite. So ist für den Suchenden direkt ersichtlich, wann ein Beitrag verfasst wurde.
Damit die Suchmaschinen es einfacher haben, zeichnet man die strukturierten Daten im Quelltext (sogen. Markup) der Webseite entsprechend aus. Man teilt mit um welche Angabe es sich handelt (z.B. Datum der Veröffentlichung) und den entsprechenden Wert. 
Werden FAQ Markups direkt in den Suchergebnissen angezeigt?
FAQ steht für «Frequently asked questions», also häufig gestellte Fragen. Wenn man diese auf seiner Webseite auszeichnet, werden sie direkt in der Suchergebnisliste angezeigt.
Der Vorteil ist: Das Suchergebnis der Seite mit FAQ-Markup nimmt in der Ergebnisliste deutlich mehr Platz ein als konkurrierende Ergebnisse. Das bringt unter Garantie mehr Besucher auf die Seite. 
Wie werden FAQ Markup erstellt?
Dafür gibt es natürlich einen wunderbaren Generator, mit dem man ein FAQ Markup mit wenigen Klicks erstellen kann.
https://saijogeorge.com/json-ld-schema-generator/faq/
Dann den fertigen Quellcode in die eigene Homepage einfügen ...und fertig! Natürlich unter den FAQ
Gibt es für die Dartstellung strukturierter Daten für Joomla oder Wordpress ein Plugin?
Für Joomla gibt es das Plugin Google Structured Data --> Download hier 
Für WordPress gibt es das Plugin Schema --> Download hier

Pillar-Pages – Neues Konzept für die Suchmaschinenoptimierung
Es wird Zeit sich von bloßen Keywords zu verabschieden und stattdessen in Themen zu denken. Websites nach diesem Muster sollen genau das leisten.
Was genau ist eine Pillar-Page?
Eine Pillar-Page ist eine Webseite, die sich umfassend mit einem bestimmten Thema beschäftigt. Für SEO bedeutet das, dass eine Pillar-Page-Homepage die Basis eines Themenclusters ist: Alle wichtigen Aspekte eines Themas werden auf einer Seite beantwortet und von dieser Webseite aus wird auf weitere Websites des Themenclusters verlinkt, die spezifischer auf Detailthemen eingehen.
Beispielsweise kann eine Pillar-Page ein Thema behandeln, in das Thema einführen und relevante Fragen aufgreifen. Wenn aber alle Aspekte bis ins kleinste Detail besprochen würden, wäre diese Seite unendlich lang. Daher würde die Pillar-Page auf Cluster-Content-Seiten verlinken, die Tools, KPI, Plattformen und so weiter zum gleichen Thema behandeln.
Warum sind Webseiten im Pillar-Pages Stil und Themen-Cluster wichtig?
Das Ziel von Google ist die Suchanfragen seiner Nutzer so gut wie möglich zu bedienen. Dazu gehört es auch, die Intention hinter einer Suchanfrage besser zu verstehen und die dazu passenden Ergebnisse bereitzustellen. Weiterhin ist bekannt, das Suchanfragen immer länger und komplexer werden.
Damit es Seitenbetreibern gelingt, möglichst viele Varianten und Aspekte einer Suchanfrage abzudecken und so von Google als besonders relevant eingestuft zu werden, sollten Seiteninhalte einer Homepage in Kernthemen strukturiert und durch interne Verlinkungen sinnvoll geclustert werden. Damit erfüllen Webseiten im Pillar-Pages Stil und die dazugehörigen Content-Cluster gleich mehrere SEO-Benefits: Sie bieten tiefgehende Inhalte, die die User-Intentionen auf einer breiten Basis abgreifen. Sie organisieren die Inhalte einer Seite so, dass sie von Google schnell erfasst und indexiert werden können. Die logische Vernetzung durch interne Links sorgt außerdem dafür, dass sich User besser zurechtfinden. Pillar-Pages wirken hier als Wegweiser für den Rest der Seite.

Nachhaltiges Webdesign
Das Internet verbraucht sehr viel Strom. Stromerzeugung bedeutet für den größten Teil der Welt die Verbrennung fossiler Brennstoffe, was wiederum bedeutet, dass der CO2-Fußabdruck des Internets den globalen Flugverkehr möglicherweise bereits in den Schatten gestellt hat .
Der Mozilla Internet Health Report 2018 besagt, dass „Nachhaltigkeit eine größere Priorität haben sollte
Was bedeutet das für ein modernes Webdesign?
Eine Unternehmenswebsite wird weiterhin als digitale Visitekarte oder Aushängeschild im Internet gesehen. Aus Sicht der Verwender sind einleitend trotz alledem folgende Kriterien für die Verwendung einer Website entscheidend:
Seitengeschwindigkeit – wie schnell lädt die Seite? Zielfindung – wie einfach finde ich das, was ich suche? Responsive – wie gut funktioniert die Seite auf meinem Gerät? Usability – wie schnell finde ich mich auf der Seite zurecht? Aussehen – spricht mich die Seite optisch an?
Diese Hierarchie zeigt, dass beim Webdesign in erster Regel Geschwindigkeit und Einfachheit eine bedeutende Rolle spielen. Eine visuell äußerst ansprechende Seite ist sinnlos, wenn der Verwender sie auf Grund ¬langer Ladezeiten unmittelbar erneut verlässt oder die mobile Darstellung ¬katastrophal ist. Wissen sollen unmittelbar laden und direkt gefunden werden. Aus diesem Grund ist ein schlankes ¬Webdesign nicht ausschließlich umweltfreundlich, anstelle kommt gleichwohl der User-¬Experience und somit der Anzahl der gewonnen Leads dagegen.
Denn binnen der Realisierung schlanker Websites geht es ebenso um die Vermeidung von Müll – eher, um die Vermeidung von Datenmüll. Übertragen wir dieses Prinzip auf Websites, ¬lassen sich hieraus folgende Richtlinien ableiten:
Die Informationen, die auf der Website präsentiert werden, reduzieren. Code mehrfach verwenden. Mit vorhandenen Modulen und Materialien arbeiten.
76 % der Website-Nutzer sehen die Erreichbarkeit der gesuchten Information als wichtigstes Designkriterium. Diese Zahl kommuniziert alleine: Websites müssen für Benutzer und nicht für Firmen konzipiert werden. Nach einer Begutachtung der Seite sollten die vorhandenen Infos auf das Bestimmende mindert werden. Weniger Inhalte bedeuten schnellere Zeit zum Laden. Zugleich steigen Performance und Benutzerfreundlichkeit.
Ein weiterer Punkt, der Websites viele Male überfrachtet, ist das Bildmaterial: Es gilt, zu überlegen, wie viele Fotos es tatsächlich sein müssen. Smartphone-Nutzer mit Edge-Empfang in länd¬lichen Areale werden beispielsweise optimiertes Bildmaterial schätzen. Hier werden Fotos in Größe, also Pixel-Maßen, verkleinert und mit vorhandenen Tools wie dem kostenlosen Imageoptim für das World Wide Web komprimiert. Allein ebendiese Maßnahme spart bereits eine Reihe von Megabyte und novelliert des weiteren die Bildausgabe auf der Website. Mittels die Programmierung einer ¬intelligenten Bildausgabe, dem sogenannten Lazyload, wird ein Bild erst danach aufgeladen, wenn der Verwender in das Feld scrollt. Zusätzlich kann mittels ein Source-Set mit verschiedenartigen ¬Bildgrößen genauso die Datenmenge schmälert werden. So wird jeweils die ¬passende Bildgröße für das jeweilige Device ausgegeben. Bei einem -Smartphone wird also ein klar kleineres Bild aufgeladen als während einem 17-Zoll-Display.
Mittels wiederholende Muster in der Benennung lässt sich binnen der Frontend-Entwicklung ausgeprägt Zeit und Code einsparen. Eine ¬Methode, um Code analog zu strukturieren, heißt BEM – Block, Detail, Modifier. Bei alledem wird die Website in Blöcke und darin ¬existierende Bestandteile aufgeteilt, die anhand Modifier modifiziert werden können. Blöcke sind alleinstehend, wie zum ¬Beispiel ¬Header, Container oder Menüs, und können gleichermaßen innerhalb ¬anderer ¬Blöcke gibt es. Teile gibt es jederzeit innerhalb eines Blocks, wie etwa Header-Titel, Textfelder oder Menüpunkte, und hängen semantisch mit den Blöcken gemeinsam. Modifier realisieren diverse Gelegenheiten für Blöcke oder ¬Elemente, wie exemplarisch Größe, Sichtbarkeit oder feste Position. Mit Hilfe Namenskonventionen werden die CSS-Hierarchien flach gehalten und komplizierte Spezifizierungen vermieden.
Wie viele Buttons, Überschriften und ¬Container benötigt es tatsächlich? Die Lösung sind Websitemodule und ¬-elemente, die häufiger eingesetzt werden können. So existieren darauf folgend bspw. lediglich ein Textmodul, einen Slider, einen Teaser und ein Bildmodul. Mittels die oben beschriebenen Modifier aus der BEM-Methode können jene Bestandteile darauf folgend abgestimmt werden, sodass sie mittels verschiedenartige Möglichkeiten für verschiedenste Inhalte brauchbar sind. So können im Textmodul beispielsweise andersartige Breiten oder Hintergrundfarben ausgewählt werden, und mit lediglich einem Detail ergeben sich divergente Design¬optionen.
Eine Reduktion der Elemente macht eine Website nicht bloß schlanker, an Stelle erneuert ebenfalls die User-Experience: Anwender müssen sich nicht fortwährend neu orientieren und können ¬Gelerntes einsetzen. Sowohl im Frontend als ebenfalls im Backend. Jedes Modul oder Detail, das ausschließlich ein Mal auf der Website eingesetzt wird, sollte hinterfragt werden. Muss dieses Modul in Wirklichkeit sein? Kann eine zusätzliche Lösung gefunden werden? Steht das „Gewicht“ des Moduls im Verhältnis zum Vorteil für den Anwender?
Zudem kann für eine Website Material, das allemal im Internet vorhanden ist, genutzt werden. Wer beispielsweise gängige Webfonts benutzt, die auf diese Weise oder in dieser Art auf vielen Gerätschaften eingerichtet sind, muss beim Aufrufen der Website keine innovative Schriftart laden ¬lassen.

Was man mit CSS derweil umsetzen kann
Das geht alles mit CSS?
Dass sich mit CSS nur Farben, Abstände und einige andere ¬Eigenschaften angleichen ließen, ist lange vorbei. So können Web¬designer mit der CSS-Eigenschaft „backface-visbility“ Bestandteile diesbezüglich bringen, dass sie sich umdrehen und in dieser Art ihre „Rückseite“ ¬zeigen. Die kann bspw. einen sonstigen Text als die Vorderseite ¬enthalten. Das eignet sich etwa für die Simulation von Frage- und Antwort-Karten.
Schicker Texteinstieg mit CSS: Mit „first-letter“ lassen sich ¬In¬itiale in Größe, Farbe und Schrift¬art bauen. (Screenshot: Codepen)
Schmückende Anfangsbuchstaben für einen Text setzen? Mit „first-letter“ lassen sich Initiale in Größe, Farbe und Schriftart nach Wunsch bauen. Die Funktionalität „shape-outside“ wiederum realisiert es, Text um ein beliebig geformtes grafisches Element fließen zu lassen. Apropros Grafik: Webdesigner können bloß mit CSS Tortendiagramme bauen, indem sie „conic-gradient“ nutzen.
Fotos lassen sich mit Filtern versehen, sodass sie im Zuge einem Mouseover ihre Helligkeit verändern oder von Schwarzweiß- zu Farbfotos wechseln und ähnliches. Zu diesem Zweck müssten Webdesigner widrigenfalls entweder viele Zeilen Javascript-Code anwenden oder zusätzliche Grafiken verwenden – das ist kompliziert und verzögert eine Website unnötig. Deutlich reibungsloser und performanter kann hier CSS wirken. Das zeigen die CSS-Regeln im folgenden, relativ simplen Beispiel, das ebenfalls in der Abbildung zu sehen ist:
Darüber hinaus sind etliche restliche nützliche CSS-¬Eigenschaften in Arbeit. Zum Beispiel die Leistungsmerkmale „scrollbar-width“ und ¬„scrollbar-color“, mit denen sich die Farbe und Breite von ¬Scrollbars ermitteln lässt. Ein Entwurf beschäftigt sich mit der Möglichkeit, Seitenverhältnisse von Elementen rasch festzu¬legen, was bis dato lediglich über einen Workaround mutmaßlich war. -Erwartet wird gleichermaßen die Pseudo-Klasse :matches(), mit der ¬Webdesigner eine Gruppe von Selektoren definieren können – etwa, um grundlegende Stylesheets zu bestimmen.
Fazit
Die Möglichkeiten des Webdesigns haben sich stark modifiziert und erweitert. Die Sprache CSS spielt dabei heute eine essenzielle Rolle: Mit Flexbox und Grids verfügt CSS über ausgewachsene Techniken für flexible und responsive Layouts. Zusätzlich konzipiert sich gerade das Subgrid-Konzept. Nach wie vor lässt auf diese Weise mancher Webentwickler CSS aufgrund seines alten Rufs links ¬liegen. Das ist ein Fehlgriffe. Denn CSS wird unterbrechungsfrei von Neuem weiterent¬wickelt und ist demnach seit vielen Jahren komplexer und leistungs¬fähiger, als einige das potentiell wahrhaben wollen.

Variable Fonts: Das neumodische Schriftformat erobert das Web
Seit acht Annos gewährleisten Webfonts für mehr Ausdruck und Vielfalt im Webdesign. Jetzt bahnt sich mit variablen Fonts die nächste Revolution an. Welche Gelegenheiten eröffnet das neuartigen Schriftformat?
In den Anfangszeiten der Webfonts waren Webdesigner bereits hierdurch zufrieden, endlich Alternativen für Arial, Georgia und Co. an der Hand zu haben. Aber relativ flink wuchs der Qualität, ebenfalls im World Wide WWW abwechslungsreiche Typografie auf Printniveau einsetzen zu können: Mehr und mehr Schriftschnitte wurden eingespannt, um typografische Vielfalt zu schaffen. Doch mit jedem Schriftschnitt musste eine weitere Datei aufgeladen werden, was die Ladezeiten in die Höhe flinken ließ. Genau hier setzen heute variable Fonts an. Sie sind mit dem Ziel der Datenkomprimierung erfunden worden, bieten nichtsdestotrotz zudem noch zusätzliche Benefits.
Was sind variable Fonts?
Eine Schriftart existieren zumeist mit verschiedenartigen Schriftschnitten oder Schriftstilen bzw. Strichstärken – beispielsweise „Light“, ¬„Regular“, „Bold“ – oder Schriftbreiten wie „Condensed“ oder ¬„Extended“. Jeglicher solcher Schriftstile wird vom Schriftdesigner abgemacht und in einer speziellen Datei gesichert. Je nach Umfang der Schriftart können hier natürlich viele Einzeldateien entstehen, was gerade im Web auf Grund längerer Ladezeiten nicht von Surplus ist. Dieses Problem haben Adobe, Apple, Google und Microsoft herausgefunden und 2016 in Kombination mit zusätzlichen Experten das Opentype-Format um „Opentype Font ¬Variations“, reputabel als „variable Fonts“, ¬erweitert.
Mit diesen variablen Fonts ist es gegenwärtig denkbar, diverse Schriftstile einer Schrift in einer einzigen Datei zu vereinen. Einzelne Schriftschnitte werden währenddessen nicht in einzelne ¬Dateien ausgelagert, statt dessen über divergente Achsen definiert. Ein Basisschriftschnitt, Central Master genannt, wird unterdessen mit Extremwerten einer Schrift¬eigenschaft, bspw. „Thin“ und „Black“, verknüpft. So entsteht eine Achse, entlang derer die Strichstärke stufenlos interpoliert werden kann.
Variable Fonts lassen sich, wie sämtliche weiteren Schriften ebenso, über ¬@font-face ins CSS integrieren:
@font-face {
font-family: "SourceSans";
src: url("source-sans-variable.woff2")
format("woff2");
}
Hierbei sollte sichergestellt sein, dass die verwendete Schriftart gleichfalls im komprimierten Woff2-Format vorhanden ist. Der oben genannte Code bindet den variablen Font ein, der von unterstützten Browsern angewendet werden kann. Dies sind – Stand Juli 2018 – die derzeitigen Varianten von Edge, Chrome und Safari (ab MacOS 10.13). Firefox wird mit der Variante 63 nachziehen.
Nun lässt sich die Schrift wie geläufig über die font-family Funktionalität dem ausgewählten HTML-Element zuweisen. Über die Funktionalität font-variation-settings können die andersartigen Achsen angesprochen und mit Werten ausstaffieren werden. Wie allemal skizziert, sind fünf Standardachsen hinterlegt, die mit jeweils vier Zeichen langen, kleingeschriebenen Tags im CSS bezeichnet werden:
Achse Name CSS-Tag
Strichstärke Weight wght
Schriftbreite Width wdth
Kursive Italic ital
Neigung Slant slnt
Optische Größe Optical Size opsz
Diese Tags können mit Werten gepaart werden und in dieser Art die ausgesuchte Schriftdarstellung anzeigen lassen. Im anschließenden Beispiel entspricht der verwendete Wert 700 dem Schriftschnitt „Bold“:
html{
font-family: 'Amstelvar';
font-variation-settings: "wght" 700;
}
Weitere Achsen können kommagetrennt erweitert werden. Liegen angepasste Achsen vor, werden ebendiese mit Großbuchstaben ausgebaut. Die Schrift Amstelvar verfügt beispielsweise über eine Achse mit dem Namen ¬„Grade“, welche die Strichstärke dünner oder fetter macht – ohne unterdessen die horizontale Ausdehnung der Schrift zu verändern:
html{
font-family: 'Amstelvar';
font-variation-settings: "wght" 700, "GRAD" 60;
}
Wer nicht exakt weiß, welche Achsen in einem variablen Font enthalten sind, dem unterstützt die Website Wakamai Fondue ¬(wakamaifondue.com), die variable Fonts untersucht und die ausgewählten Informationen anzeigt.
Variable Schriften können gleichermaßen zudem mit font-weight: bold auf fett gestellt werden. Hierzu muss zugegeben beim Einbinden der Schrift der Umfang der Strichstärken angegeben werden, in folgendem Beispiel der größtmögliche Umgang von 1 bis 999:
@font-face {
font-family: "SourceSansVariable";
src: url("source-sans-variable.woff2")
format("woff2");
font-weight: 1 999;
}
Ebenso können ebenso die restlichen Standardachsen über CSS-¬Eigenschaften angesprochen werden: Für die Schriftbreite kann durch font-stretch ein Prozentwert inmitten 50 und 200 % angegeben werden, womit 100 % der normalen Breite entspricht, 50 % „Ultra-Condensed“ und 200 % wiederum „Ultra-Expanded“. font-style kann neben dem prominenten italic für echte Kursive ebenfalls Grad¬angaben für die Schrägstellung erhalten, die darauf folgend von oblique -90deg bis oblique 90deg reichen. Die visuelle Größe kann mit ¬font-optical-sizing: auto eingeschaltet oder mit dem Wert none ausgeschaltet werden.

Aufbau einer professionell gestalteten Homepage
Unter professionell verstehen wir Funktionalität, Zweckmäßigkeit und Benutzerfreundlichkeit für Endbenutzer und Website-Administratoren.
Überlegen Sie sich den Zweck, bevor Sie mit dem Erstellen der Website beginnen.
Der nächste wichtige Schritt ist die Struktur ihrer Webseite, die Folgendes umfasst:

Hauptnavigationsmenü – normalerweise: Über uns, Produkte/ Dienstleistungen, Team, Kontakt und andere Seiten

Inhaltskategorisierung – Jede der Kategorien kann mehrere Unterkategorien haben, die zu einzelnen Seiten mit Produkten/ Dienstleistungen führen

Inhaltsfunktionalität und Filterung – bei Bedarf umfassen sie Reservierungssystem, Suchfilter, Bestellformulare, Warenkorb, Kontaktformulare, Zahlungsformular, Implementierung von Online-Zahlungsdiensten usw.

Strukturelle Aufteilung einer Einzelseite – Jede Webseite sollte aus einem Einführungstext, einer detaillierten Beschreibung der Produkte/ Dienstleistungen/ Arbeiten, Aufrufen von Aktionsschaltflächen und Links zu anderen Seiten derselben Kategorie oder Unterkategorie bestehen (meistens in der Seitenleiste, jedoch nicht in der Liste, auch in Kopf- oder Fußzeile)

Multimedia-Inhalte für interne Einzelseiten – Fotos, Infografiken, Illustrationen, Videos usw., die speziell für Ihre Website erstellt wurden

Blog-Bereich – im Allgemeinen als separate Kategorisierung je nach Thema, Kennzeichnung des Inhalts, interner Verknüpfung usw. zu verstehen.

Gerne helfen wir Ihnen bei der Erstellung Ihrer Firmen-Homepage. In regelmäßigen Abständen bieten wir Homepage-Kurse an.
Homepage Kurse

Was bei der Textgestaltung einer Website beachtet werden muss.
Typografie kann die inhaltliche Aussage des Textes visuell transportieren und zusätzlich die gewünschten Stimmungen vermitteln.

Dank der Webfonts sind die Möglichkeiten in den vergangenen Jahren enorm gestiegen. Ähnlich wie im Print-Design stehen unzählige Schriftarten zur Verfügung. Wer eine zeitgemäße typografische Website gestalten will, muss nicht mehr auf „Open Sans“ als Schriftart zurückgreifen – typografische Gestaltung kann so viel mehr. Um das umzusetzen, muss niemand ein ausgebildeter Grafik-Designer sein. Denn es gibt ein paar Richtlinien sowie jede Menge Websites und Tutorials, die Hilfe und Unterstützung bei dieser Aufgabe bieten.

Zeitgemäße Web-Typografie bedeutet vor allem eins: wichtige Gestaltungsregeln zu kennen. Auch technische Möglichkeiten sowie aktuelle Design-Trends und -Entwicklungen sollten bei der Wahl der Typografie eine Rolle spielen. Manchmal kann natürlich auch das bewusste Brechen von Regeln die richtige Strategie darstellen. Im Folgenden die wichtigsten Tipps und Anhaltspunkte.

Typografie schafft Hierarchie.
Das klingt erst einmal banal für den Fachmann, ist aber eine der grundlegenden Bedeutungen von Web- und Typografie-Design. Denn damit lässt sich Elementen eine visuelle Bedeutung zuweisen, die der inhaltlichen Bedeutung entspricht. Am einfachsten geht das durch Größenunterschiede. Je größer ein Element ist, umso bedeutsamer ist es. Eine Überschrift ist also größer als der Fließtext. Tipp: Zuerst die Größe des Fließtextes – im HTML sind das die Absätze, also das p-Element – festlegen und dann nach und nach Schriftgrößen und Aussehen der weiteren Elemente gestalten.

Schwarz auf Weiß,
wie man aus es dem Print-Bereich kennt, hat sich auch im Webdesign bewährt. Für eine edlere Anmutung wird auch gerne ein mittlerer Grauton gewählt. Beides ist jedoch nicht wirklich sinnvoll, denn der Kontrast von schwarzer Textfarbe (#000) auf weißem Hintergrund (#fff) ist sehr hart und für das Auge eher unangenehm. Designer setzen daher besser auf einen dunklen Grauton als Textfarbe oder verdunkeln den Hintergrund leicht. Sie wählen also kein reines Weiß, sondern einen sehr blassen Farbton.

Zeilenlänge
Zu einer der am meisten missachteten Typografie-Gestaltungsmöglichkeiten zählt die Zeilenlänge. Viele Designer machen sich um alles Mögliche Gedanken – Farbe, Größe, Schriftart –, aber nicht über die Breite der Textspalte. Das führt in der Folge dazu, dass sich Texte über die volle Inhaltsbreite erstrecken – was oft viel zu breit ist. Das Auge findet dann schwer Halt in der Zeile und schlecht den Anfang der nächsten. Das unterbricht den Lesefluss unnötig.

Zeilenabstand
Zu kleine Zeilenabstände wirken negativ auf die Lesbarkeit – wenn sie denn überhaupt definiert wurden. Als Faustregel lässt sich sagen: den Zeilenabstand immer etwas höher wählen. Designer müssen hier gar keine festen Pixelwerte eingeben. Ganz allgemein ist in CSS ein line-height-Wert zwischen 1.4 bis 1.8 hilfreich, aber auch das ist von der Schriftgröße und der Schriftart abhängig. Grundsätzlich gilt: Je länger die Zeile ist, umso größer sollte der Zeilenabstand und je größer der Text, umso kleiner kann der Zeilenabstand sein.

HOMEPAGE-CLASSIC

ab 699 €

  • 5 Bildschirmseiten
  • 3 E-Mail Adressen
  • 10 Bilder
  • 1 Domain
  • Kontaktformular
  • Handyfunktionalität

WEBSEITE-PREMIUM

ab 989 €

  • 10 Bildschirmseiten
  • 6 E-Mail Adressen
  • 20 Bilder
  • 1 Domain
  • Kontaktformular
  • Handyfunktionalität

WEBSEITE-BUSINESS

ab 1300 €

  • 15 Bildschirmseiten
  • 12 E-Mail Adressen
  • 30 Bilder
  • 1 Domain
  • Kontaktformular
  • Handyfunktionalität

Die Identität im Internet sichern... 

Für Internet-Einsteiger und Kleingewerbetreibende ist es wichtig, sich die eigene Identität im Internet mit einer Domain zu sichern und die E-Mail-Kommunikation zu professionalisieren. 

Bezahlbar ins Internet

Geben Sie Ihrer Homepage einen sehr guten ersten Eindruck! 


Neben dem professionellen Eindruck und einer klaren Struktur sind es, die Details, die Ihren Auftritt im Web ansprechend und "professionell" erscheinen lassen.
Die üblichen "Pannen" reichen von Rechtschreibfehlern über verworrene Strukturen bis hin zu falschen Telefonnummern und Seiten, die nicht erreichbar sind.
Unabhängig von Umfang und "Ausstattung" Ihres Auftrages berücksichtigen wir diese Details bereits bei der Umsetzung.

Der sagenhafte "erste Eindruck" soll nicht der letzte Eindruck sein, oder?

Mit unseren Homepages machen Sie einen guten ersten Eindruck! Aber auch bestehende Kunden freuen sich über eine klar strukturierte und informative Homepage, sei es, um schnell noch einmal die Telefonnummer herauszusuchen oder um sich zielgerichtet über ein bestimmtes Produkt zu informieren.

Ist ein potenzieller Kunde über eine Suchmaschine auf Ihre Website aufmerksam geworden, entscheidet sich innerhalb der ersten Sekunden, ob er verweilt, oder ob er die Homepage wieder verlässt und die Suchergebnisse weiter durchstöbert. Deshalb muss der Besucher gleich zu Beginn angemessen empfangen werden. Farbwahl und Schriftgrößen, Formulare und Fotos...

Ersparen Sie sich und Ihren Kunden unnötigen Stress, indem Sie von vornherein einen Profi ans Werk lassen.

Mit einem modernen, hochwertigen Design überzeugen

Als erstes wirkt das Design. Ist das nicht angemessen, gehen Besucher davon aus, dass Sie nicht der richtige Partner sind.
Überzeugen Sie mit Ihrer Website. Eine intuitive und unkomplizierte Nutzung einer Homepage hat großen Einfluß, ob sich die Besucher ihrer Webseite angesprochen fühlen und ihr Angebot nutzen möchte.
Eine Neugestaltung Ihrer Webeseite kann hier die richtige Lösung sein. Nicht nur neue Kunden geben Sie durch ein zeitgemäßes Design einen zuverlässigen Eindruck von Ihrem Angebot. Auch Ihre bestehenden Kunden schöpfen durch einen professionellen Auftritt im Netz Vertrauen.
Dank jahrelanger Erfahrung im Webdesign in Berlin und Brandenburg berücksichtigen wir diese Details bereits bei der Umsetzung Ihres Auftrags.

Allgemeine Informationen und Portfolio


WebDesign Ines Kempin besteht aus einem kleinen*, enga­gierten Team, das sich auf die Er­stellung von preis­werten, individuellen und mobilen Internet­präsenzen für Unter­nehmen, Frei­berufler und Gewerbe­treibende jeder Art in der Region Berlin-Brandenburg spezialisiert hat.

Neben der klassischen Homepage bieten wir auch die Er­stellung von Webseiten in responsiven, mobilen Webdesign, deren Darstellung sich an mobile Endgeräte wie Smartphones oder Tablets anpasst. Zusätzlich führen wir regelmäßig Homepage-Kurse durch.

Optimierung für Besucher und Suchmaschinen, eine regelmäßige Pflege und Aktualisierung der Websites sowie verschiedene Maßnahmen im OnlineMarketing runden unser Angebot ab.

Damit die notwendigen Investitionen transparent und überschaubar bleiben, arbeiten wir mit flexiblen Preismodellen. Diese werden den Anforderungen und Wünschen unserer Auftraggeber im Rahmen eines Angebots entsprechend angepasst.

Unser Büro liegt 30 km östlich von Berlin in Strausberg. In einem ruhigen Bürohaus arbeiten wir an unseren Projekten und empfangen unsere Kunden und Interessenten zu Gesprächen und Präsentationen.


*Für spezielle Aufgaben und bei Kapazitätsengpässen können wir auf auf das Know-How und die Unterstützung von Partner-Agenturen und freien Mitarbeitern zurückgreifen.

Fragen und Antworten

Hier finden Sie Antworten auf 5 häufig gestellte Fragen zu den Themen WebDesign und Internetseite.

Bezahlbar ins Internet

1. Wie fangen wir an?
Sie möchten für Ihr Unternehmen gerne eine eigene Firmen-Homepage erstellen lassen oder Ihre vorhandene Webseite modernisieren lassen? Sie suchen eine Webdesign-Agentur im Raum Berlin-Brandenburg?

Prima! Bitte rufen Sie uns unter der Nummer 030-55 87 45 87 an oder kontaktieren uns über unser Kontaktformular.

Wir vereinbaren dann einen persönlichen oder telefonischen Termin für eine kostenfreie Erstberatung und zum Kennenlernen, gerne auch in Ihren Geschäftsräumen.

Damit Sie es so einfach wie möglich haben, hat sich folgende Vorgehensweise gut bewährt:

In einem ersten Gespräch schildern Sie uns Ihre Vorstellungen und Wünsche für eine Neue oder die Überarbeitung Ihrer bereits bestehenden Unternehmens-Homepage. Auf der Basis der von Ihnen im Gespräch gegebenen Informationen erhalten Sie dann von uns ein übersichtliches Angebot. Nach Annahme des Angebotes beginnen wir mit der Arbeit gestalten zuerst das Layout.

Wenn das Layout Ihren Vorstellungen entspricht, beginnen wir mit der Erstellung Ihrer neuen Internetseite. Damit Sie die Arbeiten während dieser Zeit verfolgen können, erhalten Sie einen passwortgeschützten Zugang

2. Neues Webdesign, bestehende Internetseiten neu gestalten?
Ihre vorhandene Internetseite ist unvollständig, sie möchten Änderungen und Aktualisierungen vornehmen, das Design ist nicht mehr zeitgemäß und die Seite lässt sich auf Tablets oder Smartphones nur sehr schlecht anzeigen.

Sie hätten gerne noch die eine oder andere nützliche Funktion? Gerne machen wir Ihnen für die Überarbeitung einen entsprechenden Vorschlag. Bitte rufen Sie uns unter der Nummer 030-551 475 54 an oder kontaktieren uns über unser Kontaktformular.

3. Ich habe noch keine Webseite, Auswahl von Webadresse und Provider?
Um Interesse zu wecken und neue Kunden zu gewinnen möchten auch Sie gerne Ihr Unternehmen ansprechend im Internet präsentieren?

Doch Sie sind sich unsicher, was Sie davon haben und welche Kosten dadurch entstehen? Sie haben noch keine Domain (Webadresse) und keinen Provider (Unternehmen, welches Webspace, also Speicherplatz für die Unterbringung, das Hosting von Webseiten im Internet, zur Verfügung stellt)?

Gerne sind wir Ihnen bei der Auswahl behilflich. Alternativ können wir auch für Sie bei unseren leistungsstarken Hosting Partner einen Account (Zugang) einrichten.

Um Ihnen Ihre Möglichkeiten zu zeigen, rufen Sie uns unter der Nummer 030-551 475 54 bitte an oder kontaktieren uns über unser Kontaktformular.

4. Was kostet das Webdesign für eine Internetseite?
Je nach Art und Umfang, den benötigten Inhalten, den gewünschten Funktionen und dem daraus resultierenden zeitlichen Aufwand für das Webdesign lässt sich diese Frage pauschal leider nicht beantworten.

Als Übersicht und für die vollen Kostenkontrollen erhalten Sie im Vorfeld von uns ein kostenfreies und transparentes Angebot. Dabei werden auch mögliche Folgekosten wie für die Aktualisierung und Pflege Ihrer Webseite, die Hosting-Gebühren und wenn gewünscht, Kosten für Online-Marketing dargestellt.

Bitte sehen Sie sich dafür unsere Preis-Übersicht an!

Damit wir Ihnen ein entsprechendes Angebot unterbreiten können, rufen Sie uns bitte unter der Nummer 030-551 475 54 an oder kontaktieren uns über unser Kontaktformular.

5. Wie bleibt meine Internetseite Aktuell?
Für die Pflege und Aktualisierung Ihrer Webseite bieten wir Ihnen je nach Art und Umfang eine faire Service-Vereinbarung an. So können Sie sich beruhigt zurücklehnen, sich Ihrem Unternehmen oder Verein zuwenden und müssen dafür keine Zeit investieren.

Sie möchten Ihre Webseite selbst pflegen oder jemand in Ihrem Freundes-, Kollegen- oder Bekanntenkreis übernimmt das für Sie? Auch das ist möglich. Gerne beraten wir Sie zu Ihren Möglichkeiten.

Wählen Sie aus einer großen Auswahl der jüngsten voreingestellten Blocks - Full Screen Intro, Bootstrap Slider, Content Slider, responsive Bildergalerie mit der Lightbox, Parallax Scrolling, Video Hintergründe, mobiles Menü sowie noch viele weitere Dinge.

Büro

Garzauer Chaussee 1a
15344 Strausberg

03341 335 320
0176 38 23 58 69
service@bezahlbar-ins-internet.de

Anfahrt

Sofortkontakt

Sie möchten gerne ein Angebot bekommen, eine Dienstleistung von uns in Anspruch nehmen oder Sie haben Fragen? Dann kontaktieren Sie uns doch einfach und schnell per E-Mail, Telefon oder über unser Online-Formular.

Online-Formular