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

minimalizm

 

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

screen3

 

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

Parallax

 

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

One page

 

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

video

Ponadto:

  • lekka czcionka
  • łagodne kolory
  • proste kształty
  • jednolite tła
  • brak cieni
  • brak animacji
  • wysokiej jakości zdjęcia

Tworząc nową stronę internetową chcemy aby wynik końcowy był  zgodny z najnowszymi koncepcjami designerskimi. Ma przyciągać swoim wyglądem klientów tak, jak modne ubiory osobników mają przyciągać płeć przeciwną. No, trochę przesadzam, jednak mechanizm z grubsza jest bardzo podobny 🙂

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.

screen5

 

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 nie wywołuje ona rozczarowania, jest źródłem oburzenia jasnym komunikatem, że wydawca nie interesuje się potrzebami internautów. Nowe realizacje, które wymagają dużego monitora do wygodnego przeglądania zawartości dają zaś do zrozumienia że autorami są niekompetentni amatorzy lub graficy, którym kwestie użyteczności i dostępności treści są obce.

Druga sprawa tyczy się dbałości o to aby strona nie zużywała z byt wiele transferu.  Zbyt wiele zdjęć w rozdzielczości FullHD, kilkanaście filmów w tle, i ciężkie wtyczki, które powodują że cała strona się przycina jest, mówiąc łagodnie: niepoprawne. Argument mówiący o tym, że przecież urządzenia mobilne są coraz szybsze i coraz mocniejsze dlatego nie powinniśmy się martwić wagą poszczególnych zdjęć, jest ignorancki i nieprofesjonalny.

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.

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. Ach, można byłoby wymieniać. Szkoda, że podobne praktyki wykorzystują tylko większe przedsiębiorstwa.

five-stars-small

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

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:

  • minimalizować kod JavaScript i CSS w plikach produkcyjnych;
  • umieścić krótkie skrypty JS bezpośrednio w kodzie strony;
  • tworzyć CSS w taki sposób aby zawierał jak najmniej deklaracji;
  • zoptymalizować rozmiar grafik poprzez stosowanie odpowiednich formatów zapisu.

Zachowanie tych zasad ta pozytywny efekt w postaci dobrej pozycji w wyszukiwarkach.  Prędkość ładowania się strony 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.

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 – uwierzcie mi. Kuszą niską ceną bo za taką szablonową stronę wychodzi po 400 zł. Oszczędzamy sporo jest jednak jeden szkopuł: Strona, która nie jest często aktualizowana nie ma znaczącej wartości, no chyba, że dzięki reklamom w Google chcemy promować lokalny biznes. Jeżeli klienci zauważą, że na stronie nic się nie zmienia uwierzcie mi, jedyną stroną z której ewentualnie skorzystają będzie ta z mapką i numerem telefonu. Czytaj więcej o systemach CMS a artykule: systemy zarządzania treścią.

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.

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 wreszcie decydują o wynikach finansowych firmy. Nie pozostawaj w tyle!

Nowoczesne strony internetowe
4.59 (91.79%) głosów: 56