Недавно я захотел полностью переделать свой личный сайт. Мой старый был слишком простым и минималистичным. Я хотел что-то столь же минимальное, но я хотел добавить к этому свою индивидуальность.

Поэтому я совершил огромную ошибку: я открыл свой любимый текстовый редактор (Atom), создал новый файл с именем index.html и начал программировать.

Прежде чем даже открыть текстовый редактор, вы должны все спланировать. И самое важное, что нужно учитывать при разработке веб-сайта, это помнить следующее: Дизайн для мобильных устройств в первую очередь. Контент веб-сайта является его основным элементом, и мы должны создавать наши сайты с целью демонстрации этого контента наилучшим образом. Проще говоря, веб-дизайн — это общение. С помощью цветов, типографики, теней, изображений и т. д. мы делимся сообщением. Но почему дизайн для мобильных устройств в первую очередь? Ну, 60% онлайн-трафика приходится на мобильные устройства.

Если вы разрабатываете веб-сайт в первую очередь для мобильных устройств, при масштабировании для планшетов и настольных компьютеров вы будете только добавлять и реорганизовывать элементы. С другой стороны, если вы сначала разработаете для настольных компьютеров и уменьшите масштаб, вы будете метаться, пытаясь понять, что вынуть и куда положить, чтобы это хорошо выглядело на меньшем экране. Ваш CSS будет абсолютным беспорядком (здесь я говорю из личного опыта).

Тематическое исследование:

Я хотел переделать свой сайт. Вот что у меня получилось после того, как я сразу начал кодировать:

Я был вполне доволен своим сайтом. Я думал, что это выглядело хорошо. Но потом я понял, что не думал, как это будет выглядеть на телефонах или планшетах, и мне было страшно узнать, поэтому я встал, налил себе миску хлопьев, проверил Reddit, Facebook и Twitter (вот что Я всегда так делаю, когда откладываю), и, наконец, я взглянул:

О Боже. Теперь мне нужно было убраться после моего беспорядка. Это было пару дней назад. Вы знаете, как сейчас выглядит мобильная версия? Точно так же, я действительно ленивый ха-ха. Шучу, прежде чем исправить это, я хотел подумать о важности дизайна для мобильных устройств, так как вы избавите себя от многих головных болей в будущем.

Так что же важнее всего учитывать при разработке веб-сайта? Как это будет выглядеть на мобильном.