При проектирането на вашия уебсайт е важно да се уверите, че той изглежда страхотно на всяко устройство, независимо от размера и формата на екрана. Отзивчивите уебсайтове са проектирани да изглеждат добре на всякакви съвременни устройства като компютри, телефони, таблети, телевизори, носими устройства и дори екрани за автомобили. За да направите уебсайта отзивчив, ще трябва да промените своя CSS и HTML код, за да преоразмерите автоматично елементите му в зависимост от конкретни условия. Това wikiHow ви учи как да планирате и внедрите основен отзивчив уеб дизайн.
Стъпки
Метод 1 от 3: Планиране на адаптивен дизайн
Стъпка 1. Разберете как вашата аудитория използва вашия уебсайт
Тези дни повечето хора, които сърфират в мрежата, го правят от мобилни телефони и таблети. За да може сайтът да бъде отзивчив, трябва да сте сигурни, че той се показва правилно, независимо къде се гледа. Ако времето и парите са от съществено значение, съсредоточете се върху типовете устройства, които са най -популярни сред вашите потребители (ако тази информация е налична) и как те използват вашия сайт. Използвайки вашия софтуер за анализ или друга форма на изследване, разберете:
- Какви устройства използват най -често за разглеждане на уебсайта, като обръщат специално внимание на марките мобилни телефони/таблети/компютри и размерите на екрана/разделителната способност.
- Кои браузъри са най -популярни сред вашите потребители. Що се отнася до глобалната статистика, Google Chrome е най -популярният уеб браузър в света, но Safari е на второ място.
- Как вашите посетители използват вашия уебсайт, например колко време прекарват в разглеждането му, къде го гледат и кое съдържание е най -популярно. Това може да ви помогне да определите кой тип съдържание е важно да включите и кое може да бъде пропуснато.
Стъпка 2. Проектирайте различни оформления за различни устройства
Можете да използвате комбинация от CSS и JavaScript, за да откриете устройството на потребителя, както и неговите възможности (независимо дали поддържа Java, Flash и т.н.) и съответно да покажете определена версия на вашия сайт. CSS Media Queries са особено полезни за определяне на размера/разделителната способност на устройството.
Стъпка 3. Отчитайте различни видове взаимодействия
Вашият посетител може да взаимодейства с уебсайта ви с помощта на мишка, клавиатура, сензорен екран или дори четец на екрани за хора с увредено зрение. Имайки предвид това, вашият уебсайт трябва да реагира на щраквания на мишката, клавиши на клавиатурата (Tab, Enter, Return и т.н.) и докосване на пръсти на екрана.
Ефектите при преместване на мишката не работят с нищо, освен с мишка. Вместо да използвате тези ефекти, можете да използвате да изисквате от посетителя да кликне върху бутон или икона, за да покаже каквото и да е било показано по -рано при курсора на мишката
Стъпка 4. Помислете за използване на система за управление на съдържанието (CMS)
Лесен начин да се уверите, че дизайнът на вашия сайт е отзивчив, е да използвате CMS с предварително изградена отзивчива тема. Използването на CMS като Joomla, Drupal или Wordpress ви позволява да гарантирате, че уебсайтът ви изглежда страхотно на всички устройства, без да се налага да кодирате сами отзивчивите елементи. Проверете при вашия доставчик на уеб хостинг, за да видите кои инструменти за CMS са налични с вашата услуга.
Стъпка 5. Използвайте онлайн инструменти, за да тествате уебсайта си
Сега, когато отзивчивият уеб дизайн набира популярност, има различни безплатни инструменти, които можете да използвате, за да тествате уебсайта си. Ако вече сте кодирали уебсайта си, използвайте тези инструменти, за да тествате как изглежда при различни условия, за да знаете къде трябва да подобрите отзивчивостта:
- Удобен за мобилни устройства тест от Google: Позволява ви да разберете дали вашият сайт работи толкова добре на мобилни устройства, колкото и на компютърни екрани.
- resizeMyBrowser: Позволява ви да разглеждате вашия сайт в различни резолюции.
- Отговорник: Показва вашия сайт на различни екрани на устройства в различни оформления (отстрани или отдясно нагоре).
Метод 2 от 3: Направете оформлението на страницата отзивчиво
Стъпка 1. Помислете за безплатна рамка за отзивчиви стилове
Рамката е предварително написан набор от HTML, CSS и/или JavaScript, който можете да използвате като скелет за вашия сайт. Всички рамки са тествани и оптимизирани за работа с всички браузъри, така че всичко, което трябва да направите, е да вмъкнете съдържанието си, да добавите предпочитанията си за мултимедия и цвят и да публикувате вашия сайт. Някои популярни рамки са:
- Bootstrap
- Скелет
- Фондация
Стъпка 2. Задайте прозореца за изглед с мета маркер
Ако не използвате рамка, ще искате да започнете с най -важния аспект на кодирането на отзивчив уебсайт: Viewport. Визуалният прозорец е частта от уебсайта, която е видима за потребителя. Ключът към правилното показване на вашия сайт, независимо от размера на екрана, е да мащабирате размера на прозореца за изглед в маркера META. За да направите това, включете този маркер в горната част на всяка страница на сайта:
Стъпка 3. Посочете размера на текста спрямо прозореца за изглед
След като вашият прозорец за изглед е настроен, текстът на страницата ви ще се мащабира, за да пасне на екрана. Шрифтовете обаче могат да се показват твърде големи или твърде малки, ако размерите им не са посочени във връзка с прозореца за изглед. Можете да направите това, като дефинирате размера на шрифта като специфичен процент от прозореца за изглед с единицата vw. Този пример казва на заглавките на H1 да се показват на 10% от ширината на прозореца за изглед, независимо от неговия размер:
wikiHow
Стъпка 4. Използвайте медийни заявки, за да покажете различни стилове за различни размери на екрана
Медийните заявки ви позволяват да изберете дали да се показват определени CSS елементи в зависимост от размера на екрана. Можете да посочите спецификата на вашата медийна заявка във вашия CSS файл. В този пример цветът на фона на тялото ще стане червен, ако екранът на потребителя е 480px или по -голям:
wikiHow
@медиен екран и (минимална ширина: 480px) {body {background-color: aqua; }}
Метод 3 от 3: Подобряване на изображенията
Стъпка 1. Използвайте свойството CSS width за мащабиране на изображенията
Вместо да задавате ширината на изображението на определено количество пиксели (напр. 500px), използвайте процент (например 100%), така че изображението да гледа ширината на родителя си и да го коригира съответно. Задаването на ширина на изображението на 100% принуждава изображението да се мащабира нагоре и надолу в зависимост от размера на екрана на зрителя. За да направите това в ред:
Стъпка 2. Използвайте свойството max-width, за да ограничите мащабирането на действителния размер на изображението
Ако използвате свойството width в предишната стъпка, за да мащабирате изображение до 100%, изображението ще расте или ще се свие, за да пасне на 100% от неговия контейнер, независимо от размера. Това означава, че ако изображението е от по -малката страна, то ще се увеличи по -голямо от първоначалния си размер и ще изглежда с по -ниско качество. За да предотвратите това, използвайте max-width, за да зададете максималния размер на мащаба на изображението на 100% (действителния му размер). Ето как:
Стъпка 3. Използвайте елемента HTML изображение за показване на различни изображения на различни размери на екрана
Ако искате да създадете изображения с персонализиран размер, които да се показват на екрани с различни размери, можете да посочите кои снимки да се показват във вашия HTML код. Създайте изображения с различен размер и след това използвайте този код като пример за определяне кое изображение да се използва на екрани с ширина 600 и 1500 пиксела:
