Responsywny design w świecie korporacyjnym

Kiedy już masz pełną płytę z pracą klienta, może być trudno dostać się do nowych technologii. Responsywny design jest teraz bardzo popularnym zwrotem, ale nie trzeba go wymuszać na kliencie, chyba że użytkownicy skorzystają z niego.

W 352 Media Group niedawno mieliśmy okazję stworzyć w pełni responsywną stronę dla klienta, Purple Communications. Tworzą oprogramowanie dla osób z ubytkiem słuchu, którzy w przeciwnym razie nie mogliby zadzwonić. Korzystając z komputera, telefonu, wideotelefonu lub innego urządzenia elektronicznego, mogą komunikować się z innymi za pomocą usługi przekazywania wideo.

Purple Communications oferuje aplikacje dla wielu platform telefonicznych, więc znaczna część ich ruchu internetowego pochodzi z urządzeń mobilnych. Patrząc na ich ruch, stało się jasne, że najlepszym rozwiązaniem dla klienta jest stworzenie w pełni responsywnej strony. Nasza firma wcześniej zajmowała się witrynami mobilnymi, ale po raz pierwszy ta witryna obsługiwała zarówno użytkowników mobilnych, jak i stacjonarnych. Jeśli interesuje Cię włączenie funkcji responsywnego projektowania witryn do witryny firmy lub klienta, oto kilka wskazówek, o których należy pamiętać:

Nie kompromisów w projektowaniu

Istnieją projekty, które nadają się do reagującego, płynnego układu o wiele bardziej niż inne. Minimalistyczny projekt z prostym tłem może wymagać tylko kilku poprawek, aby stały się płynne. Kuszenie tego rodzaju projektu na kliencie może być bardzo kuszące, ponieważ znacznie ułatwiłoby to tworzenie witryny.

Jedną z przewag konkurencyjnych 352 Media Group jest nasz wielokrotnie nagradzany projekt. Kiedy początkowo ulegałem pokusie minimalistycznego projektu, zmieniłem zdanie i postanowiłem dowiedzieć się, jak możemy w odpowiedni sposób wykorzystać projekt, który chcieliśmy.

Istnieją trzy różne sposoby opracowania responsywnego projektu. Stworzyłem dla nich nazwy, aby łatwiej je omówić:

Stepped Layouts

Ta technika używa zapytań o media do wyświetlania różnych arkuszy stylów w ustawionych rozdzielczościach. Tradycyjnie tworzysz trzy różne projekty - jeden dla komputerów stacjonarnych, jeden dla tabletów i jeden dla telefonów.

Ta metoda była bardzo atrakcyjna ze względu na moją decyzję o zaprojektowaniu strony, która mogłaby być dość skomplikowana w produkcji płynu. Zasadniczo moglibyśmy wziąć nasz istniejący proces tworzenia strony i po prostu ją podzielić przez trzy. Możemy nawet użyć wykrywania po stronie serwera, aby upewnić się, że masz tylko plik CSS, który jest potrzebny do rozwiązania problemu.

Problem z tą techniką polega na wybraniu rozdzielczości, dla których zamierzasz zoptymalizować witrynę. Większość ludzi używa liczb na urządzeniach z iOS - 768px do projektowania tabletów i 320px do mobilnego projektu. Ale ze wszystkimi dostępnymi smartfonami i tabletami jest mnóstwo różnych rozdzielczości. Ponieważ aplikacje Purple Communications są dostępne dla wielu różnych telefonów, chcieliśmy zapewnić każdemu użytkownikowi optymalne wrażenia. Tak więc, chociaż myślę, że ta technika byłaby idealna dla witryny na iPhone'a, nie pasowałaby ona do naszych potrzeb w tym projekcie.

Płynna siatka

Innym sposobem na to, aby Twoja witryna była responsywna, jest użycie szerokości procentowych, aby wszystko było skalowane przy użyciu okienka ekranu aż do 0. Dzięki tej metodzie skonfigurujesz siatkę procentową, która wykona główną pracę. Po tym korzystasz z zapytań o media, aby poprawić ustawienia różnych ekranów. Ta metoda ma wyraźną przewagę nad metodą stopniową, ponieważ strona będzie zoptymalizowana dla każdej rozdzielczości, w przeciwieństwie do zaledwie kilku.

Wadą jest to, że niektóre projekty mogą być trudniejsze do wykładniczego. Przez długi czas rozważałem tę metodę, próbując dowiedzieć się, jak zakodować kłopotliwe obszary. Używamy wspólnej metody określanej jako technika drzwi przesuwnych dzięki czemu można użyć pojedynczego obrazu, aby utworzyć pojemnik o szerokości i skomplikowanych krawędziach. Jeśli go nie używasz, zdecydowanie obejrzyj ten tutorial, ponieważ jest to fantastyczna technika. Ale nawet przy tym i kilku innych rzeczach w naszym arsenale, byłoby to dość trudne do zniesienia.

Fluid / Stepped Hybrid

W końcu zdecydowałem się na połączenie dwóch metod. Zastosowaliśmy technikę schodkową, aby wykonać jeden projekt na biurko, a następnie jeden krok w dół do płynnej konstrukcji o szerokości 960 pikseli. Oznaczało to, że na komputerze nasz proces był prawie taki sam jak normalny projekt. Obsługujemy rozdzielczości 1024 × 768 i nowsze na komputery stacjonarne, dlatego nasze witryny mają standardową szerokość 960px (co pozwala na pionowy pasek przewijania oraz inną przeglądarkę i system operacyjny Chrome). Każde okno o tej szerokości zwykle pokazuje pasek przewijania.

Zamiast próbować wybrać, która rozdzielczość ma największy sens dla rozmiaru tabletu, po prostu ustawiliśmy go tam, gdzie wszystko pod obszarem witryny o wielkości 960px uruchamia układ płynów. W ten sposób nikt nigdy nie otrzyma budzącego lęk poziomego paska przewijania.

Jako niewielki dodatkowy bonus, tablet (o szerokości co najmniej 960px) oglądający stronę w trybie poziomym otrzymuje pełną wersję komputerową. Pamiętaj, że prawdopodobnie będziesz chciał zrobić kilka drobnych poprawek za pomocą zapytań o media, aby ułatwić sobie nawiązywanie połączeń i przycisków.

Najpierw mobilna

Jeśli wykonałeś jakieś badania dotyczące responsywnego projektowania, na pewno usłyszałeś mantrę rozwoju na urządzenia mobilne, co jest zdecydowanie czymś, o czym powinieneś pamiętać. Ponieważ wszyscy tak długo zajmujemy się tworzeniem witryn na komputery stacjonarne, bardzo łatwo jest spojrzeć na zapytania o media w niewłaściwy sposób. Możesz pomyśleć: "Wszystko, co muszę zrobić, to zrobić kilka nowych zdjęć i umieścić trochę nowego CSS w zapytaniu o media, a moja strona będzie działać również na telefonach." Chociaż to prawda, jest również całkowicie wstecz.

Choć stały się tak niesamowite, jak smartfony, wciąż nie są tak potężne jak komputery stacjonarne. Ponadto treści są często konsumowane w drodze. Ale postępując zgodnie z naszą wcześniejszą logiką, optymalizujemy witrynę dla mniej wydajnych urządzeń na wolniejszych połączeniach, dodając CSS i obrazy. Kiedy już to przemyślisz, zdasz sobie sprawę, że musisz zmienić swój przepływ pracy.

Najtrudniejszą częścią jest wykonanie tej pracy img tagi. Jeśli stosujesz sprawdzone metody, będziesz mieć zoptymalizowane obrazy do różnych rozdzielczości. Najtrudniejszą częścią jest upewnienie się, że pobierasz tylko obraz, którego potrzebujesz. Ten problem może być artykułem sam w sobie, ale na szczęście Jason Grigsby już skompilował lista metod szybkiego reagowania oraz ich zalety i wady.

Po tym wszystkim, wszystko, co musimy zrobić, to CSS. Mając mentalność "mobilna pierwsza", utworzymy plik mobile.css, który będzie zawierał cały CSS wymagany przez telefon. Będzie to jedyny plik do pobrania przez telefon. Następnie utworzymy drugi plik o nazwie desktop.css, który będzie bazował na i nadpisuje style bazowe ustalone w pliku mobile.css. Aby upewnić się, że telefony / tablety są mobilne. Tylko komputery stacjonarne i komputery stacjonarne otrzymują pliki mobile.css i desktop.css, nasze linki wyglądają tak:

Ta kombinacja zadziałała do tej pory dla wszystkiego, co przetestowałem, z wyjątkiem wersji Internet Explorer przed 9. Ponieważ standardem naszej firmy jest obsługa IE7 +, musieliśmy dokonać ostatniego poprawienia. Zauważysz, że mój powyższy kod działa na serwerze. Na zapleczu sprawdzamy wersję IE, a jeśli jest mniejsza niż 9, zmieniamy atrybut media na "screen, projection". To działało dla nas najlepiej, ale jeśli nie uruchamiasz niczego po stronie serwera, możesz zamiast tego użyć answer.js.

Oznacza to, że nasz CSS na pulpicie nie będzie tak zoptymalizowany, jak w zwykłej witrynie. Ale jedyną ofiarą, którą robimy, jest pobranie lekkiego pliku CSS, który następnie nadpisujemy tam, gdzie potrzebujemy. Musieliśmy gdzieś pójść na kompromis, a ponieważ ciągle intonujemy, "najpierw mobilne", wiemy, że to jest lepsze niż alternatywa.

Nadal oferuje kontrolę klienta

W 352 Media Group wierzymy, że dajemy klientowi pełną kontrolę nad jego witryną. Po zakończeniu programowania przekazujemy cały kod źródłowy. Zapewniamy również niestandardowy system CMS, który pozwala klientowi zarządzać stronami, nawigacją i mapą witryny. Podobnie jak design, to standard, na który nie chcieliśmy iść na kompromis, więc mieliśmy kilka dodatkowych przeszkód.

Jednym z najtrudniejszych interfejsów do przeniesienia na telefon komórkowy jest nawigacja. Jest to problem, ponieważ jest to również jeden z najważniejszych interfejsów w witrynie. Pierwszym pytaniem, które musisz zadać, jest to, czy użytkownicy mobilni potrzebują szybkiego dostępu do całej nawigacji, czy też są zainteresowani tylko kilkoma kluczowymi. Jeśli potrzebują całej nawigacji, a jest więcej niż cztery główne elementy, myślę, że jednym z najlepszych rozwiązań jest grupowanie ich w