ujawnienie: „ten artykuł jest osobistą opinią badań opartą na moim prawie 20-letnim doświadczeniu. Na tej stronie nie ma reklam osób trzecich ani linków do zarabiania. Linki zewnętrzne do stron osób trzecich są przeze mnie moderowane. Zastrzeżenie. „Shaun Anderson, Hobo

nie ma jednego najlepszego rozmiaru ekranu do zaprojektowania. Strony internetowe powinny zmieniać się szybko i responsywnie we wszystkich rozdzielczościach ekranu w różnych przeglądarkach i platformach., Dostępny. Przyjazny dla urządzeń mobilnych. Najpierw zaprojektuj dla swoich odbiorców. Projekt od 360×640 do 1920×1080.

  • Projektowanie dla wyświetlaczy stacjonarnych od 1024×768 do 1920×1080
  • Projektowanie dla wyświetlaczy mobilnych od 360×640 do 414×896
  • projektowanie dla wyświetlaczy tabletowych od 601×962 do 1280×800
  • Sprawdź Google Analytics i zoptymalizuj pod kątem najpopularniejszych rozmiarów rozdzielczości dla odbiorców docelowych
  • nie projektuj dla jednego rozmiaru monitora lub rozdzielczości ekranu. Rozmiary ekranu i stan okna przeglądarki różnią się w zależności od odwiedzających.
  • projekt powinien być responsywny i szybki., Użyj układu płynnego lub responsywnego, który zmienia się na rozmiar okna bieżącego użytkownika.
  • Monitor Google Search Console mobile-friendly I usability alarmy

powinien nadal wyglądać dobrze i działać dobrze we wszystkich rozmiarach, dlatego i *używane do* polecam bardzo dostępny płynny układ za pomocą szerokości procentowych do sterowania układem. Teraz rekomendacja jest responsywnym szablonem strony.,

trzy główne kryteria optymalizacji układu strony dla określonego rozmiaru ekranu to:

  • początkowa widoczność strony: czy wszystkie kluczowe informacje są widoczne nad fałdą, aby użytkownicy mogli je zobaczyć bez przewijania? Jest to kompromis między liczbą wyświetlanych przedmiotów a ilością szczegółów wyświetlanych dla każdego przedmiotu.
  • czytelność strony: jak łatwo jest odczytać tekst w różnych kolumnach, biorąc pod uwagę ich przydzieloną szerokość?
  • estetyka strony internetowej: jak dobrze wygląda Twoja strona, gdy elementy są w odpowiednim rozmiarze i miejscu dla tego rozmiaru ekranu?, Czy wszystkie elementy pasują poprawnie — to znaczy są podpisy bezpośrednio obok zdjęć, itp.?

wytyczne dotyczące użyteczności zalecają również uwzględnienie wszystkich trzech kryteriów w pełnym zakresie rozmiarów,. Sprawdź w oknie przeglądarki rozdzielczość ekranu od 360×640 do 1920×1080.

Twoja strona powinna uzyskać wysokie wyniki we wszystkich kryteriach w całym zakresie rozdzielczości.

Twoja strona powinna również działać w jeszcze mniejszych i większych rozmiarach, choć takie skrajności są mniej ważne.,

chociaż tacy użytkownicy z pewnością powinni mieć dostęp do twojej witryny, dając im mniej niż świetny projekt jest czasami akceptowalnym kompromisem.,

Top Ten Most Common screen resolution

analiza odwiedzin prawie pół miliona odwiedzających w ciągu pierwszych 6 miesięcy 2020 roku:

responsywny szablon strony jest dobrym wyborem

cytat: „Responsive Web Design: obsługuje ten sam kod HTML na tym samym adresie URL niezależnie od urządzenia użytkownika (na przykład komputer, tablet, telefon komórkowy, przeglądarka bez wizualizacji), ale może renderować wyświetlacz w różny sposób w zależności od rozmiaru ekranu. Google zaleca responsywne projektowanie stron internetowych, ponieważ jest to najprostszy wzorzec projektowy do wdrożenia i utrzymania.,”Google Developer Guides, 2020

w dzisiejszym świecie Wiele osób korzysta z urządzeń przenośnych (tabletów i smartfonów) do przeglądania stron internetowych, a responsive Web design (RWD) pojawił się jako bardzo prawdopodobne rozwiązanie (jest nadal dyskutowane przez miłośników) do wyzwań związanych z rozmiarem ekranu.

ta metoda odchodzi od korzystania ze stron internetowych o stałej szerokości i zamiast tego używa zapytań o Media w arkuszach stylów CSS do tworzenia strony internetowej, która reaguje wielkością na różne widoki urządzeń przenośnych i mniejszych ekranów, których ludzie używają.,

więc niezależnie od urządzenia, którego dana osoba może używać do wyświetlania Twojej strony, możesz dać jej najpełniejsze możliwe doświadczenie.

spis treści

Google preferuje strony przyjazne dla urządzeń mobilnych

Google dyktuje odpływ i przepływ handlu online, a oni po prostu dyktują, że musisz zaprojektować satysfakcjonujące wrażenia użytkownika na wielu urządzeniach, jeśli chcesz oczekiwać wysokiej rangi dla konkurencyjnych słów kluczowych w Google.

cytat: „Google używa dwóch różnych crawlerów do indeksowania stron internetowych: mobilnego crawlera i desktopowego crawlera., Każdy typ robota symuluje Użytkownika odwiedzającego Twoją stronę za pomocą urządzenia tego typu. Google używa jednego typu robota (mobilnego lub stacjonarnego) jako głównego robota dla Twojej witryny. Wszystkie strony w witrynie, które są indeksowane przez Google, są indeksowane za pomocą głównego robota. Podstawowym crawlerem dla wszystkich nowych stron internetowych jest mobilny crawler. Ponadto Google rekrawls kilka stron w witrynie z innego typu crawler (mobilny lub stacjonarny). Nazywa się to wtórnym indeksowaniem i ma na celu sprawdzenie, jak dobrze Twoja witryna działa z innym typem urządzenia.,”Google Webmaster Guidelines, 2020

od kwietnia 21, 2015, globalnie, jak przyjazna dla urządzeń mobilnych strona wpłynęła na wydajność rankingu stron internetowych na różnych urządzeniach.

Jeśli tworzysz strony internetowe dla małych firm – będziesz wiedział, że chcą strony, która będzie dobrze działać w Google organic listings – wiesz, że są zainteresowani optymalizacją dla wyszukiwarek:

cytuję: „mam 20 lat doświadczenia w profesjonalnym SEO. Ten samouczek SEO to moja kolekcja porad i najlepszych praktyk SEO, których używam do pozycjonowania stron w Google.,”Shaun Anderson, Hobo 2020

SEO opiera się teraz częściowo na dobrej stronie UX, Jak to określa Google, przynajmniej dla użytkowników mobilnych.

cytat: „z mobilnych wyszukiwań teraz ponad wyszukiwania pulpitu, ważne jest, aby Twoja strona była przyjazna dla urządzeń mobilnych. Googlebot używa teraz mobilnego robota jako domyślnego robota dla stron internetowych.”Google Webmaster Guidelines, 2020

w tej chwili – to zasadniczo teraz oznacza responsywny projekt strony internetowej i przyjazny dla urządzeń mobilnych, zwłaszcza z Google „czyni nasz indeks mobile-first”.,

statystyki rozdzielczości ekranu pulpitu na całym świecie maj 2019 – maj 2020

w celach informacyjnych poniżej znajduje się lista aktualnych najwyższych rozdzielczości ekranu na całym świecie zarejestrowanych niedawno (2020):

najpopularniejsze rozmiary rozdzielczości ekranu pulpitu na całym świecie

  • 1366×768 – 23.49%
  • 1920×1080 – 19,91%
  • 1536×864 – 8,65%
  • 1440×900 – 7,38%
  • 1280×720 – 4,89%
  • 1600×900 – 4,01%
  • 1280×800 – 3.,33%

statystyki rozdzielczości ekranu mobilnego na całym świecie maj 2019 – maj 2020

najpopularniejsze rozmiary rozdzielczości ekranu mobilnego na całym świecie

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

statystyki rozdzielczości ekranu tabletu na całym świecie maj 2019 – maj 2020

najpopularniejsze rozmiary rozdzielczości ekranu tabletu na świecie

  • 768×1024 – 51,98%
  • 1280×800 – 7,11%
  • 800×1280 – 5.,34%
  • 601×962 – 4.47%
  • 600×1024 – 2.85%
  • 1024×1366 – 1.96%

statystyki rozdzielczości ekranu pulpitu w USA maj 2019 – maj 2020

najlepsze rozdzielczości ekranu w USA (2020)

iv

  • 1920×1080 – 19.15%
  • 1366×768 – 14.91%
  • 1440×900 – 9.59%
  • 1536×864 – 7.7%
  • 1280×720 – 4,89%
  • 1600×900 – 4,28%
  • 1280×800 – 3.,92%

    • statystyki rozdzielczości ekranu mobilnego w USA maj 2019 – maj 2020

    najpopularniejszy rozmiar rozdzielczości ekranu mobilnego w Stanach Zjednoczonych Ameryki

    • 414×816 – 17.89%
    • 375×667 – 14.2%
    • 375×812 – 11,97%
    • 360×640 – 8,55%
    • 414×736 – 8,54%
    • 412×846 – 4,7%
    • 360×740 – 4,39%

    statystyki rozdzielczości ekranu tabletu w USA maj 2019 – maj 2020

    najpopularniejszy rozmiar rozdzielczości ekranu tabletu w Stanach Zjednoczonych Ameryki

    • 768×1024 – 54.,68%
    • 800×1280 – 5.75%
    • 1280×800 – 5.73%
    • 601×962 – 5.41%
    • 1024×1366 – 3.06%
    • 600×1024 -2.57%

    statystyki rozdzielczości ekranu pulpitu w 1920×1080 – 20.62%

  • 1366×768 – 17.32%
  • 1366×768 – 17.32%
  • 1366×768 – 17.32%
  • 1440×900 – 11,65%
  • 1536×864 – 8,38%
  • 1280 × 720 – 5,2%
  • 1280 × 800-4.,73%

    • statystyki rozdzielczości ekranu mobilnego w Wielkiej Brytanii maj 2019 – maj 2020

    najpopularniejszy rozmiar rozdzielczości ekranu mobilnego w Wielkiej Brytanii

    • 375×667 – 16.66%
    • 414×816 – 14.11%
    • 360×640 – 9.95%
    • 375×812 – 8.55%
    • 360×740 – 5.67%
    • 360×780 – 5.39%
    • 414×736 – 4.75%

    statystyki rozdzielczości ekranu tabletu w Wielkiej Brytanii maj 2019 – maj 2020

    najpopularniejsze rozmiary rozdzielczości ekranu tabletu w Wielkiej Brytanii

    • 768×1024 – 58.,31%
    • 1280×800 – 6.92%
    • 800×1280 – 6.02%
    • 601×962 – 3.68%
    • 600×1024 – 3.26%
    • 1024×1366 – 1.71%

    rynek komputerów stacjonarnych vs mobilnych vs tabletów udział na całym świecie

    pulpit vs mobile vs tablet udział w rynku na całym świecie

    1. mobile – 50.48%
    2. desktop – 46.51%
    3. tablet – 3.0%

    *uwaga – powyższe statystyki pochodzą z jednego (choć wiarygodnego) źródła, więc mogą być przekrzywione w sposób możemy nie wiedzieć. Wykresy dostarczane przez http://statcounter.com/.,

    jak zaprojektować stronę, która wygląda tak samo w każdej przeglądarce & rozdzielczość?

    nie możesz.

    nie jest możliwe zaprojektowanie strony internetowej tak, aby wyglądała tak samo w każdej przeglądarce, platformie i rozdzielczości ekranu, więc unikaj prób.

    możesz zdecydować się na płynny układ bez tabel dla swojego projektu, z % szerokościami, które rozszerzają się i kurczą, aby pasowały do ustawień przeglądarki odwiedzających lub możesz rozważyć rozwiązanie responsywne, które osiągnie to samo.,

    Google faworyzuje responsywne projekty, co jest dobrą wiadomością dla tych, którzy go przyjęli:

    cytat: „strony, które wykorzystują responsywne projektowanie stron internetowych i poprawnie implementują dynamiczne serwowanie (które zawiera całą zawartość pulpitu i znaczniki), generalnie nie muszą nic robić.”Google listopad 2017

    MOBILE jest na wzrost – więc jeśli rozwój nowej strony internetowej – musisz myśleć o tym, jak mobilna strona jest naprawdę przyjazny swojej stronie od samego początku.

    staram się, aby rzeczy były proste, gdy faktycznie koduję rzeczy.,

    nie będziesz – nie możesz – zadowolić wszystkich – a pytanie, który Rozmiar witryny jest najlepszy, jest nadal gorącym tematem do debaty przez projektantów o większej użyteczności i wiedzy UX niż ja.

    to, co wiem z doświadczenia, to to, że kluczowe znaczenie ma identyfikacja odbiorców i urządzeń, z których korzystają, i zbudowanie witryny (w całości), aby pasowała do tej grupy odbiorców.

    a ta publiczność to GOOGLEBOT.

    czy Twoja strona mobilna przekierowuje na inny URL & Wersja Twojej strony?

    Cóż, to nie jest idealne. Nigdy tak nie było.,

    dawno temu – niektórzy ludzie używali tekstowych wersji strony internetowej do tworzenia treści dla użytkowników/przeglądarek, które nie obsługują elementów ich stron internetowych-w (Zwykle próżnej) próbie zwiększenia dostępności ich treści.

    W3C nawet go polecić myślę, że jeśli Wszystko inne nie powiodło się:

    strona tekstowa, z równoważnymi informacjami lub funkcjonalnością, powinna być dostarczona, aby Strona internetowa była zgodna z postanowieniami tej części, gdy zgodności nie można osiągnąć w żaden inny sposób., Zawartość stron tylko tekstowych jest aktualizowana za każdym razem, gdy zmienia się Strona główna. SECTION 508

    zawsze idealnie było dostarczyć jeden adres URL odwiedzającemu w celach dostępności, i nie ma różnicy w dostarczaniu treści mobilnych lub smartfonów, jeśli myślisz o stworzeniu „mobilnej” wersji witryny. To, oczywiście, może być jeszcze ważniejsze, jeśli Google przenosi się do indeksu MOBILE FIRST.,

    Google może w niedalekiej przyszłości ocenić Cię przede wszystkim na urządzeniach mobilnych – więc wszyscy naprawdę musimy być świadomi dużych zmian, które możemy wkrótce zobaczyć w SERPach Google.

    gdy Google jest „odwiedzającym”, Zwykle jeszcze ważniejsze jest dostarczanie tylko jednego adresu URL ze względu na kanoniczne wyzwania dla wyszukiwarek – i tak było przed implementacją kanonicznego elementu link jakiś czas temu.

    więc idealną sytuacją jest dostarczanie jednego adresu URL przez cały czas.,

    Jeśli masz zawartość „smartfona” (którą widzimy jako normalną zawartość internetową, ponieważ jest to zazwyczaj normalna strona HTML, po prostu poprawiona w układzie dla mniejszych wyświetlaczy) możesz użyć rel=canonical, aby wskazać wersję na komputer. Pomaga nam to skupić się na wersji desktopowej dla wyszukiwania w Internecie. Gdy użytkownicy odwiedzają tę wersję stacjonarną za pomocą smartfona, możesz przekierować ich do wersji mobilnej. Działa to niezależnie od struktury adresu URL, więc nie musisz używać subdomen / podkatalogów dla witryn mobilnych na smartfony., Jeszcze lepiej jest jednak używać tych samych adresów URL i wyświetlać odpowiednią wersję treści bez przekierowania John Mueller, Google

    ignorowanie zaleceń Google często nie jest mądrym posunięciem

    cytat: aby podsumować, obecnie nasze indeksowanie, indeksowanie, systemy rankingowe zazwyczaj sprawdzają zawartość strony w wersji stacjonarnej, co może powodować problemy dla wyszukiwarek mobilnych, gdy ta wersja znacznie różni się od wersji mobilnej., Indeksowanie na urządzeniach mobilnych oznacza, że będziemy używać mobilnej wersji treści do indeksowania i rankingu, aby lepiej pomóc naszym użytkownikom – głównie mobilnym – znaleźć to, czego szukają. Webmasterzy zobaczą znacznie zwiększone indeksowanie przez smartfona Googlebota, a fragmenty w wynikach, a także zawartość na stronach pamięci podręcznej Google, będą pochodzić z mobilnej wersji stron., Google Listopad 2017

    Google oferuje następujące wskazówki, aby sprawdzić, czy Twoja witryna jest przygotowana do indeksu mobilnego, ale zasadniczo, jeśli używasz responsywnego szablonu do projektowania stron internetowych, powinieneś mieć minimalne problemy z tą zmianą:

    • upewnij się, że mobilna wersja witryny ma również ważne, wysokiej jakości jakość treści. Obejmuje to tekst ,obrazy (z atrybutami alt) i filmy-w zwykłych formatach indeksowanych i indeksowanych.,

    • dane strukturalne są ważne dla funkcji indeksowania i wyszukiwania, które kochają użytkownicy: powinny być zarówno w wersji mobilnej, jak i stacjonarnej witryny. Upewnij się, że adresy URL w danych strukturalnych są aktualizowane do wersji mobilnej na stronach mobilnych.

    • metadane powinny być obecne w obu wersjach strony. Zawiera wskazówki dotyczące treści na stronie do indeksowania i serwowania., Na przykład upewnij się, że tytuły i meta opisy są równoważne dla obu wersji wszystkich stron w witrynie.

    • żadne zmiany nie są konieczne do łączenia się z oddzielnymi adresami mobilnymi (witryny m.-dot). W przypadku witryn używających oddzielnych adresów URL, zachowaj istniejące łącze rel=canonical i link rel=Alternatywne elementy między tymi wersjami.

    • sprawdź linki hreflang na osobnych adresach mobilnych., Podczas używania elementów link rel=hreflang do internacjonalizacji, łącz się osobno między URL-ami mobilnymi i stacjonarnymi. Hreflang Twoich mobilnych adresów URL powinien wskazywać inne wersje językowe/regionalne na innych mobilnych adresach URL i podobnie łączyć pulpit z innymi adresami URL pulpitu za pomocą elementów łącza hreflang.

    • upewnij się, że serwery hostujące witrynę mają wystarczającą pojemność, aby obsłużyć potencjalnie zwiększoną szybkość indeksowania., Nie dotyczy to witryn, które korzystają z responsywnego projektowania stron internetowych i dynamicznego serwowania, tylko witryn, w których Wersja mobilna znajduje się na oddzielnym hoście, na przykład m.example.com.

    użytkownicy oczekują przewijania strony w dół

    jak sugeruje pierwsze kryterium, przewijanie jest zawsze kluczową kwestią. Użytkownicy na ogół nie lubili przewijać, jeśli nie muszą – chociaż z biegiem lat to się zmieniło.

    tak więc, podczas projektowania, należy wziąć pod uwagę, ile użytkownicy mogą zobaczyć, czy przewijają tylko Pełny ekran lub dwa., Więcej niż pięć ekranów może wskazywać na to, że na stronie może być zbyt dużo kopii. Oczywiście jest to zrównoważone z poglądem, że niektóre artykuły mają być szczegółowymi informacjami, a użytkownicy spodziewaliby się poczekać trochę dłużej, aby wyświetlić niektóre treści i typy treści strony.

    zarówno przewijanie, jak i początkowa widoczność oczywiście zależą od rozmiaru ekranu: większe ekrany pokazują więcej treści nad fałdą i wymagają mniej przewijania.

    czy zmiana na responsywną stronę mobilną spowoduje dużo większy ruch z Google?

    niekoniecznie, ale może.,

    jak wiele rzeczy do zrobienia z optymalizacją Google – posiadanie strony przyjaznej dla urządzeń mobilnych jest mniej więcej po to, aby zapewnić Ci utrzymanie ruchu, który już otrzymujesz, niekoniecznie dając Ci więcej wolnego ruchu z Google.

    Jeśli nie otrzymujesz już dużego ruchu od odwiedzających mobilnych – nie jestem pewien, czy ta aktualizacja od Google będzie miała zauważalny wpływ na poziom ruchu (przynajmniej w analityce) na początku – ale z czasem – prawdopodobnie będzie to niezwykle ważne wyzwanie, aby nawigować.,

    poprzeczka jakości jest podnoszona – ponownie-przez Google i jego użytkowników – i jeśli chcesz konkurować w coraz bardziej konkurencyjnych SERP organicznych jest to kolejna przeszkoda dla małych firm, aby przejść.

    w dłuższej perspektywie-ta mobilna konwersja może być dobra tylko dla Twoich użytkowników – ale w krótkiej perspektywie-interesujące będzie zobaczyć, jaki wpływ ma to na współczynniki konwersji małych firm – ponieważ współczynniki konwersji za pośrednictwem telefonu komórkowego są często mniejsze niż na komputerze.,

    Google powiedział, że ten przyjazny dla urządzeń mobilnych algorytm będzie miał większy wpływ na SERP niż algorytmy Google Penguin i Google Panda-i dowiemy się więcej w miarę upływu czasu.

    jak Sprawdzić ważne problemy z mobilną użytecznością w witrynie

    Google Search Console

    powinieneś być w stanie śledzić błędy mobilne w Google Search Console (AKA Google Webmaster Tools) i widzieć błędy znikają z czasem, jeśli witryna jest poprawnie skonfigurowana.,”>

    Part 1 – PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability

    Part 2 – Viewports, zoom and plugins

    Part 3 – Tap targets, margins and font sizes

    część 4 – przekierowania

    programiści powinni znaleźć mój drugi ostatni post przydatny teraz, gdy Szybkość witryny jest czynnikiem rankingowym w Google:

    cytuj: „mobilna wersja strony internetowej powinna ładować się w czasie poniżej 3 sekund i im szybciej, tym lepiej., Bardzo powolna strona może być negatywnym czynnikiem rankingowym (potwierdzonym przez Google). Nie ma ustawionego progu ani wyniku prędkości, aby Twoja strona była jak najszybciej.”Shaun Anderson, Hobo 2020

    Disclaimer

    Disclaimer: „chociaż dołożyłem wszelkich starań, aby zapewnić, że informacje, które podałem, są poprawne, nie jest to rada.; Nie mogę ponosić żadnej odpowiedzialności za jakiekolwiek błędy lub pominięcia. Autor nie ręczy za strony osób trzecich lub usługi osób trzecich. Odwiedzaj witryny stron trzecich na własne ryzyko., Nie jestem bezpośrednio partnerem Google ani żadnej innej strony trzeciej. Ta strona używa plików cookie tylko do analizy i podstawowych funkcji strony internetowej. Ten artykuł nie stanowi porady prawnej. Autor nie ponosi żadnej odpowiedzialności, która może wyniknąć z dostępu do danych prezentowanych na tej stronie. Linki do stron wewnętrznych promują moje własne treści i usługi.”Shaun Anderson, Hobo