Optymalizacja wersji mobilnej jednokolorowej strony (landing page)

Należy poprawić wersję mobilną jednostronicowej strony internetowej. Optymalizować szybkość ładowania, dostosować pierwszy ekran oraz zaktualizować strukturę głównych bloków treści. Uczynić stronę bardziej wygodną i szybką dla użytkowników na urządzeniach mobilnych.

Zadanie:

• Optymalizacja szybkości ładowania wersji mobilnej

  • Dodałem plakat na pierwszym ekranie. Na komputerze działa poprawnie. Jeśli zmniejszyć okno przeglądarki do rozmiaru mobilnego, plakat również wyświetla się poprawnie. Ale nie rozumiem, dlaczego w ogóle nie działa na rzeczywistych urządzeniach mobilnych. Należy to naprawić, aby jak najlżejszy plakat ładował się natychmiast — jeszcze przed załadowaniem wideo i rozpoczęciem automatycznego odtwarzania. Po załadowaniu wideo plakat powinien zniknąć.

  • Problem: Na urządzeniach mobilnych plakat nie wyświetla się, użytkownik widzi białe ekran do momentu załadowania wideo.

  • Oczekiwane zachowanie:

    • Plakat ma pojawiać się natychmiast, jeszcze przed załadowaniem wideo.

    • Po rozpoczęciu odtwarzania wideo plakat ma zniknąć.

    • Sprawdzić na iOS Safari.

  • Zastosować lazy loading dla wszystkich obrazów poniżej pierwszego ekranu.
  • Usunąć blokujące skrypty i style (zwłaszcza dla mobile). Duplikaty i konflikty stylów. W miarę możliwości podzielić JS na async/defer.
  • Priorytetować treść pierwszego ekranu w HTML.
  • Rozmieszczenie bloków na urządzeniach mobilnych: wyrównać i dostosować dziwne/zepsute rozmieszczenie (zwłaszcza na małych ekranach).

• Dostosowanie pierwszego ekranu do urządzeń mobilnych (szerokość 320–375px)

  • Wszystkie teksty i główny przycisk mają być w pełni widoczne na pierwszym ekranie bez przewijania.

  • Sprawdzić zachowanie na iOS Safari (sprawdzić układ dla 320×693).

• Sekcja “O produkcie”

  • Skrócić tekst do jednego krótkiego akapitu (nie więcej niż 3–4 linijki).

  • Dodać przycisk “Pokaż więcej” do otwierania pełnego tekstu na życzenie. Dla wersji na PC niech tekst pozostanie domyślnie otwarty.

  • Dla desktopu — pełny tekst pozostaje otwarty.

  • Na urządzeniach mobilnych:

    • Obraz po lewej stronie.

    • Tekst po prawej (nie pod obrazkiem!). Obecnie tekst na urządzeniach mobilnych wyświetla się pod dużym obrazem, co jest niepoprawne.

  • Po bloku powinna być dodana przycisk akcji “Otrzymaj darmowe pomiary”.

• Sekcja "Galeria"

  • Uczynić kafelki większymi, a odległości między nimi — mniejszymi.

  • Zapewnić intuicyjność — użytkownik musi od razu rozumieć, że można klikać na obrazki. W razie potrzeby zmienić galerię na inną (bardziej zrozumiałą dla użytkownika, ale obsługującą też swipe).

  • Dodać jeszcze przycisk “Otrzymaj darmowe pomiary” zaraz po galerii.