Jak stworzyć dobrze wyglądający i użyteczny blog? 10 żelaznych zasad

W świecie Web 2.0 estetyka odgrywa dużą rolę. Blogerzy powinni dbać o to, aby ich serwisy były po prostu ładne i czytelne. Poniżej przedstawiamy 10 zasad, które ułatwią pogodzenie świetnego wyglądu i dużej użyteczności.

1. Wykorzystuj jasne tło i ciemne czcionki

Blog, który jednocześnie jest użyteczny i ładny, bazuje na jasnym tle oraz ciemnych czcionkach. Nie warto tu eksperymentować. Białe litery na czarnym tle męczą oczy i zniechęcają użytkowników. Czcionka powinna być czarna lub ciemnoszara. Barw nie może być zbyt dużo - należy wybrać kilka pokrewnych i się ich trzymać.

Eksperymenty z granatowym czy ciemnozielonym są dopuszczalne. Czerwienie, żółcie i pomarańcze odpadają! Są one zarezerwowane dla linków. Ciemniejszy może być nagłówek blogu, gdzie prezentowana jest nazwa oraz hasło określające obszar zainteresowań. Wbrew pozorom ten element odgrywa dużą rolę. Podczas pierwszej wizyty w serwisie internauci szukają tu podstawowych danych.

Niebezpiecznik.pl. Świetny pomysł na blog, katastrofalna realizacja.

Nawet osoby nieznające zaawansowanych technik programistycznych mogą śmiało eksperymentować ze stylem wizualnym blogu. Trudno im będzie go stworzyć od podstaw. Modyfikowanie gotowej skórki w PHP to jednak pestka. Zawsze należy przejrzeć dostępne w Sieci layouty - nie ograniczać się przy tym do najpopularniejszych, dostarczanych przez administratorów platformy blogowej.

2. Stosuj profesjonalne ikony PNG

Dawno już minęły czasy, w których twórcy serwisów WWW korzystali z niewielkich plików ICO niskiej jakości. Teraz wirtualny świat należy do formatów JPG i PNG. Szczególnie ten ostatni standard świetnie sprawdza się podczas przygotowywania wysokiej jakości ikon. Są one duże (nawet 256 na 256 pikseli) i zazwyczaj prezentują się bardzo profesjonalnie.

Przykładowe ikony PNG z serwisu FreeIconsWeb.

Jednym z najlepszych katalogów ikon PNG w Sieci jest serwis FreeIconsWeb. Można tu znaleźć ponad 18 tysięcy plików dla systemów Windows, Linux i Mac OS. W bazie jest mnóstwo przydatnych zasobów dla blogera - ikonek twitterowych, facebookowych czy RSS-owych. Da się je dodać do własnej strony w ciągu kilku minut.

3. Znajdź czas na adiustowanie tekstów

Blogowy wpis musi być ciekawy, najlepiej unikatowy. Ale treść to nie wszystko - liczy się również forma. Akapity artykułu nie mogą być zbyt długie - cztery - pięć wersów to maksimum. Wszystkie powinny mieć podobną objętość. W tekście musi znaleźć się miejsce na zdjęcia (najlepiej w nagłówku), zrzuty ekranu, zagnieżdżone klipy wideo. Należy za wszelką cenę unikać kursywy - jest nieczytelna.

Warto stosować za to wytłuszczenie (bold) - oznaczać nim pojedyncze wyrazy lub fragmenty zdań, najważniejsze stwierdzenia oraz fakty. Internauci nie mają zwyczaju dokładnego czytania tekstów w Sieci. Bold ułatwia im skanowanie. Drugi ważny element to wyróżnienia linków. URL-e muszą być dobrze widoczne, powinno ich być jak najwięcej. Warto dodawać łącza do powiązanych tekstów z własnego blogu lub zewnętrznych zasobów.

Linki już przez internautę odwiedzone z zasady mają inny kolor. Zwykły tekst nie może być z kolei podkreślony - to jest zarezerwowane dla adresów URL. Linki do wpisów też muszą spełniać pewne kryteria estetyki. Format http://domena.pl/tytuł_tekstu wygląda znacznie lepiej od http://domena.pl/32872. Jest również bardziej przyjazny dla wyszukiwarek i w ten sposób użyteczny.

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

14 skomentuj »

Polecamy

Reklama

Komentarze

#1 Borys Łącki 2010-02-01 13:23:33 0
Nam się udaje pisać czarno na białym :] www.bothunters.pl
IP: 86.111.200.[...] Opera/9.80 (X11; Linux i686; U; en) Presto/2.2.15 Version/10.10
#2 lollercoaster 2010-02-01 14:06:10 0
"URL-e muszą być dobrze widoczne, powinno ich być jak najwięcej". Kto normalny linkuje w ten sposób? Ani to SEO, ani usability.
IP: 213.192.88.[...] Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.2.15 Version/10.00
#3 nikt ważny 2010-02-01 22:56:38 1
@lollercoaster

Normalny człowiek własnie tak linkuje. Spamer (przepraszam - pozycjoner) wymyśla nienormalne rozwiazania.
IP: 79.186.214.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
#4 HTD 2010-02-02 15:41:45 1
Czarno na białym? Zaczynam wątpić w profesjonalne przygotowanie Autora artykułu. Czarny druk na białym tle (generalnie ciemny na jasnym) jest łatwiejszy do odczytania jedynie na medium papierowym, nie na monitorze komputera! Przykład strony niebezpiecznik.pl najlepiej ilustruje błąd Autora. Strona jest wyjątkowo czytelna, wyglądając przy tym o niebo lepiej od webhosting.pl. Postaram udowodnić szanownemu Autorowi jak bardzo się myli przytaczając trochę faktów z zakresu technicznej budowy ekranów komputerowych (a więc na chwilę obecną głównie LCD i coraz rzadziej już CRT).

1. Ekran LCD jest podświetlony od spodu za pomocą "zwykłych" jarzeniówek. Ich światło ma optymalnie udawać barwę białą, być równomierne, stabilne i nie męczyć wzroku. Takie są założenia i w dużym stopniu dobre ekrany LCD je spełniają. W dużym stopniu. Nie ma jednak ekranów idealnych (a jeśli są, leżą poza zakresem cenowym dostępnym "domowemu" użytkownikowi). Nowoczesne LCD aby uzyskać szeroki zakres odtwarzanych barw mają olbrzymi kontrast i jasność, w porównaniu z ekranami CRT. Często nie da się go w takim monitorze zredukować bez pogorszenia jakości obrazu. Biel z dobrego LCD-ka potrafi bardzo męczyć wzrok samą jaskrawością. Wiem po sobie, bo pracuję przez wiele godzin dziennie przy takim monitorze. Czytanie strony na ciemnym tle wręcz koi wzork, czuć fizyczną ulgę.

2. Ekran CRT tworzy pixel za pomocą plamki świetlnej. Plamka jest obrazem skupionej wiązki elektronów. Optymalnie powinna być jak najmniejsza - umożliwiając uzyskanie wysokich rozdzielczości a także dobrej ostrości obrazu. Technicznie uzyskanie plamki bez rozmycia, zwłaszcza na krawędziach ekranu jest ekstremalnie trudne. Nawet jeśli udaje się to w nowym monitorze, każdy monitor po kilku latach używania traci ostrość plamki, co jest związane ze zużyciem katod i innych elementów kineskopu. Sąsiadujące ze sobą rozmyte białe pixle tworzą o wiele bardziej niewyraźny i zamazany zarys, niż linie i kształty utworzone z białych pixli na czarnym tle. Dlatego serwisowe testy ostrości monitorów zawierają zwykle drobne czarne wzorki na białym tle. Polecam dowolne oprogramowanie do testowania monitorów CRT, obrazy kontrolne są także dostępne w sieci w postaci plików graficznych.

Biorąc pod uwagę jedynie 2 punkt moich rozważań, czyli problemy techniczne związane z wyświetlaniem tekstu na monitorach CRT - pierwsze mikrokomputery jak Atari XL, Comodore 64 czy nawet Amiga 500 - posiadały jako standardowy schemat kolorów dla tekstu w systemie operacyjnym - ciemne tło i jasny tekst. Jest to także domyślny schemat kolorów większości BIOS-ów oraz konsol tekstowych dzisiejszych systemów operacyjnych.

Podsumowując - czarno na białym - tak, ale na papierze. Na ekranie komputera nie ułatwia to czytania tekstu tylko utrudnia. Mam nadzieję że wykazałem, że nie jest to kwestia niczyich upodobań, a czysto techniczna.

Skąd więc tak wielka popularność schematu odwrotnego? Primo - oprogramowanie edytorskie. Jego głównym zadaniem było od początku istnienia tworzenie cyfrowego odwzorowania dokumentów papierowych, a także projektowanie takowych. Stąd białe tło. Obraz na ekranie miał udawać kartkę. W CAD-ach, gdzie kluczowa jest rozdzielczość, ostrość, detale i możliwość wielogodzinnej pracy z rysunkiem - generalnie zrezygnowano z tego, i wiele aplikacji CAD pomimo projektowania pod wydruk - jako roboczego tła używa koloru czarnego.

Innym powodem popularności białego tła jest łatwiejsze projektowanie layoutów, a zwłaszcza osadzania w nich zdjęć i grafiki. Graficy i webmasterzy znają dobrze ten problem. Wrzucanie zdjęć na białe tło jest proste. Przy czarnym jest trochę trudniej. Przy jakiejkolwiek barwie czy teksturze tła sprawa jeszcze bardziej się komplikuje.

Przy okazji duża uwaga do Webmastera webhostingu: czcionka użyta w okienku pisania komentarza, również ta we wskazówkach dla komentującego jest zupełnie nieczytelna na ekranie CRT, nieczytelna dla osób z nawet nieznacznymi wadami wzroku i bardzo męcząca wzrok wszystkich innych użytkowników. Że już nie wspomnę o tym, że linki na webhostingu mają pod Operą tendencje do zaznaczania swojego tekstu, zamiast działania jako odnośniki.
IP: 87.207.42.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.2.15 Version/10.10
#5 dAREuS^® 2010-02-02 16:26:32 0
Moja odpowiedź na to wyjaśnienie jest prosta, posłużę się argumentum per analogia i postaram się to przedstawić skrótowo.

Wszystkie przesłanki logiczne i doświadczenia podpowiadało, by po drogach poruszać się na całym świecie lewostronnie. I tak było bardzo długo - prawdopodobnie do czasu kaprysu Napoleona (do doczytania).

Od tamtego czasu większość pojazdów na całym świecie, osób w metrze etc. porusza się prawostronnie - choć logika i statystyka podpowiadają, by poruszać się lewostronnie.

Oczywiście wciąż są kraje, gdzie porusza się lewostronnie, ale większość świata porusza się prawostronnie, uznając to za standard i wygodę.

Webmasterom wciąż z całego serca więc radzę, by tworzyli czcionki ciemne na jasnym tle - bez względu na to, co podpowiada im poruszone serce kogoś, kto wierzy w schemat odwrotny (nawet jeśli jest ultra słuszny).

PS: Bug z Operą jest bugiem Opery - oficjalnie odnotowanym w bugliście deweloperów. Poruszonych chłopców z niebezpiecznik.pl pozdrawiamy.
IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.8 (KHTML, like Gecko) Iron/4.0.275.2 Chrome/4.0.275.2 Safari/532.8
#6 THC 2010-02-02 16:37:12 0
@htd, mozesz smialo powiediec ze wasza strona wyglada lepiej tez od WSJ, NYT, BBC, cnet, zdnet, slash.dot... ojej, w sumie nie wiem, czy jest strona ktorea lepiej wyglada od niebezpiecznik.pl w sieci, chyba nie ma...
IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
#7 Wojtek Wowra 2010-02-02 16:40:41 1
"Biel z dobrego LCD-ka potrafi bardzo męczyć wzrok samą jaskrawością. Wiem po sobie, bo pracuję przez wiele godzin dziennie przy takim monitorze. Czytanie strony na ciemnym tle wręcz koi wzork, czuć fizyczną ulgę."

Mi też to przeszkadzało więc porozmawiałem z okulistą :). Okazało się, że problemem była zbyt wysoko ustawiona jasność. Po zredukowaniu jej z 85 do 65 natychmiast było lepiej.

Wniosek - każdy człowiek ma swój próg tolerancji. Niektórzy mają większy czy mniejszy światłowstręt. Jest to spowodowane wysychaniem gałki ocznej, a to z kolei jest skutkiem zbyt rzadkiego mrugania podczas pracy z komputerem.

Można się nauczyć świadomego mrugania. Lepiej jednak po prostu dopasować jasność do własnych potrzeb. Kolor tła nie ma tu nic do rzeczy. Po prostu ciemny obiektywnie jest do niczego :)
IP: 213.134.191.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#8 HTD 2010-02-02 17:11:27 0
@Wojtek Wowra: subiektywnie, chciałeś powiedzieć. Co do jasności: u mnie jak tak zrobię, to mi przetwornica w monitorze brzęczy nieprzyjemnie, to raz. Dwa - obraz robi się jakiś mdły, kolory gorsze. To nie jest to samo co ściemnienie w CRT. Tam to wygląda jakoś naturalniej, na LCD to nie to. A co do świadomego mrugania - to muszę oczywiście sprawdzić. Jeśli chodzi o światłowstręt - nabieram z przemęczenia. Jak mnie światło razi - trzeba zrobić przerwę i odespać. Inna sprawa - sporo ludzi jest przemęczonych. Im bardziej przypadnie do gustu strona przy której nie muszą ściemniać monitora ani co chwila mrugać.

