Posts made in Mart, 2010

Smush.it ile resim dosyalarınız daha az yer kaplıyor

21 Mar 2010 tarihinde eklendi. Blog | 0 yorum

Smush.it ile resim dosyalarınız daha az yer kaplıyor

En başından beri her web tasarımcı için önemli bir sorun olarak süregelen resim dosyalarının kaliteleri ve kapladığı boyutla ilgili en kolay ve en eski çözüm Photoshop’taki “Save for web” komutudur herhalde. Ona rağmen ya dosya boyutu fazla olur ya da resmin kalitesinden ödün vermemiz gerekir. Sonuç olarak resim dosyalarını web siteleri için düzenlemeden olduğu gibi kullanmaya devam ederiz. Böyle olunca da hem sunucularımızda resim dosyaları fazla yer kaplar hem de tarayıcılarda resimlerin geç yüklenmesine neden olur.

İşte bu noktada, çok kullanışlı bir resim düzenleme aracı olan Smush it yardımımıza yetişiyor…

Smush.it

Yahoo tarafından geliştirilen ve ücretsiz olarak kullanıma sunulan düzenleme aracı Smush.it tam bir kullanıcı ve sunucu dostu.  Bu araç sayesinde, resim dosyalarındaki gereksiz bayt fazlalıklarını silinerek dosya boyutu küçültülüyor. Ve en önemli nokta, bu işlem sonrasında görüntü kalitesinde hiç bir kayıp olmaması. Böylelikle resim kalitesinden hiç ödün vermeden daha küçük boyutlarda resim kullanarak, hem bant genişliği hem de yükleme hızı bakımından kazanç sağlamış oluyoruz. JPG, PNG ve GIF dosyalarını görüntü kalitesinden kayıp yaşamadan %30‘a kadar sıkıştırma işlemi gerçekten oldukça karlı bir durum bence.

Nasıl kullanılıyor?

Kullanımı oldukça basit. Anasayfadaki URL bölümüne en fazla 5 adet olmak üzere sunucumuzda yer alan resimlerin URL linklerini yapıştırıp, Smush butonuna basıyoruz. Hemen sonrasında küçültme işlemi başlıyor ve sonuç işlem raporu ile birlikte görüntüleniyor. Sistemin tek olumsuz yanı, en fazla 1 MB büyüklüğündeki resimleri kabul ediyor olması sanırım. Gerçi bu sınır, web sitelerinde kullanılan resim dosyaları için yeter de artar bile. Tabi çalışmalarını yüksek çözünürlüklerde sitesinde yayınlayan fotoğrafçılardan değilseniz.

Alttaki örnekte gördüğünüz üzere 408 KB boyutundaki bir resimden tam 61 KB fazlalığı atarak %13′lük bir kazanç elde ettik.

Smush.it‘i sadece resim sıkıştırma değil, aynı zamanda formatları birbirine dönüştürmek için de kullanabiliyoruz. Ama Smush’ın asıl amacı dosya boyutunu küçültmek olduğundan, dosyayı bir diğer formata dönüştürürken boyutun büyüdüğünü farkederse işlemi gerçekleştirmiyor.

Kısacası Smush.it’i şöyle özetleyebiliriz:

  1. Kalite kaybı yaşamadan resim dosyalarınızı küçültür.
  2. Sunucularınızda bant genişliği kazancı sağlar.
  3. Resim dosyalarının tarayıcılarda hızlı açılmasını sağlar.
  4. Formatlar arası dönüştürme işlemini gerçekleştirir.
Devamını Oku

Html kodlamasında işinize yarayacak ipuçları

20 Mar 2010 tarihinde eklendi. Blog | 0 yorum

Html kodlamasında işinize yarayacak ipuçları

Html kodlamasını kendisi yapan web tasarımcı arkadaşlar, genellikle bunun için kullandıkları html editörün araçları ile kodlamanın kendiliğinden oluşmasını sağlayarak html yapısını oluştururlar. Ben bunu pek tercih etmiyorum. Elbette bir editör (Dreamweaver) kullanıyorum ama bütün html kodlamasını sıfırdan tek tek, karakter karakter yazmayı tercih ediyorum. Diğer metoda göre daha fazla zamanımı alıyordur belki ama oluşabilecek hatalar ve daha sonra yapacağım düzenlemelerde html yapısına hakim olabilmek için, daha da önemlisi gereksiz satırlarla html’in şişmesini önlemek için bence siz de bu yolu kullanmalısınız. Hem hazır araçlar bana kalırsa html bilginizi köreltebilir.

Bu makalede html kodlamasını yaparken dikkat etmemiz gereken ipuçlarından bahsetmek istiyorum. Bu ipuçlarını dikkate alarak, html yapısının daha düzenli, daha sade ve dolayısıyla daha hızlı olmasını sağlayabilirsiniz. İpuçlarına geçmeden, daha önce yayınladığım Html kodlarınız düzenli mi? başlıklı makalemi okuyabilirsiniz. Şimdi gelelim bahsettiğimiz ipuçlarına…

1) CSS Sıfırlama Kullanın

Html ve CSS kodlamasını oluşturmaya başlamadan önce mutlaka aşağıdaki CSS sıfırlama satırlarını CSS dosyasının en başına ekleyin. Böylece bütün tarayıcıların, css değerlerini aynı yorumlamasını sağyalabilirsiniz ve her tarayıcı için ayrı ayrı düzenleme yapma zahmetinden kurtulursunuz. Özellikle CSS kullanmaya yeni başlayanların çok işine yarayacak, en basit çözüm yolu CSS sıfırlamadır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2) @import kullanmayın

CSS dosyaları @import komutu ile de html sayfasına eklenebilir. Hatta birden bir html sayfasına birden fazla css dosyası ekleyeceğiniz zaman daha kullanışlı da olabilir. Ancak CSS dosyasını çağırırken daha yavaş çalışan bir komut olduğu için @import kullanmayı tercih etmemenizi tavsiye ederim. Onun yerine stylesheets şeklinde ekleyerek CSS dosyalarınızın okunmasını hızlandırabilirsiniz.

Yani;

1
2
3
4
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>

kullanmak yerine,

1
2
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

şeklinde yazmanızı tavsiye ederim.

Bu konuda, CSS dosyalarının yüklenme hızlarını her iki metodla birlikte test ederek elde edilen sonuçları bu adresten inceleyebilirsiniz.

3) Javascript’i sayfanın en altına ekleyin

Bir alışkanlıktır gidiyor. 90′ların sonunda kullanmaya başladığımız javascriptleri nedense çoğunlukla <head>…</head> tag’leri arasına yerleştiriyoruz.  Bu kullanım şekli, sayfa açılırken önce javascriptin yüklenmeye başlamasıyla, sayfanın açılmasını bariz bir şekilde yavaşlatıyor. Tarayıcıların web sitelerinizi daha hızlı açmasını istiyorsanız, alışkanlıktan kurtulup javascript satırlarını sayfanın en altına </body> ‘nin hemen öncesine eklemeni tavsiye ediyorum. Böylece önce site içeriği daha sonra da javascript yüklenecektir.

