Przerwa … czyli trochę o typografii w najpopularniejszych polskich portalach i tajemniczej liczbie

Ostatnio musiałem z racji wykonywanego zawodu poczytać na temat typografii. Jest to w sumie temat dosyć stary, bo ciągnie się przynajmniej od czasów Gutenberga, a może nawet i wcześniej, aczkolwiek czołowe polskie portale pewne zasady omijają. Z racji tego, że jest to dosyć leciwa już sztuka (można typografię nazwać sztuką – i nie chodzi o obrazki ASCII) pewne zasady przyjęły się i to nie z racji czyjegoś „widzimisię” tylko naprawdę ułatwiają projektowanie łatwych i przyjemnych w odbiorze stron internetowych.

Okazuje się, że „złota zasada” podziału 1:1.62 świetnie się sprawdza w tym przypadku. Zachowanie określonych proporcji w projekcie jest jednym z najistotniejszych czyniników decydującym o całokształcie projektu. Głupi uczy się na błedach własnych, a mądry na cudzych tak więc przyjżyjmy się najczęściej odwiedzanym portalom w Polsce (… na podstawie www.alexa.com), żeby się czegoś nowego nauczyć.

Przykładowy tekst z onet’u, który przy przeanalizowaniu CSS’ów w FireBug’u ujawnia, że nie ma nigdzie nic na temat wysokości lini – wygląda tak:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

A teraz ten sam tekst, w którym odstęp pomiędzy liniami jest uzależniony od wielkości użytej (w tym wypadku 12px) czcionki – czyli pomnożony razy 1.62. Liczyłem na wszelkie dostępne pod ręką sposoby no i coż …

Tak więc, zwróćcie uwagę, że ten sam tekst czyta się łatwiej i dochodząc wzrokiem do końa linii nie musimy rozpoczynając nową szukać jej początku:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

Oczywiście możecie powiedzieć, że czepiam się jakiegoś tam szczegółu, ale jeżeli czytujecie całe artykuły w ilościach powiedzmy … 90% pojawiających się danego dnia, to nie sposób nie zauważyć, że coś jest nie tak. A tymbardziej, jeżeli jedna linika kodu może coś poprawić to dlaczego tego nie zrobić. Zrzuty w 4′ech kolorach przed i po:

Podobnie ma się sprawa z Wirtualną Polską … aczkolwiek informacje tam zamieszczane są tak krótkie, że zanim się zorientujemy, że można trochę poprawić odstępy między liniami artykuł się kończy. No cóż.

W przypadku Gazety i Interii doszukałem się tego (oczywiście w CSS’ach), że chłopaki sprwujący pieczę nad wyglądem strony coś w tej sprawie zrobili. W Interii szybkie przestawienie z 17px na 19px w przypadku odstępu między liniami ORAZ odstępów między paragrafami na 19px (z 9′ciu … nie wiem z kąd wytrzasnęli taki numer …) znacznie poprawia „czytalność”. Proszę:

interi_oryginalnainteria_zmodyfikowana

Pomijam (chwilowo) kwestię użytych fontów w nagłówkach – przydały by się jednak jakieś sans-serif, ale jest to oddzielny temat.

Reasumując tą pobieżną analizę – trzymajcie się zasady:

Odstęp między liniami = wielkość czcionki tekstu * 1.62

a napewno artykuły na waszych stronach / blogach będzie się łatwiej czytało. Pamiętając oczywiście o tym, żeby treść była wartościowa.

Krótkie spostrzeżenie na temat jednego z moich ulubionych blogów – antyweb – wartościowy merytorycznie i pisany w ciekawy sposób – aczkolwiek: Grzesiek – zmień odstępy między liniami na większy – jeżeli oczywiście chcesz się trzymać tej trochę przywielgaśnej czcionki 15px – na 24px. Od razu przyjemniej.

Wracając do tematu. Liczba 1.62 nie wzięła się w sumie z nikąd. Zapoznajcie się z tym. Większość z Was powinna to pamiętać jeszcze ze szkoły, ale mogę się założyć, że nauczycielka „wciskając” wam tę wiedzę nie wspomniała czegoś w stylu: uczcie się tego dzieciaki, bo przyda się kiedyś przy projektowaniu stron internetowych. Znajdźcie chwilę czasu, żeby poklikać też w tą. Nawet bez znajomości angielskiego zorientujecie się w czym rzecz.

Następnym razem zajmiemy się wykorzystaniem 1.62 przy projektowaniu „layoutów” do stron / blogów. Zobaczycie jak się sprawdza. Dla niecierpliwych znających angielski polecam artykuł ze smashingmagazine

Kilka zmian na stronie

Po chwilowej przerwie witam ponownie i jak widać w trochę innych „szatach”. Skorzystałem z innej templatki, która wydaje się lepsza dla naszych potrzeb tutaj.

Dodatkowym usprawnieniem jest możliwość zamieszczania linków przez was do czegoś ciekawego co znajdziecie w internecie. Oczywiście dotyczącego web designu.

Jak NIE POWINNO się robić stron

W internecie można znaleźć bardzo dużo inspirujących galerii stron. Pomagają one zorientować się w najnowszych trendach i z pewnością przyczyniają się do powstawania kolejnych, coraz lepszych, ładniejszych i bardziej przyjaznych stron w internecie. Pomimo tego w dalszym ciągu trafają się strony, które zaprzeczają wszelkim zasadom – tym pisanym i nie pisanym. Jednym z takich „kwiatków” na jaki trafiłem dzisiaj jest strona zespołu weselnego – IDOL. Zobaczcie sami – link.

Zastanawiam się czy nie jest to strona – dowcip. Kiedyś była taka z teńczowym migającym backgroundem i animowanymi gif’ami jako linkami do opcji. To było mistrzostwo, ale ta zespołu Idol jest całkiem poważnym pretendentem na pierwsze miejsce w kategorii najgorzej wykonanej strony.

Jak znajdziecie takie kwiatki to dajcie link w komentarzach – dokleimy. Ku przestrodze …

Darmowy szablon – Virtual Business Card

Mogę się założyć o przysłowiową stówę, źe nie raz spotkaliście się z sytuacją gdzie mała firma nie ma wcale strony albo albo jak już, to jest to jakiś „potworek”. Na ratunek przychodzi wirtualna wizytówka. Prosta i czytelna. Z dodatkowym „bajerem” w postaci przewijanej zawartości.Ponadto jest działający formularz kontakotwy oparty o PHP – na hostingu musi działać funkcja mail() – 99% hostów to obsługuję. Sprawdzałem czy wyświetla się tak samo pod: IE6, IE7, FF, Opera, Chrome na PC i na Mac’u pod FF, Safari. Wygląda na to, źe tak.

Co tu dużo pisać … zobaczie zresztą sami: demo

W „paczce” jest instrukcja co i gdzie trzeba zrobić, źeby dostosować do własnych potrzeb. Instrukcja jest w języku angielskim ale poradzicie sobie nawet i bez tej instrukcji – wszystko jest przejźyste.W razie potrzeb można ten szablon łatwo rozciągnąć. W sekcji

w pliku index.php jest skrypt w którym jest zefiniowana wysokość tej części przewijanej plus jedna korekta w css/screen.css i zrobione. Dodatkowo znajdziecie projekt jako .png dla Fireworksa – w tym powstał ten szablon. Dla „photoshoperów” przekonwertowałem to również na taki format.

Jedna prośba – było by miło jeżeli zostawilibyście link zwrotny.

Jakieś pytania / problemy – śmiało pytajcie.

Jeżeli architekt miałby dostawać zlecenia tak jak web designer

Od jakiegoś czasu pracuję w troche większej firmie niż poprzednio i jest trochę więcej do zrobienia. Mój szef po ostatnim projekcie, który zamknąłem w 4 dni, zapytał czy nie mógł bym nad następnym bardziej się „sprężyć” – mimo, że wcześniej jak zlecał to samo freelancerom, to czekał po kilka tygodni na jakiekolwiek rezultaty. Co ciekawe podsunął mi taki tekst: link.

Fajny … i taki prawdziwy. Przetłmaczę go dla Was.

Drogi Architekcie.

