Mobilność i dostępność - Piotr Baczyński, Esencja Studio
Download as PPTX, PDF1 like689 views
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?
More Related Content
Viewers also liked (20)
Similar to Mobilność i dostępność - Piotr Baczyński, Esencja Studio (20)
More from Sektor 3.0 (20)
Mobilność i dostępność - Piotr Baczyński, Esencja Studio
- 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?
- 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/
- 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
- 28. Dziękuję za uwagę! Piotr Baczyński +48 511 314 777 pb@esencja-studio.pl