Na świecie istnieje 634 mln stron internetowych (stan na grudzień 2012)

Kobiety znacznie lepiej radzą sobie w prowadzeniu sklepu internetowego niż mężczyźni

94% użytkowników smartfonów korzysta z lokalnych rekomendacji Google

W ciągu 60 sekund na świecie rejestrowanych jest 80 nowych domen

Najefektywniejszym dniem do realizacji kampanii e-mail marketingowej jest czwartek

Przeciętny człowiek wpatruje się w swój telefon średnio 34 razy dziennie

Najskuteczniejszą formą promocji sklepu internetowego oraz strony internetowej jest pozycjonowanie

Facebook ma każdego miesiąca 1 mld aktywnych użytkowników

80% stron internetowych posiada tło w jasnej tonacji kolorów

Prawie co drugi sklep internetowy prowadzony jest przez kobietę. Panie świetnie sobie radzą w tej dziedzinie.

W ciągu 60 sekund na świecie wysyłanych jest ponad 200 wiadomości email

43% osób posiadających smartfona planuje za jego pomocą podróże

48% osób uważa, że jeżeli strona nie wyświetla się dobrze na urządzeniach mobilnych to firmie nie zależy na klientach

W ciągu 60 sekund na świecie wyszukiwarka Google odnotowuje 2 miliony zapytań

Częste aktualizowanie strony internetowej ma bardzo korzystny wpływ na pozycjonowanie

17.4% wszystkich odwiedzin na stronach pochodzi z urządzeń mobilnych

Kwota jaką średnio wydaje użytkownik Internetu na zakupy w sklepach internetowych wynosi 250 zł

Najchętniej kupowane w sklepach internetowych są gry, sprzęt elektroniczny, filmy i muzyka, książki oraz odzież i obuwie

W robieniu zakupów w sklepach internetowych nieznacznie przeważają mężczyźni (54%)

Roczny koszt zwalczania cyberprzestępczości to 110 mld dolarów

Najpopularniejszą forma płatności w sklepach internetowych jest przelew bankowy, najmniej popularna jest płatność kartą płatniczą

Najczęściej wybieraną godziną do realizacji kampanii e-mail marketingowej jest godzina 8:00

Produkty trudno dostępne w sklepach internetowych to: leki, meble, bielizna, a w szczególności artykuły spożywcze

Do roku 2112, na Facebooku będzie ponad 750 milionów kont zmarłych ludzi

66% użytkowników tabletów i smartfonów uważa, że długi czas ładowania strony jest frustrujący

W Internecie również panuje moda. Dostosowanie wyglądu strony www do panujących trendów korzystnie wpływa na odwiedzających

Ponad 70% zapytań wpisywanych w wyszukiwarkach po godzinie 18:00 ma zabarwienie erotyczne

Dzięki zakupom przez Internet kupując kosmetyki zaoszczędzisz aż 18%. To najbardziej opłacalny produkt w Internecie.

Najczęstszym językiem programowania przy tworzeniu stron internetowych jest język PHP

70% internautów preferuje poznanie firm przez artykuł, a nie za pośrednictwem reklamy. Z tego wynika, że internauci nie ufają reklamom

Łączna wartość wszystkich sklepów internetowych w Polsce wynosi 5,33 mld zł

Sanepid może skontrolować sklep internetowy jeśli ten w swojej ofercie posiada artykuły spożywcze

Przeciętny użytkownik smartfona opuści stronę internetową, jeżeli ta będzie ładować się ponad 5 sekund

Najczęstszym system operacyjnym w Smartfonach Polaków jest Android (59%) a jako drugi iOS (38%)

W 2012 roku do wyszukiwarki Google wysłano 1.2 bln zapytań. Zakładając, że jest 6 mld ludzi na Ziemi każdy korzystał z niej 200 razy

2.1 mld ludzi na świecie korzysta z mobilnego Internetu

68,8% wszystkich wysyłanych wiadomości e-mail to spam

87% stron internetowych posiada własną wyszukiwarkę. Ułatwia to życie użytkownikom gdyż nie muszą przeszukiwać całej strony

Blisko 95% ludzi w Polsce korzysta z wyszukiwarki Google. Na drugim miejscu jest Bing z wynikiem 1.73%

W ciągu 60 sekund na świecie powstaje 571 nowych stron internetowych

Najpopularniejszą przeglądarką w Polsce jest Mozilla Firefox (41%), jako druga jest Google Chrome (29%) a trzeci jest Internet Explorer (16%)

55% transakcji przeprowadzanych w Internecie zaczyna się od wpisania frazy w wyszukiwarkę

69% użytkowników tabletów dokonuje za ich pomocą zakupów online przynajmniej raz w miesiącu

46% osób posiadających smartfona korzysta z bankowości mobilnej

Pewien człowiek nie został zatrudniony jako osoba sprzątająca ponieważ nie posiadał własnego konta e-mail

Obecne urządzenia mobilne posiadają aż 600 rozdzielczości ekranu. W roku 2012 było ich tylko 320

Rocznie ofiarą cyberprzestępstw pada 7 milionów Polaków - to 3 razy więcej niż zapada na grypę

Średnia prędkość Internetu to 2,3 Mbps co daje średni czas ładowania strony internetowej 6,7 sekund

24,3% z 10 tysięcy najpopularniejszych stron internetowych świata posiada integrację z Facebookiem

Jeżeli firma zatrudnia 100 pracowników, którzy odbierają dziennie 15 e-maili, to w ciągu jednego roku koszt spamu wynosi 46 500 zł

4 na 10 użytkowników sieci społecznościowych pada ofiarą cyberprzestępców

Tworzenie strony w oparciu o system CMS sprawia, że administracja taka stroną jest porównywalna do obsługi programu MS Word

W pierwszym kwartale 2013 roku Google Analytics rozpoznał aż 435 różnych modeli urządzeń mobilnych

W 2014 roku w Internecie pojawiło się 54 mln stron internetowych w tym 36 naszego autorstwa

67% osób posiadających smartfona robi zakupy online

Ponad 50% sklepów internetowych w Polsce prowadzona jest przez jedną lub dwie osoby

58% stron internetowych używa narzędzia Google Analytics do sprawdzania statystyk swojej witryny

Internauci chętniej robią zakupy w sklepach internetowych jeśli wysyłka jest całkowicie darmowa

85% osób uważa, że strony responsywne są równie ważne co strony desktopowe

W zeszłym roku ofiarą internetowych oszustw i ataków padło 45% internautów

81% osób posiadających smartfona przegląda na nim strony

Najczęstszą pozycją logo na stronie internetowej jest lewy górny róg. To właśnie tam najczęściej szukają go odwiedzający

W 2015 całkowita wartość rynku internetowego w Polsce osiągnie próg 77 mld zł, to aż 4,1% PKB

Na świecie jest ponad 2,2 mld użytkowników poczty e-mail, a w ciągu każdego dnia jest wysyłane 144 mld wiadomości e-mail

Tylko 14% stron internetowych widocznych w sieci używa technologii HTML5

10 najczęściej popełnianych błędów CSS przy tworzeniu strony internetowej

przez: Studio Interaktywne Footstep Odsłony: 6912

tworzenie stron www webusability html5 css3

Błędy popełniane w CSS3

Używanie stylów CSS przy tworzeniu stron internetowych nie jest niczym szczególnym - każda strona posiada wbudowane arkusze stylów, które determinują sposób, w jaki strona jest wyświetlana.

Ale pomijając jego powierzchowną łatwość, CSS jest skomplikowanym systemem, szczególnie podczas tworzenia zaawansowanych, rozwiniętych stron internetowych. Możliwość wybrania najzwyklejszego selektora jest zdumiewająca, nie wspominając o właściwościach które można nadać każdemu elementowi, nie wspominając o kompatybilności z różnymi przeglądarkami. Łatwo jest się w tym wszystkim pogubić, dlatego poniżej prezentujemy najczęściej popełniane błedy w stylach CSS.

1. Niewłaściwe resetowanie CSS

Przeglądarki internetowe są zmienne. Ich niestałość może powodować u każdego projektanta stron chęć wyrwania włosów z głowy. Ale koniec końców, to właśnie przeglądarki są odpowiedzialne za efekty wizualne na naszej stronie internetowej, dlatego powinniśmy zrobić wszystko, aby je zadowolić :)

Jedną z najgorszych rzeczy w przeglądarkach są ich domyślne style dla elementów HTML. Z jednej strony, nie można aż tak bardzo na to narzekać - wielu twórców stron nie nadaje stylów dla niektórych elementów na swoich stronach, dlatego... musi to jakoś wyglądać.

W każdym bądź razie, bardzo rzadko można spotkać przeglądarki, które w identyczny sposób nadają domyślne style dla stron, dlatego jedyną rzeczą jaką możemy zrobić jest zastosować skuteczne resetowanie CSS.

Resetowanie CSS powoduje ustawienie wszystkich stylów dla elementów HTML do oczekiwanych wartości. Piękno resetowania polega na na umożliwieniu dowolnego ustawienia każdego elementu w identyczny sposób dla każdej przeglądarki. Powinno to być podstawą przy projektu lub ostylowaniu strony internetowej dla każdego.

Wiele przykładów prawidłowego resetowania stylów można znaleźć w ogólnodostępnych źródłach. Podstawowym sposobem jest zresetowanie wartości margin/padding.

*{margin:0; padding:0;}

I choć w większości przypadków to wystarcza, dobrym pomysłem byłoby również zresetowanie obramowań, podkreśleń, kolorów, list oraz tabel tak, aby w przyszłości nie trzeba było się z tym ponownie męczyć.

2. Zbyt szczegółowa specyfikacja selektora

Bycie nadgorliwym podczas wybieranai elementu do ostylowania nie jest dobrą praktyką. Poniższy przykład dokładnie zobrazuje, o czym mówimy:

ul#navigation li a { ... }

Przeważnie struktura listy nawigacyjnej zaczyna się od ul (najczęściej z id #nav lub #menu) oraz kilku podrzędnych elementów li z linkami a wewnątrz listy. Oczywiście, taka struktura kodu HTML jest jak najbardziej prawidłowa, jednak to o selektory CSS się martwimy najbardziej.

Po pierwsze: nie ma potrzeby podawania ul na początku, jako że ID #navigation jest najbardziej precyzyjnym selektorem. Oprócz tego, nie trzeba podawać elementu li do składni selektora ponieważ wszystkie elementy a wewnątrz #navigation są elementami listy, nie ma więc potrzeby bycia aż tak szczegółowym. Tym sposobem skróciliśmy nasz selektor do:

#navigation a { ... }

A teraz, co dokładnie chcemy przekazać za pomocą tego przykładu: zawsze pisz swój kod CSS z jak najmniejszą ilością precyzyjnych selektorów. Używanie "zaprecyzyjnych" wskazań może wydawać się bezpieczniejsze, ale kiedy chodzi o selektory CSS są tylko dwa poziomy precyzji - precyzyjny i nieprecyzyjny.

3. Brak skróconych właściwości

Spójrz w poniższą listę właściwości:

#selektor{ margin-top: 50px; margin-right: 0; margin-bottom: 50px; margin-left: 0;}

Co jest złego w powyższym przykłądzie? Mamy nadzieję, że zaświeciła się lampka ostrzegawcza w głowie i zauważyłeś, że najzwyczajniej w świecie powtarzasz się. Na szczęście jest na to rozwiązanie - skrócone właściwości CSS. Przykład poniżej ma taki sam efekt jak deklaracja wyżej, ale skróciliśmy nasz kod o wiele znaków:

#selektor{ margin: 50px 0; }

Spójrz teraz, jak to wygląda przy formatowaniu stylów czcionki:

font-family: Verdana, font-size: 12px; font-weight: bold; line-height: 1.5;

Możemy to wszystki skrócić do jednego:

font: bold 12px/1.5 Verdana;

To samo tyczy się ustawienia tła:

background-image: url(tlo.png); background-repeat: repeat-y; background-position: center top

Stosując skrótowe parametry CSS otrzymamy:

background: url(tlo.png) repeat-y center top;

Używanie skróconych stylów CSS poprawia wydajność, ale także ułatwia zarządzanie stylami.

4. Używanie 0px zamiast 0

Powiedzmy że chcesz dodać 20px marginesu dolnego do elementu. Możesz użyć czegoś takiego:

margin: 0px 0px 20px 0px;

Nie rób tego. To nadgorliwość. Nie ma potrzeby dołączać px po 0. Możesz powiedzieć, że się czepiamy i szukamy dziury w całym, ale gdy pracujesz nad dużym serwisem i usuniesz wszystkie te niepotrzebne px zredukujesz znacząco rozmiar swoich plików (co zawsze jest przydatne).

5. Używanie nazw kolorów zamiast #hexów

Deklarowanie red zamiast #FF0000 jako wartość color jest często używane przez leniuchów.

color: red;

Robiąc tak mówisz przeglądarce, że ma wyświetlić to, co ona uważa za kolor czerwony. Jeżeli nauczyłeś się już cokolwiek o funkcjonalności przeglądarek, straciłeś kilka godzin na głupotach takich jak wyrównanie list widoczne tylko w IE7 lub innych podobnych - dobrze wiesz, że nie powinieneś pozwalać przeglądarce decydować o czymkolwiek.

Zamiast tego, powinieneś podać dokładne wartości w hexach (lub też rgb) których chcesz użyć. Tylko tak będziesz spokojny o to, co wyświetli przeglądarka. W Internecie znajdziesz masę ściąg i kalkulatorów, które nie tylko przekonwertują nazwy kolorów w hexy i rgb, ale także pokażą na żywo podgląd koloru. Może się to wydawać trywialne, ale jeżeli chodzi o CSS, nawet najmniejsza rzecz może być dużą pułapką.

6. Zbędne selektory

Nasz proces pisania stylów CSS zaczyna się od typografi, potem pracujemy nad strukturą strony, a na samym końcu nadajemy styl wszystkim kolorom i tłom. I u nas to działa. Jako że nie skupiam uwagi tylko na jednym elemencie naraz, często później znajdujemy zbędne deklaracje stylów. Zawsze po zakończeniu pracy sprawdzamy raz jeszcze cały kod aby upewnić się, że nigdzie nie powtórzyliśmy żadnych selektorów - jeżeli tak się stało, łączymy je. Takie pomyłki nie są problemem w fazie projektowania strony, ale podczas wdrażania nie powinny mieć już miejsca. Z łatwością znajdziecie w Internecie narzędzia, dzięki którym zoptymalizujecie i skrócicie swój kod CSS.

7. Redukcja właściwości

Podobnie jak wyżej, często po skończeniu prac zauważamy, że użyliśmy takich samych właściwości stylu dla róznych selektorów. To może być ostylowanie h5 w headerze w taki sam sposób, jak h6 w stopce bądź wiele innych przypadków.

W ostatecznym sprawdzeniu naszych stylów CSS zawsze sprawdzamy, czy nie powtarzamy za dużo właściwości. na przykład, jeżeli dwa selektory robią dokładnie to samo:

.selektor1 { font-style: italic; color: #000; margin: 5px; padding: 20px; }

#selector2 { font-style: italic; color: #000; margin: 5px; padding: 20px; }

Należy je połączyć i oddzielić przecinkiem w sposób nastepujący:

.selektor1, #selektor2 { font-style: italic; color: #000; margin: 5px; padding: 20px; }

Mam nadzieję, że rozumiesz o co walczymy. Postaraj się być tak wydajny jak to możliwe. Odpłaci się to w przyszłości w czasie zarządzania stylami oraz prędkością ładowanai strony.

8. Nie dostarczanie rezerwowych czcionek

W doskonałym świecie, każdy komputer będzie posiadał każdą czcionkę jaką będziemy chcieli użyć. Niestety, nie ma tak dobrze. Nie licząc @font-face, projektanci stron mają dosyć ograniczone pole manewru przy używaniu czcionek i ogarniczeni są do czcionek bezpiecznych (Arial, Georgia, serif itd.).

Jest jednak pozytyw w tym wszystkim. Wciąż można używać czcionek jak Helvetica, które niekoniecznie sa zainstalowane na każdym komputerze. Sekret leży w stosach czcionek. Stosy czcionek to sposób, w jaki projektanci stron zapewniają rezerwy czcionek dla przeglądarek w momencie, kiedy użytkownik nie ma zainstalowanej oczekiwanej czcionki. Dla przykładu:

#selektor{ font-family: Helvetica; }

Może zostać rozszerzone o czcionki rezerwowe takie jak:

#selektor{ font-family: Helvetica, Arial, sans-serif; }

Teraz jeżeli użytkownik nie będzie posiadał czcionki Helvetica, zobaczą stronę z zastosowaną czcionką Arial, a jeżeli i tutaj będzie problem, domyślnie zobaczą dowolną czcionkę z rodziny sans-serif.
Definiując czcionki rezerwowe, zyskujesz więcej kontroli nad tym jak Twoja strona jest widoczna.

9. Niepotrzebne puste miejsca

Kiedy przychodzi czas na redukcje stylów CSS pod optymalizację, każde puste miejsce się liczy. Podczas projektowania naturalnym jest zapewnienie takiego formatowania stylów, aby wygodnie było wprowadzać zmiany. Jednakże, nie ma żadnych przesłanek aby używać niepotrzebnych znaków (twarde spacje, nowe linie, akapity) kiedy wdrażasz projekt w Internecie, gdzie liczy się rozmiar plików.

Zbyt wielu twórców stron nie upraszcza swoich plików przed odpaleniem strony co my uważamy za ogromny błąd. Może nie wydawać się to dużą różnicą, ale posiadając duże pliki CSS pozwala to skrócić czas oczekiwania na załadowanie się strony.

10. Brak logicznej organizacji stylów CSS

Pisząc style CSS, zrób sobie samemu przysługę i zorganizuj odpowiednio swój kod. Dzięki komentarzom możesz zagwarantować sobie szybszą nawigację po dokumencie podczas wprowadzania zmian w przyszłości.
Sposób organizacji stylów zależy tylko od Ciebie - zrób tak, żeby to Tobie było wygodnie. My osobiście stosujemy komentarze nawiązujące do struktury projektowanej strony, co ułatwia nam w razie potrzeby znalezienie odpowiedniego elementu.

Częstym błędem podczas pisania CSS jest dodawanie części stylu tak szybko, jak tylko go wymyślą. Później jest problem ze znalezieniem i zmianą danej deklaracji i właśnie wtedy ludzie zaczynają pluć sobie w brodę za brak organizacji stylów :)

Z jakimi problemami napotkaliście się podczas tworzenia stron internetowych? Zdarzyło Wam się mieć jakiś problem z zastosowaniem optymalizacji stylów CSS? Zapraszamy do dyskusji w komentarzach.