Uttrycka det

Re-Cykling är Buzzword och i webb utveckling betyder det inte annorlunda. Det sparar energi, i form av ansträngning!

Under år av att skriva CSS och skapa HTML från design, jag har följt några bästa praxis, i strävan efter att spara tid och energi på det vi vanligtvis benämner som "Re-uppfinna hjulet". Gång på gång har jag sagt mig själv att jag måste skapa några mallar, några standard återanvändbar CSS som jag skulle använda UR rutan i mitt framtida arbete. Även om det inte helt, men jag lyckades att uppnå vissa av målen.

För att främja, återanvändning av CSS, hade jag en titt på de få CSS ramar som finns allmänt tillgänglig för oss och beslutade att sätta dem att använda, eftersom dessa är beprövade och skapad av mycket erfarna utvecklare, än jag själv. Ännu viktigare "AVOID att uppfinna".

Även bekant för veteraner, har jag försökt att pennan vissa centrala begrepp / bästa praxis / tankar som har gått in i att skapa dessa ramar, för att göra återvinning av CSS möjligt. Hoppas att detta kommer hjälpa vissa CSS utvecklare som är på väg att och nyligen gick ombord på CSS bandwagon!

Nycklar återvinning av CSS:

Använd Namnkonventioner

Detta måste vara den viktigaste faktorn vid framställning av CSS / HTML återanvändbar. Att ge konsekventa namn sidelement gör återanvändning av sidan komponenter och deras stilar med liten eller modifieringar. I linje med detta argument även HTML5, i en stor förändring förändring över sina föregångare, är att införa vissa strukturstöd taggar dvs. <article>, <sektion>, <header>, <aside> och <nav> [ Vad kommer HTML5 ta? ]. Även med HTML 4 (eller lägre), är det bäst att nämna vanliga delar av din sida consistanly som i det enkla exemplet nedan ...

Kom ihåg att de flesta sidor på ditt projekt, sluta med samma centrala strukturella element. Identifiera de gemensamma drag som grundläggande sida ....

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

Återställ Standard Styles (CSS Återställer): Oavsett om du använder en ram eller skriv, måste du ange CSS Återställer [ Vad är CSS Återställer? ], eftersom de minskar eller ibland eliminera visuella inkonsekvenser som uppstår mellan olika webbläsare. I enkla ord CSS Reset mekanismen sätter stilar av HTML-element för att noll eller null-värden och därmed åsidosätter de värden som standardwebbläsare de kan poser. Detta ger en ren skiffer för att ställa in egenskaper för dessa element tomrum som användaren Agent Defaults [ CSS2.1 Användarstatistik Agent Style Sheet standard ]. Alla CSS ramar har av återställning mekanism. Om du skriver din egen CSS Återställer är ett varningens ord att om du råkar glömma att återställa en nyckel fastighet, kan det leda till cross-browser frågor som är mycket svåra att felsöka. Kom ihåg att hålla en kopia av reset stilar och släppa dem i varje nytt projekt som du skapar.

  kropp, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  pre, form, fieldset, input, Select, textarea,
  p, blockquote, tabell: e, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Ange standardinställningar (Baseline Stilar) till Elements:

När du har ställt in (till noll eller null) standardvärden för vissa attribut av vissa HTML-element, är det nödvändigt att tillämpa vissa stilar inom alla fall av dessa element. Dessa Standardinställningen kan variera per utformning eller enligt bästa praxis du följer.

De flesta CSS ramar, alltid introducerar några nya standardvärden, förutom att återställa stilar standardwebbläsare.
Dessa standard är ogiltiga av User-Agent Defaults (skalas bort av CSS Reset), kommer dessa att vara konsekvent över webbläsare.

Kom ihåg att utgångsläget stilar används för att ställa stilar som kommer att användas design-världen. t. ex.

  html {font-size: 77%, font-family: Arial, sans-serif;}
 stark, h1, h2, h3, h4, h5, H6 {font-weight: bold;} 

Abstrakta Stilar för vanliga HTML Komponenter och gemensamma klasser:

De flesta projekt som består av flera sidor kommer att ha gemensamma HTML-element som används på hela webbplatsen, för t.ex. vissa slags former, varningar och fel, personliga popups och ljusbord etc. Eftersom dessa komponenter används igen mellan projekt, kommer det vara lämpligt att ge en uppsättning klasser som är förknippade med fördefinierade stilar för dessa komponenter och du kan spara dig mycket tid.

Bortsett från att definiera återanvändbara Stildefinitioner för de gemensamma HTML-komponenter, kan vi abstrakta stilar klasser som gäller typografi, färg eller ens layout. Jag själv brukar du använda ... vanliga klasser som Clearfix, Font08, FontGrey, alignl, DisplayB etc.

  formulärdata {border: 0px; Bakgrund: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; höjd: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 formen TextArea {border: 0px; Bakgrund: # FFFFFF; color: # 000000; font-size: .9 EM, line-height: 1.5em; spill: synlig;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {tydligt: ​​båda;}
 . Divider {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, höjd: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: höger}. Alignc {text-align: center}
 . Floatr {float: höger;}. Floatl {float: left;} 

Fixar till vanliga webbläsare quirks

Olika webbläsare genomföra CSS-kod och ge varierande grad av stöd för CSS specifikationer. Resultatet av denna .... "Webbläsare Quirks", som vi utvecklare kvar att ta itu med. Speciellt spökar IE6 mest CSS kodare med en tid att passa. Den goda nyheten är erfarenheten har samlat möjliga återanvändbara korrigeringar i dessa frågor (ofta kallas CSS Hacks ).

Kom ihåg att hålla dessa hacka / korrigeringar hands

  / * Följande zoom: 1 regel är specifikt för IE6 + IE7.  * /
    * HTML. Clearfix,
    *. Första-barn + html clearfix {
           zoom: 1;
      } 

Håll förfina din CSS

• Vanan att återvinning inte kommer till dig i dag. Det måste utvecklas. Så planera din Re-Cykling. Ha detta i åtanke att du kan abstrakta defaults stilar, definitioner typografi, layout, HTML-format Element etc. Försök att tänka framåt.
• Också titta tillbaka på dina tidigare projekt kommer det att hjälpa till att identifiera format som du brukar använda ofta över porjects. Sammanfattning det.
• Ta bort alla oanvända produkter. Denna praxis kommer att hålla din CSS ramen från ett vanligt symptom som kallas "Uppblåsthet" -
• Ta bort repetitiva stilar.
• Bygg en uppsättning stilar som är flexibla nog att porta den över projekt.

En titt på CSS Frameworks

Äntligen. Om du är inspirerade och tänker använda ett eller flera av CSS ramar är Heres snabb lista på några populära ....

• 960 Grid System : Det 960 Grid System är ett försök att effektivisera arbetsflödet webbutveckling genom att tillhandahålla allmänt använda mått, baserat på en bredd på 960 bildpunkter. Det finns tre varianter: 12, 16 och 24 kolumner, vilka kan användas separat eller i tandem. Tanke ingenting som du inte kan skapa en för din egen lätt nog, ger en ram nätet mallar för utskrift i PDF-format, som man kan använda för att skissa din sida designs.Bet, skulle det göra ett professionellt intryck, om du har ett par ark när du går till en klient för UI krav på insamling. Det ger också grundläggande grid mallar för populära design program som Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. ger en "starter för tio" för att börja din design arbete.
• Blueprint : Blueprint ger tydligt klassificeras CSS-filer för Återställer, galler, formulär, Print, typografi, insticksprogram för knappar, flikar och sprites etc. Det ger också stöd för IE som en separat innehålla.
• SenCSs : Till skillnad från ovanstående två, SenCSs (uttalas Sense), inte har CSS definitioner för layout. Den omfattar teckensnitt, stoppningar, marginaler, tabeller, listor, rubriker, blockquotes, formulär och mycket mer.
• BlueTrip : Dess ursprungliga fordran till berömmelse var att det var en kombination av de bästa funktionerna som tillhandahålls av andra andra ramverk som Blue Print, Trip oli ... från där den fått sitt namn. Dess funktioner inkluderar 24-kolumnen galler, stilar typografi, stilar Orm, Skriv ut, knappar mm
• YUI Galler : Kommit med till dig av Yahooo Developer Network stödjer flytande bredd (100%) layouter samt förinställda fast bredd layouter på 750px, 950px och 974px, och möjlighet att enkelt anpassa till valfritt nummer. Som ni kan se, den tekniskt bara layout komponenter. YUI gav också HTML / CSS satser för andra sidelement
• Yaml (Yet Another flera kolumner layout)
• Emastic

Kom ihåg att använda CSS ramar innebär inte att du är lat för att skapa en egen ... Det innebär att du är smart att lära av andra erfarenheter och misstag, spara tid och öka produktiviteten!!

Med min begränsade kompetens-set med verktyg som Photoshop och Illustrator kan jag erkänna ärligt att jag är bättre utvecklare än jag en designer. Men min bakgrund med kärna (server side) utveckling med Java / PHP / COBOL, har varit en mycket positiv inverkan på min UI utvecklingskompetens. Vad jag menar är, när du skapar mina mönster, det vill säga när jag gör design, jag tänker på hur design kan bäst omvandlas till HTML-CSS och samtidigt gör HTML-CSS, ger jag en tanke om backend-tekniken och se någorlunda säker att HTML kan enkelt implementeras i XSL slingor eller PHP snippets etc.

Under åren har jag kastats huvudet på design av användargränssnitt designers som förmodligen donot har en aning om vad HTML eller CSS är. Alla dessa år har jag tänkt att jag skulle begära för mycket, om jag bara räknar designer, som försöker shov hans "omöjliga kod" designen halsen, för att förstå bara lite vad hans design skulle omvandlas till. Det skulle hjälpa rätt?

Sen kom jag över detta inlägg idag ... webbdesigners som inte kan koden ... Tack Herre! Jag är bara en av många som känner likadant ... Ovanstående artitle är lite lång omständligt .. men värt läs, varje ord av det.

Tack Elliot Jay Stocks ... Jag känner lättnad!

Här är några utdrag ur Elliots artikeln .

Wow, vilken dag! Det började med en liten tweet och slutade med en diskussion som verkade svepa över hela webbdesign community. Det verkar finns det några mycket starka åsikter som hölls på temat om webbdesigners bör kunna koden.
...
Så, innan vi kommer in här, låt mig snabbt sammanfatta vad jag skrev i morse på Twitter:

Ärligt talat, jag chockad över att år 2010 jag fortfarande komma över webb-designers som inte kan koda sina egna konstruktioner. Ingen ursäkt.

... Jag borde ha varit lite mer specifik i min tweet. Jag talade om designers som inte har ens den mest grundläggande HTML och CSS kunskaper för att förvandla en platt design till en verklig plats. Inte människor som uppsåtligen väljer att inte koden, de som inte kan. Och jag också hänvisar bara till front-end-kod här, det är naturligtvis löjligt att tro att designers bör också vara fantastiska back-end programmerare ...

Vi får "webb" design som sänds i Illustrator, 300dpi, omöjliga att koda, ingen konsistens / användbarhet.
~ Amy Mahon

Det börjar bli sent, och jag måste avsluta upp detta på något sätt. Jag vet att det kommer att finnas många som inte håller med mig, och min avsikt är inte att såra eller upprörd någon som inte kan koden, men jag hoppas att en del av vad jag har sagt reflekterar en del av de punkter som alltid kommer upp när djupdykning i denna debatt.

Vid slutet av dagen, inte förlorar jag inte någon sömn över vem som kan koda och som inte kan. Jag är bara verkligen förvånad över att hitta så många designers som saknar front-end färdigheter, som jag trodde det var ett minne blott.

Läs också kommentarerna fanns omkring 320 kommentarer, när jag skriver ... de är värda att läsa.
Läs Elliots hela inlägget här .. webbdesigner som inte kan koda

Igår, efter fråga jag stött på med CSS Återställer i Google Chrome ... Jag tänkte gräva lite djupare in i området Style användare Agent Sheets ...
Hittade denna tabell på standardvärden för CSS2.1 Style Användarstatistik Agent Sheets ... (för de ovetande om vad "Style Användare Agent Sheets" är att följa vad är User Agent Style Sheets (specifikation) .

För en fullständig lista över CSS 2.1 Style Användarstatistik Agent Ark standard klicka här

Igår, precis som alla andra "Ground Hog Day", arbetade jag på några CSS / tableless layouter. Allt gick bra i IE 7, FF 3 och Chrome, tills plötsligt såg jag några icke-försumbart marginaler bara sett i Google Chrome. Även mycket konstigt och worring, var det någon ny bugg / fråga som jag hade kommit tvärs fanns äntligen lite krydda i mitt vardagliga arbete. Sad (men trevligt) fick det fastställas inom några minuter av sonden ...

I grund och botten, såg det ut Google Chrome ignoreras min CSS Återställer (marginal: 0px). Det faktiskt orsakades av User Agent stylesheet (-webkit-padding-start: 40px). Så lösningen var att återställa denna stil genom att padding: 0 de missköter sig elementen.
Ett bra sätt att förhindra detta problem händer alla element är att använda en global CSS Rest enligt följande

* {Margin: 0; padding: 0;}

Vad är Användarstatistik Agent Style Sheets (specifikation)?
Följande utdrag är hämtat från http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , följ länken för att läsa mer om Style Användare Agent Sheets

CSS 1 introducerar idén med att konstatera att varje User Agent (UA, ofta en "webbläsare" eller "webbklient") kommer att ha en plåt standard format som presenterar dokument i ett rimligt - men utan tvekan vardagliga - sätt. CSS 2 säger att som uppfyller användaragenter skall tillämpa ett ark standard format (eller beter sig som om de gjorde) och att en user agent förvalda formatmall bör presentera de delar av dokumentet språket på ett sätt som uppfyller allmänna presentation förväntningarna för dokumentet språket, CSS 3 är sannolikt att vara av samma åsikt.

Eftersom CSS specifikationerna lämnar det upp till implementationer om du vill använda en "riktig" stilmall för standard visning eller inte, det är inte förvånande att du inte hittar ett ark standard stil i alla webbläsare installationsmapp. Till skillnad från Microsofts Internet Explorer samt Opera, till exempel (och så vitt jag vet), Gecko webbläsare som Firefox och Netscape Navigator (leta efter "html.css"), men också Konqueror att göra det ganska enkelt att förstå deras standard styling.

Varken jag är mycket nytt för användargränssnitt (UI) utveckling eller är jag en veteran och som jag alltid sätter det, jag passar in i profilen för UI utvecklaren mer än en designer, utan ånger. Oh Well! Vad var det jag skrev om? ... För ett tag (måste vara i år inte mindre) nu då och då när jag kommer in lite UI Design (när professionell designer har gått på semester), jag har alltid cant stop fundera på om min design ska vara ordentligt Kompatibel eller inte (uppriktigt, inte att jag kunde achive 100% efterlevnad av standarder, om jag ville också). Då säger jag mig själv, vad skit! ... Designen ska vara enkel, trevlig och framför allt verkar användbart, inte bör göra besökarna springa iväg ... eller bounce (för att vara tekniska). Vad skulle en fin tableless CSS-layout är att besökaren, som är omedveten om alla smarta hypertext och Cascading Style Sheet under huden på din hemsida ... Zilch!
Det ska se trevligt och vara lätt att använda ... sedan kommer alla standarder saker.

Jag stumbbled tvärs detta blogginlägg av Jason Fried av 37 Signals (För dem som inte är medvetna 37 signaler är de onces som har skapat några väldigt fräcka webbprogram som Basecamp, Campfire etc) som skrev något liknande under 2004 och tro mig, nästan 5 år och inte mycket förändrats sedan dess ... Jag var glad att läsa sin post, som jag håller fullständigt med vad han har att säga, och också det faktum är att hon inte säker på vad som är att berätta om det bara hans magkänsla och så är min

Jason Fried: "Det finns alldeles för mycket om CSS och XHTML och standarder och tillgänglighet och inte tillräckligt prata om människor. CSS och standarder följs koden är bara verktyg - man måste veta vad man ska bygga med dessa verktyg. Bra, är jag glad din UI inte använder tabeller. Så vad? Vem bryr sig om det fortfarande inte låter människor att uppnå sina mål. Webbstandarder är bra, men människors egna normer inkludera få saker gjorda (och det är fortfarande för svårt att göra online).

UI designers gör samma gamla grundläggande "glömma människan på andra sidan" misstag - utom den här gången sin kod ser bättre. Människor - inte kod validerare - användarvänliga gränssnitt ".

Kassa Jason Fried: s hela artikeln

DISCALIMER: Detta betyder inte att vi inte ska bry sig om standarder alls. Standarder är bra att ha och hålla sig till dem så mycket som möjligt. Vi har bara förstå att bra UI design betyder inte alltid 100% Standards complience eller vice versa ....

Från min lista över mina lektioner lärt följer jag några UI Design och utveckling gyllene regler ... Heres TOP 10 ... inte att du måste följa dem också ...

1. Ta hand om dina användare. Användarna kan göra eller bryta din webbplats. Donot att användaren ser ut som en total idoit, helt oförmögna att använda din webbplats. Det är BAD!

2. Håll enkelhet och Använd dina primära guidelines. Alltför många saker på skärmen, desto högre är sannolikheten att en användare kommer att bli förvirrad eller distraherad från sin ursprungliga uppgift.

3. Var inom de gränser ... inte apparaten hänge in för mycket i användbarhet, tillgänglighet och standarder. Använda standarder på ett effektivt sätt och göra dem förstås laget. Detta kommer att säkerställa rätt konsistens i produkten

4. Prototyp kravet. Eftersom dessa dagar användarvänliga gränssnitt är rika, prototyper alltid är bättre än att bara göra enkla wireframes och den senare är ogiltig om anständiga interaktioner, skulle det inte ger kunden en tydlig bild av den slutliga produkten som är under utveckling. Alltid är det lättare att omvandla de prototyper till färdiga resultat. Också! med prototyper någon interaktion frågor kunde reda ut tidigare i utvecklingscykeln.

5. Konsekvens i din design och interaktion är mycket viktigt. Donot förvirra användaren med oförutsägbara interaktioner och Gizmos.

6. Förstå din "Statement Design Mission". Aways fokusera på den primära verkan av utformad sidan beign. Se också till en lista över dina seconday åtgärder på sidan och prioritera dem.

7. Ge rätt återkoppling till byggarbetsplatsen. Med de flesta av de webbplatser som är utformade i närheten av Ajax, ge visuella signaler till användaren om ändringar på sidan. Användaren måste ges ett erkännande av genomförandet av de arbetsuppgifter han utför. Donot göra användaren vänta och gissa, för t. ex. ger framsteg indikatorer för fil uplaods.

8. Använd kontrollerna på lämpligt sätt. För t.ex. användning Välj listrutan för små listor endast donot låter användaren välja ett av 200 städer med utvalda lådor. Förstå skillnaden mellan en knapp och en länk. En länk och knapp har olika syften, donot använda en för den andra. Ge rätt kontrollen att interagera med en sida lättare. Undvik att använda menyer, som är mer än två nivåer djupt. Uppfinn inte hjulet. Använd vanliga kontrollerna, anpassa dem endast om mycket nödvändigt. Definiera anpassade kontroller som krävs för din webbplats första hand, så att de kunde skapas och testas självständigt, redo för användning tvärs webbplats.

9. Inte apparaten ITERERA för mycket på design. Kom ihåg! Hela Produkten består mer än formgivning ensam. Bygga lämpliga tidsramar i ditt projektschemat för design iterationer och hålla fast vid det. Iteration hjälper oss att ta reda på vad som fungerar och inte, plocka ut de oroshärdar. Som ett bra gränssnitt tar tid, ge tid för iterationer i början av utvecklingscykeln, så att designförändringar direkt doesnot jämställas med omarbetningar. För mycket omarbetningar kunde jeopradize tidsfrister.

10. Luta dig tillbaka och tänka som en användare ibland.

Har du sett animoto.com? Tja! detta inte är ett AD, tyckte jag verkligen det! och det är Kiss ASS UI faktiskt

Jag kom över denna webbplats för några veckor sedan. Såg den första sidan, uppkomsten bry mycket. För mig var det bara en plats med en rik Flash-innehåll, så att användarna kan ladda upp bilder, välja några spår och omvandla den till en fin bild bildspel. Ladda ner FLV, och satte den på någon plats som du väljer (YouTube, Metacafe, Facebook och de gillar) ... PERIOD.

Igår när jag såg de interna flödet sidor, som tog användaren genom skapandet av det här bildspelet .... Jag gick OH WOW! När jag insåg att det inte fanns lite blixt används. Det var verkligen ett rikt användargränssnitt. Alla UI utvecklare måste sträva efter att skapa eller åtminstone en del av det team som har gjort detta gränssnitt .... Absolutely brilliant! Och inspirerande!

TA EN TITT ... http://animoto.com/ ... och registrera sig och leka med den ... bara då kan du uppskatta geni.

När jag läste den här artikeln på A List Apart " Faux Absolut positionering
av Eric Sol ", jag var inget mindre än imponerad. Jag var också deprimerad majorly, orsaka, ärligt jag undrar, varför skränande jag kommer på något fantastisk som denna.

Vanligtvis när vi skapar CSS-layouter, använder vi "position" eller "flyter", eller en mycket dålig kombination av båda. Eric Sol och hans team definierar en intill perfekt teknik för en ny typ av CSS layout teknik som de har döpt som "Faux Absolut positionering" efter faux kolumner teknik som simulerar närvaron av en kolumn.

Du vet att problemet vi alla CSS utvecklare har med sönderfallande layouter (De oväntade innehållet förändringar som orsakar hela kolumner wrap, när vi använder flottades layouter) ... Tja! Verkar historia!!
Denna layout teknik är fortfarande mycket ung, och måste slängas ut av alla dessa CSS gurus där ute, innan det blir en un skriven standard. Jag är glad att använda den NU! ... Och är redan i mitten av konvertering mina tidigare problematiska / floating FN-nödvändigtvis layouter i FAP layout redan ... och jag är glad att säga "vi redan använder Faux Absolut positionering för denna blogg också" ... GO prova, NU!

Kudos Eric!

Fler DOM element på sidan, långsammare det gör, långsammare är DOM-access i JavaScript-talet. Ett stort antal av DOM-element kan bero dålig layoutkonstruktion. Till exempel kan kapslade tabeller har använts för layout. Använd någon HTML-tagg där är vettigt semantiskt. För t.ex. donot använda tabeller för layout, men inte apparaten tvekar att använda dem där du måste visa tabelldata, och därmed kommer att använda minskar DOM element, i jämförelse till en liknande struktur skapas med hjälp av DIV bara ..

För att testa hur många DOM element i HTML-sidan, skriv bara följande i Firebug konsol: document.getElementsByTagName('*').length

Det finns ingen som standard för hur många DOM element är för många. Kontrollera andra liknande sidor som har god markup.Eg. Yahoo! Hemsida är en ganska upptagen sida och fortfarande under 700 element (HTML-taggar).

Använd får för AJAX begäran

Det har visat sig att när man använder XMLHttpRequest är POST genomförs i webbläsare som en två-stegs process: skicka rubrikerna först, sedan skickar data. Så det är bäst att använda GET, som bara tar ett TCP-paket för att skicka (om du inte har en massa cookies). Den maximala URL längd i IE är 2K, så om du skickar mer än 2K data som du kanske inte kan använda GET.
En intressant sida påverka är att POST utan att lägga några data beter sig som GET. GET är avsedd för att hämta information, så det är klokt (semantiskt) att använda får när du bara begär uppgifter, i motsats till att skicka data som skall lagras på serversidan.

Undvik Synkrona AJAX samtal

När du gör "Ajax" önskemål, kan du välja antingen async eller synkronisera läge. Async mode driver begäran i bakgrunden medan andra webbläsare verksamheten kan fortsätta att bearbeta. Synkronisering kommer att vänta för begäran att återvända innan du fortsätter.
Framställningar som görs med synkronisering bör undvikas. Dessa önskemål kommer att orsaka webbläsaren att låsa upp för användaren tills begäran återvänder. I de fall där servern är upptagen och svaret tar en stund, användarens webbläsare (och kanske OS) inte kommer att tillåta något annat att göra. I de fall ett svar aldrig riktigt fått, kan webbläsaren fortsätter att blockera dess begäran gått ut.
Om du tror att din situation kräver synkronisering, är det högst sannolikt dags att tänka din design. Mycket få (om någon) situationer kräver verkligen Ajax framställningar i synk-läget.

Optimera bilder

Optimering betyder helt enkelt att hålla storleken på bilden mindre att hålla kvaliteten på bilden till önskad nivå. Det finns massor av metoder som en gång kan utföra för att optimera bilder innan de lastas på servern för leverans. De verktyg som vi använder för att skapa dessa bilder (Photoshop, Fireworks etc) har oftast verktyg som tillåter användare att optimera bilden för webb.
• Kontrollera GIF-talet för att se om de använder en palett storlek motsvarande antalet färger i bilden. När en bild med användning av 4 färger och en 256 färgpalett, då bilden kan ytterligare optimeras

• Konvertera GIF-talet till PNG: s där det är möjligt och se om det finns en besparing. Oftare än inte, finns. Tveka inte att använda PNG-talet, eftersom de stöds fullt ut av de flesta vanligaste webbläsarna. Förväntar sig av animation funktioner en PNG kan göra vad en GIF gör även öppenhet.

• För de bilder som används i CSS sprites, ordna bilder i spriten horisontellt i motsats till vertikalt vanligtvis resulterar i en mindre filstorlek. Även kombinera bilder med liknande färger i en sprite. Detta hjälper dig att hålla färgen räkningen låg, helst i 256 färger så att passa i en PNG8.

• Om du använder en favicon.ico, hålla det litet, företrädesvis under 1K.

Använd korrekt skalas / storlek bild.

Alltid försöka använda storleksändrade bilder, dvs inte använda en större bild än du behöver bara för att du kan ställa in bredd och höjd i HTML. Om du behöver visa en 100px X 100px bild på sidan, ska du inte använda en nedskalad 200x200px bild.

Använda progressiva bilder

En webbläsare gör redan bilder successivt. För att göra ännu bättre, helt enkelt spara GIF eller PNG-bilder med "interlaced" alternativet, eller dina JPEG-bilder med "progressiva" alternativ.

Det pågår debatt bland webbanvändare om huruvida användningen av progressiv bild är en välsignelse eller ett hinder. Också en progressiv bild väger ungefär 20% mer än sin icke progressiv motsvarighet. Så om du tror att du layout använder bilder som inte kommer att hindra användaren-upplevelse av att det är progressiv, gärna göra det.