Jak ważne jest elastyczne projektowanie stron?

29

Słyszałem ostatnio różne opinie na temat zalet i wad korzystania z responsywnego projektowania stron internetowych i zastanawiałem się, czy małe firmy działające na małych obszarach geograficznych muszą wdrożyć responsywne projektowanie stron internetowych?

Niektóre pytania częściowe, które mam na ten temat, obejmują:

  1. Czy lepiej jest stosować responsywne projektowanie stron internetowych niż oddzielny kod wykorzystywany dla różnych wymiarów / urządzeń?

  2. Czy może to potencjalnie wpłynąć na SEO (pozytywnie lub negatywnie)?

  3. Jakie są główne problemy, na które mogę natknąć się, optymalizując stronę internetową dla firmy za pomocą tej metody projektowania?

125697
źródło
Właśnie dokonałeś drastycznej zmiany w pytaniu tytułowym bez faktycznej modyfikacji treści. Jesteś tego pewien? (Wskazówka: odpowiedź brzmi teraz „nie”)
Su
@Su „Przepraszam za to, właśnie zdałem sobie sprawę, że całkowicie zmieniłoby to odpowiedzi, które otrzymam, więc zrobiłem„ wycofanie ”
wcielenia
1
Jak ważne? Zero do małego znaczenia dla większości witryn. W przypadku aplikacji lub narzędzia bardziej (1) Responsive vs. Adaptive? Różni się w zależności od osoby i projektu do projektu. Krótko mówiąc, żadna metoda nie jest lepsza, a jej użycie zależy również od odbiorców witryny. (2) Wpływa na SEO? Nie. (3) Główne problemy? Będziesz musiał więcej testować, naprawiać więcej błędów i kodować więcej, niektóre rzeczy nie będą działać, gdy masz zmniejszoną szerokość, a niektóre będą naruszać TOS (AdSense), jeśli je usuniesz lub zmienisz. Oto 10 ważnych funkcji aplikacji internetowych w tym filmie, które IMHO mają zastosowanie do większości witryn i tak vimeo.com/10510576
Anthony Hatzopoulos

Odpowiedzi:

21

Przewiduje się, że korzystanie z mobilnego Internetu przekroczy kilka lat za pomocą komputera stacjonarnego , więc optymalizacja mobilna powinna być poważnym czynnikiem dla każdej firmy.

Pod wieloma względami jest to szczególnie prawdziwe w przypadku małych, zlokalizowanych firm: wystarczy przewidzieć, że wiele wyszukiwań na urządzeniach mobilnych koncentruje się na znajdowaniu obiektów w pobliżu - pomyśl o znalezieniu sklepu, restauracji itp.

Od maja 2012 r. Projektowanie responsywne jest zalecaną przez Google najlepszą branżową praktyką przy projektowaniu smartfonów. Jedną z głównych korzyści jest to, że prowadzisz jedną witrynę: to jedna witryna do projektowania, budowania, utrzymywania i promowania. Jest wydajny.

Z punktu widzenia SEO hosting oddzielnej witryny mobilnej, np. Example.com, oznacza, że ​​musisz zoptymalizować 2 oddzielne witryny i podzielić wartość swojej firmy (PageRank, autorytet itp.) Na dwie lokalizacje. Chociaż można tego uniknąć, udostępniając treści pod tymi samymi adresami URL przez wykrywanie klienta użytkownika, nie rozwiązuje to problemu powielania wysiłków (nadal są to 2 odrębne witryny), a także wprowadza więcej problemów technicznych, np. Zapewnienie klienta użytkownika wykrywanie działa i jest aktualizowane, że wyszukiwarki indeksują odpowiednią treść we właściwym indeksie itp.

Reaktywne wzornictwo to eleganckie rozwiązanie.

Aby odpowiedzieć na inne pytania:

  1. Dotknąłem powyższego, ale zastanówmy się też, jak szybko rozwija się rynek mobilny. Im bardziej elastyczne jest rozwiązanie mobilne, tym mniej musisz zrobić, aby nadążyć.

  2. Zależy od tego, z czym porównujesz, ale jak wspomniano powyżej, każda z pozostałych 2 głównych opcji wiąże się z poważnymi wyzwaniami SEO.

    Istnieją pewne obawy dotyczące problemu „maskowania”, tj. Ukrywania treści w wyszukiwarkach, co jest nieodłącznym elementem responsywnego projektowania w większości implementacji. Jednak, o ile, według mojej wiedzy, żadna z głównych wyszukiwarek nie odpowiedziała wyraźnie, że Google uważa to za „najlepszą praktykę” może być postrzegane jako wskazówka, że ​​Google jest w stanie rozróżnić między legalnym ukrywaniem treści dla przyczyny optymalizacji urządzenia i inne, mniej uzasadnione ukrywanie, z powodu manipulacji.

  3. Myślę, że głównym wyzwaniem jest określenie treści, które mają być wyświetlane użytkownikom mobilnym. W zależności od witryny może to nie stanowić problemu, ale w wielu przypadkach tak jest. Kluczową kwestią jest zrozumienie tego, co próbują zrobić użytkownicy mobilni. Na przykład ktoś na iPhonie prawdopodobnie chce szybkich, łatwych informacji lub transakcji. Ta sama osoba na iPadzie jest bardziej zainteresowana przyjemniejszym przeglądaniem.
GDav
źródło
To pytanie i odpowiedź brzmi niezwykle zabawnie cztery lata w przyszłości.
dwjohnston
12

Chodzi o to, aby zapewnić odwiedzającym optymalne wrażenia podczas przeglądania niezależnie od urządzenia. Ponieważ liczba użytkowników korzystających z urządzenia mobilnego prawie wzrośnie, a nie zmniejszy się, warto wybrać tę trasę.

Istnieje wiele niedrogich (by nie powiedzieć tanich) motywów na blogi i CMS, które możesz od razu wypróbować i sprawdzić, czy podoba ci się to, co dostajesz (zweryfikuj na wszystkich urządzeniach swoich lub niektórych swoich klientów).

  1. Tak długo, jak masz szczególny powód, zawsze staraj się skupiać na jednej bazie kodu. Powodem może być chęć zaoferowania specjalnej witryny internetowej, takiej jak „aplikacja internetowa”.

  2. SEO: nie. Tak dobry i zły jak niereagujący układ.

  3. Na początku musisz trochę więcej zaplanować. Jakie treści powinny być wyświetlane na najmniejszym urządzeniu, jaka powinna być ich kolejność? Rzeczy jak te. Lub: Czy moja treść wygląda dobrze we wszystkich obsługiwanych wymiarach? Możesz także zoptymalizować rozmiary obrazów dla każdego z wymiarów, aby uzyskać nie tylko obrazy w skali przeglądarki, ale także obrazy o rzeczywistych rozmiarach. Jeśli Twój CMS nie obsługuje, to jest trochę więcej pracy.

Jeśli planujesz dołączyć reklamy z zewnętrznego źródła, musisz również sprawdzić, czy podane formaty są dobrze odtwarzane razem.

Edytować:

Dodam, że jeśli masz dostępne historyczne dane analityczne (np. Google Analytics), możesz łatwo sprawdzić liczbę użytkowników korzystających z urządzeń mobilnych i innych niż mobilne, zidentyfikować używane urządzenia (w zależności od rzeczywistego sprzętu) i spojrzeć na rozdzielczości ekranu („Czy faktycznie widzą moje strony, czy tylko ich część i muszą przewijać?”).

Druga edycja:

Zgodnie z tym postem „Strony mobilne a responsywne projektowanie: jakie rozwiązanie jest odpowiednie dla Twojej firmy?” „na blogu Google Analytics witryna zaprojektowana z myślą o Responsive Design ma następujące zalety:

  • Łatwość aktualizacji
  • Zoptymalizowany dla wyszukiwarek
  • Dodawanie kodów konwersji i przekierowań

Plusy oddzielnej witryny mobilnej:

  • Projektowanie na potrzeby użytkowników mobilnych
  • Szybkie tworzenie strony
  • Świetne opcje majsterkowania

Artykuł „Projektowanie responsywne - wykorzystanie siły zapytań medialnych” na oficjalnym blogu Google Webmaster Central daje dobre wprowadzenie do tego, jak rzeczywiście realizowany jest projekt „Responsive Design”.

„Tworzenie witryn zoptymalizowanych pod kątem urządzeń mobilnych” w Google Developers stanowi:

„Google zaleca webmasterom stosowanie najlepszych praktyk branżowych polegających na stosowaniu elastycznego projektowania stron internetowych, a mianowicie udostępnianiu tego samego kodu HTML na wszystkich urządzeniach [...]”

początkowo
źródło
2
Google faktycznie uszereguje Twoją witrynę niżej, jeśli jej załadowanie zajmuje więcej czasu.
Steffan Donal
2
@Ruirize Tak, ale ... Zapytał, czy Responsive Design ma negatywny wpływ na SEO. Elastyczne projektowanie nie powoduje dłuższego ładowania strony. Więc nie". Tylko jeśli chcesz to zrobić ;-)
początkowo
@initall - Elastyczne projektowanie może wydłużyć czas ładowania witryny na urządzenie mobilne, w zależności od tego, jak zaprojektowałbyś witrynę tylko na urządzenia mobilne. Gdyby miał mniejszy rozmiar strony (mniej wstępnej zawartości, mniej bibliotek itp.), Być może Twoja witryna zajmie więcej czasu niż mogłaby mieć na urządzeniu mobilnym. Prawdopodobnie dobrze jest zamiast tego zoptymalizować jedną witrynę pod kątem sieci o niskiej przepustowości, ale należy o tym pamiętać.
Nick
1
@Nick Oczywiście, jeśli porównasz witrynę zoptymalizowaną pod kątem urządzeń mobilnych z bardziej ogólną (responsywną), zwycięzca ... nie jest zaskoczeniem. Ten zawiera listę niektórych gotchas: blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold
początkowo
3

Myślę, że ważne jest, aby najpierw zdać sobie sprawę, że „responsive design” (RD) to buzz-term (jeśli dodam szerokość: 100% do elementu, mam RD tutaj do przesady) i dlatego jego znaczenie wydaje się ważniejsze niż to. tak naprawdę jest tak jak na końcu warunkowe, jak wszystko inne.

Czy konieczne jest wdrożenie RD?

Aby odpowiedzieć, musisz podać kilka definicji:

  1. Kto jest waszym dobiorcą docelowym
  2. Jaki rodzaj odbiorców jest Twoim celem
  3. Jaki jest cel Twojej witryny
  4. Skąd będzie można uzyskać dostęp do witryny (w większości przypadków)
  5. itp.

Jest to bardzo podobne do analizy marketingowej. Chodzi o to, aby mieć odpowiednie medium dla właściwych odbiorców (być może twoja publiczność siedzi przed komputerem przez większość dnia lub są w podróży z najnowszym iPhone'em itd.). Czy robią oba, to oczywiście RD jest kluczowe.

Czy lepiej jest stosować responsywne projektowanie stron internetowych niż oddzielny kod wykorzystywany dla różnych wymiarów / urządzeń?

Zależy od złożoności interfejsu użytkownika i sposobu jego użycia. Typowa strona może w większości przypadków być renderowana przy użyciu różnych zestawów CSS dla różnych wyświetlaczy. Jednak bardziej złożone lub wyrafinowane interfejsy użytkownika mogą wymagać różnych podejść, dlatego rozsądnie jest przedstawić inną strukturę strony i strategię w zależności od używanego urządzenia (na przykład mapy Google, interfejs wielodotykowy ...).

Czy może to wpłynąć na SEO (pozytywnie lub negatywnie)?

SEO to więcej niż treść . Tylko Google wie, czy ważą projekt, ale design / układ, ale ogólnie, jeśli treść jest wysokiej jakości, będzie ważona bardziej niż rzeczywisty projekt.

Jakie są główne problemy, na które mogę natknąć się, optymalizując stronę internetową dla firmy za pomocą tej metody projektowania?

Zaprojektowanie go dla niewłaściwych odbiorców. Przeanalizuj swój cel i, jeśli to możliwe, zaopatrz się w aktualne dane techniczne (tj. Dzienniki odwiedzających zawierające informacje o platformie itp.)

Nowa technologia jest zawsze ryzykowna, ref. problem HTML5 na Facebooku. W tym momencie nie jest jeszcze w pełni dojrzały i zachęca do różnych problemów podobnych do IE6 w porównaniu do problemów ze standardami.

Uprość to tak prosto, jak to możliwe. Fantazyjne strony internetowe są cenne tylko przez bardzo krótki czas, dopóki użytkownik nie będzie musiał z nich korzystać. Jeśli będzie musiał czekać 1/2 sekundy na zakończenie zanikania za każdym kliknięciem, użytkownik zostanie utracony dość szybko. Rzeczy jak te.

epistemex
źródło
1
Jasne „ nie” dla niektórych części twojej odpowiedzi: nie łącz „responsywnego projektu” z koncepcjami „elastycznymi” lub „płynnymi”. W zależności od rozmiaru ekranu responsywny projekt może wyglądać na „stały”, ponieważ zależy od zapytań o media, aby dostarczyć różne CSS w zależności od szerokości przeglądarki. To nie jest „szerokość: 100%”. Nie nazwałbym tego „buzz-term”, ponieważ jest to rozsądna koncepcja, miła odpowiedź na aktualny problem, a nie tylko szum. Jeśli chodzi o SEO: przynajmniej Google włożyło trochę wysiłku w wykrycie układów indywidualnych lub tylko innego motywu; ponownie: RD jako takie nie jest złe ani dobre, zależy od treści.
początkowo
1
100% za „naprawionym” komentarzem, chociaż jest to mętna woda. Moje responsywne strony w pracy zostały naprawione za pomocą płynnych elementów wewnętrznych. Twierdziłbym, że jest to w tej chwili trochę szumu, ale wyobrażam sobie, że wkrótce będzie to po prostu nazwane webdesign / development. Myślę, że wpływ SEO może nastąpić, jeśli firmy będą miały witrynę mobilną zamiast reagować ... ale nie mam pojęcia o skutkach tego SEO.
DBUK
2

Przejrzałem inne odpowiedzi, wybacz mi, jeśli jestem zbędny ... Robię responsive design codziennie przez ponad 8 godzin dziennie w tym momencie ... Moi klienci chcą tego, ponieważ chcą, aby użytkownicy mobilni mieli „wyjątkowy” doświadczenie, moi pracodawcy chcą tego, ponieważ Google chwali się nim jako preferowaną metodą i dobrze usprawnia. (i jeśli jest chwalony przez Google jako sposób na zrobienie czegoś, co najprawdopodobniej działa najlepiej dla SEO)

Czy lepiej jest stosować responsywne projektowanie stron internetowych niż oddzielny kod wykorzystywany dla różnych wymiarów / urządzeń?

Powiedziałbym, że tak jest lepiej. Większość kodu to ten sam kod, co powoduje mniej pracy niż pisanie aplikacji na iPhone'a, aplikacji na Androida, aplikacji na iPada, aplikacji na rozpałkę ... masz rację.

Czy może to potencjalnie wpłynąć na SEO (pozytywnie lub negatywnie)?

Z punktu widzenia projektu uważam, że jest neutralny; jednak z punktu widzenia statystyki moje responsywne projekty mają się naprawdę dobrze. Klienci je uwielbiają, a klienci uwielbiają z nich korzystać.

Jakie są główne problemy, na które mogę natknąć się, optymalizując stronę internetową dla firmy za pomocą tej metody projektowania?

Na początku jest to trochę trudne ... musisz przeprowadzić badania dotyczące zapytań o media i najlepiej mieć jakieś urządzenia mobilne do przetestowania. Pamiętaj, że zmiana rozmiaru okna na pulpicie jest bliska, ale sposób, w jaki urządzenia mobilne renderują Internet, jest czasem inny niż można by się spodziewać. Na przykład zaprojektowałem responsywną witrynę, w której użyłem powtórzenia bg dla nagłówka, a na komputerze rozciąga się na cały widoczny obszar; jednak na iOS to z jakiegoś powodu skraca się ...

Polecam naukę i wypróbowanie responsywnego projektu. sprawdź tę witrynę, aby uzyskać szybki start: http://html5boilerplate.com

Aby odpowiedzieć na pytanie zawarte w tytule: ważne jest, abyś był tego świadomy i jak go zaprojektować, a jeśli nie zdecydujesz się go użyć, powinieneś być przygotowany do obrony tej postawy, ponieważ twój klient może być ustawiony na temat tego projektu. Z mojego doświadczenia wynika, że ​​zarówno klienci, jak i klienci uwielbiają responsywny design. Zadowoleni klienci i zadowoleni klienci to dla mnie wystarczający powód, aby je realizować :)

Ryan Hollingsworth
źródło
1

Elastyczne projektowanie stron internetowych ma kluczowe znaczenie - jeśli tworzysz nową witrynę, MUSISZ ją dostosować. Już teraz 50% ruchu pochodzi z urządzeń mobilnych i tabletów, a nie tylko wzrośnie, ale stanie się wyraźnie dominującą formą korzystania z Internetu.

Dla małych firm, które są ukierunkowane na małe obszary geograficzne, ma to jeszcze większe znaczenie - SEO będzie bardzo trudne dla nowej małej firmy, ale jeśli twój produkt jest dobry, możesz zmaksymalizować, ile osób dzieli się tym, co robisz.

Jeśli chodzi o czytanie w mediach społecznościowych, ludzie używają teraz głównie urządzeń mobilnych - zwykle rano w łóżku i wieczorem.

Jeśli witryna nie nadaje się do użytku na urządzeniu mobilnym, wszelkie akcje trafiające do odpowiednich odbiorców są marnowane. Nie chcesz tego. Bardzo ważne jest, aby tego uniknąć.

Odnośnie responsywnego lub osobnego kodu: Podstawowym minusem responsywnego projektu jest to, że nie jest tak szybki jak oddzielne podstawy kodu. Ta utrata prędkości będzie nieznaczna, z pewnością w przypadku małej lokalnej firmy, gdy inne czynniki mogą pojawić się w umyśle użytkowników, dlaczego strona jest 0,2 sekundy wolniejsza niż inne.

Dużą zaletą responsywnego projektu jest to, że zachowujesz tę samą bazę kodu. Zmniejsza to koszty utrzymania, koszty testowania i koszty rozwoju.

Najważniejszą rzeczą w SEO jest obecnie „Jakość strony” - jakość strony jest trudna do zmierzenia, ale ogólnie mówiąc, Google używa współczynnika odrzuceń i czasu na stronie, aby to zmierzyć. Jeśli Twoja witryna jest do bani na urządzeniach mobilnych, 50% ruchu będzie miało wysoki współczynnik odrzuceń i dużą liczbę użytkowników o niskim zaangażowaniu (mniej niż 10 sekund na stronie).

Naraża to Cię na kary Google - spójrz na Google Panda i nowe (w ubiegłym tygodniu) kary Exact Match Domain , które karają strony za „niską jakość”.

Główne problemy, które możesz napotkać, optymalizując stronę internetową dla firmy za pomocą tej metody, to to, że jest to nowe modne hasło, wszyscy tego potrzebują, więc są kowboje pobierający absurdalnie wysokie ceny za coś, co jest niezwykle łatwe do zrobienia.

Na przykład niedawno stworzyłem stronę internetową, która ma sklep, forum, sekcję pytań i odpowiedzi, a także różne inne strony, blogi itp. W pełni reagujące na wszystkie urządzenia w ciągu około jednego dnia.

Oto podstawy tego, co musisz zrobić:

  1. Dostosuj wyściółkę ciała i marginesy
  2. Zamiast tego przesuń menu po lewej lub prawej stronie do rozwijanych menu, być może ukryj je pod przyciskiem opcji u góry.
  3. Zmień rozmiar pojemników, w miarę możliwości użyj szerokości 100%
  4. Zmień wszystkie swoje zdjęcia na szerokość 100%
  5. Zdecyduj, które rzeczy nie są potrzebne w telefonie (reklamy?) I usuń je (wyświetl: brak)

Oto przykładowy kod:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

W ten sposób usuwa się cokolwiek z klasą „pola reklamowego” ze smartfonów (o maksymalnej szerokości 480 pikseli) i zmniejsza margines ciała.

Jeśli tworzysz nową witrynę, jest to jeszcze łatwiejsze do wbudowania, ponieważ możesz mieć pewność, że zbudujesz czysty projekt z ładnymi, czystymi klasami i dobrym stylem pasującym do wszystkich urządzeń.

Mam nadzieję, że to pomoże!

Dave Hilditch
źródło
1

Chciałbym po prostu wkroczyć z innej perspektywy:

Nie, nie jest to obowiązkowe ani nawet zalecane. To zależy od tego, kim jest twoja grupa docelowa. Spójrz na swoje dane analityczne i zobacz, jaki procent pochodzi z Mobile, a tych, którzy przychodzą na Mobile, czy jest jakiś znaczący spadek w porównaniu z użytkownikami komputerów?

Podając przykład, w którym pracuję, nasza strona nie reaguje. 90% naszego ruchu pochodzi od użytkowników komputerów stacjonarnych, a współczynniki odrzuceń i współczynniki realizacji zdarzeń są prawie identyczne na komputerach, urządzeniach mobilnych i tabletach.

Dopóki nie ma uzasadnienia kosztowego, aby to zmienić, po prostu nie ma zachęty finansowej, aby to zrobić. Wypowiadanie obszernych stwierdzeń, takich jak 50% użytkowników, odbywa się na urządzeniach mobilnych lub coś takiego ma zastosowanie tylko wtedy, gdy wszyscy użytkownicy są Twoimi odbiorcami docelowymi. W przeciwnym razie jego całkowicie nieistotna i zła logika do naśladowania.

Musisz spojrzeć tylko na% użytkowników telefonów komórkowych, na które kierujesz reklamy. Zwłaszcza w przypadku aplikacji B2B większość ludzi nie będzie spoglądać na telefony w wolnym czasie. Zyskasz ruch od poniedziałku do piątku na komputerach stacjonarnych.

Ryan
źródło