Autor: Piotr Michalski (Ericpol) Strona: www.itfest.pl -------------------------------------- #IT fest to dwudniowy festiwal prezentujący kierunki oraz możliwości rozwoju kariery zawodowej w IT. W ramach projektu odbędą się targi pracy informatyka, prelekcje ekspertów z branży IT oraz warsztaty i szkolenia informatyczne. Tematami #IT fest 2013 są: - Optymalizacja (poruszane aspekty: Architektura, Praca w chmurze, Bezpieczeństwo) - Big data (poruszane aspekty: Business Intelligence, Real Time Analysis) - HR w IT (poruszane aspekty: Personal Brand w social media, Możliwości Rozwoju kariery w IT) - Responsive Web Design/Mobile (poruszane aspekty: Tworzenie rozwiązań, Development)

2. ericpol.com
Agenda
 Co to jest RWD?
 Dlaczego warto myśleć o RWD w
kontekście aplikacji biznesowych?
 Przykłady
2013-06-20 2

3. Ericpol

4. ericpol.com
Ericpol - fakty
2013-06-20 4
Na polskim rynku od 22 lat
Prawie 1700 pracowników
w 4 krajach
Siedziba w Łodzi
Biura: Kraków, Warszawa
Spółki zależne:
Linköping, Szwecja
Lwów, Ukraina
Brześć, Białoruś
Certyfikaty
ISO 9001 & 14001

5. ericpol.com
Oferta
2013-06-20 5
Obszary biznesowe
Telekomunikacja
 Radio Access Networks
 Core Networks
 Value Added Services
 Test System Solutions
M2M
 Oprogramowanie
wbudowane
 Platformy otwarte
 Telematyka
 Infotainment
Opieka medyczna
 Systemy dla opieki
medycznej
 e-Health
Wynajem kadry
inżynierskiej
Konsulting
Hosting produktu
oprogramowania
Rozwiązania
dedykowane
Outsourcing
projektów
Aplikacje dla biznesu
 Wsparcie procesów
biznesowych
 Business Intelligence
Bankowość i
Finanse
 Rozwiązania IT
 Oprogramowanie
 Internetowe serwisy
transakcyjne
 Infrastruktura
Usługi
Szkolenia
Sektor publiczny

6. ericpol.com
Ericpol – w liczbach
2013-06-20 6
Ponad
75krajów,
w których byli
nasi pracownicy
Ponad
700zrealizowanych
projektów
Ponad
2 mldużytkowników
współtworzonego
przez nas
oprogramowania
Ponad
1mlnsamochodów z naszym
oprogramowaniem

7. Co to jest RWD?

8. ericpol.com 2013-06-20 8
Kiedyś było prościej…

9. ericpol.com 2013-06-20 9
Kiedyś było prościej…

10. ericpol.com
Co to jest RWD?
2013-06-20 10
Responsive Web Design
Umożliwia dostarczenie jednej wersji serwisu lub aplikacji www.

11. ericpol.com
Co to jest RWD?
2013-06-20 11
Fluid Grids
Pozwala na dopasowanie układu do różnych szerokości.
31,25% (300 px)
100% (970 px)

12. ericpol.com
Co to jest RWD?
2013-06-20 12
Media Queries
Pozwala na dopasowanie układu do różnych szerokości.
@media screen and (min-width: 480px) {
.content { float: left; }
.social_icons { display: none }
// itd... }

13. ericpol.com
 Przedzialy dla rwd
2013-06-20 13
320px 480px 600px 768px 900px 1200px 1200+px
KOMPUTER
TABLET
TELEFON

14. ericpol.com
Technicznie RWD jest
proste, ale …
2013-06-20 14

15. ericpol.com
… urządzeń mobilnych
używamy inaczej niż
komputerów.
2013-06-20 15

16. ericpol.com
Co to jest RWD?
2013-06-20 16
Inny sposób interakcji
Powinna być możliwość wygodnego użycia zarówno za pomocą myszki i
klawiatury oraz na ekranie dotykowym.

17. ericpol.com
Co to jest RWD?
2013-06-20 17
Rozmiary elementów
Część urządzeń mobilnych ma wysoką rozdzielczość na małych ekranach.
Trzeba zadbać o odpowiednią czytelność tekstu oraz wielkość elementów
nawigacyjnych

18. ericpol.com
Co to jest RWD?
2013-06-20 18
Architektura informacji
Trzeba dokładnie zaplanować rozmieszczenie poszczególnych elementów na
każdym z przedziałów, żeby zapewnić wygodę użycia.

19. ericpol.com
RWD podsumowanie
Zalety RWD
 UX – unifikacja obsługi na wszystkich
urządzeniach
 Wdrażanie – brak przekierowań z wersji pełnej
na mobilną
 Utrzymanie – jedna wersja witryny
 Zasoby – oszczędza zasoby serwera
 Analityka – dane na temat ruchu ze wszystkich
urządzeń
 Elastyczność – działa na wielu urządzeniach
niezależnie od systemu operacyjnego
2013-06-20 19

20. ericpol.com
RWD podsumowanie
Wady RWD
 UX – dostosowanie do różnych urządzeń (nie
zawsze to jest dobre rozwiązanie)
 Wdrażanie – dłuższa faza projektowania
przygotowania
 Czas ładowania – większa objętość ze
względu na dodatkowy kod
 Zgodność – starsze przeglądarki nie
obsługują media queries
2013-06-20 20

21. RWD vs Aplikacje biznesowe

22. ericpol.com
Dlaczego mobile?
Problemy klientów
 Sprzęt i oprogramowanie
 Organizacja firm
 Bezpieczeństwo systemów
 Bezpieczeństwo danych
 Wiele systemów operacyjnych
2013-06-20 22
Jeżeli pojawią się bezpieczne sposoby udostępniania danych większość
problemów będzie rozwiązana

23. ericpol.com
Dlaczego mobile?
2013-06-20 23
Fot. Go-Globe

24. ericpol.com
Dlaczego mobile?
2013-06-20 24
Użytkownicy mobilni

25. ericpol.com
Dlaczego mobile?
2013-06-20 25
PRODUKCJA UTRZYMANIE +3 LATA
Oprogramowanie

26. ericpol.com
Dlaczego mobile?
Mobile to nowe możliwości
 Zmiana kontekstu użycia pozwala
usprawnienie działania firmy
 Szybszy przepływ informacji
 Usprawnienie procesów np. Obieg
dokumentów
2013-06-20 26

27. ericpol.com 2013-06-20 27
ZALETY WADY
Aplikacja mobilna  Możliwość pracy offline
 Pełen dostęp do urządzenia i
jego możliwości
 Dostęp tylko jeżeli jest
zainstalowana
 Wysokie koszty (wiele
systemów)
„Lekka” strona  Szybki dostęp i krótki czas
ładowania
 Niskie UX na tabletach
 Wyższe koszty – osobna
wersja
 Dostęp tylko online
RWD  Jedna wersja na wszystkie
urządzenia
 Dopasowanie do urządzeń
 Dostęp tylko online

28. ericpol.com
Dlaczego mobile?
RWD w aplikacjach biznesowych:
 Elastyczne przejście z komputerów na urządzania
mobilne
 Ogranicza koszty utrzymania w przyszłości
 Otwiera drogę do aplikacji
2013-06-20 28

29. ericpol.com 2013-06-20 29
Dziękujemy za uwagę
Piotr Michalski
Senior Software Developer