Trendy w projektowaniu stron www 2013 cz.1

Wiele trendów przemija, ale niektóre pozostają na dłuuuugie lata. Przedstawię kilka trendów, które pojawiły się w tym roku na wielu stronach internetowych. Niektóre z nich są naprawdę świetne gdyż ich funkcjonalność po prostu umila korzystanie z internetu. Zacznę od takiego na początku.

Elastyczne strony w technologii Responsive Web Design

Witryna w tej technologii jest tak zaprojektowana, że strony skalują się wraz ze zmianą rozdzielczości. Dostosowane są do każdego wyświetlacza mając w sobie kilka stałych układów. Moje portfolio ma w sumie 5 układów. Najczęściej są to układy podporządkowane pod bardzo szeroki desktop, mniejszy desktop, tablet pionowy, telefon poziomy i telefon pionowy. Technika projektowania takich stron opiera się głównie na ustawianiu wymiarów procentowo. Dzięki czemu przeglądarka wraz ze zmianą szerokości okna proporcjonalnie zmniejsza elementy strony internetowej wyświetlając stronę w taki sposób w jaki stworzył ją projektant z programistą.

Wsparcie dla wysokiej rozdzielczości ekranów Retina (Apple)

Trend widoczny głównie w Stanach Zjednoczonych. Ze względu oczywiście na technologie ekranów, które maja wyższe PPI od normalnego tj. więcej pixeli na cal. Grafiki przygotowywane pod taką rozdzielczość ekranów mają zazwyczaj 96 ppi, w porównaniu z normalnymi rozdzielczościami stosowanymi od wielu lat czyli 72 ppi. Jedyna różnica jaka jest widoczna to ostrość elementów. Widać, że grafika w ekranach Apple z Retiną jest ostra jak żyletka. Teksty w takich wyświetlaczach są czytelne nawet przy wielkości 2-5mm. Naprawdę fajna sprawa. Choć aktualnie wiele tekstów i tak jest tworzonych na słabszej jakości ekrany przez co projektanci robią je zdecydowanie większe, aby również ludzie starsi lub z wadami wzroku mogli spokojnie przeczytać teksty.

Zdjęcia w tle na całym ekranie

Stosowane coraz częściej na stronach przez marki odzieżowe. Coraz częściej można spotkać stronę wykonaną na całość ekranu, ale głównym motywem strony są zdjęcia w tle. Czasami bardzo konkretne ostre zdjęcie, a czasami rozmyte nie do końca sugerujące, co to za obraz. Na takich stronach warto zmniejszać ilość treści i pozostawiać wolną przestrzeń dla fotografii. To właśnie zdjęcie ma budować klimat strony, zaś tekst być tylko krótką i konkretną informacją.

Transparentne tła i grafiki

Półprzezroczyste pola, na których widzimy teksty są bardzo fajnym rozwiązaniem w przypadku gdy mamy w tle wspomniane duże zdjęcie. Jeśli wykonana strona ma wielkie foty w tle, wówczas może zabraknąć miejsca na przedstawienie dłuższego tekstu, który zarazem będzie czytelny i nie przysłoni fotografii. W takich sytuacjach najczęściej ratujemy sie dołożeniem półprzezroczystego tła, które jednocześnie nie zakrywa w 100% obrazu tła, ale pomaga o wiele bardziej w przeczytaniu treści. Do tego stosuje się również elementy graficzne, które są półprzezroczyste. Taka forma tworzenia wyglądu strony powoduje, że witryna nabiera kilku wymiarów głębi, co zapewne pobudza jeszcze bardziej nasze zmysły i reakcję.

Strony minimalistyczne

To taki trend, który coraz bardziej nas otacza nie tylko w internecie przy tworzeniu stron internetowych. Coraz częściej rebranding (zmiana wizerunkowa marki) przechodzą wielkie marki. Przypomnę: PZU, Get in Bank, Poczta Polska, Warta itd. Logotypy zostały uproszczone, a ma to swoje przełożenie w jeszcze dosadniejszym i łatwiejszym przekazie. Mniej znaczy więcej. Proste znaki i czytelne informacje szybciej trafiają do odbiorcy. Zatem także na stronie internetowej wolimy czysto i przejrzyście. Dzięki takiemu podejściu mamy zapewnione, że użytkownik zatrzyma się nieco dłużej na naszej witrynie aniżeli przy starszych wersjach strony www. Warto rozważyć temat, jeśli nasza strona ma już kilka lat i zapewne w wielu miejscach ma elementy zupełnie niepotrzebne, które raczej są tylko dodatkiem aniżeli mają coś konkretnego powiedzieć. A przecież powinny sprzedawać.

Strony płynne w 3 wymiarach w technologii Parallax

