Web Design Blog / Web:

Nowoczesne strony internetowe

W niniejszym artykule przeanalizujemy parę kwestii, które pozwolą nam określić bliżej czym jest lub czym może być nowoczesność, jako cecha na stronach internetowych. Pierwsza z nich będzie dotyczyć tego jak można rozumieć nowoczesność w web designie.

Druga będzie dotyczyć kwestii wizualnej, czyli tego kiedy estetyka strony sprawia wrażenie nowoczesnej a trzecia, jak można się spodziewać – strony użytkowej – czyli jak programują postępowi web developerzy. Nowoczesne strony internetowe to często wykorzystywany slogan twórców stron, którzy próbują w ten sposób przekonać do siebie nowych klientów.

Nowoczesność rzecz jasna kojarzy się pozytywnie i może sugerować, że autorzy takiej oferty są na bieżąco z modnymi zagadnieniami ze świata web designu. Wszystko było by dobrze, gdyby nie fakt, że niektórzy redukują wspomnianą nowoczesność do kwestii tylko wyglądu lub designu strony, spychając istotne z punktu widzenia użytkownika problemy na drugi plan.

Nowoczesna architektura strony

Architektura strony (lub struktura) to tak naprawdę pogrupowanie stron, odpowiednia ich hierarchizacja i przygotowanie adekwatnej nawigacji. Nowoczesne rozwiązania polegają na projektowaniu przepływu pomiędzy poszczególnymi treściami. Jeżeli mamy galerię, w której oglądamy po kliknięciu pełną wersję, kolejne zdjęcia powinny być na wyciągnięcie ręki, np. po przewinięciu lub kliknięciu przycisku dalej. Nie można zmuszać użytkowników do klikania „wstecz” to już nie te czasy.

Jeżeli strona będzie zmuszać użytkowników do myślenia i korzystanie z niej będzie mówiąc wprost: niewygodne, estetyka nic nam nie da. Najlepsze jest to, że architektura nie wpływa tylko na UX ale także na SEO. Dobry szkielet strony powoduje, że wyszukiwarka lepiej indeksuje treść i „rozumie” połączenie tematyczne poszczególnych podstron witryny.

Nowoczesny wygląd

Jest sprawą oczywistą, że nowoczesny wygląd przyciąga do siebie odbiorców. I to nie tylko w web designie. Dotyczy to wszystkich sfer życia. Nowoczesne ubranie, gadżety… cokolwiek. Chcemy być nowocześni, idziemy za postępem, modą bo taka jest nasza kultura. Chcemy się identyfikować z czasami, w których żyjemy. Wygląd determinuje czy dana rzecz jest atrakcyjna, czyli modna w danych czasach, czy wręcz przeciwnie jest przeciętna, zwykła i niemodna.

Cechy nowoczesnych stron internetowych:

Minimalizm – uproszczona forma i ograniczona ilość stosowanych środków wyrazu. Dużo bieli, dużo wolnego miejsca, mało ozdób i porządek.

Flat design – płaskość, prostota, brak gradientów, brak cieni i konturów.

One page – wszystko lub prawie wszystko mamy na jednej stronie, wystarczy przewijać góra – dół.

Nowoczesne strony WWW - minimalizm

Parallax – efekt nieruchomych lub wolniej scrollujących się zdjęć, tła podczas przewijania dający efekt przestrzenny.

Tło koncepcyjne – filmy lub pokaz slajdów zdjęć w wysokiej rozdzielczości w tle strony

Ponadto:

  • różnorodność fontów
  • łagodne i stonowane kolory
  • proste kształty
  • jednolite tła
  • brak cieni
  • brak animacji
  • wysokiej jakości zdjęcia i filmy

Tworząc nową stronę internetową chcemy aby wynik końcowy był zgodny z najnowszymi koncepcjami designerskimi. Ma przyciągać wzrok swoim wyglądem i powodować pozytywne doświadczenia.

Jeżeli chcesz zgłębić temat najnowszych trendów w web designie zapraszam do artykułu: Trendy w projektowaniu stron na 2019 rok.

Nowoczesne funkcje

O ile w części wizualnej mamy pewnego rodzaju dowolność powodującą, że jakiekolwiek próby definiowania i szufladkowania są nieco naciągane, o tyle w programowaniu, budowaniu kodu i wdrażaniu poszczególnych funkcji możemy porozmawiać bardziej konkretnie. Na formę nowoczesnych stron wpływa parę fundamentalnych czynników a są nimi według mnie (kolejność ma znaczenie): popularność urządzeń mobilnych, media społecznościowe, white hat SEO  i marketing.

Nowoczesne strony WWW - funkcje

Obsługa urządzeń mobilnych

Urządzenia mobilne a raczej ilość takich urządzeń, która dziennie odwiedza strony internetowe, przyczyniły się do rewolucji projektowania stron. Era Responsive Web Design i tym podobnym zagadnieniom rozpoczęła się na dobre w 2013 roku. Od tej pory można zaobserwować pewną nowoczesność, która polega na tym, że cała zawartość na stronie może być wygodnie i swobodnie przeglądana na telefonach komórkowych. Wdrożenie Responsive Web Design jest proste bo nie wymaga dodatkowych komponentów – cały pomysł polega na odpowiednim napisaniu stylu CSS wykorzystując w nich zapytania medialne.

Nowością jest także standard AMP, którego jestem zwolennikiem. Bardziej szczegółowy opis co proponuje standard AMP znajduje się w artykule Projektowanie stron AMP.

Nowoczesne strony WWW - mobile first

Responsive Web Design

Obecnie tworzenie stron zgodnie z regułą Responsive Web Design nie jest już dobrą praktyką jak to było w 2013 czy w 2014 roku – jest już standardem i to nawet nie podlega żadnej dyskusji. Jeżeli dana strona jest nieprzystosowana do nowego standardu jest karana przez algorytmy pozycjonujące stronę w wynikach wyszukiwania oraz przez samych internautów – rzadko są odwiedzane. Jeżeli jakaś strona wyświetla się niepoprawnie na telefonie komórkowym z pewnością wywołuje rozczarowanie twoich klientów.

Ekrany dotykowe

Kolejna sprawa związana jest z faktem nawigowania po stronach przy użyciu ekranu dotykowego. Do najczęściej zalecanych praktyk można zaliczyć – obieranie odpowiedniego rozmiaru elementów dotykowych, czyli linków i przycisków, tak aby można było je użyć z łatwością na ekranie dotykowym. Małe oraz położone blisko siebie elementy, trudniej jest precyzyjnie dotknąć, co w konsekwencji może powodować nieprawidłowe kliknięcia i zniechęcać tym użytkowników twojej strony internetowej.

Nowoczesne strony WWW - ekrany dotykowe

Wytyczne na temat interfejsu użytkownika w systemie Android zalecają więc, aby minimalny rozmiar elementu dotykowego wynosił ok. 7 mm, co odpowiada 48 pikselom CSS (przy założeniu, że widok strony nie jest skalowany). Natomiast odstęp powinien wynosić minimum 5 mm czyli ok. 32 piksele. Dzięki zastosowaniu tych wytycznych, użytkownicy będą mogli bezproblemowo i celnie trafić w wybrane elementy.

Społeczność

Integracja z Facebookiem jest często stosowanym dodatkiem do strony. Widać kto stronę polubił, czy są wśród nich znajomi no i czy dana strona jest popularna. To samo tyczy się Google Plus. Pozytywny efekt w postaci zwiększonej liczby odwiedzin gwarantowany. Strony, które dają możliwość pozostawienia komentarza, oraz lajkowania artykułów są częściej odwiedzane. Komentarze to dodatkowa treść związana z artykułem co pozytywnie wpływa na pozycjonowanie. Nie trzeba polegać na portalach społecznościowych – nic nie stoi na przeszkodzie aby zintegrować stronę z niezależnym forum.

Interaktywność

Tak to już jest że internauci lubią oceniać, pozostawiać swój ślad. Nawet zwykły licznik odwiedzin przykuwa uwagę i informuje czy artykuł jest często odwiedzany czy nie. Dobrą praktyką jest ocena gwiazdkowa danego produktu czy np. ocena zdjęć w galerii. Idealną sytuacją jest, kiedy strona internetowa sklepu daje możliwość dodawania produktów do ulubionych by potem np. porównać ich specyfikacje.
rich snippets - wzbogaca User Experience
Ach, można byłoby wymieniać. Szkoda, że podobne praktyki wykorzystują jak na razie tylko większe przedsiębiorstwa.

Wezwanie do działania czyli „Call To Action”

Obecnie, strony internetowe częściej wzywają do konkretnego działania np. „napisz do nas” z odnośnikiem do kontaktu lub „zostaw numer, oddzwonię” – formularz, który cały czas jest przyklejony do bocznej krawędzi strony. Stosując z umiarem na pewno dostrzeżemy większą skuteczność naszej witryny internetowej. Umieszczenie Live-Chatu zaliczam do tej samej kategorii zabiegów. Popularność takich rozwiązań jest konsekwencją naturalnej ewolucji stron i konkurencyjności oraz możliwości jakie daje nam technologia HTML5.

Nowoczense strony WWW - cenniki i cta

Uproszczone menu

Ale tak naprawdę uproszczone. Wielość opcji wprowadza chaos i prowadzi do paradoksu wyboru. Jak istotna jest ta zasada na stronach internetowych wie każdy kto dokonał najprostszych testów A/B z tym związanych. Otóż (i u mnie też to działa) strony z uproszczoną nawigacją są chętniej oglądane. 10 linków które jeszcze się rozgałęziają na 8 pozycji to naprawdę coś co zniechęca. Motyw który pacha projektantów do takich rozwiązań to „pokazanie że strona jest duża” taki zabieg może sprawić takie wrażenie ale co z tego skoro w testach takie rozwiązania wypadają słabo.

Przydatne treści

Cenniki usług i produktów, materiały pomocnicze, godziny otwarcia, ważne informacje kontaktowe i poradniki a najlepiej wszystko co może być przydatne dla twoich klientów. Im więcej materiałów tym lepiej, dla ciebie bo oszczędzasz czas sobie i klientom. Klienci mają wszystko na wyciągnięcie ręki a ty zmniejszoną ilość zapytań o przesłanie kolejny raz na e-maila instrukcji obsługi lub certyfikatu. Warto wspomnieć, że im więcej treści mamy na stronie tym mniej musimy inwestować w promocję bo strona pozycjonuje się sama. Obszerne strony zyskują także zaufanie, bo budzą respekt i wyglądają poważniej.

Optymalizacja

Skoro nowoczesne strony www to mobilność, warto pamiętać, że telefony komórkowe korzystają zazwyczaj z transmisji danych pakietowych, która ma mniejszą przepustowość w porównaniu z szerokopasmowym łączem komputera PC i jest stosunkowo kosztowna. Dlatego przy projektowaniu szablonu warto zadbać o to aby strona była profesjonalnie zaprojektowana od środka:

pozycja w google - gtmetrix

Zachowanie tych zasad da pozytywny efekt w postaci dobrych pozycji strony internetowej w wyszukiwarkach, ponieważ to właśnie prędkość jej działania to obecnie jeden z najważniejszych czynników uwzględnianych przez algorytmy pozycjonujące. O tym na co zwrócić uwagę przy optymalizacji stron internetowych opisałem nieco szerzej w artykule: Optymalizacja stron www.

Jeżeli jesteśmy przy optymalizacji to warto zaznajomić się także z tematem danych strukturalnych.

