Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::

Czy Twój szablon jest przyjazny urządzeniom mobilnym?
tak, mam elastyczną skórkę od dawna
57%
 57%  [ 15 ]
tak, mam responsywny szablon od niedawna
19%
 19%  [ 5 ]
nie mam, ale planuję zmienić szablon na elastyczny
19%
 19%  [ 5 ]
nie mam, nie zwracam uwagi jak strona wygląda na małych ekranach
3%
 3%  [ 1 ]
Głosować: 26
Wszystkich Głosów: 26

Autor Wiadomość
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:    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? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

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. :^^:
 
  podziel si� tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Pucha 
Blogger.Klub

Imię: Bartek
Wiek: 26
Dołączył/a: 28 Gru 2014
Posty: 30
Miasto: Polska

Wysłany: 2015-04-02, 18:43   

Jako użytkownik standardowego szablonu z bloggera (jedynie zmodyfikowanego) mam wbudowaną elastyczność strony i myślę, że to bardzo ułatwia życie czytelnikom.
Sam przeglądam blogi na telefonie dość często i rzeczą, na którą jako pierwszą zwracam uwagę jest tempo w jakim strona się ładuje- jeżeli to zajmuje więcej niż 15 sekund to po prostu wyłączam.
______________________________________________________
Szukasz podpowiedzi w wybraniu ciekawej książki - zajrzyj na mój blog ! http://wybieramfantasy.blogspot.com/
 
  podziel si� tym postem na:
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, 18:55   

Pucha napisał/a:

mam wbudowaną elastyczność strony
nie tyle elastyczność co systemowe szablony bloggera mają oddzielne szablony komórek, na których treści wyświetlają się nieco inaczej, zdjęcia mają malutkie rozmiary a większość gadżetów jest wyłączona. Jeżeli blog wyświetla się źle na komórce, to mobilna skórka może być szybkim sposobem na tymczasowe rozwiązanie problemu. Plusem jest również to, że taki szablon można modyfikować, bo kod źródłowy szablonu zawiera sekcje i style CSS, które go dotyczą.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

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. :^^:
 
  podziel si� tym postem na:
pequeninha 
Blogger.Klub


Pomogła: 2 razy
Dołączyła: 12 Paź 2014
Posty: 133

Wysłany: 2015-04-10, 04:34   

Fajny temat. Ogólnie po internecie surfuję tylko i wyłącznie przez tablet. Na komputerze włączam przeglądarkę zwykle tylko po to, żeby coś skomentować (jak teraz :) Głównie cenię sobie szybkość i łatwość, jaką daje tablet, zwłaszcza przy blogach fotograficznych, modowych, ale także mocno tekstowych: nie muszę ślipić w ekran, przy dobrych szablonach czytam wręcz jak książkę na czytniku.

Htsz napisał/a:

Co wam najczęściej przeszkadza?


Najgorsze chyba są blogi wykorzystujące zdjęcie jako tło. Safari zupełnie tego nie łapie, bloga nie da się czytać: przeskakuje, jest malutki i w ogóle nie do użytku.

Kolejną przeszkodą dla mnie jest za mały obraz i za mała czcionka tekstu. Właśnie taki jest sztampowy szablon blogera po przejściu na tablet: wygląda fajnie na ekranie, ale na dłuższą metę, aby czytać tekst, trzeba go minimalnie powiększyć i traci się obraz całości. Takich blogów jest chyba większość. Przy małej ilości tekstu (np. na blogach modowych) da się przeżyć, ale przy dużej już gorzej. Podoba mi się, gdy tekst wypełnia ekran lub większą jego część (jak wspomniana książka :)

Htsz napisał/a:

na co według was należy zwracać uwagę modyfikując lub poszukując elastycznego szablonu?


W sumie trudno coś dodać do Twojego wywodu, Htsz, ale takie coś, co często widzę, to kłopoty z menu. Siedem zakładek wygląda ok na komputerze, ale na mniejszym ekranie albo zaczyna zachodzić na logo, albo nieestetycznie się zawija, albo wyłazi w ogóle z przeznaczonego miejsca i wygląda mało profesjonalnie...