Strona w technice parallax najczęściej jest tak skonstruowana, że wszystkie podstrony są umieszczone na stronie głównej. Nie ma zatem tradycyjnego sposobu przechodzenia do stron poprzez odświeżenie się nowej podstrony. Technika parallax polega na tym, że strona ma swoją nawigację najczęściej na górze witryny a po wybraniu odpowiedniej pozycji strona przewija się w odpowiednie miejsce niżej, aby pokazać nam fragment, który chcieliśmy zobaczyć. Dzięki temu widzimy od razu podczas przewijania jakie treści są widoczne w witrynie i mamy wszystko widoczne bez odświeżania. Dodatkowym bajerem na takich stronach jest wprowadzenie pewnej trójwymiarowości. Polega to na tym, że podczas przewijania pewne elementy przewijają się wolniej, a inne szybciej. Mamy dzięki temu wrażenie, że strona ma 3 przestrzenie i za pomocą grafiki widz może czuć się jakby oglądał stronę w jakimś szerszym wymiarze. Niestety aktualnie technologia ta jest dosyć skomplikowana i strony zazwyczaj zajmują bardzo dużo miejsca oraz są ciężkie dla obliczeń w słabszych komputerach. W Polsce większość stron, które widziałem na słabszych sprzętach po prostu się przycina i haczy. Zatem może minąć jeszcze kilka miesięcy a może nawet 2 lata, zanim na dobre w Polsce wejdą tego typu strony. Oczywiście szybkie komputery radzą sobie z taką stroną bez problemu. Jedną z takich stron zastosowanych w technologii parallax jest nasza oferta specjalna.

Kody QR dla smartfonów

Wiele osób w Polsce nie wie czym one właściwe są. Nie dziwię się. Na razie w naszym kraju taka forma przekazu nie została uznana za atrakcyjną. Jednak śmiem twierdzić, że prędzej czy później kody QR będą wykorzystywane. Coraz większy napływ smartfonów i tabletów posiadających kamerę z aparatem pozwalają mieć nadzieje, że użytkownicy swoich telefonów będą korzystać z kodów QR. Na czym one polegają? Najczęściej jest to znaczek z małymi kwadracikami, które tworzą jakiś wzór, a całość zamknięta jest również w kształcie kwadratu. Użytkownik może swoją kamerą w telefonie najechać na kwadracik i za pomocą specjalnej aplikacji wystarczy kliknąć Otwórz. Po otwarciu najczęściej przenosi nas do innej aplikacji albo na stronę internetową. Dzięki temu na plakacie klikając w znaczek QR możemy od razu przejść na stronę www bez męczenia się z wpisywaniem adresu strony. To fajna forma, ale nadal jeszcze mało popularna w naszym kraju.

Integracja z Social Media

Polskę ogarnął na dobre świat Social Media. Wielu ludzi ma swoje konto na Facebooku, wiemy trochę co to jest Google+ i korzystaliśmy niemal wszyscy z NK (nasza klasa). Sporo osób porozumiewa się ze znajomymi poprzez Facebook. Ten serwis ma również magiczną funkcję w przycisku „Lubię to”. Tak naprawdę lubiąc coś od razu stajemy się fanem albo całego profilu użytkownika, albo strony, albo konkretnej treści przy której kliknęliśmy ten prosty przycisk. Na stronach internetowych oprócz dodania ikonki „F” informującą czytelników, ze korzystamy z Facebooka warto również umieścić przycisk „Lubię to” czy komentarze od Facebooka. Często również spotykamy się z zakładkami z boku ekranu, w których po kliknięciu zobaczymy miniaturki zdjęć fanów i wpisy podmiotu, który oglądamy. Zachęcam do korzystania z takiej formy integracji. W zasadzie są w niej same plusy. Te działania są już znane od 2011 roku, ale można powiedzieć, że dopiero ostatni rok zwiększył ilość takich integracji. Oczywiście jest to związane ze szkoleniami w firmach czy po prostu popularyzacją takiej formy wśród znajomych i firm. Aczkolwiek jest jeszcze sporo podmiotów, które nie wiedzą jak z tego korzystać, albo nawet nie wiedzą o facebook. Choć może oznacza to, że wcale nie muszą być na facebooku a biznes kręci się dobrze bez takich działań.

Doładowywanie treści po scrollowaniu

Chyba pierwszy raz w większej skali taka forma pojawiła się w serwisie pinterest i facebook. Jest to taki serwis, który wraz z przewijaniem strony w dół witryna dodaje kolejne treści. Zazwyczaj taka strona się nie kończy. Chyba, że wczytają się wszystkie treści serwisu (to chyba nierealne :D). Taka forma jest niezwykle funkcjonalna gdyż nie musimy przechodzić na kolejne strony, aby zobaczyć więcej treści. Jedyną wadą tej technologii jest to, że gdy wczytamy baaardzo wiele treści może się okazać, iż nasze urządzenie tego nie wytrzyma, a strona się zawiesi. Chyba, że w przyszłości ten problem zostanie rozwiązany. Może przykładowo będzie tak, że treści na początku będą usuwane aby przeglądarka widziała ciągle tylko określoną ilość, a My jako użytkownicy w ogóle tego nie odczujemy. Po prostu podczas przewijania w górę strona ponownie doładuje usunięte treści.

Kolejne trendy przedstawię w części drugiej już wkrótce. Jeśli zauważyliście jakiś inny trend na stronach internetowych piszcie w komentarzach.