Pierwszy krok w moim cyklu wpisów na temat „Optymalizacji stron internetowych”.

Mając na myśli optymalizację CSS myślę o uproszczeniu kodu i skróceniu do jak najmniejszej liczby wierszy. Poniżej opiszę przykłady skracania kodu, które w rezultacie poprawią czytelność i rozmiar pliku. Jeśli poruszam temat rozmiaru plików, to są dostępne darmowe programy do optymalizacji plików CSS takie jak Icey’s CSS Compressor czy CleanCSS ich średnia skuteczność to około 25%, czyli o tyle potrafią zmniejszyć rozmiar pliku CSS. Ich wada po takiej kompresji kod staje się nieczytelny, innymi słowy nasze piękne drzewko CSS i poukładane klasy zlewane są w jedną całość. Jeśli ktoś dysponuje portalem o średniej unikalnej porównywalnej do największych portali to jest to narzędzie pozwalające zaoszczędzić kilka cennych KB. Jednak musimy pamiętać o zachowaniu kopi z drzewkiem ponieważ edycja takiego skompresowanego CSS przyprawia o ból głowy. Jest to chyba ich jedyna wada przez którą osobiście nie używam takich czarodziejów. Klient czy programista od Back-end’u oczekuje czytelnego, prostego i łatwego w edycji CSS, a nie koszmarka z którego nie wiele można wyczytać.
Czytaj dalej…

Optymalizacja stron temat dość rzadko poruszany przy Front-end’dzie. Jeżeli zajrzymy do Back-endu i stron poświęconych programowaniu optymalizacja i szybkość działania danego skryptu czy programu jest bardzo istotna. Jednak co z szybkiej wyszukiwarki czy innego Back-end’owego dobrodziejstwa skoro nasza strona wczytuje się 10s. Postanowiłem poświęcić optymalizacji stron cały cykl artykułów. Każdy kto zajmuje się Front-end’em na poważnie powinien skupić się nie tylko na identycznym wyglądzie strony pod najpopularniejszymi przeglądarkami, ale również na optymalizacji strony w kilku płaszczyznach.

Optymalizacja CSS
Czyli jak zmniejszyć rozmiar naszych styli.
Optymalizacja HTML pod względem SEO
Czyli jak dobierać znaczniki aby wyszukiwarki nas dobrze zrozumiały.
Optymalizacja grafiki PNG, JPG, GIF
Czyli jak zmniejszyć rozmiar naszych plików graficznych jednocześnie nie tracąc ich jakości.
Poprawna semantyka HTML
Czyli jak poprawnie używać znaczników, podpisywać klasy czy tworzyć drzewko html.
Usability
Czyli projektowanie funkcjonalnych serwisów internetowych.

Jednym z wielu sposobów radzenia sobie z niesfornymi przeglądarkami są Hacki CSS, pozwalają zastosować dany styl tylko dla wybranej przeglądarki co umożliwia niejednokrotnie poprawienie błędu. Jednak musimy pamiętać, że hacki wymyślali i odnajdywali koderzy więc nie są one zgodne ze standardami, a ich interpretacja wraz z rozwojem przeglądarek może kiedyś spowodować, że najnowsza wersja danej przeglądarki wyświetli nam coś zupełnie niepożądanego. Co prawda jest to mało prawdopodobne, ale jednak mimo wszystko trzeba brać taką ewentualność pod uwagę. Poniżej zaprezentowałem Hacki, dla najpopularniejszych przeglądarek.
Czytaj dalej…

Co powinniśmy wiedzieć o PNG

Następca gifa wprowadza półprzezroczystość (kanał alpha). Co znacznie ułatwia życie koderom szczególnie w sytuacji, gdy wodze fantazji zaczynają puszczać grafikom. PNG jest na wolnej licencji w przeciwieństwie do gifa. Używając odpowiednich programów bardzo dobra kompresja (przy zachowaniu świetnej jakości mały rozmiar plików). Wszystko wręcz wydaje się bajką jednak, zderzamy się z rzeczywistością IE6 zamiast naszego kanału alpha wyświetla szare tło, a IE7 przyciemnia nasze obrazki. W tym wpisie pokaże jak ominąć problemy z obiema przeglądarkami Microsoft’u. Co pozwoli nam na zastosowanie PNG w każdym projekcie bez obawy o interpretacje przeglądarek.
Czytaj dalej…

Czym jest CSS3 ?

Trzecia generacja CSS elektryzuje koderów, powstaje wiele przykładowych zastosowań języka. Pomimo skromnej jak dotąd interpretacji przez najpopularniejsze przeglądarki. W stosunku do poprzedniej wersji CSS3 podzielone jest ma moduły. Ma to usprawnić nie tylko prace na nowym CSS, ale dać również możliwość częściowego wprowadzania go do przeglądarek pomimo, że cała specyfikacja nie jest ukończona, pewne moduły są już stabilne. Według twórców nowy CSS ma umożliwić stosowanie rozwiązań, dotychczas możliwych jedynie przy użyciu JavaScript np. będzie można wybrać pierwszy czy co trzeci element pewnej klasy i nadać mu zupełnie inne ostylowanie, funkcja zaawansowanych selektorów też wydaje się być interesująca. Wiele osób cieszy się na wieść o możliwości dodania własnych fontów, a cienie pod tekstem wyglądają naprawdę świetne.
Czytaj dalej…

Przy bardziej zaawansowanych stronach stosowanie max/min-height czy max/min-width staje się wręcz niezbędne. Te bardzo przydatne style jednak nie są obsługiwane przez IE6. Ten wpis pomoże Ci to zmienić!

MIN-HEIGHT/WIDTH

Pomimo tego, że IE6 nie wie co znaczy min-height, min-width. Zachowuje się w stosunku do height i width dokładnie w ten sam sposób, jak normalne przeglądarki do min-height/width. Mianowicie ustala stałą wysokość/szerokość jednak gdy przybywa content’u pozwala na rozszerzenie się elementu blokowego. A my to wykorzystamy !

ROZWIĄZANIE MIN-HEIGHT

ROZWIĄZANIE MIN-WIDTH

Czytaj dalej…

Chyba najczęściej spotykany i najprostszy błąd do rozwiązania występujący w IE6. Problem wygląda następująco dla elementów z wartością float IE6 nadaje podwójny margines.
Czytaj dalej…