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

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

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.

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

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

projektując swój serwis?

Ź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

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/

Ź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

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

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)

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

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

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

4 KLUCZOWE ZASADY MOBILNOŚCI STRONY WWW

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

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

RWD – profesjonalna technika wykonania

„Elastyczne obrazy” obrazy skalowane w relatywnych proporcjach

RWD – profesjonalna technika wykonania

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

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

UŁATWIENIE przeglądania www

UNIKAJ niepotrzebnych treści, tagów i komentarzy

NIE UŻYWAJ popupów

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

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

SPÓJNOŚĆ WIZUALNA wersji mobile i tradycyjnej

Jeden KEY VISUAL = ta sama identyfikacja wizualna

Jak działa dobrze wykonanyserwis WWW z RWD?

http://www.smashingmagazine.com/

SPRAWDŹMY!

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

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/

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

Geolokalizacja

Geolokalizacja

Singapore

Chile

Dziękuję za uwagę!

Piotr Baczyński+48 511 314 777pb@esencja-studio.pl