Animacje reagują na to, co robi odwiedzający, przewijanie odsłania kolejne sceny, elementy przesuwają się w różnym tempie, sekcje przechodzą jedna w drugą płynnie.
Kod animacji piszemy sami, bez zewnętrznych bibliotek i bez zasobów pobieranych z obcych domen. Dzięki temu strona zostaje lekka, a Ty wyróżniasz się na rynku.
Nie, bo nie dokładamy do niej cudzego kodu. Typowa animowana strona pobiera gotowy silnik animacji ważący więcej niż cała reszta witryny, po to, żeby wykorzystać z niego kilka funkcji. My piszemy ten kod sami i tylko w takim zakresie, w jakim jest potrzebny.
Sceny rysujemy na canvasie i w SVG, czyli narzędziami, które przeglądarka ma wbudowane i nie musi ich skądkolwiek ściągać. Strona mieści się w naszym standardzie wyniku 98 lub więcej w PageSpeed Insights, dokładnie tak samo jak strona bez animacji.
Co dokładnie dostajesz
Zakres jest ten sam co przy każdej naszej stronie, plus warstwa animacji. Poniżej obie części osobno.
Warstwa animacji
- Animacje sterowane interakcją. Powiązane z przewijaniem i ruchem po stronie, a nie odtwarzane w kółko niezależnie od tego, co robi odwiedzający.
- Sceny na canvasie i w SVG. Dwie techniki, obie natywne dla przeglądarki, dobierane do tego, co scena ma pokazać.
- Cząstki i paralaksa. Elementy przesuwające się w różnym tempie, budujące wrażenie głębi.
- Płynne przejścia między sekcjami. Strona czyta się jak opowieść, a nie jak lista bloków.
- Opcjonalny dźwięk. Wraz z przełącznikiem, którym odwiedzający wyłącza dźwięk oraz same efekty.
Warstwa strony
- Projekt graficzny od zera. Bez szablonu, pod Twoją markę i Twoją historię.
- Kod pisany ręcznie. Bez systemu zarządzania treścią po stronie odwiedzającego, więc bez bazy danych i bez panelu logowania wystawionego w internecie.
- Pełna responsywność, mobile-first. Projektujemy od telefonu w górę, bo tam trafia większość ruchu.
- Restrykcyjna polityka bezpieczeństwa treści. Zero skryptów osadzonych bezpośrednio w HTML i zero zasobów z obcych domen.
- Kod na własność. Po zapłacie przenosimy autorskie prawa majątkowe.
Ruch, który nikogo nie wyklucza
Animowana strona jest najłatwiejszym sposobem na zbudowanie bariery dostępności. Dlatego traktujemy to jako część zamówienia, a nie dodatek.
| Problem | Typowe rozwiązanie na rynku | Nasze rozwiązanie |
|---|---|---|
| Ruch wywołuje zawroty głowy i mdłości | Brak reakcji. Animacja działa u każdego tak samo. | Respektujemy systemowe ustawienie redukcji ruchu. Przy włączonym animacje się nie uruchamiają, a strona czyta się normalnie. |
| Dźwięk włącza się bez pytania | Autoodtwarzanie, czasem bez możliwości wyłączenia. | Dźwięk jest opcjonalny, a widoczny przełącznik wycisza go razem z efektami. |
| Czytnik ekranu nie widzi treści | Cała strona narysowana jako jedna wielka scena. | Treść niesie zwykły HTML, sceny są oznaczone jako dekoracyjne i pomijane przez czytnik. |
| Google nie indeksuje zawartości | Tekst wstawiany dopiero przez skrypt albo zapisany w obrazie. | Robot dostaje ten sam HTML co przeglądarka, z pełną treścią i nagłówkami. |
| Strona nie działa bez skryptów | Pusty ekran, gdy skrypt się nie wczyta. | Treść jest w dokumencie od początku. Animacja jest warstwą dodaną, a nie warunkiem czytania strony. |
Kiedy to dobry wybór
Ten pakiet rozwiązuje konkretny problem. Jeśli Twój problem jest inny, powiemy to wprost i wskażemy tańszą opcję.
Bierz, jeśli
- Prezentujesz produkt albo usługę, których wartość trzeba pokazać, a nie opisać.
- Uruchamiasz nową markę i strona startowa ma zrobić pierwsze wrażenie.
- Prowadzisz kampanię i potrzebujesz strony, na której odwiedzający zostaje dłużej niż kilkanaście sekund.
- Chcesz się wyróżnić wykonaniem, a Twoja branża wygląda w sieci wszędzie tak samo.
- Liczysz się z jednorazowym wydatkiem i nie chcesz opłat miesięcznych.
Nie bierz, jeśli
- Potrzebujesz bazy wiedzy albo bloga z częstą edycją treści. Wtedy właściwa jest Odbudowa za 1700 zł lub Strona rozbudowana za 3000 zł.
- Chcesz sprzedawać przez stronę. Do tego służy Sklep online, z koszykiem, płatnościami i panelem zamówień.
- Zależy Ci na płatności miesięcznej. Ten pakiet istnieje wyłącznie w modelu jednorazowym.
- Masz kilkanaście podstron do przeniesienia. Animowana strona jest z założenia krótka i skupiona na jednej historii.
Najczęstsze pytania
Ile kosztuje animowana strona www?
Od 4500 zł netto plus 23% VAT, wyłącznie w modelu jednorazowym. Ten pakiet nie jest dostępny w subskrypcji i nie ma przy nim opłat miesięcznych. W cenie mieści się projekt, animacje, kod strony i wdrożenie.
Hosting pozostaje po stronie klienta; jeśli chcesz, żebyśmy zajęli się utrzymaniem, dokładasz Patrol od 170 zł netto miesięcznie. Zakres animacji i liczba scen wpływają na wycenę, więc konkretną kwotę i termin podajemy po bezpłatnej konsultacji.
Czy animacje spowolnią stronę?
Nie muszą i u nas nie spowalniają, bo nie dokładamy do strony cudzego kodu. Kod animacji piszemy sami, bez zewnętrznych bibliotek i bez zasobów pobieranych z obcych domen, więc przeglądarka nie ściąga setek kilobajtów silnika animacji, z którego wykorzystano jedną funkcję.
Sceny rysujemy na canvasie i w SVG, czyli narzędziami, które przeglądarka ma wbudowane. Strona zostaje lekka i mieści się w naszym standardzie wyniku 98 lub więcej w PageSpeed Insights.
Czy animowana strona będzie widoczna w Google?
Tak, bo treść i animacja to dwie oddzielne warstwy. Tekst, nagłówki i odnośniki niesie zwykły HTML, ten sam, który dostaje robot wyszukiwarki. Sceny animowane są oznaczone jako dekoracyjne, więc nie zasłaniają treści ani nie zastępują jej obrazem.
To samo rozwiązanie odpowiada za czytelność strony dla czytników ekranu: osoba korzystająca z czytnika dostaje pełną treść, bez opisu ruchomych ozdób.
Co z osobami, które źle znoszą ruch na ekranie?
Strona respektuje systemowe ustawienie redukcji ruchu. Jeśli odwiedzający ma je włączone w telefonie albo w systemie, animacje się nie uruchamiają, a strona działa i czyta się normalnie.
Dodatkowo umieszczamy widoczny przełącznik, którym każdy może wyłączyć dźwięk oraz same efekty, niezależnie od ustawień systemu. Dla części osób ruch na ekranie wywołuje zawroty głowy i mdłości, więc nie traktujemy tego jako drobiazgu.
Dla kogo animowana strona nie ma sensu?
Dla firm, które potrzebują rozbudowanego serwisu z bazą wiedzy, blogiem i panelem do częstej edycji treści. Wtedy lepiej pasuje Odbudowa za 1700 zł netto albo Strona rozbudowana za 3000 zł netto. Jeśli chcesz sprzedawać przez stronę, właściwym pakietem jest Sklep online.
Animowana strona jest dla prezentacji produktu, usługi albo wizerunku marki, gdzie liczy się wrażenie i sposób opowiedzenia historii, a nie liczba podstron.
Czy używacie gotowych bibliotek animacji?
Nie. Kod animacji piszemy sami, a strona nie pobiera niczego z obcych domen. Ma to trzy skutki: strona zostaje lekka, bo nie dokładamy silnika ważącego więcej niż cała reszta witryny; nie dziedziczysz cudzych podatności ani cudzego cyklu aktualizacji; i utrzymujemy restrykcyjną politykę bezpieczeństwa treści, bo nie musimy otwierać jej na zewnętrzne źródła skryptów.
Zero skryptów osadzonych bezpośrednio w HTML jest częścią tej samej decyzji.
Czytaj dalej
Ile kosztuje strona internetowa
Pełny cennik wszystkich pakietów, dwa modele płatności i tabela pomagająca wybrać właściwy zakres.
Zobacz cenyNasze realizacje
Strony, które zbudowaliśmy. Zobacz, jak wygląda projekt bez szablonu i jak zachowuje się na telefonie.
Obejrzyj realizacjeBudowa stron
Przegląd całego działu: co budujemy, w jakich modelach płatności i co wchodzi w cenę każdej strony.
Wróć do działuOpowiedz, co ma zobaczyć odwiedzający.
Zanim policzymy cokolwiek, ustalamy, ile scen potrzebuje Twoja historia i co w nich się dzieje. Od tego zależy zakres pracy, termin i ostateczna kwota. Konsultacja jest bezpłatna i nie zobowiązuje do niczego.
- od 4500 zł jednorazowo
- Bez subskrypcji
- Bez obcych bibliotek
- Kod na własność