Htsz
Blogger Product Expert Blogowicz.Team
Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy Wiek: 39 Dołączył/a: 01 Sty 2006 Posty: 8949 Miasto: Wrocław
|
Wysłany:
2015-04-02, 17:20 Czy Twój blog i szablon jest mobile-friendly (elastyczny)?
|
|
|
Próbujemy wypromować blogi na różne sposoby, wybieramy chwytliwą tematykę, ale jednocześnie taką, na której się znamy i mamy coś do powiedzenia. Przykładamy się do jakości treści, spędzamy nad nią wiele czasu i czasem zapominamy o jednym. Czytelnik bardzo często ocenia również wygląd (estetykę) oraz swobodę poruszania się po naszej witrynie.
ale czy Twoja strona jest mobile-friendly? Czy nie zawiera zbyt wielu gadżetów i obciążających ładowanie elementów? Czy jest przystosowana pod tablety, komórki i inne urządzenia z małymi ekranami, szczególnie dotykowymi? Optymalizujesz grafiki?
Jeżeli nic Ci nie mówi fraza: Responsive Web Design, to pora się tym zainteresować. Google od jakiegoś czasu wysyła - poprzez Narzędzia dla Webmasterów - komunikaty dotyczące zgodności stron z urządzeniami przenośnymi. Można się z nich dowiedzieć co warto poprawić by strona nie stwarzała problemu użytkownikom przeglądającym ją na telefonach.
Nie dostajesz takich komunikatów? Oznacza to, że ze stroną jest wszystko dobrze albo nie korzystasz z usługi Webmaster Tools https://www.google.com/webmasters/tools/home?hl=pl
Narzędzia do testowania witryny:
https://www.google.com/we...obile-friendly/
https://developers.google...speed/insights/
oraz poradnik https://developers.google...d-fundamentals/ "podstawy elastycznego projektowania witryn"
Czy coś się stanie jeżeli Twoja witryna nie będzie przystosowana? Świat się nie zawali, ale część użytkowników może zrezygnować z przeglądania - sprawdzisz to w Google Analytics. Zakładka Odbiorcy -> Ruch mobilny -> Ogółem -> mobile/tablet. Sprawdź odrzucenia (czy nie są zbyt wysokie w stosunku do desktop) oraz czas i strony/sesje (czy nie są zbyt niskie).
Twoja witryna może się również wyświetlać niżej w wynikach wyszukiwania na komórkach i tabletach lub zawierać informację o niezgodności z tymi urządzeniami.
Ja od dłuższego czasu tworząc szablony na blogspota zwracam uwagę by dobrze prezentowały się również na małych ekranach. Nie mam oczywiście wszystkich rodzajów urządzeń w domu, ale posiłkuję się symulatorami typu http://quirktools.com/screenfly/ czy resizer od google: http://design.google.com/resizer/
Kilka przykładów (projekty, w których maczałem swoje palce):
1) ekskluzywnymenel - poprzedni szablon: http://szablonmenela.blogspot.com/ - na dużym ekranie kafelki pojawiają się zamiennie 100% lub 50/50%. Na komórkach wszystkie jego w jednej kolumnie. Zdjęcia dopasowują się do szerokości ekranu.
2) jestemkasia http://www.jestemkasia.co...enim-story.html - na stronie głównej są dwie kolumny postów, które przechodzą w jedną, ale ciekawsza jest zawartość posta. Dzięki CSS można pisać w 2-3 kolumnach a na na małej rozdzielczości wszystko składa się do kolumny.
3) blondhaircare http://blondhaircare.com/ - dwie kolumny przechodzą w jedną, rotatory na dużym ekranie pokazują trzy propozycje, na mniejszych dwie a na najmniejszych jedną. Komórki i niskie rozdzielczości wyświetlają miniatury postów na całą szerokość a tekst pojawia się pod nimi by wszystko było nadal czytelne.
4) mesmerizefashion http://www.mesmerizefashion.eu/ - strona główna pokazuje w rotatorze najnowsze posty. Zdjęcie w tle oraz menu dopasowują się do wielkości ekranu - na mniejszych menu wskakuje na górę. Na stronie kategorii posty wyświetlają się w 3-2-1 kolumnach.
-------
Na co warto zwracać uwagę projektując szablon lub szukając jakiegoś gotowca?
1. Czy jest elastyczny.
- wrzuć go w symulator lub zmniejsz okno przeglądarki i zobacz czy dopasowuje się do jej szerokości.
- jeżeli nie, to wybierz nowocześniejszy kod lub edytuj CSS i dopisz @media queries (poradnik dałem wyżej).
- sprawdź co z fotkami. Wystarczy dopisać kilka linijek CSS by zdjęcia wyświetlały się maksymalnie na całą szerokość kolumny.
- dobrym pomysłem jest też oddzielny szablon dla komórek (do włączenia na bloggerze i ogarnięcia na wordpressie za pomocą wtyczek), który wygląda równie dobrze co pełna wersja, ale jest okrojony z bajerów.
2. Czy nie ma elementów zasłaniających ekran, które ciężko wyłączyć na małym ekranie.
- dużo osób korzysta z wyskakujących okienek z zachętą do polubienia fanpejdży, ruchomych menu czy innych gadżetów, które latają za ekranem.
3. Czy nie ma zbyt wielu skryptów i niepotrzebnych gadżetów opóźniających ładowanie strony
- sprawdź jakie dodatki wyświetlają się na Twoim blogu. Wyłącz na urządzeniach mobilnych te, które nie będą tam potrzebne
- co opóźnia wczytywanie bloga dowiesz się z różnego rodzaju testerów (dwa zalinkowałem wyżej)
------------
Mam nadzieję, że wątek zachęci Was do przyjrzenia się swoim stronom. Napiszcie też czy często przeglądacie blogi na urządzeniach mobilnych? jak oceniacie ich przygotowanie? Co wam najczęściej przeszkadza? i jak wielu czytelników na waszych blogach korzysta z tabletów czy komórek?
Czekam również na wypowiedzi rozszerzające mojego posta - na co według was należy zwracać uwagę modyfikując lub poszukując elastycznego szablonu?
[ Komentarz dodany przez: Htsz: 2017-05-12, 22:54 ]
zobacz również:
nowe szablony w panelu bloggera - zoptymalizowane pod urządzenia mobilne
|
______________________________________________________ nie radzisz sobie? pomoc indywidualna oraz blogi i strony na zamówienie
Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. |
|