Wyrażając

Re-jazda na rowerze jest Buzzword i rozwojem sieci oznacza to nie różni. To oszczędza energię, w kategoriach wysiłku!

Przez lata pisania CSS i tworzenie HTML z wzorów, śledzę kilka najlepszych praktyk, w dążeniu do oszczędności czasu i energii w to, co powszechnie termin jak "Re-wynajdowanie koła". Raz po raz, powiedziałem sobie, że muszę utworzyć kilka szablonów, niektóre standardowe wielokrotnego użytku CSS które używam Out of the box w mojej przyszłej pracy. Choć nie do końca, ale udało się osiągnąć niektóre cele.

W promowaniu, ponowne użycie CSS, musiałem spojrzeć na kilka ram CSS, które są powszechnie dostępne dla nas i postanowił umieścić je wykorzystać, ponieważ są one sprawdzone i stworzone przez doświadczonych deweloperów, znacznie ode mnie. Co ważniejsze "uniknąć ponownego Wymyślanie".

Choć powszechnie wiadomo, do weteranów, starałem się pióra pewnych podstawowych pojęć / najlepsze praktyki / myśli, że poszła do tworzenia tych ram, aby uczynić RE-CYCLING CSS możliwe. Nadzieję, że pomoże niektórych deweloperów CSS, którzy właśnie się i niedawno wsiedli do zwycięzcy CSS!

Klawisze Re-rowerowe z CSS:

Użyj konwencji nazewnictwa

To musi być najważniejszym czynnikiem w podejmowaniu CSS / HTML wielokrotnego użytku. Nadanie spójne nazwy elementów strony pozwala na ponowne wykorzystanie składników stron, a ich style z mało lub modyfikacji. Zgodnie z tym argumentem, nawet HTML5, w większych zmian zmian nad jego poprzednicy, ma wprowadzić pewne strukturalne mianowicie tagów. <article>, <section>, <header>, <aside> i <nav> [ Co HTML5 przynieść? ]. Nawet z HTML 4 (lub niższy), to najlepiej nazwać standardowych sekcji strony consistanly jak w prostym przykładzie poniżej ...

Pamiętaj, że większość stron na Twojego projektu, w końcu o tych samych podstawowych elementów konstrukcyjnych. Zidentyfikować te wspólne elementy strony podstawowe ....

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

Wyzeruj domyślne ustawienia stylów (CSS Resetuje): Czy korzystasz z ram lub wyraź swoją, musisz podać CSS Przywraca [ Jakie są CSS Resetuje? ], jak ograniczyć lub czasami wyeliminować wizualnych sprzeczności, które występują pomiędzy różnymi przeglądarkami. W prostych słowach mechanizm resetowania CSS określa style elementów HTML do wartości zero lub null, zastępując wszystkie domyślne wartości przeglądarki mogą niesie. To zapewnia czyste łupków, aby ustawić właściwości tych pustce elementów każdego agenta użytkownika domyślnych [ CSS2.1 Style domyślne User Agent arkuszy ]. Wszystkie ramy CSS mają z zerowania mechanizmu. Jeśli piszesz ty własny CSS Przywraca, uwaga jest taka, że ​​jeśli zdarzy ci się zapomnieć, aby zresetować kluczową własność, może to prowadzić do różnych przeglądarkach kwestii, które są bardzo trudne do debugowania. Pamiętaj, przechowywać kopię resetowania stylów i upuść na każdego nowego projektu tworzonego.

  ciała, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  wcześniej, forma, fieldset, wejście, select, textarea,
  p, blockquote, stół, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (style bazowe) do elementów:

Po ustawieniu (zero lub null) domyślne wartości pewnych atrybutów niektórych elementów HTML, to konieczne jest zastosowanie kilku stylów w całej każdej instancji tych elementów. Te ustawienie domyślne może się różnić wg projektu lub według najlepszych praktyk się trzymać.

