Jak sprawić, by witryna WordPress była responsywna dla urządzeń mobilnych

Responsywne strony internetowe są obecnie standardem w branży, ze względu na dużą liczbę użytkowników przeglądających głównie na urządzeniach mobilnych. Aby zilustrować, jak głęboki jest ten wpływ, giganci branżowi, tacy jak Google, nagradzają teraz witryny przyjazne dla urządzeń mobilnych w rankingach wyszukiwania, aby pomóc w popchnięciu większej liczby witryn do obsługi urządzeń innych niż komputery stacjonarne.

Krótko mówiąc, responsywne strony internetowe używają tego samego kodu witryny na wszystkich platformach, ale oferują optymalizację dla każdego doświadczenia, niezależnie od medium przeglądania. W konsekwencji skonfigurowanie responsywnej witryny może oznaczać przebudowę całego projektu lub po prostu wprowadzenie kilku poprawek do istniejącego.

W tym artykule dowiesz się, w jaki sposób witryny WordPress można dostosować do urządzeń mobilnych za pomocą responsywnego projektu. Wyjaśnimy również znaczenie responsywności dla optymalizacji pod kątem wyszukiwarek (SEO). Do roboty!

Czy WordPress jest przyjazny dla urządzeń mobilnych?

WordPress to system zarządzania treścią (CMS), który umożliwia zaprojektowanie interfejsu witryny w celu spełnienia dokładnych wymagań. Oznacza to, że można go łatwo dostosować do urządzeń mobilnych.

Responsywne motywy domyślne są dostępne od 2011 roku. Wiele motywów innych firm oferuje teraz również responsywny projekt od razu po wyjęciu z pudełka. Te, które tego nie robią, są często przestarzałe w wielu innych obszarach.

Co to jest projektowanie responsywne?

Omówmy, w jaki sposób responsywny projekt będzie miał zastosowanie do Twojej witryny WordPress. Projektowanie responsywne to sposób organizowania treści na stronie internetowej w taki sposób, aby dynamicznie reagowała na wielkość ekranu, na którym się pojawia. Oznacza to, że wrażenia użytkownika są tak samo dobre na smartfonie, jak na laptopie.

Aby osiągnąć to doskonałe wrażenia na różnych urządzeniach, projektanci stworzą płynne siatki treści i elastyczność kodu w obrazach za pośrednictwem CSS witryny, aby ponownie rozmieścić kod HTML w bezpośredniej odpowiedzi na rozmiar i rozdzielczość ekranu.

Jeśli potrzebujesz świetnego przykładu, otwórz Mashable.com w nowym oknie (zakładając, że nie korzystasz jeszcze z urządzenia mobilnego). Gdy już tam będziesz, zmień rozmiar okna przeglądarki, aby było coraz mniejsze i obserwuj, jak witryna odpowiednio się zmienia

Gdy zmniejszasz okno, obrazy i bloki treści ścigają się, aby dopasować się do coraz mniejszego okna zgodnie z płynnymi siatkami utworzonymi przez projektanta. W najmniejszym przypadku pozostaje Ci to, jak witryna Mashable wyglądałaby na iPhonie. Jest piękny i łatwy do odczytania. Ponownie embiggenuj okno, a oni odpowiedzą, wracając do konfiguracji „pulpitu”.

Witryna sama się zmienia, ponieważ istnieją zapytania o media CSS, które stosują różne reguły do ​​strony, w zależności od rozmiaru urządzenia (w tym przypadku okna przeglądarki), na którym jest wyświetlana witryna. Kod HTML pozostaje taki sam, jest po prostu uporządkowany przez CSS. Reguły CSS można zastosować do zmiany układu wszystkiego w witrynie, w tym do obsługi obrazów o różnych rozmiarach w zależności od rozdzielczości urządzenia. Jest to naprawdę fajne, gdy chcesz robić takie rzeczy, jak wyświetlanie obrazów ulepszonych siatkówką specjalnie na urządzeniach z systemem iOS.

Aplikacje mobilne a strony responsywne

