Jak stworzyć responsywną stronę internetową

Przejdź do treści

Jak stworzyć dobrą stronę internetową? Na to pytanie postaram się odpowiedzieć w tym artykule, zapraszam do lektury.

Wstęp

Na początek dwa akapity czystego wstępu, w którym opisze czym jest cały proces tworzenia. Następnie przejdziemy do sekcji właściwej, w której krok po kroku na sucho, stworzymy nasza pierwszą stronę internetową.

Tworzenie stron internetowych to kilkuetapowy proces

Zaprojektowanie strony internetowej – jest to bardzo ważny etap, ponieważ to tutaj tak na prawdę rodzi się nasza witryna. To tutaj nadajemy jej kształt, określamy wstępne funkcjonalności. Jest to krok, w którym także wybieramy kolorystykę strony, a kolory są jednym z najważniejszych czynników, które decydują o tym jak użytkownik – nasz potencjalny klient zareaguje na stronę. Trzeba wykorzystać paletę kolorów, tak aby strona była miła, przyjazna i ciepła. Musimy sprawić aby użytkownik, czuł się na niej dobrze i nie chciał z niej wychodzić.

W wyborze kolorystyki, pomóc nam serwis z setkami przykładowych palet, stworzonych przez użytkowników z całego świata.
Aby skorzystać z takiej palety przejdź tutaj: Kliknij

Kolejny krok projektowania to układ (ux), to tutaj decydujemy jak strona będzie wyglądać. Gdzie pojawi się menu – czy będzie ono u góry, a może jednak z boku strony. To na tym etapie decydujemy o tym, gdzie pojawi się przycisk call to action. Układ strony jest niesamowicie ważny, użytkownik w tych czasach oczekuje czegoś bardzo prostego. Najlepiej aby minimalną ilością kliknięć, mógł na stronie odnaleźć to czego szuka. Informacje nie mogą być pochowane lub trudno dostępne. W takim przypadku możemy stracić klienta, który uzna że strona jest „zbyt trudna w obsłudze”. Kiedy kształt strony jest już ustalony i wiemy jak wyglądał będzie jej układ, przechodzimy do produkcji – tworzymy graficzny projektu witryny.

To krok, w którym najczęściej kontaktujemy się z klientem i pokazujemy poszczególne etapy pracy. Dzięki temu klient, będzie mógł zobaczyć wstępny szkic swojej witryny już na wczesnym etapie produkcji. Uważamy, że bardzo niesprawiedliwe jest kiedy klient swoją stronę ogląda już na etapie końcowym, a niestety bardzo dużo twórców stron tak właśnie postępuje.

Tworzenie kodu! – Przenosimy to co stworzyliśmy w punkcie pierwszym i zapisujemy w plikach jako czysty kod, który przeglądarka wyświetla w przyjaznej formie dla użytkownika. Właśnie teraz, strona zaczyna żyć. Etap ten to tak na prawdę, najważniejszy punkt w samym procesie tworzenia strony.
Teraz powstają style witryny, treści oraz wszystko to, co widzimy w przeglądarce po przejściu pod adres strony.

Tworzenie stron internetowych, można chyba nawet nazwać sztuką. Tak, z całą pewnością jest to sztuka. Dopasowanie kolorów, układu strony oraz zapewnienie wymaganego przez klienta oraz użytkowników bezpieczeństwa. Jest z całą pewnością wymagające i bardzo rozwijające. Zupełnie jak tworzenie dzieł sztuki.

Przejdźmy do rzeczy, wstęp za nami pora na część właściwą.

 

Tworzymy…

Od czego powinniśmy zacząć? Na pewno trzeba określić, do czego służyć będzie nasza strona internetowa. W naszym przypadku będzie to Landing page (czytaj więcej: Czym jest Landing page). Oczywiście strony mogą być różne, między innymi fora internetowe, sklepy czy portale informacyjne.

Nasza strona pozyskiwać będzie klientów dla firmy, która właśnie wprowadza nowy produkt na rynek.
Dla przykładu przyjmijmy, że produktem tym jest nowy smartfon.

Jako, że tworzymy prosty landing page, nie musimy w zasadzie przejmować się stroną pod kontem pozycjonowania.
Nasza strona będzie swoistą prezentacją nowego produktu. Klienci kierowani będą na nią z przeróżnych kampanii reklamowych.

Musimy zadbać aby strona była przede wszystkim lekka oraz responsywna. Na pewno rzesza ludzi, która usłyszy o tym produkcie, najprawdopodobniej najpierw sprawdzi go ze swoich telefonów. Nie możemy zawieść ich oczekiwań. Jeżeli nasza strona nie będzie dobrze działała na telefonach, to jaki obraz nowego produktu damy naszym potencjalnym klientom? Zamkną ją szybciej, niż się na niej znaleźli.

Responsywność stworzyć możemy sami lub skorzystać z jakiegoś gotowego rozwiązania np. framework bootstrap.
Jest to prosty produkt stworzony przez firmę twitter. Pomaga w szybki sposób rozpocząć tworzenie responsywnych stron internetowych.

Jak zacząć projektowanie witryny? Tak jak wspomniałem wcześniej, bardzo ważne są kolory. Nie mogą one odstraszać od witryny, sama kolorystyka sprawić musi, że odwiedzający zostanie na dłużej. Jeżeli wybierzemy kolory zbyt jaskrawe, oczy będą drażnione, dalsza chęć do przeglądania strony pryśnie i klient na pewno do nas nie wróci.

Sami powiedzcie, który z tych dwóch kolorów woleli byście oglądać:

 

Zgaduję, że każdy wybrał kolor po prawej stronie. 🙂
Korzystając z wcześniej podanej listy palet, wybraliśmy naszą kolorystykę.
W moim przypadku jest to: https://coolors.co/app/f09d51-f06543-313638-dfdee0-4b365b

Kolory są stonowane, dobrze do siebie pasują i co najważniejsze nie męczą oka.

Górna część strony

Jedną z najważniejszych rzeczy jest to, aby górna część strona była dobrze zaplanowana i przyciągająca.
Co widzimy, po wejściu na każda stronę internetową? Przeglądarka nie wyświetla nam witryn od połowy, zawsze od góry. Dlatego tak ważne jest, aby o nią zadbać.

Na pewno w górnej sekcji umieścimy listę z menu, które zapewni nasza główną nawigację po stronie. Po lewej stronie znajdzie się Logo w tej samej linii co menu.
Oczywiście nasze menu musi poruszać się po witrynie razem z użytkownikiem. Uważam, że nie możemy dopuścić do sytuacji, w której użytkownik musi wracać na samą górę aby skorzystać z nawigacji. Chodzi o szybkość działania. Użytkownik wszystkie najpotrzebniejsze rzeczy musi mieć zaraz pod ręką.

Oczywiście możemy przyjąć też możliwość, że w momencie przesuwania strony w dół pasek z menu znika, natomiast pojawia się zaraz po przesunięciu witryny w górę.
Możemy wtedy pokazać wtedy nieco więcej witryny, tą część, która wcześniej była ukryta pod paskiem z nawigacją.

Najprzydatniejszą, rzeczą do stworzenia śledzącego paska nawigacji będzie ustawienie odpowiedniego pozycjonowania bloku z menu.
Możemy do tego celu użyć właściwości position: fixed lub position: sticky, pamiętając, że o ich zasadniczych różnicach jakimi są:

Fixed:

  • Zawsze przesuwa się względem całego okna przeglądarki.
  • Zachowuje się podobnie do właściwości „absolute

Sticky:

  • Pozycjonuje się względem elementu, w którym się znajduje.

Teraz samo menu, musimy zadbać, żeby było ono czytelne i nie zawierało niepotrzebnych ulepszeń. Świecące gwiazdki, które można ujrzeć, na niektórych witrynach nie są wskazane. Oczywiście nie chodzi tutaj o to, aby punkty w menu były zwykłym tekstem, możemy dodać elementy poprawiające wygląd.
Pogrubienie, podkreślenie lub zmiana tła jest jak najbardziej wskazana, wszystko zależy od naszej inwencji twórczej. Pamiętać musimy aby nie przeholować.
Wszystko uzależnione jest od całokształtu. Zbyt duża liczba dodatków, może przytłoczyć odwiedzającego, a w niektórych sytuacjach nawet odstraszyć.

Bardzo dobrym pomysłem jest użycie właściwości :hover  tak aby po najechaniu, także oferować jakąś ciekawą transformacje.
np: zmiana koloru napisu oraz tła względem pozostałych.

Najedź na mnie
Najedź na mnie
Najedź na mnie
Najedź na mnie
Najedź na mnie

 

Bardzo prosta modyfikacja i nasze elementy wyglądają dużo lepiej, niż mogłyby wyglądać bez nich.
Pamiętać musimy o właściwości transition-duration:, odpowiada ona za wykonywanie animacje.
W momencie kiedy o niej zapomnimy, zamiast animacji ujrzymy natychmiastową zmianę elementu i popsuje to cały efekt.

Oczywiście nie musicie kończyć upiększania, tylko na tym co tutaj przeczytacie. Ogranicza Was tylko wasza własna wyobraźnia, warto jednak pilnować się aby nie przesadzić.

Pod samym paskiem nawigacyjnym, najlepiej umieścić jakiś dobrze brzmiący slogan wraz z tłem, które sprawiało będzie, że potencjalny klient lub po prostu użytkownik witryny dobrze zapamięta stronę – pamiętajcie o pierwszym wrażeniu.