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
przez: Studio Interaktywne Footstep Odsłony: 13630
tworzenie stron www webusability html5 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.
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ć.
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.
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.
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).
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ą.
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.
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.
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.
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.
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.