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ę: Strona responsywna - tutorial

przez: Studio Interaktywne Footstep Odsłony: 63708

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

Projektowanie stron responsywnych

Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto zadbać o użyteczność strony na urządzeniach przenośnych.

Specjalnie dla naszych czytelników, którzy samodzielnie wprowadzają zmiany na swoich stronach internetowych, przygotowaliśmy poradnik dotyczący tworzenia stron responsywnych. Dzięki zastosowaniu się do naszych wytycznych lub bazując na udostępnionym przykładzie możliwe jest stworzenie w pełni responsywnej strony internetowej.

Rozdzielczości urządzeń mobilnych

Pierwszym krokiem do stworzenia responsywnej strony internetowej jest zastanowienie się nad rozdzielczościami urządzeń przenośnych, na których strona będzie wyświetlana. W głównej mierze interesuje nas szerokość.

Rozdzielczości ekranów urządzeń mobilnych jest sporo. Zestawienie najpopularniejszych z nich możemy znaleźć tutaj. Po małej analizie ustaliliśmy, że szerokość naszej strony będzie przyjmować takie wartości dla poszczególnych urządzeń:

  • 1050px (komputer)
  • 950px (tablet poziomo)
  • 750px (tablet pionowo)
  • 450px (telefon poziomo)
  • 300px (telefon pionowo)

Każdy może dobrać wymiary indywidualnie. My skupimy się na wartościach przyjętych przez nas i na nich będziemy opierać nasz tutorial.

Layout strony

Po ustaleniu wymiarów przejdźmy do stworzenia prostego layoutu strony. Postanowiliśmy, że nasz layout będzie wyglądał tak:

Tworzenie stron responsywnych

Nie jest on przypadkowy - zaplanowaliśmy go tak, aby w łatwy sposób można było dopasować go do urządzeń mobilnych o małej szerokości. Warto podkreślić, iż nie wszystkie strony da się zrobić jako responsywne (nie uda nam się przecież przenieść nagłówka na sam dół czy też stopki na samą górę). Warto więc dokładnie zaplanować swój layout, aby można było go swobodnie dopasowywać do poszczególnych szerokości. Nasz został zaplanowany, aby na urządzeniach z najmniejszą rozdzielczością nasza strona wyświetlała się w następujący sposób:

Projektowanie stron responsywnych

HTML5

Wiemy jak ma wyglądać nasza strona, przejdźmy więc do edytora i zajmijmy się kodem HTML. Dla naszego layoutu szkielet wyglądać będzie w sposób następujący (dodaliśmy również zawartość naszej strony):

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

Nie będziemy szczegółowo opisywać tego kodu, gdyż nie ma w nim nic skomplikowanego. Z ważniejszych rzeczy do odnotowania jest to, że arkusz stylów znajduje się w folderze pod nazwą 'css', obrazy znajdują się w folderze 'images' a także dodaliśmy linijkę:

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

aby zdefiniować szerokość okna przeglądarki dla Media Queries.

CSS3

Nasz szkielet jest gotowy, możemy teraz zająć się CSS aby nasza strona nabrała odpowiedniego wyglądu. My ustaliliśmy jej szerokość na 1050px tak więc nasz kod CSS wygląda 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:1050px;margin:0 auto;}

 

header {margin:25px 0;}

header img {width:100%;}

 

aside {float:left;width:30%;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;width:65%;margin:0 0 25px;}

 

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

Teraz nasza strona wygląda tak:

Tworzenie stron responsywnych

Można powiedzieć, że jest gotowa. Nam jednak zależy na stronie responsywnej.

Responsywność strony

Aby nasza strona stała się stroną responsywną musimy dodać do naszego arkusza CSS warunki Media Queries. Aby posługiwać się warunkami Media Queries musimy dowiedzieć się czym one są i jak działają. Przedstawmy przykładową linię kodu CSS zawierającą warunek Media Queries:

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

/* style css */

}

W kodzie powyżej został podany warunek który definiuje, że wpisane w nawias klamrowy style będą ‘aktywne’ tylko dla szerokości okna przeglądarki mniejszej niż 800px gdyż ustaliliśmy wartość ‘max-width’ na 800px i dla szerokości okna przeglądarki większej niż 600px gdyż ustaliliśmy wartość ‘min-width’ na 600px. Tak więc wpisane style będą ‘aktywne’ gdy szerokość okna przeglądarki będzie zawierała się w przedziale od 800px do 600px.

Możemy również stosować taki zapis:

@media (min-width: 600px) {

/* style css */

}

W takim przypadku nie mamy górnej granicy czyli ‘max-width’ i warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie większa niż 600px. Analogiczna sytuacja jest z zapisem:

@media (max-width: 800px) {

/* style css */

}

W takim przypadku nie mamy dolnej granicy czyli ‘min-width’ tak więc warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie mniejsza niż 800px.

Teraz przejdźmy do ustalania warunków CSS Media Queries dla naszej strony. Najłatwiejszym sposobem jest rozpisanie sobie wszystkich naszych szerokości umieszczając je w warunkach Media Queries bez podawania wartości oraz usuwając skrajne warunki

@media (min-width: px) {

/* style dla 1050px */

}

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

/* style dla 950px */

}

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

/* style dla 750px */

}

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

/* style dla 450px */

}

@media (max-width: px) {

/* style dla 300px */

}

Z pierwszego warunku odpowiadającego za wyświetlanie strony na komputerach usunęliśmy górną granicę 'max'. Tym samym ustaliliśmy że ten warunek będzie spełniany dla każdej szerokości większej niż ta którą zdefiniujemy. To samo dotyczy najmniejszego warunku. Tutaj usunęlismy wartość 'min' sprawiając, że warunek będzie spełniany dla każdej szerokości poniżej.

1050px (komputer)

Mając przygotowany szkielet możemy zdefiniować wartości dla naszych warunków. Zacznijmy od największego czyli odpowiedzialnego za wyświetlanie strony na komputerach. Wiemy, że nasza strona w tym warunku ma mieć szerokość 1050px, musi więc wyświetlać się w oknie przeglądarki większym niż 1050px tak, aby nie pojawił się na dole poziomy pasek przewijania. Dodajmy jeszcze do naszej wartości 50px 'luzu' na pionowy pasek przeglądania otrzymując w ten sposób wartość 1100px, którą to zastosujemy w pierwszym warunku.

@media (min-width: 1100px) {

/* style dla 1050px */

}

950px (tablet orientacja pozioma)

Czas na kolejny warunek. We wcześniejszym zdefiniowaliśmy wartość 1100px jako wartość 'min'. W tym warunku musimy przyjąć tę wartość jako wartość 'max' (aby zachować ciągłość przedziałów). Wartość 'min' określamy w taki sam sposób jak robiliśmy to w poprzednim warunku tak więc otrzymujemy 1000px (950px szerokość strony plus 50px 'luzu')

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

/* style dla 950px */

}

750px (tablet orientacja pionowa)

Kolejny warunek. Sytuacja analogiczna do poprzedniego.

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

/* style dla 750px */

}

450px (telefon orientacja pozioma)

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

/* style dla 450px */

}

300px (telefon orientacja pionowa)

W tym przypadku nie mamy wartości 'min' tak więc przepisujemy tylko do wartości 'max' wartość 'min' z poprzedniego warunku.

@media (max-width: 500px) {

/* style dla 300px */

}

Możemy teraz przejść do wpisywania w przygotowane warunki style CSS dla naszej strony:

@media (min-width: 1100px) {

.container {width:1050px;margin:0 auto;}

}

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

.container {width:950px;margin:0 auto;}

}

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

.container {width:750px;margin:0 auto;}

}

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

.container {width:450px;margin:0 auto;}

}

@media (max-width: 500px) {

.container {width:300px;margin:0 auto;}

}

Jak widzimy wartość atrybutu margin jest dla każdego warunku taka sama więc możemy wyciągnąć ją poza warunki aby nie powtarzać jej w każdym z nich:

.container {margin:0 auto;}

 

@media (min-width: 1100px) {

.container {width:1050px;}

}

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

.container {width:950px;}

}

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

.container {width:750px;}

}

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

.container {width:450px;}

}

@media (max-width: 500px) {

.container {width:300px;}

}

Z uwagi na to ze na rynku istnieje wiele urządzeń mobilnych również takich o wyświetlaczach z rozdzielczością mniejsza niż 300px dobrym rozwiązaniem będzie zamiana dla najmniejszego warunku wartości szerokości strony z podanej w pikselach na procentową. Zastosujmy więc szerokość 90% całej dostępnej szerokości urządzenia.

@media (max-width: 500px) {

.container {width:90%;}

}

W tym momencie nasza strona jest już responsywna, lecz przy małych rozdzielczościach staje się nieczytelna. Zróbmy jeszcze porządek w taki sposób, aby z układu dwukolumnowego powstał układ jedno kolumnowy, pamiętając oczywiście o pogrupowaniu odpowiednio powtarzających się parametrów:

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

}

Tym prostym sposobem udało nam się stworzyć w pełni responsywną stronę.

Pamiętajmy jednak, że nie da się jednoznacznie sprecyzować tworzenia stron responsywnych. My skorzystaliśmy z Media Queries i pokazaliśmy jedynie ich podstawe działanie. Istnieją również inne sposoby uzyskania takiego samego efektu np. wykorzystując JavaScript. Mamy jednak nadzieje, że nasz tutorial przyda się niejednemu początkującemu webmasterowi, pomoże mu zrozumieć zasadę działania i wprowadzi go w temat responsywnych stron internetowych.

Zapraszamy również do zapoznania się z drugą częścią poradnika - prezentującą sposób tworzenia stron responsywnych opartych o wartości procentowe.