Tworzenie stron internetowych

W 2017 roku z 26,5 mln polskich internautów 14,3 mln zrobiło zakupy on-line tworząc rynek wart około 40 mld zł. Przewiduje się, że wartość polskiego rynku handlu on-line wzrośnie o 23 proc. i w 2018 roku przekroczy kwotę 50 mld złotych, natomiast w 2020 roku osiągnie 70 mld.

Po pierwsze, dorasta młode pokolenie osób, dla których zakupy w sklepie internetowym są czymś zupełnie naturalnym. Z drugiej strony do wzrostu popularności handlu w internecie przyczyniają się również osoby starsze, które przekonały się, że zakupy w sieci są bezpieczne.

Po drugie, wygoda i dostępność. Według badania „E-commerce w Polsce 2017” zrealizowanego przez Gemius dla e-Commerce Polska, najsilniejszym czynnikiem zachęcającym do e-zakupów jest ich całodobowa dostępność (82 proc. wskazań). Zakupy online są postrzegane jako nieskomplikowane (41 proc.) i wygodne (44 proc.), ale także tańsze (33 proc.) i zajmujące mniej czasu (39 proc.) niż te w sklepach tradycyjnych. Skraca się czas dostarczenia towaru do klienta. Bardzo istotnym elementem jest również przyjazna polityka sklepów dotycząca zwrotu zakupionego towaru.

Warto też zauważyć, że coraz większą rolę w handlu w sieci odgrywa nie tylko oferta dla klientów indywidualnych, ale również ta kierowana do innych przedsiębiorców w formule B2B.

Głównym kryterium zakupowym wciąż pozostaje cena, jednak coraz większe znaczenie mają czynniki takie jak: wygodny, intuicyjny sklep internetowy, przystosowany również do urządzeń mobilnych; szybkie, bezpieczne płatności; przyjazna polityka zwrotów i wymiana zakupionych towarów; szybka dostawa. Niezwykle istotne jest rozwijanie wsparcia klienta (Customer Support) i minimalizowanie czasu reakcji na ewentualne reklamacje czy zgłoszenia o problemach technicznych.

Projektując stronę czy sklep internetowy należy pamiętać przede wszystkim o potrzebach użytkowników. Według serwisu StatCounter.com ponad 60 proc. ruchu w internecie w Polsce pochodzi ze smartfonów i tabletów. To bardzo dużo, dlatego istotne jest dostosowanie strony do każdego urządzenia. Osoby wchodzące na stronę sklepu przez urządzenia mobilne oczekują szybkiego i prostego procesu złożenia zamówienia. Należy więc maksymalnie uprościć formularze. Potencjalny klient powinien wiedzieć na którym etapie transakcji się znajduje oraz ile kroków pozostało do finalizacji zakupu. Przyciski powinny być odpowiedniej wielkości dostosowane do rozmiaru palca, którym obsługujemy urządzenia mobilne. Ikony powinny być czytelne i zrozumiałe dla użytkownika, zaprojektowane w taki sposób, by nie trzeba było zastanawiać się nad ich przeznaczeniem.

Prostota, użyteczność, odpowiedni UX (User Experience) i sprawna funkcjonalność to podstawowe założenia wpływające na sukces przedsięwzięcia. Należy także pamiętać, że sklep internetowy powinien przede wszystkim wzbudzać zaufanie.

Każdy sklep internetowy powinien posiadać rozbudowany wachlarz metod obsługi płatności.

Do najpopularniejszych sposobów płatności należą: szybki przelew pay-by-link, płatności Blikiem lub PeoPay, płatność E-portfelem, zwykły przelew bankowy, karta płatnicza.

Jest to jedna z najpopularniejszych obecnie metod. Po dokonaniu zakupów wybieramy opcję płatności szybkim przelewem. Następnie zostajemy przekierowani na stronę operatora płatności internetowych gdzie wybieramy ikonkę banku, w którym mamy konto. Logujemy się na stronę banku i mamy automatycznie wypełniony formularz przelewu. Po autoryzacji informacja o tym, że wysłaliśmy przelew od razu trafi do sprzedawcy, dzięki czemu będzie mógł niezwłocznie nadać przesyłkę .

Po wybraniu płatności Blikiem należy wpisać sześciocyfrowy kod, który wyświetli się nam w aplikacji mobilnej banku. Następnie zatwierdzamy płatność w naszym telefonie. W przypadku PeoPay należy zeskanować kod QR, który wyświetli się na monitorze i zaakceptować płatność w aplikacji. Także i w tym przypadku sprzedawca dostanie od razu informację o tym, że przelew został zlecony.

Do najpopularniejszych e-portfeli należą PayPal i Masterpass. Użytkownik zakłada konto w serwisie zajmującym się płatnościami on-line. Następnie podpina swoje karty płatnicze tak, aby mógł dokonywać wszelkich transakcji w sieci lub za pomocą telefonu. Sprzedawca natychmiast otrzymuje informacje o przeprowadzeniu transakcji.

W większości sklepów internetowych zakupy można opłacić także standardowym przelewem zlecanym przez system bankowości internetowej. W tym przypadku sami musimy wypełnić formularz przelewu. Informacja o płatności trafi do sprzedawcy dopiero wtedy, gdy pieniądze wpłyną na jego konto.

Aby dokonać płatności kartą należy wprowadzić numery karty, datę jej ważności oraz trzycyfrowy kod CVC/CVV znajdujący się na odwrocie plastiku.

Pomimo szerokiej oferty płatności nadal aż 16% osób kupujących w sklepach internetowych wybiera opcję płatności pobraniowej.

Dostarczenie zakupionego towaru to, obok platformy e-commerce oraz systemu płatności, jedno z kluczowych zagadnień wpływających na zadowolenie klienta. Dobrą praktyką i coraz bardziej widocznym trendem jest pozostawienie wyboru opcji dostawy klientowi, który dokonał zakupu w sklepie internetowym. Klient nie tylko sam wybiera dostawcę i cenę za tę usługę, ale również zdecyduje, czy na zakupy będzie czekał pod domowym adresem, czy odbierze je w najbliższym punkcie funkcjonującym w sieciach typu „Paczka w Ruchu” lub też o dowolnie wybranej porze wyjmie sobie przesyłkę z paczkomatu.

W 2015 roku nałożono na przedsiębiorców restrykcyjne obowiązki informacyjne i nadano konsumentom 14-dniowe prawo do zwrotu towaru bez podania przyczyny. Mimo wielu obaw o nadużywanie prawa do zwrotów, obserwujemy wzrost branży e – commerce a sklepy internetowe same wydłużają czas zwrotu do 30 a nawet 100 dni.

Według iAdvize współczynnik konwersji wśród osób odwiedzających sklepy internetowe, którzy uzyskali natychmiastowe wsparcie w trakcie wizyty, wynosi aż 28,4%. Na rynku dostępnych jest wiele możliwości wparcia klienta od chat botów, przez call center, po formularze kontaktu. Ważne jest budowanie poczucia u klienta, że na każdym etapie korzystania z platformy e-commerce po drugiej stronie są ludzie, którzy zareagują szybko, gdy tylko system zawiedzie.

Wszystko wskazuje na to, że Polski rynek handlu w Internecie czeka dalszy wzrost. Stale zwiększająca się liczba internautów, inwestycje marek w nowe kanały sprzedaży, rozwój sektora B2B uczestniczącego w handlu internetowym, coraz większa popularność spersonalizowanej reklamy czy upowszechnienie używania urządzeń mobilnych do wykonywania za ich pośrednictwem zakupów on-line. To tylko niektóre czynniki sprawiające, że rynek e- commerce czeka dalszy dynamiczny rozwój.

W świecie technologii i automatyzacji procesów systemy informatyczne, również systemy CRM odgrywają coraz większą rolę w codziennym życiu.

System CRM (ang. customer relationship management) – w wolnym tłumaczeniu jest to narzędzie do zarządzania relacjami z klientem. Może być to system informatyczny/program, który automatyzuje i wspiera procesy klient – organizacja w zakresie pozyskania, monitorowania działań oraz obsługi klienta.

Wyróżniamy dwa główne rodzaje oprogramowania: systemy zamknięte oraz systemy open source. Ten artykuł przybliży istotne informacje na temat różnic między nimi oraz dostarczy porównań w obszarach takich jak: rozwój/budowa oprogramowania, wsparcie, elastyczność rozwiązań i koszty.

Closed source software – oprogramowanie, którego kod źródłowy jest zaszyfrowany i bezpieczny. Oznacza to, że użytkownicy nie mają możliwości kopiowania, modyfikowania czy też usuwania poszczególnych części kodu. Każda próba ingerowania w kod źródłowy może prowadzić do poważnych konsekwencji od utraty gwarancji poprawnego działania oprogramowania aż do konsekwencji prawnych. Do oprogramowania zamkniętego zaliczają się np. dedykowane systemy CRM.

Open source software – jest to odwrotność oprogramowania zamkniętego. Pozwala użytkownikom na kopiowanie, modyfikowanie oraz usuwanie części kodu źródłowego. Programiści mogą używać dowolnych części kodu źródłowego zależnie od własnych potrzeb.

Wybór systemu CRM zależy w dużej mierze od potrzeb biznesowych i celów które przed danym przedsięwzięciem stawiamy.

Deweloperzy dedykowanych systemów CRM analizują potrzeby biznesowe klienta i dostosowują swój produkt do konkretnych wymagań. Następnie rozwijają oraz aktualizują swoje oprogramowanie tak żeby sprostać oczekiwaniom swoich klientów.

Istnieje przekonanie, że systemy open source tworzone są jedynie przez niezależnych programistów jednak większość oprogramowania open source powstaje w komercyjnych firmach oferujących również oprogramowanie zamknięte. Są różne modele biznesowe dla producentów otwartego oprogramowania. Oprócz darmowego udostępniania oprogramowania podstawowego można sprzedawać dodatkowe usługi, takie jak wsparcie klienta, dostęp do dodatkowych rozszerzeń, wtyczek, modułów czy szkolenia z obsługi. Możliwe jest też wykorzystanie bezpłatnej wersji open source, jako sposób na zachęcenie do kupna bardziej rozbudowanej wersji dostarczanej na licencji komercyjnej.

Zamknięte oprogramowanie zwykle zawiera dedykowane FAQ (ang. Frequently Asked Questions), podręczniki użytkownika (ang. User Manual/User Guide)  i opcje kontaktu z działem wsparcia. Jeśli wystąpi problem z oprogramowaniem, można przesłać zgłoszenie do pomocy technicznej i uzyskać odpowiedź w ciągu jednego dnia roboczego. Wszystkie czynności w razie problemów będą dobrze zorganizowane i udokumentowane.

Z drugiej strony, w przypadku oprogramowania typu open source nie ma wielu opcji pomocy technicznej, takich jak dedykowane FAQ – często zadawane pytania. Opcja kontaktu z pomocą może być niedostępna. Żeby poradzić sobie z problemem często należy poszukać informacji na forach lub czytać artykuły odnoszące się do danego tematu.

Dedykowane systemy CRM mają zazwyczaj funkcjonalność ściśle dopasowaną do potrzeb klienta. Elastyczność zawężona jest tylko do front-endu, czyli opcji dostępnych użytkownikowi. Funkcje są ograniczone do tego co zostało zaprogramowane. Zmiana któregokolwiek z elementów kodu może spowodować poważne problemy z działaniem programu.

Oprogramowanie open source pozwala na większą elastyczność. Można dodawać modyfikacje lub funkcje stworzone przez społeczność aby dostosować je do swoich potrzeb.

Istnieje kilka różnych modeli cenowych oprogramowania. My skoncentrujemy się na  regularnej usłudze zakupu i subskrypcji. Określony system może być sprzedawany jako jednorazowy zakup. Model subskrypcyjny opiera się na comiesięcznych płatnościach, które umożliwiają nam dostęp do oprogramowania np. w chmurze, czyli dostęp do systemu online bez potrzeby instalowania go na wielu urządzeniach.

Model wyceny zamkniętych systemów opiera się analizie potrzeb klienta i zawiera prawo do używania oprogramowania, niezależnie od tego, czy jest to koszt początkowy czy subskrypcja.

W przypadku oprogramowania open source nie ma kosztów związanych z podstawową funkcjonalnością. Mogą się jednak pojawić koszty wchodzące w zakres kastomizacji, np.: dodanie nowych funkcjonalności czy integracja z innymi systemami. Cena tych przystosowań uzależniona jest od zakresu prac. Nierzadko za takie prace płaci się tyle ile za same licencje lub więcej.

Zarówno dedykowane systemy zamknięte, jak i systemy open source mogą być wyceniane na zbliżonym poziomie. Dedykowany system CRM generuje koszty związane programowaniem, podczas gdy oprogramowanie typu open source wiąże się z niewielkim lub żadnym kosztem zakupu, ale może powodować wydatki związane z dodatkowymi funkcjami.

Jeśli Twój biznes potrzebuje systemu prostego posiadającego podstawowe funkcjonalności oraz będzie Ci zależało na maksymalnym ograniczeniu kosztów związanych z zakupem oprogramowania, systemy open source mogą być dobrym wyborem.

Jeśli natomiast potrzebujesz rozwiązań ściśle dopasowanych do swoich potrzeb, wsparcia technicznego, rozbudowy lub integracji z już istniejącym oprogramowaniem czy bazą danych, to należy poważnie rozważyć wybór dedykowanego systemu CRM.

W tej części tutoriala użyjesz właściwości background-clip aby uzyskać ciekawy napis przy pomocy nagłówka h1.

Struktura HTML

Umieść w swoim kodzie dwa bloki i nadaj im kolejno ID:  napis-1, napis-2. W obu blokach umieścić dowolny tekst za pomocą nagłówków h1.

<div id="napis-1">

<h1>LEW</h1>

</div>


<div id="napis-2">

<h1>Jest królem dżungli!</h1>

</div>

Style CSS

Teraz w CSS użyjemy właściwości background-clip aby przyciąć odpowiednio tło do tekstu. Tło domyślnie będzie rozciągać się do zewnętrznej krawędzi obramowania tekstu.

Użyjemy dwóch różnych obrazów tła. Pierwszy z nich to bedzie lew a drugi dżungla.

Właściwość Webkit-text-fill-color ustawiamy jako przezroczystą aby mieć pewność że kolor nie pojawi się nam w tekście.

#napis-1 {
	background: url(images/lion.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#napis-2 {
	background: url(images/jungle.jpg) no-repeat top center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
}

#napis-1 h1 {
	font-size: 200px;
	font-family: Anton, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin: 0;
	padding: 0;
}

#napis-2 h1 {
	font-size: 110px;
	font-family: Pacifico, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin-top: -75px;
	padding: 0;
}

Korzystając z właściwoścy webkit-mask-image możesz umieścić obraz w tekście. Jest to prawie taka sama właściwość jak background-clip z tym, że obraz maski przycina widoczną część elementu zgodnie z przezroczystością maski obrazu.

Struktura HTML

Stwórz napis używając nagłówka h1 i całość umieść w bloku o ID maska.

<div id="maska">

<h1>BARDZO FAJNY NAPIS Z TŁEM</h1>

</div>

Style CSS

W CSS określ kolor, typ, wielkość czcionki, itd. Ponadto użyj właściwości -webkit-mask-image do przycięcia tła wobec tekstu. Obróć tekst o -4 stopnie przy pomocy właściwości transform.

#maska{
    font-family: Oswald, sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(images/rough-texture.png);
    -webkit-transform: rotate(-4deg);
    -moz-mask-image: url(images/rough-texture.png);
    -moz-transform: rotate(-4deg);
    -o-mask-image: url(images/rough-texture.png);
    -o-transform: rotate(-4deg);
    mask-image: url(images/rough-texture.png);
    transform: rotate(-4deg);
}

W taki oto prosty sposób można łatwo przyciąć obraz do tekstu używając właściwości background-clip w CSS. Pamiętaj tylko, że przeglądarka Internet Explorer 8 nie ma wsparcia dla tej właściwości.

Demo oraz pliki do pobrania.