Ludzie nie lubią ciemnych stron. Według badań prawie połowa użytkowników preferuje strony jasne. Strony ciemne lubi zaś jedynie około 10% ludzi. Pozostała część uważa, iż jest to zależne od samej strony.
Strony ciemne czyta się gorzej. Moim zdaniem jest to nieprawda. Jako osoba spędzająca dużo czasu w sieci wiem doskonale, że strony jasne są dużo bardziej męczące dla oczu niż strony ciemne. Wyobraź sobie, że kierujesz wzrok w stronę Słońca. Oślepia cię, no nie? A przecież to samo niebio bez Słońca jest ciemne, czarne. Bywa, że są na nim widoczne gwiazdy. Niebo nocą jest jak ciemna strona. Można się w nią wpatrywać godzinami, a nasz wzrok wcale nie ucierpi. W przeciwinieństwie do nieba w dzień, kiedy patrzenie się w niebo może powodować, że przez jakiś czas będziemy oślepieni.
Mimo wszystko z punktu widzenia projektanta stron należy wziąć pod uwagę, iż przeciętny użytkownik nie spędza w sieci tak długiego czasu. Stąd też tworzenie ciemnych stron jest niewskazana. Po prostu.
Dlaczego o tym piszę? Ano dlatego, iż jestem projektantem, dlatego, że jestem zainteresowany tworzeniem ciemnych strona oraz dlatego, że ciemne strony są prawdziwym wyzwaniem. W wyzwaniu tym pomocny okazał się być post napisany na stronie http://www.webdesignerdepot.com/2009/08/the-dos-and-donts-of-dark-web-design/ Okazuje się, że tworzenie ciemnych stron jest w gruncie rzeczy prostsze niż stron jasnych. Co mi się podoba przy tworzeniu ciemnych stron to także konieczność trzymania się określonych reguł, za którymi i tak od jakiegoś czasu podążam.
Fixed Layout
Layout ustawiany na sztywno. Strona nie potrafi się dopasować do szerokości ekranu użytkownik, przez co co jakiś czas traci na aktualności. Obecnie najpopularniejszą rozdzielczością jest 1024x800. Ta szerokość to około 40% użytkowników. Niestety, pozostałe 60% korzysta z większej szerokości! To sprawia, że w obecnym czasie Fixed layout nie jest najlepszym pomysłem.
Przykładowy 3 kolumnowy fixed layout
200px|500px|250px
Fluid/Liquid Layout
To najnowocześniejszy z layoutów. Dzięki opływaniu będzie aktualny jeszcze przez bardzo długi czas. Najważniejszą jego funkcją jest to, że automatycznie dopasowuje się do szerokości ekranu. Sekret polega na ustawieniu szerokości elementów w procentach, trudność zaś na tym, że nie wszystko da się ustawić na %. Przykładowy trzykolumnowy layout wygląda tak:
25%|50%|25%
Hybrid Layout
Czasem nie wszystkie elementy da się przedstawić w %. Przykładowo reklamy AdSense nie rozciągną się. Dlatego powstał bardzo dobry layout łączący w sobie cechy zarówno fixed jak i fluid.
Przykład:
200px|40%|200px
Porada.
Jeśli chcesz obliczyć na jaki procent ustawić szerokość kolumn pływających weź minimalną rozdzielczość, z jaką chcesz wyświetlać stronę, np. 950px. Następnie odejmij od niej szerokość kolumny fixed. Teraz podziel wynik przez minimalną szerokość strony. Wyjdzie ci ile procent masz do dyspozycji na pozostałe rozdzielczości.
Przykład
200px|%|%, minimalna rozdzielczość 950px. Działanie: 950px-200px=750px. 750px/950px=0,73*100=73%
UWAGA! Poniższy zestaw najlepszych skórek do Drupala jest nadal niezły, ale powstaje lepsza strona na której znajdziecie najlepsze, darmowe skórki do Drupal 6 : http://drupal6themes.malysz.biz/
Zestaw najładniejszych, ręcznie wyselekcjonowanych skórek do najpotężniejszego OpenSource CMS Drupal. Mówi się, że trudno o takie, ale ja ich znalazłem wiele. Oto one:
- 960Robots
- Acquia Marine
- Acquia Slate
- Acrylic
- Ad Blueprint
Niesamowita skórka, gdyż zawiera aż 44 regiony blokowe!!
- AdNovus
- Addari
- Agregado
- Beach
- Clearblue
- Color Paper
- Colourise
- Contrast
- Delicious Fruit
- Earthen
- Fade Thingee
- Farvens
- Grassland
- Hiroshige
- Ishalist
- iTheme2
- KeepItSimple
- Light Fantastic
- Magazeen
- Marinelli
- NewsFlash
- Painted Wall
- Pixture
- Pixture Reloaded
- Refresco
- Scruffy
- SkyRoots
- Soldier
- Strange Little Town
- Waffles
- World of Warcraft Nightelf
Flex
Na zakończenie chciałbym jeszcze dodać, że nie tylko wygląd się liczy. Jest wiele skórek, które dla dobrego zespołu developerów stanowić będą znacznie lepszą podstawę pod serwis. Dlatego warto raczej wybierać skórki samemu, niż wzorować się na tego typu zestawieniach. ;)
Jeśli chodzi o robienie stron www to powstaje dylemat - w jakiej rozdzielczości. Nad tym problemem szczególnie ubolewać muszą graficy, którzy nie do końca muszą rozumieć wszelkie aspekty związane z kodowaniem i programowaniem witryn. Dlatego też postanowiłem napisać ten krótki poradnik.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Najpopularniejsza rozdzielczość.
Internet obfituje w statystyki dotyczące najpopularniejszej rozdzielczości. Witryna ranking.pl publikuje takie dane 3 razy w miesiącu. Można tam nie tylko sprawdzić najpopularniejszą rozdzielczość, ale także inne rzeczy jak przeglądarka, system, wersja Flash, itd.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Indywidualność.
Każda strona jest odwiedzana przez inną grupę ludzie. Każdą z tych grup cechuje mniejsze lub większe zainteresowanie sprzętem komputerowym co przedkłada się bezpośrednio na sam sprzęt z którego korzystają. Przykładowo strona dotycząca najnowszych technologii komputerowych, gier itp. będzie odwiedzana przez ludzi z nowoczesnym sprzętem. Strona z wierszami albo strona o kotach może być odwiedzona przez starsze panie, które działają na kilku-letnich komputerach i niską rozdzielczością ekranu. Dlatego też są takie narzędzia jak GoogleAnalytics, które pomogą dostosować witrynę do każdego projektu indywidualnie.
Najpopularniejsza wcale nie znaczy najlepsza!
Jedną z panujących błędnych opinii jest ta, że strony dostosowuje się do najpopularniejszej obecnie rozdzielczości. Przykład. Najpopularniejszą rozdzielczością, z jaką przeglądany jest ten blog jest 1024x768, tej rozdzielczości używa aż 40% odwiedzających. Pułapka polega na tym, że 56% odwiedzających to osoby korzystające z rozdzielczości większej niż 1024x768. Są wśród nich tacy, którzy korzystają z 1680x1050 (7%) czy 1920x1200 (2.5%). Proszę sobie wyobrazić jak małą będzie strona o szerokości 950-980px w takiej rozdzielczości. Należy przy tym nadmienić, że nie każdy odwiedzający stronę jest webmasterem, który wie do czego służy combo ctrl+scroll-up/down.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Jak więc rozdzielczość na stronę www?
Najprostsza odpowiedź to opływanie. Jeśli nie jesteś zaznajomiony z terminem opływania to wygogluj sobie float, gdyż wiedza ta jest niezbędna do zrozumienia dalszej części tekstu.
W skrócie opływanie oznacza ustawienie szerokości witryny na pewny %procent. Przykład. Ten blog ma 3 kolumny, które są odpowiednio szerokie na 25%|50%|24.99% (sic!). Taki układ doczekał się fachowej terminologii - nazywa się to Fluid albo Liquid (z ang. ciecz). Jak wiesz z doświadczenia ciecze mają właśnie zdolność opływania.
Layout hybrydowy.
Zasadniczo opływanie możemy podzielić na dwa rodzaje: strona całkowicie pływająca (zwana Fluid/Liquid)lub częściowo pływająca (zwana Hybrid). Właściwie w tym momencie odpowiedziałem już na pytanie postawione w temacie, ale nie wyczerpałem go do końca. Layout Hybrid polega ustawieniu opływania na zazwyczaj 1-2 elementy. Sposób wykorzystania tego jest następujący: ustawiamy jedną kolumnę (najczęściej content) na 50% a pozostałym dwie ustawiamy fixed, czyli sztywno (np. na 245px). W ten sposób nasza strona w rozdzielczości 1600x1200 nadal jest czytelna no i mamy kontrolę nad elementami, której niestety czasem brak w layoucie opływającym w 100%.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Galerie stron z opływaniem.
Znam jedną: http://www.cssjuice.com/css-liquid-layout-design/ Szukam innych. Tymczasem zapraszam do mojej, świeżej galeri CSS Ship, w której zamieszczam najlepsze strony www, zarówno pod względem estetycznym jak i technicznym.
src="http://link.do.skryptu.js" >
