Адаптивен уеб дизайн за мобилни устройства.

С излизането на уеб сайтовете от настолния компютър ние, разработчиците, започваме да се сблъскваме все по-често със следния проблем:

Как  ще изглежда уеб сайтът ни на екрана на един смарфон, а на друг? Ами на все по-модерните таблети? Като се замислим как би изглеждал на новите 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

[wp:svejo-net] @ 2011 Георги Ангелов

22 Responses to "Адаптивен уеб дизайн за мобилни устройства."

  1. Димитър Николов

    Поздравления за статията, гледал съм много по въпроса в чуждестранните блогове (особено в любимците ми @ Smashing Magazine), но не бях виждал толкова подробна информация на български.

    С един пост скри шапката на повечето наши дизайн агенции 🙂

  2. angeloff
    angeloff 8 years ago .Reply

    Благодаря за прекрасния коментар. Наистина се постарах статията да е възможно най-изчерпателна, без да се разтягат локуми. Да, има много писано по въпроса в различни блогове, но гледах да събера всичко, което съм сметнал за нужно на едно място и на български 🙂

  3. Yarkost Varna
    Yarkost Varna 8 years ago .Reply

    Отворих демото с телефона Nokia N72 – големичка е даде ми че е 2.72 MB, шрифта беше ужасно голям, не ми изкара никакви картинки, а сайдбара излезе най-отдолу

  4. angeloff
    angeloff 8 years ago .Reply

    @Yarkost Да. Никъде не съм казал, че проекта е ОПТИМИЗИРАН за мобилни телефони и мобилен интернет. Тук фокуса е върху адаптацията на дизайна.
    Сайт бара е проектиран да падне долу виж “За резолюции под 650 пиксела”

    Големината на шрифта на моето HTC HD2 е ок. Не знам дали според теб е голям или просто не ти компилира както трябва.

  5. Георги Атанасов

    Благодаря за споделянето на информацията Г-н Ангелов. Наистина е похвално че колеги споделят личния си опит и научени (или импровизирани) методи – за важни при новите изисквания за форматиране на Интернет страници.

    Негативната ми обратна връзка, а тя вярвам да е от градивен характер, е чисто лингвистична. “Фокуса на тази статия е”… направи ми впечатление че изпускате пълния член на няколко места в статията. Редно е да се изпише “Фокусът”… и така, погледнете текста и моля да ме коригирате ако греша.

    * * *

    Оставам с уважение и отново благодаря за споделянето,

    Г. Атанасов

    • angeloff
      angeloff 8 years ago .Reply

      Здравей, благодаря за градивния коментар ще направя нужните корекции.

  6. Александър
    Александър 8 years ago .Reply

    Много яко! 10х 🙂

  7. Александър
    Александър 8 years ago .Reply

    Изпробвах демо сайта на Nokia C3. Сайтът заема само една четвърт от екрана, а клипът с лисицата заема целия.

  8. angeloff
    angeloff 8 years ago .Reply

    Много интересно, какъв е браузера на този телефон. Тествам го при мен на 320х240 пиксела и се държи добре, но щом не се подрежда едноколонно може да не работи на неговия браузер. С какво е? Да погледна за решение.

  9. Алексанъдр
    Алексанъдр 8 years ago .Reply

    Сори за супер закъснелия отговор. Ако има значение все още – браузърът е Опера Мини. Блогът е много добър, но ще е добре ако го обновяваш по-често 🙂

    • angeloff
      angeloff 8 years ago .Reply

      Здравей, определено ще си инсталирам 1 опера мини, за да видя какво се случва.

      Радвам се, че блога ти харесва, правя всичко по силите си да го поддържам редовно с хубава и качествена информация, но времето за всички ни е 24 часа на ден и не ни стига много много 🙂 🙂 🙂

      Ще се радвам да чуя и какво ви интересува, може да ми дадете теми за размисъл 🙂

  10. Алексанъдр
    Алексанъдр 8 years ago .Reply

    А и телефонът е Nokia C3-00

  11. Александър Хубчев

    Поздравления за статията!!! Няма да казвам, че си единственият, който пише подобни неща в България, за да не обидя някого, но си един от малкото.

  12. angeloff
    angeloff 8 years ago .Reply

    Благодаря ти Алекс, за прекрасните думи. Опитвам се да бъда полезен на всички 🙂

  13. Александър Хубчев

    Това е пример за уеб общество. Жалко, че рядко остава време да седне човек и да напише нещо подобно или най-малкото да преведе. Успехи!

  14. Евгени Йорданов

    Браво, Жорка. Много ми трябваше нещо подобно, толкова подробно, за един проект, който правя в момента. Мерси!

  15. angeloff
    angeloff 7 years ago .Reply

    @Евгени Радвам се, че съм полезен.

  16. kaloyan
    kaloyan 7 years ago .Reply

    Адаптивния дизайн е добро решение за клиент с ограничен бюджет. За съжаление по-добро решение е да има един сайт за мобилни устройства и един за лаптопи/настолни компютри.

  17. Иво Иванов
    Иво Иванов 7 years ago .Reply

    @kaloyan по-голяма простотия скоро не бях чувах
    @angeloff евалата 🙂

    • angeloff
      angeloff 7 years ago .Reply

      🙂 Аз мисля да се съглася с Иво. 10х за коментара все пак

  18. MiKi
    MiKi 7 years ago .Reply

    Добра статия, само един съвет – shim има в себе си корекция за дисплей на новите html5 елементи, така че не е нужно добавянето й. Успех.

  19. Иво
    Иво 2 years ago .Reply

    Здравейте, имам сайт, който искам да направя responcive, освен @media заявките, трябва ли да променя нещо по html кода, защото след като добавя заявките в scc файлa и смалявам браузъра не се променя нищо, а от телефона изгледа е от по близо но само това.

Leave a Reply