ademilter.com — v4
Kişisel web sitemi iki-üç senede bir yenileme ihtiyacı hissediyorum. Tasarım trendinin değişmesi, frontend tarafının hızlı gelişmesi ve kendimi geliştirmiş olmam sonucu yeni bir arayüze ihtiyaç duyuyorum.
Sitede sadece birkaç fotoğraf ve on satır yazı varmış gibi görünse de, siteyi kodlarken deneysel çalıştığım için aslında kendi içinde dünya kadar detay barındırıyor.
Bu süreçte neler yaşadım, hangi kaynaklardan beslendim, seçimlerimi neye göre yaptım, geliştirme sürecinde neler kullandım ve performans için hangi dopingleri kullandım gibi konuların üzerinden geçelim.
Tasarım — 🎨 🤔
Tasarım sürecine başlamadan önce bol bol araştırdım. Ne istediğime henüz karar verememişken, ne kadar tasarımcı ve geliştirici varsa hepsinin sitelerini tek tek inceledim. Ne mesaj verdiklerine, işlerini nasıl sunduklarına bakıp beğendiklerimden bir arşiv oluşturdum. Kafamda artık neyi nasıl sunacağım hakkında bir şeyler belirginleşmişti.
Sonunda şu maddelere dikkat ederek bir layout çıkarttım;
- Siteye gelen kişinin hakkımda bilmesi gereken en önemli 3–4 bilgiyi (kimim, ne yapıyorum, nerede yaşıyorum, bana nasıl ulaşır) ilk anda görmesi için bunları karşılama ekranına konumlandırdım.
- Beni anlatan, sıcak ve samimi bir fotoğraf seçmeye dikkat ettim.
- Çektiğim fotoğrafları vsco’da paylaşıyorum, yönlendirmeleri sağladım. (Burası basit gibi görünse de komplex bir yapısı var. Media bölümünde detaylı anlattım.)
- Blog yazılarımı artık medium üzerinden yazdığım için kanala yönlendirme yaptım.
- Sosyal ağlardaki profillerim için gerekli yönlendirmeleri yaptım.
Arayüz tasarımlarını Sketch uygulamasında yaptım. (Uygulama sadece macOS işletim sistemi için mevcut)
En çok zaman ayırdığım konu sanırım logo oldu. Yaklaşık altı ay boyunca aklıma geldikçe 5–10 dakika bir şeyler deneyip bıraktım. Tasarıma karar verdikten sonra defterde oluşan bütün fikirlere göz attım ve içime en çok sineni seçip detaylandırarak son haline getirdim.
Kaynaklar;
- http://www.semplicelabs.com/showcase
- http://httpster.net/
- http://www.cssdsgn.com/
- https://onepagelove.com/
- https://dribbble.com/designers
- ve daha bir sürü tasarımcının sitesi…
Font — 💀 🐼
Font’lara (yazı tipleri) olan düşkünlüğümü beni tanıyan herkes bilir. Font seçimi en önemli konulardan biriydi. Zamanla kendime göre ‘en beğendiğim’ font’ları arşiv yapmıştım. Bunların arasından en beğendiklerimden yanyana gelince bütünlüğü bozmayacak bir serif (tırnaklı) bir de sans-serif (tırnaksız) font seçmem gerekiyordu.
Serif font’lar genelde uzun yazılar için kullanılırken sans-serif font’lar kısa yazı, başlık veya ipucu için kullanılır.
Serif font için, Yeni-Zelanda’lı font tasarımcısı Kris Sowersby’nun tasarladığı Tiempos fontunu aldım. Regular[+italik], Bold[+italic] şeklinde bir paket 150$’a geldi.
Sans için henüz seçim yapmadım. Geçici süreliğine şuan bir şeyler kullanıyorum işte. anlayan anladı ahahahha 🙈 🙉 🙊
Font-face kullanım yöntemleriyle alakalı bilgilere Performans başlığı altında ulaşabilirsiniz.
Kaynaklar;
Grid — 👨👧 👨👩👧👦
Grid’i 12 kolon, ara boşlukları 30px ayarladım. Böylelikle yerine göre 4–8 veya 4–4–4 olarak konumlandırdım.
Grid için Flexboxgrid’i kullandım. Tabi üzerinde bayaa bir değişiklik yaptım. Kendime göre çeki düzen verip kullandım.
Kaynaklar;
Gulp — 💬 👷
Frontend tarafındaki bütün amele işlerimi Gulpjs’e yaptırıyorum. Gulp’ın ne olduğunu anlatmayacağım (kaynaklara bakınız) ama Gulp kullanırken olmazsa olmazlarıma değinmek istiyorum.
BrowserSync
Önyüz geliştirirken en çok işine yarayan bir eklenti nedir diye sorsanız şüphesiz ilk sırada Browsersync gelir. İsterseniz gulp ile isterseniz tek başına kullanabilirsiniz. Ne yapıyor kısmına gelirsek bildiğiniz livereload ama gelişmişi. Yeteneklerini yazmak yerine ufak bir video çektim;
Rails projelerinde gulp olmadan (sprockets olduğu için) browsersync kullanıyorum ve yazdığım kodun boyutu sadece şu kadar;
“rails server” dedikten sonra yeni bir sekmede “./node_modules/.bin/browser-sync start — config ./config/bs-config.js” demek yeterli. Artık browser sync dosyalarınızı dinliyor.
Autoprefixer
Tarayıcıların kendine has öneklerini otomatik eklemenize yardımcı olur. Gulp ile beraber enfes oluyor tabi ki. Ne demek istediğimi anlamadıysanız ben susayım kendisi konuşsun.
CSSnano
Çok sayıda css sıkıştırıcı var ama bunun gibisi yok. Yine kendi sitesi ne demek istediğimi anlatır.
Kaynaklar;
CMS=WordPress — 🐘 💨
Biraz bakındım bu sefer farklı bir cms kullanayım diye. WordPress’ten memnun olmadığım için değil; belki güzel ve yeni bir şeyler çıkmıştır, hem öğrenmiş hem deneyimlemiş olurum diye ama gördüm ki en iyisi hala WP :)
Php’nin esnekliği ve basitliğiyle yine bildiğim yoldan gidiyorum.
Kaynaklar;
- https://generatewp.com/generator/
- https://twitter.com/m_uysl 💛 (wp konusunda ilk adresim)
Media — 🗻 🤖
Evet en can alıcı kısma geldik. Sitede hepi topu 3–4 fotoğraf olsa da arkasında ince ince işlenmiş bir sistem var. Öncelikle fotoğrafların her ekranda düzgün görüntülenmesini istiyordum.
Orjinal boyutları w:1536×h:2301 olan bir fotoğrafın her cihazda istediğim alanının görünmesini sağlamak için ayrı boyutlarda kaydetmem gerekiyordu.
- Mobil — w:600 × h:auto
- Tablet Dik— w:800 × h:650
- Tablet Yatay ve Desktop — w:1200 × h:900
- Desktop Large — w:auto × h:1300
Bunun için imgix servisini kullanarak focalpoint özelliğinden yararlandım. Kaynak olarak AmazonS3 de bağlayabiliyorsunuz.
Yani akış tam olarak şöyle çalışıyor;
- S3 Bucket’a fotoğrafı atıyorum — asd.jpg
- imgix ile fotoğrafı çağırıyorum — http://adem.imgix.net/asd.jpg?w=600&q=60
hepsi bu kadar. fotoğrafı çağırırken şuradaki dökümana göre istediğim gibi özelleştiriyorum.
Özetle, orjinali yukarıdaki gibi olan fotoğrafı sadece query ile tanım yaparak böyle veya böyle çağırabiliyorum. Bu arada tanımlarda &auto=format göndererek webp destekleyen tarayıcılarda fotoğrafı webp olarak da kulanabilirsiniz (performans için önemli).
Fotoğraflar için performansla alakalı içeriğe “Performans” başlığı altından ulaşabilirsiniz.
Kaynaklar;
Performans — 🐝 💨
Performans için kullandığım araçları, eklentileri ve bütün teknik detayları madde madde anlatıyorum.
✔️ respimage.js
Adından da anlaşılacağı gibi “Responsive image” için polyfill. Yani picture elementini (ve srcset, sizes gibi img niteliklerini) desteklemeyen tarayıcılarda kullanabilmemize yardım ediyor.
Böylece her ekran boyutuna göre farklı kaynaklar kullanmamıza olanak tanıyor. Bu da mobil için daha ufak dosya boyutlarında görsel yükleyerek performans artışını sağlıyor.
- https://github.com/aFarkas/respimage
- Alternatifi: https://scottjehl.github.io/picturefill/
- https://cloudfour.com/thinks/responsive-images-101-definitions/
✔️ lazysizes.js
Yine respimage’i yazan arkadaşın yazmış olduğu bir eklenti. Bu eklenti ise SEO dostu lazyloading.
Yani sayfadaki görseller ekrana gelmeden istekte bulunmuyor, bu da gereksiz isteklerden kurtarıp siteyi ciddi derecede hızlandırıyor.
✔️ SVGOMG
Twitter‘da takip edenler çok fazla emoji kullandığımı bilirler. Wp’in kendi içinde sayfaya dahil ettiği bir emojijs kütüphanesi var. Her tarayıcıda aynı görünmesi için kullandığınız emojileri kendi kütüphanesindeki emojilerle değiştiriyor. Kesinlikle çok güzel bir özellik ama kullandığı svg dosyaları sıkıştırılmamış olduğu için PageSpeed Insights kızıyor 😨
Wp emojiler için twitter’ın açık kaynak dağıttığı twemoji kütüphanesini kullanıyor. Öncelikle bütün emojileri SVGO’dan geçirerek kendi server’ıma taşıdım (template dizinine).
Daha sonra ufak bir kod parçasıyla emoji görsellerinin yolunu değiştirdim ve %60 daha ufak svg dosyalarına kavuşarak google ile barıştık.
- https://github.com/svg/svgo
- https://github.com/jakearchibald/svgomg (svgo web app)
- https://github.com/twitter/twemoji
✔️ Inline CSS
İstek sayısını azaltmak, sayfanın hızlı derlenmesini sağlamak adına türlü türlü tekniklerden biri daha.
Sayfanın görünen kısmına ait css kodlarını head alanı içinde inline olarak yüklüyoruz, geri kalan css dosyasını sayfa yüklendikten sonra çağırıyoruz. Bu da böyle uğraştırmalı ama performans açısından önemli bir teknik. (google da bu tekniği öneriyor)
Yukarıdaki kodda gördüğünüz gibi css kodum az olduğu için direkt gömmeyi tercih ettim.
✔️ Font-face
Bu konuda FOUT, FOFT, FOIT, preload gibi türlü türlü font kullanım teknikleri var. Burada hepsini tabiki anlatamam ama sizi aydınlatacak kaynaklar ekledim.
Benim kullandığım yöntem en basiti, ufak bir trick ile çözdüm font olayını. Font dosyasına media=”none” diyerek sayfaya yansımasını kesiyorum. Dosya yüklendikten sonra media=”all” diyerek fontu sayfada geçerli kılıyorum.
- Loading CSS without blocking render
- Font Face Observer
- https://css-tricks.com/fout-foit-foft/
- The Web Fonts: PRELOADED
- A Comprehensive Guide to Font Loading Strategies
- Font Family Reunion
✔️ DNS Prefetching
kullanıcı linke tıklamadan önce browserın ilgili domain adını resolve etmesi.
kullanıcının yaklaşık 200–300 ms daha az beklemesini sağlar. — kaynak
✔️ Cache
Cache için sitenizin nginx dosyasına ufak bir ekleme yapmanız gerekiyor.
Wordpress kullananların mutlaka WP Super Cache kullanmaları gerekir. Eklentiyi WP ekibi kendi yazdığı için güvenle kullanabilirsiniz.
.htaccess ayarlarını yapmayı unutmayın.
