Płynne przewijanie strony – smooth scrolling


14 kwietnia 2017 / Michał Kortas


Ten krótki, piątkowy wpis poświęciłem na odświeżenie poradnika z przed sześciu lat. Pomimo swojego wieku był jest on jednym z najchętniej czytanych postów na tym blogu, nie mogę go więc tak po prostu zarchiwizować i zapomnieć. Jeśli korzystasz z jQuery w swoim projekcie, śmiało możesz wykorzystać poniższy trik na uzyskanie efektu płynnego przewinięcia do wybranego elementu interfejsu WWW. Czytaj dalej Płynne przewijanie strony – smooth scrolling


Tagi:


Bootstrap 4 i menu responsywne


13 lutego 2017 / Michał Kortas


Bootstrap 4 wciąż leży w powijakach, jednak z rosnącą nadzieją na finalne wydanie. Na blogu Bootstrapa znajdują się informacje o gotowości do wydania pierwszej bety, a co za tym idzie, nie powinny już pojawiać się żadne większe aktualizacje, nie licząc oczywiście bug-fixów. Myślę, że w tym wypadku mogę już w miarę bezpiecznie zacząć publikować krótkie poradniki związane z tymże frameworkiem. Całość dostępna będzie pod specjalnie wydzielonym tagiem Bootstrap 4. Czytaj dalej Bootstrap 4 i menu responsywne


Tagi:


Jak zwiększyć sprzedaż w sklepie internetowym?


9 marca 2016 / Mr.Mr


Ludzie chcą kupować i mają w zakodowane w głowie aby szukać okazji. Natomiast konsumenci kupujący towary w Twoim sklepie internetowym to być albo nie być biznesu online. Stąd sugestywny obrazek po lewej. Z jednej strony mamy potencjalnych klientów myślących o zakupach, a z drugiej strony e-biznesmena chcącego sprzedać towary. Wszystko brzmi jakby obie strony mogły idealnie się uzupełniać… więc co jest nie tak skoro Twój sklep nie osiąga dochodów?

Czytaj dalej Jak zwiększyć sprzedaż w sklepie internetowym?


Tagi:


Etykiety na stronach internetowych


21 grudnia 2014 / Mr.Mr


Etykiety na stronach internetowych

Image courtesy of digitalart at FreeDigitalPhotos.net

‚Etykietowanie stron internetowych’ to pojęcie, które może budzić mylne skojarzenia i jest dość rzadko spotykane. Cokolwiek sobie teraz nie pomyśleliście na temat tego czym jest etykietowanie stron mogę Wam z dużą dozą pewności powiedzieć, że nie trafiliście… W uproszczeniu etykietowanie to proces organizacji treści na stronie internetowej i jest on częścią procesu tworzenia architektury informacji a nie czymś do czego będzie Wam potrzebna znajomość PHP lub HTML. Jeśli to Was nie zniechęca to zapraszam do dalszej lektury…

Czytaj dalej Etykiety na stronach internetowych


Tagi:


A co Ty zrobiłeś żeby zoptymalizować konwersję na swojej stronie?


14 listopada 2014 / Mr.Mr


Optymalizacja konwersji

Image courtesy of bplanet at FreeDigitalPhotos.net

Jak to nie wiesz co to konwersja? Dobrze. Zacznijmy od początku. Można powiedzieć, że konwersja następuje wtedy kiedy odwiedzający naszą stronę zachowuje się zgodnie z naszymi oczekiwaniami. Przykładowo zachowaniem użytkowników pożądanym z punktu widzenia właściciela sklepu internetowego będzie złożenie zamówienia, a z punktu widzenia organizacji charytatywnej złożenie dotacji wspomagającej działanie fundacji. Tak więc ostateczne cele mogą mieć rozmaity charakter, często zupełnie nie finansowy, ale w gruncie rzeczy chodzi o to samo – sprawianie by użytkownicy mogli wejść w interakcję ze stroną w określony sposób, zgodny z celami właścicieli witryny.

Czytaj dalej A co Ty zrobiłeś żeby zoptymalizować konwersję na swojej stronie?


Tagi:


Responsive Design vs. Adaptive Design?


18 września 2014 / Mr.Mr


responsive and adaptive designResponsywne to responsywne tamto… cały czas słyszymy to słowo, które właściwie stało się hasłem wywoławczym współczesnego web design’u, a mnie osobiście powoli zaczyna irytować. Z czym mam problem? Otóż większość stron nazywanych responsywnymi wcale nimi nie jest… Zacznijmy od początku…
Czytaj dalej Responsive Design vs. Adaptive Design?


Tagi:


Nakładające się na siebie tła przy przewijaniu strony w CSS3


25 lipca 2014 / Michał Kortas


CSS3 LogoOd jakiegoś czasu zauważyłem (pewnie nie tylko ja) rosnący trend na budowanie witryn internetowych w stylu „one page”. Jest to ciekawe rozwiązanie kiedy chcemy zaprezentować klientom nasz produkt czy też zaprojektować swoje portfolio. Widziałem już kilka szablonów, które przy przewijaniu ich scrollem przedstawiają bardzo ładny efekt nakładania się na siebie teł poszczególnych sekcji witryny, przy czym każde z nich pozostaje nieruchomo w miejscu.

Nie wiem czy domyślacie się o czym mowa, dlatego już teraz przedstawię wam demo dla tego tutorialu.

Zobacz przykład on-line

Struktura HTML

Zacznijmy od przygotowania prostej strony HTML, która zawierać w sobie będzie cztery oddzielne sekcje (.content ) informacyjne, oddzielone od siebie blokiem separatora (.separator ).

Kod CSS

Dobrze, a więc na początek do naszego arkusza stylów dopiszmy następujący, startowy kod.

Separator pomiędzy sekcjami powinien (przynajmniej trochę) odróżniać się od reszty.

Dla każdej sekcji musimy przypisać osobne tło. Przyjęliśmy, że będą to cztery bloki, tak więc dyle deklaracji musimy zamieścić w arkuszu. Tło musi być wystarczająco duże, aby zakryć cały kontener. Oczywiście zostanie ono dopasowane automatycznie dzięki późniejszej właściwości CSS (background-size ), ale tak czy inaczej rozmiar obrazka musi być dość duży, aby nie stracił on na jakości.

Na koniec część najważniejsza. Style dla sekcji z treścią.

Kluczowym elementem jest linia #6:

Właściwość ta kotwiczy tło danego elementu w miejscu podczas przewijania ekranu.

Podsumowanie

W taki oto prosty sposób, korzystając jedynie z zalet CSSa stworzyliśmy ciekawy efekt. Powyższy tutorial jest tylko prostym przykładem. Zdaję sobie jednak sprawę, że za jego pomocą można przygotować jeszcze lepsze efekty wizualne naszej witryny.

Zobacz przykład on-line


Tagi:


Wywiad: Zespół Uxeria.com rozmawia z Webroad.pl!


21 lipca 2014 / Mr.Mr


Uxeria.com - testy użyteczności stron internetowych

Nasi wierni czytelnicy zapewne pamiętają firmę Uxeria.com, która jakiś czas temu pomagała nam przeprowadzać testy użyteczności Webroad.pl. Tym razem spotykamy się z zespołem Uxeria w innym celu. Postanowiliśmy przybliżyć Wam trochę ideę stojącą za usługą świadczoną przez Uxeria i przy okazji rzucić odrobinę światła na to czym są zdalne testy użyteczności i dlaczego mogą być przydatne.

Czytaj dalej Wywiad: Zespół Uxeria.com rozmawia z Webroad.pl!


Tagi: