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

Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Embed Size (px)

DESCRIPTION

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?

Citation preview

Page 1: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Dostępność i mobilność - o co chodzi?

Piotr BaczyńskiEsencja Studio S.C.21 maja 2013, Warszawa

Page 2: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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.

Page 3: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 4: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Dlaczego dostęp mobilny jest pierwszą rzeczą, o której powinieneś myśleć

projektując swój serwis?

Page 5: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Ź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

Page 6: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Tak

Nie

60% Polaków będzie miałosmartfony 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/

Page 7: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Ź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

Page 8: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 9: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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)

Page 10: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 11: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 12: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 13: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

4 KLUCZOWE ZASADY MOBILNOŚCI STRONY WWW

1. Technicznie profesjonalny RWD2. Szybki czas ładowania strony3. Łatwe przeglądanie4. Spójność wizualna wersji mobilnej

Page 14: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 15: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

RWD – profesjonalna technika wykonania

„Elastyczne obrazy” obrazy skalowane w relatywnych proporcjach

Page 16: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

RWD – profesjonalna technika wykonania

“Media Queries”zaaplikowanie odpowiednich reguł CSS (definicji wyglądu struktury serwisu) bazujących na rozmiarze przeglądarki

Page 17: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 18: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

UŁATWIENIE przeglądania www

UNIKAJ niepotrzebnych treści, tagów i komentarzy

NIE UŻYWAJ popupów

Page 19: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 20: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 21: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

SPÓJNOŚĆ WIZUALNA wersji mobile i tradycyjnej

Jeden KEY VISUAL = ta sama identyfikacja wizualna

Page 22: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Jak działa dobrze wykonanyserwis WWW z RWD?

http://www.smashingmagazine.com/

SPRAWDŹMY!

Page 23: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

NARZĘDZIA do mobilnej www

Co może nam posłużyć do jej budowy?

DARMOWE WIREFRAME’Y, czyli szkielety szablonównp. 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 CMSnp. płatne, lecz wysokiej jakości wykonania szablony ThemeForest.net

Page 24: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

NARZĘDZIA do mobilnej www

Przetestuj swój projekt pod kątem...

... poziomu przyjazności kodu źródłowego urządzeniom mobilnymhttp://validator.w3.org/mobile/

... wyświetlania na różnych urządzeniach i ekranach http://quirktools.com/screenfly/

... wyświetlania na różnych iPadachhttp://ipadpeek.com/

Page 25: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

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

Page 26: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Geolokalizacja

Page 27: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Geolokalizacja

Singapore

Chile

Page 28: Mobilność i dostępność - Piotr Baczyński, Esencja Studio

Dziękuję za uwagę!

Piotr Baczyński+48 511 314 [email protected]