Väljendades IT

Re-cycling on Buzzword ja Web Development see tähendab, ei erine. See säästab energiat, nii vaeva!

Aastate jooksul kirjalikult CSS ja luua HTML alates projekteerib, olen jälginud paari häid tavasid, et saavutada säästa aega ja energiat, mida me tavaliselt perspektiivis "Re leiutada". Ikka ja jälle olen ma ütlesin endale, et pean looma mõne malle mõned standard korduvkasutusega CSS et tahaksin kasutada karbist minu tulevase tööga. Kuigi mitte täielikult, kuid ma ei suutnud saavutada teatud eesmärke.

Edendamisele, Re-Use of CSS oli mul pilk mõned CSS raamistikku, mis on tavaliselt meile kättesaadav ja otsustasin panna neid kasutada, sest need on ära proovitud ja loodud palju kogenud arendajad, kui mina. Veelgi olulisem on "vältida uuesti leiutamine".

Kuigi üldteada, et veteranid, olen püüdnud pen mõned põhimõisted / häid tavasid / mõtted, mis on läinud luua nende raamistike, teha Re-cycling CSS võimalik. Loodan, et see aitab mõned CSS arendajatele, kes on lihtsalt umbes ja hiljuti peatatud CSS bandwagon!

Keys taasringluseks CSS:

Kasuta nimepanekureeglid

See on kõige olulisem tegur teeb CSS / HTML korduvkasutatavad. Pidada järjekindlalt nimesid leheelemente võimaldab taaskasutamist lehe komponendid ja nende stiilid vähe või muudatusi. Vastavalt sellele väitele Isegi HTML5, kaasa olulisi muutusi muutuste üle oma eelkäijatega on tutvustada struktuuriabi sildid nimelt. <article>, <section>, <header>, <aside> ja <nav> [ Mis HTML5 tuua? ]. Isegi HTML 4 (või väiksem), siis on parem nimetada standard osa oma lehele consistanly nagu lihtne näide allpool ...

Pea meeles, Most lehekülgedel projekti lõpuks sama core konstruktsioonielemendid. Nimetage need ühisosa leheelemente ....

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

Nulli vaikestiilid (CSS Taastab): Kas te kasutate raamistiku või kirjutada oma, peate andma CSS Taastab [ Mis on CSS Taastab? ], sest need vähendavad või mõnikord kaotada visuaalseid vastuolusid, mis tekivad erinevate brauseritega. Lihtsaid sõnu CSS Reset mehhanismi määrab stiilid HTML Element null või null väärtusi, seega ülekaalukat kõigi brauseritega vaikeväärtused võivad kujutab. See annab puhtalt lehelt määrata omadused nende elementide void iga User-Agent Defaults [ CSS2.1 User Agent Style Sheet Defaults ]. Kõik CSS raamistikku ei ole ja reset mehhanism. Kui te kirjutate te oma CSS Taastab, Hoiatuseks, et kui juhtub, et unustada taastada oluline vara, see võib põhjustada piiriülese brauser küsimusi, mis on väga raske siluda. Pea meeles, et hoida koopia reset stiile ja vähendada nende iga uue projekti loote.

  keha, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  eelnevalt, vorm, fieldset, sisend valige, textarea,
  p, blockquote, laud, th, td
  {
    piiri: 0px;
    margin: 0;
    padding: 0;
  } 

Määra Defaults (Baseline Styles) elementidele:

Kui olete seadnud (null või null) vaikeväärtused teatud talle teatud HTML elemendid, on vaja rakendada teatud stiile üle igal juhul neid elemente. Need vaikimisi võib varieeruda ühe disaini või vastavalt parimate tavade te järgite.

Enamik CSS raamistikku, alati tuuakse välja uusi vaikimisi, lisaks ennistamist vaikebrauser stiile.
Need vaikimisi on tühine User-Agent Defaults (kooritud kaugusel CSS Reset), need on järjepidevad brauseritega.

Pea meeles, Baseline stiile kasutatakse, et määrata stiilid, et ei kavatse kasutada disaini kogu. nt.

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

Abstract Styles ühise HTML komponendid ja ühise klassid:

Enamik projekt koosneb mitmest leheküljest on ühine HTML elemendid, mida kasutatakse kogu saidi jaoks nt Mingi vorme, teadete ja vigade Custom hüpikaknad, Valguskastid jne Kuna selliseid komponente kasutatakse jälle üle projekte, siis on kasulik anda kehtestatud klasside seotud eelmääratletud laadid nende osad ja saad ise salvestada palju aega.

Lisaks määratletakse korduvkasutatavad stiilide definitsioonid ühise HTML komponendid, võiksime abstraktse stiili klassid seotud tüpograafia, värvi või isegi kujundus. Ma ise tavaliselt kasutate ... tavalist liiki nagu Clearfix, Font08, FontGrey, AlignL, DisplayB jne

  vormi input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; kõrgus: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 vormi textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: 0,9 em, line-height: 1.5em; overflow: nähtav;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {selge: nii;}
 . Jagaja {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; kõrgus: 0px;}
 . Displayb {kuva: block;}. Displayn {kuva: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Parandused levinud brauser quirks

Erinevad brauserid rakendada CSS kood ja pakkuda erineva tasemega toetus CSS spetsifikatsioonid. Selle tulemusena .... "Browser quirks", et me arendajad on jäänud lahendada. Eriti IE6 kummitab kõige CSS coders koos tähtaega täita. Hea uudis on see kogemus on koondatud võimalikult KORDUV fikseerib neile küsimustele (sageli nimetatakse nii CSS Hacks ).

Pea meeles, hoida neid hacks / parandused mugav

  / * Järgmised zoom: 1 reegel on spetsiaalselt IE6 + IE7.  * /
    * Html. Clearfix,
    *: 1.-laps + html. Clearfix {
           zoom: 1;
      } 

Hoidke rafineerimine Sinu CSS

• Harjumus taasringluseks ei tule teile päevas. See on arenenud. Nii et planeerida oma Re-cycling. Pidage seda meeles, et sa võiksid abstraktne vaikimisi stiile, tüpograafia mõisted, kujundus, HTML Element stiilid jne Püüdke mõelda.
• Ka vaadata tagasi oma varasemate projektide, see aitab välja selgitada stiile, et sa kalduvad kasutama sageli üle porjects. Abstract ta.
• Kustuta kõik kasutamata stiile. Seda tava hoida oma CSS raamistikku alates tavalisem sümptom nimega "puhitus" -
• Kustuta korduv stiile.
• Ehitamine komplekt stiilid, mis on piisavalt paindlik, et sadamasse ta üle projekte.

Pilk CSS raamistike

Lõpuks. Kui teil on inspireeritud ja kavatsete kasutada ühte või mitut CSS raamistikku, Heres on kiire nimekirja mõned populaarsed ones ....

• 960 Grid süsteem : 960 Grid System on tahet ühtlustada veebiarendust töövoo andes sagedamini kasutatav mõõtmed, mis põhineb laius 960 pikslit. On kolm varianti: 12, 16 ja 24 veergu, mida saab kasutada eraldi või paralleelselt. Mõte midagi, et te ei saa luua ühe oma lihtsalt piisavalt raamistik pakub grid malle prindi PDF-formaadis, et üks saate visandada oma lehele designs.Bet, oleks professionaalne mulje, kui kannad mõned lehed kui lähete klient UI nõuetele kogumisega. Samuti pakub see põhiline grid malle populaarne projekteerimise tarkvara nagu Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio jne pakkudes "starter 10", et alustada oma disaini tööd.
• Blueprint : Blueprint annab selgelt klassifitseeritud CSS faile Taastab, võrgud, Forms, Print, tüpograafia, pluginate nupud, klapid ja haldjaid jne Samuti toetab IE eraldi lisada.
• SenCSs : Erinevalt eespool 2, SenCSs (hääldatakse Sense), ei ole CSS määratlused paigutus. See sisaldab fonte, paddings, veerised, tabelid, loendid, päised, blockquotes, vormid ja palju muud.
• BlueTrip : Selle algse nõude kuulsus oli, et see oli kombinatsioon parimaid omadusi, mida teised teised raamistikud, nagu Blue print, Trip Oli ... kust saab oma nime. Selle funktsiooni komplekt sisaldab 24-veerus grid, tüpograafia stiile, ORM stiile, print, nööbid jne
• YUI Võred : Toodud teile Yahooo Developer Network toetab vedeliku-laius (100%) paigutust, samuti eelnevalt fikseeritud laiusega paigutusega on 750px, 950px ja 974px, ja võime hõlpsasti kohandada mis tahes number. Nagu näete, tehniliselt lihtsalt paigutus komponendid. YUI olemas ka HTML / CSS komplekti teiste leheelemente
• YAML (Veel üks mitmeveerulisus Layout)
• Emastic

Pea meeles, kasutades CSS raamistikku ei tähenda, et sa oled laisk, et luua ühe oma ... See tähendab, et sa oled tark õppida teiste kogemustest ja vigadest, säästa aega ja suurendada tootlikkust!!

Minu piiratud oskuste komplekt vahendeid, nagu Photoshop ja Illustrator, võin ausalt tunnistama, et ma olen parem arendaja kui ma olen disainer. Aga minu taust core (serveripoolne) arengu Java / PHP / COBOL, on olnud väga positiivne mõju minu UI arendamise oskusi. Mida ma mõtlen on, luues samas minu designs, st kui ma ei projekteerimine, ma mõtlen, kuidas disaini saab kõige paremini ümber HTML-CSS ja tehes samal ajal HTML-CSS, ma annan mõelnud backend tehnoloogia ja teha mõistlikult kindel et HTML on võimalik kergesti üle võtta XSL silmuste või PHP pikad jne

Aastate jooksul olen visanud pea edasi disainilahendusi UI disainerite kes ilmselt donot aimugi mis HTML või CSS on. Kõik need aastad olen ma mõelnud, et ma oleks küsida liiga palju, kui ma lihtsalt oodata, disainer, kes üritab shov oma "võimatu koodi" disaini alla mu kõri, mõista natuke mida tema disain oleks ümber arvesse. Mis aitaks eks?

Siis ma leidsin selle postituse täna ... Web disainerid, kes ei saa koodi ... Tänan Lord! Ma olen lihtsalt üks paljudest, kes tunnevad sama ... eespool artitle on natuke pikk Hengästynyt .. kuid tasub lugeda, iga sõna sellest.

Tänu Elliot Jay Varud ... ma tunnen kergendust!

Siin on mõned väljavõtted elliots artikkel .

Vau, mida päev! See algas üks väike piiksuma ja lõppes aruteluga, mis tundus pühkima kogu web design kogukonnas. Selgub, et mõned väga tugevad arvamused peetud teemal, kas veebidisainerid peaks olema võimalik koodi.
...
Niisiis, enne kui me sinna, lubage mul kiiresti sulgege mida ma ütlesin täna hommikul puperdama:

Ausalt, ma olen šokeeritud, et aastal 2010 ma olen ikka tulevad üle "veebidisainerid", kes ei suuda kodeerida oma designs. Mingit vabandust.

... Ma olen olnud vähe täpsem minu piiksuma. Ma rääkisin disainerid, kes ei pea isegi kõige elementaarsem HTML ja CSS oskused omakorda korter disaini tegelik kohas. Pole inimesi, kes tahtlikult ei soovi kood; need, kes ei saa. Ja ma olen ka viidata üksnes esiotsa koodi siin, muidugi on see naeruväärne mõelda, et disainerid peaksid olema hämmastav back-end programmeerijad ...

Me saame "web" kujunduse saata Illustrator, 300dpi, võimatu koodi, puudub järjekindlus / kasutatavust.
~ Amy Mahon

Läheb hilja ja mul wrap selle üles kuidagi. Ma tean, et seal on palju, kes ei nõustu minuga ja mu eesmärk on mitte solvata või häirida kedagi, kes ei saa koodi, kuid ma loodan, et mõned, mida ma olen öelnud peegeldab mõningaid punkte, mis alati tulla, kui delving arutelu.

Aasta lõpus päeval, ma ei kaota une üle, kes suudavad koodi ja kes ei saa. Ma olen lihtsalt tõeliselt üllatunud, et paljud disainerid, et puudub esiotsa oskusi, nagu ma arvasin, et see oli minevik.

Lugege ka kommentaare, seal oli umbes 320 kommentaari, nagu ma kirjutan ... nad on väärt lugeda.
Palun lugege elliots täis postitus siin .. Web disainerid, kes ei saa koodi

Eile, pärast emissiooni Kohtasin koos CSS Taastab Google Chrome ... Ma mõtlesin kaevamine natuke sügavamale ala User Agent Style Sheets ...
Leidsin selle tabeli default väärtused CSS2.1 User Agent Style Sheets ... (neile teadmata milline "User Agent Style Sheets" on järgida Mis on User Agent Style Sheets (spetsifikatsioon) .

Täieliku nimekirja CSS 2,1 User Agent Style Sheets vaikimisi siit

Eile, nagu iga teine ​​"Ground Hog Day" Ma töötasin mõned CSS / tableless paigutusega. Kõik läks hästi IE 7, FF 3 ja Chrome, untill äkki nägin mõned un-Eiratavad marginaalid näha ainult Google Chrome. Kuigi väga kummaline ja worring, see oli mõned uued bug / küsimus, et mul oli kohanud, oli lõpuks mõned vürtsi minu Ilmalik töö. Kurb (aga kena) see sai kinnitatud mõne minuti jooksul proovivõtturi ...

Põhimõtteliselt, see nägi välja nagu Google Chrome ignoreerida minu CSS Taastab (margin: 0px). See tegelikult oli tingitud kasutaja agent stiil (-WebKit-padding-start: 40px). Nii et lahendus oli taastada seda stiili luues padding: 0 tööta elemente.
Hea viis vältida probleemi kordumist iga element on kasutada maailma CSS Rest järgmiselt

* {Margin: 0; padding: 0;}

Mis on User Agent Style Sheets (spetsifikatsioon)?
Järgmine katkend on võetud http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , järgige linki rohkem lugeda User Agent Style Sheets

CSS 1 tutvustab idee, märkides, et iga User Agent (UA, sageli "veebilehitseja" või "web klient") on default style sheet, mis esitab dokumendid mõistlik - kuid väidetavalt Ilmalik - viisil. CSS 2 ütleb, et vastava kasutaja agendid peavad kehtima default style sheet (või käituma kui nad tegid) ja et kasutaja agent vaikimisi stiili lehel peaks esitama elemendid dokument keeles viisil, mis täidavad üldist esitust ootused dokumendi keele CSS 3 tõenäoliselt sama meelt.

Kuna CSS spetsifikatsioonid jätta kuni rakendusi, kas kasutada "päris" stiil lehte kuvar vaikimisi või mitte, see ei ole üllatav, et sa ei leia default style sheet iga brauseri installi kausta. Erinevalt Microsofti Internet Explorer ja Opera, näiteks (ja niipalju kui ma tean), Gecko brauserid nagu Firefox ja Netscape Navigator (otsi "html.css"), vaid ka Konqueror oleks üsna lihtne mõista nende vaikimisi stiili.

Samuti olen väga uus kasutajaliides (UI) arengut ega ma veteran ja nagu ma alati panna, siis ma sobituvad profiili UI arendaja rohkem kui disainer, kellel ei kahetse. Oh hästi! Mida ma kirjutades? ... Mõnda aega (peab olema aastat mitte ühtegi vähem) nüüd, iga nüüd ja siis kui ma saan natuke UI Design (kui professionaalne disainer on läinud puhkusele), olen alati cant stop mõelnud, kas minu disain peaks korralikult complient või mitte (siiralt, mitte, et ma võiks achive 100% standardite järgimist, kui ma tahtsin liiga). Siis ma ütlen mina, mis jama! ... Disain peaks olema lihtne, kena ja peamiselt ilmselt kasutada ei tohiks teha külastajaid joosta ... või põrge (olla tehniline). Mis kasu oleks kena tableless CSS kujundus on külaline, kes ei tunne kõiki smart hüperteksti ja Cascading Style Sheet naha alla oma veebilehel ... Zilch!
See peaks välja nägema kena ja lihtne kasutada ... siis on kõik standardid kraam.

Ma stumbbled accross see blogi Jason Fried of 37 Signals (Neile, kes ei ole teadlikud 37 signaalid on onces, kes on loonud mõned fantastiline web apps nagu Basecamp, lõkkeplats jne), kes kirjutas midagi sarnast 2004 ja uskuge mind, ligi 5 aastat ja ei ole palju muutunud, et ... Mul oli hea meel lugeda oma ametikohale, nagu ma täiesti nõus sellega, mida ta öelda ja ka asjaolu, teda ei ole kindel, mida räägib umbes selle lihtsalt oma sisetunde ajel ja nii on minu

Jason Fried: "Seal on liiga palju rääkida CSS ja XHTML ja standardeid ning kättesaadavus ja ei piisa rääkida inimestega. CSS ja standardid vastav kood on lihtsalt tööriistad - sa pead teadma, mida ehitada nende vahenditega. Tore, mul on hea meel oma UI ei kasuta tabeleid. Mis siis? Kes hoolib, kui ta ikka ei lase inimestel saavutada oma eesmärke. Veebi standardeid on suur, kuid inimesed enda standardite hulka asju teha (ja see on ikka liiga raske teha online).

UI disainerite teevad sama vana põhiline "unustamata inimene teisel pool" vigu - välja arvatud see aeg oma koodi näeb parem välja. Inimesed - mitte kood kontrollijaid - kasutada liideseid. "

Checkout Jason Fried täielikku artikkel

DISCALIMER: See ei tähenda, et me ei hooli standarditest üldse. Standardid on hea olla ja jääda neid nii palju kui võimalik. Me ainult ei mõista, et Good UI disain ei tähenda alati 100% Standardid complience või vastupidi ....

Minu nimekirja minu õpitut, ma järgida mõningaid UI Design ja arendustegevuse Golden Rules ... Heres TOP 10 ... mitte, et sa pead järgima ka neid ...

1. Hoolitse oma kasutajatele. Kasutajad saavad teha ega murda saidile. Donot teha kasutaja näeb kogu idoit, täiesti võimetu kasutades oma veebilehel. See on halb!

2. Hoidke lihtsuse ja lihtne kasutada oma peamise guidlines. Liiga palju asju ekraanile, seda suurem on tõenäosus, et kasutaja saab segaduses või häirida oma esialgsest ülesanne.

3. Olema PIIRNORMID ... Donot anduma liiga palju KASUTATAVUS, ligipääsetavus ja standarditele. Kasuta standardite tõhusalt ja need mõistetakse meeskond. See tagab õige kooskõla toote

4. Prototype nõuet. Kuna nendel päevadel kasutatavad liidesed on rikas, Prototyping alati on parem kui lihtsalt tegemise lihtne wireframes ja viimane on tühine korraliku suhtlemist, siis ei anna kliendile selget pilti lõplik toode, mis on välja töötatud. Alati on lihtsam muuta prototüübid arvesse lõpptulemuste. Ka! koos prototüüpide igasuguse suhtlemise küsimusi saab lahendatud varem arengu vältel.

5. Kooskõla oma disaini ja suhtlemine on väga oluline. Donot segadusse oma kasutajale ettearvamatu vastasmõju ning Gizmos.

6. Mõista oma "Design Missioon". Kahjustavad tegurid keskenduda esmane tegevus lehele beign projekteeritud. Samuti teha nimekirja oma seconday meetmete lehel ja järjestada neid.

7. Anda asjakohane tagasiside saidi kasutajatele. Enamiku veebilehtede mõeldud umbes AJAX, annab visuaalseid vihjeid kasutaja muutusi lehele. Kasutaja on antud tunnustus Pärast iga ülesande ta täidab. Donot teha kasutaja oodata ja arvata, sest nt. pakkuda edunäitajaid faili jaoks uplaods.

8. Kasuta kontrolli sobivalt. Sest näiteks Kasuta Vali rippmenüüst nimekirja väike nimekirjad alles, donot lase kasutajal valida ühe 200 linnu kasutades valige lahtrid. Mõista erinevust nuppu ja link. Link ja nupp on erinevatel eesmärkidel, donot kasutada üks teine. Pakkuda õiget kontrolli teha, suheldes lehele lihtsamaks. Vältige menüüd, mis on rohkem kui kaks taset sügav. Ärge jalgratast leiutama. Kasutage standard kontrolli, kohandada neid ainult siis, kui väga vaja. Määratleda iga tollikontrolli vajalik saidile 1. käsi, et nad võiks luua ja katsetada sõltumatult, kasutusvalmis accross kohas.

9. Donot Käi liiga palju disain. Pea meeles! Kogu toode koosneb enam, et disain üksinda. Ehitada asjakohane ajagraafik oma projekti ajakava disain korduste ja kinni pidada. Iteratsiooni aitab meil teada saada, mis toimib ja mis mitte, noppida pingekolletes. Nagu hea liides võtab aega, anda aega korduste Alguses arendamise tsükkel, et disain korduste doesnot otse tähenda ümbertegemine. Liiga palju ümbertegemine võib jeopradize tähtajad.

10. Istu maha ja mõtle kasutaja vahel.

Kas olete näinud animoto.com? Hästi! see ei ole AD, ma tõesti meeldis! ja see on suudlus ASS UI tõepoolest

Ma leidsin selle saidi paar nädalat tagasi. Nägin esimest lehel varal vaeva palju. Minu jaoks oli see lihtsalt teisele saidile mõned rikas flash sisu, mis võimaldab kasutajatel üles laadida pilte, valige mõni lugu ja muuta selle kena pilt slideshow. Lae FLV, ja panna see kõik saidi oma valikut (YouTube, MetaCafe, Facebook ja muud sarnast) ... periood.

Eile kui ma nägin sisemist voolu lehekülgi, mis leidis kasutaja asutades see slideshow .... Läksin OH WOW! Kui mõistsin, et ei olnud natuke FLASH kasutada. See oli tõepoolest rikas kasutajaliidese. Kõik UI arendajad peavad soovivad luua või vähemalt osa meeskonda, kes on seda teinud liides .... Täiesti geniaalne! Ja inspireeriv!

Vaatame ... http://animoto.com/ ... ja registreerida ja mängida seda ... alles siis sa saad hindame geenius.

Kui ma loen seda artiklit List Apart " Faux absoluutne positsioneerimine
Eric Sol ", olin midagi vähemat kui muljet. Ma olin ka masendunud majorly põhjustada, ausalt ma mõtlesin, miks cant ma tulla midagi vapustav, kui see.

Tavaliselt, kui me loome CSS paigutust, mida me kasutame "asendis" või "KLAPID" või väga halb kombinatsioon. Eric Sol ja tema meeskond määratleda kõrval täiuslik tehnika uut tüüpi CSS paigutust tehnikat, mille nad on ristitud kui "Faux absoluutne positsioneerimine" pärast faux veergude tehnikat, mis simuleerib olemasolu veerus.

Sa tead, et probleem meie kõigi CSS arendajad on koos lagunemas paigutusega (ootamatu sisu muutused, mis põhjustavad kogu veergude wrap, kui me kasutame paisati paigutusega) ... Noh! Tundub ajalugu!!
See kujundus tehnika on veel väga noor ja peab prügikasti välja kõik need CSS spetsialistidele seal, enne kui see muutub un kirjutatud standard. Ma olen õnnelik, et kasutada seda KOHE! ... Ja olen juba arvesse keskel ümber minu varasem problemaatiline / ujuv ÜRO tingimata paigutusega sisse FAP paigutus juba ... ja olen hea meel öelda "me juba kasutate Faux absoluutne positsioneerimine selle Päevik ka" ... minge proovige seda, KOHE!

Kiitus Eric!

Rohkem DOM elementide lehel, aeglasem see muudab, aeglasem on DOM juurdepääsu JavaScript s. Suure hulga DOM elemente võib olla tingitud halb kujundus. Näiteks nested tabelit võis kasutatakse paigutamiseks. Kasutada mis tahes HTML Tag, kus on mõistlik semantiliselt. Sest näiteks Donot kasutamise tabelite paigutust, kuid Donot kartke neid, kus teil on kuvada tabelina andmed ja seega kasutab vähendada DOM elemente, võrreldes, et sarnane struktuur loodud, kasutades DIVs ainult ..

Katsetada mitmeid DOM elemente oma HTML lehekülje, kirjuta järgmised Firebug konsooli: document.getElementsByTagName('*').length

Ei ole kehtestatud standard, kui palju DOM elemendid on liiga palju. Vaata teisi sarnaseid lehekülgi, mis on hea markup.Eg. Yahoo! Home Page on üsna hõivatud lehele ja veel 700 elemendid (HTML).

Kasuta GET jaoks AJAX taotlusi

On leitud, et kui kasutate XMLHttpRequest, POST rakendatakse brauserid nagu kaheastmeline protsess: saates päised ja seejärel saadab andmeid. Nii et see on kõige parem kasutada GET, mis võtab ainult 1 TCP pakett saata (kui sul on palju küpsiseid). Maksimaalne URL pikkus IE on 2K, nii et kui sa saadad üle 2K andmed, mida ei pruugi kasutada GET.
Huvitav külg mõjutaks see, et POST ilma tegelikult postitad mingeid andmeid käitub nagu GET. GET on mõeldud allalaadimise teavet, seega on mõttekas (semantiliselt) kasutada saad, kui sa vaid teabenõudega, mitte saates säilitatavate andmete server-side.

Vältida Synchronous AJAX kutsub

Tehes "Ajax" taotlused, võite valida, kas async või sünkro. Async režiimis töötab taotlusel taustal teised brauser tegevused võivad jätkuvalt töödelda. Sünkrorezhiimi ootab taotluse tagasi enne jätkamist.
Taotlused koos sünkrorezhiimi tuleks vältida. Need taotlused paneb brauseri lukustada kasutajale kuni taotluse tagasi. Juhul, kui server on hõivatud ja vastus võtab aega, kasutaja brauser (ja võibolla OS) ei luba midagi teha. Juhul kui vastus ei ole kunagi korralikult saanud, brauser, võivad jätkata blokeerida kuni taotluse aegunud.
Kui te arvate, et teie olukord nõuab sünkrorezhiimi, see on kõige tõenäolisem aeg uuesti mõtlema oma disain. Väga vähesed (kui üldse) olukorras tegelikult vaja Ajax taotlused sünkro.

Optimeeri pildid

Optimeerimine tähendab lihtsalt seda, hoides pildi väike hoida kvaliteeti pilt vajalikul tasemel. On koormatele kord, et kui saaks teostada optimeerida pilte enne nende laadimist serverisse kättetoimetamiseks. Vahendid, et me kasutame loomine need pildid (Photoshop, ilutulestik jne) on tavaliselt vahendid, mis võimaldavad kasutajatel optimeerida pildi veebi kasutamiseks.
• Kontrollige, GIF, kas nad kasutavad palett suurus vastab värvide arvu pildil. Kui pildi kasutab 4 värvi ja 256 värvipalett, siis pilt võiks veelgi optimeeritud

• Convert GIF on PNG-s, kus võimalik ja näha, kas on kokkuhoid. Sagedamini kui ei, ei. Ärge kartke kasutada PNG-d, kui need on täielikult toetab kõige levinumaid brausereid. Oodata animatsiooni võimalusi PNG võib teha, mida GIF ei, sealhulgas läbipaistvust.

• Kui pilte kasutada CSS sprites korraldada pildid sprite horisontaalselt, mitte vertikaalselt tulemus on tavaliselt väiksema faili suurus. Ka pildi-sarnaste värvide sprite. See aitab teil hoida värvi arv väike, ideaalis alla 256 värvi, nii et mahtuda PNG8.

• Kui kasutate favicon.ico, hoida seda väikest, soovitavalt alla 1K.

Kasutage korralikult vähendanud / muudetud suurusega pildi.

Üritage ja kasutada muudetud suurusega pilte, st ei kasuta suuremat pilti, kui te vajate lihtsalt sellepärast, et saab määrata laiuse ja kõrguse HTML. Kui teil on vaja näidata 100px X 100px pilti lehel, siis ärge kasutage vähendanud 200x200px pilt.

Kasuta Progressive Pildid

Veebibrauser juba muudab pildid järk-järgult. Teha veel parem, lihtsalt salvestada GIF või PNG pildid "põimitud" võimalus või teie JPEG pilte "progressiivne" variant.

Seal on pidev arutelu seas veebi kasutajatele, kas kasutada progressiivse pilt on õnnistus või takistus. Ka progressiivne pilti kaalub umbes 20% rohkem kui oma mitte progressiivne vastutasu. Niisiis, kui te arvate, kujundus kasutab pildid, mis ei takista kasutaja kogemus, et oleks progressiivne, võid vabalt teha.