Czytniki to moim zdaniem przyszłość surfowania, dlatego warto temat ogarnąć :)
 
  podziel si� tym postem na:
Sejtus 


Wiek: 35
Dołączył/a: 06 Kwi 2015
Posty: 14
Miasto: Hull UK, Cieszyn PL

Wysłany: 2015-04-15, 09:30   

Siema. Z moim blogiem niby wszystko ok ale są podpunkty które warto poprawić, niestety jest to dla mnie jakiś bełkot :/
Czy mógłby ktoś mi w prosty sposób wytłumaczyć co to znaczy? :

74 / 100Szybkość działania strony

Należy poprawić:
Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

Warto poprawić:
Wykorzystaj pamięć podręczną przeglądarki

Zmniejsz HTML

Dziękuję i pozdrawiam.
 
  podziel si� tym postem na:
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-15, 09:59   

Przy każdym punkcie są objaśnienia (po rozwinięciu) i/lub linki prowadzące do artykułów pomocy ;)

Blokujący JS: https://developers.google...ghts/BlockingJS - jakiś element pojawiający się na górze witryny ładuje się za pomocą skryptu i strona na niego czeka.
pamięć podręczna: https://developers.google...eBrowserCaching - to można ustawić mając dostęp do serwera. Dodajesz do pliku .htaccess (powinieneś już go mieć) np. taki zapis:
Wiadomość (widoczna dla zarejestrowanych)


Dobrym wynikiem jest już 85/100

pequeninha napisał/a:

Najgorsze chyba są blogi wykorzystujące zdjęcie jako tło. Safari zupełnie tego nie łapie, bloga nie da się czytać: przeskakuje, jest malutki i w ogóle nie do użytku.
a to ciekawe. Z projektem menela masz to samo? Sprawdzałem jego bloga na maku 27" i ładował się dobrze. Nie przewidziałem jedynie tak dużej rozdzielczości w zapisach @media i kafelki są trochę za niskie :D
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

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. :^^:
 
  podziel si� tym postem na:
Sejtus 


Wiek: 35
Dołączył/a: 06 Kwi 2015
Posty: 14
Miasto: Hull UK, Cieszyn PL

Wysłany: 2015-04-15, 11:07   

Ok trochę poczytałem na ten temat.
Jeżeli dobrze zrozumiałem to muszę skorzystać z Google Webmaster Tools (Blogger).
 
  podziel si� tym postem na:
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-15, 11:22   

Jak masz bloggera, to on automatycznie powinien być już dodany i zweryfikowany w narzędziach dla webmasterów. Ogólnie każdą stronę warto tam dodać, bo można znaleźć informacje na temat indeksowania, niedziałających stron, błędów, ostrzeżenia itp.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

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. :^^:
 
  podziel si� tym postem na:
Ewe-Linka 
Prezes w Mamspired


Zaproszone osoby: 3
Imię: Ewelina
Pomogła: 2 razy
Wiek: 33
Dołączyła: 17 Lis 2012
Posty: 154
Miasto: Northampton

Wysłany: 2015-04-16, 16:42   

pobrałam taki szablon jakiś czas temu, ale przyznam, że od około 2 lat zwracam na to szczególną uwagę. Przez większość czasu czytam blogi na telefonie, czasem tablecie i strasznie mnie to irytuje jak szablon jest niedostosowany... :/
______________________________________________________
Mamspired- parentingowy blog lifestyle.
 
  podziel si� tym postem na:
pequeninha 
Blogger.Klub


Pomogła: 2 razy
Dołączyła: 12 Paź 2014
Posty: 133

Wysłany: 2015-04-17, 03:24   

Htsz napisał/a:


pequeninha napisał/a:
Najgorsze chyba są blogi wykorzystujące zdjęcie jako tło. Safari zupełnie tego nie łapie, bloga nie da się czytać: przeskakuje, jest malutki i w ogóle nie do użytku.
a to ciekawe. Z projektem menela masz to samo? Sprawdzałem jego bloga na maku 27 i ładował się dobrze. Nie przewidziałem jedynie tak dużej rozdzielczości w zapisach @media i kafelki są trochę za niskie :D


Menel wygląda w Safari całkiem ładnie, chociaż to zależy od tego, jak ułożą się zdjęcia: czasem mam puste (białe) miejsce albo dla odmiany czarny pasek.

Bardziej chodziło mi o tło w sensie gdy ktoś ustawia sobie zdjęcie jako tło na typowym szablonie blogera. Safari nie łapie tego, że to zdjęcie się powtarza (siłą rzeczy) i stara się z niego zrobić mozaikę, stąd wychodzi malutki blog albo wręcz kilka blogów nie do czytania.

Mozaiki zdjęciowe też różnie w Safari wyglądają, to chyba zależy od jakości zdjęć. Czasem przeglądarka głupieje i zamiast ładnego efektu, jaki widzę na kompie, mam jakieś mało profesjonalne piksele.

Htsz, a czy naprawdę Ty jako twórca takich stron jesteś w stanie przewidzieć faktycznie, jak blog będzie wyglądał na wszystkich typach urządzeń, którymi w tej chwili dysponujemy? Oczywiście można to przewidzieć teoretycznie, wyżej mamy do tego narzędzia. Ale jest tych urządzeń tyle, jedne z takim ekranem, ale taką rozdzielczością, taką a nie inną przeglądarką, takim a nie innym kształtem... Sporo tych zmiennych jest do ogarnięcia.
 
  podziel si� tym postem na:
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-17, 13:38   

pequeninha napisał/a:

Htsz, a czy naprawdę Ty jako twórca takich stron jesteś w stanie przewidzieć faktycznie, jak blog będzie wyglądał na wszystkich typach urządzeń, którymi w tej chwili dysponujemy? Oczywiście można to przewidzieć teoretycznie, wyżej mamy do tego narzędzia. Ale jest tych urządzeń tyle, jedne z takim ekranem, ale taką rozdzielczością, taką a nie inną przeglądarką, takim a nie innym kształtem... Sporo tych zmiennych jest do ogarnięcia.
wielkości ekranów da się ogarnąć za pomocą ustawień @media queries - można prezentować treść inaczej w widoku pionowym i poziomym tabletu :-)

Nie mam dostępu do Safari, bo wersję windowsową przestali już dawno wspierać. Według rankingu: http://ranking.pl/pl/rankings/web-browsers.html korzysta z niego u nas bardzo mało osób, łącznie chyba nie więcej jak 2%.

Ja dbam o to by strona wyświetlała się dobrze we wszystkich najpopularniejszych przeglądarkach i przynajmniej poprawnie w pozostałych (nie wspieram jednak bardzo starych wersji przeglądarek).

pequeninha napisał/a:

Menel wygląda w Safari całkiem ładnie, chociaż to zależy od tego, jak ułożą się zdjęcia: czasem mam puste (białe) miejsce albo dla odmiany czarny pasek.
Podeślij mi proszę jakieś zrzuty ekranu na pw.

pequeninha napisał/a:

Bardziej chodziło mi o tło w sensie gdy ktoś ustawia sobie zdjęcie jako tło na typowym szablonie blogera. Safari nie łapie tego, że to zdjęcie się powtarza (siłą rzeczy) i stara się z niego zrobić mozaikę, stąd wychodzi malutki blog albo wręcz kilka blogów nie do czytania.

Mozaiki zdjęciowe też różnie w Safari wyglądają, to chyba zależy od jakości zdjęć. Czasem przeglądarka głupieje i zamiast ładnego efektu, jaki widzę na kompie, mam jakieś mało profesjonalne piksele.
czasami autorzy blogów psują szablony wykonując dziwne modyfikacje, które dobrze wyglądają tylko na ich przeglądarkach i rozdzielczościach.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

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. :^^:
 
  podziel si� tym postem na:
Piotrek S 
Youtuber


Imię: Piotrek
Dołączył/a: 28 Lip 2015
Posty: 11
Miasto: Wrocław

Wysłany: 2015-07-28, 16:49   

prawdę mówiąc, nie wyobrażam sobie w dzisiejszych czasach nie mieć responsywnego szablonu. W dobie komórek i tabletów i ich dostępności to wręcz konieczne. Jeśli ktoś sam pisał sobie stronę/blog to użycie bootstrap'a wydaje się wręcz konieczne.
______________________________________________________
dookolakotatv
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz