Szybka makieta strony — rem, gradienty, placeholdery i Lorem ipsum

Makieta (prototyp) pozwala sprawdzić układ strony, zanim powstaną prawdziwe teksty i zdjęcia. Im mniej czasu zajmuje jej przygotowanie, tym szybciej można ją pokazać klientowi i poprawić.

1. Rozmiary w rem

Ustawiaj rozmiary czcionek i odstępy w jednostkach rem zamiast px. 1 rem to rozmiar czcionki elementu html — domyślnie 16 px. Gdy użytkownik powiększy czcionkę w przeglądarce, cała strona przeskaluje się proporcjonalnie.

h1 { font-size: 2rem; } /* 32 px */ p { font-size: 1rem; line-height: 1.5; } .karta { padding: 1.5rem; gap: 1rem; }

Wartości z projektu graficznego w pikselach przeliczysz (także całe fragmenty CSS) w konwerterze px ↔ rem. Cienkie linie (1 px) zostaw w pikselach.

2. Gradienty zamiast grafik

Tła sekcji, przyciski i banery można zrobić samym CSS — bez plików graficznych, w każdym rozmiarze ostre i lekkie:

.baner { background: linear-gradient(135deg, #2e86ab 0%, #a23b72 100%); } .przycisk { background: linear-gradient(#4caf50, #388e3c); }

Kąt, kolory i punkty przejścia dobierzesz wizualnie w generatorze gradientów, który od razu poda kod CSS. Pamiętaj, żeby tekst na gradiencie miał wystarczający kontrast w całym zakresie kolorów — sprawdź najjaśniejszy i najciemniejszy punkt w testerze kontrastu.

3. Obrazki zastępcze

Zamiast przypadkowych zdjęć z internetu (prawa autorskie!) wstaw w miejsca obrazów obrazki zastępcze o docelowych wymiarach, np. 1200×630 dla banera czy 400×400 dla awatara. Wersja SVG może być wpisana wprost w kod jako data:image/svg+xml,… — bez dodatkowych plików. Właściwe proporcje dobierzesz według poradnika proporcje obrazu.

Zawsze podawaj obrazom atrybuty width i height (albo aspect-ratio w CSS) — przeglądarka zarezerwuje miejsce i strona nie będzie „skakać” podczas ładowania.

4. Tekst testowy

Lorem ipsum wypełni akapity, nagłówki i listy tekstem o realistycznej długości. Dwie uwagi:

• Testuj też długie słowa i tytuły — polskie nazwy bywają dłuższe niż łacińskie wypełniacze („Przedsiębiorstwo Wielobranżowe…”), a niemieckie jeszcze dłuższe.
• Przed publikacją wyszukaj w kodzie „lorem” — zapomniany tekst testowy na produkcji to częsty i kompromitujący błąd.

5. Zanim strona trafi do sieci

• Uzupełnij tytuły i opisy stron — zob. meta tagi SEO.
• Sprawdź kontrast kolorów i działanie na telefonie (szerokość ok. 360–400 px).
• Zamień placeholdery na zoptymalizowane zdjęcia w formacie WebP lub AVIF.

Więcej o czytelności kolorów przeczytasz w poradniku kontrast kolorów i dostępność.