10 szybkich lądowań na szczękach
"Responsive" to najnowszy ruch w rozwoju sieci - i taki, który jest bardzo potrzebny. Każdego dnia rośnie liczba urządzeń, platform i przeglądarek używanych do uzyskiwania dostępu do Internetu. Podczas gdy większość użytkowników nadal korzysta z tradycyjnych platform internetowych, zapotrzebowanie na płynne i adaptacyjne strony internetowe jest silniejsze niż kiedykolwiek.
Wielu projektantów wykorzystuje tę zmianę i tworzy spektakularne utwory, które świetnie się rozwijają w środowiskach mobilnych, tabletów i komputerów stacjonarnych.
Poniższe witryny łączą piękno z responsywnymi technikami projektowania witryn internetowych i naprawdę pokazują, co można osiągnąć dzięki niewielkiej innowacji. Więc chwyć popcorn i notatnik, będziesz chciał zwrócić uwagę.
StephenCaver.com
Kiedy się otworzysz ta strona na pulpicie jest od razu wciągająca. Odważny, czarny, uzasadniony nagłówek pięknie kontrastuje z niemal akwarelową jakością tła pustyni Mojave. Kiedy strona dostosuje się do rozmiaru urządzenia mobilnego, zmiana jest znacząca, a strona wciąż wygląda świetnie.
FoodSense.is
Dzięki szerokiemu układowi, czystym liniom i prostej strukturze ta strona to fantastyczny przykład minimalistycznego projektowania stron internetowych. Podczas przeglądania na tablecie lub urządzeniu mobilnym dostosowuje się bez kompromisów w zakresie kompozycji i przepływu.
Warface.co.uk
Wykorzystanie kolorów jest uderzające, a innowacyjne umieszczenie figurek 3D na pierwszym planie witryny naprawdę angażuje widza. Strona jest wyjątkowy i ekscytujący, a żaden wpływ nie jest tracony na urządzeniach mobilnych.
DanielVane.com
Znów tutaj projektant pozwala, by jego praca mówiła sama za siebie. Strona docelowa jest piękny w swojej pełnowymiarowej prostocie, a to idealnie przenosi się na telefon komórkowy, pozostawiając jedną szczególnie porywającą ilustrację, która zawiera subtelne logo.
SasquatchFestival.com
Ta strona jest zabawny i zabawny i wyjątkowy wśród innych witryn na tej liście. Pozbywają się czystej prostoty, aby bawić się kolorami, obrazami i ikonami w sposób, który wciąż udaje się dostarczyć stylu. Może to być trudne do zrobienia na małej przestrzeni, ale projektanci Sasquatch zarządzają bez wysiłku.
GravitateDesign.com
Wykorzystanie kształtu w ta strona od razu się wyróżnia. Unikając korzystania z ramek i zawartości, udało im się stworzyć witrynę, która prezentuje swoją pracę w najlepszym wydaniu.
VisualSupply.co
Podobnie jak w Warspace, to właśnie te zdjęcia naprawdę działają ta strona internetowa . Jest doskonale skonstruowany i wygląda pięknie na każdym urządzeniu.
StudioMds.co
Ciemne kolory można czasem przeoczyć w projektowaniu stron internetowych, ale Studio Mds poprawiają swoją treść dzięki odważnej decyzji. Układ dopasowuje się do rozmiaru ekranu mniejszego, tracąc jedynie zbędne linki.
ForefathersGroup.com
Ta strona ma świetny styl vintage i wykorzystuje teksturę, zdjęcia i czcionki do stworzenia tego. Opada pięknie (ale szkoda, że stracił tę małpę).
MapBox.com
Kolorystyka i wykorzystanie zdjęć dają Mapbox czysta przestrzeń, w której można zaprezentować swój produkt. Znowu prostota zwycięża nad złożonym lub wybrednym designem, i właśnie dlatego działa dobrze na mniejszym ekranie.
O czym należy pamiętać podczas projektowania
Teraz, gdy przyjrzeliśmy się gwiezdnym responsywnym witrynom, prawdopodobnie zaczynacie projektować własne. Ale zanim uciekniesz, oto kilka rzeczy do zapamiętania.
Zdjęcia
Jedną przeszkodą dla elastycznego projektowania jest sposób wyświetlania zdjęć przez urządzenie. MacBook Pro z wyświetlaczem Retina renderuje obraz w znacznie wyższej rozdzielczości niż telefon komórkowy, co często może powodować problemy. Jednym ze sposobów rozwiązania tego problemu jest przesłanie kopii zdjęć o wysokiej i niskiej rozdzielczości. Za pomocą CSS możesz określić, który obraz jest załadowany na podstawie rozdzielczości ekranu urządzenia. Jeśli używasz zdjęć seryjnych, upewnij się, że wypełniłeś opcję wyższego rez.
Określanie punktów przerwania
Często projekty responsywne są budowane wokół tak zwanych "punktów przełomowych" - lub rozdzielczości, w której zmienia się układ - w oparciu przede wszystkim o typowe rozmiary ekranu urządzenia. Problem z tym podejściem polega jednak na tym, że nie bierze on pod uwagę, jak bardzo zróżnicowane są rozmiary ekranu. Nie ma już "uniwersalnego" rozmiaru. Zamiast ustalać pułapy na 360px (mobilny), 768px (tablet) i 1024px (na pulpicie), lepiej pozwolić, by projekt przemawiał sam za siebie. Zacznij od ukończonego układu, a następnie zmień rozmiar okna, aż projekt się zepsuje - zrób to z punktu przerwania, a następnie kontynuuj. Przekonasz się, że Twoja strona płynie dużo płynniej.
Czy trafiłeś na fantastyczną, elastyczną stronę docelową? Czy sam zaprojektowałeś? Daj nam znać w komentarzach.