Dla kogo powstała strona
Hareborne to nasza własna marka zdjęć i filmów z drona. Baza jest w Rybniku, większość zleceń przypada na Śląsk, a realizacje odbywają się w całej Polsce. Klienci to firmy pokazujące siedzibę albo inwestycję, właściciele noclegów i agroturystyk, sprzedający działki i nieruchomości oraz organizatorzy wydarzeń.
Ktoś, kto zamawia nalot, chce najpierw zobaczyć, jak jego miejsce może wyglądać z góry. Strona musiała to pokazać w pierwszej sekundzie, zanim ktokolwiek zacznie czytać.
Co dostarczyliśmy
hareborne.pl, jednostronicową stronę po polsku, celowo ciemną, żeby materiał z drona był na niej najjaśniejszym elementem. Treści z poprzedniej strony na WordPressie przenieśliśmy i ułożyliśmy od nowa.
Hero z filmem z drona na pełnym ekranie.
Oferta rozpisana na cztery grupy klientów: firmy i oferty, noclegi i agroturystyka, nieruchomości i działki, wydarzenia i eventy.
Galeria realizacji, opis sprzętu, cennik i najczęstsze pytania.
Formularz kontaktowy wysyłający wiadomość prosto na skrzynkę Hareborne.
Dane strukturalne pod lokalne wyszukiwanie: siedziba w Rybniku i lista obsługiwanych miast, od Wodzisławia Śląskiego i Jastrzębia-Zdroju po Gliwice i Katowice.
Zgoda na cookies przed jakąkolwiek analityką.
Film, który nie każe czekać
Film na pierwszym ekranie łatwo zamówić i łatwo zepsuć: jeden plik przygotowany pod duży monitor każe czekać na telefonie. Dlatego hero jest adaptacyjnym strumieniem w trzech jakościach, od 480p do 1080p, a strona wybiera wariant pod ekran i łącze. Przy włączonym oszczędzaniu danych, wolnym połączeniu albo ograniczonych animacjach zostaje sam kadr startowy.
Nagłówek i hasło są widoczne od pierwszego wyrenderowania. Animacje wejścia działają w CSS, a interaktywna część strony uruchamia się dopiero wtedy, gdy przeglądarka skończy malować. Filmy i zdjęcia leżą osobno w Cloudflare R2, więc ciężkie pliki nie spowalniają ani strony, ani wdrożeń.
Stan na dziś
Strona działa pod adresem hareborne.pl: film z drona na pierwszym ekranie, oferta dla czterech grup klientów, galeria, cennik i formularz kontaktowy.
Szczegóły techniczne
Jak przygotować drabinę jakości dla filmu w hero i nie dopuścić, żeby obraz startowy rywalizował ze strumieniem o Largest Contentful Paint, opisaliśmy w tekście o tym, jak umieścić wideo na górze strony i nie kazać nikomu czekać.