Принципи на адаптивен уеб дизайн

В днешно време е обичайна практика да се създава уебсайт или приложение, което настройва потребителския си интерфейс в зависимост от браузъра или устройството. Има два подхода за постигане на тази цел. Първият включва създаването на различни версии на вашия уебсайт или приложение за различни устройства. Но това е неефективно и може да доведе до непредсказуеми грешки.

В търсене на надежден подход, устойчив на бъдещето, беше създаден отзивчивият-или адаптивен-дизайн. Той се фокусира върху изграждането на една версия на вашето оформление, която се адаптира автоматично към различни браузъри или устройства.

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

Отговорни съставки за уеб дизайн

Отзивчивият уеб дизайн не е толкова сложен, колкото звучи. Това е набор от практики, които можете да използвате, когато пишете CSS, а не отделна технология, която ще трябва да научите от нулата. Може би вече следвате няколко от тези принципи, без да го осъзнавате. Можете да разберете отзивчивия уеб дизайн, като проучите четирите му съставки: плавни оформления, отзивчиви единици, гъвкави изображения и медийни заявки.

Течни оформления

С плавно оформление можете да създавате уеб страници, които се адаптират към текущата ширина и височина на прозореца на изгледа. Обичайната практика включва използването на макс. ширина свойство, вместо да дава фиксирана ширина на елемент. Също така, използвайки процент (%), височина на прозореца на изглед (vh), или ширината на прозореца за изглед (vw) помага за подобряване на адаптивността, която не е възможна с пиксели (px). Така че, следващия път, когато изграждате оформление, не забравяйте да въведете тези малки промени и започнете да се възползвате от отзивчивите техники за проектиране.

Отзивчиви единици

Когато преминавате към по -усъвършенстван CSS, често ще виждате използването на rem и им единици за дължина вместо px единици. Това е така, защото rem единица прави супер лесно мащабирането на цялото оформление. По подразбиране 1rem е равно на 16px, защото е пропорционално на размер на шрифта на елемента, обикновено 16px. Можете обаче да зададете 1rem равно на 10px (или всяка друга стойност) за по-лесни изчисления, като регулирате размера на шрифта от най-високо ниво.

Гъвкави изображения

Изображенията са основна грижа, докато проектират дори най -основното оформление. Винаги трябва да внимавате да ги оразмерите правилно, така че да отговарят на дизайна. Също така по подразбиране те не се мащабират с промените в прозореца за изглед. Така че, трябва да използвате % за размерите на вашите изображения, заедно с макс. ширина Имот.

Можете да оживите отзивчиви сайтове, като използвате медийни заявки. Течните решетки са добри за начало, но ще откриете, че има няколко точки, при които оформлението започва да се разпада. Добавянето на точки на прекъсване за тези ширини на прозореца за настройка настройва оформлението за различни устройства. Медийните заявки ви помагат да прилагате избирателно CSS въз основа на резултатите от тестовете за мултимедийни функции. Можете да изследвате нови CSS функции за създаване на отзивчив уебсайт за по -малко време.

Принципи на адаптивен уеб дизайн

Въпреки че отзивчивият уеб дизайн е спасител, когато става въпрос за проблеми с много екрани, може да нямате фиксирани физически ограничения, към които да се позовавате. Следователно има шест основни принципа на отзивчив уеб дизайн, с които да започнете, когато проектирате адаптивно оформление.

Използвайте базирани на съдържанието точки на прекъсване

Един от основните принципи на дизайна гласи, че дизайнът на вашия уебсайт трябва да поддържа съдържанието, а не обратното. Мултимедийното съдържание, като видеоклипове, снимки и текстово съдържание, като дълго и кратко уеб копие, трябва да се визуализира оптимално на всички екрани. Ключът към отзивчивия уеб дизайн е да се използват базирани на съдържание точки за прекъсване, а не такива, базирани на устройства.

