Ga izražava

Ponovno Biciklizam je Buzzword U web razvoj i to znači da ne razlikuje. Štedi energiju, u smislu napora!

Tijekom godina pisanja CSS i stvaranje HTML od dizajna, ja sam nakon nekoliko najboljih praksi, u potrazi za uštedu vremena i energije u ono što se obično pojam kao "Re-inventing Wheel". Vrijeme i vrijeme opet, ja sam sebi rekao da moram stvoriti nekoliko predložaka, neki standardni re-korisna CSS da bih koristiti OUT okvira u mom budućem radu. Iako nije u potpunosti, ali sam uspio ostvariti neke ciljeve.

U daljnjem, ponovno korištenje CSS, morao sam pogledati nekoliko CSS okvirima koji su obično dostupni nama i odlučili staviti ih na korištenje, kao što su to pokušao i testirani i stvorio mnogo iskusnih developera, tada sebe. Što je još važnije "IZBJEGAVATI RE-OSMIŠLJANJE".

Iako je poznato da veterana, pokušao sam da pero neki ključni koncepti / najbolje prakse / misli da je otišao u stvaranju takvih okvira, kako bi RE-BICIKLIZAM CSS moguće. Nadam se da će to pomoći oko CSS razvijatelja koji su samo o to i nedavno ukrcali CSS bandwagon!

Tipke Re-biciklističke CSS:

Koristite konvenciji imenovanja

To mora biti najvažniji faktor u izradi CSS / HTML ponovno koristiti. Davanje u skladu imena elemenata stranice omogućuje ponovno korištenje stranice komponenti i njihovih stilova s ​​malo ili promjenama. U skladu s tim argumentom, čak i HTML5, u veliku promjenu promjene tijekom svojih prethodnika, je predstaviti neke strukturne oznake viz. <article>, <section>, <header>, <aside> i <nav> [ Što će HTML5 donijeti? ]. Čak i uz HTML 4 (ili manje), najbolje je da spomenemo standardne dijelove stranici consistanly kao u jednostavnom primjeru u nastavku ...

Zapamtite, većina stranice na svoj projekt, završiti imaju iste osnovne elemente. Prepoznaju ove zajedničke elemente stranice osnovne ....

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

Ponovno postavljanje zadane stilove (CSS Resetiranje): Bilo da koristite okvir ili pisati svoj ​​vlastiti, morate CSS Vraćanje [ Što su CSS Resetiranje? ], kao što su smanjiti ili eliminirati ponekad vizualne nedosljednosti koje se pojavljuju između različitih preglednika. U jednostavnim riječima Mehanizam CSS Reset postavlja stilova HTML element na nula ili null vrijednosti, od tuda glavne nikakve vrijednosti zadani preglednik oni svibanj poza. To daje čistu škriljevca za postavljanje svojstva tih elemenata praznina bilo User-Agent [Zadane CSS2.1 Korisnički Agent style sheet Defaults ]. Svi CSS okviri nemaju od reset mehanizma. Ako pišete vas vlastiti CSS Vraćanje, riječ oprez je da ako vam se dogoditi da zaboravite resetirati ključnu imovinu, to bi moglo dovesti do cross-preglednika pitanjima, koji su vrlo teško za ispravljanje. Sjeti se, zadržati kopiju ponovno postavljanje stilova i ispustite ih u svaki novi projekt koji ste stvorili.

  tijelo, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  unaprijed, oblik, fieldset, ulaz, odaberite, tekstualno polje,
  p, blockquote, stol, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Postavljanje zadane (osnovne stilovi) na elemente:

Nakon što ste postavili (na nulu ili NULL) zadane vrijednosti pojedinih atributa određenih HTML elemenata, potrebno je primijeniti neke stilove diljem svakom slučaju tih elemenata. Ovo zadana postavka može se razlikovati po dizajnu ili prema najbolje prakse koje pratite.

Većina CSS okviri, uvijek uvodi neke nove zadane, osim resetiranja stilova zadani preglednik.
Ti se ispuni prazninu u User-Agent (Zadane uklonio je CSS Reset), te će biti dosljedni u cijeloj preglednicima.

Zapamtite, Osnovni stilovi koriste za postavljanje stilova koji će se koristiti dizajn širok. npr..

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

Sažetak HTML stilovi za zajedničke dijelove i zajedničke razredi:

Najveći projekt koji se sastoji od nekoliko stranica imat će zajedničke HTML elementi preko Web stranica, npr. neke vrste obrazaca, upozorenja i pogreške, Custom pučanstvo, LightBoxes itd. Budući da su takve komponente se ponovo preko projekata, to će biti korisno za pružanje skup klasa povezanih s prethodno definiranih stilova za tih komponenti i možete uštedjeti puno vremena.

Osim definiranja reusable definicije stilova za HTML zajedničkih komponenti, mogli bismo apstraktne klase stilova koji se odnose na tipografiji, boje ili čak izgleda. Ja sam obično koristite ... zajedničke klase poput Clearfix i Font08 i FontGrey i AlignL i DisplayB itd.

  Obrazac za ulaz {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; visina: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 Obrazac tekstualno polje {border: 0px; background: # FFFFFF; boja: # 000000; font-size: .9 em; line-height: 1.5em; overflow: vidljivi;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {jasna: i;}
 . Divider {border-top: 1px solid # 647B06, granični dna: 1px solid # 9CC00A, visina: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: centar}
 . Floatr {float: right;}. Floatl {plovak: lijevo;} 

Popravci uobičajenih preglednika Igra riječima

Različiti preglednici provesti CSS kod i osigurati različit stupanj podrške za CSS specifikacijama. Rezultat toga .... "Browser" quirks, da smo programeri napustili kako bi se borila. Napose, IE6 proganja najviše CSS kodera s roka u susret. Dobra vijest je iskustvo okupio moguće reusable popravke na ova pitanja (često nazvao kao CSS Hacks ).

Sjeti se, zadržati te hack / popravci ruci

  / * Slijedeće zoom: 1 pravilo je posebno za IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Prvo dijete + html clearfix {
           zoom: 1;
      } 

Držite Pročišćavanje Vaše CSS

• Navika ponovno biciklizam neće doći k vama u dan. Potrebno je razvijati. Tako planirati Ponovno Biciklizam. Imajte to na umu da biste mogli sažetak zadane stilove, tipografija definicije, planovi, HTML element Stilovi itd. Pokušajte razmišljati unaprijed.
• Također pogledali u posljednjih projekata, to će vam pomoći identificirati stilove koji imaju tendenciju da koriste često preko porjects. Sažetak njega.
• Uklonite sve nekorištene stilove. Ova praksa će zadržati svoje CSS okvir od čest simptom pod nazivom "bloating" -
• Uklonite ponavljaju stilova.
• Izgradite skup stilova koji su dovoljno fleksibilan da ga port preko projekata.

Pogled na CSS okvira

Konačno. Ako ste inspirirani i namjeravam koristiti jedan ili više okvira CSS, evo brzo je popis nekoliko popularnih one ....

• 960 Grid sustav : 960 Grid sustav je nastojanje da se usmjeri web development workflow pružanjem najčešće korištene dimenzije, na temelju širine 960 piksela. Postoje tri varijante: 12, 16 i 24 stupaca, koji se mogu koristiti zasebno ili u kombinaciji. Misao ništa što ne možete stvoriti za svoju vlastitu lako dovoljno, okvir predviđa grid predloške za ispis u PDF formatu, koji se može koristiti da se skicira svoju stranicu designs.Bet, to bi profesionalni dojam, ako nosite nekoliko listova kada idete na klijenta za UI zahtjeva skupu. Ona također pruža osnovne grid predloške za popularne dizajn softvera kao što su vatromet, Flash, InDesign, Illustrator, Photoshop, Visio, i sl. pružajući "starter za deset" da započne svoj rad na dizajnu.
• Nacrt : Nacrt daje izrazito razvrstane CSS datoteke za resetira, rešetke, obrasce, tisak, tipografije, dodatka za gumbi, kartice i sprites itd. To također pruža podršku za IE kao zasebna su.
• SenCSs : Za razliku od gore dva, SenCSs (izgovara smislu), ne mora CSS definicije za prijelom. To ne uključuje fontove, paddings, marže, tablice, popise, zaglavlja, blockquotes, obrasce i još mnogo toga.
• BlueTrip : Njegov izvorni tvrde da slave bio je to, to je kombinacija najboljih mogućnosti koje pruža drugim ostalih okvira kao što su Blue print, putovanja Oli ... od gdje se dobiva svoje ime. Njegova značajka set uključuje 24-stupca mreže, Tipografija stilu, ORM stilova, tisak, gumbe itd.
• YUI Rešetke : Doveo do vas Mreže Yahooo Developer, podržava tekućinom širine (100%) izgleda kao unaprijed fiksne širine izgleda na 750px i 950px i 974px i sposobnost da se lako prilagoditi na bilo koji broj. Kao što možete vidjeti, prosjeku, tehnički samo izgled komponente. YUI je također pružio HTML / CSS kompleta za druge elemente stranice
• YAML (još jedna Multicolumn Layout)
• Emastic

Ne zaboravite, korištenjem CSS okvira ne znači da ste lijeni stvoriti jedan od vlastite ... To znači da ste pametni da uče od drugih iskustva i pogreške, uštedjeti vrijeme i povećati produktivnost!!

S mojim ograničenim vještina skupa s alatima kao što su Photoshop i ilustrator, ja mogu iskreno priznati da sam bolji programer od mene dizajner. Ali moja pozadina s jezgrom (server side) razvoj s Java / PHP / COBOL, bio je vrlo pozitivan utjecaj na razvoj korisničkog sučelja svojim vještinama. Ono što hoću reći je, uz stvaranje moje dizajne, tj. kad god trebam učiniti dizajn, mislim o tome kako dizajn može se najbolje pretvoriti u HTML-CSS-a dok radi HTML-CSS, dajem misao o backend tehnologije i čine razumno sigurni da je HTML možete lako primijeniti u XSL petlje ili PHP isječke, itd.

Tijekom godina, ja sam bio bačen glavu na nacrtima UI dizajnera koji su vjerojatno donot imaju pojma što je HTML ili CSS. Sve ove godine sam razmišljao da ću tražiti previše, ako ja samo očekujem dizajner, koji pokušava shov njegov "nemoguće koda" dizajn niz moje grlo, shvatiti samo malo što je njegov dizajn bi se pretvoriti u. To bi pomoglo zar ne?

Zatim, JA je došao preko ovaj post danas ... web dizajnera koji ne mogu kod ... Hvala Gospodine! Ja sam samo jedan od mnogih koji se osjećaju isto ... iznad artitle je malo dugo daha .. ali vrijedan čitanja, svaka riječ o tome.

Hvala Elliotovih Jay dionice ... Osjećam olakšanje!

Ovdje je nekoliko izvadaka iz Elliots članka .

Wow, što je dan! Počelo je s jednim malim cvrkut, a završio s raspravom koja se činilo da pomete preko cijelog web dizajn zajednice. Čini se da su neki vrlo jaki mišljenja se drže na temu je li web dizajnera trebao biti u mogućnosti koda.
...
Dakle, prije nego što smo dobili u to, dopustite mi da brzo rekapitulacija onoga što sam rekao je jutros na Twitter:

Iskreno, ja sam šokiran da je u 2010 Ja sam još uvijek dolaze preko "Web dizajnera 'koji ne mogu kod svoje vlastite dizajne. Nema isprika.

Ja bi trebao ... bili malo precizniji u mom cvrkut. Ja sam govorio o dizajnera koji nemaju ni osnovne HTML i CSS vještine za uključivanje stan dizajn u stvarni stranice. Ne ljudi koji namjerno izabrati da ne, kod onih koji ne mogu. I ja sam također odnosi samo na front-end kod ovdje, naravno da je smiješno da mislim da dizajneri također bi trebali biti iznenađujuće back-end programera ...

Mi smo dobili 'dizajn Web je poslao u Illustrator, 300dpi, koje je nemoguće koda, ne dosljednost / upotrebljivosti.
~ Amy Mahon

To je sve kasno, a ja sam dobio da zamotate ovaj gore nekako. Znam da će mnogi koji se ne slažu sa mnom, a moja namjera nije uvrijediti ili uznemiriti nikoga tko ne može kod, ali nadam se da su neki od ono što sam rekao odražava neke od točaka koja uvijek dolaze kad delving ta rasprava.

Na kraju dana, ja ne izgubiti bilo koji spavaju oko toga tko može kodirati i koji ne mogu. Ja sam samo istinski iznenađen pronaći toliko dizajnere da nedostaju vještine front-end, kao što sam mislio da je to stvar prošlosti.

Također pročitajte komentare, bilo je oko 320 komentara, kao i pisati ... oni su vrijedan čitanje.
Molimo Vas pročitajte Elliots cijeli post ovdje .. Web dizajneri koji ne mogu kod

Jučer, nakon pitanja naišla sam sa CSS resetira u Google Chrome ... mislio sam kopati malo dublje u području User Agent Style Sheets ...
Pronađeno ovu tablicu na zadane vrijednosti CSS2.1 User Agent Style Sheets za ... za one koji su svjesni što "Suradnik Agent Style Sheets" je slijediti Što je User Agent Style Sheets (Specifikacija) .

Za potpuni popis CSS 2.1 User Agent Style Sheets zadane kliknite ovdje

Jučer, kao i svaki drugi "Dan svinja Igralište", radila sam na nekim CSS / tableless izgleda. Sve ide dobro u IE 7 i FF 3 i Chrome, sve dok odjednom, vidio sam neki un-ignorable margine vidjeti samo u Google Chromeu. Iako je vrlo čudno i worring, to je neki novi bug / problem koji sam naići, došlo je konačno neki začin u moj zemaljski rad. Sad (ali lijepa) je dobio određen u roku od nekoliko minuta od sonde ...

Uglavnom, to je izgledalo kao Google Chrome ignorira moje CSS Vraćanje (margin: 0px). To je zapravo bio uzrokovan stylesheet korisničkog agenta (-webkit-padding-start: 40px). Dakle, rješenje je vratiti taj stil postavljanjem padding: 0 čudno ponaša se elementi.
Dobar način da se spriječi ovaj problem iz događa na bilo koji element je koristiti globalnu CSS ostatka kako slijedi

* {Margin: 0; padding: 0;}

Što je to User Agent Style Sheets (Specifikacija)?
Sljedeći izvadak je preuzet iz http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , slijedite link za čitanje više o Korisničke Sheets Agent Style

CSS 1 uvodi ideju tvrdeći da svaki korisnik agent (UA, često 'web preglednik "ili" web klijenta) će imati list Default Style koja predstavlja dokumente u razumnom - ali vjerojatno zemaljski - način. CSS 2 kaže da sukladna korisnički agenti moraju primijeniti list zadani stil (ili se ponašaju kao da jesu) i da je korisnik agenta Default Style sheet bi trebao predstaviti elemente dokumenta jeziku na način da zadovoljavaju opće prezentacijske očekivanja dokumenta jeziku; CSS 3 je vjerojatno da će biti od istog uma.

Budući da su CSS specifikacije ostavite ga do implementacije li koristiti "pravi" style sheet za zadani prikaz ili ne, to nije iznenađujuće da ne možete pronaći list zadani stil u svakom preglednika instalacijskoj mapi. Za razliku od Microsoft Internet Explorer, kao i Opere, na primjer (i koliko ja znam), Gecko preglednici kao Firefox i Netscape Navigator (pogledajte "html.css"), ali i Konqueror, a čine ga jednostavno shvatiti svoju zadani styling.

Ni ja sam jako novi u korisničko sučelje (UI) razvoja niti sam veteran i kao što sam uvijek stavi, ja uklapaju u profil UI developer više nego dizajner, bez žaljenja. Oh dobro! Što sam pisao o? Za neko vrijeme ... (mora biti u godinama nije bilo manje) Sada, svaki sada i onda kada ja to dobiti u malo UI dizajn (kada je profesionalni dizajner je otišao na odmor), ja uvijek ne mogu prestati razmišljati je li moj dizajn bi trebao biti ispravno complient ili ne (iskreno, ne da sam mogao dostići 100 posto sukladnost standardima, ako sam htio previše). Tada sam reći, ono što sranje! ... Dizajn bi trebao biti jednostavan, lijep i prije svega čini korisna, to ne bi trebao posjetitelji pobjeći ... ili odbijaju (će biti tehnički). Koje dobro bi lijepo tableless CSS layout biti posjetitelja, koji je nesvjestan svega pametne hiperteksta i kaskadno style sheet pod kožu vašeg web stranicu ... Zilch!
Trebao bi izgledati lijepo i biti jednostavan za korištenje ... onda dolazi sve standarde stvari.

Ja stumbbled Preko ovu blogu Jason Fried od 37 signala (za one koji nisu svjesni 37 signali su onces koji su stvorili neki strašan web aplikacije kao što su stanište i Logorska vatra i sl.) koji su napisali nešto slično u 2004 i, vjerujte mi, gotovo pet godina i nije puno promijenilo od kako ... Bio sam sretan da pročitate njegov post, kao što sam potpuno slažu s onim što on ima za reći i također je činjenica, ona nije siguran o tome što govori o njegovoj samo njegov crijevo osjećaj i tako je moja

Jason Fried: "Postoji način previše govoriti o CSS i XHTML i standarda i dostupnosti, a ne dovoljno govori o ljudima. CSS i standardi Sukladno Šifra su samo alati - morate znati što treba graditi s ovim alatima. Super, drago mi je tvoj UI ne koristi tablice. Pa što? Koga briga ako to još uvijek ne dopušta ljudima postići svoje ciljeve. Web standardi su super, ali ljudi vlastiti standardi uključuju dobivanje stvari učinio (i to je još uvijek previše teško za napraviti on-line).

UI dizajneri čine isti stari temeljni "zaboravlja čovjeka na drugoj strani" greške - osim tog vremena njihov broj izgleda bolje. - Ljudi ne kod validators - korištenje sučelja ".

Checkout Jason Fried o Cijeli članak

DISCALIMER: To ne znači da mi ne bi trebali zamarati o standardima na sve. Standardi su dobro imati i držati ih što je više moguće. Mi samo moramo shvatiti da je dobar dizajn korisničkog sučelja ne znači uvijek 100 posto norme Complience ili obrnuto ....

Iz mog popisa moje naučene lekcije, pratim nekoliko UI dizajn i razvoj Golden pravilima ... Heresu TOP 10 ... nije da morate slijediti ih previše ...

1. Vodite brigu o svojim korisnicima. Korisnici mogu učiniti ili break Vaše web lokacije. DONOT napraviti korisnički izgleda kao ukupne idoit, potpuno nesposobnom za korištenje Vaše web stranice. To je loše!

2. Držite jednostavnosti i lakoće Koristite svoje primarne Upute. Previše stvari na zaslonu, veća je vjerojatnost da će korisnik dobiti zbunjeni ili omesti iz izvornom zadatku.

3. Biti u granicama ... DONOT upuštati previše u upotrebljivosti, dostupnost i standardima. Koristite standarde učinkovito i učiniti ih shvatiti u timu. Ovo će osigurati pravo dosljednost u proizvodu

4. Prototip zahtjev. Budući da, ovih dana Koristi Sučelja su bogati, prototipova uvijek je bolje nego samo to da se jednostavne wireframes, a potonji je u nedostatku pristojne interakcija, to će uspjeti osigurati klijentu jasnu sliku o konačnom proizvodu koji se razvija. Uvijek je lakše pretvoriti prototipova u posljednjih rezultata. Također! s prototipa bilo interakcija pitanja mogla biti opeglati out ranije u razvojnom ciklusu.

5. Dosljednost u svoj ​​dizajn i interakcija je vrlo važno. Donot brkati vaš korisnički interakcije s nepredvidljivim i Gizmos.

6. Razumjeti svoje "izjava dizajna Mission". Prospekti fokusirati na primarne djelovanje stranice beign dizajniran. Također, provjerite popis svojih seconday akcija na stranici, te ih prioritete.

7. Osigurati odgovarajuće povratne informacije za korisnike web-mjesta. Uz većinu web stranice dizajnirane oko AJAX, pružiti vizualne znakove za korisnika o promjenama na stranici. Korisnik mora dati potvrdu o završetku zadatka bilo je obavlja. Donot bi korisnik čekati i pogoditi, npr. osigurati napredak pokazatelja za datoteke uplaods.

8. Koristite kontrole na odgovarajući način. Za npr. korištenje Odaberite padajući popis za male popise samo donot da korisnik odabere jedan od 200 gradova koji koriste odaberite polja. Razumjeti razliku između gumba i link. Vode i gumb imaju različite svrhe, donot koristiti jedan za drugoga. Osigurati pravo kontrole kako bi u interakciji s stranica lakše. Izbjegavajte korištenje izbornika, koji su više od dvije razine duboko. Ne reinvent točak. Koristite standardne kontrole, prilagoditi ih samo ako je vrlo potrebno. Definiranje prilagođenih kontrola potrebne za Vaše web lokacije iz prve ruke, tako da bi mogli biti izrađen i testiran samostalno, spreman za uporabu Preko stranice.

9. Donot ponoviti previše o dizajnu. Ne zaboravite! Cijeli proizvod sastoji više da je dizajn sama. Izgraditi odgovarajuće rokova u svoj raspored projekta za dizajn iteracija i staviti na njega. Iteracija pomaže nam pronaći ono što funkcionira, a što ne, pokupiti iz nevolje spotova. Kao što je dobro sučelje potrebno je vrijeme, daju vremena za ponavljanje na početku razvojnog ciklusa, tako da dizajn iteracija izravno doesnot ravnati se prerađuje. Previše prerađuje mogao jeopradize rokove.

10. Sjediti leđa i razmišljajte kao korisnika ponekad.

Jeste li vidjeli animoto.com? Dobro! to nije AD, stvarno sam ga voljela! i to je Kiss Ass sučelje doista

JA je došao preko ove stranice prije nekoliko tjedana. Vidio prvu stranicu, ulegnuće smetaju puno. Za mene, to je samo još jedna stranica s nekim bogatim Flash sadržaje, omogućujući korisnicima da uploadati slike, odaberite neku pjesmu i pretvoriti ga u lijepoj slike slajdova. Preuzmite FLV, i stavio ga na bilo kojem mjestu po Vašem izboru (YouTube, Metacafe, Facebook i voli) ... RAZDOBLJE.

Jučer kad sam vidio unutarnje toka stranice, koji su se korisniku kroz stvaranje ovog slideshow .... Otišao sam OH WOW! Kada sam shvatila da nije bilo malo FLASH koristiti. To je doista bogato korisničko sučelje. Svi UI programeri moraju težiti stvoriti ili barem biti dio tima koji je učinio ovo sučelje .... Apsolutno sjajan! I inspirativno!

Imati pogledati KB http://animoto.com/~~HEAD=dobj ... i registrirati i igrati s njim ... tek onda možete cijeniti genij.

Kad sam pročitao ovaj članak na A List Apart " Faux Apsolutno pozicioniranje
Eric Sol ", ja sam bio ništa manje nego impresioniran. Također sam bio depresivan majorly, uzrokuju, iskreno sam se pitate, zašto ne mogu sam došao gore sa nešto, jer to nevjerojatan.

Obično, kada smo stvorili CSS rasporeda, mi koristimo "Položaj" ili "pluta", ili vrlo lošu kombinaciju oboje. Eric Sol i njegov tim definirati uz savršenu tehniku ​​novog tipa CSS izgleda tehnike, koje su kršten kao "promašaj apsolutno pozicioniranje" nakon promašaj stupaca tehnike koji simulira prisutnost stupcu.

Znate taj problem svih nas CSS programeri su s dezintegrativnih izgleda (neočekivane promjene sadržaja koji uzrokuju cijeli stupce folijom, kada koristimo plutalo izgleda) ... dobro! Čini povijest!!
Ovaj raspored je tehnika još uvijek vrlo mlad i mora otpad od strane svih onih CSS guruima vani, prije nego što postane un napisao standard. Drago mi je da ga koristiti ODMAH! ... I ja sam već u sredini pretvoriti svoje ranije problematična / plutajući UN-a nužno izgleda u FAP izgleda već ... i drago mi je reći "mi već koriste promašaj apsolutno pozicioniranje za ovaj blog, kao i" ... GO probati, ODMAH!

Eric čast!

Više DOM elementi na stranici, to čini sporije, sporije je DOM pristup u JavaScript-a. Velik broj DOM elemenata mogu biti posljedica loše dizajn izgled. Na primjer, ugniježđena tablica mogao koristiti za izgled svrhe. Koristite bilo koji HTML oznake gdje se ima smisla semantički. Za npr. DONOT koristiti tablice za layouts, ali DONOT slobodno ih koristiti, gdje imate za prikaz tabličnim podacima, a time će se koristiti smanjiti DOM elemenata, u usporedbi sa sličnim strukture stvorene korištenjem samo DIVs ..

Da bi testirali broj DOM elemenata u HTML stranici, samo upišite sljedeće u firebuga u konzolu: document.getElementsByTagName('*').length

Ne postoji standardni set kako mnogi DOM elementi su previše. Provjerite druge slične stranice koje imaju dobar markup.Eg. Yahoo! Početna Stranica je prilično zauzet stranica i još uvijek u 700 elemenata (HTML tagovi).

Koristite dobiti za AJAX zahtjeva

Utvrđeno je da prilikom korištenja sučelja XMLHttpRequest, POST se provodi u preglednicima kao dva koraka: Slanje zaglavlja prvi, a zatim šalje podatke. Tako da je najbolje koristiti GET, koji traje samo jedan TCP paket poslati (osim ako imate puno kolačića). Maksimalna duljina URL u IE je 2K, pa ako vam poslati više od 2K podataka koje možda neće biti u mogućnosti koristiti GET.
Zanimljivo je da strane utjecati POST zapravo bez objavljivanja bilo podataka ponaša kao GET. GET je namijenjen za dobivanje informacija, tako da ima smisla (semantički) na korištenje dobiti kada ste samo traži podatke, za razliku od slanja podataka biti pohranjena strani poslužitelja.

Izbjegavajte Sinkronizirani AJAX poziva

Prilikom "AJAX" zahtjeve, možete odabrati bilo Async ili sync način. Async način pokreće upit u pozadini dok su drugi preglednik aktivnosti mogu dalje obrađivati. Sync mod će čekati zahtjev da se vrati prije nego što nastavite.
Zahtjevi s sync modu treba izbjegavati. Ovi zahtjevi će uzrokovati preglednik lock up za korisnika, dok upit vraća. U slučajevima kada je poslužitelj zauzet i odgovor traje neko vrijeme, korisnikov preglednik (a možda i OS) neće dopustiti da bilo što drugo što treba učiniti. U slučajevima gdje je odgovor nikada nije ispravno primili, preglednik može nastaviti blokirati sve dok je zahtjev isteklo.
Ako mislite da je vaša situacija zahtijeva usklađivanje rada, to je najvjerojatnije vrijeme da se ponovno mislite da je vaš dizajn. Vrlo je malo (ako ih ima) situacija zapravo zahtijevaju AJAX zahtjeva u sync modu.

Optimizirajte slike

Optimizacija jednostavno znači čuvanje veličinu slike Small čuvanje kvalitetu slike na potrebnoj razini. Postoje hrpe postupaka koji se obavljaju jednom optimizirati slike prije nego što su učitani na poslužitelju za isporuku. Alati koje smo koristili za izradu tih slika (Photoshop, Fireworks itd.) obično imaju alate koji omogućuju korisnicima da optimizirati slike za web uporabu.
• Provjerite GIF-a da vidi da li su pomoću palete veličina odgovara broja boja u slici. Kad je slika pomoću 4 boje i 256 paletu boja, a zatim slika bi mogla biti dodatno optimiziran

• Pretvoriti GIF PNG je da je gdje je to moguće i vidjeti postoji li ušteda. Više nego često ne, postoji. Ne ustručavajte se koristiti u PNG-a, kao i oni u potpunosti podržava većinu najčešće korištenih preglednika. Očekivati ​​od animacijskim sposobnostima PNG može učiniti ono što ne GIF, uključujući i transparentnost.

• Za slike se koriste u CSS sprites, organizirati slike u sprite vodoravno u odnosu na vertikalno obično rezultira manjom veličinom datoteke. Također, kombinirati slike sa sličnim bojama u sprite. To vam pomaže u boji grof nisko, idealno u 256 boja, tako da stane u PNG8.

• Ako koristite favicon.ico, neka bude mala, poželjno je ispod 1K.

Koristite ispravno skalirati / promijeniti velicina slike.

Uvijek pokušajte koristiti mijenjati slike, tj. ne koristite veću sliku nego što je potrebno samo zato možete postaviti širinu i visinu u HTML-u. Ako vam je potrebna da bi se prikazao 100px X 100px sliku na stranici, onda ne koristite skraćena 200x200px slike.

Koristite progresivne slike

Web preglednik već čini Slike progresivno. Da biste to učinili čak i bolje, jednostavno spremite GIF ili PNG slike sa "interlaced" opciju, ili svojim JPEG slika s "Progressive" opciju.

Tu je u tijeku rasprava među web korisnicima da li korištenje progresivnog slika je blagoslov ili smetnja. Također progresivna slika teži oko 20% više nego njegov kolega ne progresivnog. Dakle, ako mislite da izgleda koristi slike koje neće odgoditi korisničko iskustvo je progresivan, slobodno to učinite.