DawidRZA.com

Ostatnio ktoś nazwał mnie „profesjonalistą”. Wówczas stwierdziłem, że daje mi to prawo do rzucania rękawicy innym profesjonalistom, którzy byli na tyle nieopatrzni aby zamieścić swoją stronę w Internecie. A któż jest bardziej profesjonalny od międzynarodowej agencji marketingowej? Zapewne nikt! Dlatego też jej strona idzie na pierwszy ogień na liście profesjonalistów do odstrzału.

• Na pierwszy rzut oka strona sprawia naprawdę profesjonalne wrażenie. Choć u mnie wywołuje dość niepokojące skojarzenia (z taką jedną trzyliterkową agencją, która również całe dnie gapi się na mapę). Niestety to wrażenie szybko pryska, gdy próbuje się zaznaczyć wielkie i wspaniałe slogany. Okazuje się, że tekst nie jest tutaj tekstem tak naprawdę. No ale przecież mają brzmieć jak ekspert – nie prezentować się jak ekspert.
• Druga myśl od razu łączy „międzynarodową agencję” z językiem angielskim. Co dziwne jednak, strona jest w całości po polsku (oprócz buńczucznego sloganu) i nigdzie nie znalazłem opcji zmiany języka. Jak dla mnie stawia to pod znakiem zapytania ową „międzynarodowość” – nie sądzę, żeby klienci z mitycznego Zachodu byli zainteresowani polską firmą, która nawet strony po angielsku nie ma.
• Dopiero jak przewinę stronę, widzę powitanie. Jak dla mnie ta mapa mogłaby być trochę mniejsza.
• Menu jest skrajnie pretensjonalne. „Outsourcing – Mądrość”. Hm… I tak najbardziej boję się zakładki „Kontakt – Daj się zaskoczyć!”. Prawdę powiedziawszy straciłem ochotę się z nimi kontaktować.

• Gdynia – The city of opportunities.
  DawidRZA – The place of your success.

  Powiało międzynarodowością. Kolejnym jej przejawem jest formularz kontaktowy, którego etykiety są pisane po angielsku.

• A wśród wycinków z bloga widzę bardzo ładne „&”. Czyżby za bardzo filtrowali dane?
• Poza tym blog, w ktorym ostatni wpis jest z września tamtego roku nie sprawia profesjonalnego wrażenia.
• Agencja przechwala się, że ma ponad tysiącletnie doświadczenie w branży… Robiłoby wrażenie gdyby tuż nad tym nie było informacji o międzynarodowym zespole 350 specjalistów. Może nie znam matematyki, ale dla mnie to wypada średnio 3 lata na jednego człowieka. „Zespół 350 specjalistów z ponad 3-letnim doświadczeniem na rynku” – nie brzmi aż tak powalająco, ale na pewno prawdziwiej.

• DawidRZA PR & Marketing to agencja marketingowa-reklamowa z ogromnym doświadczeniem. Zdobyliśmy je nie tylko w Polsce, ale także na terenie całej Europy. Jako cel obraliśmy świadczenie naszym klientom profesjonalnych usług w każdym zakresie, od a do z, a to wszystko za niewielkie pieniądze.

  Profesjonalne usługi + niewielkie pieniądze? Znam takie. Ale nie są profesjonalne. No chyba, że nie są tanie.

• Z ciekawości pacnąłem w menu „Cennik” aby zobaczyć owe niewielkie pieniądze. I cóż zobaczyłem?
  

  Drogi Kliencie! Działamy zgodnie z zasadą, że każda Państwa wizja to indywidualny projekt, w związku z czym każdy z Państwa zasługuje na indywidualną wycenę. Ponadto, to my bierzemy na siebie całą odpowiedzialność i nadzór nad wykonaniem zlecenia. To niezwykle istotne ? na rynku działa dużo nieuczciwej konkurencji, nic więc dziwnego, że większością z Państwa targają wątpliwości.

  Po czym następuje formularz kontaktowy, służący do wysłania projektu do wyceny. Sprytnie, tylko wycena a cennik to jednak dwie różne rzeczy.

• W stopce ten znaczek walidacji pasuje jak pięść do nosa. Natomiast link do G+ wygląda jak urwany z choinki.
• Menu bez JS działa co prawda, ale do najużyteczniejszych (i najładniejszych) nie należy. Nie chcę się chwalić, ale w moim kodzie menu rozwijane wygląda tak tylko wówczas, gdy zarówno JS, jak i myszka są niedostępne (dość edge’owa sytuacja jak dla mnie, ale zawsze lepiej się zabezpieczyć nawet przed takimi) – w innym przypadku jest fallback do :hover (albo po prostu działa na :hover z wykorzystaniem CSS Transitions). Natomiast slider z ostatnimi newsami z bloga ładnie się rozwija – duży plus za to. Minus niestety też się należy a to za boczną zakładkę „Szybka wycena”, która bez JS nie działa i przy jego braku nie powinna się pokazywać.
• Nie chciało mi się używać myszki, toteż pacnąłem w TAB… Nic z tego, bo inteligentny webmaster wyłączył outline, nie dając nic w zamian. Pełen profesjonalizm, gratuluję go ze szczerego serca. Przykro mi to mówić, ale właśnie agencja DawidRZA straciła dość ważnego klienta w mojej osobie, gdyż dla mnie strona jest po prostu bezużyteczna.
• Tytuły na poszczególnych stronach co prawda się zmieniają, ale raczej przypomina to zbiorowisko słów kluczowych. Przykład: „Kontakt z agencją marketingową DawidRZA. Najlepsza agencja marketingowa w Trójmieście. Formularz kontaktowy. | DawidRZA”.
• Strona nie jest responsywna. W przypadku takich międzynarodowych firm wersje mobilne (oparte na media queries albo w ogóle na filozofii mobile first design) są już standardem.
• Tyle uwag wstępnych – czas zanurzyć się w kodzie. Walidator twierdzi, że nie jest najgorzej, ale tylko na stronie głównej. Żeby wpasować się w klimat, powiem tak: nice try!
• Outline już tak różowy nie jest. Cała strona nazywa się „Szybka wycena”. Dość nietrafione. Prawdziwy główny nagłówek natomiast wygenerował dość enigmatyczne „DawidRZA http://dawidrza.com DawidRZA”. No i dosyć dziwnie wyglądają nagłówki będące początkiem zdań. Na podstronach jest jeszcze gorzej (to wygląda jakby w danych kontaktowych był tylko Facebook).
• Całość jest postawiona na WordPressie. Spodziewałem się jednak jakiegoś autorskiego CMS-a.
• DOCTYPE wskazuje na XHTML 1.0 Transitional – a więc znów nie dostajemy pełnego trybu zgodności ze standardami.
• Na html znajduje się atrybut lang. Natomiast nie ma atrybutu xml:lang. Czyżby ten XHTML nie miał nigdy działać w trybie XML? 😉
• Na szczęście kodowanie to UTF-8, zatem zaczątki międzynarodowości są.
• Widać niekonsekwencje – raz jest " (cudzysłów) a raz ' (apostrof). Ale to pewnie efekt upchnięcie 50 pluginów dla WP.
• 11 skryptów w head + 1 na końcu body. O jakieś 10 za dużo. No i oczywiście za dużo na głowie – lepiej byłoby to przenieść w nogi. Zawsze mnie to ciekawi czemu ludzie pozwalają WP robić taki sajgon. Nie ma przypadkiem jakiegoś pluginu do minifikacji i konkatenacji skryptów w locie?
• Podobna sytuacja dotyczy CSS. 4 link + 2 @import (i szlag trafia parallel downloading).
• Z Google Fonts jest dociągane ponad… 30 czcionek. Ktoś tu jest mocno niepoważny. Na szczęście te czcionki tylko mi marnują transfer i nie występują wszystkie na stronie (kilkadziesiąt żądań jest i tak lepsze od oczopląsu).
• Z ciekawości aż sprawdziłem: Chrome wykonał 53 żądania, ściągając 901KB. Zdarzenie DOMContentLoaded zaszło po 7.69s, natomiast cała strona wczytała się po 12.94s. Niezbyt imponujące wyniki.

• <link rel='shortcut icon' href='http://dawidrza.com/wp-content/themes/DawidRZA/images/favicon.png' type='image/x-icon' />

  Bardzo ładny kod. Serwuje się ikonkę .png w znaczniku typowo dla IE i do tego twierdzi się, że to plik .ico. Nie jestem pewien czy IE<9 w ogóle czyta jakieś inne ikonki niż .ico. Dlatego też raczej preferuję link[rel=icon] dla odpicowanych ikonek i plik favicon.ico w głównym katalogu strony jako fallback.

• Google już dawno przestało wspierać IE 8 a tu wciąż wspiera się starsze wersje. Jak dla mnie niepotrzebnie.

• <div onclick="formpok();" id="wyswietl"><div style="background:url(http://dawidrza.com/wp-content/themes/DawidRZA/images/szybka-wycena.png) no-repeat center; padding:5px; width:30px; height:160px;"></div></div>
  <div onclick="formz();" id="ukryj" style="display:none;"><div style="background:url(http://dawidrza.com/wp-content/themes/DawidRZA/images/szybka-wycena.png) no-repeat center; padding:5px; width:30px; height:160px;"></div></div>

  Tak wygląda przycisk zakładki bocznej. Pełno tu błędów. Zaczynając od zupełnej bezużyteczności tego elementu bez JS, poprzez brudny onclick i style inline, aż do najpoważniejszego: pustości. Pusty element to zbędny element. A w przypadku elementów interfejsu pustość = niedostępność. Co dostają AT? Pusty element. Idealnie to powinien być link do dużego formularza wyceny z dodatkowym klikiem otwierającym popupa. No i niepotrzebny jest drugi element ukrywający – toggler i tyle. Jeden link w zupełności do tego wystarczy.

  <a href="/wycena" id="wycena-przelacznik">Szybka wycena</a>

• Pierwszy na stronie jest nagłówek h3 i odnosi się do „Szybkiej wyceny”. Osobiście tę zakładkę dałbym na samym końcu strony.
• Już teraz mogę z czystym sumieniem powiedzieć, że jest tutaj spory divitis.

• <!-- Fast Secure Contact Form plugin 3.1.5.4 - begin - FastSecureContactForm.com -->

  Bo jak wiadomo, WP do wszystkiego ma odpowiedni plugin. Z tym, że jak dla mnie „secure contact form” to taki, który śle dane przez szyfrowane połączenie.

• Kod formularza wyceny ma niesamowicie przekombinowany kod. Pełno divów ze stylami inline, odstępy na pustych elementach… W przypadku wymaganych pól użyłbym atrybutu required mimo błędu w walidacji (funkcjonalność > walidacja!). Do tego beznadziejna CAPTCHA. Rozumiem, że to ona jest odpowiedzialna za to słówko secure?

• <div class="highlight_header"></div>

  Ten znacznik wstawia rozciagnięty na całą szerokość nagłówka… biały piksel. Rozjaśnia to lekko całość. Armata na muchę? Ja bym powiedział, że nawet lotniskowiec.

• Logo też składa się z dwóch grafik: czarnej i białej. Z tego czarne jest ukryte przy pomocy display:none. Dziwaczne. Natomiast w nagłówku jest także tekst – dziwne rozwiązanie zważając, że obrazki są wstawione normalnie przez img. Robi się jeszcze dziwniej, gdy odkrywa się, że tekst też jest ukryty przez display:none.

• <div id="social">
  <a href="/feed/" id="RSS" title="RSS"></a>
  <a href="https://twitter.com/#!/dawidrza" id="TWEET" title="Twitter"></a>			
  <a href="http://pl-pl.facebook.com/agencjamarketingowa" id="FB" title="Facebook"></a>
  </div>

  Jak już wspominałem, pusty element to zbędny element a puste elementy UI to bezsensowne elementy, zwłaszcza linki. Wystarczy wyłączyć obrazki/mieć zastój w przesyle CSS i bum! Nie ma socjalek. Pomijając już w ogóle, że to winna być lista.

• <br class="clear" />

  Profesjonalnie. W końcu wiadomo, że clearfix nie wszędzie działa.

• <div class="cien"></div>
  	
  			<div style="width:100%;height:100%;position:absolute;z-index:998;top:0;left:0;"></div>
  		<img src="http://dawidrza.com/wp-content/uploads/2013/01/slid1a.png" alt="Agencja reklamowa DawidRZA" style="width:100%;"/>

  Tak wstawiana jest mapka. Po to zaciąga mi się 30+ czcionek, by najważniejsze slogany w witrynie walnąć jako obrazek. A po co ten pusty div, rozciągnięty na całą stronę? Moja teoria jest taka, że ma on uniemożliwić skopiowanie mapki. Dobre rozwiązanie. Szkoda, że ta mapka powinna być tłem, na który naniesiono slogany przy pomocy web fonts.

• <h3>Mamy przyjemność powitać Państwa na stronie internetowej nietypowej na rynku europejskim trójmiejskiej agencji marketingowej DawidRZA.</h3>

  Jak dla mnie to już jest raczej akapit niźli nagłówek.

• W dobie OOCSS dostajemy klasy typu .margin_0_0_10_0. Nie wiemy co to za element, do czego służy – wiemy natomiast, że dolny margines ma 10px. Coś jak .bold-red, tylko, że bardziej „low level”.
• Nie podobają mi się nagłówki będące tak naprawdę początkiem zdań zawartych w akapitach pod nimi. Nagłówki w książce mówią przecież o czym jest treść po nich następująca, nie stanowią części tej treści (pomijając nurt powieści eksperymentalnej i inne dziwne dziwactwa). Tak samo powinny się zachowywać nagłówki na stronie internetowej.
• Linki w treści, żeby być bardziej widoczne, używają krzyku a przecież istnieje coś takiego w CSS jak text-transform:uppercase i nie trzeba być niekulturalnym (pamiętajcie, dzieci: kultura zawsze popłaca).

• <div class="ie7fx"></div>
  <br class="clear" />
  <div class="separator"></div>

  Pusty element dla IE, przełamanie linii + jakiś separator. Nie żeby co, ale od takich rzeczy jest specjalny element – hr.

• Uwielbiamy
  przełamywać
  linie
  !
• I wstawiać pełno niepotrzebnych stylów inline.
• I pogrubiać wszystko strong!
• Slider postów na blogu znów ma nawigację po angielsku. Bo polski jest zbyt mało profesjonalny dla rozwiązań nawigacyjnych.

• <div class="image"><a href="http://dawidrza.com/skuteczne-prowadzenie-fanpage/"></a></div>

  Wspaniały obrazek, prawda?

• A poniżej równie wspaniały przykład linii:

  <div class="line"></div>

• Posty przynajmniej są na liście, więc widać, że to lista postów. Do tego mają nagłówki, więc nie jest źle. Pokusiłbym się tylko jeszcze o jakiś mikroformacik (hFeed).
• Osobiście tym sekcjom w stopce dałbym nagłówki – na razie to jest surowy tekst wrzucony sobie od tak.
• Dane kontaktowe oczywiście nie są w address.
• W stopce znalazłem pewien zakomentowany, dość ciekawy, link:

  <a href="https://wizytowka.rzetelnafirma.pl/BusinessCard.aspx?banner=JAQCIDCS"><img src="/rzf.png" alt="DawidRZA Rzetelna Firma" style="position:absolute;bottom:35px;left:425px;width:110px;"/>

• Na końcu dostajemy jeszcze skrypt CAPTCHA i zaciągnięte GA. I tyle.
• Teraz może coś o CSS. Na początku arkusza widzimy:

  *{
  	margin:0;
  	padding:0;
  	outline:0;
  	font-weight:normal;
  }

  Tuż pod spodem widzimy:

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	outline: 0;
  	font-size: 100%;
  	vertical-align: baseline;
  	background: transparent;
  	font-weight:normal;
  }

• I tym samym, dzięki bezmyślnemu resetowi, dostaliśmy linki bez outline’u. W większości wypadków zarzucam webmasterowi, że mógłby przecież dać po prostu style z :hover także dla :focus i tym samym rozwiązać problem, ale tu tego nie powiem. Może dlatego, że style dla :hover praktycznie nie istnieją.

• /* remember to define focus styles! */
  :focus {
  	outline: 0;
  }

  Bez komentarza.

• Po resecie następuje sekcja „Hacks”. Naprawdę, jest się czym chwalić.
• Webmaster tak bardzo lubi vendor prefixy, że zupełnie zapomina o ich nieprefiksowych odpowiednikach.

• body.hevetica_text{ font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif !important; }
  body.lucida_text{ font-family:"Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif !important; }
  body.georgia_text{ font-family:Georgia, "Times New Roman", Times, serif !important; }
  body.times_text{ font-family:"Times New Roman", Times, Georgia, serif !important; }
  body.arial_text{ font-family:Arial, Helvetica, sans-serif !important; }
  body.geneva_text{ font-family:Geneva, Tahoma, sans-serif !important; }
  body.tahoma_text{ font-family:Tahoma, Geneva, sans-serif !important; }

  Bawmy się czcionkami.

• #navigation ul ul ul li

  Dość dziwnie to wygląda.

• Wszędzie pełno !important – zupełnie niepotrzebnych.

• .margin_0{ margin:0;}
  .margin_0_10{ margin:0 10px;}
  .margin_0_10_0_0{ margin:0 10px 0 0;}
  .margin_0_0_10_0{ margin:0 0 10px 0;}
  .margin_0_0_10_10{ margin:0 0 10px 10px;}
  .margin_0_20{ margin:0 20px;}
  .margin_0_20_0_0{ margin:0 20px 0 0;}
  .margin_0_0_20_0{ margin:0 0 20px 0;}
  .margin_0_0_20_20{ margin:0 0 20px 20px;}
  .margin_10_0{ margin:10px 0;}
  .margin_20_0{ margin:20px 0;}
  .margin_10{ margin:10px;}
  .margin_20{ margin:20px;}

• Dzięki takim potworkom arkusz urósł do 2358 linijek. Jestem pewien, że całość strony – zarówno od strony HTML jak i CSS – da się napisać o wiele prościej. I semantyczniej.

Tym oto sposobem kończę kopanie leżącego. Troszkę grzeszków na koncie profesjonalistów od marketingu się zebrało. Czy zachowali swoją twarz prawdziwych pro? Wątpię. Kod jest pisany głównie pod wygląd, co widać już po nazwach klas w CSS. Strona ma wyglądać – i to jest główne założenie całego projektu. Zresztą czego innego można się spodziewać po ludziach od PR…