dr Andrzej Biały — strona autorska historyka
Strona autorska dr. Andrzeja Białego — historyka z Przasnysza, autora monografii o mniejszości polskiej na Białorusi Sowieckiej. Zbiera w jednym miejscu publikacje, biografię, aktualności i galerię. Projektowałem ją dla starszych czytelników i badaczy, więc czytelność wygrywała z każdym efektem.
Wyzwanie
Dorobek naukowy autora był rozproszony, a odbiorcami są głównie starsi czytelnicy i badacze, dla których typowe strony są za drobne i za mało czytelne.
Rozwiązanie
Zaprojektowałem stronę z myślą o czytelności: duża typografia, zamknięta paleta wysokiego kontrastu, treść dostępna nawet bez JavaScriptu, okładki książek rysowane kodem (bez skanów) i uproszczony panel. Treści wprowadzam za autora, więc nie musi uczyć się WordPressa.
Jak to robiliśmy
- 01
Makieta pod konkretnego czytelnika
Zacząłem od makiety strony głównej, którą klient zaakceptował w lipcu — i od pytania, kto będzie ją czytał. Stąd duży szeryfowy tekst, wysoki kontrast, cele dotykowe co najmniej 44 px i tylko jasny motyw, bo ciemny klient świadomie odrzucił. Kroje są systemowe, więc strona nie pobiera żadnych fontów z zewnątrz.
- 02
Model treści zamiast jednej długiej strony
Publikacje mają własny typ treści z danymi bibliograficznymi, aktualności to wbudowane wpisy WordPressa (zostają RSS, archiwa i wyszukiwarka), a galeria to osobny typ na zdjęcia, skany i dokumenty. Pierwsza liczba w pasku liczy się sama z opublikowanych książek, więc nie zestarzeje się po dodaniu kolejnej. Hero, kontakt i nagłówki sekcji edytuje się w Dostosuj, po polsku.
- 03
Trzy rzeczy, których makieta nie miała
Makieta chowała nawigację poniżej 720 px — do one-page’a to uchodziło, do serwisu z podstronami już nie, więc dorobiłem menu mobilne. Animację pojawiania się treści uzależniłem od działającego JavaScriptu: bez tego książki i karta kontaktu zostawały niewidoczne. Dane bibliograficzne dostały własny układ tabeli zamiast siatki kart.
- 04
Uczciwa treść i chroniony kontakt
Galeria i Aktualności czekają puste na materiały autora — na stronie historyka przykładowy wpis mógłby zostać wzięty za prawdziwy. Liczby publikacji też nie podbijam ręcznie: pokazuje to, co faktycznie jest na stronie. Przy okazji wyszło, że standardowe zabezpieczenie adresu e-mail było pozorne, bo filtr WordPressa odkodowywał go w linku — przepisałem to i test pilnuje, że adres nie stoi w źródle otwartym tekstem.
- 05
Demo, domena i statystyki bez wtyczek
Klient oceniał stronę na subdomenie zablokowanej dla Google na dwóch poziomach, żeby po przenosinach nie został duplikat. Przenosiny na własną domenę robi skrypt, który sam sprawdza DNS, robi kopię bazy, podmienia adresy i przywraca konfigurację serwera, gdy test nginx nie przejdzie. Google Analytics ładuje się dopiero po kliknięciu „Zgadzam się” — baner, polityka prywatności i link do cofnięcia zgody są w motywie, bez wtyczek.
Co wyróżnia ten projekt
Okładki rysowane kodem
Okładka książki powstaje z pól „tytuł na okładce”, „lata” i „rodzaj”, narysowana w CSS — strona wygląda kompletnie, zanim autor wgra choćby jeden skan. Wgrane zdjęcie okładki ma pierwszeństwo.
Czytelna także bez JavaScriptu
Każda treść jest widoczna z wyłączonym skryptem, a testy E2E sprawdzają to w obu szerokościach ekranu — razem z brakiem poziomego scrolla i rozmiarem przycisku menu.
Panel, którego nie da się rozjechać
Zamknięta paleta kolorów, skrócona lista bloków i wzorce sekcji biografii. Do tego instrukcja prowadzenia strony — choć ostatecznie treść wprowadzam za autora.
Zero wtyczek
Typy treści, pola bibliograficzne, zgoda na cookies i statystyki siedzą w motywie. Na stronie, którą utrzymuję za klienta, każda wtyczka to dodatkowy koszt aktualizacji.
Widoki i elementy
Cały dorobek w jednym miejscu, indeksowany w Google pod nazwiskiem autora — strona, którą wygodnie czyta się także na telefonie i przy słabszym wzroku.
Zacznijmy Twój projekt.
Opisz w kilku zdaniach, czego potrzebujesz — odezwę się z konkretnymi pytaniami i propozycją kolejnych kroków. Bez zobowiązań.