Webentwicklung: Welche Abkürzungen gibt es?

Programmiersprachen & Werkzeuge im Webdesign

Die Webentwicklung beginnt mit der Sammlung der Kundenwünsche, der Anforderungen und Funktionalität der Webseite. Diese Informationen dienen als Grundlage für die Konzepterstellung. Nachdem ein passendes Konzept entwickelt wurde, kann die Erstellung der Webseite auch auf technischer Seite durch die WordPress Agentur beginnen. Um eine Webseite den individuellen Kundenwünschen anzupassen, können verschiedene Programmiersprachen verwendet werden.

HTML

Als Programmiersprache dient dabei der neueste Standard HTML5. HTML steht für „Hypertext Markup Language“. Diese Auszeichnungssprache ist textbasiert und ermöglicht die Strukturierung der Webseiteninhalte. Der Webbrowser, beispielsweise Google Chrome, analysiert anhand der HTML-Befehle, wo sich Elemente befinden, in welchen Abständen sie zueinander stehen oder was beispielsweise bei einem Klick auf eine Grafik geschieht. Wichtig ist hierbei auch die Berücksichtigung des Responsive Designs, um den Anforderungen von Tablet und Smartphone gerecht zu werden.

CSS

Cascading Style Sheets, auch CSS genannt, helfen dabei das Aussehen eines HTML-Dokuments zu bestimmen. Statt jede Seite einzeln zu gestalten, kann hier eine Designgrundlage für die gesamte Webseite, sowie für alle Unterseiten erstellt werden. CSS gehört neben HTML zu den Kernsprachen des Internets.

JavaScript

Um eine Webseite interaktiver zu gestalten, wird JavaScript verwendet. JavaScript erweitert die Möglichkeiten, die durch HTML und CSS gegeben sind: Benutzerinteraktionen können ausgewertet werden, Inhalte können verändert, nachgeladen oder generiert werden. Das JavaScript ist also beispielsweise dafür verantwortlich, dass sich eine Grafik ändert, sobald der Besucher der Webseite mit der Maus darüber fährt.

Natürlich bietet das Feld der Webentwicklung noch viele weitere Programmiersprachen und Tools. Schreiben Sie uns bei genauerem Interesse gerne und wir beraten Sie ganz unverbindlich zu Ihrem Projekt!

Content Management in der Webgestaltung

Eine professionelle Webseite muss regelmässig aktualisiert werden. Der Blog, die Newssektion oder der Teambereich wollen regelmässig angepasst werden. Auch kleinere Änderungen in der Produktpalette eines Online Shops müssen nicht zwangsläufig von einem Webdesigner durchgeführt werden. Um die Pflege und Aktualisierung einer Webseite für den Betreiber zu erleichtern, wird häufig mit einem Content-Management-Systeme (CMS) gearbeitet. Dieses ermöglicht eine einfache Bedienung und kann von Privatpersonen, sowie Webprogrammierer genutzt werden. Die Webseite kann nach einer kurzen Einarbeitungszeit mit Hilfe des CMS weiterentwickelt und je nach Wunsch abgeändert. Hierbei können sowohl der Inhalt, als auch das Design angepasst werden.

Das weltweit meistgenutzte CMS-System ist WordPress. Das sehr intuitive WordPress ist leicht zu bedienen und ermöglicht die Erstellung von umfangreichen Webseiten. Eine grosse Community bietet dem WordPress Nutzer Support. Eine Vielzahl an Erweiterungen, sogenannte Plugins, können mit dem CMS kombiniert werden. Eine sehr gute, tiefergehende Erklärung zu Designvorlagen und weiteren Vorteilen vom CMS-System WordPress bieten wir in unserem Blog.

Aufbau der Webseite als Schlüssel zum Erfolg in der Webentwicklung

Damit der verantwortliche Webdesigner in der Gestaltung der Webseite genau weiß, was er zu tun hat, sind möglichst präzise Vorgaben und Wünsche sehr wertvoll. Für genauere Details und Hilfestellungen überprüfen Sie gerne auch unsere umfangreiche Frage-und-Antwort-Sektion. Bei der Webseitenerstellung scheint es zunächst viele unbekannte Begriffe zu geben, die einzelne Bereiche einer Webseite beschreiben. Hier bedient sich das Webdesign häufig englischer Begriffe.

Die Anatomie einer Webseite ist grundsätzlich durchschaubar:

• Header: Der Header dient als Blickfang und beinhaltet meist Elemente wie Firmenlogo oder  –slogan. Header bezeichnet den Kopf einer Webseite (aus dem englischen “Head”). Er steht über dem Inhalt der Seite oder sticht anderweitig dominant und zentral aus dem Content heraus.
• Hero: Das Hero-Image ist eine Banner-Grafik, die sehr auffällig auf der Webseite platziert ist. Sie befindet sich oft am Anfang der Seite und über die gesamte Webseiten-Breite zentriert. Das Hero-Image kann auf Wunsch auch so eingestellt werden, dass es beim Scrollen im Seitenverlauf mitläuft und als permanenter Hintergrund agiert.
• Navigation: Unter dem Header, oder oft auch mittendrin, befindet sich die Navigation. Sie enthält direkte Links zu Unterseiten und Bereichen wie Über Uns oder einem eigenen Blog. Die Navigation dient dem Webseitenbesucher als Fahrplan, um sich auf der Webseite zurecht zu finden. Eine gut durchdachte Struktur in der Navigation ist also essentiell. Alle Hauptbereiche der erstellten Webseite können hier repräsentiert werden. So finden Besucher übersichtlich und schnell zu angebotenen Leistungen oder Informationen.
• Content: Content-Bereiche sind die Areale, in denen Texte und andere Inhalte dargestellt werden. Hier werden die tatsächlichen Informationen einer Seite übermittelt, beispielsweise Produktbeschreibungen oder Blogartikel. Content bedeutet aus dem englischen übersetzt “Inhalt”.
• Footer: Der Footer, das Gegenstück zum Header, bezeichnet den Fussbereich einer Webseite. Hier werden Links zu rechtlichen Hintergründen wie den AGB, der Firmenadresse oder weiterführenden Kontaktmöglichkeiten aufgezeigt. Häufig wird der Footer visuell durch den geschickten Einsatz von Farben vom Rest der Seite abgetrennt. Der Footer eignet sich als Informationsbereich für Hintergrundinformationen, Kontakt- und Pflichtangaben, die nicht vom Thema der Webseite ablenken sollen, aber dennoch sehr wichtig sind.
• Favicon: Ein weiteres Objekt der Webgestaltung ist das sogenannte Favicon. Wie beispielsweise das kleine blaue „t“ von Twitter erscheint es in der Adresszeile des Browsers, solange sich ein Besucher auf der Seite befindet. Das Favicon wird genutzt, um den Wiedererkennungswert einer Internetseite zu steigern und gegebenenfalls das Firmenlogo dominanter zu präsentieren. Im Rahmen einer professionellen Webseitenerstellung ist die Erstellung eines individuellen Favicons häufig inkludiert.
• Pop-Up: Eines der wichtigsten Elemente gewerblicher Internetseiten ist das Kontaktformular. Bei Interesse oder Fragen gibt es jedem Besucher eine unkomplizierte Möglichkeit der Kontaktaufnahme. Das Kontaktformular kann eine eigene Unterseite einnehmen oder bei Klick auf den Button „Kontakt“ als Pop-Up-Fenster erscheinen.
• Ein Pop-Up-Fenster ist ein Grafikelement, welches sich im Vordergrund der aufgerufenen Webseite öffnet, ohne diese zu schließen. So kann schnell Kontakt aufgenommen oder sich als Kunde angemeldet werden, ohne die Unterseite wechseln zu müssen. Auch Newsletter oder wichtige Hinweise können via Pop-Up gut dargestellt werden.

Es gibt viele weitere Elemente, die für eine professionelle Webseitenerstellung genutzt werden können. Um gewünschte Inhalte aufzubereiten und als grafischen Leckerbissen darzustellen, ist die Zahl an Möglichkeiten unserer Webdesigner schier unendlich. Wenn Sie mehr darüber erfahren wollen, wie Sie Ihre Webseite grafisch optimieren können, dann kontaktieren Sie uns doch einfach ganz unverbindlich per Mail an mail@hhomepage.ch.

Wireframes & Mockups: Entwürfe zum Erstellen von Webseiten

Um Wünsche des Kunden als Webgestalter umzusetzen werden häufig auch Wireframes genutzt. Sie helfen bei der Planung von Webseiten und sind Skizzen der gewünschten Struktur und des gewünschten Designkonzepts. Wireframes können frei gestaltet werden, sollten aber maximal detailliert sein, um die Zufriedenheit des Kunden sicherzustellen. Alternativ wird auch mit Mock-Ups gearbeitet, welche frei übersetzt als Designentwürfe bezeichnet werden können.

