Блогът на Гонзо

Пригответе сайта си за висока резолюция

Въпреки, че 1024×768 си остава най-често срещаната разделителна способност сред потребителите на Интернет, все по-често ще срещаме резолюции над 1200 пиксела в ширина. Не съм сигурен каква част от потребителите с толкова колеми екрани си разпъват прозореца на браузъра до максималния размер на екрана, но предполагам, че не малка част от тях го правят. А и дори да не е до край поне моят браузър често е по-колям от 1200 пиксела. Ако на тези потребители им покажете сайт, широк 900 пиксела, почти половината екран остава празен. Какво разхищение на полезна територия! Защо да не я оползотворим с нещо полезно? Защо по-голямата част от информацията да остава под „скъвката“, като може да излезе наяве още при зареждане на страницата? Ще попитате как?

Още преди доста време писах за media queries, но примерът, който дадох, се отнасяше до нагаждане на изгледа за малки екрани. А защо да не добавим подходящ изглед и за големите? Все повече хора ще ползват големите си LCD телевизори или монитори за разглеждане на уеб-страници, нека да се възползваме.

Какво направих аз – добавих допълнителен набор със стилове, който да важи само за екрани, по-широки от 1300 пиксела. В този набор съм пренаредил блоковете така, че вместо да има две колони в съотношение 2/1, колоните са в съотношение 3/1, и основната колона е разделена на 3. На първа страница текста на най-новата публикация е в три колони, както и списъка с останалите публикации отдолу. На страницата на публикациите лявата половина е за текста на публикацията, а в дясната остават коментарите и страничната колона, заемажи по 1/4 от ширината на екрана. Не съм сигурен, дали извеждането на коментарите най-горе е най-добрия вариант, но докато измися нещо по-добро, ще остане така.

Но да говорим в код! За тези, които не са чели предишната публикация, ще обясня. Media queries позволяват да зададете не само видът медия, но и нейните характеристики, като критерий за използването на даден набор със стилове. По този начин можете да направите мобилна версия на сайта за браузърите на онези мобилни устройства, които за да впечатлят потребителя, не взимат в предвид стиловете за hendheld типа медия. Можете да направите различни стилове за устройства с по-малко цветове, за различна ориентация или размер на страницата при печат… И за големи екрани, нали за това говорим сега:

<style type="text/css">
@import url(hd.css) screen and (min-width:1290px);
</style>

Тази конструкция работи в Opera 10, Firefox 3.5, Сафари и Chrome. Ако още не сте разпънали прозореца на браузъра, сега е моментът да го направите. Ако ползвате по-малък монитор, идете до компютъра на колегата или съседа, вържете лаптопа към плазмата, пърдон LCD телевизора и се удивете от възможностите на съвремения уеб – Full HD Ready.

Етикети: , , , ,

4 коментара по “Пригответе сайта си за висока резолюция

  1. Michel

    Страхотна техника!

    Преди се правеше разпознаване с JS, за ширината на екрана (или браузъра, или и двете), сега с чист CSS… cool! :)

    Ще взема за пробвам и аз…

    Мерси за mini-tutorial-а! :)

  2. Гонзо

    ОО даа, обичам онези скриптове, които оразмеряват сайта според размера на екрана, а не според размера на прозореца на браузъра ;-)

    Аз все още не съм сигурен, че варианта на страницата с пост за висока резолюция е добър – формата за коментари е до публикацията и провокира хората да коментират преди да са прочели всичко. Ще се радвам да видя и други идеи в действие.

  3. Тихомир Ипотпалиев

    Според мен трябва да се измисли нещо по-кардинално. При блогове е лесно да се пренарежда, но при всеки по пипнат дизайн на сайт, обема на текста, често участва в неявно формиране на височината на даден елемент, примерно div. Трябва някаква умна нова концепция.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *