Mobile First
За останніми показниками, з мобільних пристроїв і планшетів в інтернет заходять набагато частіше, ніж з комп’ютерів. Відповідно, мобільний трафік стає більш значущим для веб-сайтів. В силу таких особливостей, як маленький розмір екрана, користувачі гаджетів воліють сайти з перших рядків пошукової видачі, вони витрачають менше часу на пошук інформації.
Підхід Mobile First передбачає відображення самого важливого вмісту легкий і оптимізований веб-сайт, відмова від завантаження інших ресурсів.
Адаптивна верстка сайту за цією методологією передбачає початкове створення сторінки для маленьких екранів і подальше додавання елементів так, як того вимагає дизайн сторінки для великого монітора. Незважаючи на прозорість підходу, замовники і виконавці докладають великі зусилля, щоб повністю переглянути звичний метод розробки сайту.
Bootstrap
Один з популярних фреймворків, який дав просту відповідь на питання, як зробити адаптивну верстку, – це Twitter Bootstrap. З допомогою 12-колонковою сітки бутстрап створюються сайти, які відразу за замовчуванням правильно відображаються на екранах мобільних пристроїв. В якості основних інструментів використовуються:
- наперед задана ширина колонок, якими можна визначити ширину елементів;
- фіксовані і гумові компоненти документа;
- вбудовані шрифти і класи для них;
- засоби оформлення таблиць;
- класи оформлення меню, панелі інструментів.
Динамічні ефекти написані на jQuery, для опису зовнішнього вигляду використовується препроцесор SASS, функціонал вбудовані популярні веб-шрифти. Сайти, розроблені на останній версії bootstrap, не відображаються коректно у рідко використовуваних версій браузерів, таких як IE8, IE9 і iOS 6. Примітно, що в якості розмірів шрифтів деяких елементів використовуються кореневі em. На офіційному сайті є докладні мануали англійською і російською мовою, приклади адаптивної верстки, способи використання вбудованих компонентів.
