Responsive web design: просто і зрозуміло
Крім того, Responsive web design враховує й такі речі як: орієнтація пристрою, приховування деяких несуттєвих частин сайту, надання зручних для натискання пальцями посилань на сенсорних екранах мобільних пристроїв, геолокація і ін.
Завдання підгонки блоків сайту під потрібний розмір екрану вирішують т.зв. Media Queries - спеціальний набір правил з арсеналу CSS, в якому заздалегідь прописуються ширина і висота вікна браузера, дозвіл екрана і орієнтація в просторі (portrait або landscape). Вірніше, в стилях прописуються кілька таких наборів, які враховують різні варіанти розміщення блоків. Наприклад, на великому моніторі у сайту 3 колонки (контент + 2 сайдбара), а на iPad в вертикальної орієнтації колонок буде всього 2, а третя або переповзе в горизонтальну площину під шапку, або взагалі буде прихована як не сильно важлива. Більш докладно про Media Queries рекомендую почитати у Ігоря Квентора на його блозі Вебсовет.
Дуже просто і зручно.
Інша важлива річ - посилання. Дуже незручно, а часом і неможливо потрапити пальцем по текстовому посиланню на мобільнику з тачскріном. Тому веб-дизайнер повинен заздалегідь передбачити заміну типових посилань великими кнопками. Наприклад, всім відому текстову посилаючись «читати далі» на блозі. Тобто, для мобільників зробити цю посилаючись зручною кнопочкою.
Корисні посилання по темі Responsive web design:
ПС: як бачите, під дану тему я завела окрему рубрику Чуйний дизайн. Сюди буду додавати періодично цікаві і корисні плюшки. Щоб бути в курсі, підпишіться на rss.