Artykuł

lis 04 2012
0

Responsive Design - nowy trend w sieci

Dla wielu osób z poza branży, praca w IT wydaje się być czystą sielanką. Mnóstwo ciekawych projektów, znikome bezrobocie oraz wysokie zarobki. W praktyce nie jest tak kolorowo, a praca nie kończy się tuż po wyjściu z biura o 16. IT to wciąż jeden z najbardziej dynamicznie zmieniających się obszarów gospodarki, co wiąże się z nieustannymi zmianami w stosowanych w tej branży technologiach. Nowe urządzenia oraz kanały komunikacyjne wymuszają zmiany. W chwili obecnej stawia się przede wszystkim na szeroko rozumiany Cloud Computing oraz technologie mobilne. Nieodłącznym elementem obu tych zagadnień jest Internet. Jeśli mowa o Internecie, to nie można pominąć oczywiście stron WWW, które wciąż dla wielu internautów są najważniejszym elementem sieciowej układanki. I to właśnie tego segmentu najbardziej dotyka rozwój we wspomnianych obszarach.

Warto tu zwrócić uwagę szczególnie na aspekt mobilny. Nowe urządzenia, nowe rozdzielczości i przede wszystkim dotykowe ekrany wymuszają na programistach zmianę podejścia. Dziś już nie wystarczy zrobić strony z układem spasowanym na 960 pikseli. Nie można też znaleźć złotego środka, ponieważ zakres szerokości ekranów waha się od kilkuset pikseli do tysięcy pikseli, jakie można znaleźć w rozdzielczości Full HD i wyższych.

Pewnym rozwiązaniem tego problemu było projektowanie dedykowanych witryn dla urządzeń przenośnych. Jednak również i to podejście nie do końca się sprawdziło. Bardzo często algorytmy stron błędnie rozpoznawały urządzenia mobilne i uniemożliwiały poprawne wyświetlenie strony. Na szczęście od jakiegoś czasu coraz większą popularność zdobywa nowe rozwiązanie, które nie jest co prawda idealne, ale rzuca nowe światło na ten temat i pozwala w lepszy sposób dopasować się do popularnych wielkości ekranów. Brzmi interesująco? Jesteście ciekawi? Jeśli tak, to zapraszam do dalszej części wpisu:)

Typ media w CSS 2.1

Responsive Design to temat głównie powiązany z CSSem, a jego kluczowe elementy zostały wprowadzone w trzeciej wersji tegoż właśnie standardu. Zanim jednak powiem co i jak, warto poznać trochę historii. Pierwsze podrygi związane z klasyfikacją urządzeń pojawiły się w CSS w wersji 2.1. Wtedy to wprowadzono po raz pierwszy atrybut media, który to pozwalał klasyfikować w jaki sposób określone reguły wymienione w kodzie, bądź też w zewnętrznym arkuszu styli miały wpływać na wyświetlanie wskazanej witryny.

Dzięki takiemu podejściu, możliwe było definiowanie osobnych styli, które inaczej zachowywały się na ekranie komputera (wartość atrybutu screen), drukarce (print), czy urządzeniu mobilnym handheld). Oczywiście możliwości otrzymaliśmy znacznie więcej, a niektóre z nich były z pozoru całkiem abstrakcyjne (pełną listę wraz z opisem, znajdziecie tutaj.

Atrybut media był dotychczas raczej lekceważony i marginalizowany, a jeśli już pojawiał się na stronach, to często głównie i wyłącznie jako wartość screen. Osobiście przyznaje się bez bicia, że sam nie korzystałem z tego rozwiązania, ale obiecuje, że teraz się już poprawię;)

Poniżej przykłady zastosowania:

  • Definiowanie atrybutu przy podłączaniu arkusza
    <link rel="stylesheet" media="screen, handheld" href="styles.css" />
  • Definiowanie bloku reguł dla wybranych typów
    @media screen, print {
       body { font-size: 13px }
    }

Istota Responsive Design

Tytułowy Responsive Design jest nowym podejściem do projektowania, w którym nie ograniczamy się tylko do jednej rozdzielczości, ale staramy się obsłużyć tych kilka najpopularniejszych szerokości ekranów. Ideą tej techniki jest maksymalne wykorzystanie dostępnych przestrzeni oraz zapewnienie najlepszego komfortu pracy możliwie największej grupie użytkowników naszego serwisu. Stosując te podejście unikamy również potencjalnych problemów związanych z błędnym rozpoznawaniem nagłówków User-Agent.

Cechą charakterystyczną układów stworzonych pod kątem Responsive Design jest brak poziomego paska przewijania. Nasza strona powinna zawsze mieścić się horyzontalnie a ewentualne przewijanie powinno odbywać się wertykalnie.

Projektując układ pod mniejsze rozdzielczości, należy zdawać sobie również sprawę, że ciężko będzie zmieścić wszystkie elementy, które normalnie widoczne są na ekranach komputerów. Skupić się powinniśmy przede wszystkim na kluczowej treści i podstawowych elementach nawigacyjnych. Dodatkowe rzeczy umieszczajmy raczej u dołu ekranu, aniżeli u góry. Użytkownik poszukujący konkretnych informacji, szybko się zirytuje jeżeli nie będzie mógł łatwo dotrzeć do poszukiwanych treści.

Responsive Design wymaga sensownego rozplanowania treści oraz zwiększa narzut potrzebnego kodu. Dlatego w tym przypadku jeszcze ważniejsze staje się logiczne planowanie tworzonych reguł. Warto próbować tworzyć witrynę w taki sposób, by działała również sensownie w przeglądarkach, w których nowa technologia nie jest wspierana. Napiszę o tym trochę szerzej w dalszej części wpisu.

Media queries

Media queries to jedna z wielu nowości wprowadzonych w CSS 3. Istotą tego mechanizmu jest rozszerzenie funkcjonalności atrybutu media znanego z CSS 2.1 (patrz akapit Typ media w CSS 2.1). W poprzedniej wersji, webmasterzy zyskali możliwość dopasowywania reguł pod kątem określonych urządzeń. Tym razem skupiono się na konkretnych właściwościach ekranów takich jak: rozdzielczość, ułożenie, czy DPI.

Za pomocą media queries, możemy więc kontrolować reguły CSS, które mają funkcjonować w przypadku określonych szerokości ekranów. W tym przypadku określamy minimalną, bądź maksymalną szerokość w jakiej dane reguły mają funkcjonować:

@media screen and (max-width: 480px) {
	body{
		font-size: 12px;
	}
}

@media screen and (min-width: 481px) {
	body{
		font-size: 13px;
	}
}

Reguły można ze sobą łączyć:

@media screen and (min-width: 481px) and (max-width: 768px) {
	body{
		font-size: 13px;
	}
}

Warto zwrócić uwagę, że powyższe zapisy stają się kontenerem dla normalnych reguł CSS.

Definicja media queries możliwa jest również w atrybucie media znacznika link. W ten sposób podłączamy, bądź też nie konkretny arkusz reguł:

<link rel="stylesheet" href="style.css" 
media="screen and (min-width: 481px) and (max-width: 768px)" />

W podobnych sposób można postąpić z innymi regułami. Aby dopasować się do orientacji ekranu można skorzystać z poniższego kodu:

@media screen and (orientation:portrait) {
    /* Style dla układu pionowego */
}

@media screen and (orientation:landscape) {
    /* Style dla układu poziomego */
}

Możemy również uzależnić się od wykorzystanego DPI, co może być bardzo przydatne podczas drukowania. W tym przypadku wykorzystujemy opcje min-resolution i/lub max-resolution. Wszystkie powyższe zasady na temat łączenia warunków oczywiście obowiązują:

@media print and (min-resolution: 300dpi) and (max-resolution: 599dpi){
	/* Reguły */
}

Viewport

Jeśli przeczytaliście skwapliwie poprzedni akapit i przystąpiliście do testów, to może spotkać Was przykra niespodzianka, a uzyskane rezultaty będą dalekie od oczekiwanych. Porażka może być spowodowana skalowaniem, które wymusiły Wasze urządzenia i/lub ich przeglądarki. Jest to często spotykana praktyka szczególnie w przeglądarkach dostępnych na urządzeniach mobilnych. Aby uniknąć tego problemu i tym samemu zadbać o odpowiednie skalowanie elementów za pomocą naszych reguł, musimy wstawić nowy znacznik meta określający właściwość viewport. Najczęściej występuje on z poniższą zawartością:

<meta name="viewport" 
content="width=device-width, initial-scale=1, maximum-scale=1">

W tym przypadku ustalamy szerokość będącą zawsze szerokością urządzenia (a raczej jego przeglądarki - nie zawsze jest to ta sama wartość), a następnie skalę wyjściową na 1 i maksymalną skalę również na 1. Poszczególne pary klucz-wartość tego znacznika rozdzielamy przecinkiem. Oprócz widocznych powyżej kluczy, dostępne są również poniższe:

  • height - wysokość
  • user-scalable - włącza możliwość skalowania przez użytkownika (yes/no)
  • minimum-scale - skala minimalna

W przypadku szerokości i wysokości, wartości podajemy w pikselach bez jednostki. W przypadku skal, wartości podajemy w liczbach zmiennoprzecinkowych stosując przy tym znak kropki np. 1.0 (kropkę można pominąć w przypadku liczb całkowitych).

Korzystając z tego znacznika trzeba naprawdę uważać, gdyż łatwo możemy uzyskać zgubny efekt.

Wsparcie

Ponieważ media queries są elementem CSS 3, zapomnijcie o wsparciu tej techniki w starszych przeglądarkach. Oczywiście wszyscy konkurenci IE wspierają to rozwiązanie już od jakiegoś czasu, ponieważ media queries funkcjonują w dość wczesnych wersjach tych aplikacji: (Safari 3+, Chrome, Firefox 3.5+, Opera 7+). Dzięki powszechnym aktualizacjom tych programów, ryzyko napotkania starszych wersji jest raczej minimalne. W przypadku IE, życie zaczyna się dopiero od wersji 9.

Pewnym rozwiązaniem problemu jest oczywiście niezastąpiony JavaScript. Powstało kilka ciekawych wtyczek rozwiązujących ten problem.

  • Rozszerzenie jQuery, które dodaje obsługę właściwości min-width oraz max-width w regułach warunkowych
  • css3-mediaqueries-js - biblioteka JavaScript. Działa bardzo sprawnie z wyłączeniem arkuszy styli dodawanych za pomocą dyrektywy @import

Zasoby

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus