Projektując witrynę, należy zadbać o to, aby wyglądała świetnie na każdym urządzeniu, niezależnie od rozmiaru i kształtu ekranu. Responsywne witryny są zaprojektowane tak, aby dobrze wyglądały na wszelkiego rodzaju nowoczesnych urządzeniach, takich jak komputery, telefony, tablety, telewizory, urządzenia do noszenia, a nawet ekrany samochodowe. Aby strona była responsywna, musisz zmodyfikować kod CSS i HTML, aby automatycznie zmieniać rozmiar jej elementów w zależności od określonych warunków. To wikiHow uczy, jak planować i wdrażać podstawowe responsywne projektowanie stron internetowych.
Kroki
Metoda 1 z 3: Planowanie projektowania responsywnego
Krok 1. Dowiedz się, jak Twoi odbiorcy korzystają z Twojej witryny
Obecnie większość osób przeglądających sieć korzysta z telefonów komórkowych i tabletów. Aby witryna była responsywna, musisz upewnić się, że wyświetla się prawidłowo bez względu na to, gdzie jest przeglądana. Jeśli liczy się czas i pieniądze, skoncentruj się na typach urządzeń, które są najbardziej popularne wśród Twoich użytkowników (jeśli takie informacje są dostępne) oraz na tym, jak korzystają z Twojej witryny. Korzystając z oprogramowania analitycznego lub innej formy badań, dowiedz się:
- Z jakich urządzeń najczęściej korzystają do przeglądania strony, zwracając szczególną uwagę na marki telefonów komórkowych/tabletów/komputerów oraz rozmiary ekranu/rozdzielczości.
- Jakie przeglądarki są najpopularniejsze wśród Twoich użytkowników. Jeśli chodzi o globalne statystyki, Google Chrome jest najpopularniejszą przeglądarką internetową na świecie, ale Safari jest tuż za nią.
- Sposób, w jaki użytkownicy korzystają z Twojej witryny, np. ile czasu spędzają na jej przeglądaniu, gdzie ją przeglądają i jakie treści są najpopularniejsze. Pomoże Ci to określić, jaki rodzaj treści należy uwzględnić, a który można pominąć.
Krok 2. Zaprojektuj różne układy dla różnych urządzeń
Możesz użyć kombinacji CSS i JavaScript, aby wykryć urządzenie użytkownika, a także jego możliwości (czy obsługuje Java, Flash itp.) i odpowiednio wyświetlić konkretną wersję swojej witryny. Zapytania o media CSS są szczególnie przydatne przy określaniu rozmiaru/rozdzielczości urządzenia.
Krok 3. Uwzględnij różne rodzaje interakcji
Twój gość może wchodzić w interakcję z Twoją witryną za pomocą myszy, klawiatury, ekranu dotykowego, a nawet czytnika ekranu dla osób niedowidzących. Biorąc to pod uwagę, Twoja witryna powinna reagować na kliknięcia myszą, klawisze klawiatury (Tab, Enter, Return itp.) i dotknięcia ekranu palcami.
Efekty najechania kursorem nie działają z niczym poza myszą. Zamiast używać tych efektów, możesz wymagać od odwiedzającego kliknięcia przycisku lub ikony, aby wyświetlić to, co było wcześniej wyświetlane po najechaniu myszą
Krok 4. Rozważ użycie systemu zarządzania treścią (CMS)
Prostym sposobem na zapewnienie responsywności projektu witryny jest użycie CMS z gotowym motywem responsywnym. Korzystanie z CMS, takiego jak Joomla, Drupal lub Wordpress, pozwala zapewnić, że Twoja witryna będzie wyglądać świetnie na wszystkich urządzeniach bez konieczności samodzielnego kodowania elementów responsywnych. Skontaktuj się z dostawcą usług hostingowych, aby dowiedzieć się, jakie narzędzia CMS są dostępne w Twojej usłudze.
Krok 5. Użyj narzędzi online, aby przetestować swoją witrynę
Teraz, gdy responsywne projektowanie stron internetowych zyskało na popularności, istnieje wiele bezpłatnych narzędzi, których możesz użyć do przetestowania swojej witryny. Jeśli już zakodowałeś swoją witrynę, skorzystaj z tych narzędzi, aby sprawdzić, jak wygląda w różnych warunkach, aby wiedzieć, gdzie należy poprawić responsywność:
- Test optymalizacji mobilnej Google: pokazuje, czy Twoja witryna działa równie dobrze na urządzeniach mobilnych, jak na ekranach komputerów.
- resizeMyBrowser: umożliwia przeglądanie witryny w różnych rozdzielczościach.
- Responsiator: wyświetla Twoją witrynę na różnych ekranach urządzeń w różnych układach (bokiem lub prawą stroną do góry).
Metoda 2 z 3: Sprawienie, by układ strony był responsywny
Krok 1. Rozważ darmową responsywną strukturę arkusza stylów
Framework to wstępnie napisany zestaw HTML, CSS i/lub JavaScript, którego możesz użyć jako szkieletu swojej witryny. Frameworki są testowane i zoptymalizowane do pracy ze wszystkimi przeglądarkami, więc wszystko, co musisz zrobić, to wstawić zawartość, dodać preferencje dotyczące multimediów i kolorów oraz opublikować swoją witrynę. Niektóre popularne frameworki to:
- Bootstrap
- Szkielet
- Fundacja
Krok 2. Ustaw rzutnię za pomocą metatagu
Jeśli nie używasz frameworka, zacznij od najważniejszego aspektu kodowania responsywnej strony internetowej: Viewport. Widoczny obszar to ta część witryny, która jest widoczna dla użytkownika. Kluczem do prawidłowego wyświetlania witryny niezależnie od rozmiaru ekranu jest skalowanie rozmiaru widocznego obszaru w tagu META. Aby to zrobić, umieść ten tag u góry każdej strony w witrynie:
Krok 3. Określ rozmiar tekstu w stosunku do rzutni
Po ustawieniu widocznego obszaru tekst na stronie zostanie przeskalowany, aby zmieścić się na ekranie. Jednak czcionki mogą być wyświetlane za duże lub za małe, jeśli ich rozmiary nie są określone w odniesieniu do rzutni. Możesz to zrobić, definiując rozmiar czcionki jako określony procent widoku z jednostką vw. Ten przykład mówi, że nagłówki H1 mają być wyświetlane na 10% szerokości okienka ekranu, bez względu na jego rozmiar:
wikiJak
Krok 4. Użyj zapytań o media, aby pokazać różne style dla różnych rozmiarów ekranu
Zapytania o media pozwalają wybrać, czy wyświetlać określone elementy CSS w zależności od rozmiaru ekranu. Specyfikę zapytania o media możesz określić w pliku CSS. W tym przykładzie kolor tła treści zmieni się na czerwony, jeśli rozmiar ekranu użytkownika wynosi 480 pikseli lub więcej:
wikiJak
@media screen and (min-width: 480px) { body { background-color: aqua; } }
Metoda 3 z 3: Tworzenie responsywnych obrazów
Krok 1. Użyj właściwości szerokości CSS, aby skalować obrazy
Zamiast ustawiać szerokość obrazu na określoną liczbę pikseli (np. 500px), użyj wartości procentowej (np. 100%), aby obraz wyglądał na szerokość swojego elementu nadrzędnego i odpowiednio go dostosuj. Ustawienie szerokości obrazu na 100% wymusza skalowanie obrazu w górę iw dół w zależności od rozmiaru ekranu widza. Aby to zrobić w linii:
Krok 2. Użyj właściwości max-width, aby ograniczyć skalowanie rzeczywistego rozmiaru obrazu
Jeśli użyjesz właściwości width w poprzednim kroku, aby przeskalować obraz do 100%, obraz powiększy się lub zmniejszy, aby zmieścić się w 100% w pojemniku, bez względu na rozmiar. Oznacza to, że jeśli obraz znajduje się na mniejszej stronie, skaluje się do większego rozmiaru niż jego oryginalny rozmiar i wygląda na gorszej jakości. Aby temu zapobiec, użyj opcji max-width, aby ustawić maksymalny rozmiar skalowania obrazu na 100% (jego rzeczywisty rozmiar). Oto jak:
Krok 3. Użyj elementu obrazu HTML, aby wyświetlić różne obrazy na różnych rozmiarach ekranu
Jeśli chcesz tworzyć obrazy o niestandardowych rozmiarach do wyświetlania na ekranach o różnych rozmiarach, możesz określić, które zdjęcia mają być wyświetlane w kodzie HTML. Utwórz obrazy o różnych rozmiarach, a następnie użyj tego kodu jako przykładu, aby określić, którego obrazu użyć na ekranach o szerokości 600 i 1500 pikseli:
