Nasz responsywny przepływ pracy przy tworzeniu stron internetowych w Elementor

W tym artykule chcieliśmy omówić, w jaki sposób tworzymy wysoce responsywne strony internetowe dla wszystkich typów urządzeń i rozmiarów ekranu podczas budowania za pomocą Elementora. To jest nasz indywidualny przepływ pracy w agencji, który rozwinęliśmy w ciągu ostatnich kilku lat działalności.

Jeśli uważasz, że może to być pomocne dla Twojej firmy i projektu, możesz to zastosować. Należy pamiętać, że większość tworzonych przez nas witryn to dość złożone, a nie proste, pięciostronicowe korporacyjne landingi. Niektóre z tych kroków są niezwykle przydatne podczas tworzenia złożonych sklepów e-commerce lub witryn z treściami, ale można je przeoczyć, aby zaoszczędzić czas i pieniądze podczas tworzenia prostszej witryny.

Makiety

Pierwszym krokiem do naszego responsywnego projektowania stron internetowych jest wykpiwanie go. Używamy Adobe XD do tworzenia makiet stron internetowych, projektując z ideologią mobile first. Oznacza to, że stworzymy mobilną makietę, zanim jeszcze pomyślimy o wersji witryny na komputery stacjonarne. 60% całego ruchu w witrynie pochodzi z przeglądarek mobilnych, co oznacza, że ​​jest to ważniejsze niż prawidłowe ustawienie komputera.

Trochę nieaktualne, ale to pokazuje zmieniające się trendy

Następnie weźmiemy tę makietę, rozszerzymy ją do rozmiaru tabletu, a następnie rozszerzymy do rozmiaru komputera stacjonarnego. Komputerowa wersja witryny może wyglądać zupełnie inaczej niż mobilna wersja witryny, ale ma te same sekcje i strukturę, aby zmniejszyć liczbę elementów DOM i zapewnić responsywność.

Projektując mentalność mobile first, możemy zapewnić, że ten aspekt strony będzie doskonały od pierwszego dnia. Korzystając z Adobe XD, nasza agencja może z łatwością współpracować ze sobą, udostępniać makiety w celu uzyskania opinii, a nawet wyświetlać je na osobistych telefonach podczas projektowania.

W szczególności, jeśli chodzi o responsywne projektowanie stron internetowych dla złożonych projektów, statyczna makieta strony internetowej jest niezwykle ważna. Możesz przeczytać nasz artykuł o mocowaniu stron tutaj: https://isotropic.co/is-making-a-website-mockup-worth-it/

Po wykonaniu makiet, przetestowanych przez grupy użytkowników, klientów i nasz zespół agencji, nadszedł czas, aby stworzyć je w Elementorze.

To najważniejszy aspekt tworzenia responsywnej strony internetowej: faktyczne jej budowanie.

Tworzenie responsywnych stron internetowych z Elementor

Budując stronę internetową, najpierw zdefiniujemy podstawową strukturę w formie desktopowej. Jednak zakończymy wypełnianie treści z telefonu komórkowego przez tablet do komputera.

Robiąc to w ten sposób, jesteśmy w stanie zapewnić, że ta struktura będzie działać na wszystkich rozmiarach ekranu, a wypełniając treści z mentalnością mobile first, wiemy, że będzie dobrze wyglądać (od samego początku) na telefonie komórkowym.

Aby upewnić się, że wszystko wygląda dobrze na różnych rozmiarach ekranu, użyjemy wbudowanej funkcji „responsywnego ukrywania” dostarczanej z Elementorem. Znajduje się na karcie ustawień zaawansowanych kreatora. Jednak musisz być ostrożny podczas ukrywania elementów (jest to po prostu użycie CSS display:none w graficznym interfejsie użytkownika), ponieważ wszystkie te elementy nadal będą się ładować. Jeśli ukrywasz połowę swojej strony internetowej na urządzeniu mobilnym, może to poważnie wpłynąć na szybkość Twojej witryny, więc musisz być uważny i stworzyć witrynę tak, aby była jak najbardziej uproszczona.

Aktualna wersja Elementora jest dostarczana z trzema responsywnymi punktami przerwania. W niektórych sytuacjach te trzy punkty przerwania są więcej niż wystarczające, aby uzyskać responsywny projekt wysokiej jakości. Jednak przy projektowaniu za pomocą innych narzędzi używamy do sześciu pojedynczych punktów przerwania. Elementor nie pozwala nam tego zrobić po wyjęciu z pudełka, więc utknęliśmy przy użyciu zapytań o media CSS.

W związku z tym zagłosuj , aby twórcy Elementora dodali dodatkowe punkty przerwania jako natywną funkcję:

Na szczęście używamy mnóstwa niestandardowego CSS, ponieważ programowanie w ten sposób jest po prostu szybsze. Jeśli jednak nie znasz CSS lub nie lubisz go używać, istnieje zbiór wtyczek, które umożliwiają dodawanie niestandardowych punktów przerwania do projektu. W przeszłości używaliśmy specjalnie dodatków Piotnet (o których mówiliśmy w poprzednim artykule), ponieważ zawierają one mnóstwo świetnych elementów stron trzecich, a narzędzie jest dostarczane z niestandardowym narzędziem do obsługi punktów przerwania.

Jednak nie kupilibyśmy kolejnej licencji Piotnet tylko po to, aby dodać mobilne punkty przerwania, zapytania o media CSS są na to szybszym i tańszym sposobem.

Innym narzędziem, którego możesz użyć, jeśli chodzi o projektowanie responsywne, jest coś, co nazywa się CSSHero. CSSHero pozwala zasadniczo wygenerować mnóstwo niestandardowych CSS za pomocą ładnego graficznego interfejsu użytkownika. Używaliśmy tego w przeszłości i było to dość korzystne dla naszego przepływu pracy — możesz przeczytać o naszych przemyśleniach tutaj.

Dodając określone elementy treści, staramy się przestrzegać wszystkich najlepszych praktyk projektowania responsywnego.

Na przykład określimy rozmiar określonych elementów za pomocą VH, VW lub procentów. Staramy się unikać wymiarów w pikselach, gdy tylko jest to możliwe, ponieważ może to negatywnie wpłynąć na responsywny aspekt witryny na unikalnych rozmiarach ekranu.

W miarę możliwości staramy się używać SVG dla naszych ikon i podstawowych grafik na stronie, ponieważ są one najbardziej responsywne. Obrazy ulegną pogorszeniu po powiększeniu, a pliki SVG nie (nie wspominając o tym, że są znacznie mniejsze niż większość obrazów, co prowadzi do znacznie szybszego czasu ładowania).

Bardzo lubimy używać REM dla wszystkich naszych elementów typologicznych. REM po prostu pobiera podstawową wartość tekstową HTML i rozszerza lub zmniejsza witrynę. Na przykład typowy podstawowy rozmiar czcionki dla większości przeglądarek to 16 pikseli, więc jeden REM odpowiadałby 16 pikselom.

Oczywiście te rozmiary czcionek różnią się w zależności od przeglądarki, zwłaszcza przy porównywaniu komputerów stacjonarnych i mobilnych. Dla nas jest to świetne, ponieważ pozwala nam uzyskać responsywne rozmiary tekstu, które są widoczne i czytelne na wielu rozmiarach ekranu.

W Google jest mnóstwo artykułów na temat sprawdzonych metod projektowania responsywnego, więc jeśli jesteś zainteresowany, po prostu je wyszukaj. To, do czego tak naprawdę się sprowadza, to zwracanie uwagi na odwiedzających, prostota obsługi na urządzeniach mobilnych i zapewnienie ciągłości elementów między komputerem a urządzeniami mobilnymi.

Pamiętaj, aby spróbować użyć pomiarów względnych, takich jak wartości procentowe i REM, aby upewnić się, że elementy są odpowiednio skalowane w górę i w dół, aby spełnić wymagania dotyczące rozmiaru ekranu.

Optymalizacja prędkości mobilnej

Gdy mamy już ogólną wersję naszej strony internetowej, nadszedł czas na jej optymalizację pod kątem szybkości. Mamy mnóstwo artykułów i zasobów na temat tego, jak przyspieszyć ładowanie witryny Elementor, ale jest kilka rzeczy, na których zdecydowanie musisz się skupić, jeśli chodzi o przeglądanie mobilne.

Urządzenia mobilne mają mniejszą moc i wolniejszy internet, co oznacza, że ​​tego typu witryny zwykle ładują się znacznie wolniej niż witryny na komputery stacjonarne. To tylko znany fakt, ale należy go w jak największym stopniu złagodzić, w przeciwnym razie odwiedzający nie dotrą do Twojej witryny. Ludzie mają czas skupienia uwagi tylko na 6 sekund, a Twoja witryna powinna załadować się za 2.

Jeśli chodzi o optymalizację Elementora pod kątem szybkości na urządzeniach mobilnych, dwie najważniejsze rzeczy to czcionki i obrazy.

W przypadku korzystania z czcionek należy je zawsze wstępnie ładować i używać formatu pliku .woff .woff2. Zapewnia to zgodność z większością przeglądarek mobilnych, a te formaty plików są małe i szybko się ładują. aby prawidłowo zoptymalizować wszystkie nasze czcionki na stronach Elementor, albo hostujemy je lokalnie, albo używamy WP Rocket, aby szybko je wstępnie załadować.

Obrazy mają zazwyczaj największy negatywny wpływ na szybkość ładowania witryny mobilnej. Musisz upewnić się, że są odpowiednio zoptymalizowane i obsługiwane w formatach nowej generacji, takich jak WebP. Nie jest to tak naprawdę coś, co można zrobić ręcznie, ale na szczęście istnieje mnóstwo usług poświęconych automatycznej optymalizacji i konwersji obrazów.

Nasze narzędzie do szybkiego ładowania obrazów na stronach mobilnych nazywa się ShortPixel. Wystarczy go zainstalować, kliknąć duży czerwony przycisk optymalizacji, a skompresuje i przekonwertuje wszystkie obrazy oraz wyświetli je przez sieć CDN, aby zapewnić jak najszybszy czas ładowania Twojej mobilnej witryny Elementor.

Testowanie witryny

Do tej pory zbudowaliśmy naszą stronę internetową, upewniliśmy się, że dobrze wygląda na urządzeniach mobilnych i zoptymalizowaliśmy ją pod kątem szybkości. Ostatnim krokiem w naszym przepływie pracy w zakresie programowania mobilnego dla Elementora jest testowanie. Jest to zdecydowanie najważniejsza część każdego projektu responsywnej strony internetowej, ponieważ teraz musisz przetestować, czy projekt responsywny wygląda dobrze na wszystkich typach rozmiarów ekranu.

W przeszłości rozmiary ekranów były ledwie ustandaryzowane. Miałbyś swoje duże laptopy, małe laptopy, tablety i urządzenia mobilne. To by było na tyle, teraz każdy laptop ma swój własny rozmiar ekranu i proporcje, urządzenia mobilne wahają się od niewiarygodnie długich i wysokich rozmiarów ekranu po krótkie i grube rozmiary ekranu. jest ich wiele, a Twoim zadaniem jest upewnienie się, że Twój projekt mobilny działa dobrze na wszystkich typach rozmiarów ekranu.

Aby przetestować nasz responsywny projekt mobilny na naszej stronie Elementor, stosujemy kilka różnych narzędzi.

Wersja dla programistów Firefoksa

Narzędzia programistyczne dostarczane z edycją programisty Firefoksa są niezwykle wydajne i łatwe w użyciu. Jeśli chodzi o projektowanie responsywne, używamy narzędzi programistycznych Firefoksa do emulacji określonych rozmiarów okien ekranu.

Jeśli zidentyfikujemy jakiekolwiek poważne problemy z tą metodą, możemy łatwo edytować CSS stosujący się do konkretnego elementu i sprawdzić, czy możemy szybko naprawić.

Stos przeglądarek

Browserstack jest bardziej zorientowany na agencje i zastosowania korporacyjne i pozwala nam testować naszą witrynę deweloperską na maksymalnie 2000 rzeczywistych urządzeniach i przeglądarkach. przechodząc przez rzeczywiste urządzenia i dziesiątki przeglądarek, jesteśmy w stanie zidentyfikować wszelkie problemy, które mogą wystąpić na starszych urządzeniach lub przeglądarkach. Kosztuje 29,00 USD miesięcznie i mają również bezpłatny okres próbny . Jeśli pracujesz nad konkretnym projektem, który Twoim zdaniem mógłby wykorzystać takie narzędzie, zdecydowanie polecam przyjrzeć się tej próbie.

Jeśli jesteś również mniejszą agencją lub freelancerem, możesz uzyskać dostęp do obniżonych cen w cenie 12,00 USD miesięcznie za 100 minut testowania. Wreszcie, jeśli masz projekt open source, co prawdopodobnie nie ma miejsca, jeśli używasz Elementora, możesz uzyskać dostęp do bezpłatnych testów.

Responsywnie

To ostatnie narzędzie do testowania jest najnowszym dodatkiem do naszego zestawu narzędzi, ale jest jednym z najważniejszych aspektów naszego responsywnego przepływu pracy przy projektowaniu stron internetowych Elementor. Responsive to projekt typu open source, który umożliwia łatwy podgląd do 30 wstępnie ustawionych rozmiarów ekranu urządzenia i korzystanie z narzędzi programistycznych bezpośrednio w przeglądarce. Istnieje mnóstwo unikalnych i zaawansowanych funkcji, takich jak lustrzane interakcje między wszystkimi rozmiarami ekranu, konfigurowalny układ i mnóstwo urządzeń. Dostajesz również konsolę narzędzi programistycznych chromu, dzięki czemu możesz łatwo edytować CSS w ten sposób.

Jest to ostatnie narzędzie, którego używamy do identyfikacji potencjalnych problemów z responsywną wersją naszych witryn Elementor i jest to zdecydowanie coś, na co powinieneś się przyjrzeć. Narzędzie jest pobierane jako rozszerzenie przeglądarki i samodzielna aplikacja. Klikasz rozszerzenie przeglądarki i otwiera się strona internetowa w aplikacji.

Wniosek

Wreszcie, po przetestowaniu naszego responsywnego projektu zbudowanego za pomocą Elementora na dziesiątkach urządzeń, widoków i przeglądarek, jesteśmy w końcu wystarczająco pewni, aby wprowadzić zmiany na żywo.

To kończy nasz przepływ pracy dla responsywnego projektowania, jeśli chodzi o Elementor. Jeśli uznałeś to za interesujące, możesz zaadoptować to do swojej rutyny. Jeśli masz własny przepływ pracy, możesz go opublikować w sekcji komentarzy poniżej, ponieważ może pomóc innym twórcom korzystającym z drzwi elementu.