Aycan.net

Merhaba arkadaşlar,öncelikle böyle site eleştirileri yapmak bence arabirim alanını geliştireceğini düşü(nüyorum)ndüm.

Amacım kimseyi kırmak/rencide etmek değildir, amaç kendimi geliştirmek.

İlk kurbanımız :  turkcell.com.tr

Ana sayfa

Tasarımın çok güzel, Türkcell’e bu kadar kaliteli ve sade bir tasarım çok yakışmış. (Ama bizim işimiz tasarım değil html ve css’e geçiyorum)

İlk kriterimiz kodların düzgün yazılması (Benim için çok önemlidir!)

CTRL + U ya basıyoruz ve karşımızda berbat bir dizilişte html kaynak kodlarını görüyoruz.

Turkcell font-face‘i Font Squirrel‘den oluşturmuş ve Font Squirrel’in imzasını silmememiş bu taktir edilecek birşey. Ama 4 font kullanmışlar, bu fontlar ortamala 80kb’den 4*80kb  = 320KB eder ve bir ana sayfanın font büyüklüğü için baya yüklü.

Türkcellmin.css (http://img3.turkcell.com.tr/assets/default/style/turkcellmin.css?v=10)

min.css’de söyleyecek birşey bulamıyorum. Html’de css’e dokunurum.

Html ve Css kısmı

1 – Arka planlar

Neden bütün arkaplanları ayrı ayrı koydular anlayamadım, boyut söz konusu ise

www.turkcell.com.tr//assets/default/img/bg_clouds.jpg 58 KB

www.turkcell.com.tr//assets/default/img/bg_gradient.png 63 KB

http://www.turkcell.com.tr//assets/default/img/bg_flare.png 56 KB (Zaten bu ne işe yarıyor hiç anlamadım)

Bu arkaplanları birleştirip jpg’de kalitesini düşürünce bence daha hafif bir bg çıkar, eş değer boyutta olsa bile 3 farklı resim çağırmaktansa 1 reysim çağırırım daha iyi. Ayrıca bazen benimde yaptığım projelerde böyle çeşitli arka plan oluyor, alt sayfada değişik arka plan, ana sayfada değişik arka plan o zaman parça parça yapmak zorunda kalıyorsun ama turkcell’ın bir kaç sayfasına baktım hep aynı arka planlar.

Üst kısım (Header)

Logo
Logo da h1 tagını kullanmamışlar, bence a’yı kapsayan bir h1 tagı olmalıydı. Ayrıca .logo class’ına neden position:relative verdiler anlayamadım çünki logo class’ının içinde logoya bağlı olacak bir element yok veya logo class’ını top,right,bottom,left ile hizalamamışlar.

<a href="/" style="margin: 17px 0 12px!important;" class="logo">
<img alt="Turkcell Logo" src="http://img2.turkcell.com.tr/assets/default/img/new_logo.png">
</a>

Üst Menü (Nav)

Bu kısımda nav adlı bir sınıf oluşturulmuş ancak, bu sınıfa hiçbir tanımlama yapılmamış, içindeki ul’a bu tanımlamalar yapılmış. Bence 1 nav’a gerek yoktu, eğer nav içine ul koyuyorsan ul’a değil nav’a hizalama kriterlerini gireceksin.

ul.intersite-navigation {
    float: right;
    margin: 20px -20px 0 0;
    padding: 0;
    position: relative;
    z-index: 100 !important;
}

Zaten reset.css’in var ul’un padding değerlerini sıfırlamaya gerek yoktu. Genelde flot right ve float:left taglarına kızarım. Tekrarlı ifadeler olmadığı sürece sol ve sağ komutlarını clearfix gibi kendi kütüphanende tutacaksın(aşağıdaki gibi).

.sol{float:left}
.sag{float:right}
 <ul class="intersite-navigation sol">...</ul>

z-index = 100 demişsin bence bu kadar katmanları atmasyon yapmamalı, eminim ki 100 katmanınız yok (Bu hatayı bende çok yapıyorum 999 vs )
Ul içerisindeli li taglarını çok iyi kullanmışlar, her li’ye farklı class ve farklı şekillendirme. Sprite’ida çok güze

<li class="consumer-link">
<span id="yellowHalo" style="margin-top: -25px; font-weight: bold;"></span>
<a href="/Sayfalar/anasayfa.aspx">
<span style="font-weight: bold;">BİREYSEL</span>
</a>
</li>

Üst Menü 2

<div class="primary-navigation nav">
<span id="nav-stretch"></span>,
<ul>...</ul>

Bak bak bak şimdi sinirlendim! span#nav-stretch bu nedir abi ? yapın buna uygun olmayıp sonradan yaptıysan anlarım ama, böyle yapmak iyi değil.

<div id="ortaMenUza">
     <div class="primary-navigation nav">
    <span id="nav-stretch"></span>,
     <ul>...</ul>
</div>

Böyle uza di’i eklersin width:100%; dersin border-bottom:1px solid #fff; dersin problem çözülür.

<li>
    <a class="third" id="ctl00_IdRetailMenu_idRetailMenuLi3" href="/bireysel/cihazlar/Sayfalar/ceptelefonlari/genel.aspx">
        <span>Cihazlar</span>
    </a>
    <ul class="cc-8">
        <li class="tip-container">
            <span class="tip"></span>
        </li>
        <li class="first">
            <a href="/bireysel/cihazlar/Sayfalar/ceptelefonlari/genel.aspx" class="telefonlar">
                <span>Telefonlar</span>
            </a>
        </li>
        <li>
            <a href="/bireysel/cihazlar/Sayfalar/tabletvenotebook/genel.aspx" class="notebook-tablet-netbook">
                <span>Notebook, Tablet &amp; Netbook</span>
            </a>
        </li>
        <li class="last">
            <a href="/bireysel/cihazlar/Sayfalar/vinnailesi/genel.aspx" class="vinn">
            <span>VINN Ailesi</span>
            </a>
        </li>
    </ul>
</li>

Bu üsteki kodlar . menünün açılan pencereleri. Ben şuna takıldım, neden bütün a tagları içine hep span atmışlar ? Bence gereksiz. Açılan menü içerisindede aynı şekilde spanla uğraşmışlar. Anlam veremiyorum.

Menünün sağ tarafında arama kutusunu textarea ve arama butonunuda link yapmışlar. Kendilerine göre bir güvenlik çeşidi sanırsam.

Orta kısım (Content)

Orta kısımdaki carousel slider’i yorulmaıyorum, genel birşey. Slider’in altındaki  menülerde güzel olmuş.

Alt Kısım (Footer)

Alt kısım p yapmış sola yaslamış ul yapmış sağa yaslamış linkler arasındaki çizgileri ise border-right olarak li tagına vermiş bence çok güzel olmuş.

Şimdilik bu kadar arkadaşlar gerçekten çok yorucu birşeymiş bu eleştiri, bir daha yaparmıyım bilmiyorum ama şunu söylemek isterim amaç kullanılabilirlilik ise hiç bir sorun yok arabirimcileri taktir ediyorum, böyle büyük bir kurumda web’den anlayamayan insanların ekleme ve çıkartmak yaptırması kodların bozulmasına sebeb olabiliyor. Benim Türkcell için puan verirsen 10 üzerinden10 veririm benim dediğim uyarılar işlevselliği zorlamayacak uyarılardır.

Not bu uyarıları yaparken şunu bilmelisiniz, bu hataları zamanında bende yaptım ve illaki yapıyorumdur. Örnek verecek olursak 7 ay önce yazdığım css’e bakınca midem bulanıyor düşünün artık

Yorumlara göre bu işe devam edip etmeyeceğimi düşüneceğim, bu kadar gereksiz bilgiyi okuduğunuz için teşekkür ederim, mutlu ve huzurlu kalın.