Projekt adaptacyjny (projekt responsywny)

Projekt adaptacyjny

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


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

3 komentarzy, zostaw swoje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Didac Rios powiedział

    Są rzeczy, z którymi się nie zgadzam.
    W punkcie 5 ... ponieważ 200px = 15,38% i następnych ... tego porównania odniesienia nie można dokonać bez żadnej miary macierzystej, rozmiar na piksel nie jest miarą względną, jak procenty!

    Określ obrazy o szerokości: 100% źle, nie sądzę, aby to była rekomendacja. Obrazy lepiej definiują je swoją szerokością i wysokością, dzięki czemu serwer zajmuje mniej czasu na przetworzenie informacji (nie musi obliczać swojego rozmiaru), a my poprawiamy szybkość ładowania strony (co jest bardzo ważne w adaptacyjnych lub responsywnych sieciach) projekt).

    Dodałbym już, mimo że jest to operacja nosa ... obrazy do ekranów siatkówki. Jeśli chcemy tworzyć responsywne strony internetowe, konieczne jest używanie obrazów do wyświetlania siatkówki, ponieważ wysoki% wyświetleń na urządzeniach mobilnych i tabletach korzysta z tych ekranów. Nie ma więc sensu wkładać wysiłku w zaprojektowanie ich na pół gazu.

    Dobra na resztę

    1.    Didac Rios powiedział

      W punkcie 5 umieszczają Cię w kontekście i opowiadają o całkowitym układzie 1300 pikseli z 3 kolumnami, po jednej 200, 300 i 1000.

      Jeśli prześlesz to do procentów, w ich przypadku są one tak, jak mówisz, 15,38% ((200 * 100) / 1300) (dziesiętnie poniżej, system międzynarodowy: P)

      Ale jeśli mówimy o układzie 500 pikseli i mamy 3 kolumny, jedną 200, drugą 200 i drugą 100 pikseli, procenty nie są już takie same, w tym przypadku 200px = 40% ((200 * 100) / 500)

      Będą to: 200 pikseli = 40% i 100 pikseli = 10%

      Chodź, jak już mówiłem, nie są one odniesieniem, co wskazujesz, są tylko odniesieniem do układu 1300px.

      pozdrowienia

      1.    Lua louro powiedział

        Co za porażka, masz absolutną rację na świecie! Dzięki jeszcze raz ;)