Layout szyty na miarę

Zauważam ostatnio znaczny spadek ilości sporów i bezsensownych dyskusji podczas spotkań towarzyskich. Jeszcze nie tak dawno temu wystarczył drobny impuls w stylu przekręcenia dokładnej daty Bitwy pod Grunwaldem i już byliśmy świadkami niekończącej się kłótni o to, kto ma rację, gdy jeden osobnik mówił o 15 lipca, a drugi upierał się przy 14. Teraz któryś z nich wyciągnie swojego smartfona, wstuka kilka literek w ekranową klawiaturę i już może się cieszyć lub smucić widząc prawidłową odpowiedź. Nazywam się Dawid, jestem Webdesignerem, lubię dygresje i długie wstępy, a to mój pierwszy wpis na firmowym blogu.

Pisząc powyższy akapit zmierzałem do uświadomienia, jak popularne aktualnie są urządzenia mobilne. Sam również wpadłem w tę pułapkę, o czym może świadczyć opinia na studiach, że bez tabletu czuję się jak bez ręki. Dodatkowo korzystne oferty mobilnego internetu u operatorów pozwalają nam być praktycznie bez przerwy online. Druga strona medalu jest taka, że urządzenia te mają jednak zupełnie inne rozdzielczości niż zwykłe monitory używane podczas pracy z komputerem, a strony internetowe często są tworzone w sposób uniemożliwiający ich wygodne przeglądanie.

Z odsieczą przychodzi nowy trend w projektowaniu, czyli responsive web design, co najprościej można wytłumaczyć jako elastyczny układ stron, który potrafi się sprytnie dostosować do żądanej rozdzielczości. Ekspertem w temacie nie jestem (jeszcze ;) ), ale postaram się w prosty sposób przybliżyć całą filozofię.

W projektowaniu takich layoutów są, jak to zwykle bywa, dwie szkoły. Jedna mówi o opieraniu rozmiarów elementów na procentach, druga korzysta z tzw. media queries, czyli przedziałów najpopularniejszych rozdzielczości i dostosowywaniu do nich gabarytów. Osobiście jestem zwolennikiem tej drugiej metody, ze względu na większe podobieństwo do standardowego projektowania, z tym że musimy zaplanować ok. trzech wersji strony zamiast jednej.

Jest to korzystne nie tylko ze względu na wyświetlanie strony, ale też pomaga przy pozycjonowaniu. Do tej pory chcąc mieć mobilną wersję strony musieliśmy używać osobnej domeny, pod którą była osobna witryna, przez co trzeba było pozycjonować tak naprawdę dwa razy. Teraz wszystko zawiera się w obrębie jednego adresu.

Mobilne przeglądarki domyślnie skalują stronę, bez względu na jej rozdzielczość, aby pokazać całą główną treść. Uniknąć takiego zachowania możemy umieszczając w headzie strony tzw. viewport, czyli najprościej mówiąc meta-tag, który określa sposób skalowania.

Ustalając przedziały rozdzielczości nie wystarczy jedynie zmniejszyć szerokość głównego kontenera z treścią. Dochodzi tu kwestia użyteczności. Warto przypomnieć sobie sytuację, gdy zimą zmarzniętymi palcami chcieliśmy trafić w jakiś mały guzik na ekranie telefonu. Nie jest to zbyt komfortowe. Dlatego też przy projektowaniu strony dla przedziału na ekrany telefonów warto stosować duże i wygodne do użycia ikony oraz przyciski. Podobnie jest z polami formularza. Dodatkowo warto taki formularz odchudzić. Korzystanie z internetu w telefonie zwykle odbywa się w sytuacjach, gdy chcemy zrobić coś na szybko. Nie po drodze nam wtedy walka z wieloma polami do wypełnienia. Także nie potrzebujemy wtedy prawdopodobnie wielu zaawansowanych funkcji. Często ma to zastosowanie w wyszukiwarkach.

Warto też zrezygnować z wszelkich bocznych kolumn, które tylko sztucznie zabierają nam przestrzeń na treść, a ich funkcjonalność umieścić w jakimś innym intuicyjnym miejscu, bądź też zupełnie ją odpuścić. Podobnie jest z dużymi obrazkami. Tu można się wspomóc określeniem procentowych rozmiarów, jednak nie można zapomnieć o tym, że jeśli użyjemy takich wartości dla jednego elementu, to wszystkim innym także powinniśmy je ustawić – nie może być tak, że obrazek będzie szerokości 50%, a jego marginesy zostawimy na 20px. W pewnym momencie dojdzie do konfliktu i wszystko się nam posypie jak piasek z worka Grzesiowi w popularnym wierszyku.

To samo tyczy się menu, które zwykle jest dosyć sztywno ułożone w poziomie, a zwężanie szerokości strony sprawia, że przeskakuje ono niżej lub zasłania logo, bo siłą rzeczy nie ma gdzie się zmieścić. Popularnym zabiegiem jest zwiniecie go do listy, pojawiającej się po kliknięciu w odpowiednia ikonkę (przykład poniżej).

menu1

Standardowe menu

menu2

Menu mobilne

To tylko kilka przykładów, jakie zmiany i możliwości niesie ze sobą responsive web design, mam nadzieję, że jeszcze będę miał okazję do tematu powrócić i opisać poszczególne elementy bardziej szczegółowo. Tymczasem wracam do zabawy z łapaniem krawędzi okna przeglądarki, machaniem myszą raz w lewo, raz w prawo i obserwowaniem zachodzących zmian w projekcie, którym się aktualnie zajmuję.

Webdesigner, autor bloga: http://niemamdrobnych.pl/

Ostatnie wpisy Dawid Szczepaniak (zobacz wszystkie)


Skomentuj

Na blogu jest moderacja komentarzy. Nie ma potrzeby kilkukrotnego komentowania.