Jednym z największych problemów współczesnych projektantów stron WWW jest wybranie optymalnego rozmiaru dla tworzonego layoutu. W tym kontekście kluczowa wydaje się być wiedza na temat popularnych rozdzielczości i działania urządzeń mobilnych, do których teraz musimy dostosować swoje projekty.

Idea takiego projektowania jest związana z Responsive Webdesign i polecam zapoznanie się z wstępem do tego tematu w artykule: Responsive Webdesign – Wprowadzenie. Natomiast kompleksowe opracowanie na praktycznych przykładach znajdziesz w najnowszym kursie: Elastyczne Strony WWW – Projektowanie na wiele rozdzielczości, Polecam także Warsztat mojego autorstwa Projektowanie na wiele urządzeń i rozdzielczości w ramach Eduweb Live.



Wprowadzenie

Nasza praca, jako projektanta, będzie sprowadzać się w zasadzie do przygotowania kilku alternatywnych wersji layoutu strony, ponieważ w dobie tak wielu urządzeń posiadających przeglądarki (od telefonów po telewizory), nie jest możliwa optymalna prezentacja treści w ramach jednego projektu. Rezultatem naszej pracy będzie zatem kilka plików .psd czy .ai, w których odpowiednio zaprojektujemy widoki dla telefonów, tabletów oraz urządzeń desktopowych – komputerów stacjonarnych i laptopów.

Tak czy inaczej, będziemy musieli zastanowić się nad docelowymi rozdzielczościami, które będziemy targetować i dla których przygotujemy końcowy układ. Ponieważ na rynku funkcjonuje mnóstwo urządzeń oferujących różne rozdzielczości, zastanówmy się najpierw co powinniśmy w ogóle brać pod uwagę.

Czym jest DPI i aspect-ratio?

DPI (Dots Per Inch), czy inaczej PPI (Points/Pixels Per Inch) to po prostu ilość pikseli, jaka jest wyświetlana w jednym calu ekranu. Na niektórych urządzeniach pixele mogą być bardziej skupione, na innych są rozmieszczone rzadziej. Rezultat jest oczywiście taki, że na ekranach o większej wartości DPI będziemy mieli wyższą rozdzielczość przy tej samej przekątnej. I, rzecz jasna, dużo ostrzejszy obraz. Większość takich rewelacyjnych wyświetlaczy jest już w urządzeniach mobilnych, choć zaczynają one być również powszechne w laptopach (nowy MacBook Pro z wyświetlaczem Retina). Najprostszy przykład do porównanie dwóch generacji iPada, z których iPad 2 oferuje rozdzielczość 1024×768 przy identycznej przekątnej co iPad 3 z szaloną rozdzielczością 2048×1536. Zatem jeśli wielkość ekranu jest taka sama – zagęszczenie pixeli musi być większe i w praktyce zwiększa się właśnie DPI (z 132 do 264). Przy okazji – nie wiem czy zauważyłeś, ale urządzenie, które mieści się w dłoni ma rozdzielczość wyższą niż 60-calowe telewizory plazmowe. Ma to oczywiste przełożenie na czytelność treści – choć telewizor oglądamy z większej odległości, naturalnie łatwiej będzie na nim dostrzec detale niż na skupionym ekranie iPada. Stąd pewne sztuczki producentów polegające na skalowaniu zawartości, o którym napiszę za chwilę.

Z kolei aspect-ratio to proporcje ekranu, czyli stosunek jego szerokości do wysokości. I tutaj spotykamy się z dwoma popularnymi proporcjami – 16:9 oraz 4:3. Niestety, nie można powiedzieć że ekrany panoramiczne, czyli ze stosunkiem 16 do 9, są lepsze czy popularniejsze od 4:3. Choć w desktopach nie spotykamy się już z takim stosunkiem, to w tabletach jest on dość popularny (chociażby iPad). Aspect ratio jest rzeczą, która może przyprawić o ból głowy projektanta, ponieważ co naturalnie w różnych proporcjach content będzie prezentował się inaczej i w zasadzie nie ma na to na razie żadnej skutecznej metody, poza testowaniem.

Wyświetlacze Retina i inne dużej rozdzielczości

Wyobraź sobie, że identyczna grafika zoptymalizowana pod szerokość 1280px jest wyświetlana równocześnie na telefonie komórkowym oraz dużym monitorze 30”. Rzecz jasna komfort użytkowania będzie skrajnie się różnił. Na telefonie grafika zostanie zeskalowana w dół i trudna w odbiorze bez powiększania. Dlatego producenci urządzeń z wysokiej jakości wyświetlaczami, wprowadzili skalowanie zawartości jako pewien półśrodek do większego komfortu użytkowania. W rezultacie, przykładowo Apple zastosował przyjazne dla designerów rozwiązanie i powiększył rozdzielczości urządzeń z iOS dokładnie 2x w najnowszych odsłonach. Przykładowo, iPhone 3 miał rozdzielczość 320×480, a iPhone 4 – 640×960. Na czym więc polega skalowanie? Producenci zdają sobie sprawę, że na małym ekranie mniej widać i dlatego „z automatu” powiększają grafikę – w przypadku urządzeń z iOS x2. W ten sposób ostatecznie dla użytkownika prezentowana jest większa grafika. Podobnie mają się sprawy u innych producentów. Na przykład, pod Windows 8 mamy skalowanie:

  • 100% bez skalowania
  • 140% dla 1920 x 1080 i minimum 174 DPI
  • 180% dla 2560 x 1440 i minimum 240 DPI

W tym przypadku, aby uzyskać jak najbardziej ostrą grafikę – należy przygotować 3 zestawy obrazków o wielkości 100, 140 i 180%. W przypadku iPhone’a 4, który, jeśli chodzi o rozdzielczość, dalej „myśli” że jest iPhonem 3, można przygotować 2 zestawy obrazków 100 i 200%.

Jak widzisz, grafika którą stworzysz i dopracujesz co do pixela i tak może zostać zeskalowana, co jest równoznaczne z pogorszeniem jej jakości. Czy możemy jakoś sobie z tym radzić? Owszem, przykładowo, dla urządzeń z iOS możemy zaprojektować grafikę 2x większą podłożyć ją wykrywając ratio z pomocą CSS3 Media Queries i właściwości pixel-aspect-ratio.

Możemy także zmusić urządzenia z iOS do wyświetlania grafiki niezeskalowanej, czyli innymi słowy domyślne skalowanie ustawić na 100%, czyli na wartość 1. Odbywa się to z pomocą specjalnego meta-tagu viewport, szczegółowo opisanego na MDN: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Wszystko sprowadza się do pikseli

Uwzględniając skalowanie, o którym napisałem wyżej, w zasadzie możemy jednak przyjąć zasadę, że przy projektowaniu na ekrany, wszystko sprowadza się do pikseli. Ekrany z większą ilością DPI będą wyświetlały bardziej ostre obrazy, jednak będą miały także większą rozdzielczość. Moim zdaniem nie powinniśmy zatem przykładać wagi do typu urządzenia, DPI oraz aspect-ratio, ponieważ tak czy inaczej wszystko będzie sprowadzało się do wysokości i szerokości w px. W ten sposób nasz layout będzie dobrze się prezentował i na ekranie tabletu i lodówki czy pralki, jeśli producenci zdecydują wyposażyć te urządzenia w przeglądarki.

Ponadto, rozdzielczość, czyli resolution w Photoshopie, absolutnie nie wpływa na tworzony przez nas plik do momentu jego wydrukowania lub zapisania do .pfd. Także tę wartość możemy kompletnie zignorować przy tworzeniu na ekrany i wziąć pod uwagę jedynie wartości width oraz height.

Jaką rodzielczość wybrać?


Tworząc układy elastycznych stron WWW, zgodnych z zasadą Responsive Design, często decydujemy się na przygotowanie układu dla:

  • Monitorów (Desktop + Laptop)
  • Telefonów / Smartphone’ów
  • Tabletów

Jest to dobry punkt wyjścia i rzeczywiście najlepszą drogą będzie przygotowanie layoutów pod te konkretne rodzaje urządzeń. Trudniejsze pytanie dotyczy jednak konkretnej rozdzielczości, pod którą powinniśmy projektować. Wielu autorów przyjmuje różne mobilne „breakpointy”, czyli podziały określające, jakie rozdzielczości wziąć pod uwagę.

Ciekawe podsumowanie znajduje się na stronach Wikipedii pod adresem: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Możesz tam znaleźć wszystkie popularne rozdzielczości urządzeń pogrupowane w ramach producentów. Można od tego wszystkiego dostać konkretnego bólu głowy. Jak widzisz jest tu dużo więcej rozdzielczości niż trzy modelowe, jednak nadal jestem zdania, że przynajmniej te trzy układy powinniśmy zaprojektować.

Rozdzielczość Desktopowa

Przyjrzyjmy się statystykom na stronie ranking.pl aby ocenić, z której rozdzielczości użytkownicy korzystają najczęściej: http://ranking.pl/pl/rankings/screen-resolutions.html

Przyjmijmy, że wysokość nie ma w przypadku stron WWW kluczowego znaczenia. Czy jest to słuszne podejście – można dyskutować w dobie ekranów panoramicznych, tabletów, Windows 8 UI  i faktu, że większość stron WWW wyświetla się z wielkimi białymi paskami po bokach. Jednak to pewnie temat na osobne opracowanie. Na razie przyjmijmy za pewnik, że scroll w myszce jest w pione a użytkownicy są przyzwyczajeni do przewijania góra-dół. W takiej sytuacji znaczenie ma szerokość. Skoro tak, to spróbujmy w pierwszej dziesiątce wyników odnaleźć najmniejszą z możliwych. Niestety trafiamy już na trzeciej pozycji na 1024, która ma niemal 15% udział w rynku. Jak to 1024? Kto korzysta z rozdzielczości 1024? Poza zacofanymi instytucjami rządowymi, które nie zmieniały monitorów od 10 lat, chyba nikt, prawda? Nie, nieprawda. A tablety? A netbooki? A rozdzielczość iPada2? No właśnie, to wszystko prowadzi nas do wniosku, że rozdzielczości 1024, mimo że jej udział w rynku spada, nie można ignorować.

To znaczy, że tworzymy layouty dla 1024px?

Zgadza się, ale mam propozycję, aby tę rozdzielczość zacząć wykorzystywać jako nasz drugi breakpoint, czyli breakpoint tabletowy. Natomiast dla desktopu możemy przygotować większą rozdzielczość. O tabletach napiszę później – teraz skoncentrujmy się na desktopie. Hipotetycznie zignorujmy 1024px. Kolejna najmniejsza szerokość to już 1280px, pomijając 1152px, która ma niecałe 3% rynku. I właśnie pod tą rozdzielczość powinniśmy projektować teraz układ desktopowy. Czy to oznacza, że mamy do dyspozycji całe 1280px? Nie, ponieważ sam interfejs przeglądarki zajmuje też jakąś część szerokości naszego ekranu. Zwykle jest to około 16px bez scrollbara oraz 30px z scrollbarem pionowym. Jednak w zależności od przeglądarki te wartości mogą wahać się +/- 15 px. Ponadto, w przypadku desktopu, elegancko będzie dać użytkownikowi jednak jakiś „oddech” po prawej i lewej stronie, czyli zostawić ok. 20px wolnego miejsca. Przy rozdzielczości 1024 px i odjęciu tych wartości wychodzi magiczna liczba 960 px. Teraz już wiesz, skąd wziął się 960 Grid System, prawda? Przy 1280 px optymalnie będzie przyjąć za wyjściową szerokość około 1200 px. I tym sposobem desktop mamy z głowy. Wysokość, tak jak pisałem ma mniejsze znaczenie – starajmy się jednak, aby najważniejsze treści na naszej stronie mieściły się w wysokości 740 px, co dotyczy także widoku tabletowego.

Rozdzielczość tabletowa

W tym przypadku dochodzi kilka istotnych czynników do rozważenia. Przede wszystkim, tabletem można operować w widoku wertykalnym i horyzontalnym. Obracając tablet, przeglądarka się przekręci i nasza strona będzie wyświetlana w innej rozdzielczości. Na szczęście, typowa dla tabletów szerokość to przedział 768px – 1024px a z kolei te tablety z ratio 4:3, które mają szerokość 1024px, będą miały wysokość 768px. Jak widzisz, całkiem sensownie nam się to zgrywa. W przypadku wyższych rozdzielczości również nie ma większego problemu, ponieważ wtedy obsłużona zostanie już nasza rozdzielczość desktopowa a na tablecie to „pół biedy” w porównaniu z telefonem.

W przypadku tabletów mniejszej rozdzielczości, zagadką będzie jeszcze wysokość i możesz o nią zadbać, jednak tak czy inaczej w układzie portretowym nasza witryna będzie prezentowała się doskonale.

Jedyne zastrzeżenie to skalowanie treści (patrz wyżej zwłaszcza skalowanie dla Windows 8), jak również coraz bardziej popularne panoramiczne tablety z rozdzielczością 1366 x 768 px. Jeśli masz trochę więcej czasu, można wziąć pod uwagę również tą rozdzielczość.

W rezultacie, dla tabletu przygotujemy wersje pod szerokość:

  • 1024 px
  • 768 px
  • ewentualnie 1366 px

W przypadku tabletu oraz telefonu nie musimy brać pod uwagę dodatkowych pixeli przeglądarki na szerokość, ponieważ zwyczajowo przeglądarki na urządzeniach mobilnych nie mają żadnych ramek. Nie zostawiamy też „oddechu” po bokach dla użytkownika, tylko projektujemy layout na całą dostępną szerokość. Zatem tutaj nie musimy już nic odejmować.

Rozdzielczość telefonowa

W tym przypadku również mamy do czynienia z widokiem horyzontalnym i wertykalnym, choć użytkownicy są bardziej skłonni do korzystania z przeglądarki w układzie pionowym. Typowa rozdzielczość smartphone’ów jest w przedziale 320 – 480 px na szerokość, oraz 640 – 960 px na wysokość. Przypominam, że iPhone 4, który ma rozdzielczość 960×640, domyślnie wyświetla grafiki tak, jakby był iPhonem 3 z 2x mniejszą rozdzielczością. Popularna Nokia Lumia ma rozdzielczość 480×800 px i w mojej ocenie ta rozdzielczość może być uznana za bazową na telefon. Jak wiadomo, większość telefonów i tabletów zeskaluje zawartość więc jeśli tylko będzie to „w okolicy” 480 px na szerokość, będzie wyświetlało się całkiem dobrze. Chodzi tutaj o zdefiniowanie breakpointu, a za taki możemy uznać szerokość 480 px.

Podsumowanie

Warto rozpocząć od projektowania przynajmniej 3 wersji layoutu. Będą to wersje odpowiednio dla:

  • Monitorów (Desktop + Laptop) – 1200 px szerokości
  • Telefonów / Smartphone’ów – 480 px szerokości
  • Tabletów – 1024 px szerokości

Mając te wersje wyjściowe, można zastanowić się nad obsłużeniem dodatkowych breakpointów:

  • 1366 px
  • 800 px
  • 768 px
  • 320 px

Często będziemy mogli to zrobić już z pomocą Responsive Webdesign oraz CSS3 Media Queries. W związku z tym sam układ w Photoshopie można w modelowej sytuacji przygotować na trzy urządzenia.

Praktyczny przykład kompletnej strony, która zgodna jest z założeniami Responsive Desgin oraz dobrze wyświetla się na wielu rozdzielczościach oraz więcej cennych wskazówek znajdziesz w kursie Elastyczne Strony WWW – Projektowanie na wiele urządzeń i rozdzielczości, dostępnym na eduweb.pl już od 3.09.2012r. Polecam także kurs mojego autorstwa Projektowanie na wiele urządzeń i rozdzielczości.

Serdecznie pozdrawiam,
Grzegorz Róg

  • Jak jest prawidłowo Web Design czy Webdesign ?

    • Panie Marcinie, w mojej ocenie obie formy są poprawne. Być może bardziej poprawna forma to „Web design” (W raczej powinniśmy pisać tutaj z dużej litery”), do tego zapewne jest to fraza łatwiejsza do wyszukania w Google. Jednak myślę, że można dopuścić pisownię na oba sposoby.

      Pozdrawiam,
      Grzegorz Róg

    • Łeb dizayn jest poprawnie

  • Nie lepiej skorzystać z komercyjnych framework’ów do budowania stron przystosowanych do urządzeń mobilnych? Jako przykład można podać Twitter Bootstrap, czy Skeleton.

    • Panie Mateuszu z mojego doświadczenia wynika że Frameworki jak najbardziej się sprawdzają, jednak nie we wszystkich przypadkach – jest o tym cały rozdział w nowym kursie. Jeśli chodzi o rozdzielczości, jest to ważna sprawa również dla projektantów, którzy muszą wybrać breakpointy przy tworzeniu layoutu.

      Pozdrawiam,
      Grzegorz Róg

  • Myślę, że warto wspomnieć o Responsinatorze, całkiem przydatnym narzędziu podczas projektowania pod RWD.
    http://www.responsinator.com/

    • Oczywiście – bardzo przydatny link. Zebrałem kilkadziesiąt takich linków w materiałach do kursu Elastyczne Strony WWW, który ukaże się wkrótce. Tam też będzie można dowiedzieć się więcej, a na blogu ukaże się jeszcze jeden artykuł w którym opiszę Frameworki i popularne narzędzia a także testowanie i natywne aplikacje.

      Serdecznie pozdrawiam i dziękuję za wszystkie pomysły!
      Grzegorz Róg

    • Panie Grzegorzu, myślę, że powinien Pan również rozważyć napisanie (o ile to zagadnienie nie zostało jeszcze poruszone) artykułu na bloga lub jako dodatek do kursu budowę własnego framework’a, którego można potem bardzo łatwo i szybko implementować do własnych projektów.

    • Świetny pomysł – na pewno taki responsywny framework znacznie ułatwia pracę. Jeśli tylko będę miał możliwość, przygotuję podobny artykuł, jednak wydaje mi się że to właśnie kurs będzie mógł najwięcej w tych sprawach wyjaśnić, ponieważ pracuję tam na praktycznych przykładach.

      Serdecznie pozdrawiam,
      Grzegorz Róg

    • Jeżeli kurs porusza również ten temat to generalnie nie widzę potrzeby przytaczania tego jako artykuł. Niemniej jednak, jeśli nie wspomina Pan w kursie o tym zagadnieniu może jednak warto napisać artykuł i podsunąć pomysł budowy takiego responsywnego frameworka na własne potrzeby. :-)

  • Artykuł zapowiada się super, aczkolwiek muszę go jeszcze dokładnie przestudiować. Czekam z niecierpliwością na kurs RWD :)

  • Bardzo pomocny artykuł :]

  • I raz na zawsze odwieczny problem rozwiązany :) Dzięki!

    • Cieszę się – proszę bardzo :)

      Pozdrawiam,
      Grzegorz Róg

  • Bardzo ciekawy artykuł, nie wiedziałem że można aż tyle napisać na temat doboru rozdzielczości dla strony. Dzięki za zgromadzenie obszernej wiedzy w jednym miejscu.

  • Przy tworzeniu pliku layoutu w Photoshopie oprócz wyboru rozdzielczości strony pojawia się też pytanie tryb koloru. Prawdopodobnie najlepszym rozwiązaniem dla sieci jest tryb sRGB. Ile jednak powinno się wybrać bitów dla takiego pliku? Czy 8 wystarczy? A może 16 – w dobie nowoczesnych monitorów.. ?

  • Panie Michale – wartość bitów w tym polu to wartość NA KANAŁ. W trybie RGB są trzy kanały, zatem 8 bit w tym polu to 8×3 = 24bity a więc 16.8 mnl kolorów czyli dokładnie tak, jak powinno się projektować dla wyświetlaczy. A więc zostawiamy RGB 8 Bit oraz sRGB jako profil.

    Szczegółowe lekcje na temat kolorów, ich doboru i testowania w PS znajdzie Pan w kursie Photoshop dla Designerów:

    http://www.eduweb.pl/kursy/photoshop/photoshop-dla-designerow.html

    Zapraszam :)

    Pozdrawiam serdecznie,
    Grzegorz Róg

  • Dziękuję za informację, rozwiał Pan moje wątpliwości ;]

  • Pingback: Responsible menu - doman.art.pl()

  • Trzeci link z początku artykułu nie działa :(

  • Witam,

    mam pytanie jak mogę zrobić by moja stronka była na całą szerokość widziana na monitorach z wyższą rozdzielczością, ponieważ ja obecnie mam netbooka małego i ostatnio sprawdzałem ją na innym monitorze oraz na macbooku pro i zobaczyłem że już ona nie wygląda tak jak bym tego chciał i są ogromne marginesy, wolał bym by ona była na całą szerokość i czcionka może wtedy być większa co zwiększy na pewno czytelność forum i stronki.

    podałem mail powyżej, mogę prosić o jakąś poradę ? jest to joomla i używam gantry i szablonu jf-corporate, serdecznie pozdrawiam. Mateusz

    • Matt@ Zainstaluj sobie dodatek do Firefoxa „Stylish”, opcjonalnie załóż sobie konto na userstyles.org i nadpisz tym dodatkiem swoje css-y.
      Baw się min- width, max-width, width 100%, @media, czasem float i display – dla elementów na stronie strony.
      Na końcu podepniesz zmiany do swojej strony.
      Wrto mieć elementy oklasowane wszędzie gdzie wprowadzasz zmiany.

      „Stylish” dlatego, żeby zachowywać zmiany po przeładowaniu strony.
      To jest chyba najprostszwe rozwiązanie na początek. Posiada walory edukacyjne, nie ingerujesz w pliku na serwerze, pracujesz lokalnie.

      Ja tak zmieniłem już sporo istniejących stron, poprawiając nietrafne zamysły webdesignerów dla własnej wygody przeglądania na tablecie.

  • Witam,
    Tak się zastanawiam czy jest sens stosować tak sztywne break pointy?
    Czy nie jest dobrym wyjściem takie zaprojektowanie strony by głównym celem był jej odpowiedni wygląd na każdej rozdzielczości? Tzn. tak ją dopasowywać, żeby breakpoint powstawał w momencie gdy strona przestaje wyglądać dobrze.

    Dopiero zaczynam tworzyć strony responsywne i są to moje luźne przemyślenia :)

    • Zgadzam się z Tobą z co najmniej 3 powodów:
      1) Jest przeogromne zatrzęsienie ilości modeli telefonów, tabletów, laptopów i monitorów stacjonarnych
      2) Na to należy nałożyć kombinacje, jakie ludzie wyczyniają na swoich ekranach z oknami aplikacji np przeglądarki, obok arkusz kalkulacyjny i jeszcze komunikator.

      Ilość kombinacji jest nieograniczona a rozdzielczość w której wyświetli się userowi nasza strona – nie do przewidzenia.
      Dlatego uważam, że breakpointy poziome powinny być dokładnie tam, gdzie zaczyna się problem z wyglądem i to dla każdej kolejnej w pionie sekcji strony.

      3) mając w takim stopniu responsywną stronę możemy lepiej rozplanować monetyzację strony sprzedając różne powierzchnie reklamowe na różne rozdzielczości, można wręcz targetować reklamę pod rozdzielczość.

      Inna sprawa to techniki osiagnięcia takiej responsywności. Media Queries to już trochę działanie na piechotę jeśli chodzi o zmianę samego układu pod określoną rozdzielczość, robienie płynnych breakpointów tą metodą mogłoby być testem cierpliwości dla mnichów buddyjskich. Moim zdaniem to zadanie pozostawić należy flex box modelowi, który przy dobrze przemyślanym układzie treści załatwi sprawę. Do zadbania przez media queries pozostanie podmiana grafik na mobilne z uwzględnieniem jeszcze jednego ważnego zadania: breakpointów pionowych odpowiedzialnych za to, by przy różnych rozdzielczościach najważniejsza część witryny była zaraz po wczytaniu widoczna.

      To takie moje prywatne przemyślenia ale mogę się mylić, też dopiero zaczynam. :-)

  • Witam, ciekawy artykuł. Wyjaśnione wszelkie kwestie związane z rozdzielczościami ekranu wymaganymi do odpowiedniego używania media-query, przydało się.

  • Bardzo ciekawy tekst i niesamowicie obszerny, chętnie polecę zaznajomienie się z podobną tematyką, czyli responsywnością logo http://www.designer.pl/blog/responsywne-logo/

    • Temat wałkowany przez nisze od kilku lat. Ale… betonowa świadomość, że loga się nie rusza… i nic z nim nie wolno – ehh.. jeszcze dłuuuga droga dla zrozumienia tej idei w prostym społeczeństwie :)

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Nastawienie sie na ruch mobinly to chyba podstawa według mnie. Nastawiłbym sie własnie na taki projekt strony.

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Responsywne wyświetlanie treści to nie jest nastawienie na urządzenia mobilne.
    Tu chodzi o dostosowanie układy do róznych formatów także większych niż tradycyjny monitor.
    To taka sztuczka, żeby zaoszczędzić sobie pracy i ograniczcyć niespodzianki. Nic nadzwyczajnego.

    Nastawiać na ruch mobilny można skrypty na serwerach, żeby np. po rozpoznaniu małej rozdzielczości wysyłały mniejszą wersję obrazków dla zaoszczędzenia pasma.
    Media quuery po stronie klienrta nie zapewnia tego.

    Jest rok 2014. Czy rozdzielczość 320px nie jest już zbyt mała?
    Skłonię się nawet do stwierdzenia, że na takiej rozdzielczość lepiej wyświetlać stronę NIe responsywną.
    Choćby dlatego, że marginesy boczne wymuszane przez np. bootstrapa nie zmniejszają elementy o następne 10 -15 px. Związku z czym n.p. iframe z Youtube nie jest widoczny w całości.

    I kiedy kandydat „HTML5 FLEX BOX MODEL” stanie się powszechny w użyciu i wyprze te prowizorki bootstrapowe ?
    Choć na dzień dzisiejszy nie mam oporu w stosowaniu prostych właściwości flex box model, bo wspierany wszędzie, ale w końcu ta technologia jest nadal jako kandydat.

  • Bardzo fajnie i ciekawie napisane, ja ze swojej strony też mogę polecić artykuł o rwd w wersji dla laika, można dowiedzieć się wielu rzeczy i napisany jest w prosty i zrozumiały sposób :)

    http://marketingmobilny.pl/responsive-web-design-1/
    http://marketingmobilny.pl/responsive-web-design-od-laika-do-praktyka-cz-ii/

  • Szczególnie pomocne były tzw. breakpointy. Tego szukałem, ponieważ nie używam smartfonów, ale widzę że są popularne coraz bardziej. Już chyba 15% ruchu z niego pochodzi!

  • Doskonale opisane zagadnienie. Kierowałem się tym artykułem przy budowaniu mojej strony: http://www.rsgrafik.pl

  • Witam

    Ja również bardzo dziękuję za bardzo wartościowy artykuł, który czytałem analizowałem przez dwa dni :)
    A z pomocą którego w znacznym stopniu poprawiłem wyświetlanie mojej strony przy różnych rozdzielczościach.
    Mam jeszcze problem z wyświetlaniem dużej grafiki na mniejszych rozdzielczościach.
    Gdyby ktoś podpowiedział jak ten problem mnożna rozwiązać to będę wdzięczny, dziękuję.

  • Pomocny artykuł. Przygotowuję wersję responsywną dla mojej http://www.imienin.pl i szukałem optymalnych rozdzielczości dla których zrobić przedziały. Teraz już wszystko jest jasne.

  • Agnieszka Sierpień

    Jeden z lepszych artykułów które kiedykolwiek czytałam dotyczący stron responsywnych. Dobrze, aby layout strony był zawsze dopasowany do każdego „małego” urządzenia. Często tak nie jest i cały efekt estetyczny strony nie wygląda tak jak powinien. poleciłem przeczytanie tego artykułu ekipie http://greytree.pl/uslugi/strony-internetowe/, aby robili jeszcze lepsze strony internetowe.