Wpis ten traktuję jako krótki samouczek, który (mam nadzieję) przyda się wszystkim osobom mającym za zadanie: zamieszać w sieci newsy, administrować bieżący content znajdujący się na stronie internetowej, a nie do końca się na tym znającym. No bo przecież nie muszą się znać na wszystkim – wszakże nikt na rozmowie o pracę nie wymagał znajomości HTML’a czy dobrych praktyk w zakresie publikacji treści w sieci. Tym bardziej, jeśli nie jest to firma stricte z branży IT. Ok, do sedna.
Krótki case study
Ostatnio miałem przyjemność stworzyć nową odsłonę strony internetowej dla jednego ze swoich klientów. Operacja miała być prosta i szybka ponieważ obecna strona internetowa, która została zbudowana parę lat wcześniej przez firmę _x_ wsparta została silnikiem WordPress. W teorii było to „zlecenie marzenie” , które powinno ograniczać się tylko do wrzucenia nowego szablonu, zbudowania menu, kilku aktualizacji i voila.
W praktyce. Było gorzej. Dużo gorzej. Pomimo faktu, że strona została zbudowana na WordPressie, praktycznie w ogóle nie wykorzystywała podstawowych funkcjonalności, które oferuje ta zaawansowana platforma do publikacji treści. Szablon zbudowano niezgodnie z ogólnie panującymi standardami. Nie posiadał wymaganych do poprawnego działania przez WP szablonów, nie wykorzystywał w pełni edytora postów, kategorii, tagów. Nie wykorzystywał możliwości używania widgetów, budowania menu z poziomu panelu administracyjnego. No jednym słowem – rzeźnia.
Większość rzeczy została wklepana „na sztywno” – w kodzie samego szablonu. Co za tym idzie – zminimalizowano możliwości edycji szablonu za pośrednictwem Panelu Administracyjnego. Nie wspomnę o dosyć „mocno średnim” wsparciu dla RWD (Responsive Web Design). Wszystkie te rzeczy to jednak pikuś, który idzie „naprawić” chociażby zmianą szablonu na taki, który będzie oferował ww. funkcjonalności. Rzeczą, której jednak nie przeskoczy nawet najlepszy na świecie template to treść. Wiemy nie od dziś, że „content is king” . Dosłownie i w przenośni.
Treści przyjazne użytkownikowi
Czyli sedno mojego posta. Poniżej prezentuję Wam kilka złotych zasad, dla których zdecydowaliście się przeczytać tego posta. Są to absolutne podstawy, które wielu osobom mogą wydawać się wręcz śmieszne i oczywiste, jednak w praktyce bardzo często są one pomijane przez ludzi odpowiedzialnych za tworzenie contentu.
1. Bądź Eko. Nie wrzucaj zdjęć „prosto z aparatu” .
Oczywiście, bycie „eko” ma tutaj charakter troszkę prześmiewczy. Bardziej od słowa „ekologiczny” pasowałoby „humanitarny” . Już tłumaczę o co chodzi. Zdjęcia zrzucone bezpośrednio z telefonu lub aparatu fotograficznego na dzień dzisiejszy mają rozdzielczości sięgające przynajmniej 4000pikseli. W praktyce oznacza to, że jedno zdjęcie ważyć będzie przynajmniej z 4-5MB. Jeśli ktoś ustrzeli fotkę porządną lustrzanką, wówczas pojedyncza fotka zajmować może 20-30MB. Na potrzeby newsów, czy prostych galerii, pełniących bardziej funkcję reportażu, wrzucanie tak olbrzymich zdjęć mija się z celem. Większość odwiedzających i tak szybko przejrzy zdjęcia na telefonie, lub laptopie i w ciągu kilkunastu sekund „poleci dalej” .
Zmniejszając zdjęcia na komputerze (lub w telefonie) przed publikacją w sieci zyskamy kilka niewątpliwych plusów:
- Szybciej wrzucimy pożądane treści na stronę. W przypadku uploadu galerii liczących po 20, 40 i więcej zdjęć, połączonych ze słabym internetem zdjęcia mogą się wrzucać nawet i godzinę
- Galerie będą ładować się szybciej. Dla przykładu posłużę się bardzo podstawową matematyką:
10 zdjęć * 20MB = 200 MB
10 zdjęć * 300KB = 3 MB - Strona internetowa będzie zużywać mniej transferu (mniejsze obciążenie serwera, szybsze ładowanie strony).
- Odwiedzający stronę będzie zużywać mniej transferu (co w przypadku osób przeglądających sieć na telefonach komórkowych ma ogromne znaczenie!)
Osoby, które pamiętają zamierzchłe czasy internetu w mig zrozumieją o co chodzi. Do zmniejszania zdjęć można użyć akcji seryjnych w Adobe Bridge (jeśli ktoś posiada Photoshopa, Bridge’a rónież ma na pokładzie), lub darmowych programów pokroju Irfan View.
2. Szanuj swój content – opisuj zdjęcia
Jeśli prowadzimy np. stronę o charakterze turystycznym, dużo podróżujemy i dokumentujemy najróżniejsze miejsca, poświęćmy kilka chwil i zadbajmy o to, by ktoś tą naszą fotografię znalazł. Zapamiętajcie raz na zawsze – wyszukiwarki działają głównie w oparciu o tekst! Mówiąc wprost – podpisujcie zdjęcia! Zaczynając od samej nazwy pliku, poprzez dodawanie meta-tagów, geolokalizacji – w większości tych rzeczy mogą Was wyręczyć funkcje dostępne w nowszych aparatach fotograficznych oraz praktycznie w każdym smartfonie.
Gdy już przystępujemy do wrzucania fotek na stronę (na przykładzie WordPressa), podpiszcie zdjęcie, dodajcie mu unikatowy tytuł oraz tekst alternatywny, który opisuje to, co widać na zdjęciu. Dzięki zastosowaniu się do tej praktyki możecie być pewni, że po jakimś czasie sporo osób trafi do Was na stronę za sprawą wyszukiwania zdjęć np. w Google Grafika. Jeśli Wasze prace mają charakter artystyczny, dobrze jest także wrzucać na fotki jakikolwiek znak wodny – jest to nie tylko reklama, ale także ochrona Waszej własności intelektualnej.
3. Piszesz „do sieci” . Formatowaniem zajmuje się strona!
Jest to naleciałość, którą da się zauważyć zwłaszcza wśród osób, które prawie całe życie spędziły na pisaniu listów i pism w Wordzie, lub u ludzi troszkę starszych, którzy przyzwyczajeni są do pisania tradycyjnych listów na kartce papieru. Kilka prostych rad ode mnie:
- Nie twórz akapitów za pomocą kilku lub kilkunastu spacji. Są one po prostu zbędne! Jeżeli uważasz, że nie możesz bez takowych żyć, poświęć chwilę by dopisać customowy css dla pierwszej linii akapitu. Jeśli nie wiesz o czym mówię – zatrudnij programistę, postaw mu flaszkę, wyjaśnij co trzeba zrobić i problem będzie rozwiązany. Spacje służą do oddzielania wyrazów i innych symboli od siebie – nie do układania treści!
- Używaj wbudowanych w edytor treści narzędzi:
- Jeśli chcesz podzielić posta na sekcję – używaj nagłówków (a nie powiększonej czcionki). H1, H2, H3, H4 to twoi przyjaciele.
- Tabeli używaj do prezentacji danych tabelarycznych
- Jeśli chcesz coś wypunktować, użyj listy uporządkowanej lub nieuporządkowanej.
- Jeśli cytujemy – mamy do tego fajne narzędzie pn. „Blok z cytatem”
- Po prostu napisz to, co chcesz napisać, unikając łamania tekstu. W dobie responsive web designu i miliona urządzeń z różnymi rozdzielczościami i różnym ratio, łamanie tekstów za pomocą shift+enter jest bez sensu. Jedyny przypadek gdy jestem to w stanie jakkolwiek usprawiedliwić dotyczy tekstów piosenek, czy wierszy gdzie wers ma 3-5 wyrazów i praktycznie na każdym urządzeniu słowa te będą w jednej linii. (…) więc jeśli nie piszecie wierszy, starajcie się po prostu pisać „jak leci” , a nowe myśli zaczynajcie od nowego paragrafu (akapitu). Dlaczego się tak przy tym upieram? Od czasu gdy RWD święci triumfy i praktycznie każda strona wspiera już tą technologię musimy pamiętać o tym, że na różnych urządzeniach tekst będzie się różnie wyświetlać. „Dodając entery” podczas pisania na komputerze ludzie często zapominają, że na telefonie wyświetlać się to będzie w zupełnie inny sposób. Co za tym idzie – jeśli będziemy stosować enter po to, by nowe zdanie pisać w nowej linii, wówczas na urządzeniach mobilnych w tekście pojawią nam się brzydkie i niekontrolowane dziury.
- Tekst formatuj z poziomu strony – unikaj kopiowania formatowanego tekstu. Co prawda nowsze WordPressy radzą sobie z tekstem kopiowanym z Worda bardzo dobrze, nie mniej jednak tekst „ozdabiany” w zewnętrznych edytorach tekstowych kopiowany bezpośrednio do naszego bloga bardzo często będzie mieć zbędne znaczniki, które skutecznie będą burzyły nasze spójne, wewnętrzne formatowanie narzucane przez edytor WP lub szablon. Osobiście zawsze tekst skopiowany z Worda/maila/innego programu pierw kopiuję do notatnika, by usunąć całe formatowanie, a dopiero później wklejam do danego edytora na stronie www. Dzięki temu zawsze mam gwarancję wklejania „czystego tekstu” .
4. Taguj i kategoryzuj
Jest to ważna, aczkolwiek przez wielu notorycznie zapominana praktyka. Nie będę się rozpisywać czym są tagi czy kategorie ponieważ chyba każdy z Was świetnie zna znaczenie tych dwóch słów. To, czego możecie nie wiedzieć to fakt, że te dwie rzeczy służą do segregowania treści. Jeśli nie będziecie kategoryzować postów, ani używać tagów, wówczas możliwości wyświetlania konkretnych treści użytkownikom w obrębie Waszej witryny stają się bardzo ograniczone.
