Po pierwsze to polecam tytuł: "Rusz głową" od wydawnictwa O'Reilly. Pomimo, iż jestem webdizajnerem-amatorem to ćwiczę się w tworzeniu stron opartych o profesjonalne utwory. Bywa z tym niekiedy ciekawie.
Na dzień dzisiejszy mam przed sobą nieruchomosc-meszna.pl i zadanie dostosowania jej archaicznego dizajnu do sieci przenośnej.1 Pamiętam, iż dla stron mobilnych używa się dodatkowego, specjalnego pliku kaskadowych arkuszy stylów. Problem w tym, że ta strona na ten moment ich nie ma. Brakuje też standardowego .css reset oraz instrukcji przekierowania z adresu bez www na adres www2.
Na to pytanie nie ma jasnej odpowiedzi. O ile rynek urządzeń stacjonarnych jest mi dobrze znany i wiem, że istnieją od lat badania i ilości teorii typu 960px to rynek mobilny jest innowacją, co ma przede mną tajemnicę.
Jak widać powyżej rozrzut szerokości jest monstrualny. Co robimy? Dodajemy reguły dla urządzeń mobilnych, stacjonarnych i do druku pamiętając przy tym, że układ z sześciu kolumn będzie czytelny na urządzeniach HD, ale pomniejszony na handheld lub phone będzie zupełnie nieczytelny. Trik polega na tym, by cel osiągnąć wyłącznie stylami .css. Do dzieła!
Oto jak strona wygląda przed aplikacją styli - układ pływający (korzystam z ShrinkTheWeb). Nienajlepiej. Wygląda trochę jak filet z kurczaka przed przyrządzeniem. Może mój mózg ma za mało pamięci operacyjnej? Trik polega na tym, aby kolorowe kolumny (pomarańczowa, czerwona i różowa) wyświetlały się jedna pod drugą. Nie chce mi się dodawać reguł dla każdej z szerokości, bo mógłym tak dodawać godzinę. Wydaje się, że można podsumować badanie. Otóż istnieje trzy-pięć kluczowe rozdzielczości:
Statystyki Gemius są całkiem tożsame z StatCounter, więc ich wyniki uznaję za wiarygodne.
Ciekawa sytuacja ma miejsce przy okazji rozdzielczości 640x360 bowiem jest to rozdzielczość telefoniczna... Jest smartfon o szerokości wyższej niż wysokość. Jak to oznaczamy w .css?
Na koniec skąd aż 30% niezidentyfikowanych rozdzielczości? Odpowiedź brzmi: "tanizna i chińszczyzna". Jesteśmy importerami milionów urządzeń niestandaryzowanych i taki jest oto efekt, że musimy zajmować się takimi głupotami jak dostosowanie rozdzielczości od 1x1px aż po 6400x6400 czy jaka tam jest teraz największa notowana?
Indeks.
1. Nie lubię zapożyczeń, więc korzystam z synonimu sieć przenośna dla stron mobilnych.
2. Adres z WWW łatwiej jest namierzyć za pośrednictwem narzędzi SEO. Adresy bez WWW prawdopodobnie zwrócą wyniki powiększone o subdomeny, a to jest nieporządane - o ile serwis nie jest blackhat.
3. Tak zwana w żargonie: "panorama". "Mnie kojarzy się z Racławicami." - SuperEgo.
Na dzień dzisiejszy mam przed sobą nieruchomosc-meszna.pl i zadanie dostosowania jej archaicznego dizajnu do sieci przenośnej.1 Pamiętam, iż dla stron mobilnych używa się dodatkowego, specjalnego pliku kaskadowych arkuszy stylów. Problem w tym, że ta strona na ten moment ich nie ma. Brakuje też standardowego .css reset oraz instrukcji przekierowania z adresu bez www na adres www2.
Krok 1. Jaka rozdzielczość strony mobilnej WWW jest najlepsza?
Na to pytanie nie ma jasnej odpowiedzi. O ile rynek urządzeń stacjonarnych jest mi dobrze znany i wiem, że istnieją od lat badania i ilości teorii typu 960px to rynek mobilny jest innowacją, co ma przede mną tajemnicę.
Statystyki stron w Polsce na rok 2018.
Około 50% ruchu obecnie generują urządzenia mobilne, a więc telefony (tablety są odrębną kategorią o raczej nikłym znaczeniu ~5%). Według strony http://gs.statcounter.com/screen-resolution-stats aż 30% ruchu dotyczy urządzeń o nieokreślonej rozdzielczości, a 360x640px to obecnie najpopularniejszy format! Drugą lokatę zajmuje wide-screen 1366x768 (zapewne notebook szerokokątny). Rozdzielczość HS (1920x1080) to dopiero miejsce trzecie.Jak widać powyżej rozrzut szerokości jest monstrualny. Co robimy? Dodajemy reguły dla urządzeń mobilnych, stacjonarnych i do druku pamiętając przy tym, że układ z sześciu kolumn będzie czytelny na urządzeniach HD, ale pomniejszony na handheld lub phone będzie zupełnie nieczytelny. Trik polega na tym, by cel osiągnąć wyłącznie stylami .css. Do dzieła!
Oto jak strona wygląda przed aplikacją styli - układ pływający (korzystam z ShrinkTheWeb). Nienajlepiej. Wygląda trochę jak filet z kurczaka przed przyrządzeniem. Może mój mózg ma za mało pamięci operacyjnej? Trik polega na tym, aby kolorowe kolumny (pomarańczowa, czerwona i różowa) wyświetlały się jedna pod drugą. Nie chce mi się dodawać reguł dla każdej z szerokości, bo mógłym tak dodawać godzinę. Wydaje się, że można podsumować badanie. Otóż istnieje trzy-pięć kluczowe rozdzielczości:
- 1920x1080px
- 1366x768px
- 375x568px
- 360x640px
- Inne.
Co ciekawe, to wydaje się, iż rozdzielczość 4:3 została totalnie wygumowana z urządzeń stacjonarnych! 1024x748px (4:3) zajmuje dopiero 12. pozycję!
To jak z tą rodzielczością na urządzenia mobilne w roku 2018 w Polsce?
Większość stron daje różnicę z dzielenia szerokość przez wysokość ekranu rzędu ~1,7 i ~0,56. Oznacza to, że obecnie urządzenia możemy podzielić na pniu na poziome i pionowe. To też wyczytałem w swojej knidze od O'Reilly, a ma ona dobre pięć lat. Dodano tam regułę @media landscape. Mógłbym tutaj dodać prosty schemat rysunkowy, pt: "Czy szerokość jest większa od wysokości"...
Niestety, ale Statcounter nie podał wyników około 30% przeglądarek.
360/640 = 0,56
1366/768 = 1,77
1920/1080 = 1,77
375/667 = 0,56
Unknown = Nieznana
720/1280 = 0,56
1440/900 = 1,6
768/1024 = 0,75
1280/800 = 1,6
320/568 = 0,56
1600/900 = 1,77
1024/768 = 1,33
320/534 = 0,59
1280/1024 = 1,25
Ciekawie więc, wydaje się, iż większość konstruowanych obecnie urządzeń telefonicznych z ekranem dotykowym działa na regule odwróconej panoramy.
16/9 = 1,773
9/16 = 0,56
Wydaje się, iż można stworzyć proste równanie i na tej podstawie zaszeregować strony interaktywne wobec klucza szerokość i wysokość. Problemem są natomiast piksele i ich czytelność na urządzeniach telefonicznych... Większość ludzi i tak używa ich nieprawidłowo, brudnym paluchem. Od macania po tych urządzeniach są wskaźniki, ale w myśl reguły "klient nasz Pan" - co z tym zrobić? Ja używając swojego tablet-o mam niekiedy problem nawigować kciukiem po ekranie.
Wnioski.
Zakładam, że wraz z tak zwaną "postępującą technologią" ilość pikseli w urządzeniach mobilnych będzie ulegała dodaniu, ale sam format przez najbliższe pięć lat groźnie nie wyewoluuje. Trudno mi sobie wymarzyć telefon z ekranem szerszym od wysokości.Statystyki Gemius są całkiem tożsame z StatCounter, więc ich wyniki uznaję za wiarygodne.
Ciekawa sytuacja ma miejsce przy okazji rozdzielczości 640x360 bowiem jest to rozdzielczość telefoniczna... Jest smartfon o szerokości wyższej niż wysokość. Jak to oznaczamy w .css?
Na koniec skąd aż 30% niezidentyfikowanych rozdzielczości? Odpowiedź brzmi: "tanizna i chińszczyzna". Jesteśmy importerami milionów urządzeń niestandaryzowanych i taki jest oto efekt, że musimy zajmować się takimi głupotami jak dostosowanie rozdzielczości od 1x1px aż po 6400x6400 czy jaka tam jest teraz największa notowana?
Indeks.
1. Nie lubię zapożyczeń, więc korzystam z synonimu sieć przenośna dla stron mobilnych.
2. Adres z WWW łatwiej jest namierzyć za pośrednictwem narzędzi SEO. Adresy bez WWW prawdopodobnie zwrócą wyniki powiększone o subdomeny, a to jest nieporządane - o ile serwis nie jest blackhat.
3. Tak zwana w żargonie: "panorama". "Mnie kojarzy się z Racławicami." - SuperEgo.
Budowanie stron metodą RWD pozwala na dopasowywanie się całości do wielkości ekranu użytkownika. Nie ma wtedy konieczności zastanawiania się nad jedną słuszną rozdzielczością ponieważ strona będzie wyglądała dobrze na każdej ;)
Solidna porcja praktycznej wiedzy :) Dzieki za przydatny wpis