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.

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.

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

parallax - efekt na nowoczesnych stronach internetowych

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

One page - typ nowoczesnych stron www

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 2018 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.

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.

responsive web design - wymóg nowoczesnych stron

 

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 - przyjazne ekranom dotykowym

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.

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 „lekka”.

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.

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.

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!

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.49 (89.78%) głosów: 92