Kodierung eines Webdesigns für Geschwindigkeit und Qualität
Die Schönheit eines Webdesigners ist es, ein detailliertes, kreatives und originelles Webdesign zu erstellen Photoshop , ohne (größtenteils) darüber nachdenken zu müssen, wie es kodiert wird .
Während der Designphase dreht sich alles um das Aussehen , und entweder kann die Codierung später erledigt oder an einen Entwickler ausgelagert werden.
In jedem Fall ist es für Entwickler nicht einfach, sich über die Benutzerfreundlichkeit oder Funktionalität der Entwicklung Gedanken zu machen.
Dies ist eine großartige Art zu denken, und kann zu den besten Designs führen. Sobald es jedoch codiert werden muss, sind wir als Designer in einer kniffligen Situation.
In diesem Artikel finden Sie ein paar einfache Tipps, die Designern helfen können, grundlegende XHTML / CSS-Konvertierungen effizient für eine schnell ladende Website zu lernen, die genau auf die ursprüngliche PSD abgestimmt ist.
Entweder müssen wir die Entwürfe selbst in Scheiben schneiden und kodieren oder einen Teil unserer Gewinne an eine Outsourcing-PSD an XHTML / CSS-Unternehmen oder Entwickler abgeben. Da es sich in erster Linie um Designer handelt, ist die zweite Option normalerweise die beste Wahl für den Kunden, da sie die besten Ergebnisse liefert.
Manchmal müssen wir jedoch, wie bei kleineren Projekten oder anderweitig, eine Website selbst programmieren . Was auch immer der Grund sein mag, es sollte kein Fallback sein oder etwas, das zu viel Zeit in Anspruch nimmt.
Doing Yourself vs. Outsourcing
Dieser Artikel richtet sich mehr an Webdesigner, obwohl hoffentlich diejenigen, die Entwickler sind, etwas davon wegnehmen können. Wenn man sich jedoch auf die Designer konzentriert, ist es für viele Webdesigner üblich, dass sie nicht gerne Websites codieren. Wir gestalten gerne . Es gibt ein paar Ausnahmen, aber das ist die Einstellung dazu.
Viele Designer haben den Vorteil des Outsourcings entdeckt : Bezahlen Sie eine externe Firma, um Ihr Design zu schneiden und zu codieren, erhalten Sie es in ein paar Tagen zurück und sparen Sie sich Zeit und Mühe, es selbst zu tun.
Wenn Sie nicht mit der effizienten Programmierung einer Website vertraut sind, ist es möglicherweise nicht sinnvoll, zu viel Zeit darauf zu verwenden, wofür Sie in einem Projekt bezahlt werden.
Wenn zum Beispiel ein unerfahrener Programmierer mehrere Stunden damit verbringen würde, herauszufinden, wie er ein Design, das er gerade erstellt hat, programmieren kann, kann seine Zeit einfach mehr wert sein als das, was es kostet, den Job einfach auszulagern.
Auch die Belastung des Kunden für die Outsourcing-Arbeit statt Ihrer eigenen Arbeit kann kosteneffektiv für sie, sowie Zeit für sich selbst wirksam sein. (Oh, und du wirst der Entwicklergemeinschaft helfen, indem du ihnen ein bisschen Geschäft gibst!)
Es kommt eine Zeit in der Karriere eines jeden Designers, in der es jedoch nicht praktisch ist, einen Job auszulagern. Ein paar Beispiele wären:
- Du bist einfach nicht in einem starken finanziellen Punkt.
Gerade für Freiberufler kommen und gehen starke finanzielle Monate. Wenn Sie ein wenig in der Bank sind, ist es möglicherweise nicht die beste Option, $ 150 oder so für Outsourcing auszugeben, wenn Sie das bisschen Extra dafür bezahlt werden könnten, die Arbeit selbst zu erledigen. Während der Kunde die Zahlung an den Outsourcer als Teil der Projektzahlung nachholen würde, würde dies nur dazu führen, dass Ihre Finanzen für den Entwicklungsteil der Website sogar ausbuchen. Indem du es selbst machst, ist das viel mehr Arbeit, aber es ist auch viel mehr Geld in deiner Tasche. - Es ist ein kleines Projekt.
Ist das Projekt unter $ 1000? Haben Sie mehr als 1/10 des Budgets des Projekts nicht direkt? Wenn Sie den Coding-Anteil zu viel Prozent des Projekts auslagern, ist es wahrscheinlich praktischer, es einfach selbst zu machen. Außerdem sind kleinere Projekte wahrscheinlich einfacher und müssen daher nicht unbedingt viel Zeit in Anspruch nehmen. - Wenn es besonderen Kundendienst oder Anpassung benötigt.
Einige Projekte benötigen nur ein bisschen mehr Kundenbetreuung, von Ihnen, dem Designer. Je nach Kunde und Projekt kann es am besten sein, den Abschnitt zum Schneiden und Codieren in überschaubare Stücke aufzuteilen, wobei einige Teile während des gesamten Prozesses von der Meinung des Kunden abhängen. In jeder Situation, in der Sie, der Designer, den Code ändern müssen, um ihn an die Bedürfnisse des Kunden anzupassen, nachdem die ursprüngliche Website codiert wurde, ist es wahrscheinlich am besten, die gesamte Sache selbst zu machen.
Es liegt also an Ihnen, basierend auf jedem Projekt, jedem Kunden und jeder Situation zu entscheiden, ob Sie den Coding-Teil outsourcen wollen oder nicht.
Als ein Vorteil für das Outsourcing können erfahrene Programmierer eine identische codierte Version zu Ihrem PSD-Design erstellen , während Ladegeschwindigkeit und Benutzerfreundlichkeit beibehalten werden.
Wenn Sie in der Situation sind, in der Sie eine Website selbst schneiden oder programmieren möchten, hier sind einige allgemeine Tipps, 1) sparen Sie Zeit, so dass Sie nicht für $ 2 / Std. Arbeiten müssen und 2) bessere Ergebnisse liefern Ihr Kunde, als erfahrener Entwickler, würde dabei die Outsourcing-Kosten sparen.
1. Effektiv schneiden
Photoshop und Fireworks verfügen über ein integriertes Slicing-Tool, mit dem ein Designer eine Website direkt in HTML codieren kann. Aber auch moderne Versionen dieser Software erzeugen tabellenbasierte Markups. Dies ist natürlich nicht sehr nützlich für den modernen Webdesigner.
Aus diesem Grund ist die Entwicklung und Programmierung von Websites eine eigene Praxis, die ihr eigenes Talent und ihre eigene Erfahrung mitbringt. Alle Webdesigns benötigen eine Handcodierung und einen Denkprozess dahinter. Keine Software kann alles für Sie tun.
Dennoch kann das Slice-Werkzeug in Photoshop und Fireworks für den Entwicklungsteil des Webdesigns genutzt werden . Der Punkt ist zu wissen, wie man das Scheibenwerkzeug effektiv benutzt.
Anstatt sich hier in ein komplettes Tutorial zum Schneiden und Codieren zu vertiefen, kann ein tolles Tutorial über nututs + vielen helfen: Slice and Dice, PSD . "Es geht um die grundlegenden Denkprozesse, sowie das technische How-To, um ein Webdesign auf moderne und korrekte Weise zu schneiden - während das traditionelle Slice-Tool verwendet wird.
Es ist in einer chronologischen Reihenfolge, mit verschiedenen Screencasts für jede Phase des Entwicklungsprozesses, sowie nützliche Links zu ähnlichen und zusätzlichen Screencasts.
Der erste Schritt besteht darin, diese Tutorials zu betrachten und die wichtigsten Punkte daraus zu ziehen: zu wissen, welche Bilder zu schneiden sind, wie diese Bilder optimiert werden können, um Qualität und Geschwindigkeit auszugleichen, und welche Elemente Ihrer PSD einfach XHTML und CSS sein sollten .
Wenn Sie sich den Prozess und die Erklärung eines erfahrenen Entwicklers ansehen, kann dies einem Designer helfen, der über wenig Erfahrung beim Schneiden und Codieren verfügt und einen effizienteren Prozess erlebt.
2. Vereinfachen Sie CSS
Manchmal ist der erste Weg, CSS zu finden, um einen bestimmten Effekt zu erzielen, nicht der beste Weg, dies zu tun. Wenn Sie feststellen, dass Sie zu viele benutzerdefinierte Klassen oder komplizierte Taktiken erstellen, um einen Effekt zu erzielen, denken Sie an einen alternativen Weg, dies effizienter zu tun.
Zumeist kommt das mit Erfahrung. Je mehr Sie eine Website codieren und neue Techniken entdecken, desto einfacher wird die Verwendung von CSS.
Wie Anfänger die CSS vereinfachen können, finden Sie in Wooks Artikel über " Top-Down-Ansatz zur Vereinfachung Ihres CSS-Codes ".
Der Artikel gibt Tipps, wie CSS verwendet werden kann, um das grundlegende Drahtmodell und das spezifische Styling zu erstellen, wie voreingestellte HTML-Elemente effektiv wieder verwendet werden und wann es angemessen ist, eigene Klassen oder IDs zu erstellen.
3. Verwenden Sie CSS-Kürzel und minimieren Sie HTML-Markup
Je kleiner eine Dateigröße ist, desto schneller wird sie geladen, und das ist so einfach. Die Verwendung von CSS-Kürzeln und das Minimieren der Länge von XHTML-Markup durch Wiederverwendung von Elementen ist eine großartige Möglichkeit, dies zu tun.
Die Codierung einer ganzen Website muss eine Balance aus Markup und Styling sein, die mit CSS ausgezeichnet werden. Markup sollte für die Struktur verwendet werden und CSS sollte für das Styling verwendet werden, also ist es ein guter Weg, dieses Gleichgewicht zu finden.
Abgesehen davon, erfordert die Praxis nur das Verständnis der technischen Aspekte von CSS-Kurzschrift, sowie das Sammeln von Erfahrungen.
Sehen Sie sich einige der folgenden Tutorials zur Beherrschung von CSS-Kurzschreibweisen an:
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) werden kleinere Dateien die Ladezeit effizienter machen, sodass der Prozessor sie schneller lesen kann.
Wie bei CSS und Markup ist es jedoch nicht praktisch, alle Leerzeichen für Bearbeitungs- und Verwaltungszwecke zu entfernen.
Stattdessen sollten Sie in die Praxis kommen, Zeilenumbrüche nur dann zu verwenden, wenn dies erforderlich ist. Entfernen Sie auch alle Kommentare im Markup und Stylesheet, die für die Pflege der Website nicht notwendig sind.
4. Smush.it
Verwenden Sie ein Werkzeug wie Yahoos Smush.it um noch mehr Bilder zu knacken. Ein solches Tool verwendet einen Komprimierungsalgorithmus, der die Dateigröße erheblich reduziert, ohne die Bildqualität zu beeinträchtigen. Eine durchschnittliche Reduzierung von etwa 40% aller Bilder kann einen großen Unterschied in der Ladezeit einer Website ausmachen.
Laden Sie einfach alle Bilder für die Website, nachdem sie ursprünglich in Photoshop optimiert wurden, in die Anwendung "Smush.it". Es wird Ihnen eine neue Liste von Bildern zum Download geben, die erklären, wie viel Speicherplatz wie gespeichert wurde.
5. Achten Sie auf den CSS & Markup-Auftrag
Wenn Sie die Strukturelemente vor den Inhaltselementen oder den Stil blockquote vor dem Absatzformat verwenden, wird ein Stylesheet nicht schneller geladen. Ein Stylesheet wird jedoch in der Reihenfolge geladen, in der es im Stylesheet angezeigt wird. Auf diese Weise kann eine Website so aussehen, als würde sie schneller geladen.
Wenn beispielsweise in einem Stylesheet alle Inhalte, Bilder und Textstile zuerst definiert wurden, werden diese Elemente geladen, bevor Hintergründe, Strukturelemente oder Designbilder geladen wurden.
Aus diesem Grund scheint es so, als würde das Webdesign etwas langsamer geladen, als wenn wir zuerst den Hintergrund und die Struktur sehen würden.
Mit Struktur und Hauptbild zuerst, hat der Betrachter etwas, auf das er sich für jene Sekunden konzentrieren kann, in denen Inhalt noch geladen wird.
6. Wissen, wann Client-seitiges oder serverseitiges Scripting verwendet werden soll
Für grundlegende Projekte werden Webdesigner wahrscheinlich nicht in zu viel Programmierung geraten. Einige Skripts sind jedoch möglicherweise für ein einfaches Kontaktformular oder für spezielle Navigationseffekte erforderlich.
Was auch immer es ist, zwei Arten von Skriptsprachen können verwendet werden: clientseitig (wobei die Skriptsprache im Browser des Benutzers läuft) oder serverseitig (die Skriptsprache läuft auf dem Server).
JavaScript und jede Bibliothek darunter ist die am häufigsten verwendete clientseitige Skriptsprache. Da es lokal im Browser des Benutzers ausgeführt wird, muss es nicht vollständig auf dem Server ausgeführt werden, um seine Verarbeitung durchzuführen, wodurch es schneller wird. Serverseitiges Scripting ist etwas langsamer, läuft aber in kleinen Dosen und bei entsprechender Verwendung gut.
Verwenden Sie serverseitiges Scripting für alles, für das eine Datenbank erforderlich ist, oder für alles, was für den Zweck der Website erforderlich ist. Da ein Benutzer JavaScript deaktivieren kann, eine serverseitige Sprache jedoch nicht deaktivieren kann, ist serverseitiges Scripting für alle Website-Anforderungen sicher.
Zum Beispiel wird ein Kontaktformular, obwohl es leicht ist und möglicherweise keine Datenbank benötigt, am besten mit einer serverseitigen Sprache verwendet, da es immer noch für jemanden mit deaktiviertem JavaScript zugänglich ist.
Insgesamt sollten die meisten Websites, die zusätzliche Skripts erfordern, eine Balance aus beidem haben. Einige kleinere Websites benötigen möglicherweise nur die eine oder die andere, aber es ist wichtig, nicht nur eine davon zu verwenden. Wissen wann und warum, um jedes zu verwenden.
7. Zuletzt, aber nicht zuletzt, validieren
Dies ist für die meisten von uns offensichtlich, aber wie bei jedem anderen Artikel muss auch gesagt werden: Während des gesamten Prozesses des Codierens, und wenn alles gesagt und getan ist, validiere CSS und XHTML-Code.
Wir alle kennen die Vorteile der Validierung, da sie verschiedene Browser ähnlich rendern, das Laden von Webseiten beschleunigen können und ein allgemeiner Fehlerprüfer für semantischen Code ist.
Ein zusätzlicher Vorteil dieses Prozesses besteht jedoch darin, neue Techniken für die Verarbeitung von CSS-Code und Markup zu erkunden.
Wenn Sie einen bestimmten Effekt in ein Webdesign implementiert haben, das nicht validiert oder eine Warnung gibt, hat W3 wahrscheinlich einen Grund dafür. Dies sind großartige Momente für die Erforschung anderer Optionen, um den gleichen Effekt zu erzielen, aber auf eine bessere, validiertere Art und Weise.
Aufwickeln
Einige Designer befürchten, dass sie beim Codieren zu XHTML / CSS Qualität in der Bildsprache des Designs opfern müssen, um eine schnell ladende Website zu erstellen - aber das stimmt einfach nicht.
Es gibt viele Möglichkeiten, intelligent zu codieren, die für eine benutzerfreundliche, schnell ladende Website erstellt werden können , die die Qualität eines Designers erfüllt. Die Verwendung dieser Tipps kann helfen, aber es gibt noch viel mehr zu lernen.
Denken Sie daran, wenn Sie ein unerfahrener Slicer und Coder sind, kann es zuerst langsam sein, besonders wenn Sie noch im Lernprozess sind. Wir kennen vielleicht XHTML und CSS, aber es ist eine ganz andere Fähigkeit zu lernen, wie man es effektiv macht. Genau wie wir beim Design lernen mussten , müssen wir auch lernen, schön zu programmieren .
Geschrieben exklusiv für WDD von Kayla Ritter .
Dies sind verallgemeinerte Tipps. Geben Sie daher unbedingt weitere Tipps für das Schneiden und Bearbeiten eines Designs, insbesondere aus der Sicht eines Designers, ein.