[www] Strona Web Designera Opcje

[unnamedly]

Witam, proszę o ocenę mojej strony pod prawie każdym względem (oprócz względu braku artykułów, bo one się pojawią niebawem. Slider też nie jest w 100% dokończony). Wygląd strony, treść, ogólna ocena.
Ważne bym zaznaczył, że stronę robiłem od totalnego zera. Po prostu notatnik, ciepła herbatka i do roboty!

Link: http://ziuty.pl

Ten post edytował unnamedly 16.03.2013, 17:45:12

[kamil4u]

Ja trochę ponarzekam na kod. Ogólnie nie ma tragedii, ale... nie jest to poziom za który powinieneś brać pieniądze. Osobiście uważam, że jeśli już się bierze pieniądze powinno się robić to naprawdę bez błędów( chyba że klient zna Twój poziom ).

Weźmy np. stronę: http://ziuty.pl/contact - wybrana losowo
Moje uwagi:
1. pakowanie stylów CSS w style="..." to zły pomysł - od razu rzuca się to w oczy
2. Menu powinieneś oprzeć na liście
3.

Kod

<i class="icon-home" style="font-size: 15px; margin-right: 5px; position: relative; bottom: 15px; left: 19px; opacity: 0"></i>

Nie tworzy się pustych elementów. A wykorzystywanie tutaj elementu <i> już w ogóle mija się z celem
4. W złym zwyczaju jest umieszczanie JS w kodzie HTML bezpośrednio - wrzuca się taki kod do oddzielnego pliku
5. <center> - znacznik nie wykorzystywany już
6. Piszesz, że znasz się na SEO - po kodzie HTML średnio to widać - chociaż takie podstawy jak atrybuty title czy alt.
7.

Kod

<div class='bottom'>
    <div class="wrapper">

Staraj się trzymać jakiś standard - chodzi mi o " i '
8.

document.title = 'Kontakt';

- SEO? Mamy do tego odpowiedni tag
9.

Kod

<br /><br /><br />

Przerwy robimy inaczej - najczęściej za pomocą margin
10. CSS to inny temat, ale tak na pierwszy rzut ok zauważyłem, że nie używasz prawie w ogóle id(#). Nie jest to żaden błąd czy coś, ale uważam, że powinieneś przemyśleć kiedy lepiej wykorzystać klasę, a kiedy id.

Podejrzewam, że jeszcze coś by się znalazło( może na innych podstronach ), ale nie o to chodzi. Nie chcę Cię zniechęcić, a jedynie pokazać, że jeszcze trochę pracy przed Tobą.

Co do wyglądu się nie wypowiadam, bo grafik ze mnie żaden, a i gust mam raczej odmienny od większości ludzi - nie mniej w skrócie - nawet mi się podoba.

Pozdrawiam i powodzenia

PS. Nie wyjaśniałem tych uwag, ale jak nie wiesz dlaczego tak lub masz jakieś wątpliwości to zapytaj - postaram się wyjaśnić moją wizję.

Ten post edytował kamil4u 22.03.2013, 01:52:46

[unnamedly]

http://gtmetrix.com/reports/ziuty.pl/V5poRhsh - zobacz jeszcze tutaj... dla mnie 1,8 MB na start to o wiele za dużo jak na taką stronę... ;)

w Safari animacja "Dobra strona..." pozostawia za sobą piksele... za literami tworzy się ślad z oderwanych pikseli ;)

Teraz to lepiej wygląda: http://gtmetrix.com/reports/ziuty.pl/WzZz36dt (ok. 400KB) , slider całkiem usunięty.

1) Zacznijmu może od logo:
na białym tle jakie masz w oryginale jest wporządku, ale kiedy złożysz go z tym czarnym tłem strony nie wygląda już tak efektownie, ponieważ wygląda to tak jakbyś otworzył to w paincie i wymazał środek gumką, wiem może sie troche czepiam ale to jako pierwsze rzuciło mi się po otwarciu twojej strony, sugerowałbym poprostu krawędzie jakoś podkreślić żeby przejście miedzy logiem a czarnym tłem było widoczne, bo w oryginale jest tam cień który poprostu sie zlewa z twiom tłem, co psuje całe logo.

2) Druga kwestia idać z duchem czasu, jak wiadomo możliwa jest niestandardowa typografia na naszej stronie, z czego jak widać korzystasz, jednak jest jedno pytanie dlaczego wiec napis Kacper Ziuzia ... nie jest napisany za pomocą frontu, tylko obrazkiem. Utrudniasz w ten sposób algorytmą google i innym robotą indexowanie twojej strony pod kontem słów kluczowych, a co za tym idzie osłabiasz swoje szanse dotarcia do Klienta, owszem robot wyszuka Cię w stopce, ale tu chodzi o to żeby jak sie już zabiera za cos to powinno sie to robić dobrze, bo inaczej Klienci pójdą do konkurencji.

3) Kolejna sprawa nie mam pojęcia pod jaka wersją IE to testowałeś, bo jak ja odpalam pod IE to raz na 10 prób wgl załadował mi CSS, a ponadto typgrafia pod IE leży i kwiczy nadal. Polecam zajrzeć pod ten adres http://www.google.com/webfonts i tam odnaleść twój front, bo ładowane z tej strony dają Ci wiekszą pewność, że wgl zadziała ponadto przy wybieraniu frontu trzeba zaznaczyć subset=latin-ext odpowiada to za polskie znaki.

4) Więc jak już ktoś wspomniał przebuduj ten szablon zgodni z panującym obecnie tendem, czyli koduj za pomocą HTML5, bo jak narazie korzystasz z wersji 4, z zadeklarowanym nagłowkiem na XHTML 1.0, co już wgl jest nieporozumieniem.

5) W moim odczuciu owszem pomysł może i nie był taki zły, ponadto ogromny plus za to iż nie ma tam flasha, ale jest tego troszke za dużo, pamiętaj że skrajności nie są dobre.

6) Ale najważniesze to jest to co teraz powiem, skoro już musisz mieć te 15 plików ze skryptami js to łąduj je asynchronicznie czyli dodajesz async, przykład:

[JAVASCRIPT] pobierz, plaintext 
<script async src="js/jquery.js"></script>
[JAVASCRIPT] pobierz, plaintext 

Usprawni to napewno ładowanie strony, ale radziłbym tę ilość skryptów tak czy tak zredukować.

7) Przeczytaj to co napisałeś w O mnie z 5 razy i napisz to jescze raz bo zdania typu Mówia co ja tu robie ?!
Pozatym mówienie klientowi, że 7 razy zacznyłeś tworzenie szablonu od nowa, może go wystraszyć, bo pomyśli sobie, że będzie na swój web czekać pół roku, albo dłuzej.

8) Pozatym w wyszukiwarce nigdy nie zwracaj tego w ten sposób że wyświetli Ci znaczniki html jak np. tutaj: Wyszukiwanie artykułów zawierających frazę: <div>pozdrowienia dla forum.php.pl</div>I innych. bo to po pierwsze źle wyglada, a po drugie zachęca nas do tego żeby jednak troszke bliżej sie przyjrzeć działaniu tego skryptu, dlatego obcinaj wszytkie znaczniki z fraz.

9) No to dobrneliśmy prawie do końca, zakładka kontakt, pytałeś w jakiej przegladarce wygląda nie tak to np. jest nią Firefox, błąd popełniasz w miejscu gdzie przydzielasz szerokości dla poszczególnych inputów itd, robi sie to poprzez klkulację tak żeby np. 1 wiersz gdzie są 2 inputy po sumowaniu ze sobą miał rozmiar taki sam jak pojedyńczy dla email i wiadomości, ponadto wyłacz możliwość rozszerzania na boki textarea, bo jest to bardzo częsty błąd nawet dużych firm webdesingn`erskich, a później layout im się rozsypuje. W twoim przypadku to nie nastąpi, ale to taka mała uwaga na przyszłość ;)

10) Kolejna kwestia stosowanie algorytmów typu 2+2 jest troche mało sesjowne, bo obecnie boty potrafią sobie z tym radzić, pozatym zawsze masz ten sam token.

11) Popracuj nad tą stopką, bo to naprawde nie jest trudne dodać 3 linijki w css i jest zawsze na swoim miejscu, przykład rozwiazania:

[CSS] pobierz, plaintext 
position: fixed;
bottom: 0px;
width: 100%;
[CSS] pobierz, plaintext 

12) Pozatym nadal jest css w kodzie źródłowym strony, operuj na id i klasach ;)

1) To png było od początku przystosowane pod białe i czarne tło (nie ma żadnych "białych pikseli").

2) Zrobiłem za pomocą fontu (IMG:style_emoticons/default/smile.gif)

3) Całość jeśli chodzi o typografię, jest już poprawiona i na 100% działa na każdej przeglądarce.

4) Przystosowałem pod HTML5 (IMG:style_emoticons/default/smile.gif)

5) Możliwie najbardziej zmniejszyłem ilość animacji jQuery.

6) Zrobiłem ładowanie asynchroniczne dla każdego skryptu oprócz jQuery (bo wtedy w ogóle nie działały skrypty).

7) Większość tekstów w niedalekiej przyszłości popoprawiam.

8) A jak ktoś będzie chciał wyszukać artykuł z pomocą tagu HTML?

9) Próbowałem chyba na wszystkie sposoby i niestety nie wychodziło mi wymierzenie idealnych szerokości dla wszystkich przeglądarek :/

10) Na razie boty dają się nabrać na "2+2", ale gdy będę więcej tego typu formularzy miał na stronie, to rozszerzę ten skrypt.

11) Oo dzięki wielkie za kodzik (IMG:style_emoticons/default/smile.gif) Ale gdy strona miała dużą wysokość, to position: fixed sprawiał, że stopka podążała za nami. Musiałem to trochę zmodyfikować z użyciem jQuery (używanie Twojego kodu, gdy strony nie da się przewijać w poziomie (wtedy jest doczepiona na dole)).

12) Każdy nawet najmniejszy np. "style=font-align: center" mam podpiąć do klas? (IMG:style_emoticons/default/ohmy.gif)

1. pakowanie stylów CSS w style="..." to zły pomysł - od razu rzuca się to w oczy
2. Menu powinieneś oprzeć na liście
3.

Kod

<i class="icon-home" style="font-size: 15px; margin-right: 5px; position: relative; bottom: 15px; left: 19px; opacity: 0"></i>

Nie tworzy się pustych elementów. A wykorzystywanie tutaj elementu <i> już w ogóle mija się z celem
4. W złym zwyczaju jest umieszczanie JS w kodzie HTML bezpośrednio - wrzuca się taki kod do oddzielnego pliku
5. <center> - znacznik nie wykorzystywany już
6. Piszesz, że znasz się na SEO - po kodzie HTML średnio to widać - chociaż takie podstawy jak atrybuty title czy alt.
7.

Kod

<div class='bottom'>
    <div class="wrapper">

Staraj się trzymać jakiś standard - chodzi mi o " i '
8. - SEO? Mamy do tego odpowiedni tag
9.

Kod

<br /><br /><br />

Przerwy robimy inaczej - najczęściej za pomocą margin
10. CSS to inny temat, ale tak na pierwszy rzut ok zauważyłem, że nie używasz prawie w ogóle id(#). Nie jest to żaden błąd czy coś, ale uważam, że powinieneś przemyśleć kiedy lepiej wykorzystać klasę, a kiedy id.

1. Od teraz będę pakował do pliku, ale pytanie jak u kolegi wyżej: każdy nawet najmniejszy np. "style=font-align: center" mam podpiąć do klas? (IMG:style_emoticons/default/ohmy.gif)
2. Menu oparte na liście miałem aż do czasu, aż zauważyłem, że w każdej przeglądarce wyświetla się ono inaczej (w innych miejscach i odstępach). Dlatego zrezygnowałem i oparłem na span`ach.
3. Czyli "opacity" już nie jest w standardzie CSS3? Rozumiem, że mam użyć display: none.
4. Zrobione (IMG:style_emoticons/default/smile.gif)
5. W wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center?
6. Alt="" przy img używam zgodnie ze standardami W3C. Wartości atrybutu title już nie nadaję przez JS.
7. Dzięki za radę (IMG:style_emoticons/default/smile.gif) Tu przyznam się z bólem, że wolałem iść na łatwiznę, używając przy echo "<costam costam='costam'>" (cudzysłowów), a przy czystym html wyświetlanym bez echo - apostrofy. Teraz już będę trzymał się cudzysłowów.
8. Naprawione, nadawane bezpośrednio. (IMG:style_emoticons/default/smile.gif)
9. Dość dużo tych br`ek mam. Część już poprawiłem i nadaję przez margin, a drugą część na bieżąco będę poprawiał.
10. ID dla pojedynczych elementów, a CLASS dla powtarzających się, rozumiem? Od teraz będę tak robił ;)

1. Ujdzie, choć skoro to tekst, to tekstem mógłby być.
2. Chciałeś zrobić html5, ale nie wiesz jak. A center nadal jest w kodzie.

1. Jest napis w logo tekstem.
2. Już rozumiem, ale jak pisałem koledze wyżej: "w wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center".

radzę autorowi strony przekonwertowanie co bardziej wielgaśnych obrazków z PNG do JPG. Wielkość w kilobajtach potrafi spaść kilkakrotnie.

Rzeczywiście (IMG:style_emoticons/default/smile.gif) Obrazki przekonwertowane.

1) co do fontów to zrób je raz a kompleksowo np. http://www.fontsquirrel.com/tools/webfont-generator bo chyba coś jest nie tak z odwołaniem do fontawesome-webfont.eot?#iefix&v=3.0.1 bo tego fontu po prostu nie ma na serwerze...

2) pozatym fajnie masz skonfigurowany serwer, każdy plik otrzymuje Cookie, obrazek, css czy cokolwiek... cała masa skryptów... css'ów... poczytaj te uwagi z gtmetrix... bo to jeszcze bardziej leży niż cokolwiek innego...

1) Naprawione
2) Trochę musiałem się z tym namęczyć, ale serwer skonfigurowany (po części z pomocą .htaccess).


Ponadto:

1) Wszystkie pliki CSS (a było ich ok. 11) spakowałem do jednego (IMG:style_emoticons/default/smile.gif)
2) Strona główna zmieniona (i zmieniana na bieżąco),
3) Nowa stopka (jeszcze muszę uzupełnić tekstem),

Ten post edytował unnamedly 4.04.2013, 23:25:58