Верстка лендинга (landing page) из PSD с минимальным функционалом

Obecnie pracujemy nad projektem głównej strony internetowej. Projekt będzie w Figma. Należy wykonać poprawną szatę graficzną i przekazać do pracy naszemu programiście. Jestem gotowa odpowiedzieć na dodatkowe pytania, aby określić zakres pracy i koszt Wstępny prototyp strony https://drive.google.com/file/d/1W54_1lrGhPpaSL4HIjPgOI41TlOJagdj/view?usp=sharing Zadanie, według którego pracuje projektant https://docs.google.com/document/d/1dSlx7i8Y12jYC3RvdtD2sx3Cwot8MmKtfdtK-mVaHMk/edit?usp=sharing

Szukamy dewelopera do całego projektu, który obejmuje osobno wersję desktopową i aplikację. Układ musi być identyczny z makietą. Na początek, ile czasu zajmie i ile będzie kosztować wykonanie takiego landing page'a?

Zadanie - wykonanie szablonu strony. Jest gotowy opracowany makiet, który został stworzony w konstruktorze, który trzeba przerobić na WP. To mała (na 4-5 stron) dwujęzyczna strona informacyjna z możliwością podłączenia WooCommerce. Strona ma być zoptymalizowana pod kątem SEO.

Stworzyć i zrealizować responsywny szablon master dla emaili w Stripo (do eksportu do SendPulse).⚙️ Co należy zrobić:Opracować koncepcję wizualną i projekt bloków (nagłówek, banery, karty produktów, stopka).Zrealizować responsywny szablon HTML w Stripo z możliwością dalszego eksportu do SendPulse.Przetestować wyświetlanie w Gmail, Apple Mail, Outlook oraz w trybie ciemnym. Wymagania:Pewny poziom Figma oraz praktyczne doświadczenie w realizacji w Stripo.Zrozumienie technicznych ograniczeń email marketingu.Portfolio z zrealizowanymi kampaniami e-mailowymi (e-commerce/moda).

Opis zadania Potrzebny doświadczony frontend-deweloper lub deweloper szablonów do etapowego aktualizowania dużej, działającej strony internetowej. Strona działa od wielu lat, zawiera znaczną liczbę stron, różne typy treści, formularze, tabele i interaktywne bloki. Używany jest własny system serwerowy, dostępny jest legacy HTML/CSS. Pełna wymiana technologii lub systemu zarządzania stroną nie jest planowana. Na pierwszym etapie konieczne jest opracowanie nowego responsywnego ogólnego szablonu strony. Po pomyślnym zakończeniu pierwszego etapu planowane jest stopniowe aktualizowanie stron wewnętrznych. Nazwa strony, URL, projekty graficzne oraz aktualne pliki wyjściowe będą udostępnione ograniczonej liczbie kandydatów po wstępnym wyborze na podstawie portfolio i doświadczenia.Co wchodzi w pierwszy etap Konieczne jest wdrożenie ogólnej wizualnej powłoki: nagłówka dla wersji desktopowej i mobilnej; głównej i mobilnej nawigacji; elementów nagłówka; ogólnego kontenera i siatki strony; łańcucha nawigacyjnego („okruszki chleba”); podstawowych elementów interfejsu: przyciski, linki, pola wejściowe; ogólnych stylów typografii z możliwością ich etapowego podłączenia; stopki; responsywnego zachowania szablonu; kompatybilności nowej powłoki ze stronami, które tymczasowo pozostaną w starym designie. Unikalne wewnętrzne bloki poszczególnych stron na pierwszym etapie nie muszą być całkowicie przerabiane.Specyfika projektu Duża działająca strona z wieloma typami stron. Dostępny legacy CSS i miejscami przestarzała struktura HTML. Nowy design będzie wdrażany stopniowo. Jednoczesna pełna wymiana wszystkich stron jest niemożliwa. Wykonawca nie uzyskuje dostępu do serwera, CMS i roboczego projektu. Zleceniodawca samodzielnie zintegrowuje przygotowany szablon. Wykonawcy będą udostępnione aktualne pliki CSS, projekty, materiały graficzne, fragmenty HTML oraz przykłady stron w zakresie niezbędnym do wykonania pracy. Przewiduje się kilka iteracji po testowej integracji w rzeczywistym projekcie.Podejście techniczne Przewiduje się podłączenie nowego CSS nad istniejącymi stylami z późniejszą stopniową migracją i usunięciem przestarzałych reguł. Dozwolone jest: tworzenie nowych plików CSS/SCSS; proponowanie zmian w HTML ogólnych części szablonu; poprawianie istniejących reguł CSS, które przeszkadzają w realizacji; proponowanie ulepszeń struktury DOM; tworzenie nowych komponentów wielokrotnego użytku. Zmiany w istniejącym CSS należy przekazywać osobno w formie: pliku patch/diff; osobnego pliku kompatybilności; lub udokumentowanej listy zmienionych reguł i selektorów. Należy unikać: niekontrolowanego użycia !important; głęboko zagnieżdżonych i kruchych selektorów CSS; przypisywania stylów do tekstu lub numeru porządkowego elementu; duplikowania całej struktury osobno dla wersji desktopowej i mobilnej; podłączania ciężkich frameworków bez wcześniejszej zgody; globalnych reguł, które mogą zakłócić wyświetlanie jeszcze nie zaktualizowanych stron.Wymagania dotyczące jakości Projekt jest zaplanowany na dalszy wieloletni rozwój. Potrzebne jest nie jednorazowe „dopasowanie do zrzutu ekranu”, ale czysty, profesjonalny i łatwy do utrzymania szablon. Oczekiwane jest: zrozumiała struktura komponentów; wielokrotnego użytku klasy CSS; własności CSS dla kolorów, rozmiarów, odstępów i innych tokenów projektowych; rozsądna specyficzność selektorów; semantyczna struktura HTML5; poprawna hierarchia nagłówków; brak zbędnych opakowań DOM; brak duplikowania treści, która jest indeksowana; poprawne użycie header, nav, main, section, footer; użycie przycisków i linków zgodnie z ich przeznaczeniem; dostępność interfejsu z klawiatury; stany hover, focus, active i disabled; brak poziomego przewijania strony; poprawna praca z dynamiczną treścią o różnej długości; zrozumiały i profesjonalnie zorganizowany kod.SEO i wydajność Aktualizacja szablonu nie powinna pogarszać technicznych wskaźników SEO strony. Konieczne jest: zachowanie semantyki głównej treści; nie tworzenie osobnych duplikatów DOM dla wersji mobilnej i desktopowej bez uzasadnionej potrzeby; nie ukrywanie ważnej dla indeksacji treści za pomocą JavaScript; nie naruszanie hierarchii nagłówków; nie usuwanie istniejących atrybutów SEO, analitycznych i strukturalnych z dostarczonych fragmentów HTML; minimalizacja dodatkowego JavaScript; nie używanie ciężkich bibliotek bez zgody; przewidzenie rozmiarów obrazów i braku widocznych przesunięć układu podczas ładowania; nie dopuszczenie do zauważalnego pogorszenia wskaźników Lighthouse i Core Web Vitals po integracji. Wykonawca musi rozumieć, że wysokiej jakości CSS sam w sobie nie naprawia struktury DOM. Jeśli dla profesjonalnego wyniku konieczna jest zmiana struktury, należy przygotować i przekazać zleceniodawcy odpowiednie fragmenty HTML.Responsywność Sprawdzanie szablonu powinno być przeprowadzane przynajmniej na takich szerokościach: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Między kontrolnymi rozmiarami interfejs również powinien pozostawać poprawny i funkcjonalny. Poziome przewijanie całej strony jest niedopuszczalne. Wyjątki dla poszczególnych komponentów, takich jak duże tabele, muszą być wcześniej uzgodnione.Wynik pierwszego etapu Wykonawca przekazuje: Nowy CSS lub SCSS wraz z gotowym zbudowanym CSS. Autonomiczna demonstracyjna strona HTML. Fragmenty HTML nagłówka, menu i stopki, jeśli struktura była zmieniana. Osobny patch/diff zmian legacy CSS. Nowe SVG, obrazy, ikony i czcionki. Instrukcję podłączenia i integracji. Opis struktury CSS i komponentów. Listę nowych i zmienionych klas oraz selektorów. Zrzuty ekranu wyniku na kontrolnych rozmiarach. Listę znanych ograniczeń i rozbieżności z projektami. Rekomendacje dotyczące dalszej migracji stron wewnętrznych.Iteracje Do kosztów pierwszego etapu powinny wchodzić: Uzgodnienie ogólnej struktury i wersji desktopowej. Responsywne dopracowanie wersji tabletowej i mobilnej. Poprawki wykrytych przez zleceniodawcę problemów po pierwszej testowej integracji. Dodatkowe prace poza uzgodnionym pierwszym etapem będą wyceniane osobno.Co należy wskazać w aplikacji Prosimy o podanie: doświadczenia w pracy z dużymi działającymi stronami oraz legacy CSS; przykładów skomplikowanej responsywnej struktury; przykładów kodu lub linków do repozytoriów, jeśli są dostępne; podejścia do organizacji architektury CSS; doświadczenia w stopniowej migracji designu bez całkowitego zatrzymania strony;