19 наистина полезни отзивчиви урока за уеб дизайн

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

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

01. Как да започнете да мислите отзивчиво

Отзивчиви уроци за уеб дизайн: Как да започнете да мислите отзивчиво



как да направя сфера в блендер
Влезте в отзивчиво състояние на ума(Кредит за изображение: FreeCodeCamp)

В тази публикация на FreeCodeCamp , Кевин Пауъл прави важното, че отзивчивият уеб дизайн вече не е тенденция; това е начинът, по който се очаква да се изграждат сайтове, а това означава да се мисли отзивчиво от самото начало. Тук той демонстрира как да влезете в отзивчивото мислене, като същевременно създавате напълно отзивчив уебсайт от 3 страници.

02. 9 отзивчиви съвета за типография

Отзивчиви уроци за уеб дизайн: 9 отзивчиви съвета за типография

Получете отзивчиви съвети за тип от експертите(Кредит за изображение: Адам Банкс)

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

03. Правилата за адаптивна уеб типография

Правилата на отзивчивата уеб типография

Следвайте тези съвети, за да получите правилната си адаптивна уеб типография

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

04. Проектирайте отзивчив сайт с оразмеряване на базата на em

Създайте отзивчив сайт с оразмеряване на базата на em

Изградете страниците си, така че дизайнът да не се счупи, ако размерът на шрифта се промени

Използвайки em единици за оразмеряване на шрифта, можете да проектирате компоненти на страницата, които отговарят автоматично, ако размерът на шрифта се промени. След това, с хитър трик за отзивчив размер на шрифта, можете да създадете цяла страница, която да се настройва динамично въз основа на ширината на прозореца на браузъра. Следвайте този урок да се научите как да използвате „относителното“ поведение на ems, за да създадете дизайни, които са мащабируеми и отзивчиви.

05. Ръководства за приоритет: първоначална алтернатива на телените рамки

Ръководства за приоритет: алтернатива на телени рамки, първо съдържание

Научете защо трябва да използвате насоки за приоритет, а не телени рамки

Wireframes може да е най-широко използваният инструмент за проектиране на уебсайтове, приложения и други цифрови интерфейси, но те не са без недостатъците си, особено що се отнася до адаптивния дизайн. Тук Heleen van Nues и Lennart Overkamp представят предпочитаната алтернатива на телените рамки: ръководства за приоритет , които съдържат съдържание и елементи за мобилен екран, сортирани по йерархия отгоре надолу и без спецификации за оформление.

06. Ръководството на професионалиста за отзивчив уеб дизайн

Най-добрият

Създайте по-добри сайтове за всяко устройство с това ръководство

Написано от Джъстин Ейвъри , куратор на бюлетина Responsive Design Weekly, това ръководство от списание net превежда уеб професионалистите чрез основите до по-усъвършенстваните техники за отзивчив уеб дизайн.

07. Как да проектираме отзивчиви и устройства-агностични форми

Адаптивни форми, адаптирани към различни устройства

Уверете се, че вашите формуляри работят независимо от устройството

Формулярите са един от най-важните елементи във всеки дигитален дизайн на продукта и независимо дали имате нужда от поток за регистрация или стъпков стенд с няколко изгледа, трябва да го проектирате така, че да работи ефективно както на мобилни устройства, така и на работния плот. Ето как да го направите , заедно с полезни съвети как да използвате Flexbox.

08. Създайте отзивчиво оформление с CSS Grid

Дизайнер, създаващ CSS Grid уебсайт

Създайте страхотно изглеждащ портфолио сайт, подходящ за всички изгледи

CSS Grid Layout нараства в поддръжката на браузъра всеки ден и макар да не е заместител на Flexbox или дори на поплавъци, когато се използва в комбинация с тях, това е чудесен начин да създадете нови и вълнуващи отзивчиви оформления. Следвайте това ръководство стъпка по стъпка за изграждане на отзивчив портфолио сайт с помощта на Grid.

09. Ръководството на уеб дизайнера за Flexbox

Колоните на Flexbox, маркирани 1 2 3 4 5 със стрелка, показваща основната ос е хоризонтална

Започнете с Flexbox

Започнахте ли да използвате Flexbox вече? В този урок Wes Bos предоставя a изчерпателно ръководство до основните концепции, които ще ви дадат солидно разбиране за всичко, от което се нуждаете, за да се справите с този мощен инструмент.

10. Codrops Flexbox справка

На екрана на Codrops се казва

Пълно ръководство от Сара Суейдан

Това пълно ръководство за Flexbox е написана от Сара Суейдан, автор, която е известна със способността си да обяснява понятия по начин, който е лесен за следване, без да се оскъпяват детайлите. Ръководството за Codrops се актуализира редовно, така че е чудесен ресурс, към който да се върнете, когато имате нужда от него.

11. Стекове: Flexbox за Sketch

Екранна снимка със средна статия казва

Получете възможностите на Flexbox в рамките на Sketch

Стековете, част от приставката за автоматично оформление, ви предоставят начин да използвате технологията Flexbox в рамките на Sketch, без да използвате CSS. тази статия обяснява как можете да използвате тази мощна техника за лесен отзивчив дизайн.

12. Курс на катастрофа в технически RWD

Краен курс в екранна снимка на технически отзивчив уеб дизайн

Запознайте се с основите на отзивчивия уеб дизайн

Пишейки в блога на Treehouse, Джери Цао събра много полезна информация в сравнително кратка, читава статия.

13. Създайте гъвкави оформления със Susy и Breakpoint

Екрани на устройства, показващи адаптивно оформление на уебсайта, адаптирано към всяко съотношение

Sass разширения, за да се грижи за отзивчивата математика

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

14. Как да създадем отзивчиви ръководства в Adobe XD

Отзивчиви ръководства се правят в Adobe XD

Adobe Experience Design (XD) е инструмент за UX и прототипиране

Ако искате да опитате Adobe Experience Design (XD) , ето добър урок за да започнете. Включва видео демонстрация, която ви превежда през всяко щракване на процеса.

15. CSS в BBC Sport

Екранна снимка на уебсайта на BBC Sport

Лек CSS за голям отзивчив сайт

Това не е урок сам по себе си, но тук има много обучение. В този пост , първата от поредицата от две части, разработчика на интерфейс Шон Бент ни води на подробна обиколка как се прави CSS в BBC Sport Те успяха да запазят основата на CSS на този масивен сайт под 9kb и е очарователно да видим как е направено това.

Екранна снимка на CSS трикове, започваща статията с

Начини на лепкав колонтитул на Крис Койер

Прилепващ долен колонтитул ... това трябва да е достатъчно просто, нали? За съжаление не. Може да бъде по-сложно, отколкото бихте очаквали, за да поставите този долен колонтитул на правилното място на всяко устройство. За щастие Крис Койер е събрал пет трика което ще ви помогне да го направите с помощта на calc () , Flexbox, отрицателни полета и мрежа.

17. Адаптиране към входа

Таблица, показваща удобни, уютни и компактни текстови дизайни на различни размери на екрана

Уверете се, че вашият реагиращ сайт може да приема данни от всякакъв вид устройства

Отзивчивият дизайн не се състои само в това да направите страницата си да се показва правилно на което и да е устройство, а също така трябва да я накарате да функционира добре - и това означава, че трябва да бъде добра в приемането на вход в свят, в който настолните компютри имат сензорни екрани, а телефоните имат клавиатури. тази статия от Джейсън Григсби от Cloud Four има няколко добри съвета.

18. Най-добрите ни практики са унищожаване на мобилната уеб ефективност

Екранна снимка на четене на статия

Съображенията за производителност трябва да работят и за мобилни устройства

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

19. Как да създадем адаптивни уеб приложения с заявки за контейнери

Екрани с различни измерения, показващи мащабиране на макет на уеб приложение

Научете как да направите своя медиен мащаб, използвайки контейнерни заявки

Научете как да трансформирате красиво, сложно уеб приложение - с компоненти, състояния и взаимодействия - в различни измерения и резолюции, с помощта на контейнер querie .

Свързани статии: