Responsywna strona internetowa
Responsywna strona internetowa. Praktyczne informacje dla sprzedawców Shopify.
Co to jest strona responsive?
Responsywna strona internetowa obsługuje ten sam HTML do każdego urządzenia i adaptuje układ z sieciami płynowymi, skalowalnymi obrazami i zapytaniami mediów CSS. Zamiast oddzielnej strony mobilnej (m- dot), zawartość przepływa więc kolumny, czcionki i nawigacja dostosować do szerokości ekranu. Fundamentem jest <meta name="viewport" content="width=device-width, initial-scale=1"> na stronie <head> - bez niego mobilne przeglądarki renderują stronę na pulpicie i ignorują zapytania mediów.
Dlaczego responsywna strona internetowa ma znaczenie?
Google używa mobile- pierwszego indeksowania, co oznacza, że mobilna wersja strony jest tym, co jest pełzane, indeksowane i używane do rankingu. Responsywna konfiguracja z jednym URL i jednym HTML jest również zalecane podejście Google, ponieważ łatwiej jest utrzymać i uniknąć błędów SEO, które oddzielają strony mobilne często wprowadzać. Dla sklepu internetowego jest to również czysta konwersja: większość ruchu pochodzi z telefonu komórkowego, a ściśnięta strona produktu lub czek, który nie pasuje do sprzedaży kosztów ekranu bezpośrednio.
Przypadki wspólnego stosowania
- Strona produktu na komórce. Upewnij się, że obrazy, cena i przycisk “Dodaj do koszyka” są do odczytu i tappable bez powiększenia.
- Wymiary zastrzeżone. Ustaw szerokość / wysokość lub proporcje na obrazach i banerach, aby nie przesuwać treści i zranić CLS.
- Priorytetyzacja Obszar widoczny bez przewijania. Najważniejsza zawartość powinna być widoczna na małych ekranach bez przewijania.
- Testowanie urządzeń krzyżowych. Sprawdź motyw telefonu, tabletu i pulpitu przed każdą większą zmianą.
Shopify perspektywa
Shopify Online Store 2.0 motywy jak Dawn reagują i mobile- pierwszy z pola, ale dostosowania i aplikacje mogą to złamać. Popupy, lepkie bary i skrypty trzeciej partii są najczęstszymi przestępcami na komórce. Przetestuj swoje zmiany w widoku urządzenia edytora motywu i na prawdziwym telefonie, i oglądaj Core Web Vitals w Search Console, zamiast zakładając, że Motyw Zajmuje się wszystkim automatycznie.