O czym należy pamiętać, żeby strona była dostosowana dla wszystkich użytkowników internetu? Jakie są podstawowe zasady tworzenia stron z myślą o urządzeniach mobilnych? Dlaczego dostęp mobilny jest pierwszą rzeczą, o której powinienneś myśleć projektując swój serwis? Jakie narzędzia można wykorzystać do stworzenia projektu serwisu mobilnego? Dlaczego strony Internetowe coraz częściej pytają o możliwość określenia położenia odwiedzającego i czy Twoja strona też powinna zbierać takie informacje?

1. Dostępność i mobilność - o co chodzi?
Piotr Baczyński
Esencja Studio S.C.
21 maja 2013, Warszawa

2. Piotr Baczyński - specjalizuje się w planowaniu efektywnej
komunikacji. Współwłaściciel oraz dyrektor kreatywny agencji
Esencja. Trener social media w European Academy of Diplomacy.
Autor kilkudziesięciu internetowych kampanii marketingowych
przeprowadzonych dla firm takich jak Microsoft, Polkomtel,
Decathlon, BZ WBK i wielu innych.
Esencja Studio zrealizowała szereg projektów interaktywnych
związanych z kompleksowym wspieraniem wizerunku marki,
m.in. stron www, serwisów, portali oraz aplikacji mobilnych.

3. Dostępność, mobilność – co znaczy i
dlaczego jest ważne?
MOBILNOŚĆ
możliwość korzystania ze
stron internetowych na
różnych urządzeniach
mobilnych jak smartfony i
tablety
DOSTĘPNOŚĆ
przygotowanie danej
witryny lub portalu w
sposób uniwersalny,
osiągalny dla większości
użytkowników
KORZYŚĆ
zwiększenie ilości osób mogących skorzystać z
Twojej strony internetowej

4. Dlaczego dostęp mobilny jest pierwszą
rzeczą, o której powinieneś myśleć
projektując swój serwis?

5. Źródło: http://www.mobiletrends.pl/raport-marketing-mobilny-w-polsce-az-74-polakow-w-wieku-15-19-lat-posiada-smartfon/
Mobilność w Polsce

6. Tak
Nie
60% Polaków będzie miało
smartfony na początku roku 2015
64% Polaków posiadających
smartfony korzysta z przeglądarek
internetowych
Mobilność w Polsce
Tak
Nie
Źródło: http://jestem.mobi/2014/02/smartfonizacja-w-polsce-2014-najwazniejsze-liczby-infografika/

7. Źródło: http://www.mobiletrends.pl/raport-marketing-mobilny-w-polsce-az-74-polakow-w-wieku-15-19-lat-posiada-smartfon/
Mobilność na świecie

8. 4 KLUCZOWE ZASADY
DOSTĘPNOŚCI STRONY WWW
Dostępność strony dla wszystkich użytkowników to możliwość jej
przeglądania na RÓŻNYCH:
1. URZĄDZENIACH, np. komputery stacjonarne, laptopty oraz urządzenia
mobilne (uzyskuje się to za pomocą Responsive Web Design –
następny slajd)
2. PLATFORMACH SYSTEMOWYCH, np. Windows, Linux, iOS
3. PRZEGLĄDARKACH INTERNETOWYCH, np. FireFox, Google Chrome,
Safari, Internet Explorer
4. TECHNOLOGIACH, np. komputerach wyposażonych w wolne łącza

9. Responsive Web Design (RWD), czyli
i dostępność, i mobilność
Szablon strony internetowej w wersji RWD oznacza
uniwersalny szablon na większość ekranów w tym:
- wysokoformatowych (komputery, laptopy,
notebooki)
- mobilne urządzenia (tablety, smartfony)

10. Responsive Web Design (RWD), czyli
i dostępność, i mobilność

11. Responsive Web Design (RWD), czyli
i dostępność, i mobilność

12. Responsive Web Design (RWD), czyli
i dostępność, i mobilność

13. 4 KLUCZOWE ZASADY
MOBILNOŚCI STRONY WWW
1. Technicznie profesjonalny RWD
2. Szybki czas ładowania strony
3. Łatwe przeglądanie
4. Spójność wizualna wersji mobilnej

14. RWD – profesjonalna technika
wykonania
„Płynna siatka”
- design bazujący na procentowo wyrażonych wartościach
rozmiaru
- adaptujący się automatycznie do szerokości ekranu

15. RWD – profesjonalna technika
wykonania
„Elastyczne obrazy”
obrazy skalowane w relatywnych proporcjach

16. RWD – profesjonalna technika
wykonania
“Media Queries”
zaaplikowanie odpowiednich reguł CSS (definicji wyglądu
struktury serwisu) bazujących na rozmiarze przeglądarki

17. PRZYSPIESZENIE czasu ładowania
strony
UNIKAJ ciężkich (wagowo) obrazków i
grafiki
NIE UŻYWAJ Flasha, w zamian do
animacji HTML5 lub JQuery
REDUKUJ ilość kodu źródłowego

18. UŁATWIENIE przeglądania www
UNIKAJ niepotrzebnych treści, tagów i
komentarzy
NIE UŻYWAJ popupów

19. UŁATWIENIE przeglądania www
UPRASZCZAJ - usuwaj zbędne
ozdobniki graficzne, przekazuj tylko
esencję treści
WYPEŁNIAJ optymalnie przestrzeń
layoutu unikając pustych przestrzeni
UŻYWAJ lekkiego szablonu

20. UŁATWIENIE przeglądania www
STOSUJ łatwą nawigację: przewijanie
pionowe, proste menu
PROJEKTUJ łatwo klikalne palcem
elementy o odpowiednim rozmiarze,
nie za małe
PRIORYTETYZUJ treści i używaj list
wypunktowanych

21. SPÓJNOŚĆ WIZUALNA
wersji mobile i tradycyjnej
Jeden KEY VISUAL = ta sama identyfikacja wizualna

22. Jak działa dobrze wykonany
serwis WWW z RWD?
http://www.smashingmagazine.com/
SPRAWDŹMY!

23. NARZĘDZIA do mobilnej www
Co może nam posłużyć do jej budowy?
DARMOWE WIREFRAME’Y, czyli szkielety szablonów
np. http://speckyboy.com/2014/03/31/20-free-web-mobile-wireframe-templates/
PLATFORMA WORDPRESS z darmowymi jak i płatnymi szablonami w wersji RWD
- Szybka instalacja
- Dla amatorów jak i profesjonalistów
- Wiele możliwości
Katalog 325 darmowych i gotowych szablonów z RWD do WordPress’a:
http://www.webdesignrazzi.com/2014/free-wordpress-themes/
GOTOWE SZABLONY WIELOFUNKCYJNE, które można modyfikować i dostosować za pomocą
kreatora, np.: Salient Eye Candy
GOTOWE SZABLONY POD INNE SYSTEMY CMS
np. płatne, lecz wysokiej jakości wykonania szablony ThemeForest.net

24. NARZĘDZIA do mobilnej www
Przetestuj swój projekt pod kątem...
... poziomu przyjazności kodu źródłowego urządzeniom mobilnym
http://validator.w3.org/mobile/
... wyświetlania na różnych urządzeniach i ekranach
http://quirktools.com/screenfly/
... wyświetlania na różnych iPadach
http://ipadpeek.com/

25. Geolokalizacja
Dlaczego strony Internetowe coraz częściej
pytają o możliwość określenia położenia
odwiedzającego?
• Przeglądanie uwzględniające położenie
• Mapy
• Geo-targeting

26. Geolokalizacja

27. Geolokalizacja
Singapore
Chile

28. Dziękuję za uwagę!
Piotr Baczyński
+48 511 314 777
pb@esencja-studio.pl