Idą zmiany! Ferrante.pl w trzeciej odsłonie

O ile druga rocznica istnienia bloga ferrante.pl była obchodzona w minorowych nastrojach, tak dzisiaj są zdecydowane powody do radości. Po kilkunastu dniach wytężonej pracy mam przyjemność przedstawić kolejny, drugi w historii, redesign strony! Nowości należy dopatrywać się nie tylko w szablonie – już teraz zaczynam wdrażać niektóre nowe pomysły, a w kolejce jest jeszcze kilkanaście innych…

Design

Jak widzicie, kolorystyka bloga nabrała nieco innego wymiaru, aczkolwiek są to dobrze znane Wam barwy. Postanowiliśmy nie zmieniać czegoś, co dobrze funkcjonuje. Przede wszystkim nastawiliśmy się na treść. Niesamowicie irytujące pierdoły, czyli wszelkie sidebary i inne tego typu ustrojstwo przenieśliśmy do stopki. Muszę też przyznać, że chcieliśmy przyprawić końcowy efekt czymś w rodzaju minibloga. Niestety, sprawa rozmyła się pomiędzy wierszami – stanęło na tym, że wizerunek content is king zostałby mocno nadszarpnięty – co za dużo, to niezdrowo! Kto wie, być może założę jeszcze Twittera albo innego Blipa… Zapewne zauważyliście, że wypowiadam się w liczbie mnogiej. Otóż autorem designu, jak zwykle, jest Kuba dez Uczciwek, któremu należy się wielkie piwo, a nawet dwa. Oprócz grafiki, Kuba był niezłomnym krytykiem moim pomysłów i vice versa. To, co widzicie, jest rezultatem burzliwych, acz merytorycznych dyskusji, które niezmiernie sobie cenię.

Typografia

Postanowiłem tym razem nieco bardziej postawić na typografię. Powiększyłem rozmiar tekstu, uznałem, że w dobie wadliwego text-align: justify; we współczesnych (sic!) przeglądarkach, text-align: left; spełni należycie swoje zadanie. Myślę, że wyrównanie do lewej nadaje temu designowi nieco charakteru.

Standardowo zmienił się wygląd znaczników <blockquote /> oraz <code />:

To jest cytat:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper. Morbi est lorem, vulputate a, ultrices eu, molestie eget, nulla. Integer mattis, nisl nec dapibus laoreet, diam enim rutrum justo, sit amet fringilla eros arcu at libero. Etiam imperdiet dolor in risus. In dolor odio, bibendum quis, tristique nec, accumsan et, velit. In metus dolor, dignissim nec, aliquet et, consectetur id, nunc. Mauris turpis. Suspendisse enim tortor, dictum eu, lobortis a, feugiat sed, felis. Donec condimentum euismod nisi. Phasellus ornare viverra est. In sodales, nulla at sollicitudin gravida, augue velit auctor nunc, vitae suscipit tellus dui nec lectus. Vivamus vitae lectus vitae nulla pharetra elementum.

a to kod:

var Loremipsum = "someString";
function foobar() {
	var i = 0;
});
A to z kolei przypis na marginesie…

Dostępność, kod i inne

Gwoli technicznych wyjaśnień – na stronie głównej nagłówkiem pierwszego stopnia jest logo. Na stronie wpisu jest nim z kolei jego tytuł. Wszelkie podtytuły oznaczone są nagłówkiem trzeciego stopnia. Linie kodu domyślnie zawarte są w <pre />, by podczas ładowania strony tag ten został podmieniony na <ol /> przez stosowny skrypt JS.

Nie nastawiałem się na użytkowników IE6 i IE7, standardowo zresztą. Z tego, co zauważyłem, strona działa dobrze pod Internet Explorer 8, więc w pełni się tym zadowalam. Również jej kod jest wyciągnięty dopiero z pieca. Refactoring czeka na pewno CSS, jednak zrobię to w wolnej chwili.

Z ciekawostek – doszedł blogroll. Na razie wyselekcjonowałem kilka blogów, które warto odwiedzać. Wszystkie bez zbędnego lania wody – to się po prostu czyta (mimo że niektóre są nieco kontrowersyjne)! Na pewno już wkrótce sekcja ta rozrośnie się.

Przyszłość

Co dalej? Przede wszystkim zmieni się dział Nauka, który stanie się oddzielną stroną. Będzie to swoiste centrum wiedzy o JavaScript, być może zaktualizowany zostanie kurs, dopowiedziane zostaną różne ciekawostki. Trwają intensywne prace koncepcyjne, a jak my myślimy, to warto czekać, czyż nie?

Co do sfery merytorycznej, postaram się nieco bardziej postawić na wywiady, powstaną kolejne kursy i tutoriale. Swoją drogą, nadal mam ochotę trochę popastwić się nad tym i owym (lub tymi i owymi), jednak tego typu felietony, mimo szczerych chęci, jeszcze nie wykluły się w moim brudnopisie. Ale jeszcze się pośmiejemy i poszydzimy, obiecuję, choć kolejnego brukowca tu nie uświadczycie. Przede wszystkim ten blog to merytoryka. I niech tak pozostanie.

Komentarze

1

Zmiana na lepsze! ;-)

Jeśli można mieć uwagi, to trochę chaotycznie:

1. Z jakiegoś, błahego pewnie, powodu listing kodu nie wyświetla się z wyłączonym JS.

2. Stopka ma trochę zbyt małe dopełnienia (przy 1024px będzie ciasno).

3. Dużo złego dzieje się po wyłączeniu obrazków (dolny kontener nie ma tła, trudno rozszyfrować pola formularza, submit jest kompletnie niewidoczny, logo, górna nawigacja i zielone nagłówki również.

4. Dostępność: odnośniki powinny mieć albo pogrubienie, albo podkreślenie, albo dolne obramowanie, inaczej mogą być bardzo trudne do rozróżnienia.

5. Ficzer rekłest: usunąć kursywę z CODE i dorzucić jakiś współcześniejszy krój czcionki (Consolas albo Monaco).

6. Teskt w nagłówkach wygląda, jakby był wyrównywany jako całość, a nie względem baseline tekstu (obyś wiedział, o czym mówię ;-)).

7. I jakoś źle mi się czyta ten lid z pogrubionym fontem. Nie wiem, dlaczego ;-)

Pozdrawiam.

2

Ach, i łapska uciąć za pakowanie dużej biblioteki dla małego kawałka kodu ;]

3

Wasacz, dzieki za konstruktywna krytyke – czesc bugow to, jak mowilem, efekt wyciagniecia kodu z pieca – wybacz mi, nie moglem dlugo czekac, zwazywszy ze wiekszosc bugow to robota na kilka minut. Do rzeczy:

1. Fixed
2. Dziala niezle, sprawdzalem ;-)
3. Zostawilem sobie ten „ficzer” w TODO, poprawie, zreszta, szykuje artykul na ten temat (taa, szewc bez butow chodzi).
4. Fixed
5. Pomysle nad tym ;-)
6. Nie rozumiem, niestety…

Co do jquery – pospiech, nalecialosc po poprzedniej wersji, Platforma Oby.. eee, kajam sie mocno ;-)

Pozdrawiam!

4

Pod ajfonem przypisy i autorzy komentarzy są nieczytelne. Reszta ujdzie :)

5

Ładnie, podobają mi się zmiany, jest czysto i czytelnie, wydaje mi się tylko że bez „sidebara” jakoś pusto się zrobiło na środku, może by tak powiększyć przestrzeń wpisów ?

6

Kolejne teksty będą już redagowane w kontekście przypisów, więc miejsce powinno być dobrze zagospodarowane.

7

No proszę… wszystko z myślą o userach… ale podstawowy element bloga – RSS – przepadł. Nie ładnie, oj nie ładnie :-P

Michał Fikus
8

Ładnie, ładnie ;-)

To ode mnie mały request: zielony kolor na szarym tle (linkujący nick autora komentarza) jest nieczytalny (nie, ja nie chcę „najeżdżać” na link, żeby go odczytać- musi wystarczyć rzut oka).

Przypisy wyglądają profesjonalnie, ale czy aby za dużo miejca nie zajmują?

Dziękuję szczególnie za dużą czcionkę- ten blog to jedna z nielicznych (moja domowa również na ten problem cierpi :/) stron, gdzie nie muszę powiększać zawartości, aby cokolwiek odczytać ;)

Pozdrawiam

9

Bardzo miło i lepiej niż poprzednio. Gratulacje!

10

Kwestia przyzwyczajenia, ale mi bardziej odpowiadał poprzedni design.
Teraz drobny kurs jQuery czyta się gorzej…

No, ale jak mus to mus… trzeba się przyzwyczaić.

11

Przypis fajny.

RAFi
12

Wszystko jest świetne, b. mi się podoba, ale szukajkę to masz misiu brzydką jak noc… :X

sam ostatnio myślę nad zmianą designu i też bardziej w tym kierunku co Ty, czyli typografia –> czytelność. jednakże nie wiem czy zdecyduje się na umieszczenie sidebara w stopce… trochę to ryzykowne posunięcie, choć kto wie, zobaczymy…

fajnym motywem jest, że wszędzie czcionka jest dość duża, a w sidebarowej stopce mniejsza, bardzo dobrze :)

no właśnie, i ciekawe jak to będzie wyglądało (patrz np. przypisy) w RSSach… ;)

13

Logo „ferrante Powered by WordPress…” w stopce wygląda tragicznie na tej rozjaśnionej plamie szarości.

Poza tym bardzo czytelnie.

Pozdrawiam i trzymam kciuki za wytrwałość! :D

zap#
14

Działa elegancko na wbudowanej przeglądarce w Nokii E51 :) Bardzo przyjemny design, więcej jak wrócę do mojego komputera :)

pim
15

Bardzo fajnie, podoba mi się :)

16

Przy rozdziałce 1024×768 mam poziomy pasek przewijania. MS Win XP, Firefox 3.0.8.

Jeśli chodzi o „Viewport Maximum Width” polecam: http://www.nealgrosskopf.com/tech/thread.asp?pid=43

17

Ok, zbiorczo. Jakis link do RSSow na pewno sie pojawi, aczkolwiek nie dramatyzujmy – chyba kazda nowoczesna przegladarka umozliwia zasubskrybowanie dowolnego kanalu na stronie. Co do przypisow – raczej nie zmienia sie. Jestem tez zdania, ze kursy zyskaly na przejrzystosci, ale pewnie trzeba bedzie nieco je podrasowac pod katem nowego designu.

Co do topu – rowniez mam pewnie obiekcje, nie zdazylismy jednak niczego konkretnego w tym wzgledzie wymyslic. Co do 1024x wszystko powinno juz dzialac bez zarzutu.

Prawdopodobnie tez wrzuce kategorie bloga na stronie glownej nieco wyzej.

Pozdrawiam

18

Najbardziej spodobał mi się ten przypis na marginesie

19

Jeśli o sposób wyświetlania kodu chodzi — może i wygląda fajnie, ale zaznacz i skopiuj sobie powiedzmy do notatnika. Nie dość, że giną wcięcia, to mamy piękną listę wypunktowaną, którą sobie trzeba czyścić.

Wierzę, że potrafisz to naprawić :)

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>