Mobilny Projekt Responsywny 101

Z zaledwie 58 sekund na zegarze, San Francisco 49ers ciągnął Dallas Cowboys 27-21, z podróży do Super Bowl na linii.

Joe Montana wziął strzał i skręcił w prawo, szukając swojego biegnącego Freddiego Solomona. Solomon powinien być szeroko otwarty, ale był doskonale osłonięty przez Bezpieczeństwo kowbojów.

W ułamku sekundy, podczas biegania, obracania i patrzenia … Montana podjęła decyzję o dostosowaniu gry.

Cofnął się, unosząc wysokie przejście, które dla wszystkich wyglądało jak rzut. Znalazł opuszki palców Dwighta Clarka w strefie końcowej, kończąc jedną z najlepszych zagrań w historii NFL.

Bez zdolności Montany do adaptacji, 49ers przegraliby ten mecz, tracąc swoje pierwsze zwycięstwo w Super Bowl.

Możliwość naturalnej i automatycznej adaptacji jest kluczowym kluczem do przetrwania i sukcesu. To prawda w sporcie, przyrodzie, biznesie i tak, tworzeniu stron internetowych.

Przyjrzyjmy się jednej z najbardziej ekscytujących — i wyzwalających — zmian, które pojawiły się w najnowszej historii sieci …

Czym jest Mobile responsive design?

Gdy strona internetowa jest responsive, układ i / lub treść reaguje (lub dostosowuje) w zależności od rozmiaru ekranu, na którym jest prezentowana.

Responsywna strona internetowa automatycznie dostosowuje się do urządzenia, na którym ją czytasz.

Zazwyczaj istnieją cztery ogólne rozmiary ekranu, do których projekt responsywny został skierowany: panoramiczny monitor biurkowy, mniejszy komputer stacjonarny (lub laptop), tablet i telefon komórkowy.

Jak widać w poniższych przykładach, gdy ekran staje się mniejszy, zawartość zmienia się i zmienia się na najlepszy wyświetlacz dla każdego ekranu …

Image of Responsive Design in the Wild

Dlaczego warto dbać o mobilny responsywny projekt?

Krótko mówiąc, Ty (wydawca cyfrowy, programista i projektant) powinieneś się tym przejmować, ponieważ chcesz, aby odwiedzający Twoją witrynę mieli jak najlepsze wrażenia, bez zmuszania ich do adaptacji siebie.

Zasadniczo istnieją dwa sposoby, aby zapewnić swoim odbiorcom dobre wrażenia dzięki responsywnemu projektowi:

1. Zoptymalizuj layout Twoich treści.

Jeśli czytelnik przegląda Twoją witrynę z telefonu komórkowego, na ogół nie ma wiele nieruchomości ekranowych do pracy. Telefony dzisiaj zazwyczaj automatycznie pomniejszają, tak aby cała strona była widoczna na ekranie. To can bądź dobry, ponieważ daje czytelnikowi dostęp do całego wzroku, ale może być również frustrujący, gdy próbuje znaleźć informacje, które znajdują się w maleńkiej części prawego górnego rogu ekranu. Jeśli możesz przenosić niektóre rzeczy, powiększać niektóre rzeczy i nie mieć tylu kolumn, zapewnisz swojemu mobilnemu czytnikowi znacznie lepsze wrażenia.

2. Dostosuj zawartość to pokazane.

Jeśli jesteś właścicielem restauracji, a potencjalny klient przegląda Twoją witrynę z telefonu komórkowego, są szanse, że nie są tak zainteresowani tym, jak ładne Twoja strona jest-Twój foody blog z niesamowitym pokazem slajdów pysznych potraw przewijających się z boku na bok nie jest zbyt przydatny w tej sytuacji. Chcą wiedzieć, jakie są Twoje godziny pracy, gdzie się znajdujesz, jak dokonać rezerwacji i chcą spojrzeć na twoje menu.

Twój potencjalny klient przeglądający z komputera stacjonarnego prawdopodobnie nie chce teraz jeść i nie spieszy się, aby zobaczyć, gdzie się znajdujesz i jaki jest Twój numer telefonu. Najprawdopodobniej chce sprawdzić, czy oferujesz dobrą atmosferę i jakie jedzenie jest dostępne.

Są to oczywiste uogólnienia, ale widać korzyści płynące z prezentowania różnych treści ludziom w różnych warunkach oglądania ekranu.

Mobilny responsywny projekt dba o to “w locie” i bez wielu wersji witryny do utrzymania.

Jak łatwo stworzyć mobilną responsywną stronę internetową

Wszystko to może być nowe dla wielu z was i dość onieśmielające, ponieważ wymaga nie tylko zmiany kodu i projektu, ale także ogólnej strategii i filozofii internetowej.

Na szczęście nasz zespół w StudioPress ma swoje peleryny i jest tutaj, aby ci pomóc.

Napisaliśmy kilka artykułów, które szczegółowo opisują, jak rozpocząć pracę nad własnym responsywnym projektem, zaczynając od filozofii, która się za nim kryje, a następnie przechodząc do faktycznego kodowania elastycznych sieci i zapytań o media:

  • 2 niezbędne elementy doskonałego mobilnego responsywnego projektu
  • Mobilny Responsywny Projekt: Elastyczna Siatka
  • Jak sprawić, aby Twoja strona reagowała na różne urządzenia mobilne

Jeśli wszystko, co nie jest twoją filiżanką herbaty, stworzyliśmy kilka motywów, które są responsywne po wyjęciu z pudełka. Możesz je sprawdzić tutaj.

Bądźcie czujni, ponieważ jesteśmy w trakcie dostosowywania każdego motywu Genesis …

Mobilny responsywny design to przyszłość sieci

Responsywny projekt mobilny polega na automatycznym dostarczaniu odbiorcom żądanych treści w kontekście, w jakim je przeglądają.

Jest to rewolucyjne rozwiązanie dla wydawców internetowych, ponieważ (w przypadku większości) responsywny projekt eliminuje potrzebę tworzenia wielu wersji witryny lub kosztownego tworzenia i konserwacji aplikacji.

Jedna strona, wiele wersji.

Doskonała prostota dla wydawcy, Wielka użyteczność dla czytelnika.

Total
0
Shares
Related Posts