od 2020 roku na świecie jest 3,5 miliarda użytkowników smartfonów. To 45% światowej populacji. W 2019 roku ludzie uzyskali dostęp do Internetu za pomocą ponad 9000 różnych urządzeń. Każdy użytkownik oczekuje, że każda strona, do której wchodzi, będzie idealnie renderowana na jego urządzeniu mobilnym. Oznacza to, że twórcy witryn muszą projektować strony internetowe, które są wyświetlane na wielu ekranach na całym świecie.
innymi słowy, potrzebują responsywnego projektu.,
ale jak każdy projektant wie, wykonanie responsywnego projektu musi zacząć od Poznania, dla których rozmiarów ekranu zaprojektować. Ten artykuł bada to pytanie i omawia najlepsze rozmiary krzyku dla responsywnego projektowania.
co to jest Responsive Design?
Responsive web design odnosi się do strategii projektowania, która tworzy strony internetowe, które działają dobrze na urządzeniach mobilnych, tabletach i urządzeniach stacjonarnych. Strony bez responsywnego projektowania ryzykują zrażenie znacznej liczby użytkowników – 80% użytkowników twierdzi, że odrzuci strony, które nie działają dobrze na ich urządzeniu.,
dodatkowo Google traktuje „przyjazność dla urządzeń mobilnych” jako parametr rankingu. Cytując Google Webmaster Central Blog,
„począwszy od 21 kwietnia (2015), będziemy rozszerzać nasze wykorzystanie przyjazności dla urządzeń mobilnych jako sygnału rankingowego. Zmiana ta wpłynie na wyszukiwanie mobilne we wszystkich językach na całym świecie i będzie miała znaczący wpływ na nasze wyniki wyszukiwania. W związku z tym użytkownikom łatwiej będzie uzyskać odpowiednie, wysokiej jakości wyniki wyszukiwania, które są zoptymalizowane pod kątem ich urządzeń.”
Jak więc znaleźć idealne responsywne rozmiary ekranu?,
uwaga: aby zrozumieć, dlaczego responsywny projekt jest integralną częścią sukcesu strony internetowej, trzeba zrozumieć ogromną i stale rosnącą naturę fragmentacji urządzeń. Pobierz nasz e-Book na temat fragmentacji urządzeń, aby uzyskać najnowsze informacje na temat tego zjawiska.,
źródło obrazu
zgodnie ze ogólnoświatowymi statystykami rozdzielczości ekranu (Listopad 2018 – listopad 2019), najczęściej używanymi rozdzielczościami są:
Darmowy Test odpowiedzi na powszechnie używane rozdzielczości
Wypróbuj testowanie responsywności witryny na rzeczywistych urządzeniach.
oczywiście nacisk na przyjazność dla urządzeń mobilnych nie oznacza rezygnacji z urządzeń stacjonarnych. Jak pokazuje poniższy wykres, urządzenia stacjonarne nadal stanowią sporą część korzystania z Internetu.,
Image Source
- Mobile – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
zgodnie z dokumentacją firmy Microsoft,
z ogromną liczbą docelowych urządzeń i rozmiarami ekranu w ekosystemie Windows 10, zamiast optymalizować interfejs użytkownika dla każdego urządzenia, zalecamy zaprojektowanie kilku kategorii szerokości klawiszy (zwanych również „punktami przerwania”):
- Małe (mniejsze niż 640px)
- Średnie (od 641px do 1007px)
- Duże (mniejsze niż 640px) 1008px i większe)
pomimo tych informacji, Pamiętaj, że nie ma standardowego rozmiaru ekranu dla projektowania stron internetowych., W zależności od charakteru strony internetowej użytkownicy mogą korzystać z niektórych urządzeń, które nie oferują rozmiarów i rozdzielczości ekranu wymienionych powyżej. Aby zidentyfikować odpowiednie rozmiary ekranu do projektowania stron internetowych, zainwestuj w analitykę. Dowiedz się, z czego najczęściej korzystają Twoi odbiorcy docelowi. Jeśli te urządzenia nie są zgodne z wyżej wymienioną rozdzielczością, włącz je do miksu.,
1-Click Access to Responsive Checker Tool
Best Practices for Implementing Responsive Design
o wiele łatwiej jest zaprojektować stronę internetową o wielu rozmiarach ekranu zgodnie z następującymi wytycznymi:
- Poznaj swoje punkty przerwania: w projektowaniu responsywnym punkt przerwania jest „punktem”, w którym zawartość i projekt strony internetowej będą dostosowywane w określony sposób, aby zapewnić jak najlepsze wrażenia użytkownika. Aby strona była responsywna, projektanci muszą dodać punkt przerwania, gdy zawartość wygląda na nieprawidłową., W zależności od liczby urządzeń, do których obiekt jest wyrównywany, należy ustawić wiele punktów przerwania, aby zapewnić jego responsywność. Zapoznaj się z tym artykułem na temat responsywnych punktów przerwania, aby dowiedzieć się więcej o nich i ich skuteczności.
- tworzenie projektów płynnych: projekt płynny odnosi się do układu projektu, który może się przesuwać (rozszerzać i kurczyć), aby pasował do portu widoku urządzenia, na którym jest uruchomiony. Stały układ projektu będzie niepożądanie zniekształcał każdy widok, do którego nie są wyrównane., Pracuj nad układami projektowymi za pomocą jednostek % oraz maksymalnych szerokości, aby upewnić się, że układ pasuje do portów widokowych urządzeń mobilnych bez stawania się zbyt szerokim na portach widokowych urządzeń stacjonarnych.
- zmniejsz tarcie: oznacza to, że konstrukcja musi być łatwa w użyciu na wielu urządzeniach. Responsywny projekt obejmuje nie tylko to, jak wygląda strona internetowa, ale także to, jak działa pod względem dostępności i użyteczności. Skup się zwłaszcza na tarciu na małym ekranie, ponieważ wraz ze zmniejszaniem się rozmiarów ekranu elementy sieci Web mają mniej miejsca na renderowanie i stają się bardziej podatne na zniekształcenia i zniekształcenia.,
- projektowanie Mobile-First: ponieważ tarcie występuje częściej na mniejszych ekranach, projektowanie z podejściem mobile-first. Trudniej jest zawęzić układ pulpitu dla mobilnego viewportu, podczas gdy Robienie odwrotnej strony jest łatwiejsze. Projektując mobile-first, projektant uwzględnia to, co jest absolutnie niezbędne do zapewnienia optymalnego doświadczenia użytkownika.,
oto kilka sposobów, aby przejść do projektowania mobilnego najpierw:
- Priorytetyzuj ważne opcje menu
- Usuń wszystkie rozpraszacze wizualne
- zoptymalizuj Projekt pod kątem łatwości stukania
- wyeliminuj niepotrzebne formularze i pola informacji
- Wyróżnij główny CTA
- w widocznym miejscu oferuj funkcje wyszukiwania i filtrowania
- Więcej funkcji, mniej pisania: oczywiście pisanie jest trudniejsze na urządzeniach mobilnych niż na urządzeniach stacjonarnych. Dlatego warto zminimalizować potrzebę pisania na mobilnych wersjach stron internetowych., Zastąp pisanie świadomie wykorzystując funkcje urządzenia, takie jak GPS, odczyt kodu QR, identyfikator biometryczny i tym podobne. Ułatw użytkownikom udostępnianie, wysyłanie e-maili lub dzwonienie na odpowiednie numery, umieszczając linki uruchamiające niezbędne funkcje. Należy pamiętać, że najlepszy responsywny projekt polega na uproszczeniu i wyeliminowaniu niewygodnych interakcji mobilnych.
- Test, test, test: gdy programista lub projektant zna najlepsze rozmiary ekranu dla responsywnego projektu, wykonuje pracę i tworzy responsywną stronę internetową., Aby jednak upewnić się, że strona internetowa faktycznie renderuje tak, jak jest przeznaczona na urządzeniach, dla których została zbudowana, należy ją dokładnie przetestować. Łatwym sposobem na to jest użycie responsywnego kontrolera projektu. Zamiast uruchamiać witrynę za pośrednictwem poszczególnych urządzeń z różnymi widokami, wprowadź adres URL do kontrolera i zobacz, jak wygląda na różnych najnowszych urządzeniach w różnej, często używanej rozdzielczości urządzenia. Kontroler połączony powyżej oferuje responsywne sprawdzanie najnowszych urządzeń mobilnych, takich jak iPhone X, Galaxy Note 10, iPhone 8 Plus i inne.,
chociaż projekt responsywny może wydawać się trudny do wykonania, informacje zawarte w tym artykule mają na celu uproszczenie tego procesu dla programistów i projektantów. Robiąc to, co opisano powyżej, znacznie łatwiej jest tworzyć strony internetowe, które zadowolą odbiorców, niezależnie od urządzenia, z którego korzystają, aby uzyskać dostęp do tej strony.
Wypróbuj za darmo Responsive Checker