Tytuł może być nieco mylący, nie będę bowiem opisywał procesu tworzenia nowego bloga dla tych, co to dopiero pierwszy raz. Opiszę zaś proces tworzenia „kolejnego nowego” bloga czyli jak stworzyć blog mając już doświadczenie w tej dziedzinie. Spotkałem się bowiem wiele razy z sytuacją, w której doświadczeni już przecież bloggerzy tworzyli kolejne blogi w identyczny sposób, co pierwszy – czyli w stylu „najpierw instalacja i wybór layoutu, potem wpis wprowadzający, a  potem się pomyśli” - IMO jest to bardzo amatorskie podejście. Poznajcie więc słowo „plan” – stanie się waszym przyjacielem na długie tygodnie :).

Nie bądź Cylon, miej plan :)

Mając już doświadczenie w prowadzeniu bloga wiesz, czego należy się spodziewać. Zawczasu powinieneś więc przygotować  odpowiedni plan działania na kilka pierwszych miesięcy działalności swojego nowego dzieła. Pozwoli Ci to dokładnie określić swoje cele i oczekiwania, co zaś przełoży się na jakość bloga – nie będziesz bowiem improwizował z dnia na dzień, za to będziesz każdego dnia dążył do realizacji wcześniej postawionych sobie celów – tym oto sposobem zarówno Ty jak i Twoi czytelnicy dobrze na tym wyjdziecie.

Określ funkcjonalność bloga

Plan powinien przewidywać rozwój bloga – jego planowaną funkcjonalność dla przykładu. Określ, jakie gadżety zaoferujesz swoim użytkownikom. Może forum, lub też Job Board (czyli forum z ogłoszeniami o pracę), a może sklepik, w którym będziesz sprzedawał własne produkty? Już na początku musisz wiedzieć do jakich użyteczności będziesz dążył, ponieważ pod te użyteczności (ang. features, heh) będziesz pisał.

Zbuduj zaplecze treści

Zanim Twój nowy blog wystartuje, dobrze byłoby przygotować zawczasu odpowiednią ilość artykułów do publikacji. Ma na dwojaki cel. Po pierwsze przygotuje zaplecze, które pozwoli Ci na „ruszenie z kopyta” bez obawy o nagły brak tekstów. Po drugie uzmysłowi Ci to, czy naprawdę sprawia Ci przyjemność pisanie na ten, a nie inny temat – głupio byłoby stworzyć bloga tylko po to, by po miesiącu okazało się, że tak na prawdę nie chce Ci się już pisać na temat hodowli psów, bo preferujesz koty.

Zaplanuj również potencjalne kategorie na blogu, spisz listę pomysłów na artykuły, zarówno listę ogólną określającą zakres tematyki nowego bloga, jak i listę szczegółową, z krótkimi opisami planowanych tekstów. Sspisz również listę osób, z którymi przeprowadzisz wywiady do publikacji w swoim serwisie. To wszystko sprawi, że nie prędko wyczerpią Ci się pomysły na nową treść (z wyczerpaniem się zapału do pracy to już inna kwestia).

Opracuj model zarabiania i reklamy

Zwykła reklama, czy jakaś bardziej finezyjna może? A może dochód pośredni z promocji własnej książki, lub po prostu zarabianie na gadżetach „reklamowych”? A może w ogóle nie chcesz zarabiać? Określ swój model biznesowy już na samym początku, bo co prawda będziesz go lekko modyfikował w trakcie funkcjonowania bloga, to pozwoli Ci na lepsze dostosowanie zarówno samej treści jak i mechaniki bloga do potrzeb reklamowych.

Dodatkowo spisz listę miejsc, w których zareklamujesz swojego bloga – blogi znajomych, katalogi, serwisy społecznościowe i tak dalej, pozwoli to na szybkie zwiększanie ruchu na stronie bez konieczności rozkminiania „gdzie by tu promować mojego bloga„.

Profesjonalny szablon

A gdy już masz wszystko zaplanowane, zaopatrz się w szablon, który uwzględni wszystkie Twoje zaplanowane plany – czy to darmowy, czy „Premium”, czy też tworzony na zamówienie, czy modyfikowany przez Ciebie. Ważne jest, by był łatwy w dostosowaniu do Twoich teraźniejszych i przyszłych potrzeb, tj. abyś miał możliwość umieszczenia w nim elementów, które uwzględnia Twój business plan, np. miejsce na reklamę, miejsce na promocję innych stron, miejsce na promocję książki (oraz miejsce na elementy niekomercyjne, bo to też ważne, heh).

Czas zaczynać

Teraz mamy plan i możemy ruszać na podbój sieci. I choć w blogowaniu, tak jak i w każdym innym biznesie nigdy nie ma gwarancji, że plan wypali, to fakt jego posiadania jest już wielkim sukcesem :P.

1. Które element szaty graficznej zmieniłem?
2. Dlaczego zmieniłem dany element (jaki był zamysł)?
3. Jaki skutek mogą mieć zmieny wybranego elementu?
4. Co sądzisz o zmianie danego elementu – jest usprawnieniem, czy krokiem wstecz?

PS. Wszelkie komentarze, opinie i sugestie mile widziane ;)

Oto zrzut ekranu:

A to link do pobrania szaty

Imię Szymon Skulimowski może nie brzmieć znajomo – ale co, jeśli powiem Ci, że to właśnie on może stworzyć nową szatę graficzną Twojego bloga? Małą próbkę tego, co czeka szczęśliwców widać na blogu Szymona,  http://WPNinja.pl – szata graficzna bloga jest profesjonalna, estetyczna i niezwykle przyjemna dla oka. I tu oddaję głos Szymonowi, z którym udało mi się niedawno przeprowadzić wywiad:

Wywiad między Łukaszem Sobkiem (autor bloga TopBlogger.pl) i Szymonem Skulimowskim (autor bloga WPNinja i twórca akcji “Odpicuj mi WordPressa”)

Łukasz Sobek: Kim jest WPNinja?

Szymon Skulimowski: Nazywam się Szymon Skulimowski, mam 23 lata, studiuję informatykę i mieszkam w Lublinie. Obecnie pracuję jako freelancer, zajmuję się projektowaniem stron internetowych a moim "kung-fu" jest WordPress (oczywiście chodzi tutaj o filozofię a nie o sztukę walki).

Prowadzę również bloga (http://WPNinja.pl – red.), na łamach którego dzielę się swoją wiedzą z czytelnikami.

ŁS: Co to jest akcja "Odpicuj mi WordPressa"?

SzS: "Odpicuj mi WordPressa" to próba podniesienia jakości niekomercyjnych polskich stron opartych o system WordPress. W ramach akcji, raz na miesiąc zostanie wybrana strona, która zostanie następnie za darmo "odpicowana".

Akcja opiera się na zasadzie WIN-WIN-WIN, w której każda strona wygrywa. Właściciel bloga zyskuje nową wersję swojego WordPressa, czytelnicy bloga WPNinja wartościowe artykuły "how-to" a ja sam zdobywam doświadczenie, nowe kontakty i darmową reklamę.

Po szczegóły zapraszam do tematu "Odpicuj mi WordPressa – wstępne założenia".

ŁS: Jak wpadłeś na pomysł akcji?

SzS: "Akcja to efekt moich przemyśleń na temat stanu polskich blogów, polskiej mentalności oraz przepaści jaka istnieje pomiędzy nami a zachodem. Poza tym zawsze fascynowały mnie akcje, w których wszyscy wygrywają, barter oraz przesłanie mówiące o tym że "aby coś otrzymać najpierw trzeba coś dać".

Wrzuciłem to wszystko do jednego pojemnika, dodałem szczyptę z programów typu "Pimp My Ride" i tak oto powstał Chocapic… tzn. "Odpicuj mi WordPressa" :-).

Dlaczego myślisz, że uda ci się "odpicować" czyjegoś bloga?

Znam się na WordPressie i projektowaniu stron. Mam za sobą ponad roczną pracę w paru poważnych firmach (jako koder CSS/XHTML i webmaster) i, co najważniejsze, naprawdę kocham swoją pracę.

Parę osób wyraziło także chęć pomocy przy trudniejszych projektach tak więc, nie jestem całkiem sam i mogę liczyć na pomocną dłoń.

Co zyska właściciel bloga?

Nagrodą w akcji jest "odpicowanie" WordPressa do którego zaliczać się będzie całościowa przebudowa strony zarówno pod względem graficznym jak i funkcjonalnym. Pod lupę zostanie także wzięta optymalizacja pod kątem pozycjonowania oraz użyteczności i funkcjonalności.

Warto zwrócić uwagę na to, że właściciel pozna opinie innych osób na temat swojej strony i będzie musiał sam przeanalizować jej ogólną koncepcję (co jest niestety często spychane na margines a odpowiednio wykorzystane może dać sporo korzyści).

Jakie są ograniczenia w "picowaniu"?

Od strony funkcjonalnej praktycznie jedynymi ograniczeniami są te, które stawia sam WordPress. Będę starał się korzystać z gotowych wtyczek więc pisanie nowych (zwłaszcza tych skomplikowanych) od zera raczej odpada.

Pewnym ograniczeniem jest także przedział czasowy. Wszystko powinno być zrobione w maksymalnie miesiąc.

Będziesz to wszystko robił sam?

Wszystko zależy od tego jaka strona wygra i co jej właściciel będzie chciał zmienić. Myślę, że w większości przypadków dam radę samemu wszystko zrobić aczkolwiek zgłosiło się już parę osób, które w razie potrzeby chętnie pomogą.

Ktoś na blogu WPNinja stwierdził, że byłby to doskonały początek dla założenia firmy zajmującej się profesjonalnym projektowaniem stron opartych o WordPressa. Trudno się z tym niezgodzić więc kto wie. Być może za parę miesięcy nie będę się zajmował tym tylko ja ale sztab fachowców pod wspólnym szyldem. :-)

Ile blogów masz zamiar w ten sposób "odpicować"?

Aż skończą się chętni? :-) A poważnie to nie mam ustalonej liczby czy terminu. Jeśli akcja zyska uznanie i faktycznie będzie przynosiła korzyści wszystkim zainteresowanym stronom to nie widzę problemu w jej kontynuowaniu.

— Koniec wywiadu —

Podsumowanie

Jeśli zastanawiasz się skąd wziąć dobrą szatę do swojego bloga WordPress zdecydowanie polecam akcję Odpicuj mi WordPressa – wstępne założenia z jednego prostego powodu – naprawdę warto. A tu znajdziesz informacje o pierwszej edycji akcji.

Zdjęcie: R’eyes

Minęło 9 dni, oto podsumowanie pierwszych wrażeń odnośnie widgetu pod tytułem „pytania otwarte do blogvertising.pl”. Zadawaliście sobie niektóre z nich?

Na wstępie powiem, że mimo formy niektórych pytań zadawane są one w dobrej wierze i celem jest zwrócenie uwagi na niektóre rozwiązania, które moim zdaniem mogłyby być lepsze – lub inne :).

1. Link do Blogvertising.pl

Kod widgetu standardowo zawiera link do blogvertising.pl w najczystszej postaci. Czy to znaczy, że blogvertising.pl próbuje pozycjonować się korzystając z zasobów blogerów? Rozumiem, że integrując odnośnik w kodzie jest większe prawdopodobieństwo że znajdzie się on na stronie, niż gdy ten sam odnośnik proponuje się oddzielnie – ale gdzie jest rel=’nofollow’ ?

2. CSS widgetu

Po szybkim przejrzeniu strony blogvertising.pl nie zauważyłem „podręcznika modyfikacji CSS dla przeciętnego zjadacza chleba”. Szkoda, taki podręcznik wiele by ułatwił.

3. Częściowe obsadzenie widgetu

Jeśli na naszym widgecie pojawi się tylko jedna reklama – druga automatycznie reklamuje blogvertising.pl. Zastanawiam się, dlaczego zarówno link (omowiony w pkt. 1), jak i niewykorzystany boks mają kierować użytkownika na stronę blogvertising.pl i jaką korzyść odniesie bloger reklamując blogvertising.pl.

4. Własne reklamy

Szkoda, że nie ma możliwości uzupełnienia pustych miejsc o własne reklamy, czyli wykorzystania niezagospodarowanej przestrzeni. Gdy są kampanie wszystko jest pieknie – gdy zabraknie reklam gro blogerów po prostu widget odinstaluje i wrócimy do punktu wyjścia, w którym blogvertising nie będzie miało reklamy na blogach, zainteresowanie spadnie i trzeba bedzie pompować pieniądze w reklamę.

5. Intrack i kliknięcia

Niektórym może na tym nie zależeć, ale na pewno istnieje grupa blogerów, którzy chcą, by reklamy w kampaniach miały jak najwięcej kliknięć. Dlaczego statystyki InTrack nie pokazują liczby kliknięć w poszczególne reklamy – umożliwiło by to blogerowi umieszczenie reklam w najbardziej odpowiednim miejscu pod względem widoczności.

6. Intrack ogólnie

Zastanawia mnie po co mam instalować statystyki InTrack skoro przed kampanią mogę wysłać wam eksport statystyk z Google Analytics. Brakuje choćby stwierdzenia, że „statystyki w znaczny sposób ułatwiają wam pracę i pozwalają skupić się na pozyskaniu klinetów”. Przekonajcie mnie, bo obecnie niestety nie jestem przekonany. Może rozwiązanie problemu w pkt. 5 zmieniłoby moje zdanie?

7. Cena reklamy

Zdecydowanie brakuje podręcznika „jak uzyskać dobrą cenę reklamy” zawierającego podstawowe kryteria wyceny kampanii, bo rozumiem, że nie chcecie bym umieścił widget blogvertising.pl w stopce? (może od razu połączyć z pkt. 2?)

8. Konstruktor widgetu

Konstruktor widgetu ma trzy opcje, a co jeśli mam taki pasek boczny, że mieszczą się tam 3 reklamy obok siebie? Jeśli widget to przezyje to dobrze byłoby o tym wspomnieć w „podręczniku” implementacji kodu (czy wspominałem już o podręczniku?).

9. Wylogowywanie

A na koniec mała niedogodność do intrack – wylogowując się z niego automatycznie wylogowuje z systemu blogvertising. Jak dla mnie to trochę niewygodne, zwłaszcza, że oba serwisy mają swoje odrębne domeny.

PS. (do Blogvertising.pl) – Po wymianie maili przed kampanią wierzę, że bez problemu poradzicie sobie z tymi pytaniami :).

PS. (do Czytelników) – Korzystasz z blogvertising.pl? Masz własne spostrzeżenia?

Pewnie już zauważyliście cztery prostokąty o rozmiarze 125 na 125 pikseli w pasku bocznym tego bloga. Sworzyłem je dlatego, że żaden z wymienionych programów partnerskich nie miał tego formatu w ofercie. Możecie z nich korzystać i umieszczać na własnych blogach (stronach), o ile oczywiście będą pasowały do waszej strategii reklamowej ;). Wszystkie banery są nieruchome.

1.) Linklift

Program umozliwiający sprzedaż odnośników z posiadanej strony internetowej. Do wyświetlania linków instalujemy skrypt albo wtyczkę, a wypłaty nastepują przez serwis PayPal. Podstawową stawką za odnośnik jest 7 PLN i dotyczy ona małych stron, wraz ze wzrostem znaczenia strony lub bloga cena linków zaczyna rosnąć.

Baner:

WWW: Strona Linklift

2.) Złote myśli

Program partnerski obejmujący polecanie eBooków, audioBooków (nagrań, gdzie książka jest czytana przez lektora) i szkoleń tematycznych. szeroka gama materiałów promocyjnych oraz forum dla uczestników zachęcają do współpracy wraz z maksymalnie 40% prowizją od sprzedaży. Wypłaty nastepują po podpisaniu umowy i wystawieniu rachunku (oba dokumenty można ściągnąć, wystarczy wypełnić i odesłać do firmy).

Baner:

WWW: Strona Złote myśli

3.) 8p

Hosting, na którego niedawno przeniosłem TopBlogger.pl. W chwili obecnej najtańszy serwer wirtualny kosztuje w promocji 35zł rocznie. W programie partnerskim zdobywasz punkty, które potem możesz wymienić na usługi hostingowe w stosunku 1/4. Polecając cztery osoby dla danego pakietu otrzymujesz go za darmo na rok.

Baner:

WWW: Strona 8p

4.) Snajper

Program automatycznego licytowania w aukcjach internetowych (stąd nazwa snajper). Za każdą poleconą osobę otrzymujesz 10 procent z kwoty, którą ona przeznaczy na zakup strzałów w aukcjach.

Baner:

WWW: Strona Snajper

W przyszłości mam nadzieję zrobić więcej takich grafik. Jeśli skorzystasz, daj znać – chętnie zobaczę jak wygladają na Twojej stronie :).

Twoje pole wyszukiwania wpisów może wyglądać mniej więcej tak:

Zwykłe pole do wyszukiwania, ale możemy zrobić z niego coś więcej:

• Na początku wewnątrz pola wyświetla się tekst „Znajdź wpisy…”.
• Po kliknięciu wewnątrz pola tekst znika i możemy wpisać to, czego szukamy.
• Jeśli pole jest puste i klikamy gdziekolwiek indziej na stronie znów pojawia się tekst „Znajdź wpisy…”.

Po co się bawić?

• Zastosowanie takiego „bajeru” zwiększa interaktywność strony – mała rzecz a cieszy.
• Pole wygląda schludniej – po co te wszystkie ramki, nagłówki itp.
• Nie ma możliwości by niechcący szukać „Znajdź wpisy…WordPress” (zdarza mi się co najmniej dwa razy w tygodniu…grrrrr).
• Zmiany w kodzie strony są bardzo proste.
• Działa na każdej stronie, blogu itp.

Zaczynamy

Kod pola wyszukiwania wygląda mniej więcej tak (różnice nie są ważne):
[html]

[/html]

ale nas interesuje tylko pole tekstowe (mniej ważną część kodu zastąpiłem znakiem „/**/”):
[html]/**/
/**/[/html]

1.) chcemy, żeby na początku pole zawierało tekst „Znajdź wpisy…” więc zmieniamy value=” na :
[html]
[/html]

2.) tekst ma znikać, gdy klikniemy gdziekolwiek w polu więc dopisujemy:
[html]
[/html]

3.) ale tekst ma znikać tylko, gdy użytkownik wcześniej niczego nie wpisał wiec zmieniamy wartość onfocus=”this.value == ”;” na:
[html]
[/html]

(Uwaga: we fragmencie {this.value = ”;} są dwa apostrofy, czyli ‘ + ‘)

4.) Na koniec jeszcze chcemy, by tekst „Znajdź wpisy…” pojawiał się gdy użytkownik kliknie gdzie indziej na stronie (ale tylko jeśli pole będzie puste) więc dodajemy:
[html]
[/html]
(Uwaga: we fragmencie {this.value == ”;} ponownie są dwa apostrofy, czyli ‘ + ‘)

Pod koniec kompletny kod pola tekstowego wygląda mniej więcej tak:
[html]
onfocus="if (this.value == 'Znajdź wpisy...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Znajdź wpisy...';}" />[/html]

5.) Gotowe! Jak działa? Możesz sprawdzić na moim polu wyszukiwania. Polecam ;)

Zdjęcie: Zesmerelda

Przecież koniec wpisu jest momentem krytycznym, czytelnik dostał to, po co przyszedł i teraz ważą się losy dalszego przeglądania naszego bloga. Odwiedzający może:

a) opuścić bloga
b) zdecydować się na kolejną wycieczkę

ale, żeby zachęcić czytelnika do dalszej podróży trzeba poinformować go o tym, co może dalej zrobić.

Rozsądnie zbudowana stopka może wiele, np.:

• poinformować, jak dodać wpis do różnych serwisów społecznych
• zachęcić do komentowania,
• zmotywować do prenumerowania wpisów,
• zwiększyć ilość podstron odwiedzonych przez czytelnika itp.

Krótko mówiąc, zysk bez ryzyka, bo jedyne, co może się zdarzyć to to, że czytelnik nie skorzysta z żadnej przedstawionej mu propozycji. Właśnie dlatego zmieniłem stopkę wpisu i mam nadzieję, że was również do tego zachęcę. Może za kilka tygodni (w podsumowaniu 4 miesiąca) będę mógł pochwalić się znacznym wzrostem średniej oglądanych stron, większą ilością odsłon itp. (bo na wykop obecnie nie liczę).

Nie, nie zmuszę was do tego by przewinąć wpis aż do samego końca tylko by zobaczyć stopkę, lepiej wkleić obrazek:

Do jej tworzenia przyczyniły się trzy osoby:

1.) Autor wtyczki Maintenance Mode, której potrzebowałem w trakcie przenoszenia bloga na nowego hosta. To źródło pomysłu na układ stopki.

2.) Bardzo  dobry wpis pt. Jak udoskonalić i wypromować bloga? via Krzysztof Trynkiewicz. Tam znalazłem ikonki i kod do wstawienia przycisków serwisów społecznościowych.

3.) Marcin, który w komentarzach do wpisu Czy twój ulubiony blog to demon prędkości? krzyknął: "o … a gdzie wcięło trackback uri?". No i jest :).

Dziękuję!

Ciekawe czy nowa stopka wpłynie na rozwój bloga – jak sądzisz?

1. Czas ładowania strony

Jeśli po 10 sekundach ekran przeglądarki jest biały przeciętny odwiedzający  przeskakuje do następnej zakładki. Jeśli po kolejnych 20 sekundach nadal niewiele się dzieje klika przycisk odśwież. Jeśli następna próba daje wynik podobny do pierwszych dwóch pozostaje już tylko jeden przycisk: „zamknij”.

Więcej na ten temat:

• Jak przyspieszyć bloga dla szybkich łącz
• 8 kroków do zmniejszenia ilości obrazków na stronie

2. Kolorystyka

Zdjęcie: (: Petra :)

Dobór kolorów na blogu jest jedną z pierwszych informacji która dociera do czytelnika bloga. Jeśli zestawienie barw nie mieści się w granicach tolerancji wiarygodność bloga natychmiast spada o kilka oczek. Oczywiście, że sprawę można zatuszować rewelacyjnym wpisem – tylko po co na wstępie straszyć potencjalnego czytelnika.

Więcej na ten temat:

• Polski Blogger: Znaczenie kolorów
• Ludwik.org: Magia kolorów i Określanie kolorów w CSS

3. Porządek

Blog, który w chwili załadowania wygląda jak sklep wielobranżowy w trakcie przebudowy ma zdecydowanie mniejszą szansę na zdobycie zaufania czytającego niż ten sam blog prezentujący prostą, ale schludna szatę graficzną. Odwiedzający chce wiedzieć gdzie na blogu znajduje się jaki element. Przemieszanie części głównej z paskiem bocznym, nagłówków z treścią, logo z reklamami spowoduje spadek oceny bloga o kolejne kilka oczek.

5 „porządnych” blogów:

• Adriano blog: Web is brutal
• Stwor & Webmastering blog
• Testblog
• Zaistniej w sieci
• Zwolin on-line

4. O czym jest blog

Informacją, którą czytelnicy weterani szukają jest krótki opis tego, o czym jest blog. Nie mówię tu o zakładce „o blogu” (opisana w pkt. 5) tylko o jednym czy dwóch zdaniach w nagłówku by odwiedzający wiedział czy warto. Jak zwykle dobry wpis uratuje autora, tylko – ilu odwiedzających bloger zgubi po drodze?

5 „opisanych” blogów:

• Zarabianie na blogach
• Andrzej-Ludwik Włoszczyński
• Zielony bloger
• WebAudit Blog
• AK74 – blog Artura Kurasińskiego

5. Podstawowe zakładki

Zdjęcie: juan23for

Standardy są dobre wtedy, gdy trzeba przekazać dużą ilość informacji w krótkim czasie. Jeśli podstawowe zakładki typu „strona główna”, „kontakt”, „o blogu” itp. nie znajdują się w standardowych miejscach odwiedzający (o ile już wcześniej nie uciekł) zacznie zastanawiać się, czy bloger wie co robi i w ogóle dba o swojego czytelnika. Kolejny spadek w rankingu.

5 blogów „z zakładkami”:

• Tomasz Topa
• Techkultura
• Przełam sieć
• Marketing w Internecie
• IT Tech Blog

6. Układ reklam

Reklamy są obecne na wiekszości blogów. Jeśli ich układ nie współgra z wyglądem bloga to nie dość, że własciciel bloga da sobie po kieszeni, to jeszcze wiarygodności bloga ubędzie następne kilka kreseczek w skali „czy warto czytać tego bloga”. Można odnieść wrażenie, że autor nie dba o formę swojego domu w Internecie i w związku z tym dobrej jakości nie ma co oczekiwać.

Które blogi mają według Ciebie najlepszy układ reklam?

7. Stopień „choinkowatości”

Na blogu szukam przydatnych informacji. Jako czytelnik jestem w stanie przełknąć pewną ilość dobrze umieszczonych reklam, ale jeśli blog już na wstępie atakuje mnie klimatem wesołego miasteczka pierwszym miejscem które kliknę jest czerwony krzyżyk zamykający zakładke bloga. Komunikat: Świeto odwołane z powodu braku czytelnika.

Blogi o dużym stopniu „choinkowatości”:

• Wiekszość blogów na darmowych serwerach (są chlubne wyjątki).

8. Czytelność wpisu

Zdjęcie: docman

Blog to nie magiel. Jeśli treść wpisów sprasowana jest tak, że odwiedzający trzy razy szuka początku kolejnej linii tekstu doszło chyba do nieporozumienia. Na pewno autor nie chcę by ktokolwiek przeczytał jego tekst i wie, że my – uprzejmi internauci – chętnie uszanujemy jego życzenie.

Na których blogach sądzisz, że wpisy są najbardziej czytelne?

Kolejne odwiedziny

9. Jak nazywa się strona

Element typu „nie wracajcie” (patrz też pkt. 10) to brak informacji o tym, jaki jest adres bloga. To jak wywieszenie transparentu „nie chcę byście mnie pamiętali, nie wracajcie” bo i jak tu wrócić, jeśli nie wiemy do czego. Podobna sytuacja spotkała mnie na świetnym blogu Krzysztofa Lisa – 6 razy musiałem przejść przez wyszukiwarkę by odnaleźć „Zarabianie na blogach”, na szczęście Google pomogło.

10. Logo

Niektórzy blogerzy robią sobie krzywdę. Brak logo jako symbolu bloga to sytuacja porównywalna z tym, że puma nie umieści kota na swoich wyrobach. Markę bloga buduje się od pierwszego kontaktu z potencjalnym czytelnikiem, a jeden z najłatwiejszych elementów budowania marki to przyzwyczajenie czytelnika do symbolu. Brak logo nie odstraszy nikogo, jego obecność może zachęcic wielu.

Twoim zdaniem:

Co w wyglądzie bloga najbardziej odstrasza? Masz swojego faworyta? Może masz odmienne zdanie? Napisz.

Mogłem odrobaczyć pasek boczny (wyrzucić niepotrzebne elementy), rozbić panel na dwie kolumny albo umieścić treść boczną w zakładkach. Zdecydowałem się na zakładki. Niestety pierwsza próba przy użyciu DOMTab według opisu Pro Blog Design poszła całkowicie nie tak. Ale, jak to mówią „Do dwóch razy sztuka”.

Dlaczego zakładki

Zdjęcie: Stephanie Booth

Powodów dla których spośród trzech mozliwości wybrałem zakładki jest kilka:

1. Przy podziale na dwie kolumny musiałbym przerobić szatę bloga (Po raz kolejny? – Nie, dziękuję!).
2. Byłem zdania, że nie mam co wyrzucić z paska bocznego (No dobrze, coś zawsze można wyrzucić, ale bez przesadyzmu.)
3. Potrzebowałem nieco miejsca na ewentualne reklamy w panelu bocznym. (Tym razem na pewno się uda)
4. Umieściłem ankietę trochę wyżej w pasku bocznym nie przesuwając ją przed inne elementy. (PS. Zagłosuj w nowej ankiecie.)

Instalacja

Przejdźmy do sedna sprawy…

Przygotowanie

1. Pobierz plik tabber.zip ze strony tabber. Rozpakuj go w dowolnym katalogu na dysku. Pojawia się kilka plików HTML, CSS i JS.
2. Umieść plik tabber-minimized.js w katalogu szaty graficznej na serwerze. (lub w wybranym innym miejscu)
3. Skopiuj zawartość example.css do pliku CSS używanej szaty graficznej. (plik jest bardzo dobrze opisany, więc przyjrzyj się fragmentom zaczynającym się od znaków /* )
4. W nagłówku strony bloga, czyli gdzieś między znacznikami <head> i </head> umieść następujący kod:

<script type=”text/javascript” src=”[ścieżkaDoKataloguZplikiemJs]/tabber-minimized.js”></script>

(do tego zazwyczaj trzeba edytować plik HTML lub PHP który zawiera fragment kodu odpowiadający za nagłówek, w WordPress jest to header.php)

A teraz same zakładki

1. W miejscu gdzie chcesz by pojawiły się zakładki do pliku HTML lub PHP wpisz:
   
   

   <div class=”tabber”>
   </div>

2. Aby dodać pierwszą zakładkę wpisz:
   
   

   <div class=”tabber”>

   <div class=”tabbertab” title=”Pierwsza zakładka”>
   Treść pierwszej zakładki.
   </div>
   
   </div>

3. Aby dodać kolejną zakładkę wpisz:
   
   

   <div class=”tabber”>

   <div class=”tabbertab” title=”Pierwsza zakładka”>
   Treść pierwszej zakładki.
   </div>

   <div class=”tabbertab” title=”Kolejna zakładka”>
   Treść kolejnej zakładki zakładki.
   </div>
   
   </div>

Dodatkowe informacje

1. Fragment title=”[...]„ odpowiada za wyświetlaną nazwę zakładki, więc jeśli jedna z nich ma mieć tytuł Kocham poniedziałki ;) fragment kodu bęzie wyglądał tak:
   
   

   <div class=”tabbertab” title=”Kocham poniedziałki ;)”>

2. Wszystkie zakładki tabbertab muszą znajdować się wewnątrz pojemnika na zakładki tabber (widać na przykładach wyżej).

Gotowe!

Chyba nie było aż takie trudne? Pierwsza wersja zakładek gotowa. Modyfikacji i zmian wyglądu dokonujemy we fragmencie pliku CSS który przenieśliśmy z pliku example.css.

Houston, mamy problem

Zdjęcie: sidehike

Powinienieś dość łatwo móc dostosować wpis do potrzeb swojej platformy blogowej lub strony internetowej, ale zawsze może się zdarzyć, że coś pójdzie nie tak. Niżej znajdziesz odpowiedzi na najczęściej spotykane pytania (jeśli nie znajdziesz odpowiedzi niżej wystarczy zadać pytanie w komentarzu do tego wpisu).

1. U siebie na blogu nie mam możliwości umieszczania plików, co teraz?
   Plik tabber-minimized.js można wgrać na dowolny serwer (darmowy hosting itp.), pamiętaj tylko by zgadzała się ścieżka dostępu (czytaj: adres pliku w pkt.4 akapitu „Przygotowanie”).
2. Kod wycięty z przykładów nie działa, co teraz?
   Jak już zauważył Eon, w podanych przykładach naleźy zamienić „okrągłe” cudzysłowy na cudzysłowy zwykłe. Problem wynikł z tego, że WordPress standardowo wszystkie znaki przerabia na nieszkodliwe, a cudzysłów zwykły jest jednym z tych znaków.

Spodobały Ci się zakładki? A może jednak wolisz pasek boczny w dwóch kolumnach?

Przygotowanie

Zanim zaczniemy cokolwiek zmieniać przyda się zaznajomić z wersją pierwotną i ewentualnie zrobić kopię zapasową pliku graficznego:

1.) Wchodzimy na stronę logowania naszego bloga

2.) Ściągamy plik /wp-admin/images/logo-login.gif (albo zapisujemy plik graficzny pojawiający się nad polami „użytkownik” i „hasło”)

Obr. 1. Wyglad pierwotnego ekranu do logowania

3.) Otwieramy plik w dowolnym edytorze graficznym

4.) Oglądamy jak wygląda pierwotny plik nagłówka

Zmiany

Widać, że pierwotny plik ma rozmiary 290 na 66 pikseli i jest w formacie GIF, więc nasze zastępstwo też powinno być w GIF’em o rozmiarach 290 pikseli szerokości na 66 pikseli wysokości (głębia kolorów nie gra roli).

5.) Tworzymy nowy plik graficzny o rozmiarach 290×66 z białym tłem

6.) Wklejamy nasze logo bądź to, co chcemy by pojawiało się nad polem do logowania. Nasza wyobraźnia ograniczona jest tylko dwoma czynnikami:

• Format GIF ma tylko 256 kolorów
• Grafika ma rozmiary 290 pikseli szerokości i 66 pikseli wysokości

7.) Zapisujemy nasze dzieło pod nazwą logo-login.gif (najlepiej w innym katalogu niż ten do którego ściągneliśmy wersję pierwotną, by nie nadpisać kopii zapasowej)

Podmiana

8.) Nowy plik logo-login.gif wysyłamy na serwer do katalogu /wp-admin/images/ nadpisując już istniejącą grafikę o tej samej nazwie.

Obr. 2. Wyglad ekranu logowania po zmianie (na przykładzie http://topblogger.pl/wp-login.php )

Bonus

Po zmianie nasze logo wciąż linkuje do http://wordpress.org. Aby to zmienić należy edytować plik wp-login.php (przed edycją zrób kopię zapasową!):

• W pliku wp-login.php wyszukujemy wiersz #30 o treści:
  
  

  <div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://wordpress.org/’); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>

• Podkreślony fragment zmieniamy na adres naszego bloga. W przypadku topblogger.pl wynik zmian jest następujący:
  
  

  <div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://topblogger.pl/’); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>

• Gotowe!

Działający wynik zmian możecie sprawdzić na stronie http://topblogger.pl/wp-login.php

A może wtyczka

Jeśli wolisz do sprawy podejść za pomocą wtyczek polecam dwie:

• dla WordPress 2.3.3 i niższych: Binary Moon Custom Login Page
• dla WordPress 2.5: Branded Login Screen

To jak, zmienisz sobie ekran logowania? Dlaczego? Dlaczego nie?

Źródło zdjęcia: Jan the manson 

Lista nie jest kompletna, jeśli znacie jakieś inne pochwalcie się:

• commandshift3.com – pisali o nim już Antyweb i Webowy.pl, w skrócie ocena sprowadza się do tego, że wystawiasz swojego bloga do walki jeden na jednego z całą rzeszą dostępnych na commandshift3 stron. Pozyskana informacja zwrotna jest dość ogólna, bo sprowadza się do zestawienia naszych wygrywanych i przegranych, w zamian za to commandshift3 jest świetnym źródłem dla szukających inspiracji.
• Forum Goldenline (wymaga rejestracji) – o społeczności GoldenLine pisali już m.in. Arvind Juneja i Antyweb, dodam, że istnieją miejsca gdzie możemy poddać naszego bloga ocenie. Jednym jest grupa opinie i oceny stron www a drugim, specjalnie dla blogów, jest temat http://www.goldenline.pl/forum/blogi/139228. Tu informacja zwrotna jest zazwyczaj dużo bardziej szczegółowa.
• Forum Optymalizacja (wymaga rejestracji) – w wątku strony do oceny  możemy poddać naszego bloga ocenie użytkowników z forum optymalizacja.com. (krótka notka: ittechnology.us) Społeczność ta jest co prawda raczej nastawiona na pozycjonowanie stron www, ale na pewno nie zabraknie chętnych do oceny naszego bloga.
• Forumowisko (wymaga rejestracji) – gigantyczne forum dyskusyjne o wszystkim. W wątku oceń stronę na pewno trafi się kilka osób które pomogą nam wskazać drogę do ulepszeń.
• idg.pl (wymaga rejestracji) – można jeszcze spróbować na forum idg w wątku ocena stron uzytkowników. Nigdy z niego nie korzystałem, ale sądzę, że i tu otrzymasz odpowiedź na nurtujące cię pytania..

Zanim zapytasz

Zanim zapytasz o ocenę własnego bloga poświęć kilka chwil by ocenić strony innych. Szansa na solidną recenzję wzrasta jeśli widać, że zadałeś sobie trudu by (d)ocenić innych. Także sposób w jaki oceniasz strony może wpłynąć znacząco na to jak inni ocenią twojego bloga.

4 rzeczy o których warto pamiętać

1. Czytaj regulamin forum zwyczajnie dlatego, że jeśli go nie przeczytasz i zrobisz coś ,czego wg. regulaminu nie wolno, twoja prośba zostanie skasowana i zmarnujesz własnyczas.
2. Bądź uprzejmy, to że niektórzy użytkownicy zachowują się jakby pozjadali wszystkie rozumy nie znaczy, że masz się zachowywać podobnie. Liczy się cel, czyli ocena bloga.
3. Jeśli masz konkretne pytanie zadaj je zamiast owijać w bawełnę. Uwaga! Wielokrotnie szczegółowe pytanie zwyczajnie przerasta przeciętnego użytkownika, więc dobrze jest nie przesadzać.
4. Dziękuj osobom za ocenę, jeśli ktoś ocenił twoją stronę podziękuj mu za włożony trud, czy to na łamach forum, czy prywaną wiadomością – będziesz miał pewność, że następnym razem ta sama osoba też chętnie oceni jeden z twoich blogów.

Jak podchodzić do informacji

Wielokrotnie z wypowiedzi forumowiczów nie dowiesz się niczego poza tym, że blog jest "do bani, katastrofą, porażką itp.". Jeśli chcesz się wdawać w bitwy słowne proszę bardzo, sądzę jednak, że wystarczy poczekać kilka dni i zobaczyć, czy nie będzie jakiś poważnych komentarzy – jeśli nie, może to znaczyć, że blog rzeczywiście wygląda fatalnie a dobry wygląd osiągniemy jedynie po kompletnej przebudowie. Podchodź do każdej zdobytej informacji z dystansem i bądź szczery wobec samego siebie, jeśli sądzisz, że krytykujący ma rację, nie kłóć się o duperele.

Co jeśli nikt nie odpowie

Jeśli nikt nie odpowiada na ogłoszenie może to znaczyć kilka rzeczy:

• Podszedłeś do sprawy "olewczo", ludzie lubią być szanowani, wiec nie zaszkodzi opisać swoją prośbę dokładnie i odpowiednio do sytuacji jednocześnie będąc uprzejmym.
• Nie ma czego poprawiać, jeśli twój blog wygląda bardzo dobrze i ma swój klimat nie oczekuj dwustu krytycznych wpisów, czasem zwyczajnie nie ma czego krytykować, a nie każdy powie "super", "świetnie", "rewelacyjnie".
• Nie oceniłeś stron innych użytkowników pokazując, że społecznośc nie jest dla ciebie ważna i liczy się tylko to, że sam otrzymasz to co chcesz. Drugą wersją tego mogą być odpowiedzi jednosłowne pt. "do luftu", "szajs" itp.

Dając sobie trochę czasu i wystawiając bloga do oceny na kilku forach można zdobyć dość pokaźną kolekcję komentarzy. Łącząc to z oceną kilku wybranych przyjaciół możecie zebrać listę poprawek starczącą na kilka tygodni.

Podziękowania

Za waszą pomocą, wsparciem Marcina z iworks.pl i Roberta z Webaudit.pl i uczestników forum Goldenline topblogger przeszedł dużą transformację, serdecznie dziękuję i polecam się na przyszłość.

PS. Chętnych zapraszam do grupy Polska – Poland na blogcatalog.com.

Jeśli nie czytaliście wczorajszego wpisu i w pewnym momencie pogubicie się zapraszam do wpisów Jak przyspieszyć bloga dla szybkich łącz i 8 kroków do zmniejszenia ilości obrazków na stronie które zawierają pierwsze dwa odcinki drogi, której finałem jest ten wpis.

Obr. 1. Powiększony wycinek pliku bar.gif

Tak naprawdę wszystkie elementy strony poza logo i tłem z chmurkami przedstawiają wycinki obrazka bar.gif. Niżej krok po kroku opiszę sposób w jaki na stronie TopBlogger bar.gif wykorzystany jest w trzech miejscach a wyświetlanie wycinka odbywa się za pomocą arkusza stylów style.css.

Górny pasek nawigacyjny – HTML

W pliku HTML znajduje się nastepujący kod, znacznikiem [...] zastąpię obecnie nieważną część kodu. Tak wygląda polecenie stworzenia obszaru w którym pojawi się górny pasek nawigacyjny:

<div>[...]</div>

Gdybym chciał użyć obszaru wielokrotnie, musiałbym oznaczyć go za pomocą klasy (coś jak chusteczka wielokrotnego użytku) i znacznika class="pasektop", ale skoro pasek pojawia się na stronie tylko raz skorzystałem z identyfikatora (coś jak dowód osobisty – każdy jest jedyny w swoim rodzaju) i znacznika id="pasektop":

<div id="pasektop">[...]</div>

Górny pasek nawigacyjny – CSS

Informacje o tym jak obszar o nazwie pasektop ma wygladać, znajduje się w arkuszu stylów pod nazwą style.css. W pliku CSS najpierw zaznaczamy, że w kodzie HTML istnieje element o nazwie pasektop dla którego mamy specjalne polecenia:

#pasektop{}

Znaczek # informuje o tym, że #pasektop w arkuszu stylów odnosi się do elementu w kodzie HTML określonym jako id="pasektop" . Gdybym w HTML użył znacznika class="pasektop"  w pliku CSS zamiast kratki użyłbym kropki i napisał .pasektop{}.

Pasek otrzymuje tło

#pasektop {background: url(‘gfx/bar.gif’);}

Tło ma być wyświetlane od lewego górnego rogu obszaru

#pasektop {background: url(‘gfx/bar.gif’) top left;}

Pasek ma mieć dokładnie 864 pikseli szerokości (tak szerokie jest niebieskie tło)

#pasektop {background: url(‘gfx/bar.gif’) top left; width: 864px;}

Pasek ma być wysoki na 32 piksele z czego 5 pikseli to odstęp od górnej krawędzi, czyli 27 pikseli wysokości + 5 pikseli odstępu.

#pasektop {background: url(‘gfx/bar.gif’) top left; width: 864px; height: 27px; padding-top: 5px;}

Gotowe:

Pasek jest szeroki na 864 piksele i wysoki na 32, tło wyrównane jest do górnego lewego rogu w związku z czym jakakolwiek treść obrazka nie znajdująca się w tym obszarze będzie niewidoczna. To także wykorzystałem i plik zawiera jeszcze dwa elementy: gradient oraz ikonkę RSS.

Treść – HTML

Obszar treści również jest unikatowy w związku z czym kod HTML wygląda następująco:

<div id="tresc">[...]</div>

Treść – CSS

W arkuszu stylów określamy jak obszar o nazwie treść ma wyglądać:

#tresc {}

I teraz krok po kroku opisujemy cechy pojemnika treść:

Obszar otrzymuje tło

#tresc {background: url(‘gfx/bar.gif’);}

nie chcemy ponownie niebieskiego paska, więc przesuniemy obrazek o 44 piksele do góry

#tresc {background: url(‘gfx/bar.gif’) 0px -44px;}

Obrazek nie wypełni całego tła więc w pozostałej części obszaru tło ma być białe

#tresc {background:#fff url(‘gfx/bar.gif’) 0px -44px;}

Obszar ma mieć 840 pikseli szerokości

#tresc {background:#fff url(‘gfx/bar.gif’) 0px -44px; width: 840px;}

Gotowe:

Pasek jest szeroki na 840 piksele a jego wysokość zależy od ilości treści. Tło jest wyrównane do lewej strony (0px), dodatkowo 44 piksele obszaru zajmowanego przez niebieskie tło są schowane. W obrazku gradient znajduje się na samym dole, więc obszar dla którego nie starcza obrazka wypełnia odcień biały. Została ikonka RSS.

Ikonka RSS – HTML

W przypadku ikonki RSS jest inaczej, pojawia się ona w dwóch miejscach na stronie, w pasku bocznym i pod każdym wpisem, więc jak wspomniałem w części Górny pasek nawigacyjny – HTML nie możemy stosować identyfikatora, trzeba pokazać klasę, nazweałem ją feedimg:

<div class="feedimg">[...]</div>

Ikonka RSS – CSS

Wielokrotne pojawianie się danego elementu (technicznie mówiąc "klasa") w pliku arkusza stylów oznaczamy nie kratką lecz kropką:

.feedimg {}

Po raz trzeci opisujemy właściwości pojemnika <div>:

Pojemnik otrzymuje tło

.feedimg {background: url(‘gfx/bar.gif’);}

Tło ma pokazywać obszar obrazka w którym pojawia się ikonka

.feedimg {background: url(‘gfx/bar.gif’) -840px -44px;}

Pojemnik ma mieć takie rozmiary jak obszar obrazka, w którym pojawia się ikonka (czyli 54 piksele szerokości i 52 piksele wysokości)

.feedimg {background: url(‘gfx/bar.gif’) -840px -44px; width: 54px; height: 52px;}

Pojemnik ma być po lewej stronie a wybrany tekst ma go opływać po prawej

.feedimg {float: left; background: url(‘gfx/bar.gif’) -840px -44px; width: 54px; height: 52px;}

I to by było na tyle gdyby nie ostatnie wymaganie – obrazek ma być odnośnikiem do kanału informacyjnego http://feeds.feedburner.com/Topblogger.

Odnośnik do kanału RSS – HTML

Ta część powstała dzięki pomocy Marcina i jego wpisom na blogu oraz Pavla. Dziekuję :)

Odnośnik wstawiamy za pomocą znacznika <a>:

<a></a>

Dodajemy informację o tym dokąd ten odnośnik ma prowadzić:

<a href="http://feeds.feedburner.com/Topblogger"></a>

I jeszcze tekst, który ma się pojawiać gdy osoba będzie korzystała z opcji czytania na głos odnośników przez komputer:

<a href="http://feeds.feedburner.com/Topblogger">kanał informacyjny</a>

Całość umieszczamy wewnątrz wcześniej przygotowanego pojemnika feedimg:

<div class="feedimg"><a href="http://feeds.feedburner.com/Topblogger">kanał informacyjny</a></div>

Odnośnik do kanału RSS – CSS

W tej cześci skorzystamy z pewnej cechy arkuszy stylów, która pozwala okreslić wszystkie elementy znajdujące się wewnątrz jednego pojemnika; w tym wypadku określimy wszystkie odnośniki które pojawiają się wewnątrz obszaru feedimg:

.feedimg a {}

Ten kawałek kodu w pliku CSS mówi tyle co "dla każdego odnośnika <a> znajdującego się wewnątrz pojemnika klasy .feedimg zrób to, co jest w nawiasach.

Pozostaje jedynie powiedzieć co chcemy osignąć:

Chcemy aby tekst wypełniał przestrzeń, więc musimy okreslić, że odnośnik ma zachowywać się jak prostokąt:

.feedimg a {display:block;}

Prostokąt/tekst ma mieć rozmiary jak pojemnik:

.feedimg a {display:block; width: 54px; height: 52px;}

Tekst którego uzyliśmy dla odnośnika ma nie zasłaniać tła obrazka, więc przesuwamy go:

.feedimg a {display:block; width: 54px; height: 52px;
text-indent: -99em;}

Prostokąt ma się nie podkreślać i być bez obramowania:

.feedimg a {display:block; width: 54px; height: 52px;
text-indent: -99em; text-decoration: none; border: 0px;}

Gotowe:

Odnośnik wyświetlany jest w postaci prostokątu który zajmuje całą powierzchnię pojemnika, tekst ukryliśmy, podobnie jak nadliczbowe części obrazka: poprzez wyrzucenie go poza okno. Dodatkowo odnośnik nie będzie miał ani ramki, ani nie będzie się podkreślał.

Podsumowanie

Przy opisie jak za pomocą HTML i CSS z trzech obrazków zrobić jeden, pominąłem zagadnienie formularza wyszukiwania które spowodowało, że na toblogger.pl stosunek zaoszczędzonych obrazków wynosi nie 3 do 1, lecz 5 do 1.

Zyskanie 0,2 sekundy na każdym elemencie i tym samym 0,8 sekund na całości samo w sobie nie jest oszołamiające, ale zgodnie z zasadą krok po kroku i włączając oszczędności uzyskane we wpisie 8 kroków do zmniejszenia ilości obrazków na stronie strona ładuje się średnio 2 sekundy szybciej niż przedtem. Krok po kroku do celu.

Na zakończenie spytam: Czy wpis jest użyteczny? Dlaczego? Dlaczego nie?

1. wykop – serwis umozliwiający dodanie ciekawych znalezisk w sieci
2. elefanta – serwis społecznościowy
3. technorati – serwis społecznościowy o blogach
4. stumbleupon – serwis umozliwiający ocenę i polecanie stron
5. digg – anglojęzyczny pierwowzór wykop.pl
6. del.icio.us – serwis zakładek internetowych
7. co.mments.com – serwis śledzenia komentarzy różnych wpisów

Każdy serwis przedstawiany jest w postaci ikonki o rozmiarach 16 na 16 pikseli co w sumie daje siedem obrazków o łacznej wadze 4,267 bajtów:

Obr. a. – tabela ikonek zawartych w pasku serwisów społecznościowych uporządkowana alfabetycznie

Cel

Aby zmniejszyć ilość plików na stronie TopBlogger.pl za kilka dni zamierzam zmienić sposób ich prezentacji i z siedmiu obrazków zrobić jeden. Motywuję się nastepująco:

• poszczególne strony wpisów będą ładowały się szybciej (każdorazowo 1,2 sekundy tylko za pomocą tej małej modyfikacji)
• obciążenie serwera "obsługujacego" jednego czytelnika będzie wymagało mniej zasobów (6 połączeń mniej na każdy obejrzany wpis)
• za pomocą tego samego zaplecza bedę mógł zaprezentować treść większej liczbie czytelników jednocześnie (konsekwencja powyższych punktów)

Przygotowania

Przed modyfikacją uwzgledniłem trzy rzeczy:

1. będzie bardzo kolorowo i muszę korzystać z formatu PNG obsługującego 16,7 milionów kolorów i dodatkowo przeźroczyste tło
2. każda ikonka ma 16 na 16 pikseli
3. mam do połaczenia siedem obrazków

1.) Przygotowujemy tło

Aby ze wszystkich siedmiu grafik zrobić jedną potrzebujemy nowy obrazek o rozmiarach 112 pikseli szerokości i 16 pikseli wysokości tak by wszystkie siedem ikonek ładnie zmieściło się obok siebie. Dla kontrastu przy wklejaniu obrazków kolor tła: ciemny.

Obr. b. – nowy pojemnik dla obrazków : icons.png

2.) Wklejamy obrazki

Otwieramy wszystkie obrazki i jeden po drugim kopiujemy ich zawartość do nowego pliku icons.png, ewentualne różnice rozmiarów wypełniamy kolorem tła.

Obr. c. – icons.png po przekopiowaniu wszystkich obrazków

3.) Potrzebujemy okienka

Obecna postać pliku rozwiązała jeden z naszych problemów, z siedmiu obrazków powstał jeden. Teraz potrzebujemy swoistego "okienka", czyli sposobu by wyświetlić tę część obrazka która w danym momencie jest nam potrzebna. W tym celu posłużymy się znacznikiem <div>.

4.) Budujemy okienko

Aby znacznik <div> spełnił swoją rolę trzeba określić co i jak ma pokazywać -posłużymy się językiem arkuszy stylów CSS i zamiast samego <div> wpiszemy:

<div style="">

Następnym krokiem jest powiedzenie okienku, że ma wyświetlać zrobioną przez nas grafikę:

<div style="background: url(‘icons.png’);">

Dodatkowo chcemy aby okienko wyświetlało tylko mały fragment całego obrazka odpowiadający pierwotnym ikonkom 16 na 16 pikseli, więc określamy jego szerokość i wysokość (cały kod jest w jednej linijce):

<div style="background: url(‘icons.png’); width: 16px; height: 16px;">

Jako ostanie zagadnienie budowy chcemy aby kolejne okienka pojawiały się obok siebie – do tego użyjemy polecenia float: left;

<div style="background: url(‘icons.png’); width: 16px; height: 16px; float: left;">

Ostatnim krokiem budowy okna jest określenie, że już skończyliśmy je budować, czyli znacznik </div>.

<div style="background: url(‘icons.png’); width: 16px; height: 16px; float: left;"></div>

Okno gotowe, pozostaje kwestia poruszania okienkiem tak, aby pokazywało ten fragment obrazka który najbardziej potrzebujemy.

5. Ruszamy obrazkami

Skoro w obrazku icons.png jedna ikonka położona jest obok drugiej a każda ikonka ma 16 pikseli szerokości potrzebujemy sposobu by pokazać akurat te 16 pikseli o które nam chodzi – w tym celu będziemy przesuwali pasek obrazków tak by okienko pokazywało wybrany fragment, czyli o kolejno 0, 17, 33, 49, 65, 81 i 97 pikseli w lewo.

Obr. c. – icons.png po przekopiowaniu wszystkich obrazków

pierwszy obrazek (del.icio.us) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) 0px 0px; width: 16px; height: 16px; float: left;"></div>

drugi obrazek (technorati) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -17px 0px; width: 16px; height: 16px; float: left;"></div>

trzeci obrazek (wykop) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -33px 0px; width: 16px; height: 16px; float: left;"></div>

czwarty obrazek (stumbleupon) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -49px 0px; width: 16px; height: 16px; float: left;"></div>

piąty obrazek (elefanta) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -65px 0px; width: 16px; height: 16px; float: left;"></div>

szósty obrazek (digg) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -81px 0px; width: 16px; height: 16px; float: left;"></div>

siódmy obrazek (co.mments) wyświetlamy za pomocą:

<div style="background: url(‘icons.png’) -97 0px; width: 16px; height: 16px; float: left;"></div>

I bylibyśmy juz na końcu naszej podróży gdyby nie mały problem: okienko lubi znikać.

6. Potrzebujemy szyby

Przeglądarki uwielbiają ignorować okienka bez treści. Mamy pięknie zbudowane okienko, panoramę w postaci icons.png i jedyne czego nam teraz brakuję jest obrazek-szyba – możecie pobrać go spod adresu http://topblogger.pl/blank.gif (prawy przycisk myszy i "zapisz obiekt docelowy jako…").

7. Wstawiamy szybę

Podobnie jak okienko przeźroczysty obrazek trzeba umieścić na swoim miejscu za pomocą (znów wszystko w jednej linijce):

<img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" />

Tak więc kod dla każdego okienka będzie wygladał nastepująco (dla lepszej czytelności część kodu z punktów 4 i 5 zastąpiłem oznaczeniem [...] )

<div style="[...]"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

8.) Gotowe

A oto jak wygląda całość:

<div>

<div style="background: url(‘icons.png’) 0px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -17px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -33px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -49px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -65px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -81px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<div style="background: url(‘icons.png’) -97 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>

<br style="clear: both;" />

</div>

Korzyści

• 6 obrazków mniej na stronie
• strona ładuje się 1,2 sekundy szybciej
• waga obrazków zmniejszyła się z 4,267 bajtów na 2,525 bajtów
• aby strona ładowała się jeszcze szybciej można połączyć większą liczbę obrazków bądź stworzyć kilka zestawów okienek

Podsumowanie

Zwiększenie szybkości wyświetlania strony nie polega na wykonaniu jednej czynności, a skutki nie są zależne wyłącznie od środków. Albo cytując blog sgk74exp we wpisie wykopana muzyka z windowsowych dźwięków:

Elementy składowe nieszczególne, ale końcowy efekt naprawdę imponujący, momentami wręcz niewiarygodny!

Lubię takie niecodzienne pomysły.
Lubię jak ktoś tak potrafi zrobić "coś z niczego" :)

Każdy może zrobić coś z niczego. Druga część miniserii będzie o tym, jak powyższy sposób zastosowałem w innych miejscach szaty graficznej topblogger.pl i strona główna ma tylko 10 elementów.

Na zakończenie spytam: Czy wpis był ciekawy? Dlaczego? Dlaczego nie?

Podziękowania

Dziekuję Marcinowi za miniaudyt – topblogger.pl bez którego następny wpis z pewnoscią byłby o wiele uboższy.

To drugi wpis serii Jak zdobyć czytelników.

Blog jest swoistym rodzajem panelu użytkownika za pomocą którego czytelnik porusza się po zasobach udostępnionej przez nas blogowiedzy. Już w roku 1982 wybitny naukowiec Dr. Ben Shneiderman w książce „Designing the User Interface: Strategies for Effective Human-Computer Interaction” opublikował 8 złotych zasad tworzenia panelu administracyjnego i, co za tym idzie, przystępnego bloga (tłumaczenie cytatów własne):

1. Bądź konsekwentny

„W podobnych sytuacjach należy wymagać podobnych czynności, do tego należy identyczne nazewnictwo w pytaniach i możliwościach odpowiedzi, menu i ekranach pomocy; spójność nazewnictwa powinna być całkowita.”

Co to znaczy dla bloga:

• jeśli w jednym miejscu strona główna nazywa się „blog” to i w pozostałych miejscach jej nazwa powinna być taka sama.
• jeśli ikonka rss znajduje się w jednym miejscu na stronie, to i na pozostałych stronach powinna znajdować się w tym samym miejscu.
• jeśli na stronie głównej jest odnośnik do rejestracji użytkownika to na pozostałych stronach nie powinien on nagle znikać.
• jeśli strona głowna ma szatę graficzną to pozostałe strony powinny pod tym względem być konsekwentne itp.

Komentarz:

Kurcze, własnie zmieniłem szatę graficzną bloga i myslałem, że mam wszystko z głowy a tu okazuje się, że można jeszcze dużo rzeczy poprawić np. Pierwszy odnośnik i zarazem strona główna na pasku nawigacyjnym nazywa się „Artykuły” ale już we ścieżce do oglądanej strony nazywa się „Strona główna” – i bądź tu czytelniku mądry o co mi chodziło.

2. Udostępnij skróty dla regularnych użytkowników

„Wraz ze wzrostem częstotliwości użytkowania wzrasta potrzeba użytkownika do zmniejszenia liczby czynności przy jednoczesnym zwiększeniu ich tempa. Dla doświadczonego użytkownika bardzo pomocne są skróty, klawisze funkcyjne, ukryte komendy i makra.”

Co to znaczy dla bloga:

• w formularzach należy stosować odpowiednią kolejność pól tak aby klawiszem „tab” móc przeskakiwać do następnych pół.
• najczęściej stosowane elementy strony powinny być obecne na samej górze strony niezależnie od tego, czy i gdzie jeszcze pojawiają się na blogu.
• ilość kliknięć między początkiem a miejscem docelowym powinna być możliwie jak najmniejsza by zapewnić poczucie komfortu czytelnika.
• dobrze jest umozliwić czytelnikowi i osobie regularnie komentującej dostęp do szybszego działania przez OpenID, logowanie na blogu itp.

Komentarz:

Do tej pory broniłem się przed OpenID ale chyba własnie zostałem przekonany. Logowanie w nowej szacie też można uprościć. Jeśli macie pomysły co do stosowania tego punktu dajcie znać albo mailem albo w komentarzach :).

3. Daj treściwą informacje zwrotną

„Każda czynność użytkownika powinna rezultować w odpowiedzi systemu. Dla często powtarzanych i poślednich czynności odpowiedź może być skromna, dla rzadko wykonywanych i ważnych zagadnień należy stosować bardziej treściwe odpowiedzi.”

Co to znaczy dla bloga:

• jeśli czytelnik „najedzie” na łącze to powinno ono reagować zmianą koloru, podkreśleniem, zmianą tła itp.
• jeśli czytelnik kliknie odnośnik na kolejnej stronie powinien znaleźć informacje o tym gdzie jest lub skąd przyszedł
• jeśli czytelnik wyśle wiadomość za pomocą formularza powinno pojawiać się podziękowanie za wiadomość.
• jeśli czytelnik wejdzie na naszego bloga powinien zostać powitany itp.

Komentarz:

Stosując szerszą interpretacje tego zagadnienia można dodać, że po przyjści na naszego bloga użytkownik powinien zostać mile powitany i zastać informacje o temacie bloga – kawa i herbata z przyczyn technicznych obecnie odpadają :).

4. Twórz interakcję by osiągnąć cel

„Kolejne czynności powinny być zorganizowane w sekwencje mające początek, środek i koniec. Informacja zwrotna po zakończeniu sekwencji daje użytkownikowi poczucie osiągnięcia celu, poczucie ulgi, sygnał by zarzucić plany awaryjne i myśli o niepowodzeniu, dodatkowo daje sygnał, że użytkownik może skoncentrować się na przygotowaniu do wykonania następnej sekwencji.”

Co to znaczy dla bloga:

• sekwencja „wyślij wiadomość”: kliknij zakładkę kontakt – wpisz wiadomość – kliknij „wyślij” – otrzymaj informacje o treści „dziękuję za wysłanie wiadomości” – przygotuj się do następnej sekwencji.
• sekwencja „odwiedź bloga”: kliknij na odnośnik do bloga – poczekaj na załadowanie się strony – otrzymaj informacje typu „witaj na blogu” – przygotuj się do następnej sekwencji.
• sekwencja „szukaj”: wpisz szukaną frazę w okienko – wciśnij klawisz „enter” – poczekaj na wyświetlenie się strony z wynikami – otrzymaj informacje zwrotną typu „10 wyników dla frazy …” itp.

Komentarz:

O tym do tej pory nie myślałem i jest to dla mnie kompletna nowość co jedynie świadczy o tym, że do „topbloggera” jeszcze długa droga. Myśleliście kiedyś o własnym blogu na zasadzie sekwencji czynności?

5. Zaproponuj proste rozwiązanie problemu

„O ile to możliwe zaprojektuj system tak, aby użytkownik nie mógł popełnić poważnego błedu. Jeśli mimo wszystko zdarzy się błąd system powinien go wykryć i zaproponować proste oraz zrozumiałe wyjście z sytuacji.”

Co to znaczy dla bloga:

• strona błędu powinna zawierać możliwości rozwiązania problemu jak np. na stronie polski blogger, zaistniej w sieci, iworks lub lanooz.
• opisy błedów przy robieniu komentarzy powinny być przejrzyste.
• błędna pisownia w komentarzach powinna być możliwa do wychwycenia za pomocą podglądu komentarza lub podkreśleń słów za pomocą słownika w przeglądarce.
• użytkownik powinien mieć mozliwość i zachętę do prostego powiadamiania o błędach właściciela bloga itp.

Komentarz:

Strona błędu w wiekszości jest konfigurowalna, w WordPress jest to plik 404.php (który w razie potrzemy tworzymy i wgrywamy na serwer). Jeśli macie informacje o innych systemach jak np. blox lub onet blog napiszcie jak to się robi.

6. Czynności powinny być łatwo odwracalne

„Łatwa odwracalność czynności zapobiega niepewności użytkownika. Jeśli użytkownik wie jak odwrócić bład zachęca go to do zapoznania się z nieznanymi dotąd mozliwościami. Odwracalność może dotyczyć jednej czynności, wpisywania danych lub całej sekwencji czynności.”

Co to znaczy dla bloga:

• odnośnik pod tytułem „wstecz” lub „powrót” na stronie nie jest takim złym pomysłem choć zwyczajowo użytkownik korzysta z przycisku przeglądarki.
• umieszczenie ścieżki do obecnego dokumentu tzw. „breadcrumb” pozwoli czytelnikowi wybrnąć z trudnych sytuacji.
• przycisk „wyczyść” przy formularzu kontaktowym może pomóc w odwracaniu skutków braku inspiracji pisarskiej.
• przycisk „wyczyść” przy polu komentarzy – jak wyżej :).

Komentarz:

W sumie punkt zahacza o stronę błedów 404 wymienioną w punkcie 5, ale podchodzi do tematu z innej perspektywy.

7. Wspieraj poczucie kontroli

„Doświadczeni użytkownicy czują silną potrzebę panowania nad systemem oraz tego, by system reagował na ich czynności. Zaprojektuj system tak, by użytkownik był osobą inicjującą czynność a nie jej biernym odbiorca.”

Co to znaczy dla bloga:

• wyskakujące okienka wszelkiej maści nie są dobrym pomysłem.
• automatyczne przekierowanie do strony głównej nie jest dobrym pomysłem, lepiej stosować stronę błedu 404.
• automatyczne przekierowanie na inne strony nie jest dobrym pomysłem.
• ukrywanie adresu strony docelowej nie jest dobrym pomysłem

Komentarz:

Niestety przekierowanie na inne strony jest czasem konieczne, syndrom psa ogrodnika opisał Krzysztof Lis, a tu znajdziesz informacje o tym jak przekierować linki. Dodam tylko, że moim zdaniem dopóki dbasz o swoje i równocześnie o dobro czytelnika przekierowanie linków jest w porządku. Jakie jest Twoje zdanie na ten temat?

8. Zmniejsz obciążenie pamięci krótkotrwałej

„Ograniczenia w przetwarzaniu informacji przez pamięć krótkotrwałą wymagają prostej komunikacji, uproszczenia wielostronnicowych formularzy, zredukowania potrzeby poruszania się po ekranie i wystarczająco czasu na zapoznanie się z i zapamiętanie struktury oraz możliwych sekwencji czynności.”

Co to znaczy dla bloga:

• nawigacja bloga powinna być opisana jak najprościej i bez zbędnego żargonu technicznego.
• formularze zamówień powinny być krótkie, treściwe i zredukowane do minimum (tyczy się również innych formularzy).
• czytelnik nie powinien być zmuszany do wędrowania wzrokiem po całym ekranie by znaleźć to, czego szuka.
• struktura strony powinna być przejrzysta i przyjazna czytelnikowi, by jak najbardziej skrócić czas aklimatyzacji.

Komentarz:

W tym miejscu kłania się temat tzw. „usability”, czyli studium tego jak stworzyć coś, co oferuje jak najwięcej uzyteczności przy zachowani jak najprostszej formy.

PS. Który z punktów uważacie za najważniejszy?

Zanim jednak do tego dojdzie trzeba zdobyć jego zaufanie, trzeba pokazać, że jest po co wracać i że tematy na blogu będą odpowiadać jego wyobrażeniom o tym, co się będzie na blogu działo.

Obietnice które już złożyliśmy

Rozpatrując blogowanie w kategoriach obietnic i ich spełnienia, pierwsze obietnice wszyscy mamy za sobą:

1. Założyliśmy bloga

Otworzyliśmy się na świat, przelewamy nasze myśli na papier elektroniczny,  można czytać nasze wypociny 24 godziny na dobę, 7 dni w tygodniu. Nikt nas nie zmusił do prowadzenia bloga – wyboru dokonaliśmy sami. Czytelnik docenia złożoną przez nas obietnicę i odwiedza bloga – zwyczajnie jest ciekaw, czy na tej stronie znajdzie coś interesującego.

Złożona obietnica nie jest ograniczona czasowo, nikt nie twierdzi, że już do końca naszych dni będziemy skazani na prowadzenie bloga i to konkretnie na ten temat, jakkolwiek koniec bloga nie jest łamaniem obietnicy (nic nie może trwać wiecznie), tylko bardzo często jest końcem naszej opowieści – pokrytym kurzem starym magazynem lub miejscem, które przestało istnieć: „Room 404: Page not found”.

2. Piszemy na temat

Niekiedy obiecujemy czytelnikowi złote góry, czasem zaistnienie w sieci, zarabianie na blogach lub Kartonki, dobrany temat jest kolejną obietnicą którą próbujemy zwabić czytelnika. Każdy lubi konsekwencję i czytelnicy nie są tu wyjątkiem – oczekują, że będziemy pisać na określone tematy, ponieważ sami tak postanowiliśmy.

Prowadząc blog osobisty obiecaliśmy dzielić się najważniejszymi z naszych wrażeń, przedstawiając je z naszej perspektywy. W tym przypadku tematem jest nasze życie, my, nasz światopogląd i umiejętność wyrażania tego czym jesteśmy – ludźmi którzy złożyli obietnicę.

3. Utrzymujemy bloga

Mniej lub bardziej regularnie dodajemy nowe kawałki wiedzy do naszej biblioteki, opowiadamy jak to zrobić lub co nas denerwuje, ale każdy „popełniony” wpis jest realizacją złożonych obietnic i jednocześnie kolejną obietnicą. Za każdym razem spełniamy oczekiwania naszych czytelników którzy czytają nas dlatego, że takie obietnice złozyliśmy. Bez pierwszych dwóch obietnic, zdobycie jakiegokolwiek czytelnika (poza nami samymi) byłoby niemożliwe. Utrzymanie bloga jest spełnianiem złożonych obietnic i składaniem nowych, choć jak już pisałem – nic nie jest na zawsze.

Jeszcze więcej obietnic

Obr. 1. – focus pattern ze strony www.rondexter.com

Patrząc na to, że pierwsze obietnice realizujemy bez problemu, można pokusić się i sięgnąć po nowe wzory, wybrać nowe barwy i spleść regularny wzory, tak bardzo lubiane przez czytelników:

4. Formatuj tekst dla ludzi

Google jest wdzięcznym czytelnikiem ale niestety nie może subskrybować naszych kanałów informacyjnych ani dodawać komentarzy. Ludzie, a zwłaszcza czytelnicy, są bardziej wymagający:

• średniej długości akapity pozwolą ogarnąć treść, pozwalając na łatwe jej zrozumienie. Czytelnicy „przelatują” przez teksty zatrzymując się na najbardziej ciekawych elementach a my możemy im w tym pomóc.
• śródtytuły podzielą nasze wywody na mniej lub bardziej łakome kąski tak jak tort dzielony jest na kawałki, no chyba, że mamy zamiar  czytelnika zadławić.
• pogrubienia, podkreślenia i kursywa są po to, by z nich korzystać i uwypuklić najważniejsze sentencje lub kluczowe elementy tekstu. Czytający który trafi na tekst odpowiednio sformatowany dużo sprawniej dotrze do treści której szuka.
• justowanie tekstu do lewej strony pozwoli oku spokojnie skakać od jednego słowa do drugiego i bez wysiłku ogarnąć kolejne partie tekstu. Nieregularne odstępy między słowami wymagają większego wysiłku i utrudniają dotarcie do treści.

5. Zapewnij im rozrywkę

Każdy od czasu do czasu lubi się rozerwać i dobrze bawić, organizacja dobrej rozrywki na blogu wcale nie jest taka trudna:

• można zorganizować ankietę i choć najprościej wdrożyć ją za pomocą wtyczki WordPress WP-Polls (Platforma Serendipity ma wbudowany moduł ankiet) użytkownicy innych systemów mogą korzystać z http://www.darmowe-sondy.pl/. Mała sonda pozwoli czytelnikowi zostawić ślad i powiedzieć „byłem tu”.
• a może konkurs? Choć to opcja dla blogów które już zdobyły średnią liczbę czytelników może być też sposobem na promocję bloga i zdobycie większej ilości odwiedzin, wszystko zależy od organizacji i celu konkursu.
• zdjęcia, podcasty, rysunki i filmiki umiejętnie stosowane ożywią naszą stronę i sprawią, że jest ona lżejsza, przyjemniejsza i bardziej przystępna (bonus: można ścigać się z lunaparkiem).

6. Szanuj innych bloggerów

Najbardziej świadomymi czytelnikami są inni bloggerzy: wiedzą jak zostawiać komentarze, zazwyczaj znają się na netykiecie i mogą stanowić ogromną siłę przebicia. Przychylność innych bloggerów (i tym samym wartościowego czytelnika) można zyskać:

• linkując do odpowiednich wpisów, czy to dodatkowe informacje czy pokrewny temat, odnośnik do innego bloga na pewno zaskarbi Ci wizytę jednego nowego czytelnika – potrafisz go zatrzymać?
• komentując ciekawe wpisy znalezione na blogach dajemy znać, że szanujemy pracę innych i doceniamy to, co robią dla rozwoju naszego i blogosfery, blogger pisze po to by go czytano, a dobrze przemyślany komentarz na pewno nie pozostanie niezauważony.
• pomagając innym bloggerom możesz być pewien, że docenią oni wkład twojej pracy, wiec jeśli zauważysz coś, co wygląda nie tak krótka notka do właściciela bloga spełni dwie funkcje: 1.) serwis wróci do normy 2.) właściciel bloga będzie wiedział, że komuś zależy by ten blog działał.

7. Pisz dla ludu ludzi

Czytelnik lubi przejrzyście prezentowane informacje (patrz punkt 4. „Formatuj tekst dla ludzi”) ale przede wszystkim lubi rzetelny tekst. Można pisać na wiele sposobów i stylizować wypowiedź, ale czytelnik odwiedza bloga lub kanał RSS ponieważ złożyliśmy obietnicę, że:

• będziemy przekazywać informacje które uważamy za prawdziwe lub warte przeczytania poparte wiedzą lub odpowiednimi źródłami.  Jeśli jesteśmy w prawdziwej rozterce nie ma co pisać pieśni pochwalnej, lepiej okazać swoje niezdecydowanie i je uzasadnić. Jesteśmy tylko ludźmi.
• piszemy najlepiej jak potrafimy. Nikt (margines wykluczam) nie oczekuje od nas wpisów jakości Ryszarda Kapuścińskiego, obiecaliśmy czytelnikowi wpisy dobrej jakości oraz to, że z czasem nasz styl ulegnie poprawie. Im lepiej będziemy pisali, tym więcej czytelników da się skusić by nas czytać.
• czytelnik lubi być doceniany. Wzmianki o tym, że jego decyzja miała wpływ na coś, co dzieje się na blogu powinna spotkać się z miłym przyjęciem i większą liczbą czytelników. (Podziękowania za inspirację nie są objawem słabosci).

8. Pisz regularnie

Od razu na wstępie powiem, że nie mam tu na myśli mechanizmu zegarka, lecz obietnicę regularności i rutynę wynikającą z własnych mozliwości w obliczu potrzeb czytelników:

• czytelnicy chcą móc zobaczyć wzór, jeśli stać nas na trzy wpisy tygodniowo piszemy dwa, jeśli mamy możliwość tworzenia pięciu – też dobrze. O ile nie zajmujemy się tematyką wiadomości (trudno odłożyć aktualności na później) nadliczbowe wpisy tworzą polisę zdrowia intelektualnego. Efekt: czytelnik syty i blogger cały.
• można też przesadzić publikując kilka wpisów dziennie. Gdy  prenumeruję kanał informacyjny bloga i po wieczornym powrocie do domu zauważam, że zawiera on kilkanaście nowych elementów moja reakcja jest jedna: „Usuń” – może jak wygram w dużego lotka to się zmieni.

9. Obiecaj coś

Jeśli czytaliście wpis Program topblogger.pl na tydzień 11. – 17. lutego 2008r., wiecie o co chodzi. Obiecałem w nim, że w tym tygodniu będą trzy wpisy o zdobywaniu czytelników (to jest pierwszy z nich). Obietnica zamyka cykl zapowiedzi i ich realizacji:

• szereg zrealizowanych obietnic buduje wiarygodność, czytelnicy lubią (i czytają) wiarygodnych bloggerów
• obietnica pozwala czytelnikowi stwierdzić, czy tematyka wpisów spełni jego oczekiwania i czy będzie te wpisy śledził
• obietnica oszczędza czytelnikowi czas: jeśli tematyka nie będzie go interesowała zawczasu może urządzić swój czas inaczej
• Obietnica wypełnia czas w którym nic nie publikujemy jednocześnie tworząc pewnego rodzaju dynamikę, bo czytelnicy będą wiedzieli gdzie i o czym będzie następny wpis.

Podsumowanie

Łatwo obiecać coś co bez większego wysiłku można spełnić, bo tu nie chodzi o obiecywanie rzeczy niemożliwych, lecz o dopuszczenie czytelnika do wiedzy za pomocą której będzie w stanie ocenić, czy odwiedziny naszego bloga będą tylko jednorazowym wybrykiem czy też stałym elementem jego życia w sieci. Czy lubisz obiecywać?

Częste zmiany szaty graficznej powinny być mniej spektakularne i wprowadzać usprawnienia niejako tylnymi drzwiami: tu pojawia się nowy element, tam nowa ikonka itp. Metodą małych kroczków możemy każdorazowo zweryfikować postęp i kierunek zmian, a czas spędzony na zmianie jednego elementu jest zdecydowanie niższy od czasu potrzebnego na kompletną przebudowę bloga.

Przykład

Nad pierwotną szatą graficzną topblogger.pl od początku do końca spedziłem około tygodnia który składał się z wielu sesji realizowanych małymi kroczkami: godzinę w poniedziałek rano, cztery we wtorek wieczorem, podkrążone oczy w środę itd. Wypisując zmiany punkt po punkcie spokojnie zebrałoby się ok. 150 odrębnych zagadnień. Obecnie też często siadam przed blogiem i przeglądając go notuje sobie poszczególne punkty do późniejszego wykorzystania (każdorazowo ok. 15 minut). Jednym z najbardziej namacalnych dowodów są zmiany w logo topblogger.pl (15. styczeń – 4. luty 2008r):

Obr. 1 zmiany logotypu strony topblogger.pl

Po kolei:

1. W pierwotnej wersji logo skupiłem się na kolorystyce, czcionce oraz zabawie z dwiema literkami „g”, które mają reprezentować puchar i zwracać uwagę na sam fakt, że słowo ma dwa „g”.
2. W poprawionym wydaniu postanowiłem nazwę uzupełnić małym „pl”, które wskazywałoby na to, że topblogger jest polską stroną.
3. Zrezygnowałem z dodatku zgodnie z przeświadczeniem, że Polacy z przyzwyczajenia i tak raczej wpiszą końcówkę „pl” niż np. „com”. Dodatkowo wzorem problogger.net dobrym pomysłem wydało mi się kolorystycznie odróżnić słowo „top” od „blogger”; w poprzednich wydaniach zlewały się ze sobą. Końcowym zamachem na poprzednie logo był styl web2.0.
4. Ostatni przystanek: małe usprawnienia. Pod koniec gdy już samo logo było (powiem to po fakcie) dużo mniej szpetne dodałem mały gradient i podtytuł „z każdym wpisem lepszy”.

Nie jestem guru graficznym i zdaję sobie sprawę, że bez wielokrotnej przeróbki: po pierwsze logo nigdy nie wygladałoby tak, jak wygląda obecnie, a po drugie nigdy nie dałbym rady. Podobną metodę stosuję zawsze, gdy praca się nawarstwia: krok po kroku aż do celu.

Lubicie pomajstrować przy blogu w wolnych chwilach czy w weekend spokojnie zabrać się do pracy? Jaki jest wasz ulubiony sposób na wdrażanie pomysłów?

Kto oceniał

Przy ocenie skorzystałem ze strony commandshift3.com którą trafnie opisał hazan z Antyweb.pl we wpisie Milion odsłon w pierwszym miesiącu – jak to zrobić?:

CommandShift3 to strona typu hot or not z tym, że głosujemy w niej na strony internetowe oceniając, która z nich bardziej nam się podoba. Serwis zbudowany jest w typowy dla tej kategorii sposób – nie trzeba się logować, czy czytać regulaminów itp. Nie trzeba robić nic oprócz głosowania na jeden z dwóch prezentowanych w pojedynku serwisów. Po oddaniu głosu serwis proponuje nam kolejną parę do oceny itd.

Po dodaniu do serwisu (wystarczy wpisanie adresu strony i podanie maila) trzeba poczekać kilka dni aż internauci zagłosują. Po kilkunastu dniach starć statystyki bitew naszej strony są dość obszerne i pozwalają mniej więcej stwierdzić w jakim kierunku wygląd naszej strony może się rozwinąć.

Obr. 1 – zrzut ekranu ze strony commandshift3.com

Wyniki (stan: 01.02.2008r.)

Im dłużej nasza strona jest na serwisie tym więcej stoczy bitew. Podane wyniki są tymczasowe i mogą ulec znacznej zmianie, zwłaszcza, że commandshift3.com co jakiś czas aktualizuje zrzut ekranu naszego bloga:

• Antyweb.pl
  wygrane 1 z 11 (9%) – bieżące statystyki
• mediafun
  wygrane 5 z 16 (31%) – bieżące statystyki
• experymenty informatyczne
  wygrane 3 z 14 (21%) – bieżące statystyki
• Gurthg Shae
  wygrane 4 z 8 (50%) – bieżące statystyki
• IT Blog
  wygrane 4 z 13 (31%) – bieżące statystyki
• Notatki – Łukasz Więcek
  wygrane 1 z 14 (7%) – bieżące statystyki
• OQL BLOG
  wygrane 5 z 10 (50%) – bieżące statystyki
• Paweł Tkaczyk
  wygrane 4 z 13 (31%) – bieżące statystyki
• Polski Blogger
  wygrane 2 z 11 (18%) – bieżące statystyki
• pwrzosin > wnet
  wygrane 4 z 9 (44%) – bieżące statystyki
• rafael’s.blog
  wygrane 4 z 15 (27%) – bieżące statystyki
• Rynek
  wygrane 0 z 11 (0%) – bieżące statystyki
• Topblogger
  wygrane 13 z 34 (38%) – bieżące statystyki
• zaistniejwsieci
  wygrane 1 z 7 (14%) – bieżące statystyki
• Zyski Online
  wygrane 1 z 2 (50%) – bieżące statystyki
• Miood
  wygrane 2 z 9 (22%) – bieżące statystyki
• Zarabianie na blogach
  wygrane 1 z 6 (17%) – bieżące statystyki
• zielony blogger
  wygrane 1 z 7 (14%) – bieżące statystyki 

Podsumowanie

Może się wydawać, że 38% wygranych topblogger.pl to niewiele, ale patrząc na najwyżej oceniane strony różnica jest ogromna – może nigdy nie dojdę do takiego poziomu umiejętności, może kiedyś kupię lub zlecę wykonanie szaty graficznej, ale na pewno wiem, że samodzielnie pracując nad wyglądem bloga mogę osiągnąć całkiem dobre rezultaty.

Co sądzicie o takiej formie samooceny? Macie sugestie do wyglądu topblogger.pl?

Produkt luksusowy cechuje się ekskluzywną atmosferą, wyodrębnieniem każdego z produktów i zapewnieniem mu odpowiedniej ilości wolnego miejsca. Towar z wysokiej półki mówi „patrzcie – jestem tak dobry, że wokół mnie jest dużo wolnego miejsca. Nie musi być tu nic więcej, ten obszar należy do mnie i jestem tego warty”.

Podobnie rzecz się ma z niektórymi reklamami, a zwłaszcza popularnymi blokami typu 125×125 pikseli (patrz niżej). We wpisie zatytułowanym When Your Ads Aren’t Noticed Anymore (tłum. „Gdy już nikt nie zauważa twoich reklam”) Thord Daniel Hedengren rozwija wizje przyszłości, w której czytelnicy przestają zwracać uwagę na skupiska bloków 125×125 i wskazuje na trend idący w kierunku reklam kontekstowych typu PayPerPost lub polskiego krytycy.pl.

Zanim jednak biernie poddamy się zapowiedziom trendów jest kilka rzeczy które możemy zrobić zanim czytelnicy bloga całkowicie odwrócą uwagę od podobnych skupisk (i tym samym spowodują spadek cen powierzchni) – jedną z nich jest rozsądne zarządzanie przestrzenią.

Obr 1. Przykład skupiska bloków 125×125 na przykładzie blogherald.com

Reklamy graficzne potrzebują przestrzeni

Podobnie jak ekskluzywne produkty, reklamy graficzne potrzebują pola do popisu. Pierwszym krokiem zwiększenia wydajności reklamy typu 125×125 powinno być zapewnienie im odpowiedniej przestrzeni.

Większa przestrzeń wokół elementów zwiększa wysiłek potrzebny by przejść wzrokiem od jednego bloku do drugiego i wraz z większą ilością czasu potrzebnego na dokonanie przeskoku powoduje wzrost uwagi skupionej na jednym elemencie czego efektem jest większa świadomość treści reklamy. Świadomie pomijam fakt, że w podanym przyładzie moim zdaniem sześć reklam w bloku to dużo.

Obr 2. Przykład skupiska bloków 125×125 po zmianie

Podsumowanie

Klikalność reklam jest ważnym aspektem dochodów bloggera i jednym ze sposobów zwiększenia kliknięć dla reklam graficznych (zwłaszcza bloków 125×125 pikseli) jest zarządzanie przestrzenią. Lekki wzrost wolnego miejsca wokół reklamy może mieć zbawienny wpływ na ilość kliknięć, choć jak ze wszystkim tak i z ilością przestrzeni nie należy przesadzać.

Czy szczypta wolnej przestrzeni wzbogaci twoją receptę na reklamy graficzne? A może nie korzystasz z bloków 125×125?

PS. W reklamach Google format 125 x 125 pikseli jest nazywany „przyciskiem”.