İçerik
- 01. Duyarlı düşünmeye nasıl başlanır
- 02. 9 duyarlı tipografi ipuçları
- 03. Duyarlı web tipografisinin kuralları
- 04. Em tabanlı boyutlandırma ile duyarlı bir site tasarlayın
- 05. Öncelik kılavuzları: tel çerçevelere içerik öncelikli bir alternatif
- 06. Uzmanın duyarlı web tasarımı kılavuzu
- 07. Duyarlı ve cihazdan bağımsız formlar nasıl tasarlanır?
- 08. CSS Grid ile duyarlı bir düzen oluşturun
- 09. Web tasarımcısının Flexbox kılavuzu
- 10. Codrops Flexbox referansı
- 11. Yığınlar: Eskiz için Flexbox
- 12. Teknik RWD'de hızlandırılmış kurs
- 13. Susy ve Breakpoint ile esnek düzenler oluşturun
- 14. Adobe XD'de duyarlı kılavuzlar nasıl oluşturulur?
- 15. BBC Sport'ta CSS
- 16. Yapışkan altbilgi, beş yol
- 17. Girişe uyarlama
- 18. En iyi uygulamalarımız mobil web performansını öldürüyor
- 19. Kapsayıcı sorgularıyla duyarlı web uygulamaları nasıl yapılır
Duyarlı web tasarımı artık isteğe bağlı değildir; sitelerin bugünlerde duyarlı olması gerekiyor. Neyse ki, tasarımlarınızı oluşturmanıza ve test etmenize ve en iyi kullanıcı deneyimini oluşturmanıza yardımcı olacak pek çok harika araç olduğundan, RWD'nin uygulanması her zamankinden daha kolay.
Web sitelerinizin iyi çalışmasını ve herhangi bir cihazda harika görünmesini sağlamada size rehberlik edecek en iyi kaynaklardan bazılarını burada bulabilirsiniz. Daha yararlı kaynaklar mı istiyorsunuz? En iyi web sitesi oluşturucu ve web barındırma hizmetine yönelik kılavuzlarımız size yardımcı olmak için buradalar. Dosyaları güvenli bir şekilde saklamakla ilgileniyorsanız, bu harika bulut depolama seçeneklerine ihtiyacınız var.
01. Duyarlı düşünmeye nasıl başlanır
FreeCodeCamp'taki bu gönderide Kevin Powell, duyarlı web tasarımının artık bir trend olmadığına dikkat çekiyor; sitelerin oluşturulması beklenen yol budur ve bu, baştan itibaren duyarlı bir şekilde düşünmek anlamına gelir. Burada, tamamen duyarlı 3 sayfalık bir web sitesi oluştururken, duyarlı zihin çerçevesine nasıl girileceğini gösteriyor.
02. 9 duyarlı tipografi ipuçları
Duyarlı web tasarımı, doğal olarak, buna uyum sağlamak için duyarlı tipografiye ihtiyaç duyar. Ama bu ne anlama geliyor ve bunu nasıl uyguluyorsunuz? Önde gelen yedi web tasarımcısından, her görüntü alanında zarif, okunaklı metin oluşturma konusundaki ipuçlarını sorduk.
03. Duyarlı web tipografisinin kuralları
Duyarlı web tipografisi zordur - hem tasarım aşamalarına hem de teknik bilgiye sahip olmanız gerekir. Ancak ne kadar karmaşık olursa olsun, yanlış yapmak bir seçenek değildir, çünkü tipografi web tasarımının temel taşıdır. Doğru yapmak için bu tasarım ilkelerini ve pratik çözümleri izleyin.
04. Em tabanlı boyutlandırma ile duyarlı bir site tasarlayın
Yazı tipi boyutlandırma için em birimlerini kullanarak, sayfada yazı tipi boyutu değiştiğinde otomatik olarak yanıt veren bileşenler tasarlayabilirsiniz. Ardından, duyarlı bir yazı tipi boyutu için akıllıca bir numara ile, tarayıcının görüntü alanı genişliğine göre dinamik olarak ayarlanan bir sayfanın tamamını oluşturabilirsiniz. Ölçeklenebilir ve duyarlı tasarımlar oluşturmak için EMS'nin "göreceli" davranışından nasıl yararlanılacağını öğrenmek için bu öğreticiyi izleyin.
05. Öncelik kılavuzları: tel çerçevelere içerik öncelikli bir alternatif
Wireframe'ler, web sitelerini, uygulamaları ve diğer dijital arayüzleri tasarlamak için en yaygın kullanılan araç olabilir, ancak özellikle duyarlı tasarım söz konusu olduğunda dezavantajları da vardır. Burada Heleen van Nues ve Lennart Overkamp, tel kafeslere tercih ettikleri alternatifleri tanıtıyor: mobil ekran için içerik ve öğeler içeren, hiyerarşiye göre yukarıdan aşağıya sıralanan ve mizanpaj özellikleri olmadan öncelikli kılavuzlar.
06. Uzmanın duyarlı web tasarımı kılavuzu
Responsive Design Weekly haber bülteninin küratörü Justin Avery tarafından yazılan net dergisindeki bu kılavuz, web profesyonellerini temel bilgilerden daha gelişmiş duyarlı web tasarım tekniklerine kadar götürür.
07. Duyarlı ve cihazdan bağımsız formlar nasıl tasarlanır?
Formlar, herhangi bir dijital ürün tasarımındaki en önemli unsurlardan biridir ve ister bir kayıt akışına ister çoklu görünüm adımlayıcıya ihtiyacınız olsun, onu hem mobil cihazlarda hem de masaüstünde etkili bir şekilde çalışacak şekilde tasarlamanız gerekir. İşte bunun nasıl yapılacağı, Flexbox'ın nasıl kullanılacağına dair yararlı ipuçları ile tamamlandı.
08. CSS Grid ile duyarlı bir düzen oluşturun
CSS Izgara Düzeni, tarayıcı desteğinde her geçen gün büyüyor ve Flexbox'ın ve hatta kayan noktaların yerini almasa da, onlarla birlikte kullanıldığında yeni ve heyecan verici duyarlı düzenler oluşturmanın harika bir yoludur. Grid kullanarak duyarlı bir portföy sitesi oluşturmak için bu adım adım kılavuzu izleyin.
09. Web tasarımcısının Flexbox kılavuzu
Flexbox'ı kullanmaya başladınız mı? Bu eğitimde Wes Bos, bu güçlü araçla kavramanız için ihtiyacınız olan her şeyi sağlam bir şekilde anlamanızı sağlayacak temel kavramlara yönelik kapsamlı bir rehber sunmaktadır.
10. Codrops Flexbox referansı
Bu eksiksiz Flexbox kılavuzu, kavramları ayrıntılara girmeden takip etmesi kolay bir şekilde açıklama becerisiyle tanınan yazar Sara Soueidan tarafından yazılmıştır. Codrops kılavuzu düzenli olarak güncellenir, bu nedenle ihtiyaç duyduğunuzda geri dönmeniz için harika bir kaynaktır.
11. Yığınlar: Eskiz için Flexbox
Otomatik Yerleşim eklentisinin bir parçası olan Stacks, Flexbox teknolojisini CSS kullanmadan Sketch içinde kullanmanız için bir yol sağlar. Bu makale, kolay duyarlı tasarım için bu güçlü tekniği nasıl kullanabileceğinizi açıklamaktadır.
12. Teknik RWD'de hızlandırılmış kurs
Treehouse blogunda yazan Jerry Cao, birçok yararlı bilgiyi nispeten kısa, okunabilir bir makaleye yoğunlaştırdı.
13. Susy ve Breakpoint ile esnek düzenler oluşturun
Duyarlı sitenizi oluşturmak için bir çerçeve kullanmak istemiyorsanız, bu Sass uzantıları, her biri kendi güçlü yönlerine sahip güzel bir alternatiftir. Onlar sizin için duyarlı matematiği halledecekler, böylece siz tasarıma odaklanabilirsiniz.
14. Adobe XD'de duyarlı kılavuzlar nasıl oluşturulur?
Adobe Experience Design'ı (XD) denemeye hevesliyseniz, başlamanız için işte size iyi bir eğitim. Sürecin her tıklamasında sizi yönlendiren bir video gösterimi içerir.
15. BBC Sport'ta CSS
Bu kendi başına bir öğretici değildir, ancak burada çok fazla öğrenim vardır. İki bölümden oluşan bir dizinin ilki olan bu yazıda, ön uç geliştiricisi Shaun Bent bizi CSS'nin BBC Sport'ta nasıl yapıldığına dair ayrıntılı bir tura çıkarıyor. Bu devasa sitenin CSS temelini 9 kb'nin altında tutmayı başardılar ve bunun nasıl yapıldığını görmek büyüleyici.
16. Yapışkan altbilgi, beş yol
Yapışkan altbilgi ... bu yeterince basit olmalı, değil mi? Ne yazık ki değil. Bu altbilgiyi her cihazda doğru yere almak beklediğinizden daha yanıltıcı olabilir. Neyse ki Chris Coyier, bunu gerçekleştirmenize yardımcı olacak beş püf noktasını bir araya getirdi. hesap (), Flexbox, negatif kenar boşlukları ve Izgara.
17. Girişe uyarlama
Duyarlı tasarım sadece sayfanızın herhangi bir cihazda düzgün bir şekilde görüntülenmesini sağlamakla ilgili değildir, aynı zamanda iyi çalışmasını sağlamalısınız - ve bu, masaüstü bilgisayarların dokunmatik ekranlara ve telefonların klavyeye sahip olduğu bir dünyada girdileri kabul etmede iyi olması gerektiği anlamına gelir. Cloud Four'dan Jason Grigsby tarafından yazılan bu makalede bazı sağlam tavsiyeler var.
18. En iyi uygulamalarımız mobil web performansını öldürüyor
Göz önünde bulundurulmadan uygulandığında, masaüstü çağında tasarlanan bazı en iyi uygulamalar, mobil web performansı üzerinde zararlı bir etkiye sahip olabilir. Bu makale, sitenizin mobil cihazlarda nasıl daha iyi çalışmasını sağlayacağınız konusunda daha derinlemesine düşünmenizi sağlayacaktır.
19. Kapsayıcı sorgularıyla duyarlı web uygulamaları nasıl yapılır
Kapsayıcı sorgularını kullanarak farklı boyutlar ve çözünürlüklerde bileşenler, durumlar ve etkileşimlerle güzel, karmaşık bir web uygulamasını nasıl dönüştüreceğinizi öğrenin.
