Компьютерная версия сайта как называется

Обновлено: 07.07.2024

Е-mail, EML, емеля, мыло
Это модное слово означает просто электронную почту.

FTP (File Transfer Protocol)
FTP — File Transfer Protocol — одна из технологий для передачи и приема файлов в интернете. Обычно он используется для организации файловых хранилищ в интернете, коих существует великое множество. В них хранится множество программ (софта), драйверов, музыки, видеофильмов.

GIF (Graphics Interchange Format)
Это формат хранения изображений, как и JPEG. В GIF (гифах) можно хранить анимационные картинки.

IMHO (In My Humble Opinion — по моему скромному мнению)
Это слово обычно добавляют если не очень уверены в своих словах или хотят выразить свою точку зрения:
IMHO завтра будет хорошая погода.

IRC (Internet Relay Chat)
Программа для ведения чатов. Обладает огромным количеством разных фич. Любая «комната для разговоров» в этой программе называется IRC каналом. Заядлые интернетчики очень любят ею пользоваться. Также известна под именем Ирка.

ISP — Internet Service Provider (см. провайдер)

JPEG — Joint Photographic Expert Group
Формат хранения картинок. В таком формате обычно хранят фотографии. В нём использованы специальные алгоритмы сжатия фотографий с потерями. сохраняется только часть информации. При этом размер файлов уменьшается, а изображение незаметно изменяется. В этом формате хранятся фотографии в интернет-галереях и музеях.

LMD — Lamers Must Die
Так обычно пишут ярые ненавистники ламеров.

MPEG — Motion Picture Expert Group
Формат видеороликов и фильмов. Именно в таком формате хранятся фильмы на видеодисках (VideoCD и DVD). В нём же обычно видеоролики распространяются по Сети.

On-Line
На линии, на связи. Это слово означает подключённость к Сети и работу с ней в реальном времени.

Ping
Эта программа в чём-то схожа с игрой в пинг-понг. Она посылает на какой-то компьютер в интернете немного данных, а этот компьютер должен послать этот «мячик» назад. Таким образом, можно проверять наличие связи с удалённым компьютером, а также скорость передачи данных на удалённый компьютер.

RTFM (Read This Funny (или Fucking) Manual — Читайте документацию!)
Обычно так говорят либо ленивые люди, посылая кого-то почитать книги, либо не желая отвечать на частый или глупый вопрос.

Suxx
Существует множество легенд о происхождении (этимологии) этого слова. Означает оно «плохо». Например: «Плохая погода» — «Погода suxx» или «suxx-ная погода». Произносить это слово можно и как «сакс» и «сукс», а некоторые люди говорят «суксь». (Надо отметить, что слово «сакс» некоторые люди могут понять как «саксофон»). Писать это слово можно и с одной буквой «x» (Наверно хотят, чтобы получалось слово из трёх букв :-). Вообще, считается что с помощью слов «Suxx», «Рулез», «MustDie», «Бага» и «Фича» можно выразить любое, сколь угодное сложное чувство :)

Telnet
Эта программа позволяет удалённо работать на другом компьютере. В основном, используется всякими сисадминами для удалённого администрирования. Простым смертным она вряд ли понадобится.

URL (Universe Resource Locator — универсальный адрес ресурса)
Вообще-то это набор цифр, компьютеры иначе не понимают. Понятное дело что, писать цифры в адресе веб-страницы или адресе электронной почты не очень приятно и запомнить сложно. Поэтому придумали универсальную систему для указания адреса любого ресурса словами. Структура URL`а достаточно информативна.

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

WWW World Wide Web — всемирная паутина
Так называют «всемирную паутину» сайтов связанных друг с другом ссылками (иногда говорят «гиперссылок»). На каждом сайте есть ссылки на другие сайты. В этих ссылках можно легко заблудиться, а все вместе они (ссылки) образуют огромную (всемирную) паутину…

Windows, Винда, Форточки
MS Windows — это операционная система — самая главная программа на компьютере. Windows — с английского переводится окна, отсюда и название «форточки».

Баг (Англ. Bug — жучок).
Баг — глюк, ошибка. Отсюда дебагер (debuger) — программа для поиска ошибок в программах, жучков, забравшихся в программу.

Баннер
Самый популярный вид интернет-рекламы. Баннер это простая картинка размещаемая на сайтах.

Броузер
Программа просмотра сайтов. Самой популярной и наиболее функциональный (а так же не менее глючной) является Internet Explorer, созданный корпорацией MicroSoft. Так же можно упомянуть менее популярные Netscape, Mozilla, Opera.

Вася Пупкин
Легендарнейшая личность в Рунете. Обычно так представляются, когда не хотят разглашать своего имени. (Видел я его на одной выставке :).

Веб-страница
Грубо говоря, это несколько текстов с картинками и ссылками на другие тексты. Сайт обычно состоит из нескольких частей (страниц).

Винт
Слово «винт» произошло от слова «винчестер», которое в свою очередь обозначает жесткий диск у компьютера.

Дайлап (Dial-Up)
«Dial-Up» обозначает соединение с провайдером по обычной телефонной линии с помощью модема.

ИК — Инфракрасный
ИТ — Информационные технологии.
ОС — Операционная система
ПК — Персональный компьютер
ПО — Программное обеспечение.

Интернет-Червь
Компьютерный вирус распространяющийся через интернет. Вообще компьютерный вирус это небольшая программка, которая сама себя может копировать, таким образом размножаясь. Интернет-черви для размножения по интернету используют электронную почту, пристыковывая себя к письмам. Это самый быстрораспространяющийся вид вирусов. За один день некоторые поражали десятки миллионов компьютеров, принося триллионные убытки (вместе с размножением эти милые создания любят удалять важные файлы). Надо отметить что в пандемиях этих вирусов виновны не только их авторы, но и авторы почтовых программ, благодаря ошибкам в которых вирусы и распространяются. Наиболее известные (и вредные :) из вирусов — это «Melissa» и «I Love You». А из почтовых программ — MS OutLook (иногда «нежно» называемый «аутглюком»). Вирус «I Love You» называется так, потому что в теме письма, в которых он распространяется это же и написано. Дело в том, что вирус запускается при открытии письма. Тут срабатывает тот психологический момент, что тот, кто получит это письмо тут же его откроет (интересно всё-таки что это за письмо с такой темой). Естественно такие письма прочитываются в первую очередь, поэтому этот вирус распространялся с гигантской скоростью.

Качалка.
Программа для скачивания, то есть переписывания файлов из интернета.
Такие программы обладают очень полезными специфическими функциями (фичами ;-). Могут скачивать файлы по частям и имеют множество других полезнейших функций.

Кликать.
Кликать — нажимать на кнопки мыши. Обычно мышкой кликают на кнопки, ссылки или выбирают опции.

Контент (content — содержание).
Это довольно-таки абстрактное понятие описывает некоторую полезную информацию. Например, говорят «контент рунета» или «наполненность контента уанета». Интернет-журналисты (есть уже и такая специальность) называют контентом тексты своих статей.

Лаг
Это понятие означает задержку передачи данных в сети (например, из-за плохого качества связи). Лаги обычно заметны во время игр по сети, потому как доставляют в эти моменты мало удовольствия.

Ламер (англ. lamer — хромой)
По одному из определений это человек, который думает, что всё знает. При этом ламеры очень ярко пытаются это продемонстрировать, принося при этом некоторые неудобства окружающим. В отличие от чайника, который неопытный, но еще научится, ламер — хромой навсегда.

Линк (Link — связь)
Линком обычно называют ссылку на веб-страницу.

Локалка
Так обычно ласково называют локальную сеть компьютеров (LAN — Local Area Network). Локальные сети обычно организовывают в интернет клубах, школах, университетах и жилых домах. По локальной сети можно играть в игры и коллективно подключаться к Интернету, используя один канал на группу людей.

Метр — МегаБайт.
1 Мегабайт = 1048576 байт

Модератор
Модератор обычно присутствует в чатах и конференциях. Он следит за порядком, отключает нарушителей. Работа модератора называется модерированием.

Офф-лайн (Off-Line. Дословно — выключенная линия)
Это означает отключённость компьютера от Сети.

Поисковые системы
Поисковые системы ищут сайты удовлетворяющие запросу пользователя. Такой запрос обычно представляет собой несколько ключевых слов. Такие системы не очень умны и надо быть осторожным при составлении запроса. Они сами обследуют интернет, собирая информацию про разные сайты. По статистике 30% посетителей сайта узнают его адрес благодаря поисковым системам. У самих поисковых систем очень большая посещаемость, поэтому на них очень дорого и выгодно размещают рекламу.

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

Рулёз, РУлез, РулЕз.
Это слово обозначает «очень хорошо». Например «рулёзная погода» или «рулёзное настроение» или «пиво — рулез».

Рунет
Так называют русскоязычную часть интернета.

Сабж
«Сабж» происходит от слова «subject» — тема. У каждого электронного письма есть специальная графа «тема». Если в ящике много писем, то темы можно просматривать не чиатя самих писем. Похоже, как мы просматриваем конверты не вскрывая, если на каждом конверте кроме адреса еще и написано, о чем письмо. Иногда говорят «субж» или даже «субдж». Слово сабж имеет интересное применение.

Сайт
Сайт это синоним слова «веб-страница».

Сервер (англ. to serve — обслуживать)
На сленге сервер — «сервак». Сервер это мощный компьютер обслуживающий какую-то сеть компьютеров. Сервер можно сравнить с почтамтом. Компьютеры обмениваются данными через сервер. Сервер может хранить сайты, ftp-архивы, ящики для электронной почтовой почты, а пользователи получать эти данные от сервера. Серверы обычно обслуживаются сисадминами. От них зависит, насколько сервер стабильно работает и защищён от взломов хакерами.

Серфер, Интернет-серфер.
Интернет-серфер — это человек, который «путешествует» по ссылкам на сайтах. Зайдёт на один сайт, посмотрит, найдёт на нём ссылку на другой сайт и переходит на него.

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

Сисадмин (СИСтемный АДМИНистратор)
Сисадмин, или просто админ, это человек управляющий, настраивающий, создающий обычно локальную сеть. У любого сервера есть сисадмин. В любом компьютерном классе или интернет-клубе должен быть сисадмин. Если сисадмин бездельничает, значит он хороший сисдамин, т.к. подвластная ему сеть работает без перебоев. Сисадмин должен следить за безопасности своей сети. В программах часто бывают ошибки, позволяющие злоумышленникам незаконно получать информацию. Сисадмины должны следить за поиском новых ошибок (т.е. недавно найденных) на специальных сайтах и вовремя их устранять.

Скрипт (Script — сценарий)
Скрипт — это небольшая программа. На веб-страничках скрипты используются для создания каких-нибудь специальных эфектов. Например, изменение картинки при наведении на неё мыши.

Смайлик (от англ. smile — улыбка)
Смайлик это такая забавная рожица передающая мимику. Например если написать двоеточие, дефис и скобку, то получится смайлик. :-). Смайлики нужно мысленно поворачивать на 90 градусов по часовой стрелке. Иногда, когда не совсем понятно пишет ли человек серъёзно или шутит, смайлики очень помогают разобраться.

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

Счётчик
Для определения количества посетителей сайта его создатели размещают на нём ссылку на специальную программу — счётчик.

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

Фича (от английского Feature)
Фича — это некоторая особенность, функция чего-либо. Например, бывают мыши с колёсиком для прокрутки и без. Так вот колёсико — фича. Бывают мышки беспроводные. Это тоже фича. Это слово чаще всего используется для описания особенностей программ, хотя настоящие интернетчики видят фичи во всех облатсях человеческой деятельности. Да и баги тоже.

Флейм (flame — пламя, пылание)
Флейм в интернете — это сильная ругань. Соответственно «флеймить» означает — ругаться. Часто флейм поднимается по темам связанным с выбором операционной системы или языка программирования. Часто доходит до взаимной нецензурной брани. Часто слово «флейм» употребляется для обозначения места в форумах, где на все темы подряд, без модерирования.

Флэш или Флаш (Flash)
a) MacroMedia Flash. Это технология передачи изображений, анимации, интерактивных картинок.
б) Flash-память. Такая память хранит данные при выключенном питании, потребляя мало энергии. Обычно используется в цифровых фотоаппаратах, мобильных компьютерах и цифровых музыкальных плеерах.

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

Чайник
Человек плохо разбирающийся в компьютерах. Есть целые серии книг «для чайников», из чего явственно, что чайники склонны к развитию и обучению, Следующая ступень которого — юзер. Не стоит путать чайинков ламеров. Чайники — миролюбивые создания.

Чат (англ. chat — болтовня)
Собственно это болтовня и есть. Но только по интернету. Такие разговоры обычно не очень содержательны (в основном «Привет», «Пока», «Как дела?»). Но, с другой стороны, одновременно в реальном времени могут общаться люди, находящиеся в разных точках Земли. Существуют разные технические способы сетевых разговоров, такие как Web-чаты, IRC или ICQ. Бывают и голосовые чаты.

Юзер, Юзверь (user — пользователь)
Юзер — это средний компьютерный пользователь, умеющий запускать игры, работать в интернете и в офисных программах (как минимум в текстовом редакторе). Юзеры отличаются от программистов тем, что не умеют программировать.

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Сергей Ломакин Редакция «Текстерры»

Мобильная аудитория в Рунете обогнала десктопную еще в 2018 году, и с тех пор продолжает расти. Поэтому оптимизация сайта под мобильные устройства уже стала необходимостью. Каким образом это лучше сделать – с помощью адаптивной верстки или с помощью отдельной мобильной версии сайта – разбираем в сегодняшней статье.

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

Объем мобильного трафика в мире колоссален и с каждым днем продолжает увеличиваться.

Прогноз Cisco Systems по росту глобального мобильного трафика до 2022 года (данные 2020 года)

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

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

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

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

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

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

Что тут важно? Во-первых, сайт удобен для посетителя при открытии с любого устройства. Во-вторых, все элементы одинаково отображаются на экранах всех устройств. Мелкие элементы и шрифты остаются читаемыми.

Зачем нужен адаптивный дизайн и адаптивная верстка

Устройства, с которых можно выходить в интернет, не ограничиваются десктопами и смартфонами. Необходимо учитывать, как сайт отображается и на других видах устройств, например, планшетах и умных телевизорах. Поправка на эти устройства появилась и во многих веб-аналитиках, в частности в Google Analytics и «Яндекс.Метрике»:

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

Вот интересная статистика по числу планшетных пользователей с 2014 года по 2021. Доля планшетных устройств не сокращается, а увеличивается от года к году, пусть и довольно медленно:

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Именно поэтому веб-разработчики стремятся к тому, чтобы контент сайтов корректно отображался на экранах самых разных типов устройств.

Сложности адаптивной разработки

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

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

Удобство / юзабилити для мобильных устройств / адаптивность – это отдельные факторы ранжирования, которые учитываются Google и «Яндекс». К ним можно отнести сразу несколько показателей:

  1. скорость загрузки страниц на мобильных устройствах;
  2. удобство навигации;
  3. отсутствие слишком мелких элементов, которые нечитаемы с экранов мобильных устройств;
  4. размер шрифт а;
  5. отсутствие элемент ов за пределами экрана.

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

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

Проверить адаптивность сайта можно прямо в браузере – без всяких дополнительных сервисов. Если вы используете Mozilla Firefox, достаточно воспользоваться сочетанием горячих клавиш Ctrl + Shift + M:

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Проверить адаптивность сайта в Google Chrome можно, воспользовавшись сочетанием горячих клавиш Ctrl + Shift + I или просто нажав клавишу F12, затем – кликнуть по иконке эмуляции устройств (Toggle Device Toolbar):

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Кроме этого, проверить адаптивность сайта можно при помощи инструмента «Проверка оптимизации для мобильных» от Google:

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Какой экран учитывать изначально

Вопрос интересный. Есть два основных подхода.

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

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

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

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Раньше наиболее распространенным способом разработки был второй вариант. Сегодня более актуален первый способ – эта концепция получила название Mobile First. Этот способ разработки является более логичным и простым изначально.

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

Адаптивный дизайн подразумевает соблюдение нескольких основных «законов». Поговорим о самых главных из них подробнее.

Размеры макетов. Брейкпоинты

При создании адаптивного дизайна разработчик ориентируется не на конкретные значения, а на так называемые брейкпоинты. Брейкпоинты указывают конкретное разрешение экрана, при котором должно произойти изменение дизайна страницы.

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

«Каноничные» значения для адаптивного дизайна следующие:

  • смартфоны: от 320 пикселей / 480 / выше;
  • экран монитора компьютера: от 1280 пикселей и выше;
  • планшеты: от 768 пикселей и выше;
  • нетбуки: 1024 пикселей.

Относительность координат, размеров и масштабов

Большое разнообразие экранов и типов устройств не позволяет использовать какие-либо точные единицы измерения. Когда мы говорим об адаптивном дизайне, то нужно понимать, что в качестве таких единиц используются относительные значение. Потому что на каждом экране существует своя собственная плотность пикселей, которая, естественно, соотносится и с его размером. Так, разрешение 360 x 240 пикселей будет абсолютно по-разному выглядеть на экране планшета и телевизора. Именно поэтому адаптивный дизайн использует относительные значения. Например: координаты/размеры/масштабы блока определяются по отношению к верхней границе или по отношению к любому другому элементу.

Вложенность

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

Поточность

Имеется в виду отсутствие сдвигов блоков. При приеме сайта обратите внимание: если блоки смещаются, то просмотр страницы становится настоящим испытанием.

Графические форматы

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

Шрифты

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

Мобильная версия: что учесть

Адаптивная верстка и мобильная версия – в чем разница

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

Мобильная версия разрабатывается под размер экрана/разрешение только определенного мобильного устройства, но на практике она должна красиво выводиться на большинство экранов

Технические требования: чеклист мобильной версии

Разработка мобильной версии ставит своей целью решить все проблемы, возникающие у мобильной аудитории сайта:

  1. создать условия для удобного просмотра страниц;
  2. сделать комфортной навигацию и взаимодействие с элементами сайта;
  3. увеличить скорость загрузки страниц для мобильных устройств.

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

  1. Какое перенаправление теперь используется для создания редиректа на мобильную версию сайта? (должно использоваться 302-ое перенаправление)
  2. Открыта ли индексация каскадных таблиц (CSS) в системном файле robots?
  3. Активирована ли индексация JS?
  4. Задействован ли viewport? Этот метатег используется для указания области экрана, которая видна без скролла страницы. Прописывается этот тег вместе с требуемыми параметрами (в Head-разделе).

При разработке мобильной версии ни в каком виде не должны использоваться Applet, Microsoft Silverlight, Flash.

Юзабилити: чек-лист мобильной версии

  • Нежелательны поп-апы и другие виды всплывающих окон – они очень раздражают мобильную аудиторию. Кроме этого, всплывающие окна часто закрывают контент и не дают посетителю взаимодействовать с интерактивными элементами страницы.
  • Ф ормы должны быть максимально короткими. Мобильный посетитель гораздо шустрее, чем традиционный десктопный. Именно поэтому нежелательно использовать длинные формы, которые нужно заполнять для оформления заказа. Вот почти идеальный вариант формы заказа для нового покупателя:

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

Мы видим, что здесь не нужно заполнять ФИО, город, адрес, e-mail – достаточно авторизоваться по номеру телефона и указать код из SMS. Если ваша форма заказа для нового покупателя содержит очень много полей, лучше сократить их до минимума, либо разбить заполнение формы на несколько экранов.

  • С кроллинг и увеличение страницы не должны вызывать затруднений. Мобильные посетители из-за небольшого размера экрана часто хотят увеличить текст на странице или какой-либо элемент. Нужно сделать это действие максимально удобным.
  • Н омер телефона должен быть активнымэлементом страницы. Другими словами, при нажатии по нему у посетителя сразу должен открыться интерфейс для звонков (с уже набранным номером). Мобильный посетитель не любит ждать и уж точно не будет самостоятельно переписывать цифры номера телефона со страницы сайта. Скорее всего, он просто закроет страницу и уйдет на другой сайт, где при тапе на контакт откроется телефон.
  • И спользуйте автозаполнение – оно удобно для тех, кто делает заказ повторно. Не придется заново заполнять данные форм.
  • М еню должно быть доступно с любой страницысайта .
  • К нопка домой /главная должна быть доступна с любой страницы сайта. Можно сделать ее в виде логотипа сайта, в шапке. В роли кнопки «Домой» может также выступать название сайта:

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

  • Шрифт не должен быть очень мелким. Минимальный размер символов – 12px: для чтения такого текста все еще придется напрячь глаза и сделать определенное зрительное усилие. Чтобы текст был читаемым и комфортным для глаз, лучше использовать размер от 14 до 16px.
  • Р асстояние между интерактивными элементами должно составлять минимум 28px (иначе по ним будет сложно нажимать на небольших экранах, кроме этого элементы могут накладываться друг на друга).
  • Размер кнопок: кнопки позвонить/заказать/узнать/купить должны быть достаточно крупными. Не делайте их слишком маленькими, иначе по ним будет сложно попасть.

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

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

  • Достоинства мобильной версии – быстро грузится, удобная и красивая.
  • Недостатки мобильной версии – красиво выглядит далеко не на всех экранах мобильных устройств. Например, на планшетах мобильная версия может отображаться весьма хаотично (автоматически растягиваясь и разнося все элементы друг от друга на большое расстояние). Еще один минус мобильной версии – на ней, как правило, имеется только основной функционал и отсутствует функциональное разнообразие полной версии.
  • Плюсы адаптива – он подешевле (как правило), контент остается более-менее читаемым на экранах любых размеров.

Со стоимостью вопрос неоднозначный. Как правило, разработать мобильную версию – дешевле, но поддерживать ее – дороже: фактически это второй сайт, который тоже нужно продвигать, поддерживать и на котором нужно устранять ошибки. Разработать адаптив, наоборот, дороже, но поддерживать дешевле. О том, какой вариант будет оптимальным для вашего сайта, лучше проконсультироваться со специалистами агентства или студии веб-разработки, куда вы обратились.

  • Минусы адаптива – если страниц на сайте много и сайт тяжелый (неоптимизированный), то адаптив будет тормозить.

Что выбрать? Если сайт «тяжелый» (с точки зрения оптимизации, контента, функционала), то можно разрабатывать полноценную мобильную версию. Если сайт небольшой и простой, хватит и возможностей адаптивной верстки.

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

Если на это смотреть как на сайт для продвижения, то 100 % стоит выбирать адаптивную верстку:

  1. У вас единые стили и настройки, что упрощает отчасти исправление ошибок.
  2. Снижает затраты на обслуживание.
  3. Роботы любят единые версии сайта, понятные пользователю на разных разрешениях. Google, конечно, может и лучше отреагировать на мобильную версию, если она будет точиться под Mobile First. В остальных случаях – адаптив лучше.

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

Аппаратные сервера для хранения веб-сайтов называются веб-серверами. Сама услуга хранения называется веб-хостингом. Раньше каждый сайт хранился на своём собственном сервере, но с ростом Интернета технологическим улучшением серверов на одном компьютере стало возможно размещение множества сайтов (виртуальный хостинг). Сейчас сервера для хранения только одного сайта называются выделенными (англ. dedicated ).

Содержание

История

В настоящее время Тим Бернерс-Ли возглавляет основанный им Консорциум Всемирной паутины (World Wide Web Consortium), который занимается разработкой и внедрением стандартов интернета.

Классификация веб-сайтов

По доступности сервисов:

По природе содержимого:

По физическому расположению:

По схеме представления информации, её объёму и категории решаемых задач можно выделить следующие типы веб-ресурсов:

Устройство

Создание сайтов

Разработка дизайна

Вёрстка

Программирование

Безопасность

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

Наиболее распространённые последствия атаки на сайт:

  • несанкционированное изменение злоумышленниками (см.: дефейсинг, хакеры)
  • подделка сайта (дизайн и содержимое сайта может быть скопировано и у пользователя такого сайта могут украсть пароли)

Наиболее популярными мотивами для взлома популярных ресурсов, таких как почтовые или социальные сети, являются [3] :

  • ревность
  • выгода: злоумышленник рассылает со взломанного аккаунта спам
  • воровство с целью возврата владельцу за деньги

Список сайтов по популярности

Популярность сайтов определяется, как правило, по числу посетителей. Ниже представлены списки по данным компании Alexa Internet.

Не так уж и давно наличие адаптивного или мобильного сайта стало не трендом, а реальной необходимостью — трафик с устройств продолжает расти, а пользователи уже начинают отказываться от больших компьютеров в пользу смартфонов и планшетов. Для создания таких сайтов сейчас, в основном, используются три метода: адаптивная верстка, разработка отдельной мобильной версии и RESS. Johan Johansson опубликовал сравнение этих методов, перевод которого мы и представляем вашему вниманию. Под катом много текста и картинок.

Кажется, споры насчет технологий создания мобильных сайтов в ближайшее время не утихнут. В этих вопросах Google, например, придерживается разработки адаптивного веб-дизайна, в то время как Якоб Нильсен, известный консультант по юзабилити, выступает за создание отдельных мобильных сайтов.
Третий вариант, который уже становится популярным — когда веб-сервер генерирует соответствующие HTML и CSS в зависимости от устройства по параметрам, получаемым из URL.

В этой статье мы рассмотрим каждый из этих методов и приведем реальные примеры.

Для тестирования был использован iPhone 4 с IOS 5,0.

Адаптивный веб-дизайн

Адаптивный веб-дизайн обычно использует CSS3 Media Queries для настройки макета веб-страницы, основываясь на размере области просмотра. Можно использовать один и тот же HTML для отображения различных макетов веб-страницы для настольных компьютеров, планшетов, мобильных устройств, телевизоров и т.д.

Преимущества
  • Сохранность содержимого: Ваш сайт сохраняет контент и HTML разметку, независимо от используемого устройства. Этот подход будет приобретать все большее значение, поскольку все больше людей используют смартфоны в качестве основого средства доступа к Сети.
  • Один URL для веб-страниц: Это облегчает процесс расшаривания контента и избавляет от ненужных редиректов, чтобы получить лучший вид страниц для разных устройств (в отличие от отдельных мобильных сайтов).
Недостатки
  • Материалы не будут полностью оптимизированы для мобильных устройств: Если вы не используете подход, при котором в первую очередь проектируется страница под мобильные, ваш сайт будет содержать ту же информацию, что и его десктопный брат. Сравните это с отдельным мобильным сайтом, где вы могли бы потенциально адаптировать содержание веб-страниц только для мобильных пользователей.
  • Медленная работа: согласно данным за январь’13, средняя веб-страница сегодня весит около 1,3 Мб. Теоретически такого размера можно избежать при использовании адаптивного дизайна, но на практике 86% “резиновых сайтов” весят именно столько, а то и больше.
  • Может быть трудно перемещаться по сайту: Задачи мобильных пользователей как правило отличаются от обычных. Кроме того, они могут быть более привычны к использованию мобильной версии интерфейса и если вы не продумаете структуру навигации для каждого устройства, могут быть проблемы с юзабилити.

Примеры:

Starbucks

image

Сайт Starbucks является отличным примером, демонстрирующим плюсы и минусы адаптивного веб-дизайна. Весь их контент доступен на мобильных устройствах, каждая страница использует один и тот же URL, нет никакого перенаправления.
К сожалению, их сайт является тяжелым для загрузки (около 15 секунд на 3G-смартфоне), и необходимо много прокручивать, чтобы прочесть всю страницу.

Всемирный фонд дикой природы

image

Сайт Всемирного фонда дикой природы является хорошим примером реализации адаптивного веб-дизайна. Навигация оптимизирована для мобильных задач.
Тем не менее, время загрузки на 3G-смартфоне оставляет желать лучшего (это занимает около 7 секунд). Кроме того, некоторые внутренние страницы (например, их форма подтверждения ) не были оптимизированы для мобильных устройств и остались неудобными для использования на мобильном устройстве.

The Boston Globe

image

Сайт Boston Globe — возможно, один из лучших масштабных проектов с адаптивным дизайном. Сайт использует “резиновые” изображения и оптимизирует JavaScript, чтобы он не отразился на производительности на мобильных устройствах.

Отдельный мобильный сайт

Преимущества:
  • Проще вносить изменения в мобильные и обычные сайты: Изменения могут касаться только мобильной версии или только обычной версии.
  • Быстрое время загрузки: Так как вы разрабатываете версию только для мобильных сайтов, вы можете ее упростить и оптимизировать специально для мобильных устройств.
  • Легче ориентироваться: структура навигации и контента продуманы для задач, выполняемых мобильными пользователями.
Недостатки:

Примеры выделенных мобильных сайтов

Walmart

Amazon

RESS: Вывод разных HTML и CSS на одном URL

Этот метод создания мобильных сайтов использует программирования на стороне сервера, чтобы создать CSS и HTML для различных устройств. То есть мобильные пользователи получают один набор кода, в то время как пользователям десктопных компьютеров выводится другой набор кода.

Преимущества:
  • Легче ориентироваться: структура навигации может быть настроена для различных задач, выполняемых с мобильных и настольных компьютеров.
  • Меньше элементов на странице: Вместо того, чтобы создавать скрытые для мобильных устройств элементы страницы, они могут быть удалены из HTML или CSS. Это позволит уменьшить объем загружаемых данных и ускорить время загрузки.
  • Быстрое время загрузки: Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве.
Недостатки:
  • Требуются дополнительные ресурсы сервера: Динамическое создание HTML увеличит нагрузку на сервер.
  • Требуются определение устройств: мобильные пользователи должны быть как-то вычислены, а технология определения устройств пока недостаточно надежна.

Примеры RESS

image

image


Как и в CNN, для мобильной версии eHow настроены HTML и CSS. Навигация верхнего уровня одинаковая для обоих сайтов, делается акцент на поиск и семь основных рубрик.

SlideShare

image


Мобильная и настольная версии SlideShare совершенно разные. Мобильная версия использует адаптивный веб-дизайн, в то время как настольная — нет.Каждый сайт использует разный HTML и CSS. Например, в мобильной версии значительно меньше присутствует JavaScript. Каждый сайт также использует различные структуры навигации.

Резюме

Теоретически, адаптивный веб-дизайн является лучшим решением. Но на практике большинство таких сайтов реализованы неправильно и приводят к увеличению времени загрузки.
Мои тесты показывают, что лучшее время загрузки — у мобильных сайтов, но есть значительные недостатки в такой реализации задачи.
По моему мнению, лучше всего использовать комбинацию из адаптивного веб-дизайна и RESS. В этом случае мы получаем все плюсы “резиновой верстки” и решаем две больших проблемы: использования множества файлов и медленную загрузку.


Дмитрий Васильев, NetCat: “Для специалистов — дизайнеров, проектировщиков, верстальщиков — адаптивный сайт это куда более интересная задача, чем традиционная связка сайтов «широкоформатный-мобильный». Но недостатки адаптивных сайтов в статье описаны довольно подробно. Я бы еще добавил сложность подготовки контента после запуска сайта. Представьте: секретарю ставится задача в раздел «О компании» поставить большую фотку директора и таблицу с важными вехами в истории развития. Разумеется, она не сможет подготовить адаптивный контент, даже если захочет. Правильный подход — передать задачу профессионалу, но тем самым мы повышаем стоимость владения сайтом для пользователя.

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

Что касается RESS, то это интересный подход, но он не снимает всех проблем, связанных с адаптивной версткой. К тому же, часто пользователю смартфона лучше предложить выбор, смотреть ему обычный сайт или мобильный, потому что сценарии использования веба на телефонах могут быть разные. Например, я с телефона часто захожу на Афишу. Если я хочу выбрать фильм или кафе, я захожу на обычную версию сайта, если посмотреть, где идет нужный мне фильм или узнать какой-то адрес — на мобильную. И я доволен тем, что сайт не решает за меня, в каком виде смотреть контент, а дает выбор.

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

Какие методы вы используете для создания мобильных сайтов? Поделитесь своими мыслями на эту тему в комментариях или отметьте вариант опроса.

Читайте также: