wszyscy często słyszymy to słowo „responsive”w domenie projektowania stron internetowych. Ludzie bardzo polecają i go ga-ga na znaczenie korzystania z responsywnego projektu. Ale nowicjusze w dziedzinie profesjonalnego blogowania i webmasteringu często zajmują trochę czasu, aby zdobyć cały ten szum o tym, co jest responsywną stroną internetową i jak ją rozwinąć.
ludzie często tworzą motywy swoich stron internetowych w oparciu o plik obrazu (np. PSD). Podczas gdy wszystkie projekty stron internetowych zaczynają się jako obraz, należy bardzo uważać, aby ich projekt był zgodny z zasadami responsywności i był przyjazny dla urządzeń mobilnych. Przejdźmy do tematu i dowiedzmy się wszystkiego na ten temat.
cóż, responsywność strony internetowej odnosi się do jej zdolności do dostosowania wyświetlania w zależności od urządzenia, na którym jest widoczna. Dawno minęły czasy, kiedy większość ludzi używała komputerów stacjonarnych – teraz są tam wszelkiego rodzaju urządzenia. Komputery stacjonarne, laptopy, netbooki, tablety, mini tablety, czytniki e-booków, smartfony i nie tak inteligentne telefony! UFF! Zbyt wielu, by się tym nie przejmować!
wszystkie te urządzenia mają swoje własne rozmiary i rozdzielczości ekranu. „Sztywna” strona internetowa nie będzie w stanie dostosować się do (lub powiedzmy, reagować) różnych rozmiarów ekranu. Pojawienie się poziomego paska przewijania w przeglądarce jest jednym z najbardziej zauważalnych oznak, że strona nie reaguje.
natomiast strona z responsywnym motywem będzie w stanie dostosować się i upewni się, że treść jest łatwa do odczytania w dowolnym rozmiarze ekranu.
nie bardzo. Responsywny motyw dostosuje wyświetlanie w głównym celu, aby zawartość witryny mogła być używana przez odwiedzającego. Aby osiągnąć ten cel, strona internetowa może ukryć niektóre jej akcesoria (np. pasek boczny) i zmienić rozmiar innych komponentów (np. obrazy, czcionki itp.
łatwo jest wiedzieć, jak responsywny jest motyw Twojej witryny. Wystarczy otworzyć go na różnych rozmiarach monitorów komputerowych i ekranów telefonów komórkowych. Jeśli widzisz swoją stronę w porządku, a cała zawartość jest czytelna, Twoja strona jest responsywna. Jeśli nie masz innego rodzaju urządzeń do testowania swojej witryny, możesz również użyć testu online, aby uzyskać responsywność.
ogólna odpowiedź brzmi: tak, to jest bardzo ważne. Zanim jednak podejmiesz decyzję o metamorfozie swojej witryny, aby przekształcić ją w responsywną – powinieneś spojrzeć na dane o ruchu w sieci. Na podstawie tych danych spróbuj dowiedzieć się, ile ruchu Twoja witryna otrzymuje z urządzeń mobilnych. Zazwyczaj strony internetowe są przeznaczone do użytku na komputerze stacjonarnym / laptopie –ale jeśli uzyskujesz znaczny ruch z urządzeń takich jak tablety / telefony komórkowe –powinieneś zobaczyć, jak twoja strona wygląda na takich urządzeniach.
obecnie Azjatyckie strony internetowe otrzymują średnio 27% ruchu z urządzeń mobilnych. Odsetek ten byłby znacznie wyższy dla stron internetowych w obszarach takich jak Europa i Ameryka, ponieważ urządzenia mobilne są stosunkowo bardziej popularne.
zdziwisz się, że responsywność można łatwo osiągnąć używając tylko CSS. Obecne standardy CSS pozwalają na stylizację witryny na różne typy ekranu. Oznacza to, że możesz mieć oddzielne reguły CSS dla różnych rozmiarów ekranu. Na przykład:
@media screen and (max-width:320px) {
.primary-sidebar { display: none } / / ukryj pasek boczny, gdy rozmiar ekranu wynosi 320px lub mniej
}
@media screen and (min-width:1024px) {
body { font-size: 12px} / / Ustaw rozmiar czcionki dla rozmiarów ekranu większych niż 1024px
}
takie dostosowane reguły CSS będą kontrolować wygląd witryny w zależności od miejsca dostępnego na ekranie.
jeśli zdecydujesz się na responsywny projekt swojej strony internetowej lub bloga, możesz spodziewać się następujących zalet:
- ruch wzrośnie na twojej stronie, ponieważ użytkownicy urządzeń mobilnych będą mogli z niej korzystać i mogą zdecydować się na powrót po nowe informacje. Jeśli użytkownicy mobilni nie będą mogli korzystać z treści serwisu-nie wrócą!
- jeśli korzystasz z reklam na swojej stronie do zarabiania w Internecie –Twoje przychody mogą wzrosnąć, ponieważ responsywna strona internetowa będzie mogła ładnie wyświetlać reklamy również na urządzeniach mobilnych.
- nie będziesz musiał tworzyć różnych wersji swojej witryny lub bloga dla różnych platform. Pozwoli to zaoszczędzić czas na konserwację, jak również, ponieważ więcej wersji wymaga więcej czasu konserwacji.
- jeśli opracujesz więcej niż jedną wersję dla różnych typów urządzeń, grozi ci ryzyko indeksowania zduplikowanych adresów URL przez Google. Różne adresy URL wskazujące na tę samą zawartość nazywane są duplikatami adresów URL. Google kładzie dużą karę na duplikaty adresów URL, wierząc, że treść również jest duplikatem. Responsywny projekt strony chroni Cię przed taką karą.
- nie musisz się martwić o prawidłowe wykrywanie agentów, ponieważ ta sama strona internetowa będzie działać dla wszystkich agentów przeglądarki.
- udostępnianie adresów URL w serwisach społecznościowych stanie się łatwiejsze, ponieważ każda strona w Twojej witrynie będzie miała tylko jeden adres URL powiązany z nim.
nie ma istotnych wad responsywnego projektu, z wyjątkiem tego, że dodatkowe reguły CSS mogą zwiększyć rozmiar pliku CSS, a w rezultacie wydłuży się czas pobierania. Ale szybszy internet staje się dostępny na całym świecie-nie sądzę, że stanowi to prawdziwy problem.
w projektowaniu responsywnym różne obrazy nie są używane dla różnych rozmiarów ekranu. Zamiast tego ten sam obraz jest zmieniany przez CSS, aby zmieścił się na ekranie urządzenia. Tak więc urządzenia mobilne będą musiały również pobierać te same obrazy o wysokiej rozdzielczości, które są obsługiwane przez połączenia z komputerem.
teraz wiemy, że projekt responsywny może nieco obciążyć mobilne połączenie internetowe, ważne jest, aby móc przetestować, jak szybko działa twój obecny (responsywny lub nie responsywny) projekt. Najlepszym narzędziem online do przetestowania tego jest PageSpeed od Google. To narzędzie może oceniać Twoją witrynę zarówno na urządzeniach stacjonarnych, jak i mobilnych.
większość witryn Google jest teraz responsywna. Na przykład witryna Chromebook korzysta z responsywnego projektu. Ale Google jest pionierską firmą wszystkiego, co związane z Internetem. Ponieważ coraz więcej innych firm dostrzega znaczenie responsywnego projektowania, strony internetowe przechodzą na ten nowy paradygmat. Spójrz na strony sieci restauracji Wendy ’ s, firmy zajmującej się marketingiem przychodzącym HubSpot i gazety Boston Globe, aby uzyskać inspirację.
Tak, Istnieje wiele dużych stron internetowych,które jeszcze nie przyjęły responsywnego projektowania. Przykłady obejmują CNN i BBC. Są to ogromne strony internetowe, a całkowite przeprojektowanie w celu włączenia responsywności może wymagać znacznych inwestycji. To może być powód, dla którego te domy mediowe jeszcze nie reagują.
nie, to nie jest naprawdę drogie. Jeśli jesteś właścicielem strony internetowej / bloga opartego na WordPress, dostępnych jest wiele responsywnych motywów. Twentythirteen) jest również zaprojektowany tak, aby był responsywny. Większość darmowych motywów oferowanych przez WordPress i Blogger jest responsywna. Ale jeśli używasz motywu innej firmy-musisz sprawdzić jego responsywność.