Czy masz "responsywną stronę"? To jest strona z układem, który zmienia się w zależności od urządzenia odwiedzającego i rozmiaru ekranu. Responsive web design jest obecnie najlepszą praktyką branżową. Jest zalecany przez Google i znajduje się w milionach witryn w Internecie. Istnieje jednak duża różnica między posiadaniem strony internetowej, która po prostu "pasuje" do różnych rozmiarów ekranu i posiada witrynę, która jest naprawdę elastyczna.
Rutynowo widzę, jak firmy przeprojektowują swoją stronę internetową i wypuszczają informację prasową wychwalającą zalety nowego, przyjaznego dla urządzeń mobilnych designu. Kiedy odwiedzam te witryny, często odnajduję układ, który rzeczywiście zmienia się i dopasowuje do różnych ekranów, ale jest tak daleko, na ile pozwala na to reakcja. To nie wystarczy. Prawdziwie responsywna strona internetowa nie ogranicza się tylko do dopasowania do mniejszego lub większego ekranu. Na tych stronach znajdziesz również następujące ważne cechy.
1. Zoptymalizowana wydajność
Nikt nie lubi czekać na załadowanie strony internetowej, a gdy ktoś używa urządzenia mobilnego z połączeniem, które może być mniej niż idealne, ważniejsza jest potrzeba szybkiego załadowania strony.
Jak więc zoptymalizować wydajność witryny? Jeśli zaczynasz od nowej witryny w ramach przeprojektowywania, powinieneś wskazać, aby utworzyć budżet wydajności w ramach tego projektu. Jeśli pracujesz z istniejącą witryną i nie zaczynasz od zera, pierwszym krokiem jest sprawdzenie wydajności witryny, aby zobaczyć, gdzie stoisz dzisiaj.
Gdy masz już podstawę, na której Twoja witryna jest pod względem wydajności, możesz zacząć wprowadzać niezbędne ulepszenia w celu zwiększenia prędkości pobierania. Świetne miejsce do rozpoczęcia jest prawdopodobnie z obrazów witryny. Zbyt duże obrazy są głównym powodem powolnego wczytywania witryn, więc optymalizacja obrazów do wyświetlania w sieci może naprawdę pomóc witrynie z punktu widzenia wydajności.
W rzeczywistości poprawa wydajności witryny i szybkość pobierania to korzyść, którą docenią wszyscy odwiedzający. W końcu nikt nigdy nie skarżył się, że strona załadowana jest "zbyt szybko", ale jeśli załadowanie strony zajmie zbyt dużo czasu, to absolutnie sprawi, że ludzie nie będą reagować "na ekranie", czy nie.
2. Hierarchia treści inteligentnych
Gdy witryna jest wyświetlana na dużym ekranie, możesz układać treści na różne sposoby, z uwagi na dostępną dużą powierzchnię ekranu. Często możesz dopasować ważne wiadomości i obrazy, aktualizacje wiadomości, informacje o wydarzeniach i nawigację po stronie na ekranie jednocześnie. Dzięki temu użytkownik może łatwo i szybko skanować zawartość całej strony i decydować, co jest dla niej ważne.
Ten scenariusz zmienia się dość dramatycznie, gdy projekt strony zostanie zmieniony i przekształcony na urządzenia z małym ekranem, na przykład telefon komórkowy. Nagle pracujesz z ułamkiem ekranu, który posiadałeś wcześniej. Oznacza to, że musisz zdecydować, co pojawi się najpierw na stronie, co nastąpi, itp. Zamiast wszystkiego, co widzimy na raz, prawdopodobnie masz tylko miejsce na pokazanie jednej lub dwóch rzeczy (z których jedna jest prawdopodobnie nawigacją). Oznacza to, że należy podjąć decyzje dotyczące hierarchii. Niestety, często decyduje o tym, co jest pierwsze na ekranie, a potem drugie itd. To sposób, w jaki sama strona jest kodowana. Najłatwiej jest, budując responsywną stronę, wyświetlić najpierw wszystko, co jest pierwsze w kodzie, a następnie drugi element w kodzie i tak dalej. Niestety, to, co może być najważniejsze na jednym urządzeniu, może nie być tak krytyczne dla innego urządzenia. Prawdziwie responsywna witryna rozumie, że hierarchia treści powinna zmieniać się w zależności od różnych sytuacji i powinna być inteligentna pod względem tego, co wyświetla.
Ulepszenia w technikach CSS, w tym w CSS Grid Layout, Flexbox i innych, pozwalają projektantom stron internetowych i programistom na więcej opcji, jeśli chodzi o inteligentne układanie treści, zamiast być hamowanym przez dokładną kolejność obszarów zawartości w kodzie HTML. Wykorzystanie tych nowych technik układania staje się jeszcze ważniejsze, ponieważ krajobraz urządzeń i potrzeby użytkowników naszej witryny wciąż ewoluują.
3. Doświadczenia, które biorą pod uwagę mocne i słabe strony urządzenia
Pozostając na temat urządzeń - każde urządzenie, za pomocą którego ktoś może odwiedzić twoją witrynę, ma zarówno mocne, jak i słabe strony, które są nieodłączne dla tej platformy. Świetna, responsywna strona rozumie możliwości i ograniczenia różnych urządzeń i używa ich do tworzenia niestandardowych doświadczeń, które najlepiej pasują do urządzenia, z którego użytkownik może korzystać w danym momencie.
Na przykład telefon komórkowy zawiera wiele funkcji, których nie można znaleźć na tradycyjnym komputerze stacjonarnym. GPS to jeden z przykładów funkcji mobilnej (tak, możesz uzyskać ogólne informacje o lokalizacji również na komputerach, ale urządzenie GPS jest dużo dokładniejsze). Witryna może wykorzystywać informacje GPS do inteligentnego wysyłania szczegółowych informacji o konkretnych krokach lub specjalnych ofertach w zależności od tego, gdzie dokładnie się znajdują.
Innym przykładem tego zleceniodawcy w praktyce byłaby strona, która rozumie, jakiego rodzaju ekranu używa się i wysyła obrazy, które najlepiej pasują do tego ekranu. Jeśli masz ekran o dużej gęstości pikseli, możesz zdecydować się na wysyłanie obrazów o wyższej jakości do tego ekranu. Te same obrazy byłyby jednak bezcelowe na słabszym ekranie, a dodatkowa jakość zostałaby utracona, podczas gdy dodatkowy rozmiar pliku zostałby pobrany bez faktycznego powodu.
Naprawdę świetne strony responsywne biorą pod uwagę całe doświadczenie użytkownika i pracują nad dostosowaniem tego doświadczenia w oparciu nie tylko o typ urządzenia lub rozmiar jego ekranu, ale także o inne ważne aspekty sprzętu.
4. Treść z kontekstem
Początkowo responsywny projekt WWW otrzymał swoją nazwę ze względu na pomysł układu witryny odpowiadającego różnym rozmiarom ekranu, ale można odpowiedzieć na znacznie więcej niż tylko rozmiar ekranu. Opierając się na poprzednim przykładzie używania mocnych i słabych stron urządzenia, możesz wykorzystać te dane, a także inne dane, takie jak data i godzina, aby naprawdę dostosować stronę internetową.
Wyobraź sobie stronę internetową na duże targi. Podczas gdy responsywna strona zmieni układ stron witryny na różne ekrany, możesz również użyć daty, by określić, która treść jest najważniejsza. Jeśli jest to okres czasu poprzedzający zdarzenie, prawdopodobnie chcesz wyraźnie wyświetlać informacje rejestracyjne. Jeśli jednak wydarzenie faktycznie ma miejsce w tym momencie, rejestracja może nie być najważniejszą treścią. Zamiast tego możesz zdecydować, że harmonogram wydarzeń jest bardziej krytyczny, ponieważ jest bardziej odpowiedni dla bezpośrednich potrzeb tego użytkownika.
Idąc dalej, możesz wejść do GPS urządzenia, aby ustalić, gdzie naprawdę są na targach. Możesz przekazać im treści interaktywne na podstawie ich lokalizacji, pokazując im najbliższe kabiny lub sesje, aby rozpocząć.
5. Dostępność
Ostatnim przykładem, na którym przyjrzymy się, w jaki sposób witryna może naprawdę odpowiedzieć na potrzeby odwiedzających, jest zastanowienie się nad dostępnością strony. Strony internetowe powinny być dostępne dla jak największej liczby osób, w tym dla osób niepełnosprawnych. Twoja witryna powinna być dostępna dla kogoś, kto potrzebuje czytnika ekranu lub innego oprogramowania wspomagającego, aby uzyskać dostęp do jej treści. W ten sposób twoja strona odpowiada na ich potrzeby, ponieważ zapewniasz, że doświadczenie, choć inne dla niepełnosprawnych, jest nadal odpowiednie.
Odpowiadając na jak najwięcej punktów danych, a nie tylko na rozmiar ekranu, strona internetowa może być o wiele bardziej niż "przyjazna dla urządzeń mobilnych". Może stać się prawdziwie responsywnym doświadczeniem w każdym znaczeniu tego wyrażenia.
