Google рассказал как сделать "мобильными" статичные страницы
Сотрудница Google Зинеб Аит Бахаджи опубликовала ряд рекомендаций по оптимизации статичных страниц под мобильный поиск.
Это было сделано в ответ на просьбу одного из вебмастеров рассказать о том, что ему делать со своим сайтом, который целиком состоит из статичных страниц.
Вносить изменения в сайт понадобилось из-за скорого запуска фильтра mobilefriendly, который будет пессимизировать в мобильной выдаче сайты без мобильной оптимизации страниц.
Что касается рекомендаций, то первым делом Зинеб Аит Бахаджи рекомендует вебмастерам перенести сайт на какую-либо CMS. Таким образом можно избавиться от "ручной" работы и возможных ошибок.
Если такой возможности нет, то необходимо следовать этому набору рекомендаций:
– Используйте Chrome в режиме эмуляции устройств. Это позволит вам увидеть, то как ваш сайт будет выглядеть на экранах разного размера.
– Настройте тег Viewport (Область просмотра). Он позволяет подгонять содержимое страницы под ширину дисплея на котором она просматривается. В противном случае, страница будет открываться на всех устройствах как на десктопных.
– Используйте файлы стилей (CSS) вместо тега "font" или других элементов html в коде страницы.
– Если страница выходит за область одного экрана, то вероятнее всего она содержит элементы с фиксированным размером. Поисковик рекомендует использовать элементы, которые могут адаптироваться под ширину экрана пользователей.
– Избавьтесь от фиксированных размеров элементов. Например, если ширина страницы указана в пикселях (600px), то следует изменить ее на проценты (например, 80%).
– Добавьте в CSS img { max-width:100% }. Это позволит масштабировать изображения под ширину экрана устройства на котором открыта страница.
– Избегайте тега <table> в верстке страницы. Использовать этот тег нужно только при верстке самих таблиц. Если <table> уже используется в верстке страницы, то преобразуйте их в div + CSS floats/inline блоки. Это позволит улучшить вид страницы.
– Избегайте таблиц шириной в 3-4 колонки. Они не умещаются на мобильные экраны. Если они уже на сайте есть, следует их уменьшить.
– Избавьтесь на от тега <pre>. Они могут расширять страницу.
- Для форматированных текстов используйте границы CSS, отступы и т.д.
- Для верстки таблиц используйте тег <table>. Верстать их нужно с учетом рекомендаций, указанных выше.
- Для шрифтов фиксированной ширины используйте CSS font-family:monospace.
- В других моментах, где нужно сохранить пробелы (например, компьютерный код), следует использовать <pre>, но добавить чтобы разрешить горизонтальную прокрутку.
– Добавьте в код DOCTYPE, чтобы облегчить работу пользователям со старыми браузерами. Например, Internet Explorer 8. Дело в том, что такие браузеры могут входить в "режим совместимости", что приведет к некорректному отображению страницы.
– Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах.
С таким подходом в мире должно быть ровно три интернет магазина: aliexpress, amazon и e-bay
И, кстати, совсем нет. Я пользуюсь несколькими:
- Али, для дешевой хрени за которой лень идти в магаз.
- Амазон, для качественных вещей типа обуви.
- Е-Бей не пользуюсь вообще.
- а так же с десято местничковых магазинов в Германии (игрушки), Швеции (ну это по работе), Финляндии (тоже игрушки, а так же гаджеты и канцелярия).
И у них у всех своя ниша, если не товаром - то способом доставки, оплаты, бонусами - но они отличаются.
И при этом я еще и в обычных магазинах покупаю, так как в них порой ДЕШЕВЛЕ чем в интернет магазинах, ибо мусора в виде 90% ГС нет, и цены не убиты. Свернуть