Sicherheitsentwicklung Sicherheitsentwickler entwickeln Methoden und Verfahren für die Sicherheit eines Softwareprogramms oder einer Website. Diese Entwickler arbeiten normalerweise als ethische Hacker und versuchen, Websites zu „knacken“, um Schwachstellen aufzudecken, ohne Schaden anzurichten. Sie entwickeln auch Systeme, die Sicherheitsrisiken erkennen und beseitigen. Tauchen wir nun in den Webentwicklungsprozess ein. Der Website-Entwicklungsprozess Der Prozess der Erstellung einer Website ist nicht so einfach wie 1-2. Jeder Entwicklungspfad ist je nach Art der Website, Programmiersprachen und Ressourcen unterschiedlich. Der folgende Abschnitt dient als kurzer Ãœberblick über den Webentwicklungsprozess und als kurze Einführung in die gängigsten Sprachen und CMS-Optionen.
Erstellen Sie einen Plan. Bevor Sie den Stift aufs Papier oder die Hände auf die Tastatur legen, ist es wichtig, zunächst mit Teams und Mitarbeitern in Ihrem Unternehmen zusammenzuarbeiten, um einen Plan für Ihre Website zu entwickeln. Hier sind einige Fragen, die Sie vor Ihrem ersten Website-Entwurf berücksichtigen sollten: Was ist das Ziel Ihrer Website? Wer ist Ihr Publikum und was soll es auf Ihrer Website tun? Welche Art von Website erstellen Sie? (z. B. grundlegende Informationen, Mitgliedschaft, Online-Shop) Welche Inhalte möchten Sie veröffentlichen und in welchem Umfang? Was ist der Zweck dieser Inhalte?
Wie strukturieren Sie Ihre Website für ein optimales Navigationserlebnis? Wie hoch ist Ihr Budget? Um diese Fragen zu beantworten, müssen Sie mit Ihren Webentwicklungs-, Marketing- und Finanzteams zusammenarbeiten, um Ihre Prioritäten zu bestimmen und fundierte Entscheidungen zu treffen. Einfach ausgedrückt? Es ist viel einfacher, zu Beginn des Prozesses einen Fahrplan zu erstellen, als bei einem Hindernis Ihren Fortschritt umzukehren. Erstellen Sie ein Wireframe. Alle guten Websites beginnen mit einer Blaupause. Entwickler nennen dies ein Wireframe. Es muss kein offizielles Dokument sein; es ist einfach eine Vision für Ihre Site, die sowohl Ihnen als auch Ihren Entwicklern eine Richtung und einen Ausgangspunkt bietet. Sie können es auf ein Whiteboard zeichnen oder ein Tool wie Invision, Slickplan oder Mindnode verwenden. Website-Entwicklung: WireframeWireframes sind rein visuelle Tools, die Ihnen helfen zu verstehen, wo Text und Bilder auf einzelnen Webseiten platziert werden. Sie können leere Kästchen und „Blindtext“ verwenden, um eine Vorstellung davon zu bekommen, wie Ihr Inhalt auf der Front-End-Seite angezeigt wird. Arbeiten Sie mit Ihrem Entwickler zusammen, um Wireframes zu erstellen, damit er eine Vorstellung davon hat, was Sie sich vorstellen.
Erstellen Sie eine Sitemap. Als Nächstes ist es an der Zeit, eine Sitemap zu erstellen (nicht zu verwechseln mit sitemap.XML, einer XML-Datei, die Suchmaschinen hilft, Ihre Site zu crawlen und zu finden). So wie ein Geschäftsplan einem potenziellen Investor Einblick in Ihre Ziele und Leistungen gibt, bietet eine Sitemap einem Entwickler die Informationen, die er braucht, um Ihre Vision zu verwirklichen. Sie können Ihre Sitemap selbst erstellen oder mit Ihren Entwicklern zusammenarbeiten. Hier sind einige Fragen, die Sie sich bei der Planung Ihrer Site stellen sollten: Welche einzelnen Seiten möchten Sie? Welche Inhalte werden auf diesen Seiten sein? Wie können Sie diese Seiten in Kategorien organisieren? Wie ist die Seitenhierarchie auf Ihrer Site? Wie werden die Seiten miteinander verknüpft?
Welche Seiten und Kategorien sind für Ihre Site und das Benutzererlebnis wichtig? Welche Seiten oder Kategorien könnten entfernt oder kombiniert werden? Auch hier ist es eine gute Idee, sich mit anderen Teams in Ihrer Organisation zu beraten. Wenn Sie ein SEO- und/oder Content-Strategie-Team haben, ist dessen Input für die Linkstruktur und Kategorisierung Ihrer Seiten von entscheidender Bedeutung. Schreiben Sie den Code Ihrer Website. Der nächste Schritt im Webentwicklungsprozess ist das Schreiben des Codes. Entwickler verwenden unterschiedliche Programmiersprachen für das Front-End und Back-End von Websites sowie für unterschiedliche Funktionen der Site (wie Design, Interaktivität usw.). Diese verschiedenen Sprachen arbeiten zusammen, um Ihre Site zu erstellen und zu betreiben. Beginnen wir mit den am häufigsten verwendeten Sprachen. HTML
Cascading Style Sheets (CSS) wurden Ende der 1990er entwickelt. Sie fügen Websites Designelemente wie Typografie, Farben und Layouts hinzu, um deren allgemeines „Erscheinungsbild“ zu verbessern. Mit CSS können Entwickler Ihre Website so umgestalten, dass sie der Ästhetik entspricht, die Sie sich für Ihre Website vorgestellt haben, und wie HTML5 ist CSS mit allen Browsern kompatibel. Hier ist ein Codeausschnitt zum Anpassen des Jumbotron-Elements in Bootstrap CSS. .jumbotron { background: #27a967; color: white; text-align: center; } .jumbotron p { color: white; font-size: 26px; } JavaScript JavaScript ist das Tüpfelchen auf dem i unter den Programmiersprachen. JavaScript wurde Mitte der 90er entwickelt und wird verwendet, um Websites Funktionen hinzuzufügen. Entwickler verwenden es, um Animationen hinzuzufügen, Aufgaben auf bestimmten Seiten zu automatisieren und interaktive Funktionen hinzuzufügen, die das Benutzererlebnis verbessern.
JavaScript entwickelt sich rasant weiter. Einst als „Spielzeugsprache“ betrachtet, ist JavaScript heute die am weitesten verbreitete Programmiersprache der Welt. Mithilfe von Node.Js ist es jetzt eine Back-End-Programmiersprache. Es ist die erste Sprache, die von Browsern verstanden wird, und einige haben sogar darüber diskutiert, maschinelles Lernen auch darauf anzuwenden. Unten sehen Sie einen JavaScript-Codeausschnitt zum automatischen Öffnen von Links in einem neuen Fenster in WordPress. Beispiel für einen JavaScript-Codeausschnitt HTML, CSS und JavaScript sind die „großen Drei“ der Webentwicklung. Fast jede Website verwendet sie in irgendeiner Form. Es gibt noch viele andere, wie serverseitige Sprachen wie Java, C++, Python und SQL, aber das Verständnis dieser drei ist grundlegend für Ihr Wissen in der Website-Entwicklung. Erstellen Sie das Back-End Ihrer Website. Das Schreiben von Code mag einer der komplizierteren Teile der Webentwicklung sein, aber es ist bei weitem nicht die einzige Komponente. Sie müssen auch die Strukturen und das Design Ihrer Back-End- und Front-End-Site erstellen.
Beginnen wir mit dem Back-End. Das Back-End verarbeitet die Daten, die die Funktionalität des Front-Ends ermöglichen. Beispielsweise speichert das Back-End von Facebook meine Fotos, damit das Front-End sie dann anderen zeigen kann. Es besteht aus zwei Hauptkomponenten: Datenbanken, die für das Speichern, Organisieren und Verarbeiten von Daten verantwortlich sind, damit sie über Serveranfragen abgerufen werden können. Server, die Hardware und Software, aus der Ihr Computer besteht. Server sind für das Senden, Verarbeiten und Empfangen von Datenanfragen verantwortlich. Sie sind der Vermittler zwischen der Datenbank und dem Client/Browser. Der Browser teilt dem Server im Grunde mit: „Ich brauche diese Informationen“, und der Server weiß, wie er diese Informationen aus der Datenbank erhält und an den Client sendet. Diese Komponenten arbeiten zusammen, um die Grundlage für jede Website zu bilden. Beim Erstellen Ihrer Website legen Backend-Entwickler drei Dinge fest.
Ihr Logikcode, der eine Reihe von Regeln dafür enthält, wie Ihre Website auf bestimmte Anfragen reagiert und wie Objekte Ihrer Website interagieren. Ihr Datenbankmanagement, also wie Ihre Website ihre Daten organisiert, verwaltet und abruft. Ihre Infrastruktur, also wie Ihre Site gehostet wird. Wenn Sie Ihre Site selbst hosten, haben Sie mehr Kontrolle, aber es ist viel teurer und erfordert, dass Sie die Gesundheit und Sicherheit Ihres eigenen Servers aufrechterhalten. Wenn diese Komponenten und Entscheidungen vorhanden sind, ist Ihre Website bereit für die Frontend-Entwicklung. Hinweis: Das Backend ist für die Webentwicklung etwas tangential, da Sie nicht immer ein Backend benötigen, wenn Sie keine Daten speichern. „Daten“ bedeutet in diesem Zusammenhang alle vom Benutzer eingegebenen Informationen, die Sie speichern und beibehalten müssen. Denken Sie an die Anmeldung bei einer Website. Wenn sie kein Backend haben, wie könnten sie sich dann Ihre Anmeldeinformationen merken? Oder wie Ihre Profileinstellungen sind? Um diese Informationen zu erhalten, benötigen Sie ein Backend. Facebook muss beispielsweise wissen, welche Personen sich in Ihrer Freundesliste befinden, an welchen Veranstaltungen Sie teilgenommen haben, welche Beiträge Sie erstellt haben und mehr. Dies sind alles „Daten“, die in einer Datenbank gespeichert sind. Wenn sie kein Backend mit einer Datenbank hätten, wären diese Daten für sie nicht zugänglich. Andererseits bräuchte eine Website, die rein informativ ist und von den Benutzern keine Dateneingabe verlangt, kein Backend.
Wenn Sie also keine Daten haben, benötigen Sie nicht unbedingt Backend-Entwicklung. Das heißt aber nicht, dass Sie die Grundlagen nicht lernen sollten. Man weiß nie, wann man sie brauchen könnte. Erstellen Sie das Frontend Ihrer Website. Wenn Sie sich schon einmal mit Webdesign beschäftigt oder mit einer Website in WordPress, Squarespace oder Google Sites herumgespielt haben, sind Sie mit Frontend-Webentwicklung in Berührung gekommen. Das Frontend ist wichtig – es ist das, was Ihre Besucher, Kunden und Benutzer sehen und wie sie Ihre Website verwenden werden. Frontend- (oder clientseitige) Entwicklung umfasst eine Kombination aus JavaScript, HTML und CSS. Sie steuert auch Komponenten wie Typografie und Schriftarten, Navigation, Positionierung sowie Browserkompatibilität und Reaktionsfähigkeit. Dieser Teil spiegelt mehr von Ihrer ursprünglichen Vision der Website und dem wider, was Sie in Ihren Wireframe aufgenommen haben. Da sich Technologie und Verbraucherpräferenzen ändern, veraltet clientseitige Codierung tendenziell viel schneller als Backend-Entwicklung. Hier kommen Codierungsressourcen (wie die, die wir unten aufgeführt haben) ins Spiel.
(Optional) Arbeiten Sie mit einem CMS. Warum sollte jemand ein CMS dem Programmieren „von Hand“ oder „von Grund auf“ vorziehen? Es stimmt, dass ein CMS weniger flexibel ist und Ihnen daher weniger Kontrolle über Ihr Front-End gibt. Ein CMS ist jedoch einfacher zu verwenden (Sie müssen weniger Code schreiben) und verfügt häufig über Tools zum Hosten der Site, Speichern von Benutzerinformationen, Erstellen eines Blogs, Veröffentlichen von Zielseiten, Erfassen von Leads und sogar Erstellen einer E-Mail-Liste. Dadurch können Sie Ihre Website mit weniger als der Hälfte der Arbeit rentabler machen. Erfahren Sie, warum Tausende von Kunden das CMS von verwenden, um eine optimierte Website zu erstellen, die sich in ihre CRM-Daten und ihren gesamten Marketing-Stack integrieren lässt. CMS-Optionen umfassen häufig Plugins, die das Schreiben eines Back-Ends überflüssig machen. Beispielsweise gibt es WordPress-Plugins für E-Commerce, sodass Sie statt des Erstellens eines komplizierten Back-Ends zum Belasten der Kreditkarten der Kunden einfach ein vorhandenes Plugin verwenden und sich nicht mit Datenbanken und serverseitigem Code befassen müssen. Zu den beliebten Content-Management-Systemen gehören , Joomla, Magento und WordPress – das über einen Marktanteil von über 65 % verfügt. (In diesem Fall sprechen wir von Open-Source-WordPress-Software, nicht vom WordPress-Site-Builder.)
Erwerben Sie einen Domänennamen. Zu diesem Zeitpunkt hat Ihre Website eine IP-Adresse. Sie benötigt außerdem einen Domänennamen, einen einprägsamen Websitenamen, mit dem Ihre Besucher Ihre Site finden können. Vielleicht haben Sie schon von Sites wie GoDaddy und Hover gehört. Diese Dienste helfen Ihnen beim Erwerb eines Domänennamens und bei der Registrierung bei ICANN (Internet Corporation for Assigned Names and Numbers). Die meisten Domänenregistrierungen sind ein Jahr lang gültig, bevor Sie sie verlängern müssen. Website-Builder und Hosting-Dienste wie WordPress und Squarespace ermöglichen Ihnen ebenfalls den Erwerb eines Domänennamens. Starten Sie Ihre Site. Sobald Sie einen Domänennamen eingerichtet und mit Ihrem Host verknüpft haben, sind Sie fast bereit, Ihre Arbeit im Internet zu präsentieren.
Aber nicht so schnell – es gibt noch eine Handvoll Dinge, die Sie vor einem offiziellen Start überprüfen müssen. Dazu gehören die Planung der Zuständigkeiten in Ihrem Team, das gründliche Testen Ihrer Site auf Störungen, die Optimierung für SEO und eine letzte Kontrolle, bevor Sie den Schalter umlegen und Ihre Site live schalten. Ressourcen zur Website-Entwicklung Sie möchten mehr über Entwicklung und Programmierung erfahren? Außer Kontakte und Netzwerke mit anderen Entwicklern zu knüpfen, gibt es viele Ressourcen, die Sie nutzen können, um Ihr Verständnis der Webentwicklung zu vertiefen. Kurse und Klassen zur Webentwicklung Ob Sie sich mit Back-End-, Front-End- oder Full-Stack-Programmierung befassen möchten, hier sind einige von Entwicklern empfohlene Online-Kurse und Klassen. TutorialsPoint Alle Inhalte und Ressourcen auf TutorialsPoint sind kostenlos. Neben Tutorials, E-Books und Videos bietet TutorialsPoint eine Vielzahl von Optionen zum Erlernen des Programmierens. egghead Laut ihrer Website ist „egghead eine Gruppe von praktizierenden Webentwicklungsexperten und Open-Source-Mitwirkenden, die Ihnen prägnante, informationsdichte Videokurse zu den besten Tools der Branche bieten.“
Benutzer können Kurse belegen, Podcasts anhören oder Unterricht zu einer Vielzahl von Webentwicklungsthemen nehmen. Khan Academy Khan Academy ist eine bekannte kostenlose Bildungsressource. Benutzer können alles von Makroökonomie über lineare Algebra bis hin zu US-Geschichte sowie eine Handvoll Computerthemen lernen. freeCodeCamp freeCodeCamp ist eine gemeinnützige Organisation (wie Khan Academy), die Menschen hilft, kostenlos das Programmieren zu lernen. Mit Tausenden von Artikeln, Videos und interaktiven Lektionen sowie weltweiten Lerngruppen hilft freeCodeCamp Tausenden von Entwicklern und Ingenieuren, etwas über Programmierung und Jobs in der Landentwicklung zu lernen. Team Treehouse Team Treehouse ist ein abonnementbasiertes Online-Lernprogramm. Benutzer zahlen eine monatliche Gebühr und erhalten Zugriff auf Hunderte von Kursen zu über 20 verschiedenen Themen. Von JavaScript über Python bis PHP – Treehouse kann Ihnen alles beibringen, was Sie über Webentwicklung wissen müssen.
Webentwicklungs-Communitys Webentwickler sind Meister des Internets, daher ist es logisch, dass sie sich in internetbasierten Communities aufhalten und vernetzen. Laut Code Condo treten Entwickler diesen Communities bei, um: Aktuelle Informationen und Problemlösungen zu erhalten Aufschlussreiche Antworten und neue Perspektiven zu erhalten Tipps und Tricks für Programmierer aller Erfahrungsstufen Links zu Ressourcen, Vorträgen und Forschungsarbeiten Neue Freunde, Code-Kumpel und potenzielle Partner kennenzulernen Hier sind einige von unseren Entwicklern empfohlene Online-Communitys.
Stack Overflow Stack Overflow wurde vor fast 15 Jahren eingeführt und ist seitdem eine der beliebtesten Programmier-Communitys weltweit geworden. Laut Mitbegründer Jeff Atwood ist „[Stack Overflow] von Programmierern für Programmierer, mit dem ultimativen Ziel, die Summe guten Programmierwissens auf der Welt kollektiv zu erhöhen.“ Stack Overflow ist eine großartige Anlaufstelle für Fragen, da andere Entwickler dieselben Fragen meistens bereits gestellt und beantwortet haben. Ãœber die Foren in Stack Overflow bleiben Sie mit anderen Entwicklern in Verbindung und werden gleichzeitig auf dem Laufenden gehalten. Mozilla Development Network Das Mozilla Development Network (MDN) gilt als gründlicher und genauer als andere Online-Ressourcen. Es ist nicht so sehr eine Community, sondern eher eine umfassende Ressource und Bibliothek von Dokumenten für Programmiersprachen. MDN ist nützlich, wenn Sie lernen möchten, wie bestimmte Funktionen funktionieren, und wenn Sie über Neuigkeiten zu Programmierung und Entwicklung auf dem Laufenden bleiben möchten.
Reddit Reddit ist eine forumbasierte Community, in der sich Entwickler aller Erfahrungsstufen treffen, um Fragen zu stellen und zu beantworten. Sie ist unglaublich interaktiv und umfasst Menschen aus der ganzen Welt. Sie können auch „Subreddits“ zu bestimmten Themen wie Webdesign, JavaScript oder freiberufliche Tätigkeit beitreten. Tauchen Sie ein in die Webentwicklung Das Internet ist gekommen, um zu bleiben, und es entwickelt sich ständig weiter, um die Bedürfnisse der Benutzer zu erfüllen. Webentwickler stehen an vorderster Front dieser Innovationen und Verbesserungen – von diesem Blog über Ihr bevorzugtes soziales Netzwerk bis hin zu den Apps, die Sie auf Ihrem Telefon verwenden, Webentwicklung ist überall. Daher lohnt es sich, sich die Zeit zu nehmen, um sich mit Kodierung und Programmierung vertraut zu machen, damit Sie Ihre Unternehmenswebsite so gut wie möglich gestalten können – für Sie und Ihre Kunden. Anmerkung des Herausgebers: Dieser Beitrag wurde ursprünglich im November 2018 veröffentlicht und der Vollständigkeit halber aktualisiert. Interessante Tatsache: Es gibt heute fast 2 Milliarden Websites auf der Welt.
Bei so vielen Websites kann es schwierig – scheinbar unmöglich – sein, aus der Masse hervorzustechen. Es ist schon schwer genug, Verkehr auf Ihre Seite zu lenken, aber diese Leute dazu zu bringen, zu bleiben und tatsächlich etwas zu tun, ist noch schwieriger. Was macht eine gute Website aus? Hintergrund gestaltet von Freepik. Was macht überhaupt eine gute Website aus? Kurz gesagt, eine gute Website sollte sich sowohl in Form als auch Funktion auszeichnen. Sie sollte einen klaren Zweck haben. Sie sollte optisch ansprechend und einfach zu navigieren sein. Sie sollte für eine breite Palette von Besuchern gut funktionieren und technisch stabil und sicher sein. Gute Websites sind ansprechend, funktional und nützlich. Ihre Website ist manchmal das Einzige, was Ihre Kunden sehen. Sie möchten, dass dieses Ding so umwerfend toll ist, dass es Backlinks, Fallstudien wie diese, Medienaufmerksamkeit und haufenweise Kunden anzieht. Und Sie haben Glück. Denn in diesem Post werde ich Ihnen alles beibringen, was wir darüber wissen, was eine großartige Website ausmacht.
Und Sie müssen nicht einmal Designer sein. Hurra! Der Index für tolles Webdesign (Klicken zum Navigieren) Abschnitt 1: Visuelles Website-Design (auch bekannt als „Schönheit“) Abschnitt 2: Technisches Website-Design (auch bekannt als „Geek-Zeug“) Abschnitt 3: Website-Tools (auch bekannt als „Nützliches Zeug, um Ihre Website besser zu machen“) -dark-chat-banner-2 Genug geredet, stürzen wir uns ins Webdesign 10 Was macht eine gute Website aus?
Webdesign erstellen lassenOkay, das ist ein ziemlich umfangreiches Thema. Es gibt Tausende von Büchern und Kursen zum Thema Webdesign. Bevor ich anfange, Lektionen zu erteilen, möchte ich sicherstellen, dass Sie etwas daraus lernen und heute umsetzen können. Hier sind also die vier Grundprinzipien einer guten Website, die Sie vor der Neugestaltung/dem Start im Hinterkopf behalten sollten: Zweck. Gutes Design beginnt mit einem Zweck im Hinterkopf. Fragen Sie sich: „Was möchte ich mit dieser Seite erreichen?“ Wenn eine Seite keinen klaren Zweck hat, sollten Sie sie entfernen. Ästhetisch ansprechend. Ich werde im ersten Abschnitt zum visuellen Design näher darauf eingehen, aber Ihre Site muss gut aussehen. Wenn Ihre Site aussieht, als wäre sie in den 90er Jahren erstellt worden, ist es Zeit für ein Update. Relevanter und origineller Inhalt. Ihre Site sollte Inhalte zeigen, die für Ihren Zielmarkt relevant und originell sind. Plagiate sind illegal und werden von Google bestraft. Außerdem ist es besser, eine erstklassige Version Ihrer selbst zu sein als eine zweitklassige Version von jemand anderem. Klare Site-Navigation. Ich werde dies im zweiten Abschnitt zu den technischen Aspekten näher erläutern, aber Sie sollten wissen, dass die Navigation wichtig ist. Jede Seite Ihrer Website sollte innerhalb von drei Klicks von jeder anderen Seite Ihrer Website aus erreichbar sein. Ihre Navigation sollte intuitiv und einfach sein. Dies hilft sowohl Google bei der Suchmaschinenoptimierung als auch Ihren Besuchern bei der Navigation. Gutes Design beginnt mit einem bestimmten Zweck.KLICKEN ZUM TWEETEN Nachdem Sie nun die wichtigsten Prinzipien kennen, gehen wir etwas tiefer in die Materie.
Visuelles Website-Design (auch bekannt als „Hübschheit“) Stellen Sie sich einmal folgendes Szenario vor. Sie suchen ein Geschenk für den Geburtstag Ihrer Schwester. Sie sehen einen Tweet von jemandem, dem Sie folgen und der den neuen Bekleidungsladen seines Freundes teilt. Sie klicken. Dann sehen Sie das hier. ugly-website-design-1024x533-2Haha, nee. Sie sind weg. Ist das ein extremes Beispiel? Ja. Ist Website-Design immer noch so wichtig? Jupp.
Soll ich Ihnen sagen, was Sie tun sollten, damit Ihre Site großartig aussieht? Darauf können Sie wetten. Wie Sie sehen, beeinflusst das Visuelle alles, von der Konversionsrate über die Verweildauer auf der Seite, Vertrauenswürdigkeit bis hin zu organischen Backlinks (die Ihnen dabei helfen, Ihre Site bei Google zu ranken). Die Gleichung sieht also so aus: Tolles Site-Design = Mehr Vertrauen = Bessere Konversionen Tolles Site-Design = Mehr Vertrauen = Mehr Konversionen.ZUM TWEETEN KLICKEN Wie sorgen Sie dafür, dass Ihre Site großartig aussieht? Beginnen Sie mit Ihrer Marke. Branding durch Site-Design Ihre Marke ist Ihr Image. Alles, von den Farben, die Sie verwenden, bis zu den Schriftarten, die Sie auswählen, beeinflusst die Wahrnehmung, die die Leute von Ihnen haben. In ihrem Leitfaden zum Branding sagt Sonia Gregory, dass „Sie als kleines Unternehmen möglicherweise mit großen Marken mit treuen Kunden konkurrieren. Deshalb müssen Sie Wege finden, sich abzuheben – mit einem eigenen soliden Markenaufbauprozess.“
Was sollen die Leute denken, wenn sie Ihre Site sehen? Ausgefallen, modern, satirisch, professionell, etwas anderes? Diese Dinge können Sie durch Ihr Design vermitteln. Sehen Sie sich einfach die Psychologie der Farbe an – unterschiedliche Farben vermitteln unterschiedliche Emotionen. Eine Studie mit dem Titel „Der Einfluss von Farben auf das Marketing“ hat tatsächlich ergeben, dass bis zu 90 % der spontanen Urteile über Produkte – je nach Produkt – allein auf der Farbe beruhen können. Neben der Farbe müssen Sie auch die Schriftart auswählen. Und ja, auch hinter der Schriftartauswahl steckt eine Psychologie. Ted Hunt von Crazy Egg hat diese coole Infografik dazu erstellt: Die Psychologie hinter der Schriftartauswahl Unabhängig davon, welche Schriftart Sie für Ihr Logo und Ihre Markenbildung auswählen, sollten Sie bei der Hauptschriftart immer die Lesbarkeit der emotionalen Ausstrahlung vorziehen. Normalerweise bedeutet das serifenlose Schriftarten, da diese sich im Web am besten lesen. Ein letzter Tipp zur Schriftartauswahl: Verwenden Sie in Ihrem Design nicht mehr als zwei Schriftarten. Wählen Sie zwei aus, die sich gegenseitig ergänzen, und bleiben Sie für Ihre gesamte Marke bei diesen.
Wichtigste Erkenntnis: Wählen Sie nicht mehr als drei Farben und zwei Schriftarten, um Ihre Marke zu repräsentieren. Notieren Sie die Schriftarten und Farbcodes und verwenden Sie sie einheitlich auf Ihrer gesamten Website und in Ihren Marketingbemühungen. Bilder finden, gestalten und verwenden Bilder sind ein wichtiger Teil des Website-Designs. Und doch machen es so viele Leute falsch. Tolle Bilder bieten dem Besucher einen Mehrwert. Sie helfen dabei, einen wichtigen Punkt zu erklären und den Augen eine Pause zu gönnen. Sie helfen sogar dabei, Ihre Produkte und Dienstleistungen zu verkaufen. Wenn Sie beispielsweise eine E-Commerce-Site betreiben, möchten Sie, dass Ihre Produktfotos qualitativ hochwertig sind und viele verschiedene Winkel zeigen.
Welche dieser Blumen würden Sie lieber kaufen? Website-Bilder (Quelle) Wenn Sie das Bild rechts auch nur sehen würden, würden Sie die Seite wahrscheinlich verlassen und nie wiederkommen. Das mittlere Bild ist besser, aber immer noch nicht großartig. Das linke Bild lässt Sie der Website vertrauen. Seien Sie jedoch vorsichtig, denn schlechte Bilder verringern tatsächlich die Leserschaft. Denken Sie an Designprinzip Nr. 1: Tolles Design verfolgt einen Zweck. Jedes Bild, das keinen Zweck verfolgt, ist ein schlechtes Bild. Punkt. Wenn Sie noch mehr Anreiz brauchen: Die Seitenladegeschwindigkeit (die ich in Abschnitt zwei bespreche) ist für SEO und Benutzerfreundlichkeit äußerst wichtig. Zu viele große Bilder verlangsamen Ihre Site.
Wie finden, gestalten und verwenden Sie also Bilder auf Ihrer Website? In diesem Beitrag haben wir über einige Tools zum Erstellen großartiger Bilder geschrieben. Sehen Sie sich das an. Als Inspiration finden Sie hier einige Beispiele für gute Bilder, die Sie verwenden können: Diagramme und Grafiken von Datenpunkten Screenshots Hochwertige Stockfotos (wählen Sie mit Bedacht aus) Benutzerdefinierte Designs und Vektorgrafiken Professionelle (oder zumindest gut gemachte) Fotografie Wichtigste Erkenntnis: Verwenden Sie Bilder, aber mit einem bestimmten Zweck. 3 Beispiele für schöne Websites. Es ist einfacher zu erkennen, was eine gute Website ausmacht, wenn Sie Beispiele aus dem echten Leben sehen.
Hier sind ein paar, die ich liebe: KlientBoost hat sich voll und ganz dem fantastischen Website-Design verschrieben. Ihre Site strotzt vor wunderschöner Optik. Klientboost Website Design CoSchedule ist auch eine Site, zu der ich aufschaue. Ihre gesamte Site basiert auf toller Formatierung und konsistentem Branding. CoSchedule-Designbeispiel Expedia: Visit Britain erhielt einen Entwicklerpreis für sein Design. expedia-great-britain Sie können auch weitere Beispiele sehen, die tatsächlich Preise für tolles Design bei den Awwwards und Webby Awards gewonnen haben. (Hinweis: Ich gebe im nächsten Abschnitt über Responsive Design auch eine Liste von Website-Vorlagen mit toller Optik, falls Sie wie ich nicht programmieren können.) Genug von Optik. Lassen Sie uns ein bisschen technikbegeisterter werden.
Technisches Website-Design (auch bekannt als „Geeky Stuff“) Technisches Webdesign umfasst Dinge wie: Responsive Design und Mobilfreundlichkeit Schnelle Ladegeschwindigkeiten Suchmaschinenoptimierung (SEO) SSL-Verschlüsselung Site-Architektur und Navigation Wenn Sie bei einem dieser Dinge „Was?“ sagen, machen Sie sich keine Sorgen. Ich erkläre sie alle in Laiensprache. Responsive Design und Mobilfreundlichkeit
Laut dem Beitrag „Responsive Webdesign: Was es ist und wie man es verwendet“ des Smashing Magazine: „Responsive Webdesign ist der Ansatz, der vorschlägt, dass Design und Entwicklung auf das Verhalten und die Umgebung des Benutzers je nach Bildschirmgröße, Plattform und Ausrichtung reagieren sollten.“ Responsive Webdesign Mit anderen Worten: Eine responsive Site ist eine Site, die auf allen Bildschirmen und Geräten gut funktioniert. Sie ist mobilfreundlich und auf das Gerät zugeschnitten, auf dem Sie sie anzeigen. Wenn Sie denken, das klingt kompliziert … das ist es auch. Aber es ist wichtig. Tatsächlich machen Smartphones mittlerweile über 51 % des gesamten Online-Verkehrs aus und Tablets kamen auf knapp über 12 %. Und diese Zahl wächst. Außerdem legt Google großen Wert auf Mobilfreundlichkeit. Tatsächlich legt das Unternehmen jetzt Wert darauf, mobilfreundliche Websites zu ranken (ein Update namens „Mobilegeddon“).
Und schließlich sorgt die Mobilfreundlichkeit für ein besseres Benutzererlebnis. Und letztendlich geht es um den Benutzer. Er ist derjenige, der sein Portemonnaie öffnet, um Ihr Geschäft über Wasser zu halten. Was also kann ein Nicht-Designer tun? Prüfen Sie zunächst mit dem Test für Mobilfreundlichkeit, ob Ihre Website von Google als mobilfreundlich eingestuft wird. Es ist auch eine gute Idee, dies selbst zu überprüfen, indem Sie Ihre Website auf Ihrem Telefon aufrufen. Wenn sie nicht gut abschneidet oder nicht gut aussieht, müssen Sie noch etwas tun. Test für Mobilfreundlichkeit Juhu, wir sind mobilfreundlich! Abgesehen davon, einen Designer zu beauftragen, ändern Sie am besten die Vorlage Ihrer Website. Dies ist der einfachste und kostengünstigste Weg, Ihre Website mobilfreundlich und reaktionsfähig zu machen.
Hier sind einige mobilfreundliche Vorlagen für beliebte Site Builder: Mobilfreundliche WordPress-Vorlagen Mobilfreundliche Shopify-Vorlagen Mobilfreundliche BigCommerce-Vorlagen Mobilfreundliche Magento-Vorlagen Template Monster für mehrere Plattformen Schnelle Ladegeschwindigkeit von Websites Laut Umfragen von Akamai und Gomez.com erwartet fast die Hälfte der Internetnutzer, dass eine Site in 2 Sekunden oder weniger geladen wird, und sie neigen dazu, eine Site zu verlassen, die nicht innerhalb von 3 Sekunden geladen ist! Das lässt Ihnen nicht viel Spielraum. Aber wenn Sie immer noch nicht überzeugt sind, hier ist Folgendes: Rund 79 % der Online-Käufer, die Probleme mit der Leistung einer Website haben, sagen, dass sie nicht erneut auf die Site zurückkehren werden, um erneut etwas einzukaufen, und rund 44 % von ihnen würden einem Freund davon erzählen, wenn sie beim Online-Einkauf keine gute Erfahrung gemacht haben. Mit anderen Worten: Wenn Ihre Site schlecht läuft, haben Sie verloren. Und zwar richtig. Wie stellen Sie also eine schnelle Ladegeschwindigkeit sicher? Versuchen Sie Folgendes: Ähnlich wie beim Test auf Mobilfreundlichkeit bietet Google auch einen Seitengeschwindigkeitstest an. Manche meinen jedoch, dass es nicht sehr genau ist, daher kann es nicht schaden, auch Pingdom und GT Metrix auszuprobieren.
Alle drei geben Ihnen eine Vorstellung davon, was Ihre Ladegeschwindigkeit beeinträchtigt, und unterbreiten Verbesserungsvorschläge. Seitengeschwindigkeitstest Wie Sie sehen, gibt es viele Möglichkeiten, die Ladegeschwindigkeit Ihrer Site zu verbessern, z. B. durch Browser-Caching oder indem Sie dafür sorgen, dass der Above-the-Fold-Inhalt (der Inhalt, den Sie sehen, ohne auf der Seite nach unten zu scrollen) zuerst geladen wird. Eine der einfachsten Möglichkeiten ist jedoch die Optimierung und Komprimierung Ihrer Bilder. Wie ich bereits im Abschnitt zur visuellen Darstellung sagte, beanspruchen Bilder viel Bandbreite. Deshalb ist es wichtig, nur Bilder zu verwenden, die sehr wertvoll sind. Sie können Ihre Bilder mit einem Tool wie Gimp kostenlos komprimieren. (Hier ist ein Tutorial dazu.) Bilddateigrößen vor und nach Gimp Suchmaschinenoptimierung (SEO) SEO bedeutet, Ihre Site so zu optimieren, dass sie in Suchmaschinen wie Google angezeigt wird. Das ist das A und O einer guten Website.
Wenn Sie es richtig machen, können Sie ohne zusätzlichen Aufwand jeden Monat Tausende von Besuchern auf Ihre Website bringen. Wenn Sie es schlecht machen, wird Sie niemand auf Google finden. Laut Jon Rognerud besteht SEO aus vier Schritten. Hier sind einige von Jons praktischen Erkenntnissen: Wissen Sie, wen Sie ansprechen möchten, und führen Sie eine Keyword-Recherche durch. Optimieren Sie Ihre Seiten mit On-Page-SEO, das auf diese Keywords abzielt. Erstellen Sie eine starke Sitemap, damit Google und Bing Ihre Website indizieren können. Dies ist sehr vereinfacht und es gibt viele andere SEO-Faktoren, aber diese drei Taktiken bringen Sie auf den besten Weg, in den Suchergebnissen aufzutauchen. Dieser nächste Ratschlag zum Webdesign hilft sowohl bei der SEO als auch beim Aufbau des Vertrauens bei Ihren Besuchern. Sichern Sie Ihre Website mit SSL-Verschlüsselung
Sie haben wahrscheinlich schon das kleine grüne Schloss in Ihrer Adressleiste neben einer Website gesehen. SSL-Verschlüsselung Dies wird als SSL-Verschlüsselung bezeichnet. Google verbessert die SEO verschlüsselter Websites ein wenig.
.jpg)
0 Comments