Insider Views na Responsive Design: Debata trwa
Od czasu Coca-Coli przeciwko Pepsi nie było tak powszechnej debaty i intensywnych kontrowersji na pojedynczy temat. Blogi poświęcone technologii i wzornictwu w sieci angażują się w gorącą debatę na temat responsywnego projektowania w porównaniu z witrynami mobilnymi, argumentując, które rozwiązanie najlepiej zapewnia mobilność.
Czy wszyscy nie możemy się zgodzić? Nie, nie w tym życiu, zwłaszcza w przypadku tak dyskutowanego tematu jak ten. Dzięki ogromnej liczbie programistów i projektantów stron internetowych, którzy dziś obsługują klientów, oraz ogromnej popularności urządzeń przenośnych, która skupiła się na tym problemie, prawie wszyscy mogliby się z tym zgodzić.
Chcesz być muchą na ścianie, aby usłyszeć, co profesjonalne firmy myślą o elastycznym wzornictwie i o tym, jak obsługują swoich klientów?
Przeprowadziłem wywiady z czterema wybitnymi organizacjami, które codziennie tworzą mobilne doświadczenia dla swoich klientów. Poniżej znajdziesz informacje wewnętrzne na temat swoich mobilnych procesów rozwoju
Dwie przeciwstawne pozycje
Chociaż istnieje wiele różnych punktów widzenia, wydaje się, że w Internecie krążą dwie dominujące opinie.
W niebieskim rogu ...
Fani responsywnego projektowania podają wiele korzyści jako wystarczający dowód, że ta technologia powinna być stosowana do wszystkich lub większości witryn mobilnych.
Zgodnie z propozycjami responsywnych projektantów:
- Użytkownicy chcą mieć pełną funkcjonalność witryny bez względu na urządzenie, a nie obnażoną wersję tego, co twórcy stron uważają, że użytkownicy będą chcieli oglądać. Łatwość użytkowania sprawia, że odwiedzający witrynę czują się tak, jakby kontrolowali i podejmowali decyzje. Eksperci twierdzą, że osobna witryna mobilna może frustruć użytkownika końcowego.
- Responsywny design jest opłacalnym wyborem, ponieważ istnieje tylko jedna strona do utrzymania. Firmy będą musiały utworzyć osobne witryny mobilne dla każdego urządzenia, które w dłuższej perspektywie mogą zsumować wymagania dotyczące zawartości i konserwacji.
- Dzięki elastycznym witrynom nie ma kosztownych, przyszłych aktualizacji, gdy nowe urządzenia mobilne trafią na rynek.
- Wielu ekspertów SEO uważa, że witryny zbudowane z responsywnego projektu są bardziej przyjazne dla wyszukiwarek, ponieważ nie przekazują soku linku do innych domen, jak ma to miejsce w przypadku witryn mobilnych - niektórzy SEO spierają się z tą teorią i cytują pominięcie przekierowania Google jako dowód. Według Google ta aktualizacja "wykorzystuje końcowy adres URL smartfona" w swoich wynikach wyszukiwania na urządzeniach mobilnych, pomijając przekierowania, co pozwala na szybszy czas ładowania.
Według Michaela Wyszomierskiego, który pracuje dla Google w zakresie zarządzania jakością produktów, projektowanie responsywne jest tam, gdzie jest. Oto jego wpis w Google+:
Michael zareagował na krytykę w komentarzach stwierdzając, że w niektórych przypadkach witryny komórkowe mogą być potrzebne, ale ogólnie jest on silnym zwolennikiem szybkiego projektowania i wierzy, że wiele stron może znacznie poprawić komfort korzystania z niego przez jego wykorzystanie.
Więc jeśli responsywny projekt jest taki fajny, modny i modny, dlaczego istnieje masowa histeria wokół tematu? Oto kilka powodów, dla których ...
W czerwonym rogu ...
Druga strona argumentu nie jest uparcie przeciwna responsywnemu projektowi, ale uważa, że jest to właściwe tylko w określonych sytuacjach. Ten obóz podkreśla, że decyzja o tym, czy zbudować oddzielną stronę mobilną na responsywnym projekcie, zależy od potrzeb użytkownika mobilnego.
Oto niektóre z argumentów przeciwko responsywnemu projektowi:
- Szybkość - kiedy użytkownik mobilny otwiera witrynę z responsywnym projektem, wszystkie elementy strony na komputery stacjonarne są pobierane i dostosowywane do rozmiaru ekranu. Powoduje to, że witryna wolno się ładuje, ponieważ cały oryginalny kod JavaScript i kod HTML jest nadal obecny. (Kiedy projektanci tworzą witryny mobilne, biorą pod uwagę urządzenie podczas projektowania witryny i optymalizują ją odpowiednio.)
- Odrębna treść - obóz na rzecz witryn mobilnych mówi ogólnie, że użytkownicy mobilni mogą potrzebować innego poziomu zawartości, który nie występuje w witrynie na komputery stacjonarne. Responsywny projekt może pasować do urządzenia, ale nie wykorzystuje optymalizacji doświadczenia użytkownika, ponieważ odnosi się do jego unikalnych potrzeb.
Postanowiliśmy wziąć ten argument na ulice, aby przekonać się, jak opłacalne firmy obsługują potrzeby klientów mobilnych. Rozmawiałem z czterema organizacjami najwyższego poziomu i zapytałem ich o ich podejście do responsywnego projektowania. Wybrałem je, ponieważ odnoszą sukcesy w dostarczaniu doskonałej pracy swoim klientom, a ich wzrost jest świadectwem tego faktu.
Zadałem sobie te same pytania, aby zbadać, jak różne / podobne były ich podejścia do tematu.
Colin Proctor, Smashing Ideas
Najpierw jest Rozbijanie pomysłów , agencja interaktywna działająca w Seattle od 1996 roku. Dyrektor artystyczny Colin Proctor był na tyle uprzejmy, aby podzielić się swoimi przemyśleniami na temat elastycznego projektowania.
P: Jak często tworzysz witryny mobilne dla swoich klientów?
O: Zrobiliśmy ich garść. W przypadku wielu naszych klientów widzimy teraz inicjatywy mobilnej sieci internetowej. Internetowe doświadczenia mobilne były głównym tematem planowania i rozmowy przez ostatni rok w przypadku większości naszych projektów. Witryny mobilne, które opracowaliśmy, były responsywnymi stronami m.sites jako kompanami lub jednym układem responsywnym. Większość z nich miała bardzo skoncentrowaną treść. Posiadamy szeroką gamę aplikacji mobilnych, zarówno natywnych, jak i hybrydowych, aplikacji internetowych itp.
P: Czy automatycznie korzystasz z elastycznego projektowania dla wszystkich klientów mobilnych? Pokrótce wyjaśnij, dlaczego i dlaczego nie.
Odp .: Nie, ale zawsze jest częścią rozmowy. Badamy kontekst odbiorców przed podjęciem decyzji o tej technologii. Aby być przejrzystym, w pełni responsywne układy wciąż mają ograniczenia techniczne, które budzą obawy w przypadku dużych firm: reklamy, responsywne obrazy i wsparcie integracji trzeciej strony to tylko niektóre z głównych problemów. W przypadku witryn z broszurami prawie zawsze używamy responsywnego projektu, ponieważ hierarchia treści dla tych stron może ulegać degradacji w wielu punktach przerwania. Często kontekst użytkownika dla witryn z broszurami jest spójny dla różnych urządzeń.
P: Czy powiedziałbyś, że ...
a) na rzecz elastycznego projektowania
b) Nie na rzecz elastycznego projektowania
c) na korzyść zarówno responsywnego projektu, jak i oddzielnych witryn mobilnych
Krótko wyjaśnij, dlaczego wybrałeś odpowiedź ...
Odp .: Uważam, że używanie responsywnego układu jako niebezpieczeństwa jest niebezpieczne, a strategia reagowania określa sposoby, w jakie system projektowania reaguje na kontekst użytkownika (co jest kluczowe). Responsywny projekt / układ jest bardzo skalowalnym podejściem, ale czy zawsze bierze pod uwagę to, co robi użytkownik? Nie, ponieważ jest to jeden system wielu rozwiązań projektowych dla urządzeń mobilnych.
Gdybym budował publiczną stronę transportową, musiałbym wziąć pod uwagę, że użytkownik siedzący przy biurku prawdopodobnie planuje swój harmonogram lub trasy, podczas gdy użytkownik na telefonie próbuje dowiedzieć się, gdzie znajduje się ich autobus / pociąg i szuka więcej natychmiastowe rozwiązania. Te dwa konteksty wykazują różne zachowania, potrzeby związane z celowością, potrzebami nawigacji i jakie treści powinny być prezentowane z góry. Jeden zestaw szablonów z kontekstowym stylem i układem może nie być rozwiązaniem - może być potrzebny zupełnie inny zestaw funkcji.
P: Jaka jest najlepsza porada dla projektantów stron internetowych / programistów, którzy chcą z powodzeniem tworzyć mobilne doświadczenia dla swoich klientów?
Odp .: Reagujący projekt nie jest punktem wyjścia. Jest to świetna technologia, którą wielu społeczności internetowych poświęciło dużo czasu, aby wypracować skręty, które powstrzymują ją od globalnej obecności. Myślę, że zobaczymy przyjęcie elastycznego układu / designu z biegiem lat.
Moim zdaniem, najlepszą rzeczą, jaka wyjdzie z eksplozji w internecie mobilnym, jest odejście od idei, że nasze płótno jest ustawione, i że musimy je po prostu wypełnić. Jesteśmy zmuszeni przerastać nasze stare założenia dotyczące doświadczenia użytkownika i są odpowiedzialni za nasze procesy myślowe bardziej niż w najnowszej historii. Jako społeczeństwo nie jesteśmy już publicznością w niewoli, patrząc na prostokąt o średnim polu widzenia jako 1024 × 768, więc zasady są ponownie pisane. Jako branża czas na eksperymenty i rozwój.
Evolve Creative Group
Następny jest Evolve Creative Group , firma oferująca kompleksowe rozwiązania internetowe z siedzibą w Akron w stanie Ohio. Poprosiłem programistów o te same pytania, a oto ich odpowiedzi:
P: Jak często tworzysz witryny mobilne dla swoich klientów?
Odp .: Rozwijamy witryny mobilne prawdopodobnie w około 30% przypadków. Jest to połączenie pożądania, budżetu i konieczności dla naszych klientów. Wielu klientów nie potrzebuje lub nie chce obsługiwać urządzeń mobilnych ze względu na swoją widownię i budżet. Ze względu na elastyczność budowanych przez nas witryn (niemobilnych), działają na tyle dobrze na urządzeniach mobilnych, że klienci nie mogą uzasadnić kosztów. Może to być trudne do sprzedania, ale wraz z rozwojem i umacnianiem się mobilnych trendów coraz więcej klientów zaczyna korzystać.
P: Czy automatycznie korzystasz z elastycznego projektowania dla wszystkich klientów mobilnych?
Odp .: Nie, nie używamy go dla wszystkich klientów mobilnych. Po prostu robimy to, co leży w najlepszym interesie klienta i jego użytkowników. Uważnie oceniamy podejście mobilne na podstawie poszczególnych przypadków w zależności od ich potrzeb.
Jeśli użytkownicy mobilni klienta mają podzbiór zainteresowań lub określony cel, który wymaga zmiany układu lub ilości dostarczonych informacji, zalecamy osobną witrynę mobilną na poddomenie, co pozwala nam uprościć witrynę pod kątem wrażenia mobilne. Ale z drugiej strony, jeśli strona jest już prosta i uniwersalna w przesyłaniu wiadomości i celach (na przykład blogach, stronach docelowych i małych witrynach informacyjnych na przykład), to posiadanie jednej strony, która jest elastyczna na wszystkich platformach, jest zdecydowanie korzystne.
P: Czy powiedziałbyś, że ...
a) na rzecz elastycznego projektowania
b) Nie na rzecz elastycznego projektowania
c) na korzyść zarówno responsywnego projektu, jak i oddzielnych witryn mobilnych.
Krótko wyjaśnij, dlaczego wybrałeś odpowiedź ...
Odp .: Jak wszystko w tym biznesie, podejście mobilne to dawanie i branie, ponieważ istnieją zalety i wady każdej metody. Oddzielne witryny mobilne mają tę zaletę, że koncentrują się na konkretnych treściach, które są zwięzłe i zoptymalizowane. Ale wadą jest to, że klient może mieć dwa razy więcej utrzymania na przyszłe aktualizacje.
To właśnie tam reaguje projekt responsywny z argumentem "jedna strona, aby rządzić wszystkimi". Posiadanie pojedynczej witryny, która jest uniwersalna, bogata w elastyczność i zapewnia całą witrynę użytkownikom do interakcji z nimi, gdy im się podoba, jest bardzo ekscytującym pomysłem. Zapewnia moc w rękach klientów i użytkowników oraz rozwiązuje problem projektowania i budowy stron internetowych dla konkretnego urządzenia (na komputerze stacjonarnym lub innym). Ale argumenty przeciwko responsywnemu projektowi, takie jak czas pobierania, koszty rozwoju i przesadna informacja, mogą być równie fascynujące.
Morał polega na dostosowaniu rozwiązania opartego na projekcie i użytkownikach, a nie na oderwaniu się od ciągle rosnącej ognistej debaty.
P: Jaka jest najlepsza porada dla projektantów stron internetowych / programistów, którzy chcą z powodzeniem tworzyć mobilne doświadczenia dla swoich klientów?
Odp .: Największą radą, jaką możemy zaoferować, jest mądre podejście do wyboru podejścia. Nie wskakuj tylko na responsywny zespół napędowy, ponieważ jest to nowy, gorący przedmiot lub trzymaj się osobnych witryn mobilnych, ponieważ jest bezpieczny i znajomy. Musisz dokładnie ocenić zalety i wady każdego podejścia do konkretnego projektu.
Ponadto oprzyj go na ostatecznym użytkowniku rozwiązania. Czy są typem, który ma konkretny cel i nie zwraca uwagi? Czy chcą wejść, wyjść i żyć dalej? A może są w kawiarni i chcą przeżyć pełne doświadczenie? Odpowiedź na to pytanie prawdopodobnie spowoduje prawidłowy wybór.
Ryan Anderson, Alchemy50
Następnie rozmawiałem z Ryanem Andersonem, prezydentem Alchemy50 , agencja cyfrowa z siedzibą w Brooklynie w stanie Nowy Jork. Oto, co Ryan miał do powiedzenia na temat procesu swojej firmy:
P: Jak często tworzysz witryny mobilne dla swoich klientów?
Odp .: Rzadko. Myślę, że witryny mobilne stają się przeszłością. Istnieje tak wiele różnych rozmiarów ekranu, rozdzielczości itp., Aby rozważyć te dni, że stworzenie konkretnej "mobilnej" witryny to zwykle więcej pracy niż jest warte i nie rozwiązuje całkowicie problemu.
P: Czy automatycznie korzystasz z elastycznego projektowania dla wszystkich klientów mobilnych?
Odp .: Nie automatycznie, ale często. To naprawdę zależy od natury projektu - czy jest to aplikacja internetowa, czy witryna korporacyjna - oba mają unikalne parametry, które należy wziąć pod uwagę. Tak naprawdę nie rozdzielamy już tak bardzo "mobilnego", raczej wchodzimy w projekt wiedząc, że w większości przypadków jest to urządzenie wielodostępne, wielorozdzielcze, wieloprzeglądowe itp. ... musi działać wszędzie iz jednym podstawa kodu jest opłacalna.
W tym miejscu kluczem jest dobra struktura responsywna - można zaadresować większość permutacji za pomocą dobrych frameworków. Alchemy50 stworzył własny framework będący połączeniem sztywnych elementów i dynamicznego skalowania. Stwierdziliśmy, że bardziej złożone witryny są nieco niesforne przy użyciu elastycznych frameworków, więc nasza struktura korzysta z zapytań o media w celu dostosowania naszych stron w ustalonych rozdzielczościach. Okazało się niezwykle pomocne i skuteczne w naszych staraniach o obsługę wielu urządzeń i przeglądarek z jedną bazą kodu.
P: Czy powiedziałbyś, że ...
a) na rzecz elastycznego projektowania
b) Nie na rzecz elastycznego projektowania
c) na korzyść zarówno responsywnego projektu, jak i oddzielnych witryn mobilnych w zależności od klienta i jego użytkowników
Krótko wyjaśnij, dlaczego wybrałeś odpowiedź ...
Odp .: To naprawdę jedyny sposób, aby rozwinąć się w Internecie w tych dniach. Musimy postawić się na stanowisku naszego klienta i rozważyć - całkowity koszt, oś czasu, skalowalność, możliwości wsparcia itd., A kiedy to robimy, zwykle wspiera pojęcie responsywnego frameworka. Ważne jest jednak, aby zwrócić uwagę, że czasami nie można wykonać żądań bez rodzimych bibliotek systemu operacyjnego - tak więc responsywna struktura sieci nie jest odpowiedzią na wszystko.
P: Jaka jest najlepsza porada dla projektantów stron internetowych / programistów, którzy chcą z powodzeniem tworzyć mobilne doświadczenia dla swoich klientów?
Odp .: Nie wybieraj rozwiązania, dopóki nie zrozumiesz, co klient chce zrobić. I uważaj, często klienci mówią, że chcą "witryny HTML5" lub "aplikacji mobilnej działającej wszędzie" - stwierdziliśmy, że zazwyczaj nie rozumieją w pełni, co mówią. Poproś ich, aby zapomnieli o technologii na minutę i wyjaśnili prostym językiem, czego chcą się nauczyć. Jaki jest rynek docelowy? Jakie są zwyczaje tego rynku (technologia, przeglądarka, czy siedzą przy biurkach itp.) Jaką funkcjonalność zapewnia strona / aplikacja? Często, gdy rozmawiasz z klientami o tych punktach, pojawi się skuteczne (a czasem bardzo różne!) Podejście.
Nicholas Davison, Digitaria
Na koniec rozmawiałem z dyrektorem ds. Rozwoju sieci w firmie Digitaria , Nicholas Davison. Digitaria to kompleksowa agencja cyfrowa założona w 1997 roku z pięcioma lokalizacjami w Stanach Zjednoczonych. Oto, co Nicholas miał do powiedzenia na temat elastycznego projektowania:
P: Jak często tworzysz witryny mobilne dla swoich klientów?
Odp .: Większość naszych buildów zawiera obecnie komponent mobilny. Z portfolio tak szerokim i tak głębokim jak Digitaria, oznacza to, że mój zespół zazwyczaj ma kilka witryn z komponentami mobilnymi w danym momencie.
P: Czy automatycznie korzystasz z elastycznego projektowania dla wszystkich klientów mobilnych? Pokrótce wyjaśnij, dlaczego i dlaczego nie.
Odp .: Ignorowanie Zeldmana i uhonorowanie definicji Marcotte'a ... jeśli oddzielisz Responsive jako zasadniczo Adaptive plus płynne układy i obrazy, nie wybieramy automatycznie Responsive over Adaptive. Głównym powodem tego jest zwrot z inwestycji.
Płynne układy wprowadzają szereg wyzwań: mieszanie stałych wymiarów i procentów zwykle wymaga dodatkowych elementów div, aby zawiesić projekt. Błędy zaokrąglania prowadzą do problemów w starszych wersjach Internet Explorera i często pozostawiają pojedyncze piksele nawet w bardziej nowoczesnych przeglądarkach. Kontrola jakości, jeśli jest wykonana prawidłowo, powinna sprawdzać każdy element w każdym rozmiarze w każdej przeglądarce - co znacznie zwiększa koszty kontroli jakości.
Co oznaczają te koszty w związku z adaptacyjnym projektem, który już obejmuje 320, 480, 720, 960 i 1140? Robią nieco lepsze wykorzystanie przestrzeni i dodają niewielki efekt wow. Jeśli te świadczenia uzasadniają koszt, budujemy Responsive. Jeśli nie, Adaptacja jest bardziej odpowiednia.
Jeśli, jak sugeruje Zeldman, używamy Responsive i Adaptive zamiennie i nie patrzymy na płynne warianty, to nigdy nie powinno to być automatyczną decyzją. Każdy, kto myśli o swoim kliencie, szuka właściwych narzędzi do właściwej pracy.
Adaptacja ma wiele zalet i zwykle ma sens. Jednak zawsze są wyjątki: Mdot często działa lepiej, gdy klient chce innej zawartości dla urządzeń mobilnych. Aplikacje często działają lepiej, gdy klient chce bardzo zaawansowanej funkcjonalności wymagającej niestandardowego interfejsu i interakcji dla każdego współczynnika.
Czasami Mobile nie ma sensu, kropka. Jeśli klient po prostu musi mieć minimalną witrynę z powodów prawnych lub z powodu dotacji i chce utrzymać niskie koszty, a po prostu zaznacza pole, nadmierna sprzedaż nie jest odpowiednia.
Adaptacja jest czymś, co zwykle zalecamy, ale jako dobry partner nigdy nie powinniśmy automatycznie polecać niczego bez uprzedniego wysłuchania.
P: Czy powiedziałbyś, że ...
a) na rzecz elastycznego projektowania
b) Nie na rzecz elastycznego projektowania
c) na korzyść zarówno responsywnego projektu, jak i oddzielnych witryn mobilnych
Krótko wyjaśnij, dlaczego wybrałeś odpowiedź ...
Odp .: Adaptacyjny design jest niesamowicie fascynujący w prawie każdym przypadku. Ignorowanie urządzeń przenośnych i tabletów szybko staje się równie poważnym posunięciem biznesowym, jak ignorowanie sieci dziesięć lat temu. Musisz po prostu wziąć je pod uwagę w przypadku większości projektów. Dni częściowych stron Mdot są ponumerowane. Użytkownicy oczekują całej zawartości na dowolnym urządzeniu, z którego korzystają. Gdy nieistniejący lub częściowy telefon komórkowy nie jest nawet opcją, adaptacyjny jest najbardziej opłacalnym sposobem dostarczania go w ogromnej większości przypadków. W porównaniu do pełnej strony Mdot i pełnej wersji na komputer, jest to tańsze. W porównaniu do pełnego Mdota, tabletu i komputera jest to znacznie tańsze.
A to tylko argumenty na dziś: Adaptacja jest tańsza w utrzymaniu i rozbudowywaniu, ponieważ jest jedną platformą. Witryny są nie tylko na dziś. Z uwagi na kilkuletni okres użytkowania większości witryn nie musimy tylko myśleć o tym, ile osób dziś używa telefonów komórkowych i tabletów, ale o tym, jak długo będą one używane na długo przed końcem życia witryny.
P: Jaka jest najlepsza porada dla projektantów stron internetowych / programistów, którzy chcą z powodzeniem tworzyć mobilne doświadczenia dla swoich klientów?
Odp .: Plan. Zastanów się jednocześnie nad urządzeniami mobilnymi i komputerami. Wracając i modernizując podstawową strukturę, aby pomieścić to, czego teraz potrzebujesz, aby zaskoczyć projekt jest droższy niż planowanie i budowanie jednej czystej struktury, która służy obu.
Użyj funkcji response.js, aby Twoja witryna działała w każdej przeglądarce, a nie tylko w tych, które znają zapytania o media. Nie buduj płynu tylko dlatego, że Responsive jest niższą wersją Adaptive. Ma zalety, ale ma również koszty. Upewnij się, że wybierasz, co jest dla Ciebie odpowiednie.
Testuj wcześniej i często testuj. Było to prawdą, gdy rozwijaliśmy się na czterech przeglądarkach komputerowych i rozważaliśmy starszego Internet Explorera. To podwójna prawda, teraz dodajemy wiele platform mobilnych: Problem można łatwo naprawić, jeśli go złapiemy, gdy pojawi się pierwszy raz. Jest prawie niemożliwe, aby naprawić, gdy na jego wierzchu wbudowano dziesiątki warstw, przesłaniając podstawowy problem. Jeśli nie testujesz, na platformie, po każdej dodanej nowej funkcji robisz to źle.
Ze względów zdrowotnych musisz zgodzić się na listę platform, na które dajesz gwarancję kodu. Jest tak wiele wariantów Androida, stare wydania iOS point, urządzenia z Windows Mobile, które będą oferować darmowe łatki na całe życie, jeśli jesteś na tyle głupi, by po prostu zgodzić się na "wszystkie smartfony". A tam jest Blackberry, gdzie starsze wersje wydają zaprojektowany z przewrotną miłością łamania.
Debata jest kontynuowana
Dziękuję wszystkim uczestnikom za dostarczenie nam wglądu w ich codzienne procesy.