Zapraszam na bloga
karta sklep

ozdobnik

Błędy techniczne spotykane na blogach
Kategoria: Blogi i blogowanie

Przez ostatni miesiąc zajmowałam się przede wszystkim kwestią wyglądu blogów od strony estetycznej, dziś dla odmiany skupię się na stronie technicznej. Zapraszam do zapoznania się z najczęściej spotykanymi błędami technicznymi na blogach.

Moim zdaniem, każdy bloger który bierze się za przerabianie szablonów, szczególnie tych blogowych, powinien posiadać podstawową (czytaj: jakąkolwiek) wiedzę z zakresu działania stron internetowych, ponieważ większość błędów technicznych wynika właśnie z braku wiedzy na ten temat. Mało kto zdaje sobie bowiem sprawę, że wklejenie nawet poprawnego (tj. znalezionego gdzieś kodu) to nie wszystko. Skutki tych poczynań można podzielić na dwie grupy błędów:

Blog rozsypuje się w różnych rozdzielczościach

Niewiele blogerów w ogóle zdaje sobie sprawę, że ich blog nie wygląda na każdym urządzeniu – a precyzyjnie pisząc w różnych rozdzielczościach – tak samo, przez to wychodzą z założenia, że to co widzą u siebie na domowym laptopie to jedyna wersja ich strony i jeżeli prezentuje się dobrze, to znaczy, że żadnego problemu z szablonem nie ma. Niestety nie jest to prawda, a dowody na to spotykam bardzo często, tj. strony się po prostu sypią, przy większych rozdzielczościach: paski nawigacyjne odpływają do lewej strony, pojawiają się w nich dziury, w mniejszych elementy nachodzą na siebie, zasłaniając inne, przez co pół strony staje się nieczytelne. Szczególnie to ostanie bardzo często dotyczy nagłówków, gdzie znajduje się nawigacja, ikony, pole wyszukiwania itp.

Prawdopodobnie autorki dodają coś do kodu, albo same go modyfikują, chociażby menu z kategoriami, bo trzeba przecież pamiętać, że w Blogerze wszelkie zaawansowane zmiany w wyglądzie bloga trzeba dokonywać poprzez edycję dokumentu XML, który często mylony jest z dokumentem HTML, ale nim nie jest i dotyczą go trochę inne standardy, więc już nawet w tym aspekcie o drobne pomyłki bardzo łatwo.

Trzeba też zdawać sobie sprawę, że jeśli mamy responsywny layout, to każdy nowo wprowadzony element (szczególnie w obrębie headera), musi być także odpowiedni wystylowany. Niestety wiele gotowych kodów (HTML + CSS), które można znaleźć w Internecie, jest sprzed kilku lat, co jest równoznaczne z tym, że są przeznaczone na strony z tzw. stałą szerokością. Nie nadają się bez wprowadzenia odpowiednich poprawek do umieszczania na takich stronach, bo po prostu rozsypią wam layout, elementy będą na siebie nachodzić strona może przestać być responsywna. Błędy w responsywanych szablonach widać szczególnie często na blogach na Bloggerze – nawet tych bardzo popularnych.

Jaka jest najprostsza metoda sprawdzenia jak zachowuje się strona w różnych rozdzielczościach? Wystarczy, że w swojej przeglądarce znajdziecie przyciski powiększ/zmniejsz i radośnie zaczniecie je naciskać. „Spotkałam” sporo osób, które były zaskoczone, że ich strona ma tyle „białego tła” po bokach, bo przecież one specjalnie wybrały taki szablon, który wypełnia całą przeglądarkę :), więc może i dla was wyniki tego małego testu będą czymś zaskakującym. Dla sprawdzenia responywności, polecam zmniejszanie i zwiększanie okna przeglądarki. Jeśli wszystko wygląda w porządku to gratuluję!

Blog rozsypuje się w niektórych przeglądarkach

Kolejny problem, bardzo podobny do powyższego. Z reguły każdy bloger korzysta tylko z jednej przeglądarki, no bo po co miałby korzystać z kilku jak np. autorka tego wpisu, skoro ma swoją ulubioną. Dobre pytanie. Na szczęście jest na nie odpowiedz. Bo tak trzeba, jeśli modyfikuje się kod strony. To, że w jednej przeglądarce strona prezentuje się bez zarzutu, to na innej może się sypać aż miło!

Sprawa nie jest prosta, bo strony nie tylko mogą wyglądać inaczej w różnych przeglądarkach, ale i w rożnych wersjach jednej przeglądarki. Osławiony (niestety niezbyt pozytywnie) Internet Explorer byłby tu świetnym przykładem, gdyby nie to, że już powoli kończy się dla niego wsparcie (od niedawna zastąpił go Edge, więc to już w ogóle rewolucja) jak i pewnie cierpliwość front-endowców. Mowa tu oczywiście o wersjach poniżej 9. Teoretycznie powinno się jeszcze w ramach dobrych praktyk wspierać Internet Explorer 8, ale ja polecam się jednak nim za bardzo nie przejmować i skupić się raczej na wersjach wyższych. Piszę to oczywiście z myślą o osobach ambitnych, dla tych mniej ambitnych, polecam poniższy sposób.

Metoda jest prosta, wystarczy, że zainstalujesz najnowsze wersje: Chrome, Opery, Firefoxa, Safari, Internet Explorera i sprawdzisz jak wygląda na nich Twoja strona.

Szablon jest zbyt szeroki

Jeszcze dwa lata temu, kiedy strony responsywne nie były tak popularne i stosowano layouty ze stałą szerokością, bardzo modne były szerokie blogi, takie ok. 1200 pikseli i więcej. Problem w tym, że w tamtym okresie jedną z najpopularniejszych rozdzielczości ekranu była ta o szerokości 1024 pikseli, więc ich posiadacze po wejściu na taki blog „1200px”, nie widzieli prawej strony bloga, a na dole wyświetlał im się pasek przewijania poziomego, co jest uznawane za duży błąd. Aby czytelnik zobaczył co jest na pasku bocznym musiał przewijać suwakiem poziomym w prawo, jeśli chciał zjechać w dół musiał skorzystać z suwaka po prawej stronie, a kiedy chciał zobaczyć treść wpisu, musiał kolejny raz użyć suwaka poziomego. Musicie przyznać, że na dłuższą metę jest to frustrujące.

Jeśli nadal korzystacie z szablonów ze stałą szerokością to powinniście w trosce o swoich czytelników dopasować szerokość waszego bloga do szerokości w najpopularniejszej rozdzielczości ekranu.

Obecnie jest nią 1366 pikseli (bardzo często spotykana w laptopach). W związku z tym wasz blog nie powinien mieć więcej niż 1340 pikseli (trzeba zostawić miejsce na suwak). Osobiście jestem jednak zdania, że należy dobrze się zastanowić czy może najlepszą opcją nie jest skorzystanie z popularnego formatu 960 pikseli, wtedy żaden użytkownik (popularne są także rozdzielczości 1280 pikseli) nie będzie pokrzywdzony, poza tym 1024 px jest spotykane na tabletach, więc i ich użytkownicy być może będą wam wdzięczni za ten wybór.

Oczywiście posiadanie responsywanego layoutu jak i wprowadzenie wartości minimalnej (np. 960px) i maksymalnej (np. 1200px) także rozwiązuje ten problem.

Rozciągnięte zdjęcia

Wiele darmowych szablonów oferujących wyświetlanie wpisów w formie kafelków (szczególnie tych starszych) wymaga od autora bloga dodania pierwszego zdjęcia (który wyświetli się w kafelku) w określonych proporcjach. Jeśli tego nie zrobimy zdjęcia zostaną rozciągnięte do wymiaru w jakim miało być przesłane – co będzie skutkowało jego zniekształceniem.

W tym przypadku należny po prostu być konsekwentnym i jeśli decydujemy się na taki rodzaj szablonu, powinniśmy także przygotować się na przycinanie pierwszego zdjęcia do określonych proporcji przy redagowaniu każdego nowego wpisu.

 

Dobrym pomysłem jest też poproszenie użytkowników, w tym przypadku czytelników, aby zgłaszali wszelkie błędy w działaniu strony. Nikt tak nie pomaga w debugowaniu jak właśnie oni. Tak więc moi mili, zgłaszajcie na mojego email, wszystkie błędy techniczne jakie uda wam się zauważyć :) Będę za to wdzięczna.

Share on FacebookTweet about this on TwitterGoogle+

Komentarze Wypowiedz się

  • Świetny post, bardzo pouczający!

  • Z tymi najpopularniejszymi rozdzielczościami to bym był mimo wszystko ostrożny. Jeżeli nie chcemy lub nie mamy możliwości by skorzystać z szablonu elastycznego, to lepiej zajrzeć do google analytics w zakładkę dotyczącą rozdzielczości – tam dowiemy się jakie dominują wśród użytkowników naszego bloga.
    Miałem przypadek gdzie w szablonie nie działało coś pod safari i akurat na tym konkretnym blogu użytkownicy urządzeń apple stanowili większość (a zazwyczaj są niewielkim procentem), więc szybko zwrócili na to uwagę.

    Zniekształcone zdjęcia też da się ogarnąć. Wystarczy lekko edytować ten popularny skrypt – to szablon ma się dopasować do nas, nie my do niego ;-). Podrzucam Ci dwa wątki, które zawierają informacje o modyfikacji oraz odpowiednim ustawianiu CSS dla zdjęć:
    http://forum.blogowicz.info/topics106/szablon-modowy-rozciagniece-zdjecia-na-stronie-glownej-vt9271.htm
    http://forum.blogowicz.info/topics106/szablon-rewelacja-zdjecia-na-cala-szerokosc-kolumny-wpisow-vt9311.htm#100969

    • Ja wychodzę raczej z innego założenia – robi się według „standardów” – a one każą się posługiwać najpopularniejszą rozdzielczością przy stronach o stałej szerokości, bo co zrobisz jak strona jest nowa i nie ma żadnych wejść?

      • Ja akurat tworzę elastyczne szablony, więc nie muszę nic robić :-P
        Pamiętam jak z ekipą przesiedliśmy się z dostosowywania szablonów pod 800px na 1024, bo coraz więcej osób zaczynało korzystać z takiej rozdzielczości, hah to były czasy :D

        Na start można ustawić najpopularniejszą, ale warto zajrzeć po kilku dniach lub tygodniu i zweryfikować czy wszystko jest okej. Szczególnie, że złe doświadczenia użytkowników mogą wpłynąć na to czy do nas powrócą i jak często.