Codieren eines Webdesigns für Geschwindigkeit und Qualität

Das Schöne am Beruf eines Webdesigners ist die Erstellung eines detaillierten, kreativen und originellen Webdesigns in Photoshop, ohne dass man (größtenteils) darüber nachdenken muss wie es kodiert wird.

Während der Entwurfsphase es kommt nur auf das Aussehen anund die Codierung kann entweder später übernommen oder an einen Entwickler ausgelagert werden.

In jedem Fall ist es für einen Designer eine gute Möglichkeit, sich im Designprozess nicht eingeschränkt zu fühlen, wenn er nicht über die Benutzerfreundlichkeit oder Funktionalität der Entwicklung nachdenkt.

Das ist eine großartige Denkweise und kann zu den besten Designs führen. Sobald es jedoch codiert werden muss, befinden wir uns als Designer in einer schwierigen Situation.

In diesem Artikel finden Sie ein paar einfache Tipps, die Designern beim Lernen helfen können Basic Effiziente XHTML/CSS-Konvertierung für eine schnell ladende Website, die genau der ursprünglichen PSD entspricht.

Entweder müssen wir die Designs selbst zerschneiden und codieren oder einen Teil unseres Gewinns an ein PSD-zu-XHTML/CSS-Unternehmen oder einen Entwickler abgeben, der PSD an XHTML/CSS auslagert. Da es sich in erster Linie um Designer handelt, ist die zweite Option für den Kunden in der Regel die beste Wahl, da sie die besten Ergebnisse liefert.

Manchmal jedoch, wie bei kleineren Projekten oder auf andere Weise, Wir müssen selbst eine Website programmieren. Was auch immer der Grund sein mag, es sollte kein Rückfall sein oder etwas, das zu viel Zeit in Anspruch nimmt.

Selbermachen vs. Outsourcing

Dieser Artikel richtet sich eher an Webdesigner, obwohl hoffentlich auch diejenigen, die Entwickler sind, etwas daraus mitnehmen können. Zurück zu den Designern: Es ist jedoch üblich, dass viele Webdesigner keine Lust haben, Websites zu programmieren. Wir entwerfen gerne. Es gibt ein paar Ausnahmen, aber zum größten Teil ist es die Einstellung dazu.

Viele Designer haben es entdeckt die Vorteile des Outsourcings: Beauftragen Sie ein externes Unternehmen damit, Ihr Design zu zerlegen und zu codieren, erhalten Sie es innerhalb weniger Tage zurück und sparen Sie sich die Zeit und Mühe, die Sie mit der Erstellung selbst hätten.

Wenn man keine Erfahrung mit der effizienten Codierung einer Website hat, lohnt es sich möglicherweise nicht, zu viel Zeit damit zu verbringen, wofür man für ein Projekt bezahlt wird.

Wenn beispielsweise ein unerfahrener Programmierer mehrere Stunden damit verbringt, herauszufinden, wie er ein Design, das er gerade erstellt hat, codieren kann, kann die aufgewendete Zeit leicht mehr wert sein als die Kosten, die es kostet, den Auftrag einfach auszulagern.

Außerdem kann es für den Kunden kostengünstig und für Sie selbst zeitsparend sein, dem Kunden die Outsourcing-Arbeit anstelle Ihrer eigenen Arbeit in Rechnung zu stellen. (Oh, und Sie helfen der Entwickler-Community, indem Sie ihnen auch ein paar Geschäfte machen!)

Es kommt jedoch in der Karriere eines jeden Designers eine Zeit, in der es einfach nicht praktikabel ist, einen Job auszulagern. Ein paar Beispiele wären:

  • Sie sind finanziell einfach nicht in einer guten Verfassung.
    Besonders für Freiberufler kommen und gehen finanziell starke Monate. Wenn Ihr Guthaben etwas niedrig ist, ist es möglicherweise nicht die beste Option, etwa 150 US-Dollar für Outsourcing auszugeben, wenn Sie für die Arbeit selbst ein bisschen mehr bezahlt bekommen könnten. Während der Kunde die Zahlung an den Outsourcer als Teil der Projektzahlung ausgleichen würde, bedeutet dies lediglich, dass Ihre Finanzen für den Entwicklungsteil der Website ausgeglichen sind. Wenn Sie es selbst machen, ist das viel mehr Arbeit, aber Sie haben auch viel mehr Geld in der Tasche.
  • Es ist ein kleines Projekt.
    Liegt das Projekt unter 1000 US-Dollar? Lohnt es sich nicht, wenn mehr als 1/10 des Projektbudgets direkt an Sie geht? Wenn die Auslagerung des Codierungsanteils einen zu großen Teil des Projekts ausmacht, ist es wahrscheinlich praktischer, ihn einfach selbst erledigen zu lassen. Außerdem sind kleinere Projekte wahrscheinlich einfacher, sodass sie nicht unbedingt viel Zeit in Anspruch nehmen müssen.
  • Wenn ein besonderer Kundenservice oder eine individuelle Anpassung erforderlich ist.
    Manche Projekte erfordern einfach etwas mehr Kundenbetreuung durch Sie als Designer. Je nach Kunde und Projekt kann es am besten sein, den Slicing- und Codierungsteil in überschaubarere Teile zu unterteilen, wobei einige Teile je nach Meinung des Kunden im Laufe des Prozesses variieren können. In jeder Situation, in der Sie als Designer den Code nach dem Codieren der ersten Website ständig an die Bedürfnisse des Kunden anpassen müssen, ist es wahrscheinlich am besten, die gesamte Sache selbst zu erledigen.
Lesen:  Wie man Schreibstatistiken in WordPress einrichtet und warum

Es liegt also an Ihnen, basierend auf jedem Projekt, jedem Kunden und den jeweiligen Umständen zu entscheiden, ob Sie den Codierungsteil auslagern möchten oder nicht.

Als Vorteil des Outsourcings Erfahrene Programmierer können eine identische codierte Version zu Ihrem PSD-Design erstellenunter Beibehaltung der Ladegeschwindigkeit und Benutzerfreundlichkeit.

Wenn Sie sich in der Situation befinden, dass Sie eine Website selbst segmentieren und programmieren müssen/wollen, finden Sie hier einige allgemeine Tipps, um 1) Zeit zu sparen, damit Sie nicht für 2 US-Dollar pro Stunde arbeiten müssen, und 2) bessere Ergebnisse zu erzielen Ihren Kunden, wie es ein erfahrener Entwickler tun würde, und sparen gleichzeitig die Outsourcing-Kosten.

1. Effektiv schneiden

Photoshop und Fireworks verfügen über ein integriertes Slicing-Tool, mit dem ein Designer eine Website direkt in HTML programmieren kann. Allerdings erstellen selbst moderne Versionen dieser Software ein tabellenbasiertes Markup. Für den modernen Webdesigner ist das natürlich nicht sehr nützlich.

Aus diesem Grund ist die Entwicklung und Website-Codierung eine separate Praxis, die eigenes Talent und Erfahrung erfordert. Alle Webdesigns erfordern etwas manuelles Codieren und einen Denkprozess dahinter. Keine Software kann alles für Sie erledigen.

Trotzdem, Das Slice-Tool in Photoshop und Fireworks kann gut für den Entwicklungsteil des Webdesigns eingesetzt werden. Es geht darum zu wissen, wie man das Slice-Tool effektiv nutzt.

Anstatt sich hier mit einem ganzen Slicing- und Coding-Tutorial zu befassen, kann ein tolles Tutorial auf nettuts+ vielen weiterhelfen: „Schneiden und würfeln Sie diese PSD.“ Es geht um die grundlegenden Denkprozesse sowie die technische Anleitung zum modernen und korrekten Slicing eines Webdesigns – unter Verwendung des traditionellen Slice-Tools.

Die Reihenfolge ist chronologisch, mit verschiedenen Screencasts für jede Phase des Entwicklungsprozesses sowie nützlichen Links zu ähnlichen und zusätzlichen Screencasts.

Der erste Schritt besteht darin, sich diese Tutorials anzusehen und die wichtigsten Punkte daraus zu lernen: Sie wissen, welche Bilder geschnitten werden müssen, wie Sie diese Bilder für ein ausgewogenes Verhältnis von Qualität und Geschwindigkeit optimieren und welche Elemente Ihrer PSD reines XHTML und CSS sein sollten .

Allein das Beobachten des Prozesses und der Erklärung eines erfahreneren Entwicklers kann einem Designer mit wenig Slicing- und Codierungserfahrung dabei helfen, einen effizienteren Prozess zu erkennen.

2. Vereinfachen Sie CSS

Manchmal ist der erste Weg, herauszufinden, wie man mit CSS einen bestimmten Effekt erzielt, nicht der beste Weg, dies zu erreichen. Wenn Sie feststellen, dass Sie zu viele benutzerdefinierte Klassen erstellen oder anderweitig komplizierte Taktiken anwenden, um einen Effekt zu erzielen, denken Sie über eine alternative Möglichkeit nach, dies effizienter zu gestalten.