Domain & Hosting für eine Webseite

Um eine Webseite online abrufen zu können, müssen die Inhalte gespeichert werden. In der Onlinewelt wird der Speicherplatz einer Webseite als Hosting bezeichnet. Es gibt verschiedene Anbieter, wie zum Beispiel Novatrend, die Webseiten hosten. Das heißt, dass die Webseite auf einem Server untergebracht ist. Bei Zugriff auf diesen Server kann eine Webseite geöffnet werden. Anbieter solcher Webhosting-Dienstleistungen finden sich beispielsweise auch auf Google in Sekundenschnelle.

Damit Kunden die gestaltete Webseite auch erreichen, muss noch eine Domain bestellt werden. Die Domain ist die Adresse der Webseite, beispielsweise www.hhomepage.ch. Nachdem eine Domain ausgewählt wurde, muss dieser nur noch registriert und “angemietet” werden.

Lesen Sie hier mehr zu Domain und Hosting.

SEO – die bekannteste Abkürzung der Webentwicklung

Eines der wichtigsten Werkzeuge der Webseitenerstellung ist die Suchmaschinenoptimierung. Kurz SEO – die Search Engine Optimization.

Ziel der Search-Engine-Optimization ist ein möglichst gutes Ranking der eigenen Webseite bei Suchmaschinen. Hierfür werden auf technischer Seite einige Grundlagen und Einstellungen (z.B. Ladezeit der Webseite, Bildoptimierung) beachtet. Auch die Inhalte der Webseite können optimiert werden. Welche Keywords nutzen potentielle Kunden und wonach wird häufig in Suchmaschinen gesucht? Sobald diese Schlüsselworte ausfindig gemacht wurden, können diese gezielt in die Webseite (z.B. in Texte oder URLs) eingebunden werden. Umso besser die Algorithmen der Suchmaschinen dabei verstanden und auf der eigenen Webseite umgesetzt werden, umso besser wird das Ranking in den Suchmaschinen. Die Recherche und Implementierung der meistgesuchten Keywords und die Umsetzung anderer Faktoren, die das Ranking bei Suchmaschinen beeinflussen, nennen sich SEO. Als Experte für Suchmaschinenoptimierung und offizieller Google Partner erklären wir in unserem Artikel, wie richtige SEO funktioniert.

Was bedeuten UX & UI?

UX steht für User Experience und stellt sicher, dass der Nutzer ein gutes Webseitenerlebnis hat und intuitiv von A nach B kommt. Es handelt sich hierbei also um die Navigationsstruktur, den Seitenaufbau und zumeist strukturelle und technische Aspekte. Das Ziel eines guten UX-Designs ist es, für den Besucher eine perfekte Webseiten-Erfahrung zu garantieren. Das beinhaltet beispielsweise auch Fragen wie „Sollen wir am Ende der Seite nochmals eine Aufforderung zum Kaufen platzieren, ein sogenannter Call-to-Action?“. Unsere UX-Experten kümmern sich dabei sowohl um die psychologischen Aspekte wie die Wahrnehmung des Besuchers oder die Präsentation von Angeboten um Webseitenbesucher zum Kauf zu bewegen. Auch die Gesamtnavigation der Seite, beispielsweise wie man von einem Schritt zum nächsten kommt und welche Seiten alle miteinander verlinkt werden sollten, ist Teil der User Experience.

UI bedeutet User Interface und stellt sicher, dass sich der Nutzer auf der Seite wohlfühlt. Es handelt sich hier also um Attraktivität, Farbkonzept und vor allem optische Aspekte. In der Praxis wird unter beiden Begriffen oftmals dasselbe verstanden und die Differenzierung nicht besonders streng betrachtet. Man kann sagen, dass User Experience und User Interface sich um das „Look & Feel“ eines Designs drehen. Darum, wie der Kunde die Webseite wahrnimmt.

Fazit im Dschungel der Abkürzungen in der Webentwicklung

Die Begrifflichkeiten des Webdesigns zu verstehen ist sehr hilfreich, kann allerdings nicht die Zusammenarbeit mit professionellen Webprogrammierern ersetzen. Wenn Sie weiterhin den Wunsch nach einer eigenen Webseite für Ihr Unternehmen oder Ihr Projekt hegen, dann wenden Sie sich direkt an einen der erfahrensten Anbieter für Webentwicklung auf dem Schweizer Markt.