Ausdruck ihrer IT-

Re-Cycling ist Buzzword und bei der Webentwicklung bedeutet es nicht anders. Es spart Energie, in Bezug auf Aufwand!

Über Jahre hinweg zu schreiben und Erstellen von HTML-CSS-Designs aus, ich habe ein paar Best Practices gefolgt, in der Verfolgung das spart Zeit und Energie in das, was wir gemeinhin als Begriff "Re-Erfindung des Rades". Immer wieder habe ich mir gesagt, dass ich ein paar Vorlagen zu erstellen, einige Standard-Mehrweg-CSS, die ich benutzen würde OUT OF THE BOX in meine zukünftige Arbeit. Obwohl nicht vollständig, aber ich habe es geschafft, einige Ziele zu erreichen.

Bei der Förderung, Re-Use von CSS, hatte ich einen Blick auf die wenigen CSS-Frameworks, die üblicherweise zur Verfügung zu stellen sind und beschlossen, sie zu benutzen, da diese erprobt und getestet und erstellt von erfahrenen Entwicklern viel, als ich. Noch wichtiger ist "vermeiden eine erneute Erfinden".

Obwohl allgemein bekannt, Veteranen, habe ich versucht zu Stift einige Schlüsselbegriffe / Best-Practices / Gedanken, die in die Schaffung dieser Rahmenbedingungen, um RE-cycling von CSS möglich gewesen ist. Hoffen, dass dies einige CSS-Entwickler, die gerade dabei sind und vor kurzem an Bord der CSS-Zug aufgesprungen zu helfen!

Keys Re-cycling von CSS:

Verwenden Sie Namenskonventionen

Dies hat zu der wichtigste Faktor bei der Herstellung der CSS / HTML wiederverwendbar sein. Giving konsistente Namen zu Seite Elemente ermöglicht die Wiederverwendung von Komponenten und deren Seite Stile mit wenig oder Modifikationen. Im Einklang mit diesem Argument, auch HTML5, zu einem grundlegenden Wandel Veränderung gegenüber seinen Vorgängern, ist es, einige strukturelle Tags nämlich einzuführen. <article>, <section>, <header>, <aside> und <nav> [ Was wird HTML5 zu bringen? ]. Selbst mit HTML 4 (oder niedriger), ist es am besten Standard Bereichen Ihrer Seite consistanly wie in der einfachen Beispiel unten zu nennen ...

Denken Sie daran, die meisten Seiten auf Ihr Projekt, am Ende mit den gleichen Kern Strukturelemente. Identifizieren Sie diese gemeinsamen Kern Seitenelemente ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Reset Default Styles (CSS Resets): Ob Sie einen Rahmen oder benutzen Sie schreib, müssen Sie CSS-Resets bieten [ Was sind CSS-Resets? ], da sie manchmal zu beseitigen oder zu reduzieren visuelle Unstimmigkeiten, die zwischen verschiedenen Browsern auftreten. In einfachen Worten die CSS-Reset-Mechanismus setzt die Stile der HTML-Element auf Null oder NULL-Werte und somit Vorrang vor allen Browser-Standardwerte können sie stellt. Dies bietet eine tabula rasa, um die Eigenschaften dieser Elemente ohne irgendwelche User-Agent-Defaults [gesetzt CSS2.1 User Agent Style Sheet Defaults ]. Alle CSS-Frameworks kann der Reset-Mechanismus haben. Wenn Sie mit dem Schreiben Sie eigene CSS-Resets werden, ist ein Wort der Vorsicht, dass, wenn Sie vergessen, eine wichtige Eigenschaft zurückgesetzt passieren, könnte es zu Cross-Browser-Probleme, die sehr schwer zu debuggen sind zu führen. Denken Sie daran, Behalten Sie eine Kopie der Reset-Stile und Drop in jedes neue Projekt, das Sie erstellen.

  Körper, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  vor, Form, fieldset, Input die Option, textarea,
  p, blockquote, Tisch, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (Baseline Styles), um Elemente:

Nachdem Sie (auf Null oder null) haben die Standardwerte bestimmter persönlicher Eigenschaften bestimmter HTML-Elemente, ist es notwendig, einige Stile in jedem Fall dieser Elemente gelten. Diese Voreinstellung kann nach der Gestaltung variieren oder nach die besten Praktiken, die Sie verfolgen.

Die meisten CSS-Frameworks, immer einige neue Vorgaben, zusätzlich zu Zurücksetzen Standard-Browser Stile.
Diese Standardwerte Unwirksamkeit der User-Agent-Defaults (weg von der CSS-Reset-gestrippt), werden diese im Einklang mit allen Browsern.

Erinnern Sie sich, Baseline Styles verwendet werden, um Stile, die gehen Design-weite verwendet werden soll. zB.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 starke, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

Abstract Styles für Common HTML-Komponenten und gemeinsame Klassen:

Die meisten Vorhaben, die aus mehreren Seiten wird häufig HTML-Elemente auf der Website verwendet, zB für irgendeine Art von Formen, Warnungen und Fehlern, Custom Popups, Leuchtkästen etc. haben seit über solche Komponenten sind wieder über Projekte verwendet, wird es nützlich sein, die Bereitstellung eines Satz von Klassen mit vordefinierten Stilen für diese Komponenten verbunden und Sie ersparen sich eine Menge Zeit.

Abgesehen von der Definition wiederverwendbare Stile Definitionen für die gängigen HTML-Komponenten, konnten wir abstrakten Stilen Klassen in Bezug auf Typografie, Farbe oder sogar Layout. Ich selbst neigen Sie ... gemeinsame Klassen wie Clearfix, Font08, FontGrey, AlignL, DisplayB usw.

  Form input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 Form textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: 0,9 em; line-height: 1.5em; overflow: visible;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {clear: both;}
 . Teiler {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; height: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Fixes, um gemeinsame Browser Tücken

Verschiedene Browser CSS-Code zu implementieren und bieten unterschiedliche Niveau der Unterstützung für die CSS-Spezifikationen. Dies hat zur Folge .... "Browser-Quirks", dass wir den Entwicklern überlassen werden, um anzupacken. Insbesondere verfolgt die meisten IE6 CSS-Programmierer mit einer Frist zu erfüllen. Die gute Nachricht ist die Erfahrung hat gemeinsam möglich WIEDERVERWENDBAR Fixes für diese Probleme (oft als sogenannte gebracht CSS-Hacks ).

Denken Sie daran, halten Sie diese Hacks / Fixes handlich

  / * Die folgende zoom: 1 Regel ist speziell für den IE6 + IE7.  * /
    * Html. Clearfix,
    *:. First-child + html clearfix {
           zoom: 1;
      } 

Halten Verfeinern der CSS

• Die Gewohnheit, Recycling-nicht zu euch kommen in Tag. Es muss entwickelt. So planen Sie Ihren Re-Cycling. Achten Sie hierauf, dass man abstrakte Vorgaben Stile, Typografie Definitionen, Layouts, HTML-Element Styles etc. Versuchen Sie, vorausschauend zu denken.
• Auch blicken zurück auf Ihre früheren Projekten, wird es dazu beitragen, Stile, die Sie verwenden oft über porjects neigen. Kurzfassung es.
• Entfernen Sie alle unbenutzten Stile. Diese Praxis wird Ihre CSS-Framework von einem gemeinsamen Symptom als "Aufblähung" zu halten -
• Nehmen Sie sich wiederholende Stile.
• Bauen Sie eine Reihe von Stilen, die flexibel genug, um es über die Projekte hinweg zu portieren sind.

Ein Blick auf CSS-Frameworks

Endlich. Wenn Sie inspiriert sind und beabsichtigen, eine oder mehrere der CSS-Frameworks verwenden, ist Heres kurze Liste von einigen wenigen populären ....

• 960 Grid System : Das 960 Grid System ist ein Versuch, Web-Entwicklung Workflow, indem sie häufig verwendete Dimensionen, basierend auf einer Breite von 960 Pixel zu optimieren. Es gibt drei Varianten: 12, 16 und 24 Säulen, die getrennt oder gemeinsam genutzt werden können. Dachte sich nichts, dass man nicht schaffen ein für Ihre eigenen leicht genug, Der Rahmen Raster-Vorlagen für den Druck im PDF-Format, dass man benutzen, um Ihre Seite designs.Bet skizzieren können bietet, wäre es einen professionellen Eindruck, wenn man ein paar Blätter tragen, wenn Sie gehen an einen Client für UI-Anforderungen sammeln. Es bietet auch Grundraster Vorlagen für beliebte Design-Software wie Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. Bereitstellung eines "Starter for Ten" zu Ihrem Design Arbeit zu beginnen.
• Blueprint : Blueprint bietet deutlich klassifiziert CSS-Dateien für Resets, Grids, Formulare, Druck, Typografie, Plugins für Schaltflächen, Registerkarten und Sprites etc. Es bietet auch Unterstützung für IE als separates gehören.
• SenCSs : Im Gegensatz zu den beiden obengenannten SenCSs (sprich: Sense), verfügt nicht über CSS-Definitionen für das Layout. Die Informationen enthalten Schriftarten, Polsterungen, Ränder, Tabellen, Listen, Überschriften, blockquotes, Formulare und vieles mehr.
• BlueTrip : Seine ursprüngliche Anspruch auf Ruhm war, dass es eine Kombination der besten Features von anderen Frameworks wie andere Blue Print, Trip oli ... von wo aus er seinen Namen zur Verfügung gestellt wurde. Sein Feature-Set umfasst 24-Stützenraster, Typografie Stile, ORM-Stile, drucken, Buttons etc.
• YUI Grids : Geholt Ihnen durch den yahooo Developer Network unterstützt fluid-width (100%) Layouts sowie voreingestellte Layouts fester Breite auf 750px, 950px, 974px und, und die Fähigkeit, leicht auf eine beliebige Anzahl anpassen. Wie Sie sehen können, die technisch nur die Komponenten-Layout. YUI auch vorgesehen HTML / CSS-Sets für andere Seitenelemente
• YAML (Yet Another Multicolumn Layout)
• Emastic

Denken Sie daran, mit Hilfe von CSS-Frameworks bedeutet nicht, dass Sie faul, um ein eigenes zu erstellen sind ... Es impliziert, dass Sie klug, um von anderen Erfahrungen und Fehlern zu lernen, Zeit sparen und Produktivität steigern sind!!

Mit meinen begrenzten Fähigkeiten, die mit Werkzeugen wie Photoshop und Illustrator, kann ich ehrlich gestehen, dass ich ein besserer Entwickler, als ich ein Designer bin. Aber mein Hintergrund mit Kern (Server-Seite) Entwicklung mit Java / PHP / COBOL, war ein sehr positiver Einfluss auf meine UI-Entwicklung Fähigkeiten. Was ich meine ist, während der Erstellung meiner Entwürfe, dh immer wenn ich Design zu tun, ich darüber, wie das Design lässt sich am besten in HTML-CSS konvertiert werden und während Sie das HTML-CSS denke, gebe ich einen Gedanken über das Backend-Technologie und machen ziemlich sicher dass der HTML lässt sich einfach in XSL-Schleifen-oder PHP-Schnipsel usw. umgesetzt werden

Über Jahre hinweg, habe ich den Kopf auf den Entwürfen geworfen durch UI-Designer, die wahrscheinlich donot Ahnung, was HTML oder CSS ist. All diese Jahre habe ich gedacht, dass ich für zu viel verlangt, wenn ich nur erwarten, dass der Designer, der versucht, seine "unmöglich, Code"-Design in meine Kehle shov wird, um nur ein wenig, was sein Design umgewandelt werden würde verstehen in. DAS wäre richtig helfen?

Dann stieß ich auf dieses Thema liegt heute ... Web-Designer, die nicht können Code ... Danke Herr! Ich bin nur einer von vielen, die das gleiche fühlen ... Die oben artitle ist ein bisschen ein langatmig .. aber es lohnt sich lesen, jedes Wort davon.

Vielen Dank Elliot Jay Stocks ... Ich fühle mich erleichtert!

Hier einige Auszüge aus Elliots Artikel .

Wow, was für ein Tag! Es begann mit ein wenig Tweet und endete mit einer Diskussion, die über die gesamte Web-Design-Community zu kehren schien. Es scheint, gibt es einige sehr starke Meinungen zu dem Thema, ob Web-Designer sollten in der Lage, Code gehalten.
...
Also, bevor wir uns damit, erlauben Sie mir, schnell rekapitulieren, was ich an diesem Morgen sagte auf Twitter:

Ehrlich gesagt, ich bin schockiert, dass im Jahr 2010 ich komme noch über "Webdesigner", die nicht programmieren können ihre eigenen Entwürfe. Keine Entschuldigung.

... Ich hätte ein wenig mehr in meinem speziellen Tweet habe. Ich war über Designer, die nicht einmal die grundlegendsten HTML-und CSS-Fähigkeiten, um eine flache Bauweise zu einem wirklichen Ort drehen zu sprechen. Nicht Menschen, die absichtlich nicht wählen, um Code, diejenigen, die nicht können. Und ich bin auch nur bezogen auf Front-End-Code hier, natürlich ist es lächerlich zu glauben, dass die Designer auch erstaunlich Back-End-Programmierer sein ...

Wir bekommen 'web' Entwürfe in Illustrator, 300dpi geschickt, unmöglich, Code, keine Konsistenz / Usability.
~ Amy Mahon

Es wird spät, und ich habe, um diese irgendwie bis zu wickeln. Ich weiß, es wird viele, die mit mir nicht einverstanden sein, und meine Absicht ist nicht zu beleidigen oder verärgern Wer will, kann nicht Code, aber ich hoffe, dass einiges von dem was ich gesagt habe, einige der Punkte, die immer kommen, wenn Eintauchen in reflektiert Diese Debatte.

Am Ende des Tages, kann ich keine schlaflosen Nächte darüber, wer zu kodieren und wer nicht. Ich bin nur ehrlich überrascht, so viele Designer, die Front-End-Fähigkeiten fehlen, wie ich das war ein Ding der Vergangenheit dachte finden.

Auch die Kommentare lesen, gab es rund 320 Kommentare, wie ich schreibe ... sie sind lesenswert.
Bitte lesen Sie Elliots full post hier .. Web-Designer, die nicht programmieren können

Gestern, nach dem Thema, das ich mit dem CSS-Resets in Google Chrome gestoßen ... Ich dachte an zu graben ein bisschen tiefer in den Bereich des User Agent Style Sheets ...
Gefunden in dieser Tabelle auf Standardwerte CSS2.1 User Agent Style Sheets ... (für diejenigen, nicht bewusst, was "User Agent Style Sheets" ist folgen Was ist User Agent Style Sheets (Spezifikation) .

Für eine vollständige Liste von CSS 2.1 User Agent Style Sheets Standardwerte klicken Sie hier

Gestern, wie jeder andere "Ground Hog Day", wurde ich auf einigen CSS / tableless Layouts arbeiten. Alles lief gut in IE 7, FF 3 und Chrome, soweit nicht plötzlich, sah ich einige un-ignorable Margen nur in Google Chrome zu sehen. Obwohl sehr seltsam und Worring, es einige neue Fehler / Problem war, dass ich accross kommen, gab es schließlich einige Gewürz in meinem alltäglichen Arbeit. Sad (aber feine) wurde es innerhalb von wenigen Minuten von der Sonde fixiert ...

Im Grunde sah es aus wie Google Chrome ignoriert meine CSS-Resets (margin: 0px). Es wurde tatsächlich durch den User-Agent-Stylesheet (-webkit-padding-Start: 40px) verursacht. Also die Lösung war, diesen Stil, indem Polsterung zurückzusetzen: 0 dem problembehafteten Elemente.
Eine gute Möglichkeit, dieses Problem nicht passiert zu jedem Element zu verhindern, ist weltweit ein Übriges CSS wie folgt

* {Margin: 0; padding: 0;}

Was ist User Agent Style Sheets (Spezifikation)?
Der folgende Auszug ist entnommen aus http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , folgende Link, um mehr über User Agent Style Sheets lesen

CSS 1 führt die Idee mit der Feststellung, dass jeder User Agent (UA, oft ein "Web-Browser" oder "Web-Client") wird ein Standard-Stylesheet, das Dokumente in einer angemessenen präsentiert haben - aber wohl banal - Art und Weise. CSS 2 sagt, dass konforme Benutzerprogramme müssen ein Standard-Stylesheet anwenden (oder so tun, als wenn sie es taten) und dass ein User-Agent Das Standard-Stylesheet sollten die Elemente der Sprache des Dokuments in einer Weise, die allgemeine Präsentation Erwartungen für das Dokument Sprache befriedigen zu präsentieren; CSS 3 ist wahrscheinlich einer Meinung sein.

Da die CSS-Spezifikationen lassen Sie es bis zu Implementierungen, ob eine "echte" Stylesheet für Standard-Anzeige verwendet wird oder nicht, ist es nicht erstaunlich, dass Sie nicht finden, ein Standard-Stylesheet in jedem Browser den Installationsordner. Im Gegensatz zu Microsofts Internet Explorer sowie Opera, zum Beispiel (und soweit ich weiß), machen Gecko-Browsern wie Firefox und Netscape Navigator (suchen Sie nach "html.css"), sondern auch Konqueror es recht einfach auf die Standardwerte Styling zu begreifen.

Weder ich bin sehr neu in User Interface (UI) Entwicklung noch bin ich ein Veteran und als ich es immer, ich passen in das Profil der UI-Entwickler mehr als die von einem Designer, ohne Reue. Oh Well! Was sollte ich schreiben? ... Seit einiger Zeit (muss im Jahr nicht weniger sein), hin und wieder, wenn ich in ein bisschen UI-Design (wenn die professionellen Designer hat sich auf einen Urlaub gegangen) bekommen haben, dachte ich immer cant stop, ob mein Design sollte richtig complient oder nicht (aufrichtig, nicht, dass ich 100% allen Ernstes für die Einhaltung von Standards, wenn ich wollte auch). Dann sage ich mir, was crap! ... Das Design sollte einfach, schön und vor allem brauchbar scheinen, sollte es nicht machen Besucher weglaufen ... oder Bounce (technisch sein). Was gut wäre eine schöne tableless CSS-Layout für den Besucher, der blind für all die Smart Hypertext und Cascading Style Sheet unter die Haut Ihrer Webseite ist ... Zilch sein!
Es sollte schön aussehen und einfach zu bedienen sein ... dann kommt das ganze Zeug Standards.

Ich stumbbled accross diesen Blog-Eintrag von Jason Fried von 37 Signals (Für diejenigen, die nicht bewusst sind 37 Signale sind die onces, die einige tolle Web-Anwendungen erstellt haben, wie Basecamp, Campfire, etc.), der etwas Ähnliches im Jahr 2004 schrieb und glauben Sie mir, fast 5 Jahre und nicht viel geändert, dass seit ... Ich war glücklich, seinen Posten zu lesen, wie ich völlig einverstanden mit dem, was er zu sagen hat und die auch die Tatsache, ist ihr nicht sicher, was über seine soeben sein Bauchgefühl zu erzählen und so ist mein

Jason Fried: "Es gibt viel zu viel reden über CSS und XHTML und Standards und Zugänglichkeit und nicht genug über Menschen zu sprechen. CSS-Code und standardkonform sind nur Werkzeuge - man muss wissen, was sie mit diesen Werkzeugen zu bauen. Großartig, ich bin froh, Ihre UI verwendet keine Tabellen. Na und? Wen kümmert es, wenn es immer noch nicht lassen Menschen ihre Ziele zu erreichen. Webstandards sind toll, aber Menschen die eigenen Standards gehören Getting Things Done (und das ist immer noch zu schwer zu tun, online).

UI-Designer machen die gleichen alten fundamental "zu vergessen der Mensch auf der anderen Seite" Fehler - außer dieser Zeit ihren Code besser aussieht. Menschen - Keinen Code Validatoren - Einsatz-Schnittstellen ".

Kasse Jason Fried Das vollständige Artikel

DISCALIMER: Das bedeutet nicht, dass wir nicht über Normen überhaupt die Mühe. Standards sind gut zu haben und halten an ihnen so viel wie möglich. Wir müssen uns nur, dass eine gute UI-Design zu verstehen bedeutet nicht immer 100% Standards Complience oder umgekehrt ....

Aus meiner Liste meiner bisherigen Erfahrungen, folge ich ein paar UI-Design und Entwicklung Goldene Regeln ... Heres die TOP 10 ... nicht, dass Sie folgen ihnen auch ...

Ein. Achten Sie auf Ihre Nutzer. Die Benutzer kann Pause machen oder Ihre Website. DONOT machen Benutzer aussehen wie ein total idoit, völlig unfähig mit Ihrer Website. Das ist schlimm!

2. Halten Einfachheit und Benutzerfreundlichkeit Ihr primäres Leitfaden. Zu viele Dinge auf dem Bildschirm, desto höher ist die Wahrscheinlichkeit, dass ein Benutzer verwirrt wird oder sich ablenken von ihrer ursprünglichen Aufgabe.

3. In den Grenzen liegen ... DONOT frönen zu viel in Usability, Barrierefreiheit und NORMEN. Verwenden Sie Standards effektiv und machen sie zu dem Team verstanden. Dadurch wird sichergestellt, richtige Konsistenz des Produkts

4. Prototyp der Anforderung. Da in diesen Tagen die nutzbare Schnittstellen sind reich, Prototyping immer besser ist als nur die Herstellung einfacher Wireframes und letztere ist nichtig menschenwürdiger Interaktionen, wäre es nicht, übermittelt dem Kunden ein klares Bild von dem Endprodukt, die derzeit entwickelt wird. Immer ist es einfacher, die Prototypen in die endgültige Ergebnisse umzuwandeln. Auch! Prototyping mit jeder Interaktion Fragen könnten schon früher im Entwicklungszyklus werden gebügelt.

5. Konsistenz in Ihrem Design und Interaktion ist sehr wichtig. Donot verwirren Sie Ihre Benutzer mit unvorhersehbaren Interaktionen und Spielereien.

6. Verstehen Sie Ihre "Design Mission Statement". Imbiss auf dem Primär-Aktion auf der Seite beign entworfen konzentrieren. Also, stellen Sie eine Liste Ihrer seconday Aktionen auf der Seite, und diese priorisieren.

7. Kontrollieren Sie Feedback zu den Anwendern vor Ort. Bei den meisten der Websites rund um AJAX konzipiert, bieten visuelle Hinweise an den Benutzer über Änderungen an Seite. Der Benutzer muss gegeben eine Bestätigung der Beendigung einer Aufgabe, die er ausführt. Donot machen den Nutzer warten und zu erraten, denn zB. Indikatoren für Fortschritt sorgen Datei uplaods.

8. Verwenden Kontrollen angemessen. Für z. B. 's Wählen Sie die Dropdown-Liste für kleine Listen nur, donot damit der Benutzer wählen Sie eine der 200 Städte mit Auswahlboxen. Verstehen Sie den Unterschied zwischen einem Knopf und einem Link. Ein Link und Button haben unterschiedliche Zwecke verwenden donot eine für das andere. Sorgen für die richtige Steuerung, um die Interaktion mit einer Seite zu erleichtern. Vermeiden Sie die Verwendung Menus, das sind mehr als zwei Ebenen tief. Nicht das Rad neu erfinden. Verwenden Sie Standard-Steuerelemente, passen Sie sie nur, wenn sehr notwendig. Definieren Sie keine benutzerdefinierte Steuerelemente für Ihre Site aus erster Hand benötigt, so dass sie erstellt werden konnte und unabhängig getestet einsatzbereit accross Website.

9. Donot ITERATE zu sehr auf das Design. Denken Sie daran! Die gesamte Produkt besteht aus mehr, dass Design allein. Bauen Sie entsprechende Fristen in Ihr Projekt ein Zeitplan für die Design-Iterationen und dabei zu bleiben. Iteration hilft uns, um herauszufinden, was funktioniert und was nicht, herausgreifen die Krisenherde. Als eine gute Schnittstelle dauert seine Zeit, genügend Zeit für Wiederholungen in der Anfang des Entwicklungszyklus, so dass Design-Iterationen doesnot direkt zu überarbeiten gleichzusetzen. Zu viel Nacharbeit konnte jeopradize Fristen.

10. Lehnen Sie sich zurück und denken, wie ein Benutzer manchmal.

Haben Sie animoto.com gesehen? Na ja! dies ist kein AD, ich mochte es wirklich! und es ist in der Tat ASS UI Kuss

Ich kam in dieser Website vor ein paar Wochen. Sah die erste Seite, DINT viel Mühe. Für mich war es nur ein weiterer Ort mit einem reichen von Flash-Inhalten, so dass Benutzer, um Bilder hochzuladen, wählen Sie eine Spur auf und wandeln sie in eine schöne Diashow. Download FLV, und legte es auf jeder Seite Ihrer Wahl (YouTube, Metacafe, Facebook und Ähnliches) ... Zeitraum.

Gestern, als ich die interne Strömung Seiten, die den Benutzer durch Schaffung dieser Slideshow nahm sah .... Ich ging OH WOW! Als ich merkte, dass es nicht wenig FLASH verwendet. Es war tatsächlich eine anspruchsvolle Benutzeroberfläche. Alle UI-Entwickler Ziel setzen muss, zu schaffen oder zumindest ein Teil des Teams, die diese Schnittstelle getan hat sein .... Absolutely brilliant! Und inspirierend!

BESUCHEN SIE AUCH ... http://animoto.com/ ... und zu registrieren und mit ihm spielen ... nur dann können Sie schätzen das Genie.

Als ich diesen Artikel zu lesen auf A List Apart " Faux Absolute Positioning
von Eric Sol ", ich war nichts weniger als beeindruckt. Ich war auch majorly, deprimiert verursachen, ehrlich, ich habe mich gefragt, Warum kann ich etwas einfallen lassen, da dies fabelhaft.

Normalerweise, wenn wir CSS-Layouts zu erstellen, verwenden wir "Position" oder "schwebt", oder eine sehr schlechte Kombination aus beidem. Eric Sol und sein Team definieren ein neben perfekter Technik von einer neuen Art von CSS-Layout-Technik, die sie als "Faux Absolute Positioning" nach dem Faux Columns Technik, die das Vorhandensein einer Spalte simuliert wurden getauft.

Du weißt, dieses Problem uns alle CSS-Entwickler haben mit zerfallenden Layouts (Die unerwarteten Veränderungen, die Inhalte ganzer Spalten führen zu wickeln, wenn wir schwebte Layouts verwenden) ... Naja! Scheint Geschichte!!
Dieses Layout-Technik ist noch sehr jung, und muss von all den CSS-Gurus da draußen im Papierkorb, bevor es ein UN-Standard geschrieben wird. Ich bin froh, es jetzt zu nutzen! ... Und bin schon mitten in der Umstellung meiner früheren problematischen / Floating unnötigerweise Layouts in FAP Layout schon ... und ich bin froh zu sagen, das "Wir arbeiten bereits mit Faux Absolute Positioning für dieses Blog-Site als auch" ... Gehen Sie versuchen es, JETZT!

Kudos Eric!

Mehr die DOM-Elemente auf der Seite, es macht langsamer, langsamer ist der DOM-Zugriff in der JavaScript. Eine hohe Anzahl von DOM-Elementen kann durch schlechte Layout-Design sein. Zum Beispiel könnte verschachtelte Tabellen zu Layout-Zwecken verwendet worden sein. Verwenden Sie ein beliebiges HTML-Tag, wo sinnvoll ist semantisch. Für zB DONOT Verwendung Tabellen für Layouts, aber DONOT zögern, sie zu benutzen, an der Sie tabellarische Daten dargestellt werden, und wird daher verwenden DOM-Elemente zu reduzieren, im Vergleich zu einer ähnlichen Struktur erstellt mit DIVs nur ..

Um die Anzahl der DOM-Elemente in Ihre HTML-Seite zu testen, geben Sie einfach folgendes in der Firebug-Konsole: document.getElementsByTagName('*').length

Es gibt keinen festgelegten Standard, wie viele DOM-Elemente sind zu viele. Überprüfen Sie andere ähnliche Seiten, die gute markup.Eg haben. Yahoo! Homepage ist eine Seite ziemlich beschäftigt und immer noch unter 700 Elemente (HTML-Tags).

Verwenden Sie GET Requests für AJAX

Es wurde festgestellt, dass bei der Verwendung von XMLHttpRequest, POST in den Browsern wird als zweistufigen Prozess implementiert: Senden der Header zuerst, dann das Senden von Daten. Also ist es am besten zu nutzen GET, das dauert nur ein TCP-Paket zu senden (sofern Sie nicht eine Menge von Cookies haben). Die maximale URL-Länge im IE ist 2K, also, wenn Sie mehr als 2K Daten senden Sie vielleicht nicht in der Lage, verwenden zu können.
Eine interessante Seite beeinflussen ist, dass POST, ohne tatsächlich das Einstellen von Daten verhält sich wie GET. Wird zum Abrufen von Informationen gemeint GET, so macht es Sinn (semantisch) zu bekommen verwenden, wenn Sie nur beantragt sind Daten, wie zum Senden von Daten an Server-Seite gespeichert werden, entgegen.

Vermeiden Sie Synchronous AJAX-Aufrufe

Bei der "Ajax" Anfragen, können Sie entweder async oder sync-Modus. Async-Modus läuft die Anfrage im Hintergrund, während andere Browser-Aktivitäten weiterhin zu verarbeiten. Sync-Modus wird für die Anfrage an, bevor Sie fortfahren Rückkehr zu warten.
Anfragen mit Sync-Modus gemacht sollte vermieden werden. Diese Anfragen werden dazu führen, den Browser zu sperren für den Benutzer, bis die Anforderung Renditen. In Fällen, in denen der Server ausgelastet ist und die Reaktion dauert eine Weile, den Browser des Benutzers (und vielleicht OS) wird nicht zulassen, irgendetwas anderes zu tun. In Fällen, wo eine Antwort nie richtig empfangen wird, kann der Browser weiterhin blockieren, bis die Anfrage das Zeitlimit überschritten.
Wenn Sie denken, dass Ihre Situation Sync-Modus erfordert, ist es wahrscheinlich Zeit zu überdenken Ihrem Design. Nur sehr wenige (wenn überhaupt) Situationen tatsächlich benötigen Ajax-Requests im Sync-Modus.

Optimieren Sie Bilder

Optimierung bedeutet einfach, indem Sie die Größe des Bildes klein, die Qualität von Bild, auf das erforderliche Niveau. Es gibt viele Verfahren, die einmal durchführen können, um Bilder zu optimieren, bevor sie sich auf dem Server für die Auslieferung geladen werden. Die Werkzeuge, die wir verwenden für die Erstellung dieser Bilder (Photoshop, Fireworks usw.) haben in der Regel Werkzeuge, die es Benutzern, um das Bild für die Verwendung im Web optimieren können.
• Überprüfen Sie die GIF zu sehen, ob sie mit einer Palette Größe entsprechend der Anzahl der Farben im Bild sind. Wenn ein Bild mit 4 Farben und eine Farbpalette mit 256 Farben, dann wird das Bild könnte noch weiter optimiert werden

• Umwandlung von GIF in PNG ist, wo möglich und sehen, ob es eine Einsparung. Mehr als oft nicht, gibt es. Zögern Sie nicht, von PNG verwenden, da sie vollständig von den meisten gängigen Browsern unterstützt werden. Erwarten Sie von den Animationen möglich, eine PNG tun, was ein GIF tut, einschließlich der Transparenz kann.

• Für die Bilder in CSS-Sprites verwendet, ordnen Sie die Bilder im Sprite horizontal wie vertikal führt in der Regel eine kleinere Dateigröße entgegengesetzt. Außerdem kombinieren Bilder mit ähnlichen Farben in einem Sprite. Dies hilft Ihnen, die Farbe Zählung niedriger, im Idealfall unter 256 Farben so in einem PNG8 passen.

• Wenn Sie eine favicon.ico sind, halten sie kleine, vorzugsweise unter 1K.

Verwenden Sie richtig skaliert / verkleinerte Bild.

Versuchen Sie immer, und verwenden Sie Bilder in, dh nicht mit einem größeren Bild, als Sie brauchen, nur weil Sie können die Breite und Höhe in HTML setzen. Wenn Sie einen 100px x 100px Bild auf der Seite anzeigen möchten, dann verwenden Sie nicht eine verkleinerte Bild 200x200px.

Verwenden Sie den Progressive Bilder

Ein Web-Browser rendert Bilder schon progressiv. Um noch besser zu machen, speichern Sie einfach Ihre GIF-oder PNG-Bilder mit dem "Interlaced"-Option, oder Ihre JPEG-Bilder mit der "progressive"-Option.

Es gibt anhaltende Debatte unter den Web-Benutzer, ob die Nutzung von Progressive-Bild ist ein Segen oder ein Hindernis. Auch ein fortschrittliches Image wiegt ca. 20% mehr als ihre nicht progressive Gegenstück. Also, Wenn Sie glauben, Layout verwendet Bilder, die nicht behindern die User-Experience durch wobei es progressive wird, fühlen Sie sich frei, dies zu tun.