ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Верстка

Тема в разделе "Другие вопросы по созданию сайта", создана пользователем Мефистофель, 3 фев 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Ребят, занимаюсь изучением верстки. Уже измучился, если честно. Все объекты на странице собрал, все хорошо. Начинаю масштабировать - все - труба дело. Подскажите самый хороший на ваш взгляд сервис, чтобы смотреть как отображается сайт на разных устройствах с разным разрешением. У меня на рабочей машинке 1024х600. За нетбуком сижу. Ну и ваши комментарии к расположению объектов/блоков не будут лишними.

    upload_2016-2-3_11-29-0.png

    МАСШТАБ +

    upload_2016-2-3_11-29-36.png

    сайт: madmark.ru
     
    Последнее редактирование модератором: 3 фев 2016
    #1
  2. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    @Мефистофель, ставишь плагин Web Developer для браузера Mozilla. Заходишь на свой сайт. Жмешь в панели Resize -> View Responsive Layouts

    upload_2016-2-3_10-48-52.png

    Результат:

    upload_2016-2-3_10-49-30.png upload_2016-2-3_10-49-55.png
    upload_2016-2-3_10-50-17.png
     
    #2
    Мефистофель нравится это.
  3. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Добавить в CSS:
    Код:
    .col-xs-12.text-center.abcen1 img {
        max-width: 100%;
    }
    Для авто масштабирования логотипа на малых разрешениях экранов.

    В результате будет так:
    upload_2016-2-3_10-57-38.png
     
    #3
    Мефистофель нравится это.
  4. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Для этих блоков:
    upload_2016-2-3_11-4-13.png

    через правило CSS - @media надо менять ширину блока на 100% в мобильном формате.
     
    #4
    Мефистофель нравится это.
  5. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Для всех изображений:
    upload_2016-2-3_11-6-17.png

    Задать:
    Код:
        max-width: 100%;
    
     
    #5
    Мефистофель нравится это.
  6. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Лого съехал:
    upload_2016-2-3_11-9-16.png

    Было так:
    Код:
    <address><br>
                        <div style="font-family: micra-bold; font-size: 30px; width: 260px;" class="bord">MADMARK</div>
                        Команда беспощадных маркетологов<br>
                        Новосибирск, ул. Ро...
    Сделать так:
    Код:
    <div class="col-md-5 col-md-push-1 address">
                        <address><br>
                        <div style="font-family: micra-bold; font-size: 30px; width: 260px;margin: 0 auto" class="bord">MADMARK</div>
                        Команда беспощадных маркетологов<br>
                        Новосибирск, ул. Ро...
                        </address>
                 
                     
                     
                    </div>
    Результат:
    upload_2016-2-3_11-11-33.png

    Можно через @media только для мобильных дописывать: margin: 0 auto;
     
    #6
  7. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    оффтоп: сайт стал намного быстрее грузиться, после переноса шрифтов на локал. Правда гугловские еще тянутся:
    Код:
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'/>
    
    Ошибка:
    Код:
    <!doctype html>
    <!-- FlatFy Theme - Andrea Galanti /-->
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
    <!--[if gt IE 9]><!-->  <!--<![endif]-->
    <html>
    <title>MADMARK
    </title>
    <head>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function() {
                try {
                    w.yaCounter35059935 = new Ya.Metrika({
                        id:35059935,
                        clickmap:true,
                        trackLinks:true,
                        accurateTrackBounce:true,
                        webvisor:true,
                        trackHash:true,
                        ecommerce:"dataLayer"
                    });
                } catch(e) { }
            });
    
            var n = d.getElementsByTagName("script")[0],
                s = d.createElement("script"),
                f = function () { n.parentNode.insertBefore(s, n); };
            s.type = "text/javascript";
            s.async = true;
            s.src = "https://mc.yandex.ru/metrika/watch.js";
    
            if (w.opera == "[object Opera]") {
                d.addEventListener("DOMContentLoaded", f, false);
            } else { f(); }
        })(document, window, "yandex_metrika_callbacks");
    </script>
    title должны быть внутри head

    Код:
    <!doctype html>
    <!-- FlatFy Theme - Andrea Galanti /-->
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
    <!--[if gt IE 9]><!-->  <!--<![endif]-->
    <html>
    <head>
    <title>MADMARK
    </title>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function() {
                try {
                    w.yaCounter35059935 = new Ya.Metrika({
                        id:35059935,
                        clickmap:true,
                        trackLinks:true,
                        accurateTrackBounce:true,
                        webvisor:true,
                        trackHash:true,
                        ecommerce:"dataLayer"
                    });
                } catch(e) { }
            });
    
            var n = d.getElementsByTagName("script")[0],
                s = d.createElement("script"),
                f = function () { n.parentNode.insertBefore(s, n); };
            s.type = "text/javascript";
            s.async = true;
            s.src = "https://mc.yandex.ru/metrika/watch.js";
    
            if (w.opera == "[object Opera]") {
                d.addEventListener("DOMContentLoaded", f, false);
            } else { f(); }
        })(document, window, "yandex_metrika_callbacks");
    </script>
     
    #7
  8. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Первое, чем займусь.

    По поводу лого: я просто коряво прописал сам.Создал класс бордер, где правый отступ поставил для того, чтобы рамка обрамляла не весь блок, а только текст (мэдмарк). Класс удалить и прописать границу иначе. Тогда лого не будет уплывать. Это второе, чем буду заниматься.

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

    Вложения:

    #8
  9. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Если ты про ошибку валидации с метрикой - то ее можно поставить перед закрывающим </body> (если внизу ставить). Или после открывающего <body> вверху - тогда ошибка должна устраниться.
     
    #9
  10. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    К сожалению на метрику в любом месте ругается.
     
    #10
  11. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Значит это у метрики код не валидный.
     
    #11
  12. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Ты был прав, это просто наличие блока <div> в коде.
     
    #12
  13. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Убил. Нет больше. Скорость загрузки изменилась?
     
    #13
  14. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    3.49 сек,
    upload_2016-2-3_19-45-14.png

    Субьективно да, быстрее стало.
     
    #14
  15. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Еще ошибки, подгружаются не существующие объекты:

    upload_2016-2-3_19-48-1.png

    Вот какую ошибку каждый такой объект выдаёт:

    upload_2016-2-3_19-49-0.png

    А тебе оно надо, чтбы твой сайт вытягивал 20-30 раз ошибку 404?

    Файлы либо отсутствуют либо нет доступа / разрешений.
    upload_2016-2-3_19-51-0.png

    Все эти ошибки - это лишние 2-3 сек загрузки сайта.
     
    Последнее редактирование: 3 фев 2016
    #15
  16. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Я уже нервничать начал. Перепроверил. Вот ФТП:

    upload_2016-2-4_19-22-39.png

    Здесь есть файл шрифта. Адрес правильный. Остается вариант, что нет прав. ТОлько как их дать-то? И кому?

    upload_2016-2-4_19-23-48.png
     
    #16
  17. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    upload_2016-2-4_19-30-57.png
     
    #17
  18. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Это все происки дьявола. Это зло. А зло надо искоренть. Изначально же кто-то эти шрифты прописал так? Я сейчас их просто удалю с сервера, но оставлю у себя в загашнике, чтобы потом выяснить проблему. Тему не закрываем.
     
    #18
  19. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    748
    Рейтинг:
    143
    Ответил, как сменить права здесь.

    А по существу смотри логи сервера и сразу все ясно будет.
     
    #19
  20. zenivlad

    zenivlad Веб-мастер

    Сообщения:
    35
    Рейтинг:
    29
    Род занятий:
    Студент третьего курса БГТУ ВОЕНМЕХ
    Откуда:
    Санкт-Петербург
    @Jonny уже упомянул о специальном плагине для браузера Mozilla. Но хотелось бы дополнить и для двух других популярных браузеров. На стационарнике у меня стоит Google Chrome, пользуюсь расширением Window resizer. После установки запускается сочетанием клавиш Ctrl+стрелка вниз. А вот на ноутбуке Opera почему-то быстрее работает. На нем пользуюсь портом плагина Web Developer. Для эмуляции разрешения жмешь на шестеренку в строке плагинов (справа сверху по умолчанию), затем resize и View Responsibe Layouts
     
    Последнее редактирование: 28 авг 2016
    #20
  21. Кирова Марина

    Кирова Марина Пользователь

    Сообщения:
    34
    Рейтинг:
    24
    Значит смотри, есть такой framework от команды разработчиков Twitter'a - Bootstrap. Из себя он представляет css-файлик с огромным количеством классов, в которых прописано самые важные правила на момент верстки, а именно - ее адаптивность. Например, задаешь <div class="col-xs col-md ">, где -xs,md отвечают за поведение твоих блоков при маленьких\средних размерах экрана. Залезаешь в панель разработчика, смотришь исходный css код, и смотришь, как это все делается. И быстро, и качественно, и, в конце концов, спокойно разберешься и сможешь сам писать уже без использования фреймворка. Успехов!
     
    #21