Slider ( baner ) na stronie internetowej ? 21 przykładów jak to zrobić bez niego

slider na stronie internetowej

Jaka jest najlepsza alternatywa dla slideru (potoczna pisownia ‘slajder’) na stronie głównej ?

Właściwie można powiedzieć jakie są typy konstrukcji strony gdyż wybór ten definiuje cały projekt strony internetowej pociągając za sobą konkretne rozwiązania. Zapraszamy do zapoznania się z poniższą listą gdzie mamy nadzieję te kilka przykładów pozwolą wyjść poza ramy slideru na stronie głównej.

 

I. Grafika obok tekstu – zyskaj na wysokości

 

Zaplanowanie powierzchni baneru tak by zestawić zdjęcie / przedmiot lub produkt obok hasła czy tekstu. Zyskujemy na wysokości, dodatkowo bez potrzeby przewijania strony komunikujemy to co dla nas istotne, jednocześnie całość jest czytelna i przejrzysta.

 

przyklady stron bez slideru

http://oliverbrewingco.com – animowana puszka w zależności od ustawienia kursora

 

strona bez slideru

http://beamlabsinc.com/

 

strona bez slajderu

http://primeunion.io

 

strona z animacja w miejscu slideru

http://www.playmag.fr/heroesoftomorrow + animacja na koszuli męższczyzny

 

strona z banerem wideo w miejscu slideru

https://brand.uber.com/ – pionowy baner – wideo, które ciekawie się ogląda również ze względu na format :), dużo miejsca na komunikację po lewej stronie, niecodzienna koncepcja ale przejrzysta i bardzo czytelna z zachowaniem dobrego usability.

 

ciekawa aranzacja miejsca na slider na stronie

http://healthcarecosmetics.pl/ – fantastyczna polska produkcja, właściwie nie ma się do czego przyczepić, popularny temat na stronę w idealniej formie. Dodatkowo ciekawie rozwiązana kwestia pozostawienia logo podczas przewijania strony.

 

strona z sekcja hero w tle

http://www.lingbe.com – pasuje również do punktu II – stron z obrazkiem w tle, w tej koncepcji dużą rolę odgrywa zestawienie zdjęcie – produkt.

 

sekcja tekstowa w miejscu baneru

http://elivo.pl/ – można i bez grafik, dlaczego by nie 🙂

 

czyste miejsce slajderu na stronie

http://ikano.ge/ – czysto i elegancko

 

strona bez slideru przyklad

http://memorymirror.com/

 

strona produktowa z produktem w sekcji slajderu

https://www.harrys.com/

 

 

 

II. Statyczny obrazek w tle zmiast slideru

 

Stosując odpowiedni kontrast zyskujemy dużą powierzchnię do umieszczenia krótkiego bloku tekstu, hasła, guzika wywołującego akcję u użytkownika. Zwykle stosuje się w tym rozwiązaniu dużą grafikę w tle na całą wysokość (na wzór landingpage), jednak lepszą opcją było by jej skrócenie do np. maksymalnie 60% wysokości, tak by dać użytkownikowi jeszcze dodatkowe informacje widoczne poniżej. W tej opcji również można zestawić w tle zdjęcia osobę, przedmiot po jednej stronie, hasła, teksty, guzik po drugiej.

 

statyczny obrazek w tle

https://www.tenslife.com/

 

animowane tlo w sekcji slideru

http://riiotlabs.com/

 

sekcja tekstowa z statycznym obrazkiem

http://adobe.com

 

prosty komunikat sekcji baneru

https://lunarway.com/

 

minimalizm sekcji hero bez baneru

https://www.thesunscreencompany.com/

 

elegancka sekcja z tlem i warstwa tekstu

https://www.motorola.com/us/products/moto-360

 

III. Zestawienie kliku obrazków / grafik obok siebie lub slideru

 

