Зміст
Мобільні телефони, планшети та комп'ютерні монітори мають різні способи використання, користувачі та розміри, які залишають питання про те, який розмір найкращого макета для сайту визначається потребами основних користувачів цього сайту. Якщо сайт призначений для перегляду стандартними користувачами на широкоекранному дисплеї з роздільною здатністю 1680x1040 пікселів, розмір сайту повинен бути розміщений на головному екрані браузера. Якщо сайт призначений для використання на мобільних пристроях, він повинен бути зроблений на набагато меншому екрані.
Статичні схеми VS-рідини
Перший розгляд полягає в тому, чи вимагає сайт розмірність, визначену в пікселях. Використовуючи відсотки, можна створити "текуче" розташування, яке динамічно змінює розміри областей, залежно від розміру вікна браузера. Використовуючи в поєднанні з текстом, макетування рідини може бути найкращим вибором при створенні сайту для стандартної роздільної здатності екрана, а також мобільних браузерів. Флюїдні макети досягаються за допомогою "width = 100%" у декларації вмісту CSS, замість "width = 960x", наприклад.
Фільтрація стандартних розмірів екрану
Щоб створити "фіксовані" або текучі макети, ширина таблиць div, обгортки або основного вмісту повинна вміщуватися у вікні браузера користувача з урахуванням як смуги прокручування, так і панелі інструментів. Ви також повинні розглянути можливість зробити для більшості. Більше 80% браузерів сьогодні використовують роздільну здатність екрану понад 1024x768 пікселів. Це означає, що ви можете зробити це для 1680x1024 пікселів, але це гарна ідея для проектування на середню поверхню. Ширина 960 або 980 пікселів - це два довірені заходи для зручного відображення вмісту у веб-переглядачі, який використовує будь-який користувач із роздільною здатністю 1024x768 або вище. Система також добре вписується в мобільні пристрої, здатні відображати всі сайти. Якщо це занадто щільно, то 1080 є наступною кращою шириною. Пам'ятайте про висоту стандартного браузера при будь-якому дозволі, щоб утримувати найважливішу інформацію над "згином", або точкою, де потрібна прокрутка.
Мобільні екрани
Якщо ви хочете, щоб ваш сайт виглядав добре на різних мобільних пристроях, вам потрібно зробити це спеціально для пристрою або створити спеціальний стиль, який використовують мобільні веб-переглядачі для показу "мобільної" версії вашого сайту. Роздільна здатність 240x320 є поточним стандартом для більшості смартфонів і інтернет-пристроїв, таких як iPhone. Це гарна ідея використовувати "вільний" відсоток або макети, оскільки багато пристроїв підтримують як портретний, так і ландшафтний режим. якщо ви створюєте веб-сайт, який має ширину 320 пікселів, він може з'явитися обрізаним для користувача, звернувшись до нього в портретному режимі.
Золота сітка
Можливо, найкращою системою для визначення розмірів макета є використання системи сітки. Сітки обчислюють ідеально збалансовані регіони в межах заданої ширини, щоб забезпечити уявлення про те, як масштабувати елементи в межах основного макета або області вмісту. До цих елементів відносяться рекламні коробки, бари, рекламне простір або абзаци. Наприклад, макет із загальною шириною 1080 пікселів і розділення за допомогою золотої сітки залишили б область для повідомлень у блозі шириною 739 пікселів і правою смугою шириною 780 пікселів. 10 пікселів. Кінцевим результатом є ідеально вирівняна і збалансована компонування. Ви можете експериментувати з декількома різними сітками, відвідавши систему генераторів сіток (див. Ресурси).