DSP'17 — Redesign "na czysto"

9 maja 2017

Dwa miesiące temu pisałem o tym, jak zmagałem się z designem timbercode.pl. Po czterech iteracjach rysowania i analizy zdecydowałem, że dalsze kroki będą już miały miejsce w kodzie. Że po "ułożeniu" tematu w głowie efektywniej będę ubierał blog w nowe szaty, podmieniając to i owo w HTML i CSS strony.

Jest to kolejny wpis na temat rozwoju timbercode.pl w ramach konkursu Daj Się Poznać 2017.

Temat redesignu został wstrzymany… aż do teraz. Ale jak pracować nad nowym ostylowaniem, gdy na stronie jest już obecny jakiś motyw? Oczywiście, że się da, ale nie jest to droga, którą ja bym wybrał. Zdając się na modyfikacje obecnego stylu, jedynie naginałbym i korygował CSS tak długo, aż osiągnąłbym oczekiwany efekt wizualny. Efekt, który by się „popsuł” na pierwszym lepszym smartfonie. A następnie na tablecie z poziomą orientacją ekranu itd. 🙁

Jeśli chce się coś zbudować całkowicie na nowo, bez bagażu przeszłości, trzeba zacząć od zrównania z ziemią tego, co jest. Dlatego przygotowałem kopię głównej strony bloga pozbawioną jakichkolwiek własnych modyfikacji stylu. Jednocześnie zadbałem, aby jej struktura była zgodna z Semantic HTML. Zgodnie z tym podejściem preferuję znaczniki takie jak <header> czy <article> ponad abstrakcyjny <div>. Tak zmieniona strona wygląda następująco: Blog w postaci surowej

Strona z tytułem i listą tytułów wpisów to za mało, aby pracować nad spójnym designem. Dlatego utworzyłem dodatkowy wpis (z baaardzo przyszłą datą publikacji 😉), który zawiera różnorakie elementy:

  • listy,
  • listy zagnieżdżone,
  • wytłuszczenia,
  • linki,
  • emoji, 🚀
  • fragmenty kodu „inline”,
  • bloki kodu,
  • obrazki,
  • obrazki na poziomie podpunktów listy,
  • film z YouTube,
  • prezentację ze Speaker Deck,
  • i inne…

Fragment tego wpisu wygląda przedstawia poniższy zrzut ekranu: Wpis w postaci surowej

Oczywiście konieczne było, abym w taki sposób pozbawił ostylowania wpis próbny, co by nie zmienić nic w designie pozostałych wpisów. Globalnie zdefiniowane CSS przeniosłem do komponentu layoutu używanego przez wszystkie podstrony za wyjątkiem tych nowych, surowych.

Jedyny globalny CSS, jaki pozostawiłem, to normalize.css. Jest to bardzo przydatny „podstawowy” zestaw styli, który:

  • normalizuje CSS tak, aby strona wyglądała identycznie niezależnie od użytej przeglądarki internetowej,
  • poprawia błędy domyślnych styli w niektórych przeglądarkach.

Tak przygotowany mogę ruszać do dzieła! I to dzieła… plastycznego! 🍞😉