Изберете уеб шрифтове и системни шрифтове разумно

Уеб шрифтовете изглеждат зашеметяващо! Имате многобройни възможности да промените дизайна си с готини уеб шрифтове. Но трябва да знаете, че браузърите ще трябва да изтеглят всеки уеб шрифт. Повече уеб шрифтове, повече време за изтегляне. Обратно, системните шрифтове са светкавични. Ако потребителят няма именуван системен шрифт на локалното си устройство, той ще се върне към следващия шрифт в стека от семейства шрифтове. Затова не забравяйте да вземете предвид времето за зареждане и търсенето на дизайн при избора на шрифтове.

Оптимизирайте растерни изображения и вектори

Имате ли различни икони на вашия уебсайт, поддържащи съдържанието? Често е добра практика да използвате растров формат, ако иконите ви имат много подробности. От друга страна, векторните формати са начин да отидете за икони, които се мащабират добре нагоре и надолу. Векторите често са малки, но недостатъкът е, че някои по -стари браузъри може да не ги поддържат. Също така има случаи, когато векторите са по -тежки от растерните изображения, например когато изображението е много детайлно. Затова винаги се уверявайте, че оптимизирате вашите растерни изображения и вектори, преди да излязат онлайн.

Провеждане на тестове за отзивчиво първо сгъване

Първото сгъване на уебсайт е изгледът, който посетителите виждат при първото му зареждане, преди всяко превъртане. Често включва раздел за герои с отзивчива лента за навигация, уводно копие и носител, и CTA. Отзивчивостта не е ограничена само до мобилни устройства. Трябва да помислите и за таблети, игрови конзоли и други екрани. Така че, ключът е да се провеждат чести тестове поне за първия изглед на уебсайта. Можете да използвате Chrome DevTools (фар), за да тествате качеството на уеб страницата.

Не скривайте съдържанието на по -малки екрани

Много хора смятаха, че потребителите на мобилни устройства винаги бързат и търсят информация с размер на хапка, докато потребителите на настолни компютри се интересуват повече от дългосрочно съдържание. Сега осъзнаваме, че това не е вярно в днешния свят. Хората използват мобилни устройства навсякъде, търсят пълно съдържание и пълен достъп до всички услуги. Трябва да се уверите, че вместо да скривате съдържание, вие управлявате оформлението и точките на прекъсване, за да го представите възможно най -лесно и без усилие.

Управление на оформлението с помощта на вложени обекти

Правилното изграждане на оформление на сайта и позициониране на елементи отнема прилични усилия. Може също да сте изпитали трудности при управлението на много елементи, които зависят един от друг. Затова трябва да помислите за опаковане на свързани елементи в контейнер или. Това помага да се намали задачата за излагане на няколко елемента до един, в който излагате само един елемент.

Отзивчив дизайн: Трябва ли първо да използвате Desktop или мобилен телефон?

Първият подход на работния плот означава, че ще пишете CSS за големи екрани и след това ще приложите медийни заявки, за да свиете дизайна за по -малки екрани. За разлика от това, първият подход за мобилни устройства включва писане на CSS за мобилни устройства с по -малки екрани и след това прилагане на медийни заявки за разширяване на дизайна за по -големи екрани. Основният фокус е да се намали уебсайтът и приложенията до абсолютно необходимото.

Ако тепърва започвате с отзивчива уеб разработка, първо трябва да отидете на работния плот подход, тъй като в края на деня ще трябва да подреждате контейнера един върху друг на мобилен телефон устройства. Въпреки че е изцяло лично решение, мобилният подход ви помага да структурирате HTML по-добър начин, докато подходът на работния плот ще ви помогне с оформлението и разстоянията техники.

Топ 6 курса за изучаване на UX дизайн

Ако искате да научите UX дизайн или да подобрите уменията си, ето шестте най -добри онлайн курса, които можете да посетите.

Прочетете Напред

За автора