С излизането на уеб сайтовете от настолния компютър ние, разработчиците, започваме да се сблъскваме все по-често със следния проблем:
Как ще изглежда уеб сайтът ни на екрана на един смарфон, а на друг? Ами на все по-модерните таблети? Като се замислим как би изглеждал на новите iMac 27″ монитори?
Трябва ли да правим различни версии на дизайна си, за да може винаги да е “скроен” по мярката на резолюцията, която ни посещава, или трябва да ползваме java script, за да проверяваме каква резолюция ни посещава, и тогава да зареждаме съответния CSS файл?
Отговорът е: НЕ!
С навлизането на новите технологии вече разполагаме с интелигентно решение, което ни позволява да създаваме атрактивни и адаптивни уеб сайтове.
В този урок ще разгърна едно модерно и много добро решение за справяне с тази мулти-резюлюционна загадка.
Разработил съм една HTML 5 / CSS 3 страница, която безпроблемно се справя с многото и различни резолюции с помощта на @Media Queries.
Виж ДЕМО \ Свали работните файлове
Оразмерете екрана в различни резолюции, за да видите адаптацията на дизайна, или просто заредете тази страница от мобилния си телефон.
Нека започнем със създаването на html 5 структура на сайта.
HTML 5 Структура на уеб сайта.
Стартираме със създаването на една стандартна и семантична структура на HTML 5:
<header>
<nav>
<article>
<article>
<article>
<aside>
<section>
<section>
<footer>
Забележка: Фокусът на тази статия е върху адаптивния дизайн, затова няма да изпадам в подробности върху HTML 5 кода, ако имате въпроси по тази част от урока, пишете коментари.
HTML 5 решения за по-старите браузъри (IE 6/7 )
Важно е да знаете, че HTML 5 синтаксисът не се поддържа от по-старите браузъри, затова използваме java script, който ще “помогне” за разчитането им. Зареждаме html5.js директно от Google.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
След като сме изградили HTML 5 страницата, е време да започнем да изграждаме дизайна ѝ.
CSS
Включваме основния CSS файл с дизайна:
<link href="style.css" rel="stylesheet" type="text/css">
Дизайнът е прост, стандартен двуколонен, с обща ширина 980px, основна колона #content {width:600px; } и лява колона #sidebar {280px;}. Няма да навлизам в повече детайли тук, целия код можете да видите, като свалите работните файлове.
Ако стопирате работата до тук и тествате сайта, ще видите, че дизайнът не е адаптивен, а при различното оразмеряване на екрана Ви се получава стандартен долен скрол.
Сега, нека направим този дизайн да се адаптира правилно към всяка резолюция
@Media Queries
<link href="media-queries.css" rel="stylesheet" type="text/css">
Зареждаме само @media screen дефинициите за различните резолюции и промените, които трябва да настъпят в зависимост от това каква е резолюцията, която посещава сайта ни.
В CSS файла освен стандартните неща трябва да дефинираме всички HTML 5 елементи като display:block;
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Основният синтаксис на използване на @media screen е следният:
@media screen and (max-width: 600px) {
.class {
Въвеждаме нужните ни изменения в кода;
Например: width:50%; padding:0; margin:0;
}
}
По този начин казваме ,че, ако екранът е ПОД 600px да се чете този CSS, ако екрана е НАД 600 ще се чете основния CSS. Ако искаме правилото да се приложи за НАД определена стойност, тогава използваме:
@media screen and (min-width:1382 px) {
.class {
background:#000;
}
}
В конкретния пример съм предвидил 4 различни параметъра:
Резолюция по-голяма от 1680 px за всички с големи монитори.
Резолюция по-малка от 980 px за всички с по-малки от стандартните монитори.
Резолюция по-малка от 650 px за по-модерните мобилни телефони.
Резолюция под 560 px за по-старите или мобилните телефони с по-малки екрани.
Резолюции над 1680 px
За големите резолюции съм решил да уголемя шрифта на менютата, за да са по-четими.
Също така правим и видеото по-голямо, за да може преживяването на потребителя (UI) с голям екран да е по-добро.
@media screen and (min-width: 1680px) {
body {
font-size:0.9em;
line-height:1.6em;
}
#main-wapper {
width:95%;
}
#content {
width:60%;
}
#sidebar {
width:40%;
float:right;
font-size:120%;
padding:0;
margin:0;
}
.video iframe {
width:853px;
min-height:510px;
}
}
За резолюциите под 980px
правим дизайна флуиден/ адаптивен.
@media screen and (max-width: 980px) {
#main-wapper {
width: 95%;
}
#content {
width: 70%;
}
#sidebar {
width: 25%;
float:right;
padding:0;
margin:0;
}
#nav {
position: static;
}
#nav li{
padding:5px;
margin-left:2px;
}
#sidebar section {
padding: 8% 7%;
margin-bottom: 10px;
}
.video iframe {
width: 100%;
height: auto;
min-height: 300px;
}
}
Тук е важно да сменим позицията на основната навигация на position:static;
Променяме ширините на основните елементи в процентни стойности.
За резолюция по-малка от 650 px
трябва дизайнът ми да стане едноколонен, за да запазим лесната четимост и големина на снимките.
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#header h1 {
font-size:24px;
}
#header h2 {
font-size:12px;
letter-spacing:1px;
}
#nav {
position: static;
}
#nav li {
margin-left:5px;
padding:2px;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
margin: 0;
float: none;
}
#sidebar section {
padding: 3% 4%;
margin: 0 0 10px;
}
video embed,
.video object,
.video iframe {
min-height: 250px;
}
}
Тук е важно да сменим позиционирането от float:left към float:none; по този начин правим дизайна едноколонен.
Важно е стойностите да се задават в проценти, за да може да се запази аспекта на дизайна и отстоянията, както са предвидени в дизайна.
Адаптивни размери на снимките
За да направите снимките да се оразмеряват в зависимост от резолюцията на екрана, използвайте стандартните дефиниции на класа. Важно е само да се отбележи, че те НЕ работят при IE8 , затова добавяме и width:auto\9;
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */</code>
}
Адаптивни размери на видеото
В случая аз използвам видео от YouTube.com, като го слагам в страницата посредствмо iframe, но ако ползвате object просто го добавете и него.
video iframe {
width: 100%;
height: auto;
min-height: 300px;
}
Автоматично оразмеряване на текста при мобилните телефони.
Използвайте следния код, за да изключите автоматичното настройване на размера на текста.
html {
-webkit-text-size-adjust: none;
}
Initial Scale Meta Tag
По подразбиране iPhone Safari (а след тестовете забелязах и Opera Mobile 10) оразмеряват уеб сайта, така че да се събере на екрана. Този meta tag казва на браузера да използва ширината на устройството като основна ширина на уеб сайта и да изключи оразмеряването, зададено по подразбиране.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Сега нека добавим малко стил към адаптивния уеб дизайн.
Вече всичко работи и се адаптира правилно към съответната резолюция, но за да добавим малко стил към цялата страница със следния код:
#nav, #sidebar, article, h1, img { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }
Той ще направи смяната на размерите, цветовете и големината на шрифта по-плавни и приятни за окото.
На практика можете да добавите transition на всеки елемент, важно е обаче да знаете, че това натоварва процесора и не трябва да се прекалява много с него.
Заключение
Разгледахме как новите технологии ще направят живота ни по-лесен, като премахнат досадните технически ограничения и дадат път на креативността ни.
Но също така е важно да се знае, че някои от използваните от мен технологии в този урок още са експериментални и биват поддържани само от новите и модерни браузъри. Затова е много важно при анализа на проекта ни да преценим, кои от тях можем да ползвам и от кои трябва да се откажем… за щастие само за сега.
В статията съм ползвал вдъхновение и технически параметри от:
http://webdesignerwall.com/tutorials/css3-media-queries
http://elliotjaystocks.com/blog/css-transitions-media-queries/
Полезни връзки, свързани с тази статия.
Повече за специфичните тагове можете да прочетете в блога на Мартин Методиев
http://martinmetodiev.com/my-web/apple-specific-meta-tags/
LESS Framework 4 – Стартирайте лесно вашия адаптивен дизайн
320 and up – Още един framework, с който можете лесно да стартирате адаптивен дизайн
http://www.dotnetperls.com/iphone
http://code.google.com/p/html5shiv/
https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal
Поздравления за статията, гледал съм много по въпроса в чуждестранните блогове (особено в любимците ми @ Smashing Magazine), но не бях виждал толкова подробна информация на български.
С един пост скри шапката на повечето наши дизайн агенции 🙂
Благодаря за прекрасния коментар. Наистина се постарах статията да е възможно най-изчерпателна, без да се разтягат локуми. Да, има много писано по въпроса в различни блогове, но гледах да събера всичко, което съм сметнал за нужно на едно място и на български 🙂
Отворих демото с телефона Nokia N72 – големичка е даде ми че е 2.72 MB, шрифта беше ужасно голям, не ми изкара никакви картинки, а сайдбара излезе най-отдолу
@Yarkost Да. Никъде не съм казал, че проекта е ОПТИМИЗИРАН за мобилни телефони и мобилен интернет. Тук фокуса е върху адаптацията на дизайна.
Сайт бара е проектиран да падне долу виж “За резолюции под 650 пиксела”
Големината на шрифта на моето HTC HD2 е ок. Не знам дали според теб е голям или просто не ти компилира както трябва.
Благодаря за споделянето на информацията Г-н Ангелов. Наистина е похвално че колеги споделят личния си опит и научени (или импровизирани) методи – за важни при новите изисквания за форматиране на Интернет страници.
Негативната ми обратна връзка, а тя вярвам да е от градивен характер, е чисто лингвистична. “Фокуса на тази статия е”… направи ми впечатление че изпускате пълния член на няколко места в статията. Редно е да се изпише “Фокусът”… и така, погледнете текста и моля да ме коригирате ако греша.
* * *
Оставам с уважение и отново благодаря за споделянето,
Г. Атанасов
Здравей, благодаря за градивния коментар ще направя нужните корекции.
Много яко! 10х 🙂
Изпробвах демо сайта на Nokia C3. Сайтът заема само една четвърт от екрана, а клипът с лисицата заема целия.
Много интересно, какъв е браузера на този телефон. Тествам го при мен на 320х240 пиксела и се държи добре, но щом не се подрежда едноколонно може да не работи на неговия браузер. С какво е? Да погледна за решение.
Сори за супер закъснелия отговор. Ако има значение все още – браузърът е Опера Мини. Блогът е много добър, но ще е добре ако го обновяваш по-често 🙂
Здравей, определено ще си инсталирам 1 опера мини, за да видя какво се случва.
Радвам се, че блога ти харесва, правя всичко по силите си да го поддържам редовно с хубава и качествена информация, но времето за всички ни е 24 часа на ден и не ни стига много много 🙂 🙂 🙂
Ще се радвам да чуя и какво ви интересува, може да ми дадете теми за размисъл 🙂
А и телефонът е Nokia C3-00
Поздравления за статията!!! Няма да казвам, че си единственият, който пише подобни неща в България, за да не обидя някого, но си един от малкото.
Благодаря ти Алекс, за прекрасните думи. Опитвам се да бъда полезен на всички 🙂
Това е пример за уеб общество. Жалко, че рядко остава време да седне човек и да напише нещо подобно или най-малкото да преведе. Успехи!
Браво, Жорка. Много ми трябваше нещо подобно, толкова подробно, за един проект, който правя в момента. Мерси!
@Евгени Радвам се, че съм полезен.
Адаптивния дизайн е добро решение за клиент с ограничен бюджет. За съжаление по-добро решение е да има един сайт за мобилни устройства и един за лаптопи/настолни компютри.
@kaloyan по-голяма простотия скоро не бях чувах
@angeloff евалата 🙂
🙂 Аз мисля да се съглася с Иво. 10х за коментара все пак
Добра статия, само един съвет – shim има в себе си корекция за дисплей на новите html5 елементи, така че не е нужно добавянето й. Успех.
Здравейте, имам сайт, който искам да направя responcive, освен @media заявките, трябва ли да променя нещо по html кода, защото след като добавя заявките в scc файлa и смалявам браузъра не се променя нищо, а от телефона изгледа е от по близо но само това.