BT ifade

Re-Bisiklet Buzzword ve Web Geliştirme hiçbir farklı anlamına gelir. Bu çaba açısından, enerji tasarrufu!

CSS yazma ve tasarımlar HTML yaratma yıl içinde, ben "Yeniden icat Wheel" olarak biz bunlara vadede ne zaman ve enerji tasarrufu peşinde, birkaç iyi uygulamaları takip etmiştir. Zaman ve tekrar tekrar, benim gelecekteki çalışmalarında KUTUSU DIŞI kullanacağı bazı standart yeniden kullanılabilir CSS, birkaç şablon oluşturmak gerektiğini, kendimi anlattım. Tamamen değil de ama bazı hedeflerine ulaşmak için başarmıştı.

Ileriye yılında, CSS Yeniden Kullanım, kendimi daha bizim için yaygın olarak mevcuttur ve bu denenmiş ve test edilmiş ve çok deneyimli geliştiriciler tarafından oluşturulan olarak bunları kullanmak için koymaya karar verdim birkaç CSS çerçeveler bir göz vardı. Daha da önemlisi "yeniden icat KAÇININ".

Gazilere ortak bilgi, ben kalem çalıştık rağmen bazı temel kavramları / en iyi uygulamalar / CSS RE-BİSİKLET mümkün kılmak için, bu çerçeveler oluştururken gitti düşünceleri. Bu sadece yaklaşık ve son zamanlarda CSS çoğunluğa bindik bazı CSS geliştiriciler yardımcı olacağını umuyoruz!

Keys CSS Re-bisiklet:

İsimlendirme kullanın

Bu CSS / HTML yeniden kullanılabilir yapımında en önemli faktör olmalıdır. Sayfa öğeleri tutarlı isimleri verilmesi veya çok az değişikliklerle sayfası bileşenlerine ve bunların stilleri yeniden kullanımını sağlar. Bu argüman doğrultusunda, bile HTML5, selefine göre önemli bir değişiklik değişikliği, bazı yapısal etiketler yani tanıtmaktır. <article>, <section>, <header>, <aside> ve <nav> [ HTML5 neler getirecek? ]. Hatta HTML 4 (veya daha düşük) ile, o consistanly Aşağıdaki basit örnekte olduğu gibi sayfanızın standart bölümleri adlandırmak için en iyisi ...

Unutmayın, proje üzerinde çoğu sayfaları, aynı çekirdek yapı elemanları sahip bitirmek. Bu ortak temel sayfa öğeleri tanımlamak ....

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

Standart Stiller (CSS sıfırlar) Reset: Bir çerçeve kullanmak veya kendi yazmak ister CSS sıfırlar sağlamalıdır [ CSS sıfırlar nelerdir? ], onlar azaltmak veya bazen çeşitli tarayıcılar arasında meydana görsel tutarsızlıkları ortadan kaldırmak gibi. Basit bir deyişle CSS Sıfırlama Mekanizması böylece bu pozlar herhangi bir tarayıcı varsayılan değerleri geçersiz kılma, sıfır veya boş değerler HTML Element stilleri ayarlar. Bu herhangi bir User-Agent Varsayılanları bu unsurları void [özelliklerini ayarlamak için bir mazisi temiz sağlar CSS2.1 User Agent Style Sheet Varsayılanları ]. Tüm CSS çerçeveler sıfırlama mekanizması var. Eğer kendi CSS sıfırlar yazıyorsanız, dikkatli bir kelime bir anahtar özelliği sıfırlamak için unutmak için ne ise, bu hata ayıklamak çok zor olan çapraz tarayıcı sorunları, neden olabilir olmasıdır. Unutmayın, sıfırlama stilleri bir kopyasını saklayın ve oluşturduğunuz her yeni projenin içine bırakın.

  gövde, div, dl, ol dt, dd, ul, li,
  h1, h2, h3, h4, h5, h6,
  öncesi, form, fieldset, input, select, textarea,
  p, blockquote, masa, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (Baseline Stiller) Elements:

Eğer (sıfır veya null) bazı HTML Elements belirli niteliklerin varsayılan değerleri ayarladıktan sonra, Bu unsurların her örneği üzerinde bazı stilleri uygulamak için gereklidir. Bu varsayılan ayar tasarım göre değişebilir veya sizi takip en iyi uygulamalar doğrultusunda olabilir.

En CSS çerçeveler, her zaman varsayılan tarayıcı stillerini sıfırlama ek olarak, bazı yeni varsayılan tanıttı.
Bu varsayılan User-Agent Defaults (CSS Sıfırlama tarafından götürülen) yoksun olmak, bu tarayıcılar arasında tutarlı olacaktır.

Unutmayın, Temel stilleri gidiyoruz tasarım çapında kullanılacak stillerini ayarlamak için kullanılır. ör.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 güçlü, h1, h2, h3, h4, h5, h6 {font-weight: bold;} 

Ortak HTML Bileşenleri ve Ortak Sınıflar için Özet Stilleri:

Gibi bileşenler projeler arasında tekrar tekrar kullanıldığı için birçok sayfadan oluşan, çoğu projesi formlar, uyarıları ve hataları, Özel up'ları, lightbox'lar vb gibi bazı sıralama için site içerisinde kullanılan yaygın HTML öğeleri olacak, bir sağlamak için faydalı olacaktır bu bileşenler için önceden tanımlanmış stillerle ilişkili sınıflar seti ve kendinizi çok zaman kaydedebilirsiniz.

Dışında yaygın HTML bileşenleri için yeniden kullanılabilir stilleri tanımları tanımlayarak, biz soyut tarzlarda sınıflar tipografi, renk, hatta düzeni ile ilgili olabilir. Kendimi kullanmak eğilimindedir ... Clearfix, Font08, FontGrey, AlignL, DisplayB vb gibi ortak dersleri

  form girdi {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 şeklinde textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em; line-height: 1,5 em; taşması: görünür;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . {Clear: both;} clearfix
 . Bölücü {border-top: 1px solid # 647B06; border-bottom: # 9CC00A 1px solid; height: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: sağ}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Ortak tarayıcı tuhaflıklar için Düzeltmeler

Çeşitli tarayıcılar CSS kodunu uygulamak ve CSS özellikleri için destek değişen düzeyde sağlamak. Bunun sonucu .... Biz geliştiriciler mücadele bırakılması gerektiğini "Tarayıcı olağandışı". Özellikle, IE6 karşılamak için bir son tarih ile en CSS kodlayıcıları ziyaret ediyor. İyi haber deneyimi bu konuları (Sıklıkla olarak adlandırılan birlikte mümkün REUSABLE düzeltmeleri getirdi olan CSS Hacks ).

Unutmayın, bu Hacks / düzeltmeleri el altında tutun

  / * Aşağıdaki zoom: 1 kuralı IE6 + IE7 içindir.  * /
    * Html. Clearfix,
    *:. First-child + html clearfix {
           zoom: 1;
      } 

Sizin CSS Rafineri tutun

• Yeniden bisiklet alışkanlığı günde size gelmez. Bu gelişmiş zorunda. Yani Re-Bisiklete binme planlıyoruz. Eğer vb ileriyi düşünme soyut varsayılan stilleri, tipografi tanımları, Düzenler, HTML Öğesi Stiller deneyin olabileceğini bunun da akılda tutulması.
• Ayrıca, geçmiş projeler de arkana bak, sizi Keşfet Projelerinde boyunca sık sık kullanma eğiliminde stilleri belirlemenize yardımcı olacaktır. Soyut.
• Kullanılmayan stilleri çıkarın. Bu uygulama, "Şişkinlik" olarak adlandırılan ortak bir semptom sizin CSS çatısı devam edecektir -
• Tekrarlayan stilleri çıkarın.
• Projeler arasında bir bağlantı noktası için yeterince esnek stiller kümesi oluşturun.

CSS Altyapıları Bir Bakış

Nihayet. Size ilham ve CSS çerçeveler bir veya daha fazla kullanmak niyetinde iseniz, Heres birkaç popüler olanları hızlı listesi ....

• 960 Grid System : 960 Grid System 960 piksel genişliğe dayalı sık kullanılan ölçüler, web geliştirmesi iş akışını hızlandırmak için bir çabadır. Ayrı ayrı ya da tandem kullanılabilir 12, 16 ve 24 sütun: üç türevleri vardır. Eğer yeterince kolayca kendi için bir yaratamazsınız bu düşünce hiçbir şey, çerçeve bir sayfa designs.Bet taslağını için kullanabileceğiniz PDF formatında baskı için grid şablonlar sağlar, Bu size bir kaç sayfa ne zaman gidersen, profesyonel bir etki yapacak UI gereksinimleri toplamak için bir istemci gidin. Ayrıca tasarım çalışmaları başlamak için bir "on için marş" sağlayan Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, vb gibi popüler tasarım yazılımı için temel ızgara şablonlar sağlar.
• Blueprint : Blueprint belirgin sınıflandırılır CSS sıfırlar için dosyaları, Izgaralar, Formlar, Baskı, Tipografi, eklentiler düğme, sekme ve sprite vb de dahil ayrı olarak IE için destek sağlar sağlar.
• SenCSs : Yukarıdaki iki aksine, SenCSs (telaffuz Sense), Düzen için CSS tanımları yoktur. Bu yazı, vatka, kenar boşlukları, tablolar, listeler, başlıklar, blockquotes, formlar ve daha içermez.
• BlueTrip : şöhret Orijinal iddiası, bu Mavi baskı, Seyahat oli gibi diğer diğerleri çerçeveler ... o adını alır yerden tarafından sağlanan en iyi özellikleri bir arada olmasıydı. Bu özelliği ayarlamak 24-sütun ızgara, tipografi stilleri, orm stilleri, baskı, düğme vs içerir
• YUI Izgaralar : Yahooo Developer Network tarafından getirilmiştir, 750px, 950px, ve 974px de sıvı-genişliği (% 100) düzenleri gibi önceden belirlenmiş sabit genişlikli düzenleri destekler ve kolayca istediğiniz sayıda özelleştirme yeteneği. Gördüğünüz gibi, onun teknik olarak sadece düzeni Bileşenleri. YUI diğer sayfa öğeleri için HTML / CSS setleri temin
• YAML (Yet Another Multicolumn Düzen)
• Emastic

CSS çerçeveler kullanarak kendinize ait bir tane oluşturmak için tembel olduğu anlamına gelmez ... Bu size, başkalarının tecrübe ve hatalardan ders TIME ve VERİMLİLİK ARTIŞI SAVE akıllı olduğunu ima ediyor, unutmayın!

Photoshop ve Illustrator gibi araçlarla benim sınırlı beceri seti ile, ben dürüst ben bir tasarımcı daha olduğunu ben daha iyi geliştirici itiraf edebilirim. Ama çekirdek ile benim arka plan (sunucu tarafı) Java / PHP / COBOL ile kalkınma, benim UI geliştirme becerileri üzerinde çok olumlu bir etkisi olmuştur. Ben tasarımları oluştururken, demek ne, ben tasarım yapmak, yani zaman, ben HTML-CSS yaparken tasarımı en iyi HTML-CSS dönüştürülebilir ve nasıl düşünmek, ben arka uç teknoloji hakkında bir fikir vermek ve makul emin olun HTML kolayca XSL döngüler veya PHP vb parçacıkları içine uygulanabilir olduğunu

Yıllar içinde, muhtemelen donot HTML ya da CSS ne bir ipucu var UI tasarımcıları tarafından tasarımları üzerine kafa atılmış. Tüm bu yıllar ben sadece benim boğazına tasarım yaptığı "kod imkansız" şov çalışıyor tasarımcı, onun tasarım dönüştürülebilir ne biraz anlamak için bekliyorsanız, ben çok fazla soran olacağını düşünüyordum içine. BU sağ yardımcı olacak?

Sonra, ben bugün bu yazı üzerinde geldi ... Web tasarımcıları kim kod olamaz ... Teşekkürler Tanrım! Sadece aynı hissedenler birçok biriyim ... Yukarıda artitle biraz uzun soluklu olduğunu .. ama okuma, Her kelimeyi değer.

Elliot Jay Hisse teşekkürler ... Ben rahatladım hissediyorum!

İşte bazı alıntılar olduğu Elliots makale .

Vay, ne güzel bir gün! Bu küçük bir tweet ile başlayan ve tüm web tasarım topluluk karşısında süpürüp gibiydi bir tartışma ile sona erdi. Bu web tasarımcıları kodu mümkün olup olmayacağını konusunda yapılan bazı çok güçlü görüşler var görünür.
...
Bu içine girmeden önce Yani, beni çabucak Twitter'da bu sabah yaptığı açıklamada, ne recap izin:

Dürüst olmak gerekirse, 2010 yılında yine kendi tasarımları kodu edemiyor 'web tasarımcıları' üzerinden geliyorum ki şok oldum. Hiçbir bahane.

... Benim tweet biraz daha spesifik olmam gerekirdi. Ben gerçek bir site içine düz bir tasarım açmak için bile en temel HTML ve CSS becerileri yok tasarımcılar bahsediyordu. Kasıtlı kodu tercih insanlar; kim yapamaz o. Ve ben de burada sadece ön uç kod bahsediyorum, tabii ki bu tasarımcıları da şaşırtıcı back-end programcılar olmalıdır düşünmek çok saçma ...

Biz kod imkansız Illustrator, 300dpi gönderilen 'web' tasarımları, hiçbir tutarlılığı / kullanılabilirlik olsun.
~ Amy Mahon

Geç oldu, ve ben bir şekilde bu kadar tamamlamayı var. Benimle aynı fikirde olan birçok olacak biliyorum ve benim niyetim kod yapamam kimseye hakaret veya üzgün değil, ama ben söylediklerinizi bazı delving her zaman gelip noktalarından bazılarını yansıtır umuyoruz Bu tartışmanın.

Günün sonunda, ben kod ve kim yapamaz kişiler üzerinde herhangi bir uyku kaybetmek istemiyorum. Ben sadece gerçekten bu geçmişe ait bir şey olduğunu düşündüm olarak, ön uç beceri eksikliği pek çok tasarımcı bulmak için şaşırıyorum.

I yazmak olarak da Yorum okuyup, yaklaşık 320 yorum vardı ... Bir okuma değer onlar.
Elliots tam yazı burada okuyun .. kodu edemiyor Web tasarımcıları

Dün Google Chrome CSS sıfırlar karşılaşılan sorunu sonra ... Ben User Agent Style Sheets alanında biraz derinlemesine kazma düşündüm ...
CSS2.1 User Agent Style Sheets ... (ne "User Agent Style Sheets" habersiz olanlar takip etmek için varsayılan değerler üzerinde bu tablo Bulundu User Agent Style Sheets (Özellikler) nedir .

CSS 2.1 User Agent Style Sheets varsayılan tam bir listesi için buraya tıklayın

Dün, her "Ground Hog Günü" gibi bazı CSS / tablosuz düzenleri üzerinde çalışıyordu. Tüm IE 7, FF 3 ve Chrome iyi gidiyordu, untill aniden, bazı un-yoksayılabilir marjları yalnızca Google Chrome görülen gördüm. Çok garip ve worring rağmen, Ben yüceltilmesidir geldiğini bazı yeni hata / sorun oldu, benim sıradan çalışma bazı baharat nihayet vardı. Sad (ama güzel) bu sonda birkaç dakika içinde düzeltildi ...

Google Chrome, benim CSS sıfırlar (: 0px margin) ihmal gibi Temelde gibiydi. Aslında stil kullanıcı arayüzüne (-webkit-dolgu-start: 40px) neden oldu. 0 hatalı elemanları: Peki çözüm dolgu ayarlayarak bu tarz sıfırlamak oldu.
Herhangi bir elemanı oluyor bu sorunu önlemek için iyi bir yolu aşağıdaki gibi küresel bir CSS istirahat kullanmaktır

* {Margin: 0; padding: 0;}

User Agent Style Sheets (Özellikler) nedir?
Aşağıdaki alıntı alınır http://meiert.com/en/blog/20070922/user-agent-style-sheets/ User Agent Style Sheets hakkında daha fazla okumak, takip bağlantı

Ama belki sıradan - - CSS şekilde her biri 1 User Agent (UA, çoğunlukla bir 'web tarayıcısı' veya 'web istemci') makul belgeleri sunan bir varsayılan stil sayfasına sahip olacağını belirterek fikrini getirir. CSS 2 ki uyumlu kullanıcı arayüzleri varsayılan bir stil sayfası uygulamak gerekir (ya da yapsaydım gibi davranan) ve bir kullanıcı arayüzünün öntanımlı biçembent belge dili için genel sunum beklentilerini karşılayacak şekilde belge dilinin unsurlarını gerektiğini söylüyor; CSS 3 aynı düşüncede olması muhtemeldir.

CSS özellikleri bir "gerçek" tarzı varsayılan görüntü için levha veya kullanılıp kullanılmayacağını uygulamaları için o kadar bırakın bu yana, her tarayıcının yükleme klasöründe varsayılan stil sayfasını bulamazsanız bu şaşırtıcı değil. Microsoft Internet Explorer'ın yanı sıra Opera farklı olarak, örneğin (ve bildiğim kadarıyla), Firefox ve Netscape Navigator ("html.css" arayın) değil, aynı zamanda Konqueror gibi Gecko tarayıcı varsayılan stil kavramak oldukça basit olun.

Ne ben, Kullanıcı Arayüzü (UI) gelişimi için çok yeni duyuyorum ne de ben bir usta ve ben her zaman dediği gibi, ben pişmanlık duymadan, daha bir tasarımcı daha UI geliştirici profiline uygun. Eh Oh! Ben ne yazıyordu? Ben UI Tasarım (profesyonel tasarımcı tatile gittiğinde), biraz içine almak ne zaman ... Bir süre için her şimdi ve sonra, şimdi (herhangi bir daha az değil yıl olmalı), hep edemiyorum benim tasarım gerektiği olmadığını düşünüyorum düzgün uyumluydu olabilir ya da olmayabilir (içtenlikle ben de istedim,% 100 standartlarına uygunluk başarmak olabilir değil). Sonra kendi kendime söylediğim, ne saçmalık! ... Tasarımı (teknik olarak) ziyaretçi kaçmak yapmak ... ya da sıçrama değil, basit, güzel ve öncelikle kullanışlı görünüyor olmalıdır. Güzel bir tablosuz CSS düzeni tüm akıllı HİPER METİN ve web sayfanızın deri altında Cascading Style Sheet habersiz olan ziyaretçi, ... Zilch için ne iyi olurdu!
Bu, güzel görünmek ve kullanımı kolay olmalı ... sonra standartlara şeyler tüm geliyor.

Ben yüceltilmesidir Jason Fried, bu blog girişi stumbbled 37 Sinyaller 2004 yılında benzer bir şey yazdı ve neredeyse 5 yıl, inan bana (farkında 37 sinyalleri Basecamp, Campfire vb gibi bazı harika web uygulamaları yarattık onces değildir olanlar için) ve çok bu yana değişmiş değil ... Ben tamamen söylemek zorunda ve ona, onun sadece kendi hislerime hakkında anlattıklarını hakkında emin gerçek değildir ne katılıyorum olarak ben, görevinden okumak için mutlu olduğunu ve bu yüzden benimdir

Jason Fried: "Orada bir yol CSS ve XHTML ve Standartlar ve Erişilebilirlik hakkında konuşmak çok fazla olduğunu ve yeterli sayıda insan hakkında konuşmak değil. CSS ve Standartlarına Uyumlu Kod sadece araçlardır - Bu araçları ile inşa bilmek zorunda. Harika, ben senin UI tabloları kullanmak değildir sevindim. Öyleyse ne yapmalı? Hala insanların hedeflerine ulaşmak izin kimin umurunda. Web standartları büyük, ama insanların kendi standartlarını şeyler (ve bu online yapmak hala çok zor) yapılan alıyorum içerir.

UI tasarımcıları yapıyoruz aynı eski temel hatalar ", diğer tarafta insanı unutarak" - kendi kod daha iyi görünüyor bu sefer hariç. İnsanlar - yok kodu doğrulayıcılar - Kullanım arayüzleri ".

Ödeme Jason Fried tam makale

DISCALIMER: Bu hepimiz standartları hakkında rahatsız olmamalı anlamına gelmez. Standartları olan ve mümkün olduğunca onlara sopa iyidir. Biz sadece bu iyi UI tasarım anlamak gerekir her zaman% 100 Standartları complience veya tam tersi anlamına gelmez ....

Benim dersler listemde, ben bir kaç UI Tasarım ve Geliştirme Altın Kuralları ... Heres TOP 10 izleyin ... sen de onları takip yok ki ...

1. Kullanıcıların bak. Kullanıcıların yapmak veya sitenize zarar verebilir. Kullanarak web sitenize bütünüyle aciz bir toplam idoit gibi kullanıcı bakmak, yapmak etmemektedir. Yani kötü olur!

2. Basitlik tutun ve birincil ışık tutmaktadır Kullanım Kolaylığı. Ekranda çok şey var, daha yüksek bir kullanıcı karışık veya orijinal görev uzaklaşmayınız ihtimali.

3. SINIRLARI olun ... donot KULLANILABİLİRLİK, erişilebilirliği ve standartları içine çok fazla şımartmak. Etkili standartları kullanın ve onları ekibine anlatabilmiş. Bu ürün kıvamında sağlayacaktır

4. Gereksinimi Prototip. Beri kullan Arayüzleri ZENGİN olan bu gün, Prototipleme her zaman sadece basit wireframes yapmak daha iyidir ve ikincisi iyi etkileşimler geçersizdir, istemci geliştirilmektedir nihai ürünün net bir görüntü elde etmek için başarısız olur. Her zaman, bu son teslim içine prototip dönüştürmek için daha kolaydır. Ayrıca! prototip ile herhangi bir etkileşim sorunları daha önceki gelişim döngüsünde gidermesinden olabilir.

5. Tasarım ve etkileşim içinde Tutarlılık çok Önemlidir. Öngörülemeyen etkileşimleri ve Gizmos ile kullanıcı karıştırmayın etmemektedir.

6. Için "Tasarım Misyonu" anlayın. Hazır Sonuçlar tasarlanan sayfa beign birincil eylem odaklanın. Ayrıca, sayfada Seconday eylemlerin bir listesini yapın ve bunları öncelik.

7. Site kullanıcılarının uygun geri bildirim sağlayın. AJAX etrafında tasarlanmış web sitelerinin çoğu, sayfa değişiklikler hakkında kullanıcıya görsel ipuçları verir. Kullanıcı o yapar herhangi bir görevin tamamlanmasını bir onay verilen zorundadır. Kullanıcı bekleyin ve örneğin için, sanırım yapmak etmemektedir. Dosya uplaods için ilerleme göstergeleri sağlar.

8. Uygun kontrolleri kullanın. Örneğin Kullanım için sadece, donot kullanıcı seçme kutularını kullanarak 200 şehirlerinden biri seçmesine izin küçük listeleri için açılan listesinden seçin. Bir düğme ve bir bağlantı arasındaki farkı anlayın. Bir bağlantı ve düğme farklı amaçlara sahip, donot diğeri için birini kullanın. Bir sayfa daha kolay etkileşim yapma hakkı kontrolü sağlayın. Menüler kullanmaktan kaçının, o daha iki düzeyde derin vardır. Tekerleği yeniden icat etmeyin. Onları sadece çok gerekli ise özelleştirmek, standart denetimlerini kullanın. Yarattıkları ve kullanım yüceltilmesidir sitesi için hazır, bağımsız test edilebilir, böylece sitenizin ilk el için gereken her türlü özel denetimler tanımlayın.

9. Donot tasarım üzerinde çok fazla yineleme. Unutmayın! Tüm ürün başına daha o tasarımı oluşur. Tasarım tekrarlamaları için proje programınıza uygun zaman çizelgeleri oluşturun ve ona sopa. İterasyon bizimle çalışıyor ve ne, sorun noktalarını ortaya çıkarmak değil ne olduğunu bulmak için yardımcı olur. Güzel bir arayüz zaman alır gibi, tasarım tekrarlamaları doğrudan rework denk etmediğinden, böylece geliştirme döngüsünün başında yineleme için zaman sağlar. Çok fazla rework tarihleri ​​jeopradize olabilir.

10. Arkanıza yaslanın ve bazen bir kullanıcı gibi düşünün.

Eğer animoto.com gördünüz mü? Eh! Bu AD değil, ben çok beğendim! ve bu gerçekten ASS UI Öp edilir

Birkaç hafta önce bu sitede rastladım. Ilk sayfasında gördüm, çok rahatsız kuvvetiyle. Benim için, kullanıcılar, resim yüklemek bazı parça seçmek ve güzel bir resim slayt gösterisi haline dönüştürmek için izin, bazı zengin Flash içerikleri ile sadece başka bir site oldu. FLV indirin, ve seçtiğiniz herhangi bir site (YouTube, Metacafe, Facebook ve seviyor) ... DÖNEM üzerine koydu.

Dün ben bu slayt gösterisi oluşturma yoluyla kullanıcının aldı iç akışı sayfaları görünce .... Ben WOW OH gitti! Ben FLASH kullanılan bit yok olduğunu görünce. Gerçekten Zengin Kullanıcı Arayüzü oldu. Tüm UI geliştiriciler oluşturmak için talip veya en azından bu arayüz yaptı ekibin bir parçası olmalıdır .... Kesinlikle parlak! Ve Inspiring!

BİR GÖZ ... VAR http://animoto.com/ ... ve kayıt ve onunla oynamak ... sadece o zaman dahi takdir edebilirsiniz.

Ben A List Apart bu makaleyi okuyun " Faux Mutlak Konumlandırma
Eric Sol tarafından , "Ben IMPRESSED başka bir şey değildi. Ben de neden majorly depresyona girmiştim, dürüst ben merak ediyordum, neden bu kadar muhteşem bir şey ile gelip edemem.

Genellikle, biz CSS düzenleri oluştururken, biz "POZİSYON" veya "Batmaz", ya da her ikisinin çok kötü bir arada kullanabilirsiniz. Eric Sol ve ekibi bir sütunun varlığı taklit sahte sütun tekniği sonra "Faux Mutlak Konumlandırma" olarak vaftiz olan CSS düzeni tekniği, yeni bir tür mükemmel tekniği yanında tanımlayabilirsiniz.

Bize CSS geliştiricileri tüm dağılmakta düzenleri (biz yanaşık düzen kullanmak şal Tüm sütunları neden beklenmeyen bir içerik değişiklikleri) ile olan sorunu biliyoruz ... Eh! Tarih görünüyor!
Bir un yazılı standart hale gelmeden önce bu düzeni tekniği, hala çok genç ve orada tüm bu CSS uzmanları tarafından çöpe atılan zorundadır. ŞİMDİ kullanmak için mutluyum! ... Ve zaten FAP düzeni içine benim daha önceki sorunlu / kayan un-mutlaka düzenleri dönüştürme ortasına zaten am ... ve söylemekten memnunum "biz zaten bu yanı blog sitesi için Faux Mutlak Konumlandırma kullanıyor" ... ŞİMDİ, deneyin GO!

Kudos Eric!

Sayfada daha fazla DOM öğeleri, yavaş bu işler, yavaş JavaScript yıllarda DOM erişim. DOM elemanlarının sayısının yüksek olması nedeniyle kötü bir düzen tasarımı olabilir. Örneğin, iç içe geçmiş tablolar düzeni amaçlar için kullanılan olabilir. Anlamsal mantıklı herhangi bir HTML Tag kullanın. Düzenleri için Örnek donot kullanım tabloları için, ama donot sekmeli veri görüntülemek için sahip olduğu bunları kullanmakta tereddüt ve dolayısıyla DIV'leri sadece kullanılarak oluşturulan benzer bir yapı için, karşılaştırma, DOM öğelerini azaltmak kullanacağız ..

HTML sayfanıza DOM eleman sayısını test etmek için, sadece Firebug'ın konsolunda aşağıdaki komutu yazın: document.getElementsByTagName('*').length

Çok kaç DOM öğeleri olarak belirlenmiş herhangi bir standart yoktur. Iyi markup.Eg sahip diğer benzer sayfaları kontrol edin. Yahoo! Ana Sayfa oldukça meşgul sayfası ve hala altında 700 elemanları (HTML etiketleri).

AJAX İstekleri için GET kullanın

Veri göndermek ve ardından birinci başlıkları gönderme: bu XMLHttpRequest kullanılırken, SONRASI iki adımlı bir işlem olarak tarayıcılar uygulanmaktadır olduğu tespit edilmiştir. Yani GET, sadece (çerezlerin bir sürü var) göndermek için bir TCP paket aldığı kullanmak en iyisidir. IE URL maksimum uzunluğu 2K veri daha gönderirseniz böylece GET kullanmak mümkün olmayabilir, 2K olduğunu.
Ilginç bir yan etkisi aslında herhangi bir veri GET gibi davranır ilanıyla olmadan bu POST. GET bilgi almak içindir, bu yüzden size sadece sunucu tarafında saklanabilir veri gönderirken aksine veriler, talep ederken GET kullanmak mantıklı (semantik) yapar.

Senkron AJAX Aramalar kaçının

"Ajax" isteklerini yaparken, uyumsuz veya senkron modu da seçebilirsiniz. Diğer tarayıcı etkinlikleri işlemeye devam edebilir ederken async modunda arka planda isteği çalışır. Sync modu devam etmeden önce dönmek isteği için bekleyecek.
Senkron modu ile yapılan istekler kaçınılmalıdır. Bu istekler isteği geri dönene kadar kullanıcı için kilitlemek tarayıcı neden olur. Durumlarda sunucu meşgul ve cevap, kullanıcının tarayıcısı (ve belki OS) bir süre alır nereye yapılacak başka bir şey izin vermeyecektir. Bir yanıt düzgün almadım durumlarda, tarayıcı istek zaman aşımına kadar engellemeye devam edebilir.
Eğer durum senkron modu gerektiren düşünüyorsanız, bu sizin tasarımını yeniden düşünmek için en olası zamanıdır. (Varsa) Çok az durum aslında senkron modunda Ajax istekleri gerektirir.

Görüntüler Optimize

Optimizasyon basitçe istenen düzeyde görüntü kalitesini koruyup görüntü küçük boyutu tutmak anlamına gelir. Kez onlar teslimat için sunucuya yüklenen önce görüntüleri optimize etmek için yapabilir prosedürlerin yükler vardır. Biz (Photoshop, Fireworks vb) bu ​​görüntülerin oluşturulması için kullandığınız araçları genellikle kullanıcıların web kullanımı için görüntü optimize etmek için izin araçlar var.
• Bu görüntüdeki renk sayısına karşılık gelen bir palet boyutu kullanıp kullanmadığınızı görmek için GIF en edin. Bir görüntü 4 renk ve 256 renk paleti kullanırken, daha sonra görüntü daha da optimize edilmiş olabilir

• Convert GIF, PNG kullanarak mümkünse için var ve bir tasarruf olup olmadığını görmek. Çoğu zaman, yoktur. Onlar tam sık kullanılan tarayıcıların çoğu tarafından desteklenen olarak, PNG kullanmanız için tereddüt etmeyin. PNG saydamlık dahil, bir GIF ne yapabilirim animasyon yetenekleri bekliyoruz.

• CSS sprite kullanılan görüntüler için, sprite gibi yatay olarak daha küçük bir dosya boyutunda dikey olarak genellikle sonuç karşıt görüntüleri düzenleyebilirsiniz. Ayrıca, bir sprite benzer renge sahip görüntüler birleştirir. Bu nedenle ideal bir PNG8 sığacak şekilde 256 renk altında, renk sayısı düşük tutmanıza yardımcı olur.

• Bir favicon.ico kullanıyorsanız, tercihen 1K altında, küçük tutmak.

Düzgün ölçeklenir / resim yeniden boyutlandırılmıştır kullanın.

Her zaman denemek ve boyutlandırılmış görüntüleri kullanmak, yani size HTML genişlik ve yükseklik ayarlayabilirsiniz sırf ihtiyacınız olandan daha büyük bir resim kullanmayın. Eğer sayfada 100px X 100px görüntü görüntülemeniz gerekiyorsa, o 200x200px görüntü küçültülmüş bir kullanmayın.

Aşamalı Görüntüler kullanın

Bir web tarayıcısı zaten giderek Görüntüler vermektedir. Daha iyi yapmak için, sadece "ilerici" seçeneği ile "interlaced" seçeneği, ya da JPEG ile GIF ya da PNG görüntüleri kaydetmek.

Ilerici görüntülerinin kullanımını bir lütuf ya da bir engel olup olmadığı gibi web kullanıcıları arasında devam eden tartışmalar vardır. Ayrıca ilerici bir görüntü onun olmayan ilerleyici meslektaşı göre yaklaşık% 20 daha fazla ağırlığa sahip. Eğer düzen ilerici olmanın kullanıcı deneyimi engel olmayacak görüntüleri kullanan düşünüyorsanız Yani, bunu yapmak için çekinmeyin.