{"id":400,"date":"2009-02-12T00:10:23","date_gmt":"2009-02-11T23:10:23","guid":{"rendered":"https:\/\/www.blog.gdaq.pl\/?p=400"},"modified":"2009-02-22T22:53:47","modified_gmt":"2009-02-22T21:53:47","slug":"w-jakiej-rozdzielczosci-robic-strony-www","status":"publish","type":"post","link":"https:\/\/gdaq.pl\/blog\/2009\/02\/w-jakiej-rozdzielczosci-robic-strony-www\/","title":{"rendered":"W jakiej rozdzielczo\u015bci robi\u0107 strony www?"},"content":{"rendered":"<div id=\"oh_speaker_wrapper\">Przy ostatnim projekcie, kt\u00f3ry realizowa\u0142em otrzyma\u0142em takie pytanie i postanowi\u0142em podzieli\u0107 si\u0119 z Wami moj\u0105 opini\u0105.<\/p>\n<p>Strony robi si\u0119 pod rozdzielczo\u015b\u0107 800x600px lub 1024x768px. Wi\u0119ksze rozdzielczo\u015bci nie s\u0105 jeszcze brane pod uwag\u0119. Nie pami\u0119tam czy kiedykolwiek by\u0142a stosowana mniejsza rozdzielczo\u015b\u0107 ni\u017c 800x600px, a przynajmniej teraz jest to rozdzielczo\u015b\u0107 najmniejsza pod kt\u00f3r\u0105 robi si\u0119 strony. Aktualnie co raz cz\u0119\u015bciej projektuje si\u0119 witryny pod 1024x768px ze wzgl\u0119du na rozw\u00f3j rozdzielczo\u015bci domowych wy\u015bwietlaczy.<br \/>\nRzadko zdarza si\u0119, aby ktokolwiek korzysta\u0142 jeszcze z rozdzielczo\u015bci 800&#215;600 aczkolwiek zdarza si\u0119 to.<\/p>\n<p>Patrz\u0105c na statystyk\u0119 jednej z moich stron wida\u0107, \u017ce 2% u\u017cytkownik\u00f3w korzysta jeszcze z tej rozdzielczo\u015bci. <a href=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/statystyki.gif\" target=\"_blank\" data-rel=\"lightbox-gallery-878wKERp\" data-rl_title=\"\" data-rl_caption=\"\"><img decoding=\"async\" class=\"alignright size-medium wp-image-515\" style=\"margin: 10px;\" title=\"\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/statystyki_mini.gif\" border=\"0\" alt=\"statystyki\" \/><\/a>Niby to niewiele, ale w skali miesi\u0105ca jest to ponad 450 os\u00f3b. Zdecydowana wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w korzysta z rozdzielczo\u015bci 1024x768px i wy\u017cszych.<\/p>\n<p><!--more--><\/p>\n<p><strong>Teraz warto sobie zada\u0107 pytanie czy warto robi\u0107 witryn\u0119 dostosowan\u0105 jedynie do 2% u\u017cytkownik\u00f3w?<\/strong><br \/>\nCzy co\u015b stracimy robi\u0105c witryn\u0119 pod rozdzielczo\u015b\u0107 800x600px? Zdecydowanie nie, u\u017cytkownicy posiadaj\u0105cy nawet wi\u0119ksze rozdzielczo\u015bci zobacz\u0105 ca\u0142\u0105 witryn\u0119. Osoby z wi\u0119kszymi rozdzielczo\u015bciami ni\u017c 1024x768px b\u0119d\u0105 widzia\u0142y po prostu do\u015b\u0107 niewielk\u0105 stron\u0119 z du\u017c\u0105 ilo\u015bci\u0105 wolnego miejsca po bokach.<br \/>\nJak wygl\u0105da to w przypadku witryny zrobionej pod rozdzielczo\u015b\u0107 1024x768px? W tej rozdzielczo\u015bci i wi\u0119kszych witryna b\u0119dzie wygl\u0105da\u0142a bardzo dobrze jednak w rozdzielczo\u015bci 800&#215;600 pojawi si\u0119 problem. U\u017cytkownik nie zobaczy prawej cz\u0119\u015bci strony, aby to zrobi\u0107 b\u0119dzie musia\u0142 przewin\u0105\u0107 stron\u0119 suwakiem w bok. Nie ka\u017cdy internauta mo\u017ce si\u0119 zorientowa\u0107, \u017ce po prawej stronie jest dalsza cz\u0119\u015b\u0107 witryny dlatego te\u017c nale\u017cy uwa\u017ca\u0107 co si\u0119 tam umieszcza.<\/p>\n<p>Je\u015bli mieliby\u015bmy zwraca\u0107 uwag\u0119 na u\u017cytkownik\u00f3w z rozdzielczo\u015bciami 800&#215;600 to w poni\u017cszym przyk\u0142adzie &#8220;Buen Retiro&#8221; b\u0142\u0119dem by\u0142oby umieszczenie menu po prawej stronie. Zdecydowanie lepszym rozwi\u0105zaniem by\u0142oby umieszczenie menu po lewej stronie lub w g\u00f3rnej cz\u0119\u015bci w szerz witryny. Aby skorzysta\u0107 z menu trzeba przewin\u0105\u0107 suwakiem witryn\u0119. Wydaje mi si\u0119, \u017ce na witrynie jest na tyle nie du\u017co danych, i\u017c mo\u017cna by\u0142oby wszystko zmie\u015bci\u0107 w rozdzielczo\u015b\u0107 800&#215;600. Swoj\u0105 drog\u0105 bardzo \u0142adny design prosty czysty i przejrzysty.<\/p>\n<p>Innym rozwi\u0105zaniem jest u\u017cycie na stronie element\u00f3w skalowalnych w css. W takim przypadku witryna powinna dobrze wy\u015bwietla\u0107 si\u0119 we wszystkich rozdzielczo\u015bciach i wype\u0142nia\u0107 ca\u0142y obszar ekranu w ka\u017cdej rozdzielczo\u015bci. Problemem jest jednak to, i\u017c klient nigdy nie b\u0119dzie wiedzia\u0142 jak jego witryna wygl\u0105da u ka\u017cdego z poszczeg\u00f3lnych u\u017cytkownik\u00f3w oraz to, \u017ce musimy mocno ograniczy\u0107 si\u0119 z u\u017cywaniem element\u00f3w graficznych na stronie.<br \/>\nO tym mo\u017ce napisz\u0119 wi\u0119cej je\u015bli zg\u0142osicie tak\u0105 potrzeb\u0119.<\/p>\n<p>Oto przyk\u0142ad strony Allegro, kt\u00f3ra jest przygotowana pod rozdzielczo\u015b\u0107 800x600px pokazana w r\u00f3\u017cnych rozdzielczo\u015bciach.<\/p>\n<table border=\"0\">\n<tbody>\n<tr valign=\"top\">\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/allegro_800x600mini.jpg\" alt=\"\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/allegro_1024x768mini.jpg\" alt=\"\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/allegro_1280x1024mini.jpg\" alt=\"\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">800x600px<\/td>\n<td style=\"text-align: center;\">1024x768px<\/td>\n<td style=\"text-align: center;\">1280x1024px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Jak wida\u0107 przy rozdzielczo\u015bci ekranu 800x600px strona zajmuje ca\u0142\u0105 szeroko\u015b\u0107 ekranu. W wi\u0119kszych rozdzielczo\u015bciach wida\u0107 wi\u0119cej element\u00f3w strony, a po bokach pojawia si\u0119 puste miejsce.<\/p>\n<p>Kolejny przyk\u0142ad to strona Buen Retiro, przygotowana pod rozdzielczo\u015b\u0107 1024x768px pokazana w r\u00f3\u017cnych rozdzielczo\u015bciach.<\/p>\n<table border=\"0\">\n<tbody>\n<tr valign=\"top\">\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/br_800x600mini.jpg\" alt=\"\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/br_1024x768mini.jpg\" alt=\"\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/br_1280x1024mini.jpg\" alt=\"\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">800x600px<\/td>\n<td style=\"text-align: center;\">1024x768px<\/td>\n<td style=\"text-align: center;\">1280x1024px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Jak wida\u0107 przy rozdzielczo\u015bci ekranu 800x600px strona nie mie\u015bci si\u0119 i menu z prawej strony nie jest widoczne (fotografia pierwsza pkt2). Dodatkowo wysoki head graficzny spowodowa\u0142, \u017ce na pierwszy rzut oka nie wida\u0107 \u017cadnych tre\u015bci na stronie, a jedynie zdj\u0119cie(fotografia pierwsza pkt1). W 1024&#215;768 strona wy\u015bwietla si\u0119 poprawnie. W wi\u0119kszych rozdzielczo\u015bciach dodatkowo po bokach generowane jest ca\u0142kiem przyjemnie wygl\u0105daj\u0105ce t\u0142o(fotografia druga pkt1).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" style=\"margin: 10px;\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/br_uwaga1.jpg\" alt=\"\" width=\"200\" height=\"87\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" style=\"margin: 10px;\" src=\"https:\/\/gdaq.pl\/blog\/wp-content\/uploads\/2009\/02\/br_uwaga2.jpg\" alt=\"\" width=\"200\" height=\"123\" \/><\/p>\n<p>Reasumuj\u0105c proponuj\u0119 dobrze przemy\u015ble\u0107 wyb\u00f3r rozdzielczo\u015bci ze wzgl\u0119du na to, \u017ce p\u00f3\u017aniejsza jej zmiana mo\u017ce przysporzy\u0107 nam mas\u0119 problem\u00f3w. We\u017a\u00a0 pod uwag\u0119, \u017ce wi\u0119kszo\u015b\u0107 nowych serwis\u00f3w jest ju\u017c projektowana pod wy\u017csz\u0105 rozdzielczo\u015b\u0107. Moim zdaniem niewielkie strony firmowe, wizyt\u00f3wki mog\u0105 by\u0107 swobodnie robione pod rozdzielczo\u015b\u0107 800&#215;600 natomiast wi\u0119ksze serwisy z wi\u0119ksz\u0105 ilo\u015bci\u0105 informacji powinno si\u0119 robi\u0107 w wi\u0119kszej rozdzielczo\u015bci gdy\u017c mamy wi\u0119cej miejsca do zagospodarowania, aczkolwiek regu\u0142y na to nie ma.<\/p>\n<h5>Je\u015bli ten artyku\u0142 pom\u00f3g\u0142 Ci, masz co do niego jakie\u015b w\u0105tpliwo\u015bci lub pytania &#8220;Zostaw komentarz&#8221;, a na pewno na niego odpowiem.<\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Przy ostatnim projekcie, kt\u00f3ry realizowa\u0142em otrzyma\u0142em takie pytanie i postanowi\u0142em podzieli\u0107 si\u0119 z Wami moj\u0105 opini\u0105. Strony robi si\u0119 pod rozdzielczo\u015b\u0107 800x600px lub 1024x768px. Wi\u0119ksze rozdzielczo\u015bci nie s\u0105 jeszcze brane pod uwag\u0119. Nie pami\u0119tam czy kiedykolwiek by\u0142a stosowana mniejsza rozdzielczo\u015b\u0107 ni\u017c 800x600px, a przynajmniej teraz jest to rozdzielczo\u015b\u0107 najmniejsza pod kt\u00f3r\u0105 robi si\u0119 strony. Aktualnie [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[12,13],"tags":[],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-usability"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":0,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"wp:attachment":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}