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

Jak zrobić dobrą stronę: Responsywne menu - tutorial

przez: Studio Interaktywne Footstep Odsłony: 18327

tworzenie stron www webusability strona przyjazna użytkownikom responsive web design

Tworzenie responsywnego menu

Dobra struktura menu oraz odpowiednie linkowanie wewnętrzne jest ważnym czynnikiem nie tylko użyteczności strony internetowej, lecz również ma wpływ na osiągane pozycje w wyszukiwarkach. Poniżej pokażemy, jak zrobić dobre responsywne menu.

Responsywne menu ułatwia użytkownikom urządzeń mobilnych korzystanie z naszej strony WWW. Tradycyjne menu wyświetlane na telefonie może czasami wyglądać przyzwoicie, ale tylko pod warunkiem, że nie jest rozbudowane. W poniższym artykule pokażemy, w jaki sposób przekształcić menu w responsywną wersję.

HTML5

Aby dodać responsywne menu do naszego projektu musimy dokonać lekkiej modyfikacji naszego kodu HTML poprzez dodanie do niego elementu div o id 'menu-trigger' zaraz nad elementem nav.

<!DOCTYPE HTML>

<html lang="pl">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Strona RWD</title>

<link rel="stylesheet" href="/css/style.css">

</head>

<body>

 

<div id="container">

 

<!-- header -->

<header>

<img src="/images/header.jpg" alt=""/>

</header>

 

<!-- sidebar -->

<aside>

<div class="menu-trigger">Menu</div>

<nav>

<ul>

<li><a href="#">Start</a></li>

<li><a href="#">O firmie</a></li>

<li><a href="#">Oferta</a></li>

<li><a href="#">Galeria</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

</nav>

</aside>

 

<!-- main -->

<section id="main">

<h1>RWD tutorial</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi.</p>

</section>

 

<!-- footer -->

<footer>

<p>Footstep.pl © 2013</p>

</footer>

 

</div>

 

</body>

</html>

CSS3

Jak wiemy, to właśnie css jest w głównej mierze odpowiedzialny za responsywność naszej strony. Zacznijmy jego modyfikację od ostylowania dodanego elemenu 'menu-trigger'

.menu-trigger {color:#000;background:#FFC000;font-weight:700;text-transform:uppercase;padding:15px;margin:0 0 5px;cursor:pointer;}

Element 'menu-traigger' jest nam potrzebny tylko przy mniejszych rozdzielczościach urządzeń tak więc ukryjmy go dla tych większych

@media (min-width: 800px) {

.menu-trigger {display:none;}

}

@media (max-width: 800px) {

.menu-trigger {display:block;}

}

Nasz projekt zakłada, że granicą do zmiany układu strony jest 800px tak więc taką wartość będziemy przyjmować również dla naszego elementu 'menu_trigger'. Aby nasz element 'menu_trigger' wyświetlał się prawidłowo musimy usunąć z wcześniejszej deklaracji wartość

display:block;

gdyż definiujemy ją w warunkach Media Queries

Nasz 'spust' menu jest gotowy, teraz możemy zająć się naszym menu. Przeróbmy je tak aby dla mniejszych rozdzielczości było bardziej wygodne dla użytkownika (np. korzystającego ze smartphona)

@media (min-width: 800px) {

aside nav {display:block !important;}

aside nav ul {list-style:none;}

aside nav ul li {margin-bottom:1px;}

aside nav ul li a {display:block;text-decoration:none;color:#000;background:#FFC000;padding:8px 20px;}

aside nav ul li a:hover{background:#212121;color:#FFF;}

}

@media (max-width: 800px) {

aside nav {display:none;}

aside nav ul {list-style:none;}

aside nav ul li {margin-bottom:1px;}

aside nav ul li a {display:block;font-size:14px;font-weight:700;text-decoration:none;color:#fff;background:#333;padding:12px 20px;}

aside nav ul li a:hover{background:#212121;color:#FFF;}

}

Działanie naszego menu będziemy opierać o zwijanie oraz rozwijanie elementu nav dlatego też ważne jest aby dla większych rozdzielczości miał on wartość display oznaczoną jako !important.

Aby nasze responsywne menu działało w 100% sprawnie musimy jeszcze dodać prosty skrypt jQuery. Będziemy tego dokonywać w pliku html. Powróćmy zatem do htmla i zaraz przed znacznikiem zamykającym </body> dodajmy biblioteke jQuery. Zdecydowaliśmy się na wersje 1.11.1, zatem utworzyliśmy nowy folder o nazwe "js" i w nim wkleiliśmy plik z biblioteka jQuery. Pozostało nam jedynie wkleić kod odpowiedzialny za ładownie biblioteki do naszego projektu:

<script src="/js/jquery-1.11.1.min.js"></script>

Bibliotekę mamy załączoną, dodajmy teraz akcję dla naszego elementu 'menu-trigger', która to po kliknięciu w ten element rozwinie lub zwinie nam nasze menu. Umieszczamy ją zaraz pod załączona biblioteką

<script>

$(document).ready(function(){

$(".menu-trigger").click(function(){

$('nav').slideToggle();

});

});

</script>

Cały nasz kod html powinien wyglądać tak:

<!DOCTYPE HTML>

<html lang="pl">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Strona RWD</title>

<link rel="stylesheet" href="/css/style.css">

</head>

<body>

 

<div id="container">

 

<!-- header -->

<header>

<img src="/images/header.jpg" alt=""/>

</header>

 

<!-- sidebar -->

<aside>

<div class="menu-trigger">Menu</div>

<nav>

<ul>

<li><a href="#">Start</a></li>

<li><a href="#">O firmie</a></li>

<li><a href="#">Oferta</a></li>

<li><a href="#">Galeria</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

</nav>

</aside>

 

<!-- main -->

<section id="main">

<h1>RWD tutorial</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi.</p>

</section>

 

<!-- footer -->

<footer>

<p>Footstep.pl © 2013</p>

</footer>

 

</div>

 

<script src="/js/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$(".menu-trigger").click(function(){

$('nav').slideToggle();

});

});

</script>

 

</body>

</html>

Jak widać, stworzenie w pełni responsywnego menu w cale nie jest trudne - na pewno mając opanowane nasze wcześniejsze poradniki o responsywnym tworzeniu stron dodanie do nich nawigacji przystosowanej do urządzeń mobilnych nie sprawi większych problemów. Jedynym nowym elementem, który pojawił się w tej części poradnika jest wykorzystanie funkcji biblioteki jQuery, jednak stopień trudności użytych skryptów jest na tyle niewielki, że nie powinien przeszkodzić w próbach stworzenia strony w pełni dostosowanej pod różne rozdzielczości ekranów.

Warto dodać, że responsywne menu jest jednym z determinujących czynników użyteczności strony dla telefonów komórkowych, które pozwalają w ergonomiczny sposób umożliwić odwiedzającym korzystanie ze strony internetowej.