Czasy baroku mamy dawno za sobą. Promowanie prostoty i prędkości działania jest w obecnych czasach czymś oczywistym. Wystarczy naprawdę podstawowe wyczucie w technologiach komputerowych by wiedzieć, że za wszelką cenę należy unikać złożoności, bez której można się obejść.

Przyjazny CMS

Przyjazny CMS motywuje do aktualizowania treści i strona dzięki temu świetnie spełnia swoją rolę. Jest przydatnym źródłem informacji dla wszystkich zainteresowanych. Kontrowersją dzisiejszych czasów jest fakt, że niektórzy nadal tworzą strony statyczne na których latami nic się nie dzieje. Napisz chociaż raz w miesiącu że jest promocja, lub że doszedł nowy produkt do oferty – to zaledwie ok. 5 minut pracy!

Nowoczesne strony WWW - CMS

Strona, która nie jest często aktualizowana nie ma znaczącej wartości, no chyba, że wyłącznie dzięki płatnym reklamom chcemy promować lokalny biznes. Jeżeli klienci zauważą, że na stronie nic się nie zmienia uwierzcie mi, strona www w kreowaniu pozytywnego wizerunku marki raczej. Jestem przekonany że w każdej branży i w każdym biznesie znajdzie się coś co od czasu do czasu warto zakomunikować publicznie. Czytaj więcej o systemach CMS a artykule: systemy zarządzania treścią.

Ale przede wszystkim: UX

W czasach kiedy wszyscy mają własne strony internetowe, najefektywniejszym sposobem na przebicie się do łask klientów jest dobrze zaprojektowana funkcjonalność. Nowoczesna strona internetowa bez dobrego UX (User Experience) jest w najlepszym przypadku niestety tylko ładna, warto ją wtedy dodać do jakiegoś zbioru najciekawszych stron i na tym niestety kończy się jej rola w Internecie.

Skupiając się wyłączenie na użytkowniku, jego potrzebach i wygodzie możemy liczyć na osiągnięciu sukcesu, i nie ważne czy chodzi nam tutaj o sprzedaż w sklepie, częste odwiedziny i zaangażowanie użytkowników naszego portalu czy wreszcie kreowanie pozytywnego wizerunku marki. Nie każ klientom myśleć – daj im to czego potrzebują.

Podsumowanie

Nowoczesne strony internetowe to serwisy, które charakteryzują się minimalistycznym designem oraz wysokiej jakości zdjęciami. Szablon jest skonstruowany za pomocą arkusza CSS a nie pociętej grafiki rastrowej jak to było parę lat temu. Od nowoczesnej witryny internetowej wymagamy tego, aby nie sprawiała trudności naszemu telefonowi i aby przeglądanie treści na urządzeniach mobilnych było tak wygodne jak to tylko możliwe. Optymalizacja pod kątem urządzeń mobilnych jest już możliwa do przeanalizowania za pomocą narzędzi online, które szerzej opisałem we wpisie: Jakość stron internetowych.

Od strony użytkownika oczekujemy interaktywności oraz tego, żeby była użyteczna na co dzień. Ma do czegoś służyć np. do kupowania lub szczegółowego przeglądania oferty. Ma być często aktualizowana przez właścicieli. Wreszcie ma zjednywać społeczności, za sprawą wtyczek społecznościowych. Tylko strony o takich cechach i funkcjach mają rację bytu w nowoczesnych i konkurencyjnych czasach. Biznesy niezależnie od branż przenoszą się do sieci. Warto zwrócić uwagę, że w większości przypadków to właśnie strony internetowe przenoszą na siebie ciężar komunikacji z klientami, mają wpływ na sukcesy i czasem decydują nawet o wynikach finansowych firmy. Nie pozostawaj w tyle!

Źródła

Nowoczesne strony internetowe
4.6 (92.54%) głosów: 126

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail