W Tokijskim magazynie PingMag, Jon przedstawia pięć webdesignerskich wzorów, które mają być odpowiedzią na najczęstsze problemy użytkowników dotyczące usability.
Jednym z ciekawszych rozwiązań jakie wskazał Jon wydał mi się Elastic Design. Chodzi to taki rodzaj layoutu, który automatycznie dostosuje swoje proporcje gdy zwiększy się rozmiar fonta w przeglądarce.
Sposób prosty i sympatyczny - layout nie tylko nie “rozjeżdża się” po zwiększeniu rozmiaru fontu z poziomu przeglądarki ale też “skaluje się”. Chodzi o coś takiego.
Jak to zrobić? Całe to “magiczne” skalowanie opiera się o działanie na jednostkach em w CSSie. Em to specyficzna, relatywna jednostka której rozmiar odpowiada wielkiej literze M (czy “bloku”, który ta litera zajmuje). Em jest relatywna czyli jej długość zależy od innej długości.
W naszym wypadku jednostką wyjściową będzie domyślne em przeglądarki. Domyślne em w większości popularnych przeglądarek wynosi 16px. Dlatego w body ustaliłem 0.75em co odpowiadałoby 12px fontowi.
Rozmiar .em jest relatywny - zaznaczam kolejny raz - czyli jeśli w body ustaliłem font-size na 0.75em to naszym nowym 1em w klasach dziedzicznych do body będzie odpowiadało 12px. Powiedzmy, że chcemy, żeby domyślny layout miał szerokość 760px. 760px / 12px = 63.33em. No i już wiemy, że nasz główny kontener będzie miał 63.33em.
Resztę rozmiarów robimy analogicznie. Trzeba pamiętać tylko o tym, że esencją emów jest ich relatywność, tak więc projektując konkretne rozwiązania graficzne musimy mieć na uwadze to, że domyślne ustawienie pewnie będą skalowane - layout będzie rósł lub malał więc, żeby nic się nie posypało trzeba unikać jednostek absolutnych (mówię o pikselach jeśli piksel to jednostka absolutna co nie do końca jest prawdą).
Wszelkie paddingi, marginesy i interlinie muszą być elastyczne i relatywne, muszą wzajemnie się określać, dzięki temu zachowamy odpowiednie proporcje w czasie powiększania.
Na koniec efekt mojej, krótkiej zabawy w elastyczny layout. Zrobiłem w ten sposób coś na kształt wersji popularnej, blogowej skórki K2. Nie powala graficznie ale pokazuje jak łatwo i szybko można:
- zrobić coś na kształt skórki k2 ;)
- zrobić to coś opierając się tylko o jednostki relatywne
Layout oczywiście do wzięcia. Na licencji CC by-sa.
Oczywiście nie twierdze, że tylko tego rodzaju layouty są dostępne lub użyteczne ale na pewno zrobienie czegoś takiego to dobre ćwiczenie. Ćwiczenie zmuszające do skupienia się nad zachowaniem naszego projektu przy różnych rozmiarach fontów. I raczej w dostarczaniu możliwości swobodnego i bezstratnego manipulowania rozmiarem fontów dopatrywał bym się użytecznych i dostępnych wzorów dobrego projektowania.
Acha, kilka linków, które możecie uznać za ciekawe
- BIG BAER Explains CSS Font-Size
- CSS2 syntax and basic data types - length units
- Em Calculator - może pomóc w liczeniu (jeśli koniecznie musisz przeliczać na px - co obowiązkiem przy stosowaniu emów nie jest) ale nie musi bo dzielenie na liczbach naturalnych to mało zaawansowana matematyka. ;)
//edit: od dzisiaj (29-07-06) yashke.com jest elastyczne
Em Calculator 2.0…
Wypuściłem nową wersję mojego kalkulatorka emów. Em Calculator to narzędzie przydatne do przeliczania wartości pikselowych (uzyskiwanych przykładowo z Photoshopa) na emy - jednostki zależne od wielkości tekstu. Emy do budowania całego[…..