Czy wiesz, że wszystkie strony Webador są zaprojektowane jako responsywne? Oznacza to, że Twoja strona automatycznie dostosuje się do dowolnego rozmiaru ekranu, niezależnie od tego, czy jest to komputer, czy telefon.
Istnieje jednak kilka rzeczy, które możesz zrobić, aby wszystko wyglądało jak najlepiej na urządzeniach mobilnych:
Kolumny
Możesz użyć elementu Kolumna, aby rozdzielić treść, gdy masz umieszczonych obok siebie kilka elementów. Te kolumny będą ułożone jedna na drugiej w widoku mobilnym.
Gdy umieścisz element Kolumna na swojej stronie, automatycznie tworzy on 3 kolumny, jak pokazano poniżej. Możesz przeciągać i upuszczać inne elementy w obrębie kolumn, aby dodać treść.
Częstym błędem jest umieszczanie każdego elementu treści w osobnym elemencie Kolumna, co tworzy jednocześnie 3 kolumny pionowe i 3 poziome i wygląda mniej więcej tak:
a tak to wygląda na urządzeniu mobilnym:
Dlatego, gdy wypełniasz jedną kolumnę treścią, pamiętaj, aby umieścić wszystkie elementy treści w tej samej, pojedynczej kolumnie, jak pokazano poniżej.
Widok mobilny:
Tabele
Element Tabela jest idealny do dodawania informacji z wieloma wierszami i kolumnami, takich jak menu czy godziny otwarcia. Element Kolumna nie nadaje się do tego ze względu na sposób wyświetlania treści:
Jak pokazuje zrzut ekranu, użycie elementu Kolumna skutkuje listą dni, a następnie listą godzin, co jest mniej odpowiednie do prezentacji godzin otwarcia.
Dzięki elementowi Tabela godziny otwarcia będą wyświetlane zgodnie z zamierzeniem na wszystkich urządzeniach, w tym na komputerach:
oraz na urządzeniach mobilnych:
Biała przestrzeń
Aby stworzyć przestrzeń między kolumnami w widoku mobilnym, możesz użyć elementu Przestrzeń. Działa to tylko wtedy, gdy umieścisz element Przestrzeń pod każdą pojedynczą kolumną, a nie pod całym elementem Kolumna:
Tak to wygląda na komputerze:
Poniższy przykład pokazuje efekt, gdy element Przestrzeń jest umieszczony pod każdą pojedynczą kolumną.
Tak to wygląda na komputerze:
a tak wygląda na urządzeniu mobilnym z elementem Przestrzeń między wszystkimi kolumnami:
Wyrównanie kolumn
Jeśli używasz kolumn na swojej stronie, warto pamiętać o wyrównaniu w widoku mobilnym.
Częstym błędem jest wyrównywanie elementów w lewej kolumnie do lewej, elementów w środkowej kolumnie do środka, a elementów w prawej kolumnie do prawej. Wygląda to dobrze na komputerach i laptopach, ale nie na urządzeniach mobilnych.
Tak to wygląda na komputerze z wyrównaniem do lewej, do środka i do prawej:
a tak wygląda na urządzeniu mobilnym z wyrównaniem do lewej, do środka i do prawej:
Wszystkie elementy we wszystkich kolumnach muszą być wyśrodkowane, aby poprawnie wyświetlały się zarówno na komputerach, jak i na urządzeniach mobilnych.
Tak to wygląda na komputerze z wyrównaniem do środka, do środka, do środka:
a tak wygląda na urządzeniu mobilnym z wyrównaniem do środka, do środka, do środka:
✔ Wskazówka: Sprawdź nasz post na blogu po więcej wskazówek dotyczących optymalizacji strony pod kątem urządzeń mobilnych.