Tag: tworzenie stron internetowych

10
Wrz

Czas (ładowania) to pieniądz

Dlaczego potrzebujesz szybkiej strony internetowej i jak to osiągnąć?

Czy tego chcemy, czy nie, żyjemy w cyfrowym świecie. W świecie, w którym Internet odgrywa ogromną rolę. W świecie, w którym nowe pokolenia już nie korzystają z Internetu, a w nim żyją. W świecie, w którym osoby “żyjące” w Internecie, stają się pełnoprawnymi konsumentami. Wymagającym konsumentami. Cyfrowym konsumentami.

Jak zdobyć cyfrowego konsumenta?

Przede wszystkim sam musisz być cyfrowy. Jeśli dzisiaj nie ma Cię w Internecie, dla wielu Twoich potencjalnych klientów nie ma Cię w ogóle. Według badań BIA/Kelsey, aż 97% konsumentów, zanim podejmie decyzję o zakupie, szuka produktu w Internecie. W związku z tym, trudno dzisiaj mówić o prowadzeniu jakiejkolwiek działalności, w oderwaniu od Internetu. Jeśli nie chcesz tracić potencjalnych klientów, posiadanie strony internetowej staje się koniecznością.

Po drugie – Twoja obecność w Internecie musi być atrakcyjna dla Twoich potencjalnych klientów. Statystyki pokazują, że sformułowanie opinii na temat Twojej strony internetowej zajmuje użytkownikowi tylko 50 milisekund (!). Dlatego przyjazny design strony www jest bardzo istotny w procesie pozyskiwania klientów. Im łatwiej użytkownik znajdzie potrzebne informacje tym większa szansa na to, że stanie się Twoim klientem. Ale to nie wszystko – istnieje czynnik, który spowoduje, że potencjalny klient zamknie nawet najładniejszą i najczytelniejszą stronę – czas ładowania.

97% konsumentów wyszukuje produkt w Internecie zanim dokona zakupu

Czas (ładowania) to pieniądz

Limity czasu dla ładowania strony i utrzymania uwagi użytkownika nie zmieniają się od dawna. W 1993 roku Jakob Nielsen opisał 3 progi dla czasu oczekiwania na przeładowanie.

Od 0 do 0.1 sekundy. To czas, który daje użytkownikowi poczucie bezpośredniej kontroli nad wszystkim co dzieje się na stronie internetowej. W odczuciu potencjalnego klienta strona reaguje natychmiastowo, dlatego jest to idealny czas reakcji strony www.
Od 0.1 do 1 sekundy. Użytkownik ma poczucie, że komputer “myśli” nad jego poleceniem, ale nie wpływa to negatywnie na jego odczucia. 
Od 1 do 10 sekund. 10 sekund to maksymalny czas utrzymania uwagi użytkownika. Brak odpowiedniego feedbacku od strony internetowej spowoduje, że potencjalny klient straci zainteresowanie treścią

Statystyki zebrane przez Skilled wskazują na kilka tendencji związanych z szybkością działania strony.

mPulse mobile wykazało, że współczynnik konwersji tej samej strony, ładującej się 5.7 sekundy i dłużej, jest ponad 3 razy niższy niż tej ładującej się 2.4 sekundy. Ponadto w przypadku 2.4 sekundowego ładowania 20% użytkowników od razu zamknęło stronę, a przy ładowaniu przez 9.9 sekundy zrobiło to aż 58% użytkowników. Przykładowo: Pewna firma ma stronę internetową, której ładowanie trwa około 10 sekund. Miesięczny ruch na stronie wynosi 10000 użytkowników, jej współczynnik konwersji wynosi 0,5%, a średnia wartość zamówienia składanego przez stronę to 100 złotych. Po wczytaniu strony zostaje na niej 4200 użytkowników, z których 50 dokonuje zakupu. W takiej sytuacji miesięczny przychód generowany przez stronę wynosi 5000 złotych. Jeśli firma skróci czas ładowania strony do 2.5 sekundy współczynnik konwersji wzrośnie do około 1.7%, a po wczytaniu zostanie na niej prawie dwukrotnie więcej użytkowników (około 8000). Po takiej zmianie, zakupu dokona 170 użytkowników, co poskutkuje ponad trzykrotnym wzrostem miesięcznego przychodu – do 170 000 złotych.
Amazon wyliczył, że spowolnienie ich strony tylko o 1 sekundę spowoduje roczny spadek sprzedaży w wysokości aż 1.6 miliarda dolarów.
Według danych AutoAnything przyspieszenie ładowania ich strony o połowę, przyniosło firmie 13% wzrost sprzedaży i 9% wzrost współczynnika konwersji.

Krótko mówiąc – krótsze ładowanie strony to lepsze wyniki firmy. Dodajmy do tego fakt, że, według Skilled, 64% użytkowników smartfonów oczekuje czasu ładowania krótszego niż 4 sekundy, a 47% klientów – krótszego niż 2 sekundy, a będziemy mogli sformułować wniosek. Jaki? Są takie firmy, którym zależy na szybkiej stronie internetowej i takie, którym będzie na tym zależeć.

Użytkownicy oczekują krótkiego czasu ładowania

Dlaczego strony internetowe działają wolno?

Skoro wiemy już, jaki wpływ na użytkownika wywiera szybkość ładowania, zajmijmy się tym, co powoduje wolne działanie strony. Najpopularniejsze przyczyny długiego czasu ładowania to przede wszystkim:

Niezoptymalizowane obrazy

Najczęstszą przyczyną wolno działającej strony jest duża liczba niezoptymalizowanych zdjęć. Obrazki w dużej rozdzielczości potrzebują czasu na załadowanie – umieszczanie zbyt dużych obrazów a następnie skalowanie ich rozmiaru jest marnowaniem zasobów i źle wpływa na czas ładowania strony. Innym aspektem jest format zdjęć – przykładowo, zdjęcia w formacie JPEG zajmują znacznie mniej miejsca, a przez to ładują się szybciej, niż PNG czy GIF.

Problemy z JavaScript’em

Rozwój JavaScript’u spowodował, że dodawanie dynamicznych elementów na stronę www jest wygodniejsze niż kiedykolwiek. Jednak im więcej takich elementów pojawia się na stronie, tym większe jest ryzyko źle zoptymalizowanego kodu, który opóźni wczytywanie strony.

Nie korzystanie z cache

Caching to zapisywanie kopii często używanych plików strony w pamięci cache, tak, aby ich wczytywanie odbywało się szybciej. Zastosowanie cachingu po stronie przeglądarki i serwera pozwala znacząco skrócić czas potrzebny do załadowania strony www.

Niewłaściwy hosting

Nieodpowiednio dobrany hosting może spowolnić nawet najlepiej zoptymalizowaną stronę internetową. Źle zoptymalizowane serwery spowodują, że strona będzie się wczytywała długo za długo i przyniesie więcej frustracji niż korzyści.

Jak zapobiegać wolnemu działaniu stron?

Realizując projekty stron internetowych w Akanzie optymalizujemy nasze strony na kilka sposobów. Przede wszystkim korzystamy z nowoczesnych technologii, które pozwalają na tworzenie stron www, które nie tylko wyglądają atrakcyjnie, ale również działają szybko i sprawnie na każdym urządzeniu: Vue.js, Angular, Django, Laravel i innych. 

Korzystamy z nowoczesnych technologii, które zapewnią szybkość działania Twojej strony

Nasi project managerowie ustalają, które grafiki muszą znaleźć się na stronie w najlepszej możliwej jakości, a które mogą być bardziej skompresowane. Web developerzy Akanzy dopasowują grafiki do odpowiednich rozmiarów w celu zapewnienia optymalnego ładowania strony.

W sytuacjach w których czas oczekiwania na treść przekracza przyjęte standardy – np. z powodu dużej liczby wpisów blogowych do załadowania – używamy np. szkieletu strony w celu zasygnalizowania, że treść jest wczytywana.

Szkielet strony sygnalizuje, że treść jest wczytywana

Ponadto nasi programiści optymalizują kod m.in. poprzez stosowanie asynchronicznego ładowania skryptów oraz dzięki dbałości o najwyższą jakość kodu – korzystamy z code review, pracujemy według metodyki Scrum, od samego początku w proces tworzenia strony zaangażowany jest tester. Jeśli aplikacja webowa tego wymaga, implementujemy caching, który znacząco przyspiesza działanie dużych stron internetowych. 

Nasi specjaliści doradzą również w kwestii wyboru optymalnego hostingu dla strony – takiego, który zapewni szybkie działanie strony, a jednocześnie nie będzie stanowił przerostu formy nad treścią.

Jeśli potrzebujesz szybkiej strony internetowej, skontaktuj się z nami. Damy z siebie wszystko, żeby dostarczyć Tobie i Twoim klientom stronę internetową na jaką zasługujecie!

22
Lut

9 nowatorskich trendów w tworzeniu stron internetowych w 2018 roku.

Projektowanie stron internetowych jest o wiele bardziej zależne od zmian technologicznych, niż w przypadku nośników tradycyjnych, np. druku. Warto zauważyć, że Web Designerzy (osoby projektujące strony internetowe) bardzo dobrze radzą sobie z rosnącymi wyzwaniami technologicznymi oraz potrafią tworzyć strony przyjazne dla użytkownika, przejrzyste i innowacyjne, przystosowujące się do każdego możliwego urządzenia i po prostu ładne.

W 2017 roku byliśmy świadkami przełomu, kiedy to przeglądanie stron internetowych na urządzeniach mobilnych wyprzedziło komputery stacjonarne. Oznacza to, że 2018 rok będzie musiał w pełni wykorzystać funkcjonalność mobilną w sposób, jakiego nigdy wcześniej nie widzieliśmy. Rzućmy zatem okiem na niektóre godne uwagi trendy w projektowaniu stron internetowych, które będą rozwijane w 2018 roku.

1. Cienie i głębia / Drop shadows and depth

Mimo, że cienie są od dawna podstawą projektowania stron internetowych, dzięki postępowi przeglądarek internetowych, obserwujemy kilka ekscytujących odmian tego trendu. Coraz bardziej popularne są warstwowe układy, nachodzące na siebie, przewijające się z różną prędkością. (tzw. parallaxy). Projektanci stron internetowych bawią się cieniami bardziej niż kiedykolwiek, aby stworzyć głębię i iluzję świata poza ekranem. Jest to bezpośrednia reakcja na trend płaskiego wzornictwa, który był i nadal jest popularny.

Gra cieni tworzy zaskakujący efekt, który zwiększa nie tylko estetykę strony internetowej, ale także wspomaga użytkownika w poruszaniu się po witrynie internetowej (User Experience – UX). Na przykład, używanie miękkich, subtelnych cieni jako efektu najazdu na elementy strony (hover) oraz połączenie ich z żywymi gradientami kolorów zwiększa trójwymiarowy efekt i po prostu dobrze wygląd

2. Żywe nasycone kolory / Vibrant, saturated color schemes

2018 to zdecydowanie rok żywych, nasyconych kolorów na stronach internetowych. Podczas gdy w przeszłości wiele marek utrzymywało się w kolorach stonowanych i bezpiecznych, coraz więcej projektów stron internetowych staje się bardziej odważnych w podejściu do kolorów – w tym przesycenia i żywych odcieni połączonych z nagłówkami, które nie są już tylko poziome, ale ponownie przerysowane za pomocą ukośników i ostrych kątów.

Na ten trend ma wpływ niewątpliwie postęp technologiczny monitorów coraz lepiej odwzorowujących kolory oraz urządzeń mobilnych z ekranami HD, które są coraz lepsze. Żywe, a nawet kontrastujące ze sobą kolory mogą być przydatne dla nowych marek, które liczą na natychmiastowe przyciągnięcie uwagi. Ten trend jest również idealny dla marek, które chcą odróżnić się od „bezpiecznego designu” i tradycji.

3. Wersje mobilne z pierwszeństwem / Mobile first

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 rodzaju urządzenia. W przeszłości był to przylegający proces, którego użytkownicy nie przyjęli tak szybko. Jednak teraz statystyki pokazują, że w coraz większej ilości branż małych i średnich przedsiębiorstw, ruch na stronach www generowany jest właśnie przez urządzenia mobilne a nie kopmutery stacjonarne. Osoby wchodzące na stronę internetową przez urządzenia mobilne oczekują szybkiego działania i prostego, czytelnego menu.

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.

4. Przyśpieszenie ładowania stron mobilnych / AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages) jest projektem, który ma pomóc usprawnić działanie mobilnych stron internetowych. Należy pamiętać, że mimo upowszechnienia internetu mobilnego nie zawsze jego szybkość jest wystarczająca, aby dynamicznie wczytać rozbudowaną i bogatą w treści witrynę. Każda sekunda opóźnienia zwiększa ryzyko, że użytkownik ją po prostu opuści. Aby temu zapobiec, Google wraz ze swoimi partnerami uruchomili AMP. Projekt ma charakter open source’owy, co znaczy, że każdy ma dostęp do kodu źródłowego, może go udoskonalać i modyfikować, a także wykorzystywać za darmo.

5. Dedykowane ilustracje / Custom illustrations

Ilustracje dają bardzo duże możliwości kreacji. To świetne, uniwersalne nośniki do tworzenia obrazów, które są przyjazne, mogą być śmieszne oraz dodają element zabawy do witryny internetowej. Web designerzy, graficy czy artyści mogą tworzyć ilustracje, które są pełne osobowości dostosowanych do charakteru marki – do czego dążą wszystkie marki na rynkach, które każdego roku stają się coraz bardziej zatłoczone.

Trend ten jest idealny dla firm, które chcą być postrzegane jako energiczne, dające radość, ale mogą również sprawić, że marki, które są zazwyczaj postrzegane jako poważne i stonowane, będą bardziej dostępne dla swoich klientów. Niezależnie od tego, jaka jest Twoja tożsamość marki, najprawdopodobniej dopasujesz styl ilustracji do swoich potrzeb.

6. Odważna typografia / Big, bold typography

Typografia w czasach przed-internetowych oznaczała specjalną technikę druku wypukłego wykonanego na maszynach drukarskich z form zawierających materiał zecerski oraz klisze. Współczesna typografia to przeplatanie cienkich ascetycznych fontów, tłustymi i ciężkimi krojami szeryfowymi. Działanie na zasadzie kontrastów wprowadza do przestrzeni dynamikę oraz sprawia, że oko użytkownika się nie męczy, śledząc cały czas ten sam monotonny tekst.

Typografia zawsze była potężnym narzędziem wizualnym, zdolnym do tworzenia osobowości, wywoływania emocji i nadawania tonów stronie internetowej przy jednoczesnym przekazywaniu ważnych informacji. Teraz, gdy rozdzielczości urządzeń stają się coraz większe a czcionki łatwiejsze do odczytania, spodziewany jest duży wzrost wykorzystania czcionek niestandardowych. Z wyłączeniem Internet Explorera wiele przeglądarek może obsługiwać ręcznie wykonane kroje pisma, które są włączone przez CSS dla przeglądarek internetowych. Tendencja wykorzystywania dużych liter, kontrastujących nagłówków pomaga tworzyć dynamiczne podobieństwa tekstów, ulepszać UX (User Experience), a co najważniejsze, utrzymywać odwiedzającego w Twojej witrynie w internecie.

7. Asymetria i łamane układy strony / Asymmetry and broken layouts

Jedną z dużych zmian w 2017 r. było wprowadzenie asymetrycznych i niekonwencjonalnych „zepsutych” układów, a ten trend sieciowy nadal będzie się rozwijał w 2018 r. Atrakcyjność układu asymetrycznego polega na tym, że jest unikalny, wyróżniający się a czasem wręcz eksperymentalny.

Chociaż duże marki z dużą ilością treści nadal korzystają z tradycyjnych struktur w sieci, oczekuje się wzrostu wykorzystania niekonwencjonalnych układów w projektowaniu stron internetowych. Kreacja marki zakłada stworzenie wyjątkowego doświadczenia, aby się wyróżnić. Tradycyjne firmy na ogół nie będą zainteresowane tą estetyką.

Nie mniej jednak duże firmy, które mogą sobie pozwolić na agresywny dynamiczny przekaz będą oczekiwały nowatorskich pomysłów od twórców ich kreacji w Internecie.

8. Zintegrowane animacje / Integrated animations

Wraz z rozwojem technologii przeglądarek, coraz więcej twórców stron internetowych porzuca statyczne ilustracje na rzecz animacji, aby przyciągnąć uwagę użytkowników. W przeciwieństwie do wcześniej wspomnianych ilustracji, które zazwyczaj tworzą statyczne tło, animacje są pomocne w angażowaniu użytkownika przez całe jego doświadczenie na stronie. Animacja może na przykład zająć użytkownika podczas ładowania strony lub wyświetlać użytkownikowi interesujące rozwinięcie grafiki po najechaniu na link. Można je również zintegrować w z przewijaniem (scrollowaniem) strony internetowej, nawigacją lub centralnym punktem całej witryny.

Animacja to świetne narzędzie do włączania użytkowników w pewną historię, pozwalając im widzieć siebie (i ich potencjalną przyszłość jako klientów) w postaciach. Nawet jeśli interesują cię tylko animacje ciekawych abstrakcyjnych elementów wizualnych, dobrze się sprawdzą, aby stworzyć znaczące interakcje z użytkownikami.

9. Dynamiczny gradient / Dynamic gradient

W ciągu ostatnich kilku lat tzw. „flat design” był zdecydowanie preferowanym trendem w projektowaniu stron internetowych. Ale gradienty powracają w 2018 roku. Ostatnio pojawiające się kreacje były projektowane głównie w postaci subtelnego cieniowania sugerującego 3D – ikony Apple na iOS są świetnym przykładem.

Teraz gradienty są już duże, wyraźne i pełne kolorów. Najpopularniejszym niedawnym wcieleniem jest filtr zdjęć – świetny sposób na to by mało interesujące zdjęcie stało się bardziej intrygujące. Proste, gradientowe tło może być także idealnym rozwiązaniem, jeśli nie masz żadnych innych obrazów pasujących do twojej strony internetowej.

Wyraźne kolory, odważne gradienty i zintegrowane animacje będą trendami rozwijanymi w 2018 roku. Nie możemy się doczekać, aby zobaczyć co projektanci wymyślą i jak będą przesuwać granice interakcji z użytkownikami Internetu.

19
Paź

„Coming Soon Page”. Dobre praktyki.

Co należy zrobić, gdy strona internetowa jest w budowie i nie jesteś jeszcze gotów na jej uruchomienie?

Niezależnie od tego, czy projektujesz stronę prezentującą nowy produkt lub aplikację, czy po prostu tworzysz nową wersję swojej strony internetowej warto stworzyć “Coming Soon Page”. Dobrze przygotowana “strona w budowie” może pomóc Ci zdobyć potencjalnych klientów. Zajawka strony być dobrym narzędziem promocyjnym, marketingowym dla niektórych serwisów internetowych. Dobrze zaprojektowany Landing Page może przyciągnąć uwagę dla nowej aplikacji lub produktu – jest to dość popularne rozwiązanie.

Kilka porad…

To czego potrzebujesz by stworzyć efektowne “Coming Soon Page” to nie tylko zestaw kolorów czy ładnych zdjęć. Potrzebujesz takich komponentów, które będą potrafiły zaangażować odwiedzających użytkowników.

Najlepsze tego typu strony nie są skomplikowane, zawierają tylko jedną rzecz którą chcemy by wykonali nasi odwiedzający. Nie twórz zbyt wielu opcji. Pamiętaj, że Landing Page to tylko zwiastun Twoje docelowej strony internetowej.

counter

Pomyśl o atrakcyjnych graficznie elementach jak licznik, który będzie odliczać czas do uruchomienia pełnej wersji Twojej strony lub np. rozpoczęcia sprzedaży danego produktu. Pamiętaj by czas który odliczasz miał pokrycie w rzeczywistości!

landing page formBardzo często stosuje się formularz, za pomocą którego zbieramy adresy e-mail zainteresowanych nami osób. Dzięki czemu po uruchomieniu właściwej wersji strony internetowej możemy poinformować o tym fakcie naszych potencjalnych klientów. Konwersja w tym przypadku jest wyjątkowa wysoka.

Tworząc “Coming Soon Page” używaj kolorystyki, typografii czy zdjęć, które są ściśle powiązane z Twoja marką. Użytkownicy muszą czuć, że Landing Page jest elementem Twojej docelowej strony a nie jej odrębnym tworem.  

Dołącz logo i krótki opis tego czym się zajmujesz. W przypadku nowej marki lub wprowadzenia produktu użytkownicy potrzebują wystarczających informacji, aby wiedzieć, że są zainteresowani tym, co oferujesz.

Jeżeli potrzebujesz pomocy w zaprojektowaniu strony internetowej służymy pomocą!