responsive Yazı Arşivi

Responsive Web Design Test Araçları

Responsive Web Design Test Araçları

Responsive bir web sitesi hazırladıktan sonra yapmamız gereken en önemli şeylerden bir tanesi sitemizi testten geçirmektir. Bizim sitenin görüntüsünü sadece kullandığımız bilgisayar ve tarayıcı üzerinde yapmamız yetmez. Sitemizin gerçekten responsive olup olmadığını, performansını ve tüm ekranlarda nasıl görüneceğini test etmemiz gerekir.

Bu testleri yapabilmek için Google’ın bazı araçları mevcut. Bu araçları hakkında detaylı bilgiyi burada paylaştım.

En İyi Responsive CSS Framework Hangisi?

En İyi Responsive CSS Framework Hangisi?

Responsive web sayfası hazırlarken hemen hemen herkesin tercihi CSS Frameworkleri kullanmaktadır. Bunlar bize hem çok fazla hız kazandırır, hem de içerdikleri componentler sayesinde çok güzel tasarımlar ortaya çıkartmamızı sağlarlar.

Şu anda dünya üzerinde bir çok CSS framework bulunmaktadır. Bunlar arasında en popüler olanlarını aşağıda listeledim.

  • Bootstrap
  • Semantic UI
  • Foundation
  • UIkit
  • Skeleton
  • Gumby

Responsive Web Design mı Adaptive Web Design mı?

Responsive Web Design mı Adaptive Web Design mı?

Dünya’da mobil kullanımın yükselişi ve arama motorlarının mobil uyumluluğa önem vermesinden sonra tüm siteler mobil çalışmalara hız verdi. Bu aşamada ise bana en çok sorulan sorulardan bir tanesi mobil site hazırlamak için en doğru seçimin ne olduğudur.

Bu konuda 3 farklı alternatif var.

  1. Bağımsız Mobil Site
  2. Responsive (Duyarlı) Web Design
  3. Adaptive (Uyarlanabilir)  Web Design

Bağımsız mobil site oluşturmak ilk başlarda tercih edilen ancak tamamen bağımsız tasarım ve kodlar ile en zor seçenek olduğu için artık fazla tercih edilmiyor. Üstelik yapılan güncellemelerin sürekli olarak 2 farklı yerde de yapılıyor olması da çok ciddi bir iş gücü gerektiriyor.

Bunu göz önüne aldığımızda, Adaptive ve Responsive tasarımın artılarını ve eksilerini inceleyelim.

Responsive Web Design nedir?

Responsive Web Design nedir?

Web tasarımıında ben her zaman yemekler üzerinden örnekler vermişimdir :) Responsive Design konusunda da yine benzer bir örnekleme yapılmış. Bu çizim benim çok hoşuma gittiği için paylaşmak istedim.

İçerik aynı su gibidir ve su, hangi kaba koyarsanız koyun ona uyum sağlar.

Responsive Design’da tam olarak; İçeriklerimizin her türlü ekrana uyumlu olmasını sağlamaktır.

Responsive Web Design Kitabı

Responsive Web Design Kitabı

Bir süredir üzerinde çalıştığım responsive web design kitabı, ücretsiz olarak pdf formatında sizlere sunuyorum. Responsive Web Design ile ilgili tüm bilgileri bulabileceğiniz bu kitap aynı zamanda bir “canlı kitap” projesidir. Yorumlarınızla birlikte eklemeler yaparak geliştirmeye devam edeceğim bu kitabın versiyon logunu da aşağıda görebilirsiniz.

 

Responsive Web Design Kitabı İçeriği

  • Responsive web design nedir?
  • Neden responsive web design?
  • Responsive web design nasıl yapılır?
  • Responsive web design için ekran ölçüleri nelerdir?
  • Responsive design CSS media queries
  • Responsive web design için gerekli meta tagler
  • Responsive web design görsel kullanımı
  • Responsive sitelerde fontlarda hangi ölçü birimi kullanılmalı?
  • Responsive tasarımda öncelik web mi mobil mi olmalı?
  • Responsive CSS Framework karşılaştırma tablosu
  • Responsive Test: Google Resizer
  • Responsive Test: Google Mobile-Friendly Test
  • Responsive Test: Google PageSpeed Insights