Responsywne projektowanie stron internetowych jest modne już w tej dekadzie i jest idealne dla świata z wieloma ekranami, w którym żyjemy. Jednak kompromisem w tym zakresie jest wydajność dzięki większym rozmiarom plików.
Skłoniło to niektórych ekspertów do powiedzenia, że podobnie jak we wczesnych latach Flash, projektowanie responsywne jest czymś, z czego wszyscy moglibyśmy się podekscytować bez żadnego dobrego powodu. Jednak, chociaż obecnie występują problemy z wydajnością, można je w pewnym stopniu przezwyciężyć, wprowadzając niewielkie poprawki, kompresję i zmianę rozmiaru obrazu.
Responsywny projekt ładuje wszystkie te same elementy HTML na każde urządzenie, w tym te przeznaczone na tablety i komputery stacjonarne. Oznacza to, że często dostarczana jest cała zawartość, w tym obrazy i skrypty, niezależnie od urządzenia, na którym są wyświetlane.
Badanie przeprowadzone w zeszłym roku wykazały, że 86% aktywnych obecnie stron internetowych dostarcza pełną stronę na urządzenia mobilne. Jest to wyraźnie trend do techniki projektowania, która wymaga rozwiązania, jeśli mamy zatrzymać postęp rozdętych stron internetowych w jej ślady.
W tej chwili responsywny projekt zwiększa rozmiary stron i jest to trend, którym należy się zająć, zwłaszcza gdy weźmiemy pod uwagę, że 57% użytkowników mobilnych odejdzie, jeśli strona nie zostanie załadowana w ciągu 3 sekund.
Dla tych, którzy już mają projekt na miejscu i chcą go teraz zoptymalizować, Mobitest może być używany do mierzenia wydajności, aby kontynuować i zająć się nią. Oczywiście przy planowaniu projektu optymalizacja będzie łatwiejsza do wykonania na tym etapie, a wydajność powinna zawsze być uważana za istotną część projektu, a nie po namyśle.
Aby zwiększyć wydajność, należy zmniejszyć rozmiar stron i zasobów załadowanych do niego. Można to zrobić za pomocą różnych technik, bez poważnego zmieniania wyglądu witryny.
Pierwszą rzeczą, którą należy rozważyć, jest zapewnienie, że tylko potrzebne zasoby są wysyłane do urządzenia docelowego. Można tego dokonać, minimalizując liczbę żądań HTTP, dzięki czemu użytkownik spędza mniej czasu na oczekiwaniu na załadowanie DOM. Można to z kolei zrobić, kompresując zasoby CSS i JavaScript, dla których narzędzia takie jak Kompas - można wykorzystać framework CSS open source. Pozwala to programistom na tworzenie czystszych znaczników i tworzenie duszków i rozszerzeń przy minimalnym nakładzie pracy.
W odniesieniu do JavaScript, narzędzia takie jak UglifyJS może być użyty, który kompresuje kod.
Można to uznać za ważną technikę, jeśli chodzi o projektowanie responsywne, ponieważ można jej użyć do upewnienia się, że użytkownicy telefonów komórkowych i smartfonów nie pobierają aspektów witryny, które spowalniają działanie lub nie będą ich używać.
Ładowania warunkowego można użyć do zatrzymania ładowania wszystkich rodzajów treści, w tym widżetów społecznościowych, obrazów, map i wielu innych. W tym miejscu należy zwrócić uwagę, że strona powinna być dokładnie przetestowana na każdym etapie optymalizacji, aby łatwo było zobaczyć, co zmieniło się wraz z upływem czasu.
Wszyscy wiemy, że zdjęcia są zwykle odpowiedzialne za zajmowanie największej ilości kilobajtów na stronie internetowej. Można również bezpiecznie powiedzieć, że obrazy przeznaczone dla przeglądarki na komputery będą słabsze, gdy zostaną dostarczone na urządzenie mobilne.
Jeśli strona ma również wiele starszych treści, to będzie to miało wpływ na wydajność jeszcze bardziej i jakiś sposób, aby uniemożliwić zaimplementowanie tej treści. Można to zrobić zmieniając znaczniki, zmieniając elementy src lub img, rozwiązanie PHP Adaptacyjne obrazy jest prawdopodobnie łatwiejsze. Oprogramowanie wykrywa rozmiar ekranu i automatycznie tworzy, buforuje i dostarcza odpowiednio skalowane osadzone obrazy HTML, bez konieczności zmiany znaczników. Do użycia w połączeniu z technikami Fluid Image, jest to poręczne rozwiązanie, które zaoszczędzi wiele czasu. Adaptive Images używa jednego pliku htaccess, jednego pliku php i pojedynczego wiersza JavaScript w celu określenia rozmiaru ekranu odwiedzających witrynę.
Warto również pomyśleć o tekście, ponieważ będzie on zawijał się naturalnie, gdy urządzenie jest zwężone i może powodować problemy z wyświetlaniem. FitText to narzędzie, które może pomóc rozwiązać ten problem, wtyczkę jQuery, która automatycznie aktualizuje rozmiar czcionki, z opcjami dotyczącymi minimalnych i maksymalnych dozwolonych rozmiarów.
Jest to idealne rozwiązanie w przypadku nagłówków, które mogą być źle wyświetlane na urządzeniu mobilnym i pozwala na ignorowanie określonego rozmiaru czcionki CSS3. Jednak FitText jest przeznaczony tylko dla nagłówków i nie powinien być używany w tekście akapitu.
Podczas gdy responsywny projekt ma swoje problemy, podobnie jak każda stosunkowo nowa technologia lub technika, nadal warto wybrać budowę witryny w ten sposób. Nikt nie chce cofać się i chociaż łatwiej jest budować mobilną stronę internetową, zdecydowanie lepiej być tak innowacyjnym, jak to tylko możliwe.
Google zgadza się, ich rada jest używanie elastycznego projektowania jako najlepszego sposobu na projektowanie mobilne. Oczywiście dla wyszukiwarek oznacza to, że mają tylko jeden adres URL do zaindeksowania, a nie liczne adresy URL dla tego, co jest w istocie tą samą witryną, więc naprawdę leży to w ich interesie.
Jednak w tym czasie manii udostępniania się w społeczeństwie ma to również sens, ponieważ użytkownicy mobilni mogą udostępniać stronę osobie korzystającej z komputera. Aby stworzyć jednolite doświadczenie, powinno to zapewnić tę samą treść.
Co więcej, posiadanie responsywnej strony zwiększa produktywność siły roboczej, ponieważ jest o wiele mniej do zrobienia. Dotyczy to treści, aktualizacji i SEO, ponieważ będzie trzeba to zrobić oddzielnie, jeśli zbudowane zostaną różne witryny.
Urządzenia mobilne i tablety stają się normą łączenia się z Internetem i surfowania w tej niemal erze post-PC. Sprzedaż tabletów na całym świecie wzrosła w ciągu zaledwie jednego roku, ponad dwukrotnie w tym czasie i wielu konsumentów wybiera teraz różne urządzenia z systemem Android, a także iOS.
Nie ma wątpliwości, że do tej pory projekt reaguje pozytywnie, pomimo problemów z wydajnością. Według jednego raportu , która zwróciła się do najlepszych światowych marek o to, że posiadanie responsywnej witryny wpłynęło na ruch, znacznie wzrosły wizyty na wszystkich urządzeniach.
Obejmował on średni wzrost o 23% dla użytkowników mobilnych, a także obniżony współczynnik odrzuceń o 26%, a odwiedzający spędzali na witrynach około 7,5% więcej czasu niż wcześniej.
O'Neill, modny dostawca odzieży do surfingu, informuje o współczynniku konwersji na iPadach i iPhone'ach o 65,7% wyższym w wyniku stworzenia responsywnej witryny. Spowodowało to wzrost przychodów o 101,2% tylko na tych urządzeniach.
Jeśli chodzi o urządzenia z Androidem, współczynnik konwersji był jeszcze lepszy i wyniósł 407,3%, co stanowiło ogromny wzrost przychodów o 591,4%. Mniejszy współczynnik konwersji był widoczny na urządzeniach innych niż mobilne, chociaż wzrost był nadal widoczny.
To tylko jedna z marek, które ujawniają swoje dane i trudno jest uzyskać dane od innych w tej chwili, podobnie jak miało to miejsce w przypadku mediów społecznościowych sprzed kilku lat. Jednak w pewien sposób udowadnia, że zwrot z projektowania responsywnej witryny może być znaczny.
Mając to na uwadze, jaki jest kolejny powód, dla którego projektant powinien zacząć odpowiednio reagować na swoich klientów i starać się, aby działali tak dobrze, jak to tylko możliwe? Nie ma ani jednego, a ci projektanci, którzy nie chcą zadawać sobie trudu, aby nauczyć się projektować, budować i optymalizować witrynę za pomocą elastycznych technik, mogą znaleźć się w prochu.
67% użytkowników twierdzi, że kupiło je za pośrednictwem witryny mobilnej i uważa, że korzystanie z internetu mobilnego wyprzedzi ją w przyszłym roku. Mając to wszystko na uwadze, łatwo zrozumieć, dlaczego firmy będą coraz bardziej zainteresowane najlepszymi rozwiązaniami mobilnymi, które mogą zaoferować.
Responsywny projekt może być w fazie początkowej, ale wydaje się oczywiste, że popyt rynkowy sprawi, że szybko się rozwinie, dlatego warto nauczyć się jak najwięcej aspektów dyscypliny, jak to możliwe teraz.
Jakie techniki wykorzystałeś do optymalizacji responsywnych stron? Czy dostarczanie treści alternatywnych neguje korzyści z elastycznego projektowania? Daj nam znać w komentarzach.