Как сделать макет сайта на телефоне

Содержание

Адаптивная верстка или как сделать мобильную версию сайта?

Как я и обещал, пришла пора рассказать Вам, что такое «Адаптивная верстка» и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

А зачем вообще все это нужно?! Ведь жили же, как то раньше и ничего. Ну что тут сказать, интернет меняется, становиться лучше. Поисковые системы делают все возможное для удобства и комфорта пользователей… Здорово, правда

Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть.

Так же рекомендую к прочтению:

Скорее всего, Поисковая система Google оповестила всех веб-мастеров о том, что предпочтение при ранжировании будет отдаваться сайтам, оптимизированным под мобильные устройства. Но, только при условии что, запрос был сделан не через персональный компьютер.

То есть, если пользователь зашел через смартфон или планшет, то сайты и блоги заточенные под них будут всегда выше, нежели те, которые этого не имеют! В остальных же случаях, я так понимаю, это правило не действует.

АДАПТИВНЫЙ ДИЗАЙН САЙТА | Мобильная версия, другие разрешения

Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

Так вот, совсем недавно, у меня был отпуск, решил побольше статей написать полезных, реализовать какие-нибудь интересные идеи, в общем провести отпуск с пользой, а не лежать на диване, хотя как хотелось м-м-м….

В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:

скрин google кабинет

И рухнули мои все планы. Думаю нужно идти в ногу со временем… и понеслось! Первым делом естественно, решил найти в сети какой-нибудь плагин, который сделает все четко и без меня

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google — на удобство просмотра сайта с мобильного устройства, они не проходят ! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов. По этому смысла их использовать нету.

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

плагин адаптации wptouch

WPtouch Mobile Plugin — Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

Не буду описывать каждый плагин, сами опробуете и определитесь:

  • MobilePress;
  • WordPress Mobile Pack;
  • Duda Mobile Website Builder;
  • WordPress Mobile Pack;
  • WordPress PDA
  • WPmob Lite;
  • WPtap News Press;
  • WP Mobile Detector;
  • WiziApp.
Как сделать отправку смс на своем сайте

Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил — показывает обычный сайт! Какая то загадка прям

Короче меня это не устроило и я продолжил искать лучшее решение!

Затем, решил поручить эту работу специалисту какому-нибудь на бирже фрилансеров, но после долгих раздумий решил научиться адаптивной верстке и сделать все сам! В конце концов я же разработчик сайтов и пришла пора повышать квалификацию…

Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше. Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание.

Ладно, поехали дальше.

В общем начал я изучать эту тему, сначала теория, затем практика на своем блоге! Ну и в принципе научился, оказалось ничего сложного в этом нет, теперь мой блог адаптивный и подстраивается под любой экран и я рад как слон… Зайдите с любого смартфона ко мне на блог и Вы сами все увидите Найдете косяк — дайте знать.

Теперь поделюсь полученными знаниями с Вами и расскажу о наиболее важных моментах.

Пример адаптивной верстки

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например — основной сайт https://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

  • Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
  • Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
  • Удобство — навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.
  • Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
  • Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт.
  • Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server Side Components ).

  • Скорость загрузки — возможность удаления разных ненужных скриптов, стилей;
  • Меньший вес страницы — вместо того чтобы скрывать элементы как в адаптивной верстке их можно просто удалить;
  • Навигация — возможность настроить структуру под определенные устройства.
  • Нагрузка — дополнительная нагрузка на сервер.
  • Определение — чтобы выдать нужную версию сайта, нужно точно определить устройство посетителя, а с этим как я слышал не всегда все гладко.

Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах.

  • Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
  • Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.
  • Скорость загрузки — так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
  • Навигация — сложность в создании продуманной мобильной навигации.
Восстановление почты Яндекс если она удалена

Делаем адаптивную верстку самостоятельно

Для своего блога я выбрал адаптивную верстку по нескольким причинам:

  1. не нужно нарушать целостность основного сайта, блога;
  2. используется один единый контент, одна база данных и так далее;
  3. Лично для меня простота внедрения (потребуются знания html и css).

Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google

Во первых нужно прописать мета-тег в :

Этим мы сообщаем браузеру, что ширина сайта должна равняться ширине гаджета, устройства, или что у Вас там

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением.

Вот, начало положено, теперь если мы зайдем через смартфон или еще что, то увидим как выглядит наш сайт! Печалька да?!

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

  • смартфоны вертикально — от 240 до 340, от 341 до 420;
  • смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
  • планшеты вертикально — от 671 до 800;
  • планшеты горизонтально — от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

  • http://quirktools.com
  • http://www.emulateurmobile.com/
  • http://webmark.com.ua

Адаптивная верстка сайта

Кстати, если Вам нужно сделать сайт адаптивным, но Вы уверены что сами не справитесь, да и желания особого нет, то я предлагаю свои услуги! Посмотреть мои работы и отправить заявку, можно на странице: услуги.

На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии.

Савельев Владимир Александрович

С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript. База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год — Вы сможете стать опытным веб-мастером «с полного нуля»!

Источник

Адаптивная верстка для мобильных устройств

Дисклаймер: материал был написан до того, как адаптивная верстка стала трендом.

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

Как на моем сайте редактировать

Взял верстку с ходу. Верстал всё в процентах. Но при отображении в мобильном устройстве (Android и IOs) верстка выглядела немного странно. Больше всего раздражал маленький размер шрифта текста для абзацев. Отсюда и возникла идея написания этого совета.

Итак, разберем всё по частям и найдем самое оптимальное решение, чтобы не выглядело как «на костылях».

Итак, для верстки нам потребуются следующие элементы:

  1. Общее понимание разрешений мобильных устройств.
  2. Задание размера viewport.
  3. СSSи MediaQuery.

Общее понимание разрешений мобильных устройств

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

Разрешение экрана, дисплея смартфона, планшета

Почти все браузеры, которые есть на мобильных устройствах, могут и используют ресайз страниц. Ресайз они делают на основе технических данных, получаемых от устройства. Их три:

  1. devicePixelRatio
  2. screen.width
  3. screen.height

Эти три параметра могут дать нам море информации. Пишем простую функцию:

Например на Iphone мы увидим «2 320 568 640 1136», на айпад «2 768 1024 1536 2048». Lenovo P780 cообщит «1,5 360 640 540 960». Т.е. ширины экранов у перечисленных устройств будут 640, 1536, 540 пикселей соответственно. Делаем выводы: нам надо сделать версию для экранов, например, меньше 986 пикселей (стандарт для узких мониторов). Образно говоря, будет две верстки.

Одна для экранов с разрешением более 986 пикселей, другая — для меньших. Особенности CSS-верстки будут описаны в последнем разделе.

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

Обозначив width=device-width, мы сообщаем браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content=»width=600″, но этого не рекомендуем, потому-что различные носимые устройства могут иметь абсолютно различную ширину экрана.

Более подробно про viewport можно прочитать в статье «Адаптация сайта на мобильных устройствах».

СSS и MediaQuery в мобильной верстке

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

Каждый браузер должен, нет, просто обязан быть уникальным. Исправляем косяк с различным форматированием элементов форм, отменяя дефолтные стили браузера. А уже дальше делаем, как на душе лежит.

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

Источник

Данил Фимушкин

Бесплатный мастер-класс по веб-дизайну

адаптивный дизайн сайта,-заглушка

Адаптивный дизайн — это дизайн сайта, который подстраивается под разрешение устройства, с которого выполнен вход на сайт. Расскажу о принципах проектирования адаптивных сайтов и зачем нужны разные версии сайтов. Скачайте PSD-исходник адпативного сайта.

Яндекс музыка приложение не работает на айфон что сделать

Как выглядит адаптивный сайт

Есть один и тот же сайт, но на разных устройствах он выглядит по-разному:

адаптивный дизайн сайта

Как адаптивный сайт выглядит на разных устройствах

Адаптивный дизайн, когда ваш сайт подстраивается под разные разрешения. Важно понимать, что у разных устройствах разрешение разное и надо стараться, чтобы на всех устройствах ваш сайт отображался корректно и удобно. Для этого есть 2 принципа, которых нужно придерживаться при создании адаптивного дизайна:
Принцип 1. Сначала мобильные
Принцип 2. Адаптивный контент

Как понять адаптивный сайт или нет

Мой блог, который ты сейчас читаешь, адаптивный. Чтобы проверить адаптивный сайт или нет, бери за край браузера и сжимай по горизонтали. Адаптивный сайт должен начать подстраиваться под новый размер браузера, а у обычного сайта, появится горизонтальная прокрутка. В определенный момент возникает ситуация, когда левое меню моего блога схлопывается и его не видно. Оно переходит на верх.

адаптивный дизайн сайта

Блог перестроился версии для ПК на версию для планшета при сжатии браузера

Такие моменты перехода называют контрольной точкой или точкой перегиба. Если сжимать дальше (минимальный размер 460 пикселей), то можно увидеть как сайт будет отображаться на айфоне. Есть несколько точек перегиба, в которых меняется дизайн. Таким простым способом можно определить адаптивность сайта. Адаптивный дизайн — когда вы делаете не одну версию сайта, которая отображается везде одинаково, а несколько версий под разные устройства.

По принципу «сначала мобильные» нужно начинать с разработки версии для мобильного устройства (например, айфона), то есть с размер макета 460 х 960. Второй размер для планшета 768×1024, третий — разрешения ноутбука 1280×802. Последний контрольный размер 1600×992. Под эти разрешения нам нужно разрабатывать наши дизайн-макеты.

Создание адаптивного дизайна сайта в Фотошоп

Проектирование сайта для настольного ПК. Создаешь макет как обычно с использованием модульной сетки и 12 колонок.

адаптивный дизайн сайта для настольного компьютера и ноутбука

Макет адаптивный дизайн сайта для ПК и ноутбука

Далее создаете новый файл с разрешением 768 х 1024 рх. Перестраиваешь макет сайта так, чтобы его было удобно смотреть в таком формате. Например, вынеси меню наверх. Следует учесть, что на планшетах люди будут работать не мышкой и стрелочками, а нажимать пальцами. Поэтому стоит сделать кнопки крупнее и не делать ссылки близко друг к другу.

Обычным меню сайта уже будет не очень удобно пользоваться, поэтому лучше сделать раскрывающееся. Размер карточек товара не стоит изменять в размерах, можно уменьшить их количество в строке. Здесь в сетке уже не 12 колонок, а 9.

Адаптивный дизайн сайта для планшета

Адаптивный дизайн сайта для планшета

На разрешении для телефона ваш сайт должен стать еще проще. Остается логотип, корзина, меню, подписка и дальше идут товары с кнопкой «загрузить больше», чтобы не тратить деньги и время клиента на загрузку, возможно, ненужных ему страниц. Здесь остается двухколоночная верстка.

Адаптивный дизайн сайта для планшета

Адаптивный дизайн сайта для планшета

Поскольку это интернет-магазин, то проектирование удобнее начинать с компьютерной версии и постепенно сжимать до мобильной версии. Если вам надо сделать лендинг или сайт компании, то стоит начинать с компании.
Раньше люди отдельно создавали 2 версии сайтов: для компьютера и для телефона. Адаптивный дизайн позволяет делать 1 сайт, но с разрешениями для различных устройств.

Адаптивный контент

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

Как разместить контекстную рекламу на сайт

Допустим, у вас есть в интернет-магазине карточка товара для наушников. В версии для компьютера вы ставите фотографию, пишете название, цену, кнопку купить и большую таблицу с техническими характеристиками. Для мобильной версии сайта в той же карточке товара важно оставить название, фото, цену и кнопку купить.

Характеристики, желательно, прятать в специальную вкладку, чтобы она дополнительно загружалась, при желании клиента. С телефона вся остальная информация избыточна и её тяжело читать, да и не заходят с мобильного для того, чтобы информацию читать. Если же человеку это действительно нужно прочитать, он сможет это подгрузить. Это принцип адаптивного контента.

В мобильных версиях старайтесь использовать минимум контента. Исходи из принципа «было бы мне удобно?». Представляй себя человеком, который заходит на сайт в метро, одной рукой держится за поручень, другой открывает твой сайт. Было бы тебе удобно перемещаться по сайту и искать нужную информацию?!

Сервисы для тестирования адаптивного дизайна

Есть простейший сервис для презентации проектов заказчику. Вбиваешь адрес сайта и он показывает как сайт отображается на различных устройствах. Этот сервис хорошо помогает при презентации проекта, чтобы не читать заказчику лекцию про адаптивность, а просто показать на деле. Более продвинутый сервис, в нем крупнее все видно, он загрузит ваш сайт на разные устройства, можно посмотреть даже как он будет выглядеть в горизонтальном положении телефона или планшета.
Такие сервисы используются для готовых и сверстанных сайтов.

Дополнительная информация по адаптивному дизайну

Если понравилась статья и увлекла тема адаптивности дизайна сайтов, советую прочитать книги: «Сначала мобильные» и «отзывчивый веб-дизайн». Суть этих книг я кратко рассказал, но почитать советую, читаются легко и быстро. Можешь еще ознакомиться со статьей про тестирование адаптивного дизайна, есть примеры хороших сервисов для тестирования.

Не теряй деньги клиента из-за неудобного сайта, создавай адаптивные сайты и зарабатывай больше

Источник

Как сделать макет сайта на телефоне

*

Частная коллекция качественных материалов для тех, кто делает сайты

  • Creativo.one2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
    »
  • Уроки»
  • Скрипты для увеличения функциональности сайта

В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.

Эффекты блочного раскрытия

Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

15 полезных .htaccess сниппета для сайта на WordPress

Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

45+ бесплатных материалов для веб дизайнеров за август 2016

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Источник
Рейтинг
Загрузка ...