X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Начинающий верстальщик просить оценки и критики верстки
pixmart
pixmart
Topic Starter сообщение 6.2.2016, 22:30; Ответить: pixmart
Сообщение #1


Участник
***

Группа: User
Сообщений: 135
Регистрация: 5.7.2010
Поблагодарили: 25 раз
Репутация:   1  


Здравствуйте форумчане. Выкладываю PSD макет и саму верстку макета Landing Page сайта (или смотреть test.pixmart.pp.ua). Прошу оценить код, закидать помидорами, ткнуть носом в ошибки, баги и т.п. Спасибо.

Сообщение отредактировал pixmart - 6.2.2016, 22:30


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 6.2.2016, 22:37; Ответить: mmkulikov
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 2031
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(pixmart @ 6.2.2016, 20:30) *
test.pixmart.pp.ua

Гугловские шрифты оптимальней через @import в style.css сделать
Ну и еще по оптимизации - опустить все скрипты к закрытию body


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MacLeo
MacLeo
сообщение 6.2.2016, 22:44; Ответить: MacLeo
Сообщение #3


тИЦ`анутый
******

Группа: Active User
Сообщений: 1126
Регистрация: 1.6.2010
Поблагодарили: 316 раз
Репутация:   49  



Не красиво выглядит.

+ Я бы сделал еще что то внизу с ссылками на соц.сети, что бы при наведении что то происходило. Может цвет меняли, или еще что то


--------------------
SEO аудиты | Сайты под ключ | Верстка | Продвижение | Web дизайн и наружная реклама


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 6.2.2016, 23:48; Ответить: Gerga
Сообщение #4


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


Цитата(mmkulikov @ 6.2.2016, 21:37) *
Гугловские шрифты оптимальней через @import в style.css сделать

Почему? Как я знаю, вариант <link rel="stylesheet"... быстрее нежели @import, в style.css, благодаря параллельной загрузки

Сообщение отредактировал Gerga - 6.2.2016, 23:51


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 7.2.2016, 0:04; Ответить: mmkulikov
Сообщение #5


Старожил
******

Группа: Active User
Сообщений: 2031
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(Gerga @ 6.2.2016, 21:48) *
Почему? Как я знаю, вариант <link rel="stylesheet"... быстрее нежели @import, в style.css

@import отработает один раз и закешируется
link - каждый раз при открытии новой страницы (но не всегда, правда)
Плюс еще один нюанс - это отображение шрифтов до их полной загрузки
В первом варианте будут отображаться чем-то дефолтным, а
во втором - будет "белый" лист до полной загрузки шрифта с гугла....

Цитата(MacLeo @ 6.2.2016, 20:44) *
Не красиво выглядит.

Стили для :active не прописаны ))


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 7.2.2016, 0:59; Ответить: Gerga
Сообщение #6


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


Цитата(mmkulikov @ 6.2.2016, 23:04) *
В первом варианте будут отображаться чем-то дефолтным, а
во втором - будет "белый" лист до полной загрузки шрифта с гугла....

Принимается! Но, :evrika:, сам link со шрифтами можно разместить до link`а с основными стилями, таким образом мы получим шрифты на ранней стадии прорисовки :)

pixmart, подключайте скрипты перед </body>, первый div (<div class="warning" >) физически также разместить в самый низ страницы. Используйте article и section там, где можно их использовать. Используйте nav. Нужно только 1 заголовок первого уровня использовать на странице.

Сообщение отредактировал Gerga - 7.2.2016, 0:52


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 7.2.2016, 1:35; Ответить: falken
Сообщение #7


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


1. Этого лучше избегать, если имитируете мобильник и т.п., особенно если присутствиет autoplay (сугубо личное мнение). И вообще, советую юзать owlcarousel.


2. Для таких моментов можно использовать :first-child. Нет, я не говорю, что это ошибка и/или плохо, ну просто, на мой взгляд, нужно приучать себя к современным стандартам. И, как правило, кнопки типа скачать и читать далее являются обычными ссылками, button в данном случае не уместен.


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


Код
<div class="os-ico">
   <a class="android" href="#"></a>
   <a class="ios" href="#"></a>
   <a class="wp" href="#"></a>
</div>


4. Будьте внимательней


Как следствие:



5. В отдельный файл


6. Этого делать не обязательно для header, нет смысла задавать ему класс, он не повторяется на странице. Ну и почему бы не использовать помимо header и footer другие элементы HTML5, если уж взялись за него (например section и т.д.)


7. br здесь лишний, достаточно задать для конкретного span - display:block


Ну и на этом я осмотр завершил. Макет не видел.


Поблагодарили: (5)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pixmart
pixmart
Topic Starter сообщение 7.2.2016, 2:21; Ответить: pixmart
Сообщение #8


Участник
***

Группа: User
Сообщений: 135
Регистрация: 5.7.2010
Поблагодарили: 25 раз
Репутация:   1  


falken, весьма поучительно, огромное СПАСИБО. Будем учиться.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 7.2.2016, 16:09; Ответить: mmkulikov
Сообщение #9


Старожил
******

Группа: Active User
Сообщений: 2031
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(Gerga @ 6.2.2016, 22:59) *
Принимается! Но, , сам link со шрифтами можно разместить до link`а с основными стилями, таким образом мы получим шрифты на ранней стадии прорисовки

Лично я не "доверяю" ни гуглу, ни кому другому (из сервисов) B)
И в случае если вынужден юзать нестандартные шрифты, я их загружаю на свой хостинг(впс и т.п.) , а там уже @font-face


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
roamn
roamn
сообщение 7.2.2016, 16:52; Ответить: roamn
Сообщение #10


Новичок
*

Группа: User
Сообщений: 44
Регистрация: 2.11.2012
Из: Алчевск
Поблагодарили: 9 раз
Репутация:   2  


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

Сообщение отредактировал roamn - 7.2.2016, 16:53


--------------------
Я на Brainstorage
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Сколько можно просить за такой аккаунт ВК?
28 qazex 5925 12.12.2017, 9:44
автор: Mikki
Открытая тема (нет новых ответов) Услуга оценки сайта перед продажей/покупкой
0 genjnat 503 25.11.2017, 21:02
автор: genjnat
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыБлог о заработке и не только, прошу вашей оценки.
Список Лучших Сайтов
9 Retyk 1043 17.11.2017, 15:47
автор: 0alex1
Открытая тема (нет новых ответов) Верстальщик, который наверстает Вам упущенное.
6 verino 851 11.11.2017, 17:20
автор: gretskov
Открытая тема (нет новых ответов) Простая вёрстка недорого, начинающий верстальщик
8 carum_carvi 1221 2.5.2017, 18:35
автор: carum_carvi


 



RSS Текстовая версия Сейчас: 17.12.2017, 16:25
Дизайн