19 наистина полезни отзивчиви урока за уеб дизайн
Отзивчивият уеб дизайн вече не е по избор; сайтовете просто трябва да бъдат отзивчиви в наши дни. За щастие RWD е по-лесно от всякога да се приложи, тъй като има толкова много чудесни инструменти, които да ви помогнат да създадете и тествате вашите проекти и да гарантирате, че създавате най-доброто потребителски опит .
Ето нашия обзор на някои от най-добрите ресурси, които ще ви насочат към това как уебсайтовете ви да работят добре и да изглеждат страхотно на всяко устройство. Искате още полезни ресурси? Нашите ръководства за най-доброто уеб конструктор и уеб хостинг сервиз са тук, за да помогнат. И ако се притеснявате да съхранявате файлове сигурно, имате нужда от тези брилянтни съхранение в облака настроики.
01. Как да започнете да мислите отзивчиво
В тази публикация на FreeCodeCamp , Кевин Пауъл прави важното, че отзивчивият уеб дизайн вече не е тенденция; това е начинът, по който се очаква да се изграждат сайтове, а това означава да се мисли отзивчиво от самото начало. Тук той демонстрира как да влезете в отзивчивото мислене, като същевременно създавате напълно отзивчив уебсайт от 3 страници.
02. 9 отзивчиви съвета за типография
Отзивчивият уеб дизайн, достатъчно естествено, се нуждае от отзивчива типография, за да се съчетае с него. Но какво изобщо означава това и как го прилагате? Попитахме седем водещи уеб дизайнери за техните съвети за създаване на елегантен, четлив текст във всеки прозорец.
03. Правилата за адаптивна уеб типография
Отзивчивата уеб типография е трудна - трябва да имате както дизайнерски пържоли, така и техническо ноу-хау. Но колкото и да е сложно, погрешното не е опция, защото типографията е крайъгълният камък на уеб дизайна. последвам тези принципи на проектиране и практически решения за да го разберете правилно.
04. Проектирайте отзивчив сайт с оразмеряване на базата на em
Използвайки em единици за оразмеряване на шрифта, можете да проектирате компоненти на страницата, които отговарят автоматично, ако размерът на шрифта се промени. След това, с хитър трик за отзивчив размер на шрифта, можете да създадете цяла страница, която да се настройва динамично въз основа на ширината на прозореца на браузъра. Следвайте този урок да се научите как да използвате „относителното“ поведение на ems, за да създадете дизайни, които са мащабируеми и отзивчиви.
05. Ръководства за приоритет: първоначална алтернатива на телените рамки
Wireframes може да е най-широко използваният инструмент за проектиране на уебсайтове, приложения и други цифрови интерфейси, но те не са без недостатъците си, особено що се отнася до адаптивния дизайн. Тук Heleen van Nues и Lennart Overkamp представят предпочитаната алтернатива на телените рамки: ръководства за приоритет , които съдържат съдържание и елементи за мобилен екран, сортирани по йерархия отгоре надолу и без спецификации за оформление.
06. Ръководството на професионалиста за отзивчив уеб дизайн
Написано от Джъстин Ейвъри , куратор на бюлетина Responsive Design Weekly, това ръководство от списание net превежда уеб професионалистите чрез основите до по-усъвършенстваните техники за отзивчив уеб дизайн.
07. Как да проектираме отзивчиви и устройства-агностични форми
Формулярите са един от най-важните елементи във всеки дигитален дизайн на продукта и независимо дали имате нужда от поток за регистрация или стъпков стенд с няколко изгледа, трябва да го проектирате така, че да работи ефективно както на мобилни устройства, така и на работния плот. Ето как да го направите , заедно с полезни съвети как да използвате Flexbox.
08. Създайте отзивчиво оформление с CSS Grid
CSS Grid Layout нараства в поддръжката на браузъра всеки ден и макар да не е заместител на Flexbox или дори на поплавъци, когато се използва в комбинация с тях, това е чудесен начин да създадете нови и вълнуващи отзивчиви оформления. Следвайте това ръководство стъпка по стъпка за изграждане на отзивчив портфолио сайт с помощта на Grid.
09. Ръководството на уеб дизайнера за Flexbox
Започнахте ли да използвате Flexbox вече? В този урок Wes Bos предоставя a изчерпателно ръководство до основните концепции, които ще ви дадат солидно разбиране за всичко, от което се нуждаете, за да се справите с този мощен инструмент.
10. Codrops Flexbox справка
Това пълно ръководство за Flexbox е написана от Сара Суейдан, автор, която е известна със способността си да обяснява понятия по начин, който е лесен за следване, без да се оскъпяват детайлите. Ръководството за Codrops се актуализира редовно, така че е чудесен ресурс, към който да се върнете, когато имате нужда от него.
11. Стекове: Flexbox за Sketch
Стековете, част от приставката за автоматично оформление, ви предоставят начин да използвате технологията Flexbox в рамките на Sketch, без да използвате CSS. тази статия обяснява как можете да използвате тази мощна техника за лесен отзивчив дизайн.
12. Курс на катастрофа в технически RWD
Пишейки в блога на Treehouse, Джери Цао събра много полезна информация в сравнително кратка, читава статия.
13. Създайте гъвкави оформления със Susy и Breakpoint
Ако не искате да използвате рамка за изграждане на вашия реагиращ сайт, тези разширения на Sass са хубава алтернатива, всеки със своите силни страни. Те ще се погрижат за отзивчивата математика вместо вас, за да можете да се съсредоточите върху дизайна.
14. Как да създадем отзивчиви ръководства в Adobe XD
Ако искате да опитате Adobe Experience Design (XD) , ето добър урок за да започнете. Включва видео демонстрация, която ви превежда през всяко щракване на процеса.
15. CSS в BBC Sport
Това не е урок сам по себе си, но тук има много обучение. В този пост , първата от поредицата от две части, разработчика на интерфейс Шон Бент ни води на подробна обиколка как се прави CSS в BBC Sport Те успяха да запазят основата на CSS на този масивен сайт под 9kb и е очарователно да видим как е направено това.
16. Прилепващ долен колонтитул, пет начина
Прилепващ долен колонтитул ... това трябва да е достатъчно просто, нали? За съжаление не. Може да бъде по-сложно, отколкото бихте очаквали, за да поставите този долен колонтитул на правилното място на всяко устройство. За щастие Крис Койер е събрал пет трика което ще ви помогне да го направите с помощта на calc () , Flexbox, отрицателни полета и мрежа.
17. Адаптиране към входа
Отзивчивият дизайн не се състои само в това да направите страницата си да се показва правилно на което и да е устройство, а също така трябва да я накарате да функционира добре - и това означава, че трябва да бъде добра в приемането на вход в свят, в който настолните компютри имат сензорни екрани, а телефоните имат клавиатури. тази статия от Джейсън Григсби от Cloud Four има няколко добри съвета.
18. Най-добрите ни практики са унищожаване на мобилната уеб ефективност
Прилагани без разглеждане, някои най-добри практики, създадени по време на ерата на работния плот, могат да имат пагубен ефект върху производителността на мобилната мрежа. тази статия ще ви накара да се замислите по-задълбочено за това как да накарате сайта си да работи добре на мобилни устройства.
19. Как да създадем адаптивни уеб приложения с заявки за контейнери
Научете как да трансформирате красиво, сложно уеб приложение - с компоненти, състояния и взаимодействия - в различни измерения и резолюции, с помощта на контейнер querie .
Свързани статии:
- Създайте отзивчиви форми и таблици
- Как отзивчивият уеб дизайн промени света
- 7 инструменти за уеб дизайн за 2018 г.
