Czy zadałeś sobie pytanie: "Co to jest responsywny projekt strony internetowej?" Responsive web design to podejście, w którym projektant tworzy stronę internetową, która "reaguje na" lub zmienia rozmiar w zależności od typu urządzenia, przez które jest oglądany. Może to być nadwymiarowy monitor komputera stacjonarnego, laptop lub urządzenia z małymi ekranami, takimi jak smartfony i tablety.
Responsive Web design stał się niezbędnym narzędziem dla każdego, kto ma cyfrową obecność. Wraz z rozwojem smartfonów, tabletów i innych mobilnych urządzeń komputerowych coraz więcej osób korzysta z mniejszych ekranów do przeglądania stron internetowych.
$config[code] not foundTe witryny muszą również wziąć pod uwagę pierwszy indeks ogłoszony przez Google w kwietniu 2018 roku. Im więcej małych firm zwiększa swoją obecność na urządzeniach mobilnych, dlatego ich strona internetowa, strona handlu elektronicznego, strona Google Business, strony mediów społecznościowych i inne zasoby muszą być łatwo dostępne dla wszystkich pomysłowość.
Co to jest responsywny projekt strony?
Celem projektowania responsywnego jest posiadanie jednej witryny, ale z różnymi elementami, które reagują inaczej, gdy są oglądane na urządzeniach o różnych rozmiarach.
Weźmy tradycyjną "naprawioną" stronę internetową. Na przykład na komputerze stacjonarnym witryna może wyświetlać trzy kolumny. Ale kiedy przeglądasz ten sam układ na mniejszym tablecie, możesz wymusić przewijanie w poziomie, coś, czego użytkownicy nie lubią. Elementy mogą być ukryte lub zniekształcone. Wpływ ten komplikuje również fakt, że wiele tabletów można oglądać w orientacji pionowej lub odwrócić na bok w celu wyświetlenia widoku poziomego.
Na małym ekranie smartfona strony internetowe mogą być jeszcze trudniejsze do zobaczenia. Duże obrazy mogą "zepsuć" układ. Witryny mogą być powolne, aby ładować je na smartfonach, jeśli mają ciężką grafikę.
Jeśli jednak witryna korzysta z elastycznego projektu, wersja tabletu może automatycznie dostosować się do wyświetlania tylko dwóch kolumn. W ten sposób treść jest czytelna i łatwa w nawigacji. Na smartfonie treść może wyglądać jak pojedyncza kolumna, być może ułożona pionowo. Ewentualnie użytkownik może przesuwać palcem, aby wyświetlić inne kolumny. Obrazy będą zmieniać rozmiar zamiast zniekształcać układ lub zostać obcięte.
Chodzi o to, że dzięki responsywnemu projektowi strona dostosowuje się automatycznie na podstawie urządzenia, które widzi widz.
Jak działa responsywny projekt sieciowy?
Responsywne strony używają sieci płynów.Wszystkie elementy strony mają rozmiar proporcjonalny, a nie piksele. Więc jeśli masz trzy kolumny, nie powiedziałbyś dokładnie, jak szeroki powinien być, ale raczej jak szeroki powinien być w stosunku do innych kolumn. Kolumna 1 powinna zajmować połowę strony, kolumna 2 powinna zajmować 30%, a kolumna 3 powinna zajmować na przykład 20%.
Media, takie jak obrazy, również są skalowane względnie. W ten sposób obraz może pozostać w kolumnie lub względnym elemencie projektu.
Powiązane kwestie
Mysz v. Touch: Projektowanie na urządzenia mobilne wywołuje również problem myszy i dotyku. Na komputerach stacjonarnych użytkownik zwykle ma mysz do nawigacji i wybierania elementów. Na smartfonie lub tablecie użytkownik najczęściej używa palców i dotyka ekranu. To, co może wydawać się łatwe do wybrania za pomocą myszy, może być trudne do wybrania palcem w maleńkim miejscu na ekranie. Projektant stron internetowych musi wziąć pod uwagę "dotyk".
Szybkość grafiki i pobierania: Pojawia się również kwestia grafiki, reklam i prędkości pobierania. Na urządzeniach mobilnych może być rozsądniej wyświetlać mniej grafik niż widoków na komputer, aby witryna nie trwała wiecznie, aby załadować na smartfonie. Większe rozmiary reklam mogą wymagać wymiany na mniejsze reklamy.
Aplikacje i "wersje mobilne": W przeszłości mogłeś pomyśleć o stworzeniu aplikacji na swoją stronę - powiedzmy, że aplikacja na iPada lub na Androida. Lub masz wersję mobilną specjalnie dla BlackBerry.
Jednak przy tak wielu różnych urządzeniach coraz trudniej jest tworzyć aplikacje i różne wersje dla każdego urządzenia i platformy operacyjnej.
Dlaczego małe firmy muszą przejść na elastyczne projektowanie stron internetowych
Więcej osób korzysta z urządzeń mobilnych. Niedawne badanie Pew - 77% Amerykanów ma obecnie smartfony w 2018 r., Co stanowi zaledwie 35% w pierwszym badaniu własności intelektualnej Pew Research Center przeprowadzonym w 2011 r.
Sprawdź natężenie ruchu i możesz być zaskoczony, ilu gości dociera do Twojej witryny za pośrednictwem urządzeń mobilnych. (W Google Analytics wybierz "Odbiorcy" po lewej stronie, a następnie "Komórka", aby sprawdzić, jaki odsetek ruchu pochodzi z urządzeń mobilnych. Możesz nawet przejść do dołu, aby sprawdzić, które urządzenia wysyłają ruch.)
Responsywne szablony do projektowania są teraz dostępne do kupienia. Jeśli na przykład masz witrynę WordPress, możesz odwiedzić renomowaną galerię szablonów, taką jak ThemeForest, i wyszukać "responsywne motywy WordPress". Kup jeden za mniej niż 50 USD. Twój programista internetowy może następnie dostosować go do swojego logo i marki.
Uwaga edytora: tutaj, w Small Business Trends, pracujemy nad nowym responsywnym projektem. Czy nie powinieneś?
Zdjęcie za pośrednictwem Shutterstock
Więcej w: Content Marketing, Co to jest 95 komentarzy ▼