Wybór aplikacji w porównaniu z witryną responsywną sprowadza się do celu witryny. Większość stron internetowych będzie w porządku dzięki responsywnemu projektowi, który można dostosować do urządzeń. Aplikacja mobilna wchodzi w grę, gdy użytkownicy chcą, aby ich urządzenia mobilne miały bardzo specyficzną funkcjonalność, która różni się od pełnej wersji witryny. Twój bank prawdopodobnie oferuje aplikację mobilną, dzięki której możesz szybko sprawdzić saldo w kolejce w Starbucks. Facebook i Twitter również dostosowują swoją funkcjonalność w swoich aplikacjach do korzystania z urządzeń mobilnych.

Tylko wtedy, gdy Twoi użytkownicy potrzebują określonego zestawu funkcji ze swoich telefonów, różniących się od tego, czego potrzebują z głównej witryny, natywna aplikacja jest czymś do rozważenia.

Zagadnienia dotyczące wydajności witryn responsywnych

Responsywny projekt wpłynie na ogólną wydajność Twojej witryny. Ładowanie dużej ilości CSS i obrazów o różnych rozmiarach w celu reagowania na rozmiary urządzeń może być kosztowne z punktu widzenia przetwarzania zaplecza. W ramach oceny responsywnego projektu ważne jest, aby nadać priorytet wydajności jako funkcji. Użytkownicy nadal oczekują, że witryna mobilna będzie nieco wolniejsza, ale nie wybaczą, jeśli spróbują otworzyć Twoją witrynę, aby pokazać znajomemu lub swojej randce, i będą musieli czekać dłużej niż kilka sekund.

Z technicznego punktu widzenia dostarczenie witryny na urządzenie mobilne korzystające z komórkowej transmisji danych ogranicza Cię nawet o 0,5 s od samego początku. Na przykład pobranie 40 KB w sieci 4G zajmuje w optymalnych warunkach 700 ms. Opóźnienie sieci i różnice sytuacyjne tylko zwiększą czas ładowania. Nie możesz kontrolować zmiennych sieci komórkowej, dlatego bardzo ważne jest, aby od samego początku zbudować responsywną witrynę z wydajnością.

Upewnij się, że wykonałeś poniższe czynności, aby Twoja witryna była zoptymalizowana pod kątem urządzeń mobilnych.

• Zoptymalizuj swoje obrazy: automatycznie wykrywaj rozmiar ekranu urządzenia, aby tworzyć, buforować i dostarczać obraz o odpowiednim rozmiarze.
• Zmniejsz liczbę żądań HTTP: Zminimalizuj ilość CSS i JavaScript, których potrzebujesz, a następnie buforuj wszystko inne.
• Warunkowe ładowanie zasobów: duże przyciski mediów społecznościowych, obrazy i tym podobne są idealne na większe urządzenia, ale nie wpływają na wrażenia użytkownika na mniejszych urządzeniach. Zaplanuj swój projekt tak, aby ładował tylko to, co jest absolutnie konieczne.
• Leniwe ładowanie: jeśli możesz uniknąć ładowania niektórych zasobów, w szczególności JavaScript, po najważniejszych elementach strony, zrób to. Do czasu, gdy Twoi użytkownicy skonsumują treści, których chcieli, te inne zasoby zostaną załadowane.

Czy Twoja witryna WordPress musi być responsywna?

Coraz częściej domyślną odpowiedzią na to pytanie będzie „tak”, szczególnie przy szerokiej dostępności responsywnych motywów WordPress. Jeśli Twoja witryna ma zostać przeprojektowana lub jest w trakcie projektowania, ważne jest, aby zapewnić użytkownikom wysokiej jakości obsługę na każdym urządzeniu, na którym się znajdują.

Mając to na uwadze, zakończę kilkoma pytaniami, które należy zadać Tobie i Twojemu zespołowi, aby ocenić, czy Twój WordPress powinien być zaprojektowany w sposób responsywny.

• Jaki jest przypadek użycia Twojej witryny? Czy mobilna konsumpcja będzie ważna? Są szanse, że odpowiedź na to pytanie brzmi „tak, i to coraz bardziej z każdym rokiem”. Będą wyjątki, ale nieliczne.
• Kim są Twoi użytkownicy? Im bardziej są techniczni, im bardziej nowatorscy, tym bardziej prawdopodobne jest, że będą oczekiwać responsywnej witryny dla każdej marki, z którą się kojarzą.
• Czy masz budżet? Ten jest duży. Budowa responsywnej witryny jest początkowo nieco droższa, ale taniej jest zbudować jedną responsywną witrynę niż planować utworzenie dwóch oddzielnych wersji witryny, a następnie zarządzanie utrzymaniem obu.
• Czy jesteś gotowy, aby nauczyć się nowego rodzaju projektowania? Projektowanie responsywne wprowadza wiele nowych koncepcji i sposobów rozumienia treści cyfrowych. ważna będzie praca z zespołem projektowym, który nie tylko zaprojektuje coś pięknego, ale także zapewni Ci edukację.

Tworzenie responsywnego projektu internetowego WordPress

Istniejące projekty statyczne często można przekształcić w responsywne motywy. Oto kilka elementów, które należy wziąć pod uwagę w całym procesie konwersji:

• Domyślny zoom przeglądarki
• Szerokości i wysokości elementów płynnych
• Optymalizacja obrazu
• Punkty przerwania specyficzne dla projektu
• Oddzielne responsywne menu dla urządzeń mobilnych

Powinieneś także przetestować zaktualizowany projekt na wielu urządzeniach i wziąć pod uwagę dodatkowe elementy, takie jak responsywne tabele podczas testowania. Jednak najłatwiejszym sposobem uczynienia WordPressa responsywnym jest wybranie od samego początku gotowego responsywnego motywu.

Wybór odpowiedniego motywu WordPress

Zanim zaczniesz przeszukiwać ponad 10 000 dostępnych obecnie motywów WordPress, dobrze jest sporządzić listę funkcji, które chcesz mieć w swojej witrynie, i użyć tej listy jako punktu wyjścia.

Jeśli nie masz pewności, jakich funkcji szukać, istnieje kilka punktów odniesienia, które pomogą Ci zawęzić wybór: optymalizacja pod kątem wyszukiwarek (SEO) i szybkie ładowanie strony (niezależnie od urządzenia) są dwie rzeczy, które powinien mieć każdy motyw.

Chociaż istnieje wiele motywów WordPress, które nie mają wbudowanej tej funkcji, użycie motywu, który ma obie te funkcje, zapewni znacznie lepsze wrażenia użytkownika końcowego w Twojej witrynie.

Na przykład pakiet premium motywów WordPress WP Engine jest zoptymalizowany pod kątem wyszukiwarek i responsywny dla urządzeń mobilnych, co oznacza, że ​​wszystkie ładują się szybko na dowolnym urządzeniu. Te wspaniale wyglądające motywy zostały stworzone z myślą o wielu różnych zastosowaniach, a firmy o różnych kształtach i rozmiarach używają ich do wzmacniania swojej obecności w Internecie.

Dostęp do tych motywów jest również zawarty w każdym planie WP Engine, co oznacza, że ​​klienci WP Engine mogą korzystać z nich wszystkich bez dodatkowych opłat.

Mobilne wtyczki WordPress

Telefony komórkowe otwierają duży potencjał funkcji, takich jak powiadomienia push i trwałe ładowanie przez wolne połączenia. Jednak chociaż istnieją rozwiązania, które pomogą przekształcić witrynę internetową w mobilną aplikację internetową i przenieść koncepcję przyjazności dla urządzeń mobilnych na wyższy poziom, wiele z nich wciąż znajduje się w fazie opracowywania i testowania.

Oznacza to, że może brakować niektórych oczekiwanych funkcji. Istnieje jednak wiele mobilnych wtyczek WordPress, które mogą pomóc w ulepszeniu witryny na różne sposoby.

1. JetPack

Chociaż dostępnych jest wiele rozwiązań, wtyczka Jetpack jest bardzo popularną opcją. Znajdziesz go w katalogu wtyczek, ale zawiera również opcje tworzenia prostego motywu mobilnego w Twojej witrynie.

Jedną z najlepszych rzeczy w Jetpack jest to, że jest dobrze utrzymany. Oznacza to, że będą częste aktualizacje w celu zapewnienia bezpieczeństwa i funkcjonalności. Jest to również jedno z najbardziej funkcjonalnych narzędzi, jakie można znaleźć. Podstawowa wtyczka jest darmowa i zawiera wiele opcji. Minusem jest to, że jest tak wiele funkcji, że interfejs może początkowo wydawać się mylący.

Dodatkowo, jeśli potrzebujesz codziennych kopii zapasowych, niestandardowych motywów i narzędzi SEO, musisz zainwestować w wersję premium Jetpack. W zależności od potrzeb możesz uzyskać wtyczkę premium do użytku osobistego za 39 USD rocznie, przy czym najwyższy poziom kosztuje 299 USD rocznie.

2. WPtouch

Dodatkowo możesz zapoznać się z WPtouch, popularną wtyczką, która może utworzyć witrynę mobilną z istniejącej witryny. Jedną z głównych zalet korzystania z tej wtyczki jest to, że możesz dostosować wersję mobilną bez zakłócania lub zmiany oryginalnej witryny.

Darmowa wersja ma również dość solidną funkcjonalność. Jeśli jednak szukasz innego wyglądu i stylu, musisz kupić wersję pro. Plany cenowe Pro zaczynają się od 79 USD rocznie i sięgają do 359 USD rocznie w przypadku licencji na poziomie przedsiębiorstwa.

3. Pakiet mobilny WordPress

Chociaż WordPress Mobile Pack nie został przetestowany z najnowszą wersją WordPress, jest to popularna wtyczka do tworzenia progresywnej aplikacji internetowej (PWA) z istniejącej witryny. Oznacza to, że użytkownicy Twojej witryny będą mieli doświadczenie przypominające aplikację, bez konieczności inwestowania zasobów w programowanie aplikacji do pobrania dla sklepu z aplikacjami.

Dzięki tej wtyczce będziesz mógł wysyłać banery do użytkowników, ostrzegając ich o możliwości dodania Twojej witryny do ich ekranów głównych. Twoje strony będą wtedy buforowane i ładowane bardzo szybko. Podstawowa funkcjonalność tej wtyczki jest bezpłatna, ale musisz kupić wersję pro, aby uzyskać dostęp do większej liczby motywów, opcji dostosowywania i możliwości synchronizacji niektórych treści.
Wersja pro wtyczki ma trzy poziomy do wyboru. Pakiet Freelancer zaczyna się od 99 USD rocznie i może być używany w trzech domenach. Poziomy cenowe obejmują opcję VIP, która kosztuje 499 USD rocznie za dziesięć licencji na domenę.

Responsywne obrazy

WordPress oferuje domyślnie responsywne obrazy od wersji 4.4. Jednak szczególnie w przypadku witryn korzystających ze starszego kodu istnieje prosty fragment, który można dodać do arkusza stylów, aby obrazy nigdy nie wyglądały na zbyt duże na małych urządzeniach:

img {
max-width: 100%;
height: auto;
}

Chociaż istnieje wiele sposobów na zapewnienie optymalnej wydajności responsywnego obrazu, ten fragment gwarantuje, że wszystkie Twoje obrazy będą responsywne jako linia bazowa.

Wreszcie, większość obrazów nadaje się do umieszczenia w responsywnej witrynie, chociaż skalowalność powinna być czynnikiem. Na przykład, jeśli dołączysz obraz z dużą ilością tekstu, odczytanie go na urządzeniach mobilnych może być trudne. W takim przypadku lepiej będzie wybrać inny obraz lub zapewnić możliwość czytania tekstu niezależnie od obrazu.

Responsywne menu

Istnieją dwie podstawowe szkoły myślenia dotyczące tworzenia responsywnych menu:

1. Stwórz jedno menu, które działa we wszystkich rozmiarach.
2. Utwórz dwa menu: jedno dla dużych ekranów i jedno dla małych ekranów. W danym momencie będzie wyświetlany tylko jeden, w zależności od używanego rozmiaru ekranu.

Podejście uniwersalne najlepiej sprawdza się w przypadku mniejszych menu, ponieważ optymalizacja CSS pod kątem czytelności na urządzeniach mobilnych wymaga tylko kilku prostych poprawek. W takiej sytuacji menu jest zawsze widoczne dla użytkownika niezależnie od wielkości urządzenia.

Jeśli jednak menu jest zbyt duże, aby można je było łatwo zmniejszyć na urządzeniach mobilnych, możesz potrzebować drugiej wersji dedykowanej mniejszym ekranom. W tym przypadku duże menu jest widoczne tylko na dużych ekranach, a ikona menu mobilnego jest obecna na mniejszych ekranach.

Typowym przykładem takiego podejścia jest ikona menu hamburgera, która po kliknięciu wyświetla pełne menu mobilne. Możesz także skorzystać z różnorodnych wtyczek WordPress, aby pomóc w tworzeniu responsywnego menu. Spójrzmy na trzy opcje.

1. UberMenu

Jedną z opcji, którą możesz wypróbować, jest UberMenu. Za 25 USD będziesz mieć dostęp do przyszłych aktualizacji i sześciomiesięcznego wsparcia. UberMenu może pomóc Ci stworzyć w pełni responsywne, przyjazne dla dotyku menu. Niestety, jeśli Twój motyw nie jest specyficzny dla UberMenu, prawdopodobnie będziesz musiał wprowadzić pewne ręczne zmiany, aby motyw działał poprawnie.

2. Maks. mega menu

Inną opcją jest wtyczka Max Mega Menu. To narzędzie ma bezpłatną opcję w katalogu wtyczek WordPress i współpracuje z istniejącymi menu, aby przekształcić je w „mega” menu:

Darmowa wersja ma również wiele funkcji menu mobilnego, takich jak natywna obsługa ekranów dotykowych. Aby uzyskać dostęp do większej liczby czcionek i opcji przełączania urządzeń mobilnych, musisz sprawdzić jeden z trzech poziomów cenowych. Wersja premium wtyczki zaczyna się od 29 USD rocznie i waha się do 99 USD rocznie w przypadku licencji na wiele witryn.

3. Responsywne menu

Kolejną dobrze ocenianą i popularną wtyczką, którą możesz sprawdzić, aby Twoje menu było przyjazne dla urządzeń mobilnych, jest wtyczka Responsive Menu. To rozwiązanie ma ponad 150 różnych opcji dostosowywania, a wszystko to w łatwym w użyciu interfejsie.

Będziesz mieć możliwość zmiany prawie każdego aspektu swoich menu na stronie ustawień wtyczek. Jeśli jednak szukasz animacji i większej liczby czcionek, musisz sprawdzić aktualizację wtyczki Responsive Menu.

Darmowa wersja wtyczki może zawierać potrzebne funkcje, ponieważ lista opcji jest dość obszerna. Jeśli dokonasz aktualizacji, możesz uzyskać licencję na jedną witrynę za 29 USD lub uzyskać nieograniczoną liczbę licencji za 99 USD. Koszt wtyczki to jednorazowa opłata, a będziesz otrzymywać bezpłatne aktualizacje przez całe życie.

Responsywne tabele

Domyślnie tabele zajmują tyle samo miejsca co ich zawartość (lub więcej). Może to prowadzić do tego, że wyjątkowo szerokie stoły zrujnują mobilne układy.

Niestety tabele pełne treści stają się trudne do odczytania po zmniejszeniu w celu dopasowania do szerokości strony mobilnej. Responsywny projekt nie polega wyłącznie na zgniataniu danych na małym ekranie. Zamiast tego chodzi o to, aby wszystko było przyjazne dla użytkownika, niezależnie od urządzenia.

Aby uzyskać szybkie i brudne rozwiązanie, możesz dodać podstawową responsywność do swoich tabel za pomocą tego fragmentu kodu CSS:

table {
width: 100%;
border-collapse: collapse;
}

Jednak nie musisz na tym poprzestawać. Jeśli nie masz małych tabel, zalecamy optymalizację każdej z nich na podstawie rodzaju prezentowanej treści. W zależności od danych w tabelach istnieje wiele opcji responsywnych, które można wybrać, aby uzyskać najlepszą możliwą czytelność.

Jeśli jednak szukasz wtyczki do responsywnych tabel, masz szczęście! Opcji jest kilka, ale w szczególności polecamy trzy.

1. Prasa stołowa

Po pierwsze, wtyczka TablePress jest popularną, dobrze utrzymaną i wysoko ocenianą opcją. Będziesz mógł tworzyć i osadzać piękne tabele za pomocą skrótów. Aby jednak uzyskać naprawdę responsywne tabele, musisz zainstalować rozszerzenie TablePress. Chociaż są one również bezpłatne, zalecamy przekazanie darowizny programiście.

2. Konstruktor tabel WP

Jeśli szukasz pięciogwiazdkowego narzędzia do tworzenia tabel typu „przeciągnij i upuść”, WP Table Builder może być dla Ciebie. Nieco nowa, ale dobrze przyjęta wtyczka, której interfejs typu „przeciągnij i upuść” ułatwia tworzenie responsywnych tabel dla Twojej witryny.

Jest to również całkowicie darmowa wtyczka. Jedynym prawdziwym minusem tej opcji jest to, że w tej chwili ma tylko pięć opcji danych. Jesteś nieco ograniczony do tekstu, obrazów, przycisków, list i ocen w postaci gwiazdek.

3. wpDataTables

Trzecią wtyczką, którą zalecamy sprawdzić, jest wpDataTables. Za pomocą tego narzędzia możesz szybko tworzyć tabele i wykresy z istniejących danych Excel, CSV, PHP lub innych. Oznacza to, że możesz pobierać duże zbiory danych i udostępniać je w swojej witrynie.

Ta wtyczka jest również gotowa na Gutenberga, dzięki czemu dodawanie tabel do stron i postów witryny jest bardzo proste po dostosowaniu ich w ustawieniach wtyczki. Będziesz jednak nieco ograniczony przez darmową wersję tej wtyczki.
Na przykład nie będziesz mógł tworzyć tabel opartych na zapytaniach MSQL ani pobierać informacji z Arkuszy kalkulacyjnych Google, chyba że dokonasz aktualizacji. Wersja premium zaczyna się od 59 USD rocznie za podstawową warstwę cenową i kończy się na 249 USD rocznie za pakiet deweloperski.

Dodawanie możliwości wielojęzycznych

Wraz ze wzrostem adopcji WordPressa na całym świecie, wywołało to rosnące zapotrzebowanie na wielojęzyczną funkcjonalność, która umożliwia tłumaczenie witryn na języki lokalne w zależności od lokalizacji użytkownika.

Ten rodzaj funkcjonalności jest ogromny dla firm z klientami w wielu krajach, a dzięki WordPress dodanie go do witryny nie jest tak trudne, jak mogłoby się wydawać. W rzeczywistości można to osiągnąć, instalując wtyczkę, taką jak Weglot, która pozwala uczynić witrynę wielojęzyczną w ciągu kilku minut – bez potrzeby używania kodu.

Weglot jest również kompatybilny ze wszystkimi motywami i wtyczkami WordPress, co oznacza, że ​​będzie działał na każdym używanym motywie i nie spowoduje problemów z innymi wtyczkami. Po dodaniu do jednego z motywów WordPress premium WP Engine, Weglot pomaga właścicielom witryn zbudować przyjazną dla SEO, responsywną witrynę mobilną, do której można uzyskać dostęp w dowolnym języku.

Sprawdź ten przewodnik, aby dowiedzieć się więcej, i odwiedź WP Engine, aby dowiedzieć się o naszych różnych planach oraz innych funkcjach i funkcjach, które są dostarczane z naszą platformą Digital Experience Platform dla WordPress.

Responsywność mobilna dla SEO

Mówiąc najprościej, witryny przyjazne dla urządzeń mobilnych są nagradzane przez Google w bezpłatnych wynikach wyszukiwania. W latach 2015-2016 do algorytmu rankingu dodano szereg aktualizacji, aby faworyzować strony responsywne. Należy zauważyć, że ponieważ szybkość odgrywa ogromną rolę w przyjazności dla użytkowników mobilnych, przyczynia się to również do lepszych rankingów w wyszukiwarkach.

Oczywiście, aby odnieść sukces, szybko ładujące się responsywne strony internetowe polegają na znakomitym hostingu. Gdy wybierzesz wysokiej jakości firmę hostingową, taką jak WP Engine (oferujemy PHP 7 w standardzie i bezpłatną sieć dostarczania treści w planach wyższego poziomu), zauważysz szybsze ładowanie i płynniejsze działanie.

Twórz responsywnie z WP Engine

Praca nad responsywną stroną internetową powinna być priorytetem w naszym mobilnym świecie. Jest wiele do śledzenia, ale tutaj w WP Engine możemy pomóc Ci wskazać najlepsze zasoby dla programistów WordPress i wysoce responsywne motywy dla użytkowników mobilnych.

Dodatkowo mamy szeroką gamę planów i rozwiązań dla Twojej strony internetowej. Pomożemy Ci budować responsywnie na naszej platformie cyfrowej i nie będziesz musiał się martwić utratą odwiedzających z powodu rozmiarów ekranu!