Responsywne projektowanie stron internetowych: jak to osiągnąć (2020)

W dzisiejszych realiach każda strona internetowa musi dobrze działać na urządzeniach mobilnych. Dynamika wzrostu korzystania z urządzeń mobilnych, delikatnie mówiąc, nie wskazuje na jakiekolwiek spadki. Jako programista będziesz musiał upewnić się, że iPhone, iPad, Android i inne urządzenia działają płynnie.

Urządzenia te są od siebie różne i w ciągu następnego pół dekady z pewnością do wyścigu zbrojeń dołączą kolejni uczestnicy. Przychodzi ich coraz więcej. W miarę jak to robią, coraz trudniej jest dostosować się do każdego konkretnego zestawu warunków.

Spis treści

Projektowanie responsywnych stron internetowych: kompletny przewodnik

Kiedy nowe urządzenie pojawia się na rynku, najczęściej stara się być oryginalne pod względem rozmiaru ekranu. Różnią się one w zależności od urządzenia. Telefony mają układ pionowy, a tablety – poziomy.

Nie można jednak przechodzić z jednego do drugiego, obracając go. Dla Twoich odbiorców jest to w 100% oczywiste i musisz stworzyć adaptacje dla całej gamy ekranów o różnych rozmiarach.

Ale poczekaj chwilę, zanim odłożysz te potencjalne nowe środki przekazu na półkę. Istnieje odpowiedź i jest to responsywne projektowanie stron internetowych. W skrócie oznacza to zaprojektowanie witryny internetowej tak, aby idealnie pasowała do każdego ekranu i sprawnie zmieniała proporcje niezależnie od rodzaju sprzętu mobilnego, jaki na nią rzucisz.

W tym celu należy wdrożyć elastyczne siatki, układy i pliki multimedialne. Przemyślane użycie Zapytania o media CSS odgrywa również ważną rolę w kreatywnym projektowaniu stron internetowych. Gdy osoba od niechcenia przeskakuje między swoim urządzeniem a komputerem, Twój rez powinien się odpowiednio dostosować.

Całe podejście ma swoje korzenie w eksperymentalnej teorii projektowania responsywnego, której nazwa pochodzi od tej samej nazwy, jednak w architekturze nieruchomości, a nie w kodowaniu.

Zasadniczo konceptualizuje tworzenie pomieszczeń, które mogą się zmieniać wraz ze zmianą liczby osób wchodzących i wychodzących z pomieszczenia w danym czasie.

Można powiedzieć, że ten punkt widzenia nie jest nowy, ponieważ częściowo te założenia są od dawna stosowane w tworzeniu stron internetowych. Są to układy płynne, skrypty automatycznie zmieniające format znaczników i całych stron.

Jednak responsywne projektowanie stron internetowych w zupełnie nowym trybie skupienia. Tutaj poruszamy wszystko niestandardowy projekt strony internetowej który dostosowuje się do większości urządzeń, jakie można na niego rzucić.

1] Płynne obrazy

Podobnie jak tworzenie płynnych siatek, płynne obrazy są w powszechnym użyciu, ale można to zrobić na wiele różnych sposobów.

Zastanawiając się, jak zaprojektować responsywną witrynę internetową, jednym z niezawodnych sposobów znacznej zmiany zasięgu obrazu jest zapewnienie jego skalowania. Możesz to zrobić w związku z rozmiarem tekstu lub przesuwającym się wymiarem komponentu nadrzędnego za pomocą prostych reguł CSS.

Na początek powiąż regułę CSS z wartością procentową. Szerokość procentowa jest połączona z szerokością elementu nadrzędnego. Alternatywnym sposobem, aby to zrobić, jest użycie wzrostu, jeśli jest on ważniejszy dla twoich proporcji.

Po prostu nie używaj jednocześnie szerokości i wysokości. Możesz także skalować go w zależności od rozmiaru tekstu, używając em wartość.

Skalowanie obrazu przez przeglądarkę może spowodować pewne zniekształcenia. Zmniejsz to, używając bardzo dużego obrazu, tak aby przeglądarka zwykle zmniejszała go zamiast zwiększać. Możesz także zapobiec zmniejszaniu się obrazu poniżej określonego rozmiaru, jeśli stanie się nieczytelny.

Innym sposobem pracy ze skalowaniem obrazu jest ujawnianie tylko fragmentów obrazów podczas zmniejszania rozmiaru stron internetowych. Dotyczy to zarówno obrazów pierwszego planu, jak i tła, choć nieco inaczej.

Możesz przyciąć obraz w tle umieszczając go w CSS. Robiąc to, wyłączysz także możliwość drukowania obrazu tła.

Oznacza to, że wydrukujesz tylko zawartość strony, co poprawi czytelność. Ważne jest również określenie, z której strony obraz będzie przycięty, aby najważniejsze elementy były zawsze w zasięgu.

Obraz na pierwszym planie zasługuje na osobny segment, gdyż w odróżnieniu od tła ma znaczenie dla zawartości strony. Przynajmniej zwykle tak jest. O tym, czy jest to faktycznie istotne, czy nie, można przekonać się, odpowiadając na następujące pytania:

Czy w obrazie znajdują się jakieś informacje, które muszę dodać jako tekst atrybutu alternatywnego?
Czy jeśli wydrukuję tę stronę, będzie ona niekompletna bez tego obrazu?
Linkuję czy nie?

Jeśli odpowiedź na którekolwiek z powyższych pytań brzmi „tak”, zdjęcie jest odpowiednim obrazem pierwszego planu i należy je przyciąć, mając to na uwadze. Obrazy na pierwszym planie są przycinane jako img element w HTML.

Wyświetlane informacje mogą być w całości zbyt ważne, aby je po prostu wyciąć. Jeśli chodzi o skalowanie, zepsułoby to projekt, zmieniając pionową przestrzeń wykorzystywaną przez obrazy.

Rozwiązaniem jest utworzenie czegoś, co można nazwać obrazem złożonym. Obrazy w konfiguracji będą w pewnym stopniu nakładać się na siebie. Zatem górny potrzebowałby przezroczystego tła.

Rozszerzeniem może być zarówno GIF, jak i PNG, ale PNG jest bardziej preferowany, ponieważ jest wyświetlany bez kolorowej krawędzi po ułożeniu na czymś w innym kolorze. PNG może również równomiernie regulować poziomy przezroczystości.

Po połączeniu obrazów należy zagnieździć je w jeden, umieszczając je w oddzielnych blokach. Musisz w jak największym stopniu wykorzystać istniejące elementy blokowe. Mogą to być istniejące nagłówek oraz obwoluta DIV i inni.

Potem musisz zrobić reguły umieszczając każdy obraz jako niepowtarzalne tło w każdym div.

2] Regulowana struktura układu

Myśląc o tym, jak sprawić, by projektowanie stron internetowych naprawdę sprawdzało się we wszystkim, moglibyśmy zmienić cały układ za pomocą osobnego arkusza stylów, ale lepiej byłoby użyć zapytania o media CSS.

W tym celu świetnie jest mieć ujednoliconą listę stylów, w której przypisujemy podstawowe elementy składowe. Będzie także obejmować typografię, tła i paletę z domyślnymi elastycznymi szerokościami.

Jeśli w arkuszu stylów brakuje któregoś z parametrów rozmiaru, możemy wstawić nowy, stworzony jako dziecko. Spowodowałoby to pobranie wszystkiego z ustawień domyślnych i wprowadzenie niezbędnych zmian.

3] Zapytania o media

CSS pozwoli Ci stworzyć wiele arkuszy stylów i manipulacji układem, które pozwolą nam osiągnąć potrzebne zakresy szerokości. Jeśli chcesz stworzyć nie tylko kreatywny projekt strony internetowej, ale także efektywny, najlepszym sposobem jest umieszczenie wszystkich zapytań o media w jednym arkuszu stylów.

Tutaj możesz złożyć wniosek min Szerokość oraz Maksymalna szerokość. min Szerokość wybiera minimalną szerokość ekranu lub przeglądarki, z którą będzie współpracował dany arkusz. Wszystko poniżej tego minimum i styl nie zostanie wprowadzone w życie, a wszystko powyżej maksimum po prostu nie będzie działać.

Jeśli chodzi o szerokość ekranu i przeglądarki, jest to dla nas bardzo istotne, ponieważ można kierować reklamy na określone urządzenia o nieparzystych wymiarach bez konieczności ponownego używania stylów dla innych ekranów z przeglądarkami, które powtarzają rozmiary urządzeń.

Czasami popularną preferencją jest możliwość połączenia indywidualnego arkusza stylów dla określonych zapytań o media, jeśli można częściowo poświęcić wydajność. Dobra metoda dla urządzeń o pojedynczej orientacji i przeglądarek, które nie zmieniają ręcznie szerokości.

Na przykład dana konfiguracja bardzo dobrze pasowałaby do iPada, ponieważ bardzo szybko przełącza się między orientacją pionową a poziomą. Gdyby każde z dwóch zapytań do zmiany w tę i z powrotem znajdowało się w osobnym arkuszu stylów, nieuzasadnione spowolniłoby to przejście. Dlatego lepiej będzie umieścić zapytanie o media dla pierwszej i drugiej orientacji w jednym arkuszu.

Ta metoda świetnie sprawdzi się w przeglądarce, której rozmiar jest zmienny. Jeśli użytkownik faktycznie może to zmienić, najbardziej realną metodą jest ujednolicenie wszystkich zapytań o media w połączonym arkuszu stylów.

W przypadku urządzeń, które nie obsługują zapytań CSS, możesz również skorzystać z JAVASCRIPT. Dostępna jest gotowa biblioteka JS, która umożliwia wykonywanie zapytań CSS w starszych przeglądarkach. Po prostu pobierz ta kopia i możesz skorzystać ze swoich zapytań.

Istnieje wiele sposobów łączenia JavaScript z zapytaniami o media CSS. To nie jest „magiczna pigułka”. Zapytania o media są bardzo pomocne w projektowaniu świetnych stron internetowych, a CSS działa ściśle. JS można wykorzystać do rozszerzenia swojego profilu opcji.

4] Pokaż/Ukryj

Zmiana rozmiaru i zmiana układu zawartości strony to wiele, ale czasami nie jest to zbyt dobre, jeśli chodzi o projekt strony internetowej. Może to w rzeczywistości być sprzeczne z wytycznymi dotyczącymi projektowania urządzeń mobilnych, które zachęcają między innymi do stosowania uproszczonych i bardziej ukierunkowanych treści, a także usprawnionej nawigacji.

Chodzi o elastyczność, ale także o umożliwienie użytkownikowi wyboru w zakresie wyświetlanych elementów. A wracając do CSS, nadal możemy sprawić, że dobry projekt strony internetowej stanie się rzeczywistością.

Istnieją dwie opcje: jedno to położyć Nie wyświetla się dla potrzebnego bloku w potrzebnym arkuszu lub określ rozmiar przeglądarki za pomocą JS. Nie ograniczamy się jedynie do ukrywania elementów na małych urządzeniach.

Na większych ekranach można również ukryć zawartość domyślnych arkuszy stylów, udostępniając ją tylko na ekranach o małych rozmiarach. Może to mieć na celu zastąpienie treści elementami nawigacyjnymi, które do niej prowadzą lub zmianę całego układu.

Ważne, że używamy Nie wyświetla się zamiast widoczność: ukrytego. Warto to również podkreślić widoczność: ukryta ukryje treść tylko wtedy, gdy pokaz naprawdę to usuwa. Jeśli pozostawimy znaczniki na małych ekranach, utrudni to optymalizację, a w niektórych przypadkach może nawet spowodować błędy.

Inne rzeczy, które możesz zrobić dla urządzeń mobilnych, to dołączyć skrypt lub inny arkusz stylów, aby uzyskać więcej wolnego miejsca, lub zmienić źródła nawigacji obrazowej z domyślnych na ikony.

5] Ekran dotykowy

Jednak głównie w królestwie urządzeń mobilnych, zastanawiając się nad tworzeniem projektów stron internetowych, nie należy lekceważyć ekranów dotykowych w laptopach. Niektóre mogą przekształcić się w tabletki. Obecnie dostępnych jest więcej ekranów dotykowych z tą funkcją niż kiedyś.

Jak powinieneś się zachować w tej sytuacji? Należy do nich podejść inaczej, ale dostosowanie się do obu nie jest takie trudne. W przypadku ekranów dotykowych nie powinieneś próbować używać kursorów CSS do definiowania linków. Najechanie kursorem nie dotyczy, osoba dotyka ekranu, aby nacisnąć przycisk.

Istnieje kilka świetnych decyzji dotyczących projektowania stron internetowych, które nie mają większego negatywnego wpływu, jeśli w ogóle, na nawigację kursorem, ale okazują się bardzo kreatywne i cenne w przypadku ekranu dotykowego, ponieważ głównie ludzie są praworęczni i korzystaliby z niego wygodnie.

W tym artykule omówiliśmy, jak osiągnąć responsywny projekt strony internetowej. Metodologia ta pomaga zaoszczędzić ogromne ilości bólu głowy. Niestandardowa decyzja jest również naprawdę świetna dla Twoich odbiorców i zwiększa wartość dla użytkownika.

Korzystając z tych informacji dotyczących projektowania stron internetowych, skutecznie dotrzesz do użytkowników zarówno na starszych, jak i nowszych urządzeniach. Mamy nadzieję, że niektóre z tych wzorców projektowania stron internetowych pomogą Ci osiągnąć bardziej solidną i zorganizowaną konstrukcję przy następnym projekcie.

Przydatna wskazówka: Jeśli potrzebujesz pomocy eksperta, przeczytaj ten przewodnik o najlepszych firmach projektowych, w tym o tym, co należy wziąć pod uwagę przed skorzystaniem z nich.

Może ci się spodobać.

Responsywne projektowanie stron internetowych: jak to osiągnąć