Yakinda mfyz.com hem kozmetik hem de buyuk bir odak noktasi degistirecek.

Kozmetik degisiklik, sadelestirme odakli olacak ve okunabilirlik, tipografi odakli temiz bir tasarima kayacak. Navigasyonu sadelestirmeyi, yazi detaylarinin da sadece yaziya odakli olmasini hedefliyorum. En onemli sey yazacagim yazilarin duzgun, temiz gorunmesi ve rahat okunabilir olmasi olacak.

Daha buyuk degisiklik; artik ana site ingilizce acilmasi olacak. Uzun suredir paralelde yazdigim yazilari ayni zamanda ingilizce yaziyordum. Herkese acik olmasa da, isim geregi duzenli olarak is sureclerini, is hedeflerimizi ve calisma modellerimizi dokumante ediyorum. Hem yazdigim hersey ingilizce olmasi, hem de uzun suredir tukettigim ve urettigim hersey ingilizce temelli oldugu icin bundan sonra agirlikli olarak ingilizce yazacagim.

Sitenin Turkce versiyonunu alt bir alan adi veya klasor altinda sunmaya devam edecegim ve her yazimi Turkce olarak yazmayi da devam ettirecegim.
9 Aralık Pazar ´12   —   5 Yorum
Geçen hafta mfyz.com'un mobil uyumlu arayüzü üstüne çalıştım. 4 günlük bir çalışma sonucunda artık siteye mobil cihazlarınızdan uyumlu bir şekilde ulaşabileceksiniz.

Önümüzdeki haftalarda bu konuyla iligili bir yazı serisi yayınlamayı planlıyorum. Bir çok CSS çatısı zaten böyle arayüzleri hazırlamanızı sağlıyor şu anda. Ancak mfyz.com'da arayüzde herhangi bir çatı kullanmamıştım. Belki twitter bootstrap'a geçirebilirdim fakat gerek de görmedim, zaten çok basit bir arayüz yapısına sahip şu an gördüğünüz arayüz.



Masaüstü versiyonu (yukarıda görebileceğiniz şekilde), 800px genişlik ve üstündeki çözünürlüklerde görüntüleniyor. 800px'den küçük çözünürlüklerde site, mobil uyumlu yani akışkan (fluid) arayüze dönüşüyor. Bildiğiniz gibi akışkan arayüzlü sayfalar, çöznürlük bağımsız ekrana yayıldığı için farklı çözünürlüklerde sorunsuz görüntülenebiliyor. Bu açıdan çoğu mobil uyumlu sayfalar akışkan arayüzle tasarlanır.

Tablet cihazlar yan tutulduğunda, genellikle 800px üzeri çözünürlüklere sahip oldukları için mfyz.com'u masaüstünüzdegördüğünüz tasarımıyla görüntüleyebileceksiniz. Dolayısıyla eğer mobil arayüzde eksik olan bir fonksiyonalite var ise tablet cihazınızda yatay konumda tüm fonksiyonlara sahip olacak. Çünkü mobil uyumlu sayfalar fonksiyonalite bakımından sadeleştirilmiş olabilir.

Çoğu tablet dikeyde 800'den daha düşük çözünürlüğe sahip olduğu için, tablet cihazınızı dikey konuma getirdiğinizde mfyz.com'un mobil arayüzünü görmeye başlayacaksınız. Mobil uyumlu sürüm, okunabilirlik açısından font boyutu optimize edilmiş, arayüzü kaydırılan sayfalar şeklinde mobil uyumlu şekilde optimize edilmiştir.



Daha da ufak çözünürlükler için (500px'den küçük çözünürlükler için) font boyutu ve nagivasyon değşiklikleri olacak şekilde küçük ekranlı mobil sürümü görebileceksiniz.

Ayrıca aşağıdaki görselde küçük ekranlı mobil cihazlarda yatayda navigasyon dışındaki değişiklik dışında siteyi mobil uyumlu bir şekilde görebilirsiniz.

17 Kasım Perşembe ´11   —   17 Yorum
Bir suredir siteyi ufak ufak degistirdigimi farkediyordunuz, zaten ara sira da uzerinde calisiyor oldugumu soyluyordum. Herhalde son birkac yildir goreceginiz en buyuk degisiklik geldi (aslinda buyuk degisikliklerin baslangici diyebiliriz).

Tahmin ediyorum ki herkes olumsuz yonde elestirecek once. Cunku gorsel bir yaninin olmadigini biliyorum ve insanlarin bunu aradiginin da farkindayim. Fakat header'i birkac nedenden dolayi degistirdim simdilik bu nedenleri ve ileride ne yapacagimi anlatmayacagim, degistirdikce ekledigim ozelliklere gore sizden feedback isteyecegim zaten.

Ama emin olun bu bir kullanilabilirlik gelistirmesi ve bunun devaminda hem sadece header icin hem de sitenin diger parcalari icin guzel seyler geliyor.




Hangisi? (ustteki veya alttaki?)
Nexum

2 hafta önce Wanda Digital'den Nexum Boğaziçi'ne Arayüz Geliştiricisi olarak transfer oldum. Şu an 2. haftamda işlere/projelere yavaş yavaş alışmaya başladım. Yakında portfolyomda yeni markalarla karşınızda olacağım :-)

Popüler Etiketler

örnek kod dokuman portfolio php auth http ubuntu ntfs fstab blog ie internet explorer css3 html5 mdb2 pear sql injection apple windows network social facebook less css browsers support ios iphone ipad app store store in-app purchase purchase subscription verification storekit itunes connect itunes mobile firefox logo gimp editor coding wordpress plugin mysql assets javascript framework regex seo search optimization meta jquery kitap rss html wireless cms table subversion svn tool startups music zaman optimizasyon analyse procedure js url service google app developer ui ux login webkit form browser twitter istatistik sosyal medya pharma hack htaccess linux konsol chart api grafik kontrol yapıları if switch apache route router mod_rewrite macosx osx player cookie notebook laptop lisans license www subdomain redirect crossdomain calendar media ajax oyun language development style wanda proje kampanya iOS job mfyz integration howto nasıl design prepare execute mssql pgsql phpstorm jetbrains ide radio button terminal db code date diff download session parse xml mail newsletter web app nedir open source cache imza signature ruffles doritos tebrik widget deployment version control git sitemap generator ipucu compile lifestream kurulum bootstrap while digital query xhtml internet statistics box input object textarea select compiler on-the-fly applications free export mootools insanlar spam workspace server link connect ingilizce icon ikon banner opengraph fql tarih screen tytz icons xmlhttprequest share graph database