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
Dzisiaj bardzo krótki wpis, w którym przedstawię Ci mały CSSowy ficzer (text-overflow: ellipsis) do eleganckiego ucinania tekstu, który nie mieści się we wskazanym miejscu – na przykład w kontenerze rodzica. Możliwość tę wykorzystywać będę w aplikacji projektowanej na potrzeby DSP2017. Czytaj dalej Automatyczne skracanie tekstu w CSS
W tym miesiącu ekipa ThemeForest wystawiła nam do odbioru prosty, acz funkcjonalny szablon dla WordPressa. Może nie jest to szczyt designerskich możliwości i nie idzie w parze z obecnymi trendami UI, jednak gdyby ktoś chciał posiadać go w swojej kolekcji, ma teraz możliwość zrobić to zupełnie za darmo. Czytaj dalej Szablon dla WordPressa do odbioru z ThemeForest
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
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?
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…
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.
Responsywne 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?
Od 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.
Zacznijmy od przygotowania prostej strony HTML, która zawierać w sobie będzie cztery oddzielne sekcje (.content ) informacyjne, oddzielone od siebie blokiem separatora (.separator ).
Separator pomiędzy sekcjami powinien (przynajmniej trochę) odróżniać się od reszty.
1
2
3
4
5
6
.separator{
font-size:1.6em;
padding:2.6em0;
text-align:center;
background:#333;
}
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bg1{
background-color:#fff;
background-image:url("bg1.jpg");
}
.bg2{
background-color:#fff;
background-image:url("bg2.jpg");
}
.bg3{
background-color:#fff;
background-image:url("bg3.jpg");
}
.bg4{
background-color:#fff;
background-image:url("bg4.jpg");
}
Na koniec część najważniejsza. Style dla sekcji z treścią.
1
2
3
4
5
6
7
8
9
10
.content{
color:#fff;
min-height:650px;
text-align:center;
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
text-shadow:0020px#000;
font-size:1.8em;
}
Kluczowym elementem jest linia #6:
6
background-attachment:fixed;
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.
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.
Responsywne 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…
Od 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.
