Projekt adaptacyjny (projekt responsywny)

Rośnie liczba użytkowników korzystających z Internetu za pośrednictwem tabletów i telefonów komórkowych. Jak już wiesz, oznacza to, że nie wystarczy już zaprojektować dobrą stronę internetową, która będzie dobrze wyglądać na naszym komputerze: trzeba ją też oglądać na każdym urządzeniu mobilnym. Problem? Różne rozmiary i rozdzielczości ekranu. Dlatego tak trudno jest wykonać projekt, który dopasowuje się poprawnie do wszystkich mediów (słynny elastyczny projekt, przetłumaczone jako projekt adaptacyjny).

Oto kilka wskazówek, o których należy pamiętać podczas tworzenia projektu o tych cechach. Zwróć uwagę!

Wskazówki dotyczące projektowania adaptacyjnego

1. Stwórz prosty szablonMówiąc prosto, nie mam na myśli nijakiego. Mówię o struktura HTML Twojej witryny: im jaśniejszy, tym lepszy. Pamiętaj, że ekran komputera może zmieścić się w trzech pionowych kolumnach; na ekranie telefonu komórkowego zmieści się tylko jeden. Pomyśl o tym io tym, jak zmienisz położenie elementów.
2. Wyeliminuj wszystko, co niepotrzebneUnikaj efektów jQuery, animacji Flash i wszelkich innych kodów, które spowalniają ładowanie Twojej strony. Im mniej masz treści tego typu, tym szybciej ładuje się sieć.
3. Zdefiniuj styl css dla każdego „rozmiaru”Utwórz plik tiny.css, small.css i big.css (na przykład) działający na podstawie urządzenia, na którym jest wyświetlany. Na przykład:
   

   @import url (tiny.css) (min-width: 300px);

   @import url (small.css) (min-width: 600px);

   @import url (big.css) (min-width: 900px);

4. Najczęściej używane rozdzielczości320px/480px/720px/768px/900px/1024px
5. Uelastycznij swój szablonKiedy tylko możesz, pracuj z procentami zamiast ustalonymi kwotami. Oto kilka odpowiedników referencyjnych: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografia To ważniejsze niż kiedykolwiek Czasami ekran urządzenia może być tak mały, że wszystko, co widzisz, to tekst. Dlatego musimy bardzo uważnie dobierać najlepsze czcionki na naszej stronie, aby przy zmniejszaniu ich rozmiaru nie traciły na czytelności. Ponadto musimy wiedzieć, jak łączyć bardziej neutralne czcionki z innymi czcionkami o osobowości, które nadają sieci niezbędny charakter. Dlatego pierwszą wskazówką jest poświęcenie czasu na wybór czcionek, których zamierzasz użyć.
7. Korzystać obrazy wysokiej jakościW miarę zmniejszania się przestrzeni obrazy będą jej towarzyszyć. Wybierz te, które nie tracą jakości po zmniejszeniu i działają tak samo po skalowaniu. Obraz niskiej jakości sprawi, że Twoja witryna będzie wyglądać źle.
8. Twoje obrazy są zawsze widoczne pełnyZabezpiecz swoje zdjęcia przed obcięciem, dodając kod img (width: 100%;) do swojego css. W ten sposób mówisz urządzeniu, aby przeliczyło wysokość, jaką powinno dać obrazowi, aby jego szerokość była widoczna w stu procentach.
9. Wszystkie niskie ten sam adres URLZapomnij o subdomenach, takich jak www.mysite.com/mobile, ponieważ ten sam plik index.html w folderze głównym będzie działał na wszystkich urządzeniach (jeśli poprawnie wykonasz projekt adaptacyjny). Znasz już zalety: im mniej subdomen, tym szybsze będzie ładowanie strony.
10. Skorzystaj ze wsparcia: Miej wyobraźnię Dostęp do witryny internetowej z komputera stacjonarnego to nie to samo, co z iPada lub telefonu komórkowego. Za pomocą pierwszego będziesz nawigować w spokojny i spokojny sposób. Z tym drugim zrobisz to w bezczynnych godzinach i zamkniesz okno, gdy tylko się znudzisz. Skorzystaj z tych warunków, aby zabawiać użytkownika i sprawić, że będzie się dobrze bawić w ciągu tych kilku minut, które ci poświęci. Może kiedy wróci do domu, zdecyduje się odwiedzić Cię w bardziej zrelaksowany sposób.
11. Zainspirować się W publikacjach cyfrowych będziesz się zastanawiać, dlaczego ta rada. Bardzo łatwe: czasopisma cyfrowe (dobrze) wiedzą, jak skorzystać ze wsparcia, a ich projekt jest bardzo inteligentny. Zainspiruj się nimi i stwórz stronę internetową, którą trudno opuścić.

Więcej informacji - Magazyny cyfrowe

Źródło - splio, 960.gs, kolumna