To rozwiązanie sprawdzi się jeżeli absolutnie potrzebujemy komunikować kilka odrębnych haseł, pokazać kilka działów firmy na stronie głównej. Wtedy dajemy taką możliwość użytkownikowi od razu ‘na strat’ po wejściu na stronę główną, szansa że doczeka do slajdu numer 3 jest znikoma.

 

strona z efektem zaluzji w miejscu slideru

https://www.airforce.com/

 

sekcja z kaflami

http://kinoteka.org.uk/

 

produktowy slider na stronie

https://www.spa.nl/

 

minimalistyczna strona glowna ze sliderem dzielonym

http://www.rialba.com/

 

sekcja landingpage kierująca do podstron

http://www.motorolapolska.pl/ – strona główna stanowi stronę rozbiegową dla użytkownika, który ma możliwość od razu przejść do działu który go interesuje – proste rozwiązanie i skuteczne, głównie dla firm mających do przedstawienia bogatą ofertę czy kilka filarów działalności

 

 

IV. Inne pomysły na slider ? czemu nie

 

Przykłady nieklasyfikujące się jednoznacznie z powyższym podziałem ale z zachowaniem wysokiej użyteczności i czytelności strony głównej.

 

sekcja rozbiegowa do oferty

https://dogadamycie.pl/

 

sekcja hero podzielona na kilka czesci

http://www.goodthink.com.pl/ – strona podzielona na cztery części jednak z zachowaniem czytelności, całości dopełniają delikatne animacje po najechaniu na poszczególne bloki dające więcej informacji o danym dziale.

 

 

sekcja produktowa po wejsciu na strone

http://www.rumchata.com/

 

wideo sekcja zamiast baneru

http://grainandmortar.com/ – ciekawe video w tle również przyciągnie uwagę i zatrzyma na dłużej, choć nie wszędzie się sprawdzi

 

 

animowany baner

http://www.nurturedigital.com/

 

inspiracje dla slideru na stronie glownej

http://www.baseblu.com/ – ciekawie rozwiązana kwestia baneru prostą interakcją

 

Slider na stronie internetowej – wady techniczne

 

Slider to dodatkowa waga (kb) do wczytania, załadowania przez stronę www

Po pierwsze dodatkowe skrypty js, wykonanie w java script czy zastosowanie gotowców często opóźnia ładowanie strony. Jest to niepotrzebne ładowanie kb na stronę.

Responsywny slider

Często gotowe slidery javascript czy js to rozwiązania technicznie niedopasowane do urządzeń mobilnych, tzn. źle wyświetlają się na telefonach bardziej przeszkadzając niż dając czytelny komunikat. Robione z automatów jak wtyczki (np: WordPress Revolution Slider, czy motopress) wymaga tuningu lub korekty programistycznej. Najlepiej usunąć go z wersji na telefon od konkretnej szerokości < 640px.

Jak zrobić dobry (fajny) slider na stronę internetową ?

Najlepiej nie stosować gotowych rozwiązań, napisać dedykowany jeżeli już musimy. Idealnie skorzystać z rozwiązań podanych powyżej.

Czy warto używać slidera na stronie internetowej dedykowanego ?

Odpowiedź jak powyżej tak jeżeli musimy go mieć – to jedyna opcja. Dedykowany kod nie ładujący niepotrzebnych kb na stronę. Idealnie by grafiki w sliderze były dopasowywane do ekranów (wymiary). Chodzi o to by na wersję mobilną nie wczytywać grafiki o wielkości 1920px tylko dedykowaną np. 640px czy 480px etc.

Wymiary slidera ?

Slider jeżeli już jest powinien się dopasowywać do szerokości contentu i być dedykowaną grafiką w formacje JPG! Najlepiej o zoptymalizowanej wadze i wymiarze dla urządzeń mobilnych.

 

    Mateusz - planuje i kreuje. Odpowiedzialny za cały zespół Hauerpower oraz główny kontakt z klientem. Specjalizuje się w SEO oraz UX.

    All author posts
    7 komentarzy
    Write a comment

    thirteen − four =