Чи є стандартний розмір для ширини веб-сайту в макеті? Якого розміру? Чому?
Відповіді:
Я запускаю більшість моїх макетів у ширині 1200 пікселів, хоча я розробляю роздільну здатність 1024 пікселів. Я налаштував напрямні в макеті на 1000 пікселів. Висота може змінюватися. Причина, за якою я розширюю свій макет-файл, полягає в тому, щоб побачити, як почувається дизайн із дихальною кімнатою навколо нього. Більшість людей в наші дні використовують більше 1024 пікселів.
Чи є стандартна ширина для розробки макетів веб-сторінок?
Так, ні, можливо?
Колись (див. Нижче) веб-дизайн значною мірою намагався створити єдиний вигляд, який би добре помістився на більшості екранів. За останні п’ять років це кардинально змінилося з прийняттям чуйного веб-дизайну (RWD).
RWD - це принцип дизайну виготовлення конструкцій таким чином, що дозволяє їм досить добре розміщуватися на будь-якому пристрої, незалежно від розміру пристрою.
У веб-розробці медіа-запити часто використовуються для застосування різних наборів стилів до веб-сторінок залежно від ряду факторів. Деякі поширені фактори включають:
Оскільки стилі можуть бути націлені на конкретні розміри екрану, не рідкість створювати кілька наборів конструкцій, орієнтованих на конкретні діапазони.
Щоб було зрозуміло, немає встановлених "стандартів". Немає керівного органу чи організації, які б сказали, що "дизайнери повинні робити конструкції, керуючись цими вказівками щодо розмірів", оскільки врешті-решт це заклик рішення.
Зважаючи на це, індустрія веб-розробок органічно придумала набір загальних точок перелому, які виникають знову і знову.
Типові точки перерви призначені для поточної ширини екрана і зазвичай:
одиниці в px
Причина цих конкретних цифр є досить мирською. Оригінальний iPhone мав екран з розмірами 320 × 480; оригінальний iPad мав екран із розмірами 768 × 1024; 1600 × 1200 звичайні для більшої роздільної здатності екрана.
Незважаючи на те, що звичайно бачити макети на деяких або всіх цих точках перерви, також часто потрібно надати кілька зображень певної сторінки, що показує проміжні точки перегину дизайну.
Комп'ютер із шириною рідини, який показує складені елементи шириною 768 пікселів, можливо, повинен містити дизайн на 900 пікселів, коли елементи перейшли на два стовпчики. Якщо ви виявите, що вам потрібно надати безліч наборів конструкцій для цих посередницьких точок прориву, я б настійно рекомендував розробити окремі компоненти та показати точки проходу, де компонент змінюється на компонентах, не включаючи решту сторінок у макет.
Це також допомагає уникнути загальних дизайнерських підводних каменів, коли конкретні компоненти користувальницького інтерфейсу відсутні, або вони не збігаються між точками прориву.
Далі наведена старіша версія цієї відповіді, яку я зберігаю заради нащадків, але вона не була актуальною протягом певного часу
Я здивований, що ніхто ще цього не згадав:
У Google є приємний інструмент розробки
Він повинен майже відповісти на ваше запитання поодинці.
У мене є кілька приміток про сучасні тенденції:
В даний час переважна більшість користувачів мають роздільну здатність 1024x600 (планшетний ПК / нетбук) або більше. Ви повинні пам’ятати про видалення 24pxсмуг прокрутки, які залишають гарну ширину 1000 пікселів. Щодо висоти: користувачі Інтернету дуже добре прокручують вертикально, оскільки вони звикли прокручувати колеса на мишах. Початкова висота важлива здебільшого для перших вражень.
Користувачі не дуже гарні в горизонтальній прокрутці, тому робити розмітки ширше 1000 пікселів не рекомендується.
Також багато користувачів з більшими екранами не використовують весь екран для свого веб-браузера. Тим більше, що Windows 7 включає прості функції перетягування n-dock, щоб опустити вікно на половину екрана.
Підсумовуючи:
Коротка відповідь: 775x400 для 800x600, а для 1024x768 використовуйте 1000x500.
Довга відповідь: Ви ніколи не можете бути впевнені, що ваша презентація буде виглядати правильно на вашому клієнтському комп'ютері (це може мати іншу операційну систему, браузери, інший калібрований монітор або меншу роздільну здатність з великим шрифтом, встановленим для кращого читання). З цієї причини я, як правило, завжди демонструю презентації на своєму комп’ютері, якщо зможу.
Якщо я не можу показати це на своєму ПК з питань розміру, я використовую ці мої особисті правила (Не приймайте мої вимірювання як святі, кожен має свої власні):
В якості безпечного розміру добре оптимізувати 800x600 (для видалення прокрутки та верхньої панелі я використовую 775x400 як "вище лінії"). Але сьогодні з більш дешевим екраном із ширшим стандартом я почав проектувати для 1024x768 (1000x500)
Важливо оптимізувати не висоту, а ширину. По висоті він вирішується простим прокруткою миші, а ширина, якщо у вас немає mac-миші, ви не можете прокручувати горизонтально, щоб переглянути більше інформації. Однак добре знати, де більш-менш можна розмістити нижній рядок екрану, навіть якщо неможливо точно визначити.
ПРИМІТКА. Я використовую такий низький зріст навіть на 1000 пікселів, тому що люди, як правило, мають багато додаткових смуг прокрутки в базовому браузері (наприклад, GoogleRank, наприклад, закладки та багато інших), тому мені завжди подобається розробляти можливі випадки.
Ps вибачте за мій поганий англійський :)
У нас є програма відстеження, яка повідомляє нам інформацію про наших користувачів. Більше половини розміром 1024x768. Тому я використовую це як "стандартний" розмір монітора.
Однак це не ваша жива зона для вашого сайту - люди мають бічні панелі, вони не завжди відкривають вікно браузера на повну ширину тощо.
Мені подобається система сітки 960 . Номери гнучкі, і веб-сайт пропонує безліч шаблонів для завантаження. Я використовую це для своїх макетів, і всі були поки дуже задоволені.
Мені доведеться шукати статистику для резервного копіювання (як-от ця публікація блогу "SO" ), але 1024x768 взяв або переймає її як стандартний загальний знаменник для роздільної здатності екрана. Я розробляю веб-макети для загальної аудиторії шириною 1000 пікс для врахування смуг прокрутки та меж вікон з роздільною здатністю шириною 1024 пікс. Для більш конкретної аудиторії прав Пекка у своєму коментарі. Дізнайтеся, яка норма для цільової аудиторії.
Розмір веб-переглядача сьогодні є складним питанням, оскільки люди використовують два типи пристроїв, комп'ютери з більшою та вищою роздільною здатністю та телефони з відносно низькою роздільною здатністю.
Якщо ви робите сайт таким, що є сайтом, ніж більшість комп’ютерів сьогодні (більшість яких становить 90% або більше), має мінімальну роздільну здатність 1024. Якщо ви хочете трохи менше комп'ютерів, але все-таки хороший відсоток, ніж 1200, також є в цьому діапазоні.
Якщо ви робите мобільний сайт, більшість телефонів максимум на 480 пікселів для горизонтального перегляду, але більшість із них також має якусь систему візуалізації для великих сайтів.
Питання щодо розміру - це стосується вашої власної аудиторії, якщо ваша мета - купа дизайнерів, у вас може бути більше веб-сайту, якщо люди середнього віку шукають нове страхування автомобіля, ніж ви повинні працювати трохи менше, і якщо це для телефону користувачі дивляться на своїх телефонах, ще менше.
Це, як правило, залежить від вашого веб-сайту, як правило, я не прагну за тих клієнтів на старих машинах перевищувати 1000. Однак тепер дослідження показують, що проектування на 1200 зараз прийнятне у світі дизайну, тому це напевно їжа для роздумів.
Ваш план повинен полягати в тому, щоб потрапити на найнижчий загальний знаменник, і якщо це станеться Джо-динозавром на машині 800x600 Windows 95, то це вам слід потурбуватися.
Також це повністю залежить від дизайну вашого веб-сайту. Зараз я розробляю веб-сайт для свого агентства, і він буде шириною 800, тобто для уподобань, а не для задоволення когось конкретного.
На жаль, не існує жодного стандартного розміру, оскільки веб-сторінки доступні на кількох екранах. Незважаючи на те, що це надійніше, будь ласка, вивчіть найбільш популярні резолюції (наприклад, 1024x768) та спроектуйте їх на основі популярності.
Відповідь: Ні, немає "стандарту".
Я рекомендую використовувати 960px для ширини вашого шаблону, тому що більшість роздільних можливостей екрана становить 1028px, тому смуга прокрутки не з’явиться, і ви побачите фон, який ви також використовували.
Я запропоную вам використовувати 1024px для стандартної ширини. Тому що максимальна кількість ПК, побудованих за допомогою монітора crt, та роздільна здатність цього монітора - 1024 * 768px.