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ę: Tworzenie stron responsywnych - tutorial

przez: Studio Interaktywne Footstep Odsłony: 12094

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

Jak zrobić stronę responsywną?

Na naszym blogu opublikowaliśmy już artykuł, w którym pokazaliśmy jeden ze sposobów tworzenia stron responsywnych. Postanowiliśmy nieco ulepszyć nasz projekt i zaprezentować kolejną odsłonę poradnika dotyczącego tworzenia stron RWD. Tym razem pokażemy rozwiązanie oparte na wartościach procentowych, co pozwoli lepiej dopasować strony pod wymagania najróżniejszych urządzeń, a także lepiej wyświetlić stronę.

Nasza wcześniejsza wersja opierała się o stałe wartości pikselowe. Stosując takie rozwiązanie nasza strona dla określonych rozdzielczości przeglądarki ma przypisaną konkretną stałą szerokość. Jak najbardziej gwarantuje to poprawne wyświetlanie się strony, jednak istnieje ryzyko, że dla pewnych rozdzielczości mogą pojawić się po bokach strony puste przestrzenie. Nie jest to pożądane zarówno ze względów estetycznych, jak i ekonomicznych - nie ma potrzeby marnować dostępną przestrzeń na wyświetlaczu, skoro możemy wykorzystać ją w całości.

HTML5

Jak wspomnieliśmy, będziemy ulepszać naszą dotychczasową wersję, tak więc nie będzie ona się znacząco różniła od poprzedniej. Kod HTML pozostaje bez zmian, dla przypomnienia umieszczamy go ponownie:

<!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>

<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

Wszystkie modyfikacje ulepszające naszą responsywną stronę wykonywaliśmy w arkuszu stylów CSS. Przypomnijmy jaką zawartość ma nasz plik CSS:

* {padding:0;margin:0;}

 

html {width:100%;height:100%;}

body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}

 

.container {margin:0 auto;}

 

header {margin:25px 0;}

header img {width:100%;}

 

aside {float:left;margin:0 0 25px;}

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;}

 

#main {float:right;margin:0 0 25px;}

 

footer {clear:both;color:#FFF;background:#121212;padding:15px 0 15px 30px;margin:0 0 25px;}

 

 

@media (min-width: 1100px) {

.container {width:1050px;}

aside {width:30%;}

#main {width:65%;}

}

@media (max-width: 1100px) and (min-width: 1000px) {

.container {width:950px;}

aside {width:30%;}

#main {width:65%;}

}

@media (max-width: 1000px) and (min-width: 800px) {

.container {width:750px;}

aside {width:30%;}

#main {width:65%;}

}

@media (max-width: 800px) and (min-width: 500px) {

.container {width:450px;}

aside,

#main {width:100%;}

}

@media (max-width: 500px) {

.container {width:90%;}

aside,

#main {width:100%;}

}

Aby oprzeć naszą stronę o wartości pikselowe musimy zmodyfikowac element '.container'.

.container {width:90%;max-width:1050px;margin:0 auto;}

Jak widać nadaliśmy mu szerokość na 90% dostępnej przestrzeni oraz ustaliliśmy jego maksymalną szerokość na 1050px.

Następnym krokiem będzie modyfikacja naszych warunków Media Queries. Zdefiniowaliśmy już style dla naszego elementu '.container' pozostało nam tylko uporządkowanie układu kolumn na naszej stronie. We wcześniejszej wersji ustaliliśmy, że zmiana układu z dwukolunowego do jednokolumnowego ma następować przy szerokości przeglądarki 800px. W tym przypadku możemy skorzystać z takich warunków Media Queries:

@media (min-width: 800px) {

/* tutaj style powyżej 800px */

}

@media (max-width: 800px) {

/* tutaj style poniżej 800px */

}

Zastosowanie takich warunków umożliwi nam zdefiniowanie stylów dla szerokości przeglądarki powyżej 800px oraz poniżej 800px. Uzupełnijmy nasze warunki o odpowiednie style:

@media (min-width: 800px) {

aside {width:30%;}

#main {width:65%;}

}

@media (max-width: 800px) {

aside,

#main {width:100%;}

}

Cały nasz kod CSS powienien wyglądać teraz tak:

* {padding:0;margin:0;}

 

html {width:100%;height:100%;}

body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}

 

.container {width:90%;max-width:1050px;margin:0 auto;}

 

header {margin:25px 0;}

header img {width:100%;}

 

aside {float:left;margin:0 0 25px;}

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;}

 

#main {float:right;margin:0 0 25px;}

 

footer {clear:both;color:#FFF;background:#121212;padding:15px 0 15px 30px;margin:0 0 25px;}

 

@media (min-width: 800px) {

aside {width:30%;}

#main {width:65%;}

}

@media (max-width: 800px) {

aside,

#main {width:100%;}

}

Jak widać takie rozwiązanie pozwoliło nam znacznie zmniejszyć zawartość arkusza CSS, a nasza strona wykorzystuje teraz znacznie większą cześć wyświetlacza przy mniejszych rozdzielczościach, przez co zyskuje na czytelności.

Wykorzystanie wartości procentowych przy tworzeniu stron responsywnych nie jest trudne, a poprawne zakodowanie strony przy ich wykorzystaniu może pozytywnie wpłynąć na końcowy efekt wizualny – czyli dokładnie na to, czego oczekujemy od takich stron.

Już niedługo na łamach naszego bloga pojawi się kolejny artykuł dotyczący tworzenia stron responsywnych. Pokażemy w nim jak w prosty sposób za pomocą arkusza stylów CSS dodać do strony responsywne menu dostosowane zarówno do wyświetlaczy urządzeń mobilnych jak i standardowych komputerów. Tymczasem zapraszamy do zapoznania się z naszą ofertą tworzenia stron responsywnych.