Strona firmy meblarskiej powinna pokazywać nie tylko listę usług i numer telefonu. Musi oddać sposób pracy, jakość materiałów i atmosferę wnętrz. W projekcie Meble Zbyszek przyjęliśmy nietypowe rozwiązanie: użytkownik może wybrać jasny albo ciemny wariant strony. Zmiana obejmuje kolory, fotografie oraz część komunikatów, dlatego nie jest zwykłym filtrem nałożonym na ten sam widok.
Oba warianty prowadzą do tej samej oferty — kuchni, szaf, garderób, łóżek tapicerowanych i zabudów na wymiar. Inaczej rozkładają jednak akcenty. Jasna wersja jest spokojna, naturalna i dzienna. Ciemna eksponuje kontrast, oświetlenie LED, głębię materiałów oraz bardziej premium charakter.
Dwa układy kolorystyczne, jedna marka
W obu wersjach zachowano to samo logo, strukturę nawigacji, dane kontaktowe i najważniejsze informacje o firmie działającej od 1995 roku. Dzięki temu użytkownik nie trafia na dwie różne witryny. Zmienia sposób oglądania tego samego portfolio, podobnie jak próbka materiału wygląda inaczej w świetle dziennym i wieczornym.
Zmienia się także przekaz informacyjny
W kodzie istnieją dwa zestawy krótkich komunikatów. Po wybraniu wariantu zmieniają się między innymi fragmenty nagłówka, opis pracowni, podpisy realizacji i wybrane wezwania do działania. W jasnej wersji nacisk pada na dopasowanie mebli do domu, pomiar i naturalny materiał. W ciemnej mocniej wybrzmiewają światło, detal, rytm wnętrza i atmosfera.
To ważne, ponieważ prezentacja kuchni na wymiar nie kończy się na wymiarach szafek. Klienci kupują także poczucie spójności z wnętrzem. Mechanizm dwóch narracji pozwala pokazać, że ta sama pracownia wykonuje zarówno jasne, spokojne kuchnie, jak i ciemniejsze zabudowy z wyrazistym oświetleniem.
Technologia internetowa bez ciężkiego frameworka
Witryna została zbudowana jako statyczna strona internetowa. Przeglądarka otrzymuje gotowy dokument HTML, arkusz CSS i niewielki plik JavaScript. Nie jest potrzebna baza danych ani generowanie widoku na serwerze przy każdym wejściu. Takie podejście upraszcza hosting, ogranicza liczbę potencjalnych awarii i pomaga zachować krótki czas odpowiedzi.
- Semantyczny HTML
Struktura nagłówków, sekcji, nawigacji i formularza jest czytelna dla użytkowników oraz robotów. - CSS Custom Properties
Kolory i powierzchnie są zapisane jako tokeny, które zmieniają się po ustawieniu motywu. - JavaScript bez biblioteki UI
Obsługuje motyw, zmianę treści, obrazy, menu, animacje i formularz WhatsApp. - Nginx i HTTPS
Statyczne pliki są serwowane z cache, kompresją i poprawnym certyfikatem.
<html data-theme="light">
:root { --page: #fffdfa; --ink: #171514; }
[data-theme="dark"] { --page: #111315; --ink: #eee8dc; }Przełączenie atrybutu `data-theme` na elemencie dokumentu powoduje, że cały interfejs korzysta z drugiego zestawu zmiennych. Wybór jest zapisywany lokalnie w przeglądarce, dlatego po ponownym wejściu użytkownik widzi preferowany wariant. Mechanizm nie przesyła tej informacji na serwer.
Responsywność, dostępność i wydajność
Układ dopasowuje się do komputerów i telefonów. Zdjęcia posiadają określone proporcje, galeria korzysta z opóźnionego ładowania, a na małym ekranie karty przechodzą do jednej kolumny. Animacje pojawiania się elementów wykorzystują `IntersectionObserver`, ale są pomijane, gdy urządzenie lub użytkownik preferuje ograniczony ruch.
Przyciski mają etykiety dostępności, strona posiada link pozwalający przejść bezpośrednio do treści, a formularz kontaktowy komunikuje swój stan. Kontrola automatyczna jest wykonywana dla widoku desktopowego i mobilnego, w obu wariantach kolorystycznych. Sprawdzane są między innymi brak poziomego przewijania i niedziałające obrazy.
Co rozwiązanie daje SEO?
Najważniejsza dla pozycjonowania pozostaje treść HTML dostępna bez przełączania motywu: oferta, lokalizacje, realizacje, kontakt i dane strukturalne firmy. Technologia wspiera te informacje przez szybkie ładowanie, stabilne adresy, canonical, sitemapę oraz schema.org. Motyw sam w sobie nie poprawia pozycji, ale może poprawić odbiór strony, czas spędzony w serwisie i gotowość do obejrzenia realizacji.
Ten artykuł rozszerza tematykę domeny o projektowanie stron internetowych, responsywny web design, HTML, CSS, JavaScript i techniczne SEO. Robimy to jako jawne case study własnego serwisu, a nie próbę konkurowania z firmami tworzącymi strony. Głównym tematem domeny pozostają meble na wymiar i realizacje Meble Zbyszek.
Od inspiracji do kontaktu
Technologia ma prowadzić do prostego celu biznesowego. Użytkownik może zadzwonić, otworzyć Facebook albo wypełnić krótki formularz, który przygotowuje wiadomość WhatsApp z rodzajem planowanej zabudowy. Nie potrzebuje konta ani rozbudowanego panelu.
Zobacz oba warianty na żywo
Przejdź na stronę główną i użyj przełącznika jasnego lub ciemnego wariantu w górnym menu.
Obejrzyj realizacje