Większość frameworków CSS, zawsze wprowadza kilka nowych ustawień domyślnych, oprócz kasowania style przeglądarki domyślnej.
Te wartości domyślne są pustki User-Agent domyślnych w pozbawiony jazdy Reset CSS), będą one spójne w całej przeglądarek.

Pamiętaj, style bazowe używane są do ustawiania stylów, które będą być używane konstrukcja świecie. np..

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

Streszczenie Style dla wspólnych HTML komponentów i klas często:

Większość projekt składający się z kilku stron będą miały wspólne elementy HTML stosowane na całym terenie, na przykład jakiegoś form, ostrzeżeń i błędów, popups niestandardowych Lightboksy itp. Ponieważ takie elementy są wykorzystywane wielokrotnie w projektach, będzie to przydatne, aby zapewnić zestaw klas związanych z predefiniowanych stylów dla tych składników i możesz zaoszczędzić sobie mnóstwo czasu.

Oprócz definiowania stylów wielokrotnego użytku definicji dla wspólnych elementów HTML, możemy abstrakcyjne style zajęcia dotyczące typografii, kolorów, a nawet układu. Ja sam często używasz ... wspólne zajęcia, takie jak Clearfix i Font08 i FontGrey i AlignL i DisplayB itp.

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

Poprawki do wspólnych dziwactw przeglądarki

Różne przeglądarki wprowadzić kod CSS i zapewniają różny poziom poparcia dla specyfikacji CSS. Wynikiem tego .... "Dziwactwa przeglądarce", że my, deweloperzy są pozostawione do walki. Zwłaszcza, IE6 nawiedza najbardziej CSS koderów z terminem spełnienia. Dobrą wiadomością jest to doświadczenie zebrane możliwych wielokrotnego użytku poprawki do tych kwestii (często określany jako CSS Hacks ).

Pamiętaj, przechowywać te hacki / poprawki poręczny

  / * Poniższa zoom: 1 zasada jest specjalnie dla IE6 + IE7.  * /
    * Html. Clearfix,
    *:. First-child + html clearfix {
           zoom: 1;
      } 

Przechowywać Oczyszczanie kod CSS

• Zwyczaj ponownego kolarstwa nie przyjdzie do was w dzień. Musi rozwijać. Tak zaplanować Re-Jazda na rowerze. Pamiętać o tym, że można abstrakcyjne domyślne style, definicje typografii, podzial, HTML stylów elementu itd. Staraj się myśleć z wyprzedzeniem.
• Także spojrzeć wstecz na swoje poprzednich projektów, pomoże zidentyfikować style, które mają tendencję do używania często przez porjects. Streszczenie nim.
• Usuń wszystkie nieużywane style. Praktyka ta będzie trzymać ram CSS z częstym objawem nazwie "wzdęcia" -
• Usuń powtarzające się style.
• Zbudować zestaw stylów, które są wystarczająco elastyczne, aby przenieść je w projektach.

Look At ram CSS

Wreszcie. Jeśli są inspirowane i zamierzają użyć jednego lub więcej ram CSS, Heres jest szybka lista kilku z nich popularnych ....

• 960 Siatka systemu : 960 system sieci jest wysiłek w celu usprawnienia przepływu pracy rozwojowej internetową poprzez zapewnienie powszechnie stosowane wymiary, w oparciu o szerokości 960 pikseli. Są trzy warianty: 12, 16 i 24 kolumn, które mogą być używane oddzielnie lub w tandemie. Nic nie myśl, że nie można utworzyć dla własnej dość łatwo, ramy zapewnia szablony siatki do druku w formacie PDF, który można wykorzystać do naszkicować designs.Bet strony, byłoby to zrobić profesjonalne wrażenie, jeśli nosisz kilka arkuszy, gdy idziesz do klienta za UI wymagań spotkania. Zapewnia ona także podstawowe szablony siatki dla popularnego oprogramowania do projektowania jak Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, itp. stanowiącego "starter do dziesięciu", aby rozpocząć swoją prace projektowe.
• Blueprint : Blueprint zapewnia wyraźnie sklasyfikowane pliki CSS dla zresetowaniu, siatki, Formularze, drukowanie, typografii, pluginy przycisków, zakładek i sprite'y itd. To zapewnia również wsparcie dla IE jako oddzielny zawierać.
• SenCSs : W przeciwieństwie do powyższych dwóch SenCSs (czyt. Sense), nie ma CSS definicje układu. Czyni to czcionki, uzupełnień, marginesy, tabele, listy, nagłówki cytowaniach, formularze i wiele więcej.
• BlueTrip : Pierwotnie roszczenia do sławy było to, że było to połączenie najlepszych funkcji oferowanych przez innych innych struktur, takich jak Blue Print, podróż oli ... skąd bierze swoją nazwę. Jej zestaw funkcji obejmuje 24-kolumny siatki, style typografii, style ORM, drukowanie, przycisków itp.
• YUI Siatki : Udostępnione Ci przez sieć Yahooo Deweloper obsługuje płyn-szerokość (100%) układów, jak również gotowych układów o stałej szerokości na 750px i 950px i 974px, a zdolność do łatwo dostosować do dowolnej liczby. Jak widać, technicznie tylko Składniki układu. YUI również HTML / CSS zestawy dla innych elementów strony
• YAML (Yet Another wielokolumnowego Layout)
• Emastic

Pamiętaj, że używanie ram CSS nie oznacza, że ​​jesteś leniwy, aby założyć własny ... Oznacza to, że jesteś inteligentny, aby uczyć się z doświadczeń innych i błędy, zaoszczędzić czas i zwiększyć wydajność!!

Z mojej ograniczonej umiejętności zestawie z narzędzi takich jak Photoshop i Illustrator, mogę szczerze wyznać, że jestem lepszy niż developer Jestem projektantem. Ale mój tło z rdzeniem (po stronie serwera) rozwój z Java / PHP / COBOL, był bardzo pozytywny wpływ na moje UI umiejętności rozwojowych. Chodzi mi o to, tworząc swoje projekty, tzn. gdy robię projekt, myślę o tym, jak projekt może być najlepiej przekształcić HTML CSS i robiąc HTML-CSS, daję myśl o silnik do technologii i uczynić pewnym, że HTML można łatwo wdrożone do XSL pętli lub PHP fragmentów itp.

W ciągu lat, które zostały rzucone głową do projektów przez projektantów UI, który prawdopodobnie dawca ma pojęcia co HTML lub CSS. Wszystkie te lata myślałem, że będę pytać o zbyt wiele, Gdybym tylko oczekiwać projektant, który próbuje shov jego "niemożliwe do kodu napisanego kodu mi do gardła, aby zrozumieć tylko trochę, co jego konstrukcja będą przeliczane pod. Pomoże nam to prawo?

Wtedy natknąłem się tym poście dzisiaj ... projektantów stron internetowych, którzy nie mogą Kod ... Panie Dzięki! Jestem tylko jednym z wielu, którzy czują to samo ... powyżej artitle jest nieco długo zdyszany .. ale warto odczytu, każde słowo z nim.

Dzięki Elliot Zapasy Jay ... czuję ulgę!

Oto kilka fragmentów z artykułu Elliots .

Wow, co za dzień! Zaczęło się od jednej małej tweet i zakończyła się dyskusją, która zdawała się zamiatać w całej Wspólnocie, projektowanie stron internetowych. Wydaje się, istnieją bardzo mocne opinie znajdujące się na temat tego, czy projektanci stron internetowych powinni mieć możliwość kodu.
...
Tak więc, zanim przejdziemy do tego, pozwala mi szybko podsumować to, co powiedziałem o tym rano na Twitterze:

Szczerze mówiąc, jestem zaskoczony, że w 2010 roku nadal jestem przyjście across projektantów internetem, którzy nie mogą kodów własne wzory. Nie usprawiedliwia.

... Powinno byłem trochę bardziej szczegółowy w moim tweet. Mówiłem o projektantów, którzy nie mają nawet najbardziej podstawowy HTML i CSS umiejętności, aby włączyć płaską konstrukcję w rzeczywistym miejscu. Nie ludzie, którzy świadomie nie zdecydują się na kodzie, którzy pracować nie mogą. A ja również odnoszące się tylko do front-end kod tutaj, oczywiście, że to śmieszny pomysł, projektanci powinni być również niesamowite back-end programiści ...

Dostajemy spacerem internetem projekty nadesłane w programie Illustrator, 300dpi, niemożliwych do kodu, ma spójności / użyteczność.
~ Amy Mahon

Robi się późno, a ja mam otoczyć ten fakt jakoś. Wiem, że będzie wielu, którzy nie zgadzają się ze mną, a moją intencją nie jest obrażać lub zdenerwowany nikogo, kto nie kod, ale mam nadzieję, że część tego, co powiedziałem odzwierciedla niektóre z punktów, które zawsze przychodzą nawet gdy zagłębiając się tej debaty.

Na koniec dnia, nie tracić sen nad tym, kto może zakodować i kto nie może. Jestem szczerze zdziwiony tak wielu projektantów, którym brakuje umiejętności front-end, ponieważ myślałem, że to już przeszłość.

Również przeczytać komentarze, było około 320 komentarzy, jak piszę ... warto je czytać.
Prosimy o zapoznanie Elliots cały post tutaj .. Projektanci stron internetowych, którzy nie mogą kodu

Wczoraj, po wydaniu zetknąłem się z CSS zresetowaniu w Google Chrome ... myślałem o kopanie trochę głębiej w obszar arkuszy agenta użytkownika stylu ...
Znaleziono w tej tabeli na wartości domyślnych CSS2.1 agenta kartach użytkownika stylu ... (dla tych, którzy nieświadomi tego, co "Sheets agenta użytkownika stylu" to po co jest Arkusze agenta użytkownika stylu (specyfikacja) .

Aby uzyskać pełną listę arkuszy stylów CSS 2.1 pełnomocników domyślnych użytkownika kliknij tutaj

Wczoraj, jak każdy inny "Dzień Hog Ground", pracowałem w niektórych CSS / tableless układów. Wszystko szło dobrze w IE 7, FF 3 i Chrome, bez tytułu nagle, widziałem kilka nie-ignorable marże widziałem tylko w Google Chrome. Choć bardzo dziwne i worring, to był jakiś nowy błąd / problem, że przyjechałem accross, nie było w końcu trochę przypraw w moim doczesnym pracy. Sad (ale ładne) zrobiło ustalony w ciągu kilku minut od sondy ...

Zasadniczo, to wyglądało jak Google Chrome zignorowała moje CSS Przywraca (margines: 0px). To rzeczywiście został spowodowany przez stylów agenta użytkownika (-webkit-padding-start: 40px). Rozwiązaniem było zresetować ten styl poprzez ustawienie padding: 0 elementy niewłaściwie.
Dobrym sposobem na uniknięcie tego problemu dzieje się z każdym elementem jest wykorzystanie globalnej Rest CSS następująco

* {Margin: 0; padding: 0;}

Co to ​​jest Arkusze agenta użytkownika stylu (specyfikacja)?
Poniższy fragment pochodzi z http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , link wykonać, aby przeczytać więcej na kartach agenta użytkownika stylu

CSS 1 wprowadza pojęcie, stwierdzając, że każdy User Agent (UA, często "przeglądarka internetowa" lub "klient webowy") będzie miał domyślny arkusz stylów, który przedstawia dokumenty wymagane - ale zapewne przyziemne - sposób. CSS 2 mówi, że zgodne klienckie muszą stosować domyślny arkusz stylów (lub zachowywać się tak, gdyby tak było) i agenta użytkownika na domyślny arkusz stylów powinien przedstawić elementy języka dokumentu w taki sposób, że spełniają ogólne oczekiwania prezentacji w języku dokumentu; CSS 3 może być tego samego umysłu.

Ponieważ specyfikacje CSS pozostawić go do implementacji, czy użyć "prawdziwej" arkusz stylów do wyświetlania domyślnego, czy nie, to nie jest zadziwiające, że nie można znaleźć domyślne arkusze stylów, w każdej przeglądarce w folderze instalacyjnym. W przeciwieństwie do Microsoft Internet Explorer oraz Opera, na przykład (i o ile wiem), przeglądarki Gecko, takich jak Firefox i Netscape Navigator (szukać "html.css"), ale także Konquerora sprawiają, że dość proste do zrozumienia ich styl domyślny.

Ani jestem bardzo nowy interfejs użytkownika (UI) rozwoju ani jestem weteranem i jak zawsze to ujął, ja pasuje do profilu UI developer więcej niż projektant, bez żalu. Oh No! Co ja pisze o? ... Przez jakiś czas (musi być w latach nie każdy mniej) Teraz, co jakiś czas, kiedy nie dostać się odrobiną projektowania UI (przy profesjonalnym projektantem poszła na urlop), zawsze cant przestać myśleć czy mój projekt powinien być właściwie complient czy nie (szczerze nie, że mógłbym osiągnięcie dużo 100% zgodność ze standardami, Gdybym chciał zbyt). Wtedy mówię sobie, co bzdura! ... Konstrukcja powinny być proste, ładne i przede wszystkim wydaje się użyteczny, to nie powinno odwiedzający uciec ... lub bounce (być techniczny). Co dobrego będzie miło tableless układ CSS być do gościa, który jest nieświadomy wszystkich inteligentnych odnośników oraz Arkusz stylów kaskadowych pod skórą swojej strony internetowej ... Zilch!
Powinno to wyglądać ładnie i być łatwy w obsłudze ... potem przychodzi wszystkich rzeczy standardów.

I stumbbled accross ten wpis w blogu przez Jason Fried z 37 sygnałów (Dla tych, którzy nie są świadomi 37 sygnały są onces którzy stworzyli niesamowite aplikacje webowe jak Basecamp itp przy ognisku), którzy pisali coś podobnego w 2004 roku i uwierzcie mi, prawie 5 lat i nie wiele zmieniło się od że ... Byłem szczęśliwy czytać swoje stanowisko, tak jak ja całkowicie zgadzam się z tym, co ma do powiedzenia i również fakt, ona nie jest pewna tego, co mówi o jego tylko jego instynktowi i tak jest moje

Jason Fried: "Nie ma zbyt wiele mówić o CSS i XHTML i Standardów i dostępności nie wystarczy mówić o ludziach. CSS i kod Zgodność z normami są tylko narzędzia - trzeba wiedzieć co budować z tych narzędzi. Świetnie, cieszę się, że twój UI nie używać tabel. Więc co? Kogo to obchodzi, jeśli nadal nie pozwala ludziom osiągnąć ich cele. Standardy sieciowe są świetne, ale własne ludzkie standardy obejmują Getting Things Done (i to jeszcze zbyt trudne do zrobienia online).

Projektanci interfejsu użytkownika czyni sam stary podstawowy "zapominając o człowieka na drugiej stronie" błędów - ale tym razem ich kod wygląda lepiej. Ludzie - nie zatwierdzające kod - interfejsy użytkowania ".

Artykuł Checkout Jason Fried firmy

DISCALIMER: To nie znaczy, że nie powinniśmy przejmować się standardami w ogóle. Normy są dobrze mieć i trzymać się ich jak najwięcej. Mamy tylko zrozumieć, że dobry projekt UI nie zawsze oznacza 100% Complience Standards lub odwrotnie ....

Z mojej listy mojej zdobyte doświadczenia, śledzę kilka projekt interfejsu i zasady Złote rozwój ... Heres TOP 10 ... nie, że trzeba śledzić ich zbyt ...

1. Dbaj o swoich użytkowników. Użytkownicy mogą złamać lub witryny. Dawca uczynić wygląd użytkownika jak łącznej idoit, całkowicie niezdolną do korzystania z witryny. To jest złe!

2. Zachowaj prostotę i łatwość Użyj guidlines podstawowych. Zbyt wiele rzeczy na ekranie, tym większe prawdopodobieństwo, że użytkownik będzie się mylić i rozproszony z ich pierwotnego zadania.

3. Bądź w granicach ... dawca oddają zbyt wiele na użyteczność, dostępność i norm. Użyj standardy skutecznie i uczynić je rozumieć jako zespół. To zapewni właściwą konsystencję w produkcie

4. Prototype wymóg. Ponieważ te dni interfejsy Użyj są bogaci, prototypowanie zawsze jest lepsze niż tylko tworzenia prostych makiet i ostatnia jest nieważna przyzwoitych interakcji, to nie udziela klientowi jasny obraz produktu końcowego, która jest rozwijana. Zawsze łatwiej jest do konwersji prototypy do końcowych rezultatów. Również! z prototypów jakieś problemy interakcji mogą być usunięte wcześniej w cyklu rozwoju.

5. Spójność w projekcie i interakcji jest bardzo ważne. Dawca mylić użytkownikowi nieprzewidywalnych interakcjach i Gizmos.

6. Zrozumieć "misję projektu". Zam skupić na podstawowym działaniu beign zaprojektowanej strony. Także zrobić listę twoich seconday działania na stronie, a ich priorytet.

7. Zapewnienie właściwej informacji zwrotnej dla użytkowników witryny. Z większości witryn internetowych zaprojektowanych wokół AJAX, zapewniają wizualne wskazówki dla użytkownika o zmianach strony. Użytkownik ma do podane potwierdzenie ukończenia każdego zadania on wykonuje. Dawca zrobić użytkownik czekać i zgadywać, na przykład. dostarczyć wskaźników postępu uplaods plików.

8. Użyj kontroli odpowiednio. Np. do użytkowania Wybierz z rozwijanej listy dla małych wykazach wyłącznie, dawca pozwolić użytkownikowi wybrać jeden z 200 miastach z wykorzystaniem pól wyboru. Zrozumieć różnicę pomiędzy przyciskiem i łączem. Link i przycisk mają różne cele, dawca użyć jednej do drugiej. Zapewnia właściwą kontrolę do interakcji z strona łatwiejsze. Unikaj używania menu, które są bardziej, że dwa poziomy. Nie wyważać otwartych drzwi. Użyj standardowych formantów, dostosować je tylko wtedy bardzo potrzebne. Zdefiniuj żadnych formantów niestandardowych wymagane do Twojej pierwszej ręki, tak aby mogły być tworzone i testowane niezależnie, gotowe do użycia accross miejscu.

9. Dawca Iterate zbyt wiele na temat projektu. Pamiętaj! Cały produkt składa się więcej, że projekt sam. Stworzyć odpowiednie terminy w harmonogramie projektu dla iteracji projektowych i trzymać się go. Iteracja pomaga nam dowiedzieć się, co działa a co nie, wybrać się punktów zapalnych. Jako dobry interfejs wymaga czasu, dać czas dla iteracji w początku cyklu rozwoju, tak że iteracje projektowe doesnot bezpośrednio utożsamiać przerobienie. Zbyt dużo przeróbek może jeopradize terminów.

10. Usiądź wygodnie i myśleć jak użytkownik czasami.

Widzieliście animoto.com? Dobrze! to nie jest AD, ja naprawdę się podobało! i jest Pocałuj UI ASS rzeczywiście

Natknąłem się na tej stronie kilka tygodni temu. Zobaczyłem pierwszą stronę, DINT niepokoić wiele. Dla mnie to był po prostu kolejnym miejscu z pewnym bogatej zawartości flash, która umożliwia przesyłanie obrazków, wybierz jakiś utwór i przekształcić go w ładny pokaz slajdów obrazu. Pobierz FLV, i umieścić go na dowolnym miejscu wybranym (YouTube, Metacafe, Facebook i lubi) ... okres.

Wczoraj, kiedy zobaczyłem wewnętrznych stron przepływu, które miały użytkownika przez tworzenie tego pokazu .... Poszedłem OH WOW! Kiedy zdałem sobie sprawę, że nie było trochę FLASH używane. To był naprawdę bogaty interfejs użytkownika. Wszyscy deweloperzy UI musi dążyć do tworzenia lub przynajmniej być częścią zespołu, który zrobił ten interfejs .... Absolutnie genialne! I inspirująca!

Wystarczy popatrzeć ... http://animoto.com/~~HEAD=dobj ... i zarejestrować się i grać z nim ... tylko wtedy można docenić geniusz.

Kiedy przeczytałem ten artykuł na A List Apart " Faux Absolute Positioning
Eric Sol ", byłem nie mniej niż pod wrażeniem. Byłem też w depresji majorly, bo, szczerze mówiąc zastanawiałem się, dlaczego nie mogę wymyślić coś wspaniałego jak ten.

Zazwyczaj, gdy tworzymy układów CSS, używamy "POSITION" lub "unosi" lub bardzo złe połączenie obu. Eric Sol i jego zespół określić obok doskonałej technice nowego rodzaju techniki CSS układu, których ochrzczono jako "Faux Absolute Positioning" po faux techniki kolumn symulujący obecność kolumnie.

Znasz ten problem nas wszystkich programistów CSS mieć z układami rozpadających się w Nieoczekiwane zmiany treści, które powodują całe kolumny do opasania, kiedy używamy płynęły układów) ... No cóż! Wydaje się historia!!
Ta technika układ jest wciąż bardzo młody i ma do kosza przez tych wszystkich guru CSS tam, zanim stanie się un napisany standard. Jestem zadowolony z niego korzystać TERAZ! ... I jestem już w połowie konwersji moich wcześniej problematycznych / pływająca un-niekoniecznie układów w układzie FAP już ... i cieszę się powiedzieć "my już używają Faux Absolute Positioning na tym blogu serwisu, jak również" ... GO spróbować, TERAZ!

Kudos Eric!

Więcej elementów DOM na stronie, wolniej to świadczy, wolniejszy dostęp do DOM w JavaScript-tych. Duża liczba elementów DOM może być spowodowane złym projekt układu. Na przykład, zagnieżdżone tabele mogły być wykorzystywane do celów układu. Użyj dowolnego znacznika HTML, gdzie jest sens semantycznie. Np. dla tabel dawca stosowania dla układów, ale dawca wahaj się ich użyć, gdy masz do wyświetlania danych tabelarycznych, a więc będzie używać zmniejszyć elementów DOM, w porównaniu do podobnej strukturze utworzonej za pomocą DIV tylko ..

Aby sprawdzić liczbę elementów DOM w stronie HTML, wpisz następujące polecenie w konsoli: Firebug jest document.getElementsByTagName('*').length

Nie ma ustalonego standardu określającego, ile elementów DOM jest zbyt wiele. Sprawdź inne podobne strony, które mają dobrą markup.Eg. Strona główna Yahoo! jest dość zajęty strona i jeszcze w 700 elementy (tagi HTML).

Użyj GET dla żądań AJAX

Stwierdzono, że przy użyciu XMLHttpRequest, POST jest zaimplementowana w przeglądarkach jako dwóch etapów: wysyłające nagłówki, potem wysyłania danych. Tak więc najlepiej jest użyć GET, która zajmuje tylko jeden pakiet TCP wysyła (chyba, że ​​masz dużo ciasteczek). Maksymalna długość adresu URL w IE jest 2K, więc jeśli wysyłasz więcej niż 2K danych może nie być w stanie używać GET.
Ciekawe afekt strona jest to, że POST bez rzeczywistego wysyłania jakichkolwiek danych zachowuje się jak GET. GET jest przeznaczona do pobierania informacji, więc ma to sens ust semantycznie) do korzystania z GET kiedy tylko o dane, w przeciwieństwie do przesyłania danych przechowywanych po stronie serwera.

Unikaj wywołań synchronicznych AJAX

Dokonując "ajax" żądań, można wybrać jedną lub asynchronicznie tryb synchronizacji. Asynchroniczny tryb kieruje wniosek w tle, podczas gdy inne działania przeglądarki może nadal przetwarzać. Sync tryb będzie czekać na żądanie powrotu przed kontynuowaniem.
Wnioski składane w trybie synchronizacji należy unikać. Wnioski te będą powodować przeglądarki, aby zamknąć dla użytkownika aż do powrotu żądania. W przypadkach, gdy serwer jest zajęty i odpowiedź zajmuje chwilę, przeglądarki użytkownika (a może OS) nie pozwoli na nic innego do zrobienia. W przypadkach, gdy odpowiedź nie jest prawidłowo odbierany, przeglądarka może nadal blokować do wniosku skończyła się.
Jeśli uważasz, że twoja sytuacja wymaga tryb synchronizacji, to najprawdopodobniej czas do przemyślenia swojego projektu. Bardzo niewiele (jeśli w ogóle) sytuacje rzeczywiście wymagają żądań AJAX w trybie synchronizacji.

Optymalizacji obrazów

Optymalizacja oznacza po prostu utrzymanie wielkości małych obrazów, utrzymując jakość obrazu do wymaganego poziomu. Jest wiele procedur, które kiedyś mogą prowadzić do optymalizacji obrazów przed ich załadunkiem na serwerze dostawy. Narzędzia, których używamy do stworzenia tych obrazów (Photoshop, Fireworks itp.) zwykle mają narzędzia, które pozwalają użytkownikom na optymalizację obrazu do użytku internetowej.
• Sprawdź GIF-tych, czy są one za pomocą rozmiar palety odpowiadającą liczbie kolorów w obrazie. Gdy obraz jest za pomocą 4 kolory i paletą 256 kolorów, to obraz może być bardziej zoptymalizowany

• Konwersja GIF PNG jest tam, gdzie jest to możliwe i sprawdzić czy nie ma oszczędności. Częściej niż nie istnieje. Nie wahaj się korzystać z PNG-tych, jak oni są w pełni obsługiwane przez większość powszechnie używanych przeglądarek. Spodziewaj się z możliwościami animacji PNG może robić co GIF robi, w tym przejrzystości.

• Dla obrazów używanych w CSS sprites, zorganizować zdjęcia w ikonki poziomo, w przeciwieństwie do pionowo powoduje zazwyczaj mniejszy rozmiar pliku. Ponadto, łączyć obrazy z podobnymi kolorami w ikonki. Pomaga to zachować Ilość kolorów niska, idealnie pod 256 kolorów, tak by zmieścić się w PNG8.

• Jeśli używasz favicon.ico, niech to będzie małe, najlepiej pod 1K.

Użyj prawidłowo przeskalowane / rozmiaru obrazu.

Zawsze staram i używać przeskalowanych obrazów, tzn. nie stosować większy obraz niż potrzeba tylko dlatego, że można ustawić szerokość i wysokość w HTML. Jeśli chcesz, aby wyświetlić 100px X 100px obraz na stronie, to nie używać zeskalowana 200x200px obrazu.

Użyj progresywne obrazy

Przeglądarka internetowa już świadczy zdjęć stopniowo. Aby to zrobić jeszcze lepiej, po prostu zapisać plik GIF lub PNG z przeplotem "" opcji, lub swoich JPEG z "stopniową" opcji.

Istnieje trwa debata wśród internautów, czy stosowanie progresywnego obrazu jest błogosławieństwem czy przeszkodą. Również progresywny obraz waży około 20% więcej niż jego brak odpowiednika progresywnego. Tak więc, jeśli uważasz, że układ korzysta z obrazów, które nie utrudniają użytkownika doświadczenie, to jest progresywny, nie krępuj się zrobić.