Pierwszy projekt mobilny: dlaczego jest świetny i dlaczego jest do bani

Historycznie większość projektantów stron internetowych i ich klienci najpierw podeszli do strony każdego projektu, pozostawiając część mobilną jako drugorzędny cel, który zostanie osiągnięty później. Nawet wraz ze wzrostem responsywnego designu wielu z nas zaczyna od strony „pełnowymiarowej” i idzie w dół.

W branży rośnie jednak trend polegający na odwróceniu tego przepływu pracy i rozpoczęciu od rozważań dotyczących urządzeń przenośnych, a następnie pracy nad większą wersją komputerową.

Dlaczego miałbyś podejść do projektu w ten sposób? Jakie są zalety i wady tej strategii? Czytaj dalej, aby się dowiedzieć!

Projektowanie stron mobilnych nie jest niszą

Jeśli nadal masz w głowie, że projektowanie i tworzenie aplikacji mobilnych to niszowa branża, musisz zmienić sposób myślenia. Telefon komórkowy nie jest trendem, ani nawet przyszłością, to teraźniejszość. Nie wierzysz mi? Oto niektóre szalone statystyki z Mobithinking:

• Na świecie jest ponad 1, 2 miliarda mobilnych użytkowników Internetu
• W Stanach Zjednoczonych 25% mobilnych użytkowników Internetu korzysta wyłącznie z urządzeń mobilnych (rzadko korzystają z komputera, aby uzyskać dostęp do sieci)
• Aplikacje mobilne pobrano 10, 9 miliarda razy
• Sprzedaż urządzeń mobilnych rośnie we wszystkich kierunkach, a ponad 85 procent nowych telefonów może uzyskać dostęp do mobilnego Internetu

Jednym z najpotężniejszych faktów jest tutaj drugi element, który ujawnia, że ​​wielu użytkowników prawdopodobnie kiedykolwiek zobaczy wersję mobilną Twojej witryny. To zdumiewające odkrycie, prawda?

Bardziej niż kiedykolwiek wcześniej sieć jest czymś, co nosimy w naszych kieszeniach, a nie czymś, co po prostu spotyka się przy biurku lub nawet w naszych domach. Jest to globalny trend, który będzie się rozwijał dopiero w nadchodzących latach. Czy jesteś na to gotowy? Czy Twój zestaw profesjonalnych umiejętności obejmuje tworzenie stron internetowych na wszystkie ważne platformy, czy tylko na arenę komputerową?

Dlaczego Mobile First?

Szanse są żadne z osób, które to czytają, do tej pory nie nauczyły się niczego nowego. Ponad 500 dolarów telefonów w kieszeniach wszystkich, których znasz, to wszystko, czego potrzebujesz, aby wiedzieć, że sieć wyłamała się z pudełka w kształcie komputera.

Jednak fakt, że mobilny dostęp do Internetu jest popularny, prawie nie przekonuje mnie, że muszę realizować strategię, która stawia mobilność na pierwszym miejscu. Drugą stroną 25% użytkowników mobilnych jest to, że 75% z nich nie jest! Pulpit jest nadal ważnym medium, którego jeszcze nie można zapomnieć ani zepchnąć na tylny palnik. Dlaczego więc zastanawiamy się nad wybraniem pierwszej trasy mobilnej?

Jednym z głównych katalizatorów rozwoju projektowania stron internetowych po raz pierwszy na telefony komórkowe było ogłoszenie przez Erica Schmidta w 2010 r., Że Google zamierza przyjąć takie podejście odtąd, mówiąc: „Myślę, że to teraz wspólny projekt każdy z nas, aby mobilność była odpowiedzią na prawie wszystko ”(źródło). Skąd ta drastyczna zmiana podejścia?

Wdzięczna degradacja a stopniowe ulepszanie

Oto kilka popularnych słów sprzed kilku lat, które wciąż dają wiele wglądu w koncepcję projektowania stron mobilnych i dlaczego warto rozważyć tę koncepcję.

Pełen wdzięku degradacja powstała z potrzeby posiadania funkcji projektowej na jak największej liczbie przeglądarek i platform. Projektanci i programiści chcieli skorzystać z nowej technologii bez wykluczania użytkowników z konfiguracjami, które nie miały wsparcia. Ogólny wniosek polegał na stworzeniu i zapewnieniu najlepszego możliwego doświadczenia, a następnie uwzględnieniu każdej możliwej degradacji i zapewnieniu, że pomimo wszelkich niedociągnięć witryna pozostanie funkcjonalna.

W zakresie mobilnego projektowania stron internetowych oznaczało to, że pełna, standardowa strona internetowa będzie się zmniejszać i stopniowo usuwać zawartość i funkcje wraz ze zmniejszaniem się obszaru wyświetlania i prostszym systemem (brak obsługi Flasha itp.).

Z tego trendu zrodził się nowy, potężny pomysł: stopniowe ulepszanie. W tej wersji opowieści stawiasz swoje najlepsze kroki na platformie mobilnej, zapewniając użytkownikom minimalną powierzchnię ekranu, moc przetwarzania i wtyczki innych firm, niesamowite wrażenia, które zarówno wyglądają świetnie, jak i działają doskonale. W miarę potrzeby można stopniowo „ulepszyć” witrynę, a nawet całkowicie przemyśleć ją w przypadku większych platform z mniejszymi ograniczeniami.

Dlaczego wygrywa postępowe ulepszenie

Na pierwszy rzut oka te dwie metodologie wydają się w przybliżeniu równoważne. Kogo to obchodzi, od kiedy zaczynasz proces projektowania, dopóki się to zakończy, prawda?

Rzeczywistość sytuacji jest jednak nieco bardziej złożona. Kiedy zaczynasz od platformy komputerowej, zwykle chcesz korzystać ze wszystkiego, co platforma ma do zaoferowania. Budujesz niesamowity produkt, który wykorzystuje wiele świetnych technologii, ale tylko po to, aby zdać sobie sprawę, że żaden z nich nie skaluje się aż do urządzeń mobilnych. Może to i prowadzi do poważnego osłabienia produktów mobilnych, które wydają się bardziej przemyślane niż wypolerowany, gotowy produkt. Czy dzieje się tak w przypadku każdego projektu? Być może nie, ale ta historia jest prawdopodobnie o wiele bardziej powszechna, niż chcielibyście w to uwierzyć.

Jeśli przeanalizujemy przepływ pracy z progresywnym ulepszaniem, wynik będzie zwykle inną historią. Tutaj zaczynamy od projektu, który jest zarówno bardzo szczupły, jak i imponujący. Zebrałeś całą tę energię początkową i włożyłeś ją w stworzenie produktu, który wygląda dobrze i funkcjonuje pomimo wielu ograniczeń, z którymi się spotkałeś.

Co ważniejsze, już przeszedłeś problem przycinania zawartości do jej najważniejszych elementów. Teraz, gdy nadszedł czas, aby przenieść ten projekt na pulpit, zamiast decydować o tym, co wyciąć i jak podlać produkt, możesz zdecydować, jak uczynić go jeszcze bardziej niezawodnym!

Treść internetowa: najlepiej serwowana selektywnie

Powyższy argument przychodzi do ciebie z czysto filozoficznego punktu widzenia, a ostateczny wniosek jest taki, że wynik jest lepszy, jeśli zastosowane zostanie podejście mobilne. Jeśli chcesz spierać się z nieco bardziej zauważalną substancją, nie szukaj dalej niż to, jak podajesz swoje treści.

Jeśli weźmiemy wdzięczny punkt widzenia degradacji, cała zawartość (tekst, obrazy, wideo, audio itp.) Zostanie podana w tym samym czasie na platformę, która jest uważana za największą platformę. Odtąd rozliczane są wersje mobilne, które po prostu ignorują lub usuwają znaczną część tej zawartości ze strony. Problem polega jednak na tym, że został już załadowany, czy dana platforma go potrzebowała, czy nie. Dostarczamy więcej treści niż jest to konieczne na platformie, która często wiąże się z najwolniejszymi prędkościami pobierania. Widzisz w tym coś złego?

Z punktu widzenia mobilnego, zaczynamy od załadowania absolutnie niezbędnych rzeczy na mniejsze platformy. Prowadzi to do szybszego działania, które pozwala uniknąć niepotrzebnych opóźnień. Dodatkowe zasoby są ładowane ściśle według potrzeb na platformy, które dobrze sobie z nimi radzą.

Co z responsive design?

Jak to wszystko pasuje do responsywnego designu, drugiego trendu, który przejmuje Internet? Dobra wiadomość jest taka, że ​​te dwie strategie nie są konkurencyjne. Można powiedzieć, że zostały stworzone dla siebie.

Elastyczne projektowanie opiera się na koncepcji zapytań o media, które są kierowane na określone urządzenia i rozmiary rzutni. Mając to na uwadze, możesz zakodować swój początkowy styl CSS, biorąc pod uwagę mobilną perspektywę, a następnie użyć zapytań o media, aby wybiórczo wyświetlać dodatkowe style wraz ze wzrostem rozmiaru rzutni.

Jest to prawdopodobnie przeciwieństwo metody, którą zwykle stosuje się przy responsywnym projektowaniu: zacznij od dużej, a następnie zmniejsz. Biorąc pod uwagę powyższe argumenty, istnieje wiele logiki przy tworzeniu zapytań o media od małych do dużych.

Big Fat Minusem

Brawo dla pierwszego projektu mobilnego. To najlepsza rzecz, aby trafić do sieci od czasu owsianki. Dlaczego więc nie jestem tym podekscytowany? Dlaczego, mimo że lubię projektowanie responsywne, często wręcz unikam tematu projektowania stron internetowych na telefony komórkowe?

Od razu mam do czynienia z mniejszym ekranem, mniejszą ilością zasobów i masą kolejnych bólów głowy.

Odpowiedź tutaj jest prosta: nie jest ani zabawna, ani łatwa. Na pewno responsywny projekt jest trudny, ale pozwala mi zginać mięśnie układu i korzystać z wielu wbudowanych funkcji przeglądarki, aby wykonywać fajne wyczyny. Elastyczny design sprawia, że ​​moje pudełko z zabawkami jest większe, a nie mniejsze.

Jednak dzięki projektowi opartemu na urządzeniach mobilnych uderzają mnie w głowę ograniczenia związane z pierwszym krokiem. To wcale nie jest zabawne! Od razu mam do czynienia z mniejszym ekranem, mniejszą ilością zasobów i masą kolejnych bólów głowy. Co więcej, to po prostu nie jest wygodne terytorium. Większość mojej kariery w projektowaniu stron internetowych spędziłem na komputerze, tworząc doświadczenia wokół najechania myszką i kliknięcia, a nie na dotyk. Robiłem dużo pracy mobilnej, ale nie nazwałbym tego moim mocnym ubraniem.

Co najważniejsze, ze ścisłej perspektywy projektowej bardzo trudno mi się zanurzyć w projekt, jeśli zaczynam od telefonu komórkowego i pracuję na wyższym poziomie. Wspomniałem o tym w niedawnym artykule do wielu „huzzahs” w komentarzach, a nawet słyszałem, jak czołowi profesjonaliści z branży śpiewają podobną melodię.

Rising To The Challenge

Spójrzmy sekundę na moje argumenty za i przeciw podejściu do projektowania mobilnego. W kategorii „za” mamy proste i logiczne argumenty, które trudno bagatelizować. W kategorii „przeciw” mam dużo zawodzenia i osobistych wahań. Jak myślisz, po której stronie wygrywa ta bitwa?

Muszę zrezygnować z odrobiny komfortu w imię lepszego projektanta.

Być może masz lepsze argumenty przeciwko mobilności niż ja, ale jeśli spojrzę na to z obiektywnego punktu widzenia, to oczywiste jest, że podejście mobilne jest silniejsze.

Oznacza to, że prawdopodobnie muszę się opanować i podjąć wyzwanie rozpoczęcia projektów z mobilnym punktem widzenia. Jeśli nie czuję się komfortowo w projektowaniu na urządzenia mobilne, to dobrze, oznacza to, że mam przestrzeń do rozwoju i technik do nauki.

Ostatecznie, jeśli moje powody przyjęcia podejścia mobilnego są zorientowane na użytkownika, a moje powody przeciwne są osobiste, to muszę zrezygnować z odrobiny komfortu w imię bycia lepszym projektantem.

Co Cię powstrzymuje?

Teraz już wiesz wszystko o tym, jak świetne dla użytkowników jest projektowanie witryn mobilnych. Wiesz, że duże firmy, takie jak Google, przyjmują takie podejście i możesz zobaczyć korzyści płynące z przepływu pracy na urządzeniach mobilnych. Więc co Cię powstrzymuje?

Czy podzielasz moją perspektywę, że mobile-first jest trudną strategią do wdrożenia i zgadzasz się, że po prostu musisz zrobić skok? A może powstrzymuje Cię coś poważniejszego?