Responsywny design jest stosunkowo nowym pojęciem w projektowaniu stron internetowych. Powstała zaledwie trzy lata temu w maju 2010 roku, kiedy to web designer Ethan Marcotte użył tego terminu jego artykuł dla listy oprócz
Dziś odbywa się nawet mini debata dotycząca tego, czy projekt responsywny ma zostać, czy też jest to tylko błysk na patelni. Czas pokaże, ale na razie jasne jest, że responsywny projekt dąży do tego, aby użytkownik czuł się tak komfortowo, jak to tylko możliwe.
Responsive design to filozofia projektowania stron internetowych, która koncentruje się na tworzeniu witryn zapewniających użytkownikom lepszą jakość oglądania. Obejmuje to funkcje takie jak bezproblemowa nawigacja i czytanie oraz minimalne zmiany rozmiaru, przewijanie i przesuwanie przeglądarki. Wszystko to odbywa się na wielu różnych urządzeniach, od komputerów stacjonarnych po smartfony.
Ponieważ to podejście do projektowania stron internetowych wciąż znajduje się w początkowym stadium, możesz nie wiedzieć dokładnie, na czym polega projektowanie responsywne. Czy chodzi o bezproblemowe wyświetlanie treści na wielu platformach, czy też głównie o pomoc firmom w tworzeniu atrakcyjnych witryn w celu zwiększenia sprzedaży dzięki lepszej obsłudze użytkowników?
Mashable już wyszedł na kończynę i nazywa 2013 rok responsywnego projektowania. Chociaż to pozostaje, niektóre podstawowe aspekty projektowania responsywnego to standardy, które nigdy nie znikną. Oto najważniejsze fakty dotyczące projektowania responsywnego, aby się z nimi zapoznać.
Zostaniesz wybaczony za myślenie, że responsywny design i mobilny projekt to jedno i to samo - ale tak nie jest. Oczywiście, responsywny projekt tworzy strony internetowe, tak aby odpowiadały one rozmiarowi przeglądarki i były przyjazne dla urządzeń mobilnych, ale responsywny projekt to naprawdę cały projekt sieciowy. Problem związany z podejściem do projektowania stron internetowych jako projektu mobilnego polega na tym, że jest on z natury ograniczający, co stanowi wadę dla samego podejścia.
Najbardziej efektywne strony responsywne mogą być postrzegane tak, jak powinny, w różnych rozdzielczościach. Obejmuje to wszystko od zwykłych 1024 × 768 pikseli do wyświetlaczy 1920 × 1080 i wszystko pomiędzy. Witryny takie jak te również świetnie wyglądają na tabletach (zarówno na siatkówce, jak i standardowych wyświetlaczach), a także na smartfonach. Jeśli projektant stron internetowych patrzy na responsywny projekt wyłącznie w kontekście mobilnym, może potencjalnie stracić szersze doświadczenie użytkownika.
Jednocześnie mobilność jest naprawdę dobrym punktem wyjścia dla całej responsywnej dyskusji nad projektem. Normą było rozpoczęcie od mobilnego projektu, a następnie rozwinięcie tego projektu do dodatkowych rozmiarów, gdy opracowywana jest responsywna strona internetowa. Wielu projektantów uważa, że łatwiej jest rozwijać grafikę, niż ją minimalizować.
Jeśli istnieje zasada, której powinni przestrzegać twórcy stron internetowych, to znaczy, że jakość obrazu jest znacznie ważniejsza niż faktyczna liczba obrazów. Powodem jest to, że obraz o niskiej jakości po prostu nie wygląda atrakcyjnie w żadnym rozmiarze. Czas potrzebny na załadowanie obrazu jest prawie tak samo ważny, jak jego rozmiar. Użytkownicy mobilni zgodzą się z tym, ponieważ mają ograniczoną przepustowość, z którą można się zmagać.
Co powinien zrobić projektant stron internetowych? Po prostu osiągnij rozsądną równowagę pomiędzy czasem i jakością ładowania. Obejmuje to skalowanie obrazów za pomocą właściwości CSS wysokości i szerokości, sterowanie wolną od ładowania pełnowymiarowych obrazów i optymalizowanie obrazów w Internecie. Przed załadowaniem zaleca się kadrowanie dowolnych obrazów i zapisywanie każdego obrazu w możliwie najmniejszym rozmiarze, o ile zachowuje on ostry, wizualny wygląd.
Sprawdzić Strona Sony USA . Zwróć uwagę, że wszystkie obrazy są najwyższej jakości, niezależnie od ich wielkości. Po odwiedzeniu witryny lub odświeżeniu strony głównej zwróć także uwagę na szybkość wczytywania obrazów. Nie trzeba czekać dłużej niż sekundę, aby wszystko ostro się skoncentrowało.
Projektanci mają wiele możliwości, jeśli zawierają obrazy w odpowiednim ustawieniu. Mogą używać tylko kilku obrazów; zmniejszyć wykorzystanie obrazów w ramach systemów mobilnych; pozwalają obrazom maskować się w mobilnym otoczeniu; lub wykorzystywać różne rozmiary i wersje plików. Wybory te będą działały skutecznie, chociaż niektórzy programiści są przeciwni ukrywaniu obrazów, ponieważ użytkownik nadal będzie musiał ładować obrazy, mimo że są niewidoczne.
Typ nie powinien być jeden rozmiar dla wszystkich. Jeden rodzaj czcionki, który wygląda atrakcyjnie dla oka na biurku, może być okropny na smartfonie. Typografia musi przestrzegać tych samych zasad, co inne aspekty projektowania responsywnego.
Najważniejszym aspektem typografii responsywnej jest długość linii. Aby uzyskać gładką czytelność, typ powinien być zoptymalizowany na podstawie szerokości ekranu. Zasadą dla witryn na komputery stacjonarne jest to, że od 50 do 75 znaków linia jest idealna; w przypadku urządzeń mobilnych idealna jest od 35 do 50 znaków.
Typ musi być również łatwy do odczytania w pionie. Wiele witryn wykorzystuje przestrzeń liniową, która jest większa niż 140 procent rozmiaru ekranu dla większych bloków tekstu. Jeśli ekran jest mniejszy, należy dodać więcej miejsca.
Nawet określony krój pisma, który jest wykorzystywany, jest znaczący. Fantazyjne czcionki i nowatorskie kroje pisma mają możliwość wyświetlania atrakcyjnych wizualnie na większych ekranach, ale są trudne do odczytania, jeśli rozmiar punktu jest niewielki. Tego rodzaju czcionki powinny mieć dużo miejsca między nimi. Podczas pracy z mniejszymi rozmiarami najłatwiej jest użyć normalnych stylów bezszeryfowych, a nawet uderzeń.
Na Witryna Hardboiled Web Design widać, że wiele z tych zasad jest przestrzeganych, co zapewnia dobrą reakcję. Zwróć uwagę, że długość linii tekstu na pulpicie - podczas gdy średnio jest większa niż idealna rekomendacja od 50 do 75 znaków - składa się z kroju pisma, który jest czysty i czytelny. Ponadto przestrzeń liniowa jest również większa niż rozmiar czcionki. Na urządzeniach mobilnych responsywność witryny jest jeszcze lepsza: na ekranie iPhone'a 5 liczba znaków w wierszu wynosiła około 67, czyli nieco ponad idealną regułę zawierającą od 35 do 50 znaków.
Jeśli chodzi o wrażenia użytkownika - który jest jednym z najważniejszych czynników, o których powinni pamiętać projektanci stron internetowych - nawigacja jest priorytetem. Nawigacja musi być płynna i wydajna, aby zapewnić komfort użytkowania.
Skuteczny responsywny projekt musi to zapewnić, zwracając szczególną uwagę na określoną szerokość danej przeglądarki. Strona, która dobrze wykorzystuje projektowanie responsywne, rozmieści nawigację w witrynie w różnych obszarach, zależnie od szerokości przeglądarki. Jednym z najlepszych przykładów tego jest Poczucie jedzenia Nawigacja strony.
Błędem w przypadku responsywnego projektu byłoby skalowanie nawigacji witryny do większych proporcji na urządzeniach z większymi ekranami.
Teraz, gdy słyszysz projektantów stron internetowych mówiących o responsywnym projekcie, będziesz wiedział, że nie chodzi tylko o to, aby witryna wyglądała dobrze i działała płynnie na mniejszych ekranach mobilnych. Będziesz wiedział, że to podejście do projektowania opiera się na zasadzie, że strony internetowe każdej wielkości zapewniają najbardziej optymalne doświadczenie dla użytkownika - bez względu na to, czego używają do przeglądania witryny.
Responsywny design jest wciąż stosunkowo nową koncepcją, przynajmniej dla większości osób, które po prostu przeglądają witryny w Internecie. Dlatego tak wiele osób wciąż nie może się zgodzić na to, co sprawia, że responsywny design ... jest responsywny. Czy chodzi o oglądanie wszystkiego poprawnie na ekranach mobilnych? Czy chodzi tylko o czasy ładowania i wysokiej jakości obrazy, które ucieszą oko? Czy chodzi o czysty design i łatwe do odczytania kroje pisma?
To wszystko i więcej. To tylko podstawy tego podejścia do projektowania stron internetowych, ale projektowanie responsywne wciąż ewoluuje i zmienia się, więc istnieje duże prawdopodobieństwo, że zostaną uwzględnione dodatkowe elementy. Ostatecznie chodzi o zwiększenie wygody użytkownika, ponieważ nikt nie chce zajmować się witryną, która jest powolna, rozmyta, trudna do odczytania, zagracona lub trudna w nawigacji.
Czy responsywny projekt to tylko trend? Jakie są kluczowe aspekty projektowania responsywnego? Daj nam znać swoje myśli w komentarzach.