Lesen:  So eröffnen Sie in 13 Schritten einen E-Commerce-Shop

Meistens ist dies mit Erfahrung verbunden. Je mehr Sie eine Website programmieren und neue Techniken entdecken, desto einfacher wird die effektive Nutzung von CSS.

Für Anfänger, wie man CSS vereinfacht, lesen Sie den Artikel von Woork zum Thema „Top-Down-Ansatz zur Vereinfachung Ihres CSS-Codes“.

Der Artikel gibt Tipps zum Gleichgewicht zwischen der Verwendung von CSS zum Erstellen des grundlegenden Wireframes und des spezifischen Stils, zur effektiven Wiederverwendung voreingestellter HTML-Elemente und zu den Zeitpunkten, zu denen es angebracht ist, eigene Klassen oder IDs zu erstellen.

3. Verwenden Sie CSS-Kurzschrift und minimieren Sie HTML-Markup

Je kleiner eine Datei ist, desto schneller lässt sie sich laden, und so einfach ist das. Die Verwendung von CSS-Kurzschrift und die Minimierung der Länge des XHTML-Markups durch die Wiederverwendung von Elementen ist eine hervorragende Möglichkeit, dies zu erreichen.

Das Codieren einer gesamten Website muss ein Gleichgewicht zwischen Markup und der Gestaltung dieses Markups mit CSS sein. Für die Struktur sollte Markup und für die Gestaltung CSS verwendet werden. Eine gute Möglichkeit, dieses Gleichgewicht zu finden, besteht also darin, dies im Hinterkopf zu behalten.

Abgesehen davon erfordert die Praxis lediglich ein Verständnis der technischen Details der CSS-Kurzschrift sowie das Sammeln von Erfahrung.

Schauen Sie sich einige der folgenden Tutorials an, um die CSS-Kurzschrift zu beherrschen:

Auch das Entfernen unnötiger Leerzeichen kann die Ladegeschwindigkeit von Markup- und CSS-Dateien verbessern. Genau wie bei einer minimierten JavaScript-Datei (z. B. jquery.min.js) sorgen kleinere Dateien für eine effizientere Ladezeit, sodass der Prozessor sie schneller lesen kann.

Wie bei CSS und Markup ist es jedoch nicht praktikabel, alle Leerzeichen zu Bearbeitungs- und Verwaltungszwecken zu entfernen.

Machen Sie sich stattdessen daran, nur dann einzurücken und Zeilenumbrüche zu verwenden, wenn es nötig ist. Entfernen Sie außerdem alle Kommentare im Markup und Stylesheet, die für die Wartung der Website nicht erforderlich sind.

4. Smush.it

Verwenden Sie ein Werkzeug wie Smush.it von Yahoo um Bilder noch weiter zu zerkleinern. Ein solches Tool verwendet einen Komprimierungsalgorithmus, der die Dateigröße erheblich reduziert, ohne die Bildqualität zu beeinträchtigen. Eine durchschnittliche Reduzierung aller Bilder um etwa 40 % kann einen großen Unterschied in der Ladezeit einer Website bewirken.

Laden Sie einfach alle Bilder für die Website, nachdem sie ursprünglich in Photoshop optimiert wurden, in die Smush.it-Anwendung. Sie erhalten eine neue Liste mit Bildern zum Herunterladen, in der erklärt wird, wie viel Speicherplatz gespart wurde und wie.

5. Achten Sie auf CSS und Markup-Reihenfolge

Wenn Sie die Strukturelemente vor den Inhaltselementen oder den Blockzitate-Stil vor dem Absatzstil haben, wird das Laden eines Stylesheets nicht schneller. Jedoch, Ein Stylesheet wird in der Reihenfolge geladen, in der es im Stylesheet angezeigt wirdsodass man damit einer Website den Eindruck vermitteln kann, dass sie schneller lädt.

Wenn beispielsweise in einem Stylesheet zunächst alle Inhalte, Bilder und Textstile definiert würden, würden diese Elemente geladen, bevor Hintergründe, Strukturelemente oder Designbilder geladen würden.

Aus diesem Grund sieht es so aus, als würde das Webdesign etwas langsamer geladen, als wenn wir zuerst den Hintergrund und die Struktur sehen würden.

Mit der Struktur und den Hauptbildern an erster Stelle hat der Betrachter etwas, auf das er sich in den Sekunden konzentrieren kann, in denen der Inhalt noch geladen wird.

Lesen:  2 einfache Tricks, um die Geschwindigkeit eines alten iPhone zu erhöhen

6. Wissen Sie, wann Sie clientseitiges oder serverseitiges Scripting verwenden sollten

Bei einfachen Projekten werden sich Webdesigner wahrscheinlich nicht allzu sehr mit dem Programmieren befassen. Für ein einfaches Kontaktformular oder für spezielle Navigationseffekte kann jedoch etwas Scripting erforderlich sein.

Was auch immer der Zweck ist, es können zwei Arten von Skriptsprachen verwendet werden: clientseitig (wobei die Skriptsprache im Browser des Benutzers ausgeführt wird) oder serverseitig (die Skriptsprache wird auf dem Server ausgeführt).

JavaScript und alle darunter liegenden Bibliotheken sind die gebräuchlichste clientseitige Skriptsprache. Da es lokal im Browser des Benutzers ausgeführt wird, muss es für die Verarbeitung nicht bis zum Server laufen, was die Verarbeitung beschleunigt. Serverseitiges Scripting ist etwas langsamer, läuft aber in kleinen Dosen und bei richtiger Verwendung einwandfrei.

Verwenden Sie serverseitiges Scripting für alles, was eine Datenbank erfordert oder für den Zweck der Website notwendig ist. Da ein Benutzer JavaScript, aber keine serverseitige Sprache deaktivieren kann, kann serverseitiges Scripting sicher für alle Website-Anforderungen verwendet werden.

Beispielsweise lässt sich ein Kontaktformular am besten mit einer serverseitigen Sprache verwenden, obwohl es leicht ist und möglicherweise keine Datenbank erfordert, da es dennoch für jemanden mit deaktiviertem JavaScript zugänglich ist.

Insgesamt sollten die meisten Websites, die zusätzliche Skripte erfordern, über ein ausgewogenes Verhältnis von beidem verfügen. Einige kleinere Websites benötigen möglicherweise nur das eine oder das andere, es ist jedoch wichtig, nicht nur eines zu verwenden. Wissen Sie, wann und warum Sie sie verwenden sollten.

7. Zu guter Letzt: Validieren

Das ist für die meisten von uns offensichtlich, aber wie bei jedem Artikel wie diesem muss gesagt werden: Validieren Sie während des gesamten Codierungsprozesses und wenn alles gesagt und getan ist, CSS- und XHTML-Code.

Wir alle kennen die Vorteile der Validierung, da sie dafür sorgen kann, dass verschiedene Browser ähnlich dargestellt werden, das Laden von Webseiten beschleunigt wird und es sich um eine allgemeine Fehlerprüfung für semantischen Code handelt.

Ein zusätzlicher Vorteil dieses Prozesses besteht jedoch darin, dass Sie neue Techniken für den Umgang mit CSS-Code und Markup erkunden können.

Wenn Sie einen bestimmten Effekt in ein Webdesign implementiert haben, der nicht validiert oder eine Warnung ausgibt, ist die Wahrscheinlichkeit groß, dass W3 dafür einen Grund hat. Dies sind großartige Momente, um nach anderen Möglichkeiten zu suchen, um den gleichen Effekt zu erzielen, jedoch auf eine bessere und validere Weise.

Zusammenfassung

Einige Designer befürchten, dass sie beim Codieren in XHTML/CSS Abstriche bei der Bildqualität des Designs machen müssen, um eine schnell ladende Website zu erstellen – aber das stimmt einfach nicht.

Es gibt viele Möglichkeiten, intelligent zu programmieren, die für einen sorgen können benutzerfreundliche, schnell ladende Website das entspricht der Qualität eines Designers. Die Verwendung dieser Tipps kann hilfreich sein, aber es gibt noch viel mehr zu lernen.

Denken Sie daran: Wenn Sie ein unerfahrener Slicer und Programmierer sind, kann es zunächst langsam sein, insbesondere wenn Sie sich noch im Lernprozess befinden. Wir kennen vielleicht XHTML und CSS, aber es ist eine ganz andere Fähigkeit, zu lernen, wie man es effektiv macht. So wie wir es beim Design-Lernen mussten, Wir müssen auch lernen, schön zu programmieren.

Exklusiv für WDD geschrieben von Kayla Knight.

Hierbei handelt es sich um allgemeine Tipps. Geben Sie daher unbedingt zusätzliche Tipps für die Praxis des Slicing- und Codierens eines Designs weiter, insbesondere aus der Sicht eines Designers.

Aktuelle Artikel:

Empfohlen