Technologia tworzenia stron internetowych jest bardzo wszechstronnym procesem. Jednak wszystkie jego etapy można podzielić na dwie główne składniki - Funkcjonalność oraz zewnętrznej powłoki. Lub, jak jest to powszechne wśród webmasterów, backendu i odpowiednio przodu i końca. Ludzie, którzy kupili swoje strony internetowe w studiach tworzenie stron internetowych, często naiwnie wierzą, że konieczne jest, aby skupić się tylko na funkcjonalny i będzie to dobra decyzja. Ale to prawda, w bardzo rzadkich przypadkach, zazwyczaj na projekty startupów w fazie beta. W innym projekcie graficznym i interfejsie użytkownika wystarczy dostosować się do standardów tworzenia stron internetowych i czuć się komfortowo.


W pierwszym podstawą licowa projektanta interfejsu lub projektanta - jest szerokością układ terenu. Wszakże do tego konieczna jest konwersja interfejsów. Czysto intuicyjnie, istnieją dwa sposoby - albo wprowadzić pewne układy dla każdego z popularnej rozdzielczości ekranu, lub stworzyć jedno miejsce dla wszystkich mapach. Obie opcje będą nieprawidłowe, ale wszystko jest w porządku.

Standardowa szerokość na miejscu piksela Runet

do rozwoju układu adaptacyjnej masowego zjawiska było stworzenie strony internetowej z tysiąca pikseli szerokości. Ten numer został wybrany z jednego prostego powodu - że strona zawierała żadnego ekranu. I jest pewna logika, ale załóżmy, że dana osoba jest nadal przynajmniej HD monitorów na pulpicie. W tym przypadku, twój układ będzie wyglądać malutki pasek na środku ekranu, która jest formowana w jednym stosie, apo bokach ogromna nieużywana przestrzeń. Załóżmy teraz, że ktoś przyszedł na twoją stronę z ekranem o szerokości 800 pikseli, a w ustawieniach znajduje się pole wyboru "Pokaż pełną wersję witryny". W takim przypadku Twoja witryna będzie również wyświetlana niepoprawnie, ponieważ po prostu nie przykleja się do ekranu.


Z tych rozważań możemy wywnioskować, że stała szerokość układu nie jest dla nas odpowiednia i musimy szukać innego sposobu. Przeanalizujmy pomysł oddzielnego układu dla każdej szerokości ekranu.

Układy na każdą okazję

Jeśli zdecydujesz się stworzyć układ dla wszystkich rozmiarów ekranów obecnych na rynku, twoja strona stanie się najbardziej unikalna w Internecie. Dzisiaj niemożliwe jest osiągnięcie pełnego zakresu urządzeń, starając się dokonać dokładnej regulacji dla każdej opcji. Ale jeśli skupisz się na najpopularniejszej rozdzielczości monitorów i ekranów urządzeń, to pomysł nie jest zły. Jedynym minusem są wydatki finansowe. W końcu, kiedy projektant interfejsów, projektant i instalator będzie zmuszony wykonać tę samą pracę 5 lub 6 razy, projekt będzie kosztować o wiele więcej niż początkowo ustalono w budżecie. W związku z tym chwalenie się dużą liczbą wersji na różnych ekranach może być jako strony jednostronicowe, których celem jest sprzedaż jednego produktu i koniecznie robienie tego dobrze. Cóż, jeśli nie masz jednej z tych stron docelowych i witryny wielostronicowej, powinieneś zastanowić się dalej.

Najpopularniejsze strony

Kompromis między tymi dwiema skrajnościami polega na zbudowaniu układu dlatrzy lub cztery rozmiary ekranu. Trzeba koniecznie być wśród nich układem mobilnym. Reszta powinna być dostosowana do małych, średnich i dużych ekranów biurkowych. Jak wybrać szerokość strony? Poniżej jest usługa statystyk HotLog w maju 2017 roku, który wykazuje rozkład popularności różnych urządzeń rozdzielczościach ekranu i dynamiki tego wskaźnika.
W tabeli, aby dowiedzieć się, jak określić rozmiar strony, której chcesz użyć. Ponadto, możemy stwierdzić, że obecnie najbardziej popularny format jest ekran w 1366 na 768 punktów. Takie ekrany są instalowane w budżetowych laptopach, więc ich popularność jest naturalna. Następnym najpopularniejszym jest Full HD monitora, który jest złotym standardem dla wideo, gier, a co za tym idzie na układ strony. W tabeli widzimy rozdzielczość urządzeń mobilnych 360 do 640 punktów i różnych wersjach stacjonarnych i przenośnych ekranów po.

Projektujemy układ

Tak więc, analizując statystyki, możemy stwierdzić, że optymalna szerokość strony ma 4 wariantach:

Print laptopów o szerokości 1366 pikseli.

Wersja Full HD.

układ 800 pikseli szerokości do wyświetlania na małych monitorów.

ruchomych wersja strony - o szerokości 360 pikseli.

Na przykład, mamy ustalone wielkości chcesz użyć źródła utworzonego na miejscu. Ale taki projekt będzie nadal kosztowny. Spójrzmy więc na inne opcje, tym razem bez użycia stałej szerokości.

Tworzymy elastyczny układ

Istnieje alternatywne podejście, gdy regulacja odbywa się tylko pod minimalnym rozmiarem ekranu, a rozmiar samych witryn zostanie zadany jako procent. Jednocześnie takie elementy interfejsu, menu, przycisków i logo można ustawić w wartościach bezwzględnych, koncentrując się na minimalnym rozmiarze ekranu w pikselach. Z drugiej strony, bloki treści rozciągną się zgodnie z określonymi wartościami procentowymi od szerokości ekranu. Takie podejście pozwala przestać postrzegać rozmiar witryn jako ograniczenie dla projektanta i utalentowanych, aby pokonać ten niuans.

Co to jest sekcja złota i jak zastosować ją do układu strony internetowej?

Nawet w okresie renesansu wielu architektów i artystów starało się nadać swoim dziełom idealną formę i proporcje. Odpowiadając na pytanie o sens takiej proporcji, zwrócili się do królowej wszystkich nauk - matematyki. Od czasów starożytności proporcja została wymyślona, ​​co nasze oko postrzega jako najbardziej naturalne i wyrafinowane, ponieważ jest wszędzie w naturze. Odkrywcą wzoru na taki związek był utalentowany francuski architekt o nazwisku Fidium. Wyliczył, że jeśli duża część jest mniej istotna niż całość, to ta proporcja będzie wyglądać najlepiej. Ale tak jest w przypadku asymetrycznego podziału obiektu. Ta proporcja stała się później znana jako "złota sekcja, która wciąż nie przecenia jej znaczenia dla światowej historii kultury".

Powrót do projektowania stron internetowych

Wszystko jest bardzo proste - za pomocązłoty odcinek, możesz zaprojektować strony, które będą jak najbardziej przyjemne dla ludzkiego oka. Obliczanie formuły ustalania złoty punkt, otrzymamy irracjonalną numer 16180339887, ale dla wygody można użyć zaokrągloną wartość 162. Oznacza to, że moc naszych stron powinno być 62% i 38% całości, bez względu na wielkość generowanych źródło dla witryny używają Przykład można zobaczyć w następującym schemacie:

Stosowanie nowych technologii

Nowoczesna technologia witryn internetowych DTP pozwalają precyzyjnie przekazać intencje projektanta i konstruktora, ponieważ można już sobie pozwolić na wdrożenie śmielsze pomysły niż u zarania technologii internetowej. Nie bardziej trudne puzzle, nad którymi powinna być wielkość terenu. Wraz z pojawieniem się takich rzeczy jak blok adaptacyjnego kodowania i przesyłania treści, dynamicznych czcionek, tworzenie stron internetowych stało się o wiele bardziej przyjemne. W końcu takie technologie mają mniejsze ograniczenia, choć nadal istnieją. Ale jak wiadomo, nie byłoby żadnych ograniczeń w sztuce. Sugerujemy zastosowanie jednego prawdziwie kreatywnego podejścia do projektowania - złotej części. Dzięki niemu można skutecznie wypełnić i piękny obszar roboczy, niezależnie od wielkości witryn umieszczone w szablonach.

Jak zwiększyć przestrzeń roboczą witryny

Jest bardzo prawdopodobne, że nie będziesz miał wystarczająco dużo miejsca, aby pomieścić wszystkie elementy interfejsu w małym układzie. W tym przypadku, będzie musiał zacząć myśleć twórczo lub bardziej oszczędny niż przedtemtego. Możesz zwolnić miejsce na stronie, ukrywając nawigację w menu podręcznym. Takie podejście jest logiczne do zastosowania nie tylko na urządzeniach mobilnych, ale także na komputerach. Ponieważ użytkownik nie zawsze patrzeć na to, co jest pozycją na swojej stronie przyszło na treści. A życzenie użytkownika należy szanować. Przykładem dobrej drodze, aby ukryć menu ma następujący układ (na zdjęciu poniżej). W prawym górnym rogu czerwonego krzyża widać, naciskając przycisk Menu, który ukrywa się w małej ikony, pozostawiając użytkownikowi sam ze strony internetowej treści. Jednak w ten sposób nie jest to konieczne, można opuścić nawigację być zawsze w zasięgu wzroku. Ale można zrobić piękny element projektu, a nie tylko listę linków do popularnego serwisu. Oprócz ikon lub zamiast linków tekstowych możesz używać intuicyjnych ikon. Pozwoli to również swoją stronę bardziej efektywne wykorzystanie miejsca na ekranie na urządzeniu użytkownika.

Best Site - adaptacyjne

Jeśli nie wiesz, co wybrać układ strony, bo to proste. Aby zaoszczędzić na kosztach rozwoju, nie tracąc odbiorców z powodu złego układu urządzenia, zastosuj adaptacyjny projekt. Adaptive to projekt, który wygląda równie dobrze na różnych urządzeniach. Takie podejście pozwoli Twojej witrynie być przejrzystym i wygodnym nawet na laptopie, choć na tablecie, nawet na smartfonie. Efekt ten osiąga się automatycznie zmieniając szerokość obszaru roboczegoekran. Korzystając z adaptacyjnych arkuszy stylów strony, akceptujesz prawidłowe rozwiązanie z możliwych.