Strona do oceny + problem z migającym tekstem

Question

Cześć,

przede wszystkim proszę was o ocenę strony, a poza tym mam denerwujący problem, z którym nie mogę się już któryś dzień uporać.

Mianowicie przy onblur inputów w kontakcie na samym dole ma pojawić się ewentualna informacja o błędzie, tak jak jest teraz. Wypozycjonowałem sobie to tak jak chciałem, ale nie wiedzieć czemu ten tekst zaczyna migać. Tzn przez 5 sekund jest normalny, później traci tak jakby font-weight na sekundę - i tak w kółko. Nie mam pojęcia czym to jest spowodowane.

tutaj strona: http://subtledesign.esy.es/
a kod: https://jsfiddle.net/La878j3j/

Answer 1

No nie wierzę, działający animowany scroll. To mnie teraz pozytywnie zaskoczyłeś ^^

<!--
kim jesteśmy
Projekty - tam będziemy wstawiać projekty z balsamiq, bar z %% wykonanego działania
nasze prace
kontakt
-->

Przed DOCTYPE, czyli możliwy tryb quirks.

<a class="navbar-brand" href="index.php"><img class='img-responsive' src='img/logo.png' width='180px' height='90px' /></a>

Tu jest kilka błędów:

• Idealnie by było, gdyby to był nagłówek: http://webkrytyk.pl/krytyka/lexy.com.pl#naglowki
• Brakuje [alt] dla obrazka (tym samym link nie ma treści)
• W rozmiarach w HTML nie podaje się jednostki! Zawsze są to piksele.
• Link powinien prowadzić do /, czyli strony głównej.

<a href="#oferta"><i class='glyphicon glyphicon-chevron-down'></i></a>

Kolejny link bez treści. Polecam poczytać: http://fontawesome.io/accessibility/

Wgl sekcje, w których nie ma nagłówka to nie sekcje. Albo dodasz nagłówek, albo wypada zmienić te elementy na div.

<section id='oferta' class='col-lg-12'>
        <article class='offer fluid-container text-center'>

Tutaj zostawiłbym sam article, natomiast z każdego div z h3 zrobiłbym poszczególne sekcje oferty. Tak samo w procesie.

<img src="img/responsive.jpg" alt="slide1" class='img-responsive'/>

Bezsensowny [alt]!

blink? Serio? To to powoduje miganie tekstu...

Brakuje label dla pól formularza.

Stopka strony nie może być w section, bo wówczas staje się stopką tej sekcji, nie strony!

Comments

Dzięki za komentarz, większość rzeczy poprawiłem :)

Masz może jakiś ciekawy link żeby się coś więcej dowiedzieć o trybie quirks?

Link bez treści - jaką ma mieć treść, skoro chcę, żeby podlinkowana była tylko ikonka?

Gdzie i jak umieścić labele? Podpowiedzi dałem w placeholderach - taka struktura jest zła? Czemu?

A z blinkiem to musiałeś się zdziwić :D Ale przy innych znacznikach (div, span, p) też miga, a blinka dałem tylko żeby sprawdzić co się stanie :) Ale tak jak mówiłem, problem występuje chyba tylko w chromie na kompie. W Firefox, IE i chrome na telefonie wszystko jest ok

---

Masz może jakiś ciekawy link żeby się coś więcej dowiedzieć o trybie quirks?

http://www.kurshtml.edu.pl/css/quirks.html

 Gdzie i jak umieścić labele? 

Mogą być jako label.sr-only. 

Podpowiedzi dałem w placeholderach - taka struktura jest zła? Czemu?

Tak, bo [placeholder] służy do czegoś innego i nie zawsze jest traktowany jako etykieta pola – o czym wspomina sama specyfikacja HTML5: 

The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.

Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in theplaceholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

Answer 2

U mnie nic nie miga (Firefox), sprawdź jak to wygląda na różnych przeglądarkach.

Poza tym można jeszcze popracować nad prędkością wczytywania strony, bo u mnie krucho z tym było na słabszym łączu.
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fsubtledesign.esy.es%2F&tab=desktop

Comments

Bardzo fajna sprawa z tą stroną co podesłałeś, na pewno się przyda - teraz i na przyszłość :)

I jak patrzyłem na telefonie, to nic nie miga. Na explorerze i firefoxie też jest ok, jedynie chrome coś nawala, a wydawało mi się, że najlepiej wyświetla strony i interpretuje wszystko jak należy