Dziewięć genialnych rozdziałów zawiera wiedzę ważną dla każdego projektanta stron internetowych i aplikacji na urządzenia mobilne.
Przez 2 tygodnie pisaliście nam jakie są według Was najlepiej zaprojektowane strony w Sieci. Zgłoszeń przyszło sporo, przez co wybór laureatów nie należał do prostych.
Wybraliśmy 2 wypowiedzi, które według nas wyróżniły się najbardziej, bo podane przez Zwycięzców strony zostały rozłożone na czynniki pierwsze najdokładniej.
Najczęściej wymienialiście: prostotę, intuicyjność, przejrzystość, a jednocześnie ciekawą treść. Wszystkim uczestnikom konkursu dziękujemy za udział i wszystkim gratulujemy dobrego nosa :) Poniżej przedstawiamy dwie zwycięskie odpowiedzi.
Ich Autorom gratulujemy!
I MIEJSCE
Wstęp
Wybór jednej z najlepiej zaprojektowanych stron we współczensym Internecie to nie jest łatwa sprawa: w sieci wisi wiele stron świetnych, prawie idealnych lub wręcz niesamowitych. Ale wydana niedawno książka związana z konkursem podsuwa konkretny adres: SmashingMagazine.com Tak, strona autorów Smashing Book 2, a konkretniej jej nowa odsłona, którą możemy przeglądać i podziwiać od kilkunastu dni, jest moim skromnym zdaniem najlepiej zaprojektowaną stroną internetową. Jak mogłaby nie być, skoro redaktorzy znajdujących się tam artykułów są jednocześnie autorami bestsellerowej książki na temat projektowania stron www?
Tyle tytułem wstępu, teraz przejdę do rozbierania niniejszej witryny na części pierwsze.
Elastyczność
Od kilku miesięcy można dużo usłyszeć i poczytać o "responsive design" - elastyczności, czy też responsywności stron internetowych (oficjalny polski termin na dzień dzisiejszy chyba jeszcze nie istnieje) - czyli o dokumentach, które dopasowują się do urządzenia, na którym są wyświetlane. Żyjemy w czasach gdzie tablety i smartfony zdobywają coraz to większą popularność a co za tym idzie rynek przeglądarek. Responsive design jest na topie.
I tak nowa odsłona Smashing Magazine jest elastyczna - korzysta ona z własności @media-queries i w zależności od szerokości okna przeglądarki dopasowuje swój wygląd. Zupełnie inaczej wygląda ona na telefonie, inaczej na tablecie, inaczej na dość wąskim monitorze a jeszcze inaczej na najszerszych wyświetlaczach. Bardzo ułatwia to użytkownikom przeglądanie zawartości.
Ogólna budowa i łatwość przeglądania
Na tej stronie nie sposób się zgubić. Wszystko wydaje się być na swoim miejscu - potrójna nawigacja (góra, po lewej i w stopce), widoczny pasek wyszukiwarki i treściwa treść. Oprócz tego po stronie prawej różne ciekawe reklamy (ekhm...), tagi, ostatnie ćwierknięcia, zajawki, oferty pracy itp.
Po przeczytaniu każdego artykułu łatwo możemy wrócić na górę strony, bądź w wygodny sposób pozostawić swoje przemyślenia w komentarzu.
Linki do portali społecznościowych i RSSa znalazły się w widocznym miejscu, zaraz obok menu.
Już na pierwszy rzut oka widać, że projektanci przemyśleli sprawę.
Estetyka
Jeżeli coś jest mało estetyczne zazwyczaj odrzuca na pierwszy rzut oka i nijak nie zmusza obserwatora do pozostania przy przedmiocie obserwacji. Zupełnie odwrotnie jest w przypadku strony, którą wychwalam w niebogłosy: jest minimalna i czysta, korzysta ze wszystkiego co nowoczesne, w tym także czcionek. Kroje czcionek jakie dobrali projektanci, są miłe dla oka, niemeczące i sprawiają, że teksty czyta się z przyjemnością. Poza tym widać tu wysoki kontrast - tło jest białe a tekst ciemnoszary co zdecydowanie wpływa na łatwość przyswajania tekstów przez ludzkie oko. Projektanci zadbali o minimalizm i wystrzegli się overdesignu - nie znajdziemy na tej stronie nic co byłoby zbędnę bądź nie pasowałoby do całości. Gdzieniegdzie delikatne gradienty i cienie, zaokrąglone rogi i idealnie wyważona interlinia.
Nowe technologie
Elastyczność została przeze mnie opisana osobno, ale wcale nie oznacza, że nie jest to nowość - po prostu jest tak ważna i super, że zasługuje na osobny akapit.
Strona Smashing Magazine oprócz tego wykorzystuje miłe dla oka CSS-owe nowinki, takie jak przejścia (elementy menu po najechaniu na nie myszką nie zmieniają się ot tak, ale animują w wyrafinowany sposób), zaokrąglone rogi, cienie - tych efektów jeszcze do nie dawna nie można było uzyskać bez pomocy obrazków - i inne, w tym także budowę dokumentu opartą o język HTML5.
Treść
Jak wszyscy wiemy artykuły na Smashing Magazine to absolutne top w branży i reklamować ich nie trzeba. Oprócz tego na stronie znaleźć można bardzo ciekawe linki do artykułów na innych blogach należących do sieci Smashing - jest ona pewnego rodzaju agregatem najciekawszych treści z branży projektowania stron internetowych. Do tego dochodzą ogłoszenia na Smashingowej giełdzie pracy i bardzo ciekawa zakładka - Smashing Directory - swoista tablica dla agencji kreatywnych, gdzie rzeczone agencje mogą pokazać światu, że istnieją i jak im się żyje. W końcu SmashingMagazine.com dziennie odwiedzają tysiące userów - to świetne miejsce na reklamę własnego biznesu.
Podsumowanie
Po przeczytaniu wszystkich tych pochwał chyba nikt nie ma już wątpliwości dlaczego SmashingMagazine.com jest jedną z najlepiej zaprojektowanych stron www. Inaczej być nie mogło - w końcu stoją za nią ci sami goście, którzy spłodzili Smashing Book 2 :-)
Wyróżnienie
Na pytanie o najlepiej zaprojektowane strony w sieci na pewno nie da się jednoznacznie odpowiedzieć. Kiedy zaczałem się nad nim zastanawiać w myslach wracałem do wielu przeglądanych stron, szukając tej najlepszej.
Zauważyłem jak często korzystam, ze stron, które pod kątem wyglądu mnie odrzucają, a uzywam je ze względu na treść jaką zawierają. Dla przykładu dodam, że korzystam z hobbistycznego forum, które gromadzi zapaleńców pewnego programu i męczę się korzystając z okropnego czarnego interfejsu z bialymi literami, co doprowadza moje oczy do skraju załamania. Oczywiście istnieją też strony, które wyglądają ładnie, a nie idzie za tym żadna konkretna treść. Niejedna kampania reklamowa przyciąga wzrok nie dając nic w zamian.
Oba przypadki wymienione wcześniej są nie do zaakceptowania. Możecie się więc domyślać, że od idealnej strony internetowej wymagam połączenia treści z formą, która pozwoli swobodnie z niej korzystać.
Pominę tutaj inne kandydatury do tytułu ideału i od razu przejdę do rzeczy. Za spełniającą moje wymagania uznałem stronę www.apple.com, czyli firmową stronę Apple. Wiem, że taki wybór może się wydać dziwny i stronniczy, ale nie wynika wcalec z uwielbienia dla produktów z "i" na początku nazwy.
Podstawową sprawą która mnie tutaj urzeka jest minimalizm. Tutaj nie ma niczego za dużo. Prosty pasek nawigacyjny. Stonowane kolory, omalże ich brak. To dobra odmiana od polskich serwisów informacyjnych, które kipią od reklam nie pozwalając skupić się na treści.
Otwierając stronę główną na ekranie szerokokątnym można uznać wręcz, że poza górnym paskiem i oknem zawierającym treść nie mamy nic więcej. Jak dla mnie bomba. Im mniej tym lepiej.
Dopiero przewijając nieco w dół można zauważyć, że mamy dostępne duże przyciski, ale jest ich tylko 4. Potem pojawiają się kolejne i dopiro na samym dole mamy klasyczną mapę strony. Prostota warta naśladowania.
Kolejnym ciekawym aspektem jest sposób prezentowania treśći. Wybierając skrót poświęcony jakiemuś produktowi powodujemy wyświetlenie dostępnych informacji. I tu miła niespodzianka. Informacje są podzeielone na samoczynnie odświeżające się strony, a ich układ jest zbliżony do dobrze przygotowanej prezentacji.
Karty zm informacjami zawierają duże zdjęcie i tylko kilka słów wyjaśniających poszczególne funkcje. Bardziej rozbudowane informacje są dostępne dalej.
Wart zauważenia jest także sklep internetowy - stylistyka jest podobna do reszty strony. Jest tu trochę więcej informacji, ale i tak zdecydowanie mniej niż w innych sklepach internetowych.
Na koniec chciałbym wyjasnić dlaczego tak bardzo podkreślam wartość minimalizmu. Wchodząc na tą stronę od razu wiem co nacisnąć, aby znaleźć interesujące mnie informacje. Przecież korzystając z wielu stron nie muszę uczyć się ich interfejsu. To interfejs powinien być tak opracowany, aby odpowiadał moim przyzwyczajeniom. I właśnie strona apple.com jest tak intuicyjna.