Proszę zaprojektować i zbudować mi dom. Nie jestem do końca pewien czego dokładnie potrzebuję, tak więc zdaje się na pańską wyobraźnię. Dom powinien mieć od 2 do 45 sypialni. Proszę uwzględnić w projekcie to, żeby łatwo można było tą ilością manipulować. Zdecyduję, kiedy zostaną mi przedstawione plany. Proszę również przygotować kosztorys dla każdej konfiguracji.

Dom na który się zdecyduje powinien kosztować mniej niż ten w którym mieszkam obecnie. Proszę się upewnić, że nowy dom nie będzie miał tych wszystkich usterek, które są w obecnym (podłoga w kuchni skrzypi i ściany nie są wytarczające wypełnione izolacją).

Proszę pamiętać w trakcie projektowania o minimalnych rocznych kosztach utrzymania. Mam namyśli tutaj zastosowanie takich materiałów jak aluminium, polichlorek winylu oraz kompozyty. Jeżeli zdecyduje się Pan na nie wykorzystanie aluminium, proszę być przygotowanym na szczegółowe wyjaśnienie.

Chcę aby dom był nowoczesny i zbudowany z wykorzystaniem nanowszych materiałów konstrukcyjnych – miałem okazję zapoznać się z takowymi podczas targów budowlanych. Aczkolwiek kuchnia musi pasować do mojej lodówko – zamrażarki – Gibson z roku 1952.

Proszę również skontaktować się z moimi dziećmi i dziećmi z poprzedniego związku mojej żony w celu ustalenia co jest ważne dla nich w tym projekcie. Mojej teściowej zdanie też powinno się liczyć, aczkolwiek zostawiam sobie ostatczne decyzje.

W trakcie wstępnych prac proszę o nie dopytywanie o detale – proszę skoncentrować się na całokształcie. Dla przykładu, nie interesują mnie kolory wykładzin. Aczkolwiek proszę pamiętać, że moja żona lubi niebieski.

Również proszę się nie przejmować robotnikami – najważniejsze są szczegółowe plany i specyfikacje. Aczkolwiek chciałbym, żeby dom został wybudowany w 48 godzin.

W trakcie projektowania mojego domu, proszę pamiętać, że prędzej czy później będe chciał go sprzedać. Musi się podobać jak największej ilości potencjalnych nabywców. Projekt musi uwzględniać zapatrywania i potrzeby lokalnej społeczności. Zalecałbym przyjżeć się domowi mojego sąsiada, który był zbudowany w ciągu ostatniego roku. Ma dużo rzeczy, które nam się podobają, a najbardziej 20 metrowy basen. Wierzę, że jesteś w stanie uwzgędnić to w projekcie bez zwiększania kosztów.

Proszę przygotować szczegółowe plany konstrukcyjne – nie muszą zawierać elementów dezajnu, gdyż będą wykorzystane tylko przetargu. Musisz pamiętać, że jeżeli koszty konsrtukcji wzrosną w wyniku zmian w dezajnie, będziesz obciążony kosztami.

Wierzę, że jesteś podekscytowany mając okazję pracować nad tak interesującym projektem! Nie codziennie jest możliwość pracowania nad projektem, który uwzględnia najnowsze technologie i materiały, a jednocześnie daje swobodę „twórczą”. Skontaktuj się ze mną możliwie jak najszybciej z gotowymi pomysłami i planami.

PS. Moja żona właśnie mi powiedziała, że nie zgadza się z większością moich instrukcji. Zostawiam Tobie (jako, że to Ty jesteś architektem) to zadanie – dostosowanie projektu do sugestii mojej żony. Zlecałem podobne prace w przeszłości, które kończyły się fiaskiem. Jeżeli nie jesteś w stanie tego zrobić, poszukam innego architekta.

PPS: Być może bardziej odpowiedni dla mnie była by przyczepa kampingowa … proszę daj znać jeżeli jest to jakiś większy problem.

Dobre – no nie ?

Jeżeli są literówki / orty / źle przetłumaczone fragmenty to nie miejcie pretensji – robię to „cichaczem”.

Hosting – szablon naszego autorstwa do kupienia

Jeżeli właśnie zabieracie się za stronę z usługami hostingowymi – możecie przestać. Mamy dla was doskonałe rozwiązanie – szblon do kupienia naszego autorstwa za pośrednictwem ThemeForest.

jest tutaj w prostocie. Dostosowanie do własntych potrzeb – baaardzo łatwe. Cena również nie powinna odstraszyć – szczególnie, jeżeli zarabiacie $14 na godzinę 🙂

Szablon jest przygotowany pod skrypty PHP – wszystkie formularze działają i „zabierają” nas gdzieś za każdym razem, tak więc jeżeli pracujecie nad istniejącym serwisem to sprawa jest ułatwiona.

W „paczce” znajdziecie wszystkie projekty graficzne jako .psd i png – pierwotnie projekt powstał w fireworksie. Będziecie potrzebowali również zainstalować fonty – wszystko jest dokładnie opisane.

Jeżeli nie macie jeszcze konta w Envato – polecamy założyć.

Kolejne przykazania … czego nie powinno się robić na stronach. Część 1′a

Znalazłem ciekawy wpis na DailyBlogTips … http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/ – dla tych którzy nie mieli angielskiego i dla tych, którzy zajmują się stronami internetowymi – 43 pomyłki w przy projektowaniu stron.

Odwiedzający musi wiedzieć OD PIERWSZEGO wejścia gdzie trafił – strona musi być tak zrobiona, żeby odwiedzający w ciągu kilku (nawet mniej) sekund wiedział o czym jest strona – inaczej – straciliśmy go na zawsze.
Treść i elementy strony muszą być wyraźne i odróżniać się od siebie – pamiętajcie, żeby korzystać z nagłówków, list i skróceń. Strona to nie książka – zapomnijcie o dużych blokach tekstu.
Nie korzystaj z dziwnych nieczytelnych czczionek – czy to nagłówki, czy już nie daj boże (… którykolwiek) w treści – oczywiście trudno się oprzeć pokusie wstawienia jakichś fikuśnych czcionek, ale pamiętajcie, że strona ma przekazywać informacje.
… i z bardzo małych. Oczywiście moja przeglądarka ma opcję powiększania tekstu, ale to będzie ostatni raz kiedy ją odwiedziłem.
Nie otwieraj nowych okien przeglądarek. Sam kiedyś tak robiłem bo chciałem, żeby odwiedzający zawsze miał moją otwartą. BŁĄD!. Niech sam zadecyduje. W każdej przeglądarce jest opcja „back”, najczęściej bardzo wielka, tak więc odwiedzający jak będzie chciał to wróci.
… i nie zmieniaj ich rozmiarów. Wizytujący powinien kontrolować swoją przeglądarkę i tutaj nie ma dyskusji. To jest tak jak by ktoś przyszedł do Ciebie do domu jak oglądasz telewizję i przestawiał Ci telewizor i ustawienia …
Nie wymagaj rejestracji. Internet jest po to, żebym to ja szukał w nim informacji a nie odwrotnie. Nie zmuszaj odwiedzających do zostawiania maila itp. dotąd dopuki jest to niezbędne.
Nie wpisuj automatycznie na listy mailowe. Jeżeli wizytujący zarejestrował się to nie traktuj tego jako kolejny „klient”, którego można zasypać najnowszymi wiadomościami. Niezbyt dobra metoda na pozyskiwanie klientów.
Nie nadużywaj Flash’a. Flash może być uciążliwy – szczególnie jak się jeszcze musi wczytywć tygodniami. Oczywiście, jeżeli jakaś usługa nie może być dostarczona czy zobrazowana statystycznymi stronami, to ok.
Nie włączaj muzyki. Pamiętacie początki www ? Albo reklamy na polskich portalach ? Nie włącza się muzyki i koniec. Kropka.
… jak już musisz to niech odwiedzający ma kontrolę nad tym. Są takie sytuacje – oczywiście. Np. zapis przemówienia, ale w dalszym ciągu to odwiedzający ma zadecydować kiedy chce słuchać.
Zapomnij o stronie startowej, która przniesie odwiedzającego na stronę … startową. Im mniej kliknięć do treści – tym lepiej.
Upewnij się, że strona zawiera kontakt. Nie ma chyba nic gorszego jak brak takiej informacji. Możesz stracić okazję życia …
Zapomnij o migającym tekście … no chyba, że masz odwiedzających z 1996′go roku (jak ? Nie wiem …)
Unikaj dziwacznych URL’i. Raz, że pomaga to przy SEO, a dwa jak będe wpisiywał Twoją domenę to łatwiej mi będzie znaleźć treść, do której chciałem powrócić.

Oczywiście dla większości z was te wskazówki są oczywiste, aczkolwiek wiecie z własnego doświadczenia, że można natknąć się na takie różne kwiatki.

Póki co wracamy do pracy, a kolejna dawka przykazań już jutro.

Zapraszam.

Kolejny szablon naszego autorstwa – tym razem … Hosting

Jakiś czas temu chłopaki z themeforest wprowadzili nową kategorię do szablonów: marketing. Podzielona jest ona na dwie główne podkategorie – szablony maili i „landing pages”.

Ostatnio nasza produkcja została zaakceptowana w tej ostatniej i jest do kupienia za jedyne 8 dolców. Bardzo czytelny i przejżysty kod – łatwo zmodyfikować. Jeżeli zdecydujesz się nie ukraść tylko kupić to w „zestawie” znajdziesz pliki źródłowe do wszystkich elementów graficznych, co pozwoli na jeszcze dokładniejsze dostosowanie do własnych potrzeb.

Ok – nie ma co się rozpisywać – polecamy:

Jeszcze więcej fontów

Z lekkim opóźnieniem ale zawsze … pod koniec kwietnia google zwiększyło liczbę dostępnych fontów do 100! Teraz jest z czego wybierać:

http://www.google.com/webfonts

Dla przypomnienia – fonty te są stworzone z myślą o wykorzystaniu ich na naszych stronach zamiast systemowych – arial, times etc. Cały proces jest bardzo prosty – wystarczy dodać jedną linijkę w nagłówku, np:

do tego w arkuszu styli zdefiniować font-family, np:

body {
font-family: ‚Tangerine’, serif;
font-size: 48px;
}

Zrobione! Proste – no nie ?

Jedyna wada tego rozwiązania jest to, że nie działa we wszystkich przeglądarkach. Chociaż … czy Internet Explorer jest przeglądarką ?

Odrobinka PHP – tak dla własnej pamięci

Tak – wiem – minęły wieki od czasu kiedy coś skrobnąłem tutaj, ale naprawdę nie mam czasu. Tzn. nie potrafię gospodarwoać moim czasem i nawet ten wpis jest popełniany w pracy.

Jakiś czas temu w pracy musiałem pracować nad projektem, który jest napisany przez kogoś z użyciem „smarty”. Ciekawa sprawa, ale gościu który podaje się u nas w firmie za „senior web developera” bał się rozszerzać funkcjonalność klas dla tego systemu i koniec końców mogłem tylko odtworzyć funkcjonalność innej strony podmieniając CSSy i obrazki.

Teraz piszę od zera projekt, który opiera się na już istniejącej bazie danych – z racji tego, że objektowe programowanie u mnie jest … nawet nie jest – piszę to z wykorzystaniem procedur. W sumie nic strasznego – gdzieś kiedyś przeczytałem, że biedny serwer za każym razem musi załadować całą klasę, żeby wykonać tylko jedną funkcję, czyli odbija się to na prędkości. Może się mylę – poprawcie mnie.

Do rzeczy – nauczymy się podmieniać znaki w zmiennych tekstowych. Do tego potrzebne są dwie rzeczy: ciąg znaków albo zmienna zawierająca ciąg znaków no i funkcja:\

str_replace(czego_szukamy, zamieniamy_na, w_czym);

Funkcja ta potrzebuje min. trzech parametrów jak widać.

czego_szukamy – jest to coś czego szukamy.

zamieniamy_na – to jest to na co zmienimy to czego szukamy.

w_czym – tekst albo zmienn zawierająca tekst, w którym dokonujem zmian. Np.:

$text = ‚mama’;

echo str_replace(‚m’,’b’,$text);

Wynik jaki otrzymamy to oczywiście:

baba

Bardzo proste i uwierzcie mi często przydatne, jeżeli pracujemy na nie swoich bazach danych.