1
2
...
<script src="jquery.js?ver=1.3.2" type="text/javascript"><!--mce:0--></script>

4) CSS stillerinizi Html olarak yazmayın

Sayfanın CSS değerlerini attribute yani özellik şeklinde Html’e ekleyerek CSS ve Html’i içiçe kullanmak, Html yapısını düzensiz ve kirli gösterir. Aşağıdaki kullanım şekli bu düzensiz ve karışık yapıya örnektir.

1
<a style="background: #069; padding: 3px; font-weight: bold; color: #fff;" href="http://wwwozdtasarim.com">OZD Tasarım</a>

CSS değerlerini bu şekilde yazmak bazı durumlar için kullanışlı olsa da çoğu zaman karışık bir görünüme yol açıyor. Bu nedenle ben de tercih etmiyorum. CSS dosyasını,

1
<link rel='stylesheet' type='text/css' href='style.css'>

şeklinde sayfanıza ekleyin ve böylece Html yapısında en sade ve düzenli görünümü elde edebilirsiniz.

Devamını Oku

Htaccess dosyası ile 5 önemli ayar

18 Mar 2010 tarihinde eklendi. Blog | 3 yorum

Htaccess dosyası ile 5 önemli ayar

Son zamanlarda sıkça adını duyduğumuz htaccess dosyası ile, özellikle WordPress gibi içerik yönetim sistemi kullanan blog sahipleri bir takım güvenlik ayarları yapmaya ihtiyaç duyuyor. Tabi sadece WordPress için değil bütün siteler için kullanılan bir güvenlik dosyası bu. Sadece WordPress ile yaygınlaştığını söyleyebilirim. Ben de bunun üzerine .htaccess dosyası ile yapılabilecek önemli 5 ayardan söz etmek istiyorum. Ama öncelikle bilmeyenler için bu dosyanın ne olduğuna bir bakalım.

Htaccess nedir?

İlk olarak htaccess’in Notepad gibi en basit bir metin editörüyle bile oluşturulabilen bir ASCII dosyası olduğunu söyleyebiliriz. Htaccess dosyası başındaki “nokta” işaretinden de anlaşılabileceği gibi adı olmayan, sadece uzantıdan ibaret basit bir dosyadır. Ve sunucularınızda genellikle ana dizinde bulunur ancak güvenlik dolayısıyla çoğu zaman kendini gizlediği için görünmeyebilir.

Htaccess ne işe yarar?

Htacces kısaca, sunucunuzdaki dosya ve klasörleri gizleme ve şifreleme yoluyla kullanıcılara erişimi kapatarak güvenliği artırmanıza yarar. Tabi her şey bununla bitmiyor. Arama motoru optimizasyonu, bant genişliği, veri sıkıştırma ve yönlendirme gibi bir çok işlem de bu dosya ile yapılabilmektedir.

Bu makalede değineceğim işlemler de özellikle güvenlik konusunda işinize yarayacak.

1) Şifre Koruması

Klasör şifreleme işlemine, ilk önce şifrelemek istediğimiz klasörün içinde kullanıcı adı ve şifreden ibaret olan bir  .htpasswd dosyası oluşturarak başlıyoruz. Burada dikkat edilmesi gereken nokta; kullanıcı adının düz metin, şifrenin ise şifreli karakterlerden oluşması gerekiyor.  Şifreyi http://www.kxs.net/support/htaccess_pw.html adresinden oluşturabilirsiniz. Daha sonra .htaccess dosyanıza aşağıdaki satırları ekleyin.

1
2
3
4
AuthName "Klasör Adı" //Şifrelemek istediğiniz klasörün adını yazın
AuthType Basic
AuthUserFile /full/path/to/.htpasswd // htpasswd dosyasının yolu.
Require valid-user

2) Klasörlere Erişim

Bu metod ile istediğiniz kullanıcıların IP adreslerine engelleme ya da izin atayarak klasörlerinize kişilere özel erişim hakkı sağlayabilirsiniz.

Klasöre hiç kimsenin erişememesini istiyorsanız htaccess dosyasınıza;

1
2
#deny all access
deny from all

IP adreslerine göre erişim ayarları yapmak istiyorsanız;

1
2
3
4
#deny all access
deny from all
allow from xxx.xxx.xxx.xxx # tek ip adresi
allow from xxx.xxx.xxx./24 # ip bloğu

3) Hata Sayfaları

Sitenizde ziyaretçiniz tarafından bir sayfa bulunamadığı durumlarda, htaccess dosyası ile istediğiniz hata sayfasına yönlendirme yapabilirsiniz.

1
2
3
4
ErrorDocument 401/errors/401.php
ErrorDocument 403/errors /403.php
ErrorDocument 404/errors /404.php
ErrorDocument 500/errors /500.php

Bu ayarı yaparken Internet Explorer‘la ilgili dikkat etmeniz gereken bir nokta: 512 bayttan daha küçük hata sayfası hazırlarsanız Internet Explorer sizin sayfanızı gözardı edip kendi hata sayfasına yönlendirir. Böyle olmasını istemiyorsanız hata sayfalarını oluştururken 512 bayttan daha büyük olmasına dikkat edin.

4) Bant Genişliği Koruması

Htaccess dosyanıza ekleyeceğiniz Php sıkıştırma modülü sayesinde verilerinizi sıkıştırarak aşırı bant genişliği kullanımını önleyebilirsiniz.
Bunun için aşağıdaki satırları htaccess dosyanıza ekleyin. Eğer sunucunuzda phpsuexec dosyası bulunuyorsa, bu satırları htaccess’e değil php.ini dosyasına eklemeniz gerekiyor.

1
2
3
<ifModule mod_php4.c>
php_value zlib.output_compression 16386
</ifModule>

5) Hotlink Koruması

Hotlink, sizin sitenizde (sunucunuzda) bulunan resim ya da videolara ait linklerin başka sitelerde kullanılmasına deniyor kısaca. Böyle durumlarda ise olan sizin bant genişliğinize oluyor tabi. Yani sizin isteğiniz dışında fazla bant genişliği kullanımı ortaya çıkıyor.

Bunun önüne geçmek için öncelikle nohotlink.gif adında bir resim dosyası oluşturun. Sonra aşağıdaki satırları .htaccess dosyasına ekleyerek kendi sitenize göre düzenleyin. Böylece sitenize ait dosyaların başkaları tarafından kullanımı durumunda, dosyanın yerine nohotlink.gif resmi görünecektir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
RewriteEngine on
# BEGIN Hotlink Koruması
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_URI} ^/nohotlink-resminin-bulunduğu-klasör
# Hotlink resimlerinin olduğu dizini korumasız yapmalıyız ki, sonsuz dönüye girmeyelim.
RewriteRule ^.*$ - [L]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?siteniz\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?facebook\.com [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+\.)?facebook\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?google\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?google\.com\.tr [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp|JPG|JPEG|GIF|PNG|BMP)$ http://www.siteniz.com/nohotlink.$1 [L]
# Her format için ayrı ayrı nohotlink imajı oluşturmanız gerekir. Her tarayıcı her format için aynı imajı yorumlayamayabilir.
</IfModule>
# END Hotlink Koruması
Devamını Oku

Web Tasarım Kaynakları #4

17 Mar 2010 tarihinde eklendi. Blog | 0 yorum

Web Tasarım Kaynakları #4

Web tasarım kaynakları serisinin 4.sü ile karşınızdayım. Yine tasarımlarınızda işinize yarayacağını düşündüğüm, oldukça kullanışlı kaynakları bir araya getirmeye çalıştım. Her zaman olduğu gibi bu kaynakta da ücretsiz indirebileceğiniz ve her web tasarımcının arşivinde olması gereken yazı tipleri, photoshop fırçaları, actionları ve dokuları, hazır PSD dosyaları, ikon setleri bulunuyor.

OZD Tasarım‘da özellikle  web tasarım kaynakları serisine olan ilginizden dolayı teşekkürler. Yorumlarınızı bekliyorum. Bakalım serinin bu haftaki bölümünde neler var:

Peach Sundress Yazı Tipi

Adelle Yazı Tipi

Champagne & Limousines Yazı Tipi

Just Play Photoshop Action

Magic Pack Action

Kumaş Doku Seti

Metal Dokusu

50 Grid Photoshop Fırçası

Abstract Photoshop Fırça Seti

Bold Gradient Paketi

Kip Gradient Paketi

Tv Shows İkon Seti

Senary İkon Seti

Oxe İkon Seti

İçecek Kutusu – PSD Dosyası

Animal Pattern

Devamını Oku

Müşterilerin web tasarımcıda aradığı 5 özellik

16 Mar 2010 tarihinde eklendi. Blog | 4 yorum

Müşterilerin web tasarımcıda aradığı 5 özellik

Aslında başlığı “5 maddede freelance tasarımcı” şeklinde kısaltabiliriz. Çünkü burada web tasarımcıdan kastım özellikle freelance tasarımcılar. Ve bu makalede bahsettiğim müşterilerin aradığı özelliklere dikkat ederek en iyi freelance tasarımcılardan biri olma yolunda ilerleyebilmeniz mümkün. Öyleyse freelance tasarımcılar olarak bu makaleyi iyi bir freelance tasarımcıda olması gereken özellikler şeklinde değerlendirerek okuyabilirsiniz.

Bir müşteri ile anlaşıp, tasarım, site kurulumu ve sonrasındaki teknik destek aşamalarında müşterilerinizle aranızda olması gereken ilişki konusunda hiç özeleştiri yaptığınız oldu mu? Olaya bir de şu yönüyle bakalım. Uzun süredir web tasarımı yaptığınız halde, şimdiye kadar bir müşterinizin tavsiyesi ya da referansı ile başka bir müşteri kazanmadıysanız, artık oturup özeleştiri yapma vaktiniz gelmiş demektir.

Tasarımlarınız bir yana, freelance tasarımcılarda olması gereken nitelikler ve müşterilerinizle aranızda olması gereken ilişki konusunda değerlendirme yapıp, kendinizi bu konuda geliştirerek ve yenileyerek onların gözünde daha iyi bir itibar kazanabilirsiniz.

Bu konuda dikkat etmeniz gereken özellikler, aynı zamanda müşterilerin freelance tasarımcılarda aradığı özelliklerdir. Ve bu özellikleri 5 ana başlıkta toplayarak bu konuda neler yapmanız gerektiğine göz atabiliriz.

Sorumluluk


Çalışma takviminizi her müşterinize özel bir sorumlulukla oluşturmanız gerekir. Hiç bir müşteriniz,  daha büyük bir proje üstünde çalıştığınız için kendi sitelerinin gecikmesini istemez. Müşteriniz, kendisinin her zaman sizin için önemli olduğunu hissetmek ister. Bu nedenle bütün müşterileriniz sizin gözünüzde aynı önem seviyesine sahip olmalı ve her biri ile özel bir sorumluluk bilinciyle çalışmanız gerekmektedir.

O an hangi müşteriniz için çalışıyorsanız,  o müşterinizin, kendinizi o işe adadığınızı hissetmesini sağlayın. Böylece o da kendisine düşen sorumluluğu yerine getirmek isteyecek ve site içeriği, resim dosyaları ve siteyle ilgili gerekli olan diğer önemli dökümanları size zamanında temin edecektir.

Yaratıcılık

Portfolyonuzu gözden geçirin. Çünkü müşterileriniz sizinle anlaşmadan önce bunu yaparlar. Daha önce yaptığınız işlerde ne kadar özgün ve yaratıcı olursanız olun, yaratıcılık müşterinizin isteğine göre değişeceğinden, onların ne istediğini iyi anlamanız ve onlara hayal ettiklerinden daha iyisini vermeniz gerekir. Müşteri, portfolyonuzdaki en iyi sitenin kendi sitesi olduğuna inanmak ister. Bunu başarmak için her tasarımınızda yeni bir teknik ya da efekt denemekten çekinmeyin. Buton, navigasyon menü ya da form elementlerinde daha önce hiç kullanmadığınız görsel efektleri kullanıp, müşterinize farklı bir şeyler sunabilirsiniz.

Şahsen ben her web site tasarımında özellikle form elementlerinde internette hiç rastlamadığım efektler denemekten çok keyif alıyorum. Ortaya çok da etkileyici işler çıkabiliyor. Basit bir örnekle input:focus özelliğine farklı değerler tanımlayarak iletişim formundaki satırlara alışılmışın dışında bir canlılık kazandırabilirsiniz.

Titizlik

İyi bir tasarımcı titiz olmak zorundadır. Ana sayfa tasarımı haricinde alt sayfalarda ve sitedeki bütün objelerin tasarımında aynı titizliği göstererek mükemmelliyetçi bir bilinçle çalışmanız, müşteri memnuniyeti açısından çok önemlidir. Müşterinin gözünü sadece ana sayfa tasarımı ile boyamaya çalışmak yerine, aynı önemi alt sayfalara da göstererek, işinizi (dolayısıyla müşterinizin web sitesini) ne kadar önemsediğinizi onlara kanıtlayabilirsiniz. Ve böylece onların güvenini kazanırsınız.

Ayrıca tasarım sürecinde müşterilerinizin önerilerine ve yapıcı eleştirilerine açık olup, tasarımın onların istekleri doğrultusunda son şeklini almasını sağlayın. Bu, müşteri memnuniyeti açısından çok önemli bir davranıştır.

Anlayış

Karşılıklı anlayış her iki tarafa da avantaj sağlar. Eminim her tasarımcı, müşterisinin başlangıçtan sonuca kadar her aşamada mutlu olmasını ister. Bu nedenle öncelikle tasarımcı müşterisine karşı anlayışlı olduğunu göstermek zorundadır. Geçmişten günümüze kadar herkesin bildiği “müşteri her zaman haklıdır” sözünü dikkate alarak müşterilerinizin isteklerine gösterdiğiniz anlayış onları memnun eder. Ancak tasarım işinde onları kırmadan “hayır” demeyi de bilmeniz gerekiyor. Çünkü tasarım sizin işiniz ve tasarımı müşterinizden daha iyi anlarsanız.

Müşteriler tasarımın her aşamasında müdahalede bulunmak isteyebilirler. Eğer müşteriniz farkında olmadan tasarımın estetiğini ve güzelliğini bozacak bir değişiklik isterse, kibar bir dille bu değişikliği yapmanın tasarım açısından iyi olmayacağını belirtebilirsiniz. Böyle yaptığınızda, onlar da muhtemelen sizi anlayışla karşılayacaktır. Yine de istedikleri değişikliği görmek istediklerinde, iş takviminizi aksatmayacağına eminseniz bu değişiklik için ayrıyeten bir maliyet çıkarmamaya çalışın. Karşılıklı anlayış, çalışma sürecinin ve uzun süreli iş ilişkisinin en sağlıklı yoludur.

Özgüven

Özgüven, kibirden çok farklı bir şeydir. Özellikle de çok yüksek fiyatlarla çalışan, sektörün ünlü freelance tasarımcıları bir süre sonra müşterisi için “en iyi tasarım”ı yapmak zorunda hissetmeyecek kadar özgüvenli olabiliyorlar. Bunu bence özgüvenden çok kibir ile ifade edebiliriz. Müşteri “ben böyle tasarladıysam bir bildiğim var” diyebilecek kadar kendine fazlasıyla güvenen bir tasarımcı yerine, müşterisinin istediği değişiklikleri önemseyen, aynı zamanda da ne yaptığından emin olacak kadar özgüvenli bir tasarımcıyla çalışmayı tercih eder. Bir tasarımcı, zaman içerisinde müşterilerinden aldığı olumlu eleştiriler sayesinde özgüven kazanmaya başlar. Bu da yine müşteri memnuniyetiyle ilgili bir durum olduğundan onların isteklerine cevap verebilmeniz çok önemlidir.

Müşteriler tasarımcıda başka ne arar?

Eminim müşteriler, en iyi web tasarımcı ile çalışmak için yukarda sıraladığım niteliklerden daha fazlasını arıyorlardır. Ancak benim gözlemlediğim kadarıyla belirlediğim ana başlıklar bunlar. Aklıma gelmeyen ama sizin emin olduğunuz başka özellikler varsa bu konuda yorumlarınız ve eleştirileriniz benim için çok önemli.

Freelance tasarımcılar olarak başka hangi özelliklere sahip olmalıyız? Bir müşteri olarak freelance tasarımcılarda hangi özellikleri ararsınız? Cevaplarınızı bekliyorum.

Devamını Oku

35+ Sosyal Medya İkon Setleri

16 Mar 2010 tarihinde eklendi. Blog | 0 yorum

35+ Sosyal Medya İkon Setleri

Daha önce yayınladığım sıradışı sosyal medya ikon setleri ‘nin üstünden baya zaman geçmiş. Umarım işinize yaramıştır.  Sosyal medya ikon setlerine 35+ setlik bir kaynakla devam ediyorum. Ve önceki sosyal medya ikon setlerinden kat kat güzel olduklarına inanıyorum. Blog kullanıcıları ve web tasarımcılar için çok kullanışlı ve kaliteli ikonlar bu kaynakta ücretsiz olarak sunuluyor. Bu ikonları bloglarınıza ve web sitelerinize ekleyerek içeriklerinizin sosyal medya ortamlarında yayınlanmasını kolaylaştırabilirsiniz. Her ne kadar tasarımcıları tarafından ücretsiz olarak paylaşılıyor olsa da kullanırken bir sorun yaşamamak için indirmeden önce, sayfada lisansla ilgili bir sözleşmenin olup olmadığını kontrol etmenizde fayda var.

Güle güle kullanın:)

Black paint splatter ikon seti

Grunge peeling stickers ikon seti

Crystal clear bubble ikon seti

Glossy waxed wood ikon seti

RSS cheese ikon seti

Retro Grunge Stripes İkon Seti

Orange grunge stickers ikon seti

Blue Chrome Rain ikon seti

Social web button seti

Networking and Bookmarking ikon seti

Social grunge ikon seti

vector-social-media-ikon seti

Worn out soda cans-social-ikon-seti

Hand drawn social ikon seti

,

Social icons made of wood

3D Social media ikon seti

Elegant social media ikon seti

Woven fabric social media ikon seti

WHITE MAGIK İkon Seti

sibusinho twitter ikon seti

Social trucks ikon seti

Plechi social media ikon seti

Sylwia Besz İkon Seti

Sosyal Medya Vektör İkon Seti

In-focus simple white ikon seti

Glowing social niche ikon seti

Jeans-social-media-ikon seti

Iconshock’s free social ikon seti

IconsPedia Web 2.0 Gift İkon Seti

Blogperfume İkon Seti

40 Unique Twitter ikon seti

Red and white pearl ikon seti

Twitter icons promo set

Glowing Neon Social Networking Ikon Seti

Crumpled paper social ikon seti

Blue Jelly Social Media Ikon Seti

Black paint splatter ikon seti

Devamını Oku

Jquery İle PHP İletişim Formu

15 Mar 2010 tarihinde eklendi. Blog | 6 yorum

Jquery İle PHP İletişim Formu

Freelance web tasarımcılar statik web sitesi işi aldığında istisnalar durumlar haricinde yazılımcıya ihtiyaç duymazlar. Bu istisna durumların en başında da çoğu zaman iletişim formları gelir. Siteye sadece bir iletişim formu eklemek için de bir yazılımcı ile anlaşmak, web tasarımcının işine gelmez:) Ancak bu noktadan sonra, internette bütün özellikleri ile çalışan bir php iletişim formu bulmak ve onu siteye eklemek web tasarımcılar için bazen zor ve can sıkıcı olabiliyor.

Hazır Jquery de web siteleri için trend haline gelmişken bunu php iletişim formu oluşturmak için kullanmamak olmazdı. Php iletişim formu arayan web tasarımcıların çok işine yarayacak bir uygulama bu. Bütün özellikleri ile çalışmaya hazır bir Php / MySql iletişim formu… Onay (Submit) butonunda ve görsel düzenlemesinde Jquery kullanılarak çok şık bir hale getirilen bu iletişim formunu diğerlerinden ayıran en büyük özelliği; sadece mesaj göndermekle kalmayıp, ayrıca bu mesajları veritabanında saklayıyor olması. Böylece iletişim formundan yollanan bütün mesajların yedeğini alabiliyorsunuz.

Mesajları veritabanında saklayan tablo aşağıdaki gibi:

1
2
3
4
5
6
7
8
9
CREATE TABLE CONTACT(
pk_contact     INT UNSIGNED NOT NULL auto_increment,
name            VARCHAR(120) NOT NULL,
email             VARCHAR(120) NOT NULL,
website        VARCHAR(120) NOT NULL DEFAULT "",
message        VARCHAR(300) NOT NULL,
added_date     TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
primary key(pk_contact)
)type=innodb DEFAULT CHARACTER SET utf8    COLLATE utf8_general_ci;

Bu tablo sayesinde mesajı yollayan kişinin adı, e-mail adresi, mesaj tarihi ve mesajın kendisi veritabanında saklanıyor.

İletişim Formunun Diğer Özellikleri

1) Tabloda görülen alanların karakter sınırlarını değiştirebilirsiniz. Ancak php dosyasında da aynı değişiklikleri yapmayı unutmamanız gerekiyor.

2) Formdaki bütün kontroller ve onaylar sunucuda gerçekleşiyor. Böylece, eğer kullanıcı tarafından bir alan boş bırakılırsa ya da yanlış doldurulursa hata uyarısı görüntüleniyor.

3) İletişim formu tarafından bir mesaj yollandığında, yani veritabanına yeni bir mesaj eklendiğinde yöneticiye e-mail yoluyla yeni bir mesajın geldiği haber veriliyor.

4) İletişim formuna ait 2 farklı tasarımda CSS şablonu bulunuyor. Web sitenize uygun olanını kullanabilir ve üstünde istediğiniz değişikliği yapabilirsiniz.

Kurulum

Kurulum için yapmanız gereken tek şey, indirdiğiniz .zip dosyasının içinde yer alan veritabanı scriptini (db_main_script.sql) çalıştırmak ve config.php dosyasındaki veritabanı ayarlarını (aşağıda görünen ayarları) yapmak.

1
2
3
4
define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'ContactForm');

Ayrıca isteğe bağlı olarak “mesajın konusu” gibi e-mail ile ilgili bölümleri de düzenleyebilirsiniz.

Kurulumun tamamlanması için tabi ki bütün dosyaları sunucunuza yüklemeniz gerekiyor.

Kullanmaya başlamadan önce önizleme link ile formu test edebilirsiniz. Güle güle kullanın:)

Önizleme | İndir

Devamını Oku

Haftalık OZD #4

15 Mar 2010 tarihinde eklendi. Blog | 1 yorum

Haftalık OZD #4

4. haftayı da sorunsuz tamamlayarak OZD Tasarım’ın 1 ayı doldurduğunu görmek mutluluk verici. Geçtiğimiz haftaya şöyle bir baktığımda, yine okunmaya değer makaleler ile tamamlamışız haftayı. Önceki haftalara göre sayıca 1 – 2 makale eksik olsa da en fazla ziyaretçi sayısının bu  haftaya ait olması emin adımlarla ilerlediğimizi gösteriyor diyebilirim. Gösterdiğiniz ilgi ve bıraktığınız yorumlar için teşekkürler. Özellikle Alışveriş Sitelerinde Sıkça Görülen 15 Hata başlıklı makalem en çok okunanlar arasında yerini aldı şimdiden. Hemen sonrasında her zaman olduğu gibi Web Tasarım Kaynakları en çok ilgi gören makaleler arasında geliyor.

4. haftada neler yayınladığıma artık göz atabiliriz sanırım.

Web 3.0 ile internet akıllanıyor

Web Tasarım Kaynakları #3

40+ Ücretsiz El Yazısı Fontları

CSS3 & Jquery Uygulamaları

Alışveriş Sitelerinde Sıkça Görülen 15 Hata

Devamını Oku

Alışveriş Sitelerinde Sıkça Görülen 15 Hata

11 Mar 2010 tarihinde eklendi. Blog | 3 yorum

Alışveriş Sitelerinde Sıkça Görülen 15 Hata

Son 10 yılda, hepimizin bildiği üzere online alışveriş sistemleri bir çok sektöre yeni pazarlar sağladı. Dolayısıyla, müşteri hizmetleri gideri olmadan tüm dünyaya hizmet sağlayabilen 7/24 açık alışveriş siteleri kurmak, iş dünyasında çok büyük bir avantaj olarak karşılandı. Böylece -neredeyse- bütün ticari şirketler çok kısa bir sürede internetteki yerlerini alarak online alışveriş hizmeti sunmaya başladılar. Bana kalırsa bir çoğu, zaman kaybetmeden hizmet vermeye başlamak için tasarımı ve alışveriş sitelerinde dikkat edilmesi gereken hususları önemsemeden hazır e-ticaret sistemlerini kullanarak aynı hatayı yapmış oldular. Tabi bu noktadan sonra “diğerlerinin aynısı” olmak kaçınılmaz oldu ve  bir çoğu gibi hedefledikleri satışı gerçekleştiremeyerek yok olup gittiler.

Alışveriş sitesi açmak, sadece e-ticaret yazılımını kurup, ürünleri veritabanına girmek kadar basit bir iş değildir. Bu işte önemsenmesi gereken en önemli noktalardan biri; alışveriş sitesini hayata geçirirken ilk olarak tasarımı ve prensipleri ile müşteriye profesyonel ve güvenilir görünmeyi amaçlamaktır. Hazır e-ticaret yazılımları genellikle sadece yazılımcıların elinde şekil aldığından bu iki niteliğe de sahip olmazlar. Çünkü yazılımcıların uzmanlık alanları o sitenin hatasız çalışmasıdır. Bu noktada gereken tasarımcı desteği de göz ardı edildiğinden sonuç yukarda bahsettiğimden farklı olmuyor malesef.

Bu paragraftan itibaren, alışveriş sitelerinde sıkça karşılaştığımız 15 hatadan ve nasıl düzeltilebileceğinden bahsetmek istiyorum. Aslında bir çoğunun düzeltilmesi oldukça kolay. Tasarımcılarla birlikte özellikle alışveriş sitesi sahiplerinin aşağıda sıralayacağım hataları ve çözümlerini dikkate almasını tavsiye ediyorum.

Başlamadan önce bu konuda ayrıntılı bilgi için Smashing Magazine‘i kaynak olarak kullandığımı belirtmek isterim.

1) Eksik ürün bilgisi

Gerçek hayatta yaptığınız alışverişlerde bir ürüne dokunarak ve her açıdan görerek inceleme hatta deneme imkanınız olur. Bu noktadan sonra ürün açıklaması konusunda çoğu zaman fiyat bilgisi yeterlidir. Ancak online alışveriş sitelerinde bu böyle işlemez. Müşteriniz, bir ürünü satın almadan önce ürünle ilgili bütün bilgilerin kendisine verildiğinden emin olmak ister. Aksi takdirde bir kaç ürün resmi ve gelişi güzel yazılmış eksik ürün bilgisi müşterinin ürün hakkında bütün bilgileri öğrenmesi için yeterli olmaz. Böyle olunca da rakiplerinizden daha ucuza da satsanız müşteri kaybedebilirsiniz.

Ne yapılmalı?

Ürün bilgilerinin bütün detayları ile birlikte sitede yer almasına dikkat etmek gerekir. Örneğin giyim sitenizdeki bir tişört için renk: Mavi, beden: Small yazmanız yeterli olmayacaktır. Kıyafetlerde bedenler markadan markaya değişiklik gösterebilirler. Bedenle ilgili ölçüleri uzunluk birimleriyle de belirtmeniz gerekir. (boyu: 78 cm, omuz genişliği: 60 cm gibi) Ayrıca kumaşın türü ve dayanaklılığı ile ilgili de bütün bilgilerin yer almasına dikkat etmelisiniz. Kısacası müşterilerinizi yanıltmamak için, sadece ürün resmine bakarak anlaşılamayacak bütün ürün bilgilerini açıklama bölümüne özenle ve eksiksiz olarak eklemelisiniz.

Örnekler: Siteler ingilizce olsa da ne demek istediğimi görebilirsiniz.

2) İletişim bilgisini gizlemek

Müşteriler kredi kartı bilgilerini vermeden önce gerçek bir şirketten alışveriş yaptıklarından emin olmak isterler. Ayrıca alışveriş esnasında bir sorun yaşandığı zaman karşılarında konuşabilecekleri ve yardım alabilecekleri gerçek bir insan bulmak isterler. Eğer iletişim bilgileriniz sitenizde yer almazsa ya da yer aldığı halde müşterilerinizin göremeyeceği şekilde gizlerseniz, onların güvenini kazanamazsınız. Onlar da sizden alışveriş yapmaktan çekinirler.

Ne yapılmalı?

İletişim bilgilerinizi sitenizde görülmesi kolay bir yere yerleştirmelisiniz. Her sayfada görülebilecek alanlar, sitenin header ve footer bölümleridir. Bu bölümde e-mail adresiniz ve telefon numaranızın mutlaka yer almasına dikkat edin. Hatta mümkünse ana menüye “İletişim” butonunu da ekleyerek iletişim formunun ve ulaşım adresinizin yer aldığı bir sayfanızın olması, müşterinizle aranızdaki güvenin anahtarıdır. Özellikle teknik özellikleri önemli olan teknolojik ve pahalı ürünler satıyorsanız, müşteriniz mutlaka sizinle kolayca iletişime geçmek isteyecektir.

Örnekler

3) Uzun ve karışık ödeme işlemi

Özellikle ülkemizde alışveriş sitelerinde sıklıkla yapılan bir hata bu. Bir ürün almak istediğimizde, ödeme işlemi için teslimat adresi, fatura adresi, kredi kartı bilgileri, onay gerçekleştirme derken tam 4 sayfalık form doldurma ve onaylama işlemlerinden geçiyoruz. Bu durum ürünü beğenip siteden satın almak üzere olan müşteriyi neredeyse ödeme aşamasında vazgeçirecek kadar sıkıcı olabiliyor.

Ne yapılmalı?

İdeal bir ödeme işleminin, adres ve kredi kartı formları ile birlikte tek sayfada gerçekleştirilmesi müşterilere her zaman kolaylık sağlar. Mümkün olduğunca siz de bu kolaylığı sağlamaya çalışın. Formları sayfaya iki sütun halinde yanyana dizerek, sayfanın aşağı doğru uzamasını önleyerek bu düzenlemeyi yapabilirsiniz.  Eğer eskisi gibi 4 sayfalık bir işlem gerçekleştirmek zorunda kalırsanız ödeme formlarını, tab sistemi ya da sayfanın devamı gibi aynı sayfada kayarak açılan yeni formlar şeklinde birbirlerine bağlayarak kullanıcıya kolaylık sağlayabilirsiniz.

Örnek

4) Sipariş vermek için üyelik zorunluluğu

Bu da  bir önceki madde ile dolaylı olarak bağlantılı aslında. Dışarda alışveriş yaparken mağazalar sizi abone yapmak zorunda bırakıyor mu hiç? Geçici ve sahte bilgilerle sitenize üye olmak ile hiç üye olmamak arasında site güvenliği açısından hiç bir fark göremiyorum. Aksine tam sipariş esnasında müşterinizden üyelik istemek onları kaçırabilir.

Ne yapılmalı?

Bu problemin çözümü çok basit. Sipariş vermeden önce üyelik istemek yerine, siparişi verdikten sonra üye olmalarını sağlayabilirsiniz. Nasıl mı? Sipariş verirken girdikleri bilgileri, sipariş sonrasında saklayarak bir sonraki alışverişlerinde kendileri için kolaylık olacağını hatırlatın. Ve üye olmak için geriye sadece bir e-mail adresi ve şifre kalıyor. Bu da onların zoruna gitmeden üye olmalarını sağlayacaktır.

Örnekler

5) Yetersiz site içi arama motoru

Ne almak istediğini bilen müşteriler, çoğunlukla site içi arama motorunu ve arama sonuçlarında görünen filtreleri kullanırlar. Sitenizin sağlıklı sonuç veren ve kategorilere göre filtreleme yapabilen bir arama sistemine sahip olduğundan emin olun. Şahsen ülkemizin en ünlü alışveriş sitelerinde bile örneğin cep telefonu aradığımda arama sonuçlarında otomobilden, mutfak eşyasına kadar yüzlerce alakasız sonuçla karşılaşıyorum.

Ne yapılmalı?

E-ticaret yazılımınızın çok iyi yazılmış bir arama motoruna sahip olduğundan, test ederek emin olmalısınız. İdeal bir arama motorunda iki kelime aynı anda arandığında, bu iki kelimenin aynı anda yer aldığı arama sonuçları öncelikli olarak görüntülenmelidir. Aksi takdirde “siyah otomobil” diye aradığınızda “siyah ceket”, “otomobil temizleme kiti” gibi içinde siyah ve otomobil geçen yüzlerce sonuçla karşılaşırsınız. Ayrıca her arama sonucunun hangi kategoriye ait olduğunu gösteren bir bölüm de yer almalı ve her kategori için özelleştirilmiş filtreler doğru çalışmalıdır. Bunlarla birlikte, arama sonuçlarının tarih, fiyat, alfabetik sıra gibi kriterlere göre dizilebilmesi sağlanarak müşterinin aramadığı halde sonuçlarda görünen ürünleri kolayca elemesi sağlanabilir.

Örnek

6) Yetersiz müşteri hizmetleri

Bu hatayı, yukarıda bahsettiğimiz iletişim bilgilerinin gizlenmesi ile ilgili olan maddeyle ilişkilendirebiliriz. Müşteri bir sorunla karşılaştığında, sitenizden yardım alması için bütün kolaylıkları ve imkanları sağlamanız gerekir. Sitede karşılaşılan teknik ve satış sorunları ile ilgili en kolay iletişim yolunun hangisi olduğunu müşterinize açıkça yansıtın. Müşteriler çoğu zaman müşteri yardım formlarını doldurmak yerine direkt olarak e-mail adresinize sorunlarını yazmayı tercih ederler.

Ne yapılmalı?

Eğer telefonla ulaşılabilecek müşteri destek hattınız yoksa sitenizde ticket sistemini kullanabilirsiniz. Ayrıca yardım sayfasında mutlaka -ürün ve para iade koşullarını da içeren- Sıkça Sorulan Sorular bölümü oluşturmalısınız.

Örnekler

7) Küçük ürün resimleri

Müşterileriniz ürünlere fiziksel olarak dokunarak inceleyemediği sürece, ürünün görsel detayları konusunda dikkatli olmalısınız. Bir kaç küçük ürün resmi bu konuda kesinlikle yeterli olmaz.

Ne yapılmalı?

Ürün resimlerini tasarımın düzenini bozmayacak şekilde mümkün olduğunca büyük kullanmaya ya da küçük resimlerin üstüne gelindiğinde bütün detaylar görünebilecek kadar büyüyecek şekilde ayarlanmalı.

Örnekler

8 ) Sadece bir adet ürün resmi

Müşteriler ürünleri farklı açılardan ve bütün detayları ile görmek ister. Ve genellikle alışveriş sitelerinde her ürün için 1 adet resim kullanılıp geçilir. Bu da müşterinin ürünün görünümü hakkında yeterli bilgiyi alamamasına, dolayısıyla müşterinin kaçmasına yol açar.

Ne yapılmalı?

Sizin de anladığınız gibi cevap çok basit: Daha fazla ürün resmi eklenmeli. Bir çok açıdan, varsa farklı renk seçenekleri ile birden fazla ürün resmi eklemekten çekinmeyin. Müşterilerin yeterli bilgiyi alabilmesi için ideal ürün resmi sayısı 4 – 6 arasıdır. Böylelikle nasıl bir ürün satın aldıklarından emin olabilirler.

Örnekler

9) Yetersiz “Alışveriş Sepeti” tasarımı

E-ticaret siteleri için en önemli sayfalardan biri hiç şüphesiz “alışveriş sepeti” sayfalarıdır. Müşteriye bu sayfada, sepete eklediği ürünün adetini artırabilmesi ya da diğer seçeneklerden yararlanabilmesi gibi imkanlar sağlanmalıdır.

Ne yapılmalı?

Sepet sayfasına ürün sayısını değiştirebilme özelliği ekleyebilirsiniz. Ve sepetim sayfasına “alışverişe devam edin” butonu ekleyerek, kullanıcının yeniden ürün sayfalarına gitmesini sağlayın. Daha da iyisi, ürünleri bulundukları sayfadan ayrılmadan sepete eklemelerini sağlayabilirsiniz.

Örnekler

10) Ödeme seçeneklerinin yetersizliği

Bir çok alışveriş sitesinde sadece kredi kartı ile ödeme seçeneği bulunuyor. Ve bir çoğu da sadece peşin ödemeyi kabul ediyor. Peki ya müşteri kredi kartı ile ödemek istemiyorsa ya da taksitli ödeme yapmak istiyorsa? Hedeflediğiniz satışı yakalamak istiyorsanız ödeme seçeneklerinizi artırarak müşterilerinize kolaylık sağlamalısınız.

Ne yapılmalı?

Ödeme sisteminize, mümkün olduğunca Havale/EFT, Taksitli Ödeme ve Paypal gibi bir çok ödeme seçeneğini eklemeye çalışın. Ve ödeme seçeneklerinizi sitenizin kolay görünen bir bölümüne yerleştirin. Her müşteri farklı koşullarla ve tercihlerle alışveriş yapmak isteyebilir. Kim müşteri kaybetmek ister ki?

Örnekler

11) İlgili ürünler bölümünün olmaması

Büyük alışveriş sitelerinde birbirleriyle alakalı olan ürünlerin gruplandırılarak, müşterilere “bunlar da ilginizi çekebilir” şeklinde tavsiye edildiğini muhtemelen görmüşsünüzdür. Örneğin bir dizüstü bilgisayarın ürün açıklamalarını incelerken, sayfanın altındaki “ilginizi çekebilecek ürünler” bölümünde bilgisayar çantası tanıtımı görebilirsiniz. Ancak bu özellik bir çok alışveriş sitesinde bulunmuyor.

Ne yapılmalı?

Siz de aynı şekilde, alışveriş sitenizde ürün detay sayfanızın alt kısmına ürünle ilgili başka ürünlerin tanıtımlarını ekleyerek “ilginizi çekebilecek ürünler” bölümü oluşturabilirsiniz. Böylece satışlarınızı artırmak için büyük avantaj sağlamış olursunuz.

Örnek

12) Karışık menü ve kategori yapısı

Bir alışveriş sitesinde aradığınız ürünü bulmayı zorlaştıran en önemli sebep sitedeki menülerin ve kategorilerin karışık olmasıdır herhalde. Karışık kategori ve menü yapısını nasıl düzeltebiliriz bir bakalım.

Ne yapılmalı?

Öncelikle, ürünleri sitenize yerleştirmeden önce kategorilerin (alt kategorilerle birlikte) ve navigasyon menünün hiyerarşik ve semantik yapısını dikkatlice düzenleyin. Burada dikkat etmeniz gereken bir nokta var. Farklı olan bir kaç ürün için ayrı kategori açıp, kategori menüsünü daha fazla dallandırmak yerine “Diğer”, “Aksesuarlar” gibi genel bir kategori adı ile tek bir grupta toplamaya dikkat edin. Yoksa kategorileriniz müşterileriniz için can sıkıcı olabilir.

13) Kargo bilgilerinin olmaması

Sitenizde kargo bilgilerinin yer almaması için geçerli bir neden söyleyebilir misiniz? Kullanıcılar bir siteden alışveriş yaptığında ödeyecekleri toplam tutarı bütün detayları ile birlikte bilmek isterler. Ve bu tutarın içinde kargo ücreti de vardır.  Ayrıca teslimatın kaç gün süreceği hakkında kullanıcıyı bilgilendirmek profesyonelliğin bir parçasıdır.

Ne yapılmalı?

Büyük kargo firmalarının ürüne göre kargo ücretini hesaplayan sistemleri vardır. Ve bu sistemleri eklenti şeklinde sitenize yerleştirebilirsiniz. Her hangi bir sebepten dolayı bu eklentiyi kullanamayacaksanız, sitenizdeki ürünler için ortalama sabit bir kargo ücreti belirleyin ve bunu ürün açıklamasına mutlaka ekleyin. Ve normalden fazlasıyla ağır ve büyük ürünler için ek ücret alınacağını da belirtin.

Örnekler

14) Site kuralları ve kullanıcı sözleşmesinin olmaması

Müşteriler sitenizden alışveriş yapmadan önce teslimat ve iade kurallarını ya da sitenizden yaptıkları alışverişlerde ne gibi haklara sahip olacaklarını bilmek isterler. Günümüzde bir çok sitede site kuralları ve kullanıcı sözleşmesi yer alasa da, hala hiç yer almayan ya da sıkça sorulan sorular bölümünde kısaca değinip geçilen bir çok alışveriş sitesi var. Sitenizde bu kuralların yer alması müşterinizin olduğu kadar sizin de lehinize olacaktır. Müşterilerin kendi haklarını bilmesi, gelecekte sizi gereksiz baş ağrılarından kurtarabilir.

Ne yapılmalı?

Sitenizin Footer, Ana Menü ya da yan sütun gibi sabit bir yerine mutlaka site kuralları ve kullanıcı sözleşmesi adı ile bir link yerleştirerek, sırf bu kurallar için özel sayfalar hazırlayın. Ayrıca ürün ödeme sayfasında onay butonunun hemen üstüne “site kurallarını ve kullanıcı sözleşmesini okudum, kabul ediyorum” şeklinde bir onay kutucuğu eklemenizi tavsiye ederim. Emin olun böylelikle alışveriş sonrasında yaşanacak bir çok problemin önüne geçmiş olacaksınız.

Örnekler

15) Ürünü ön plana çıkarmayan tasarımlar

Alışveriş sitelerinde asıl hedefiniz elbette daha fazla ürün satmaktır. Bunu sağlamak için de tasarımlarınızda ürünleri ön plana çıkarmanız gerekir. Sitenize girildiğinde öncelikli olarak sattığınız ürünlerin dikkat çektiğinden emin olmalısınız. Kullanıcının dikkatini dağıtacak reklam bannerları gibi elementler onları başka yerlere yönlendirerek sitenizden uzaklaşmalarına neden olabilir.

Ne yapılmalı?

Bu konuda, önce dışarda alışveriş yaptığınız mağazaları düşünerek hareket edin. Ürünleri nasıl ön plana çıkardıklarına bakın. Vitrin mantığını sitenize uyarlamaya çalışın. Siz de sitenizde vitrin bölümü ya da ürüne özel banner tasarımları ekleyerek, kullanıcının dikkatini en çok satmak istediğiniz kampanyalı ürünlere çekebilirsiniz.

Bu konuda aşağıdaki örneklerden yararlanabilirsiniz.

Makale ile ilgili yorumlarınızı ve eleştirilerinizi bekliyorum.

Devamını Oku

CSS3 & Jquery Uygulamaları

11 Mar 2010 tarihinde eklendi. Blog | 5 yorum

CSS3 & Jquery Uygulamaları

Her geçen gün CSS 3 ve Jquery’nin kullanımı yaygınlaşıyor ve ikisinin birlikte kullanımıyla, flash (ve actionscript) ile uğraşmadan yaratıcılığın sınırlarını zorlayan şahane uygulamalara rastlıyorum. Yapılan çalışmaları gördükçe CSS’in geleceğini iyice merak etmeye başladım şahsen.Jquery de aynı şekilde Javascript’in animasyon ve görsel efekt konusunda gelebileceği en iyi yerde şu an.

“Bunu kesinlikle web sitemde kullanmalıyım” dediğim ve  sizin de mutlaka beğeneceğinizi düşündüğüm tam 10 adet  CSS3 & Jquery çalışmasını bir araya getirdim. Özellikle düzenli olarak takip ettiğim Tympanus.net bu konuda etkileyici örnekler sunmaya ve ücretsiz paylaşıma açmaya devam ediyor. Ben de bu makaleyi hazırlarken  Tympanus’tan faydalandım.

Bu uygulamaları kullanmak için dosyaları indirip, javascript ve css dosyası ile birlikte html sayfasındaki ilgili yapıyı kendi sayfanıza ekleyin. Daha ayrıntılı bilgi için resimlere tıklayarak istediğiniz uygulamanın orijinal sayfasına gidebilir ve ingilizce açıklamalardan faydalanabilirsiniz. Ayrıca yine hatırlatmakta fayda var: Bu uygulamaların bir çoğu Internet Explorer’da çalışmıyor. Bütün özellikleri ile birlikte görüntülemek için Safari’yi tercih edin.

Kayarak açılan buton

Photoshop.com‘da Flash kullanılarak yapılan bir butondan etkilenerek hazırlanmış sevimli bir uygulama. Ve hiç imaj dosyası kullanmadan sadece CSS 3 ile şekil verilip Jquery ile de hareketlendirilerek hazırlanmış.

Demo | İndir

Kayarak ortaya çıkan nagivasyon menü

Menüdeki butonların üstüne gelindiğinde kayarak ortaya çıkan butonlarda gidilecek sayfayla ilgili bir de açıklama yer alıyor. Menünün siyah-beyaz olması da ayrı bir güzellik katmış.

Demo | İndir

Grunge tarzı açılı sayfa ve kayan menü

CSS 3′ün transform özelliği ile sayfanın ve menünün belli bir açıda görünmesi sağlanarak hazırlanmış konsept bir çalışma. Butonlar üstüne gelindiğinde farklı açılarda kayarak ortaya çıkıyor.

Demo | İndir

Yeniden boyutlandırılabilen menü

Bazı durumlarda navigasyon menünüzü bulunduğu alana göre kısaltmak ya da uzatmak isteyebilirsiniz. Bunu, CSS 3 ve biraz da Jquery ile hazırlanmış bu çalışmayı kullanarak sağlayabilirsiniz.

Demo | İndir

Kayarak ortaya çıkan navigasyon menü

Üstüne gelindiğinde ikon ile birlikte ortaya çıkan butonlardan oluşan çok güzel bir navigasyon.

Demo | İndir

Gündüz & Gece Animasyonu

Gündüzden geceye dönüşümü animasyon şeklinde gösteren, ağırlıklı olarak Jquery ile hazırlanmış oldukça yaratıcı ve güzel bir çalışma.

Demo | İndir

Reklam Panosu Şeklinde Resim Galerisi

Reklam panosunda hareketli değişen resimlerden oluşan çok yaratıcı bir resim galerisi.

Demo | İndir

Kayarak gelen mesaj penceresi

Artık neredeyse her sitede kullanılan mesaj pencerelerine Jquery ile hareket vererek, bu örnekteki gibi kayarak gelmesini sağlayabilirsiniz.

Demo | İndir

Foto galerileri için mouse over efekti

Özellikle foto galerilerinizde kullanabileceğiniz Jquery ve CSS 3 ile yapılmış çok şık bir efekt. Demoda resimlerin üstüne gelince oluşan efekti görebilirsiniz.

Demo | İndir

Gerçek zamanlı değiştirilebilen stiller

Bu uygulama ile sayfanızın görünümünü gerçek zamanlı olarak değiştirebilirsiniz. Demodaki style menüsü ile ne demek istediğimi uygulamalı olarak görebilirsiniz.

Demo | İndir

Devamını Oku
2 / 41234