Яку ширину браузера я повинен використовувати для створення веб-сайту?

Я працюю над графічною частиною веб-сайту, і мені запропонували створити веб-сайт у Photoshop. Мені цікаво, що таке середні розміри та ширина браузера для веб-сайту, щоб я міг створити свій макет із цими розмірами.

У сучасну епоху веб-дизайну ширина браузера не має значення. Існує так багато різних пристроїв, що вам НЕОБХІДНО зробити свої дизайни чутливими , оскільки вони працюють для екрану будь-якого розміру.

Для цього вам слід скористатися якоюсь системою сітки з рідиною та націлити конкретні пристрої за допомогою @media-запитів .

Медіа-запити - це просто різні набори правил CSS для різних розмірів портів перегляду. Медіа-запити також відповідають на динамічну зміну ширини веб-переглядача. У міру того, як ваш веб-переглядач стає меншим, сторінка реагує, скидаючи поплавці або переходячи з 12 стовпців до 1 або 2. Реакція також реагує на користувачів мобільних пристроїв та таблиць, коли вони змінюють орієнтацію з портретної на пейзажну або навпаки.

Цільові розміри:

• 320 x 480 мобільний пристрій в портретному режимі
• 480 x 640 маленьких планшетів або iPhone в альбомному режимі
• Планшет 768 x 1024 в портретному режимі
• 1024 x 768 планшетний ПК в альбомному режимі
• 1200 + настільні браузери
• 2900 ++ великих медіа-дисплеїв або конференцій (Це не обов'язково, але що робити, якщо хтось дивився на ваш сайт на дуже великому дисплеї.

Щоб побачити це в дії, подивіться на сітку Frameless . Насправді це не просто рівномірно, але при налаштуванні веб-переглядача він переходить від 14 стовпців аж до 1

Twitter Bootstrap - це проста програма CSS, HTML та JS, побудована з популярних компонентів користувальницького інтерфейсу - також хороший приклад сучасних методів чуйного дизайну.

Інша річ, яку ви також можете врахувати - це щільність пікселів . У iPhone 4 та нового iPad є дисплеї сітківки, які в 2 рази більш чіткі, ніж у звичайних екранів. Це робить практику подання спрайтів та зображень замість тексту майже застарілою. На iPad зображення з текстом виглядають жахливими.

Тож відповідь на питання полягає в тому, що не існує стандартної ширини браузера, яку ви повинні розробити. Ви повинні приймати свої дизайнерські рішення, базуючись на своїх користувачах, і робити їх там, де це найбільш доступно для більшості людей.

У багатьох шаблонах макета використовується ширина 960 пікселів, оскільки вона вписується в загальну роздільну здатність екрана 1024 пікселів, дає деякий простір для смуги прокрутки і легко розділяється на 2, 3, 4, 5, 6, 8, 10, 12 і 16 - ідеально підходить для колунізації макет.

Дивіться приклад на веб-сайті http://960.gs .

Інші рамки, такі як завантажувальний, використовують 940px для обліку деяких поля між стовпцями.

Якщо ви орієнтуєтесь на настільні браузери, тоді ви можете легко перейти на ширину близько 1000 пікселів.

Дозвіл екрану StatCounter

Чому приблизно 1000 пікселів, коли найбільш типовими дисплеями є 1024 пікселі чи більше? Тому що ви повинні передбачити смуги прокрутки та хром вікон.

Якщо ви спеціально орієнтовані на мобільні браузери, то 320 пікселів у ширину може бути хорошим вибором, хоча мобільні браузери зазвичай масштабують вміст, щоб відповідати ширині перегляду, тому 950 або 960 пікселів можуть бути чудовими. Зверніть увагу, що 320 пікселів CSS / HTML дорівнює 640 пікселів пристрою на таких пристроях високого рівня, як iPhone.

Дозвіл екрану мобільного екрана StatCounter

Ваш цільовий ринок теж може змінити речі. Якщо ви орієнтовані на технічну кмітливу аудиторію, ви можете розраховувати, що речі будуть перекошені на сучасніші пристрої. Якщо ви будуєте урядовий сайт, вам потрібно буде задовольнити більш широкий спектр.

Також, як ви будуєте сайт? Якщо ви використовуєте сітчасту систему, наприклад, Blueprint CSS або 960 Grid System, то це також може диктувати розмір (більшість сіткових систем також можна змінити на інші розміри).

Ви також можете розглянути чутливий дизайн, якщо ви намагаєтеся добре працювати як на мобільних, так і на робочих столах.

У цей час розмір робочого столу, що наклепився на весь світ, становить 1024x768, добре створити веб-сайт розміром 1003px ...