Projektowanie i tworzenie stron internetowych

Dawno dawno temu … sprawa była bardzo prosta, ponieważ rozdzielczość, która obowiązywała to 800 px szerokości. Praktycznie każdy monitor był ustawiony na taką rozdzielczość co bardzo ułatwiało sprawę projektowania strony internetowej. W obecnych czasach nie jest już tak łatwo, rozwój  technologiczny pozwolił na zbudowanie monitorów i kart graficznych, które wyświetlają obraz w dużych rozdzielczościach. Osobiście uznałem maksymalną szerokość wyświetlanej strony www równą 1920px szerokości, a więc standard HD.

Co z osobami, które używają mniejszej rozdzielczości, nie będą w stanie zobaczyć połowy strony internetowej. Rozwiązaniem tego problemu jest zaprojektowanie strony www w ten sposób, że będzie się ona dostosowywać do rozdzielczości internauty i wypełniać całą przestrzeń treścią lub określenie obszaru, który będzie widoczny dla wszystkich rozdzielczości.

Co do pierwszego rozwiązania problemu rozdzielczości przy tworzeniu stron www, moim zdaniem nie jest to najlepsze rozwiązanie i bardzo rzadko je stosuję. Ciężko się czyta tekst przy tak długich liniach. Jeżeli używasz rozdzielczości 1920px szerokości i tekst rozleje się po całym monitorze na którym przeglądamy stronę internetową to aby to przeczytać musimy włożyć w to trochę wysiłku.

Drugie rozwiązanie, którego jestem zwolennikiem, a więc wyznaczenie stałego  obszaru strony www na treść jest moim zdaniem lepszym sposobem na przedstawianie treści na witrynie www. Obszar ten powinien zawierać się w 1000px szerokości. Daje nam to pewność, że praktycznie każdy kto ma zainstalowaną kartę graficzną będzie w stanie zapoznać się z całą treścią na naszej stronie internetowej. W polu o 1000px szerokości umieszczamy menu, elementy graficzne oraz całą treść, resztę projektu stanowi tło projektowanej strony www. Dzięki temu zabiegowi po wdrożeniu naszego projektu w życie strona internetowa będzie dobrze wyglądać przy niskich rozdzielczościach 1024px i również przy dużych 1920px. Różnica w przeglądanej stronie będzie taka, że będziemy widzieć więcej lub mniej tła projektowanej strony www.

Dobrze jest “wychodzić” z tych 1000px szerokości elementami graficznymi np. slider ze zdjęciami. Sam moduł może mieć rozdzielczość np. 1200px szerokości ale nawigacja czy tekst w tym module powinna mieścić się w 1000px co da nam pewność, że wszyscy będą mogli zapoznać się z treścią czy nawigować w sliderze. Aby uniknąć dolnego paska nawigacji wprowadzamy prosty kod w CSS:

pozwoli to na stosowanie większych elementów na stronie internetowej a przy mniejszych rozdzielczościach, które nie wyświetlą całego elementu, pozbawi nas problemów z paskiem przewijania strony internetowej na dole witryny.

Możemy również przypisać dany wygląd modułów dla danej rozdzielczości, ten sam moduł będzie miał szerokość inną dla rozdzielczości np. do 1200px szerokości a inną dla rozdzielczości większych niż 1200px, np.

Nie możliwe jest umieszczenie tego rozwiązania w projekcie graficznym strony internetowej ale warto zapoznać się z możliwościami tworzenia stron internetowych. Podstawowa wiedza dotycząca budowy stron www pozwoli na stworzenie dobrego projektu graficznego strony www.

Strona internetowa to nie poligrafia i ważną kwestią w projekcie jest lekkość grafiki a więc szybkość otwierania się strony. Przy projektowaniu strony właściwym rozwiązaniem jest stosowanie wartości 72 DPI.  Pozwoli to na mniejszą objętość plików graficznych i tym samym prawidłowe funkcjonowanie zaprojektowanej strony internetowej.

Pozostaje nam jeszcze kwestia urządzeń mobilnych, tablety, smartfony. Ten element opiszę bardziej szczegółowo w innym artykule ale ogólna zasadą jest tworzenie trzech projektów graficznych strony internetowej, każdy odpowiedni dla danego urządzenia końcowego.