@dAREuS: czyli wspólnie dochodzimy do wniosku, że preferencja jasnego tła nad ciemnym to kwestia raczej trendu niż czytelności.

@ALL: Nie jestem w żaden sposób związany ze stroną niebezpiecznik.pl. Po prostu ich layout wydaje mi się przyjemniejszy dla oka. To oczywiście moje subiektywne zdanie. Cóż, nie będę się kłócił z faktem, że stronę robi się dla większości odbiorców, a nie mniejszości, więc jeśli większość woli mniej czytelne strony - to trzeba im takie dostarczyć i kropka. Sam zrobiłem więcej stron na jasnym niż na ciemnym tle. Głównie dlatego, że po prostu łatwiej je zrobić. Całkiem czarne tło to słaby pomysł. Z kolei jak się da tło, to trzeba już z półprzeźroczystością kombinować, nie mówiąc już że czasem zdjęcie usera może się pogryźć z layoutem.
IP: 87.207.42.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.2.15 Version/10.10
#9 dAREuS^® 2010-02-02 17:55:14 0
@HTD, widzisz, ja to rozumiem tak, że kiedyś to był trend - dziś jest to czytelność. Daleko idące przyzwyczajenie oddziałuje na umysły i zmienia ich percepcję.
IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.8 (KHTML, like Gecko) Iron/4.0.275.2 Chrome/4.0.275.2 Safari/532.8
#10 lollercoaster 2010-02-03 15:28:02 0
@nikt ważny

Naprawdę uważasz za czytelniejsze 'http://somedomain.com/some/dir/xy/123456.html' niż 'odwiedź blog Zenka' i tak wyglądają linki na Twoich stronach (o ile takowe istnieją)?

Chyba, że istnieje jakaś niejasność co do tego, co to jest URL ;)
IP: 213.192.88.[...] Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.2.15 Version/10.00
#11 pozmu^® 2010-02-08 23:59:40 0
Już myślałem, że ten problem z zaznaczaniem linków w Operze dotyczy tylko mojego "egzemplarza" przeglądarki... z czego on wynika? Jest denerwujący, zmusza do korzystania z linków przez prawoklik i "Open"...

No a co do jasnego tekstu na czarnym tle to Niebezpiecznik jest kiepskim przykładem - w serwisach o takiej tematyce tego typu zestaw kolorów to standard...
IP: 89.241.81.[...] Opera/9.80 (Windows NT 5.1; U; <a href=http://pozmu.net>pozmu.net</a>; en) Presto/2.2.15 Version/10.10
#12 Paweł M. 2010-02-12 08:27:20 0
Akurat przykład niebezpiecznik.pl jest tu mocno nietrafiony bo ma świetnie dobrany zestaw czcionek, szczególnie nagłówki artykułów. Może i trochę ciężko się czyta, ale odnosi się trochę do trendu wśród programistów, którzy często ustawiają przy kodowaniu czarne tło.
IP: 213.222.196.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.78 Safari/532.5
#13 HTD 2010-02-24 14:56:21 0
@Paweł M. : Ustawiają czarne tło pewnie dlatego, żeby im monit po oczach godzinami nie świecił. A dlaczego niektórzy jednak nie ustawiają? Bo większość programów jest tak paskudnie zrobionych, że jak nawet zainstalujesz sobie zhackowany VisualStyle w systemie, z ciemnymi tłami i wszystkimi innymi elementami OS-a, to nagle okaże się że ikonki w programach są na jakiś szarych tłach, albo mają jakieś wnerwiające obwódki, albo w ogóle pasują jak pięść do nosa, bo niezbyt kompetentny programista wrzucił kolor elementu jako hardcoded, zamiast wziąć z systemu. Nie mówiąc o tym, że pomimo roku 2010, niektórych ludzi nadal dziwi i bulwersuje fakt istnienia 24-bitowego PNG, bo przecież po co komuś więcej niż 8 bitów i jakaś durna półprzeźroczystość... :P Ba, nawet IE8 ma z tym nadal problem, szczególnie w gadżetach sidebara (oczywiście do pewnego stopnia to da się zhackować, ale nie do końca)
IP: 87.207.42.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
#14 czarny wilk 2011-03-13 09:12:48 0
warto zainwestować aby mieć świetnego bloga i na nim zrobić

polecam

http://www.jak-zrobic-bloga.interkursy.pl/p/2217/
IP: 188.33.97.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.17) Gecko/20110121 Firefox/3.5.17 (.NET CLR 3.5.30729)

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.