30 Faydalı Duyarlı Web Tasarım Dersleri
Demek ki, sonumuzun sonuna geldik. "Duyarlı Web Tasarım Haftası", Bu geceki yazı dizinin sonuncusu olacak. Farklı cihazlarda görüntülendiğinde isteğinize cevap vermek için bu kodları kullanma becerilerinizi geliştirmenize yardımcı olmak için hepimiz çalışıyoruz. Ve bunu yapmak için, biz sunuyoruz 30 Duyarlı Web Tasarım Öğreticileri çevrimiçi bulundu. Bu liste ayrıntılı bir liste değildir, ancak her türlü ekran boyutuna uyacak uyumlu bir web sitesi tasarlamanın temellerini anlamaya başlamanızı sağlar.
'Binanın Yıkılması' dersi ile başlayacağız, bir “RWD: 101 dersi” gibi, “Bina Oluşturmaya Başlama” egzersizlerine geçmeden önce, kavramın asılmasının sağlanması için almanız gereken dersler.
Son olarak, yatay mizanpajlar, 'elastik' videolar, açılır menüler ve slayt tepeden akordeon gezinmeleri, küçük resimler ve tablolarla ilgili yapışkan sorun içeren dersler sunacağımız bir 'Daha Fazla Yap' bölümü ile sona ereceğiz.
Ama önce…
İşte bu hafta başlarında yazarlarımız tarafından öne sürülen iki öğretmenin özeti:
Yanıt veren web sitesi navigasyonu
Thoriq Firdaus tarafından - [Öğreticiyi görüntüle]
İşte size yanıt veren web sitesi navigasyonunuzu yapmanıza yardımcı olacak bir öğretici. Bir web sitesinin en önemli yönlerinden biri, sitenin farklı bölümlerinde gezinmenin ne kadar kolay olduğu. Bu eğitimde bunun CSS3 ile nasıl optimize edileceğini öğrenin.
Duyarlı Özgeçmiş
Jake Rocheleau tarafından - [Öğreticiyi görüntüle]
Eğer bir web uzmanıysanız ve çevrimiçi bir özgeçmiş zaten kariyerinizin bir parçası ve parçasıysa, o zaman özgeçmişinizi de duyarlı hale getirme fırsatını yakalamanız gerekir. İşverenlerin ve müşterilerin sizi herhangi bir cihazda bulmasını kolaylaştırın. Ve bu sırada, kendi özgeçmişin geliştirici olarak yapabileceklerinin bir portföyü olarak ikiye katlanır..
Buzu kırmak
Şimdi neredeydik? Ah evet, hadi biraz buz patlatma eylemi başlatalım!
Responsive Web Tasarımında Başlangıç Kılavuzu
Nick Petit tarafından - [Öğreticiyi görüntüle]
Bu eğitici, yeni başlayanlar için, web duyarlı tasarımın ne anlama geldiğini, nasıl aydınlandığını ve diğerlerinin yanı sıra akışkan ızgaraları ve medya sorguları hakkındaki açıklamaları açıkladığı için harika bir başlangıç noktasıdır. Öğreticinin altında listelenen kaynakları da inceleyin.
Duyarlı Web Tasarımına Giriş: Video
Nick Petit tarafından - [Öğreticiyi görüntüle]
Bu, 9 dakikaya yakın süren, yanıt veren web tasarımının ne olduğu, nasıl olduğu, bir web sitesinin tasarımı üzerindeki etkisi ve duyarlı bir web tasarımı yapımında hangi unsurların yer aldığını gösteren bir derstir. . İlk önce kodlamaya girmeden yanıt veren web tasarımının ne anlama geldiğini anlamak istiyorsanız, bu videoyla başlamalısınız..
Herhangi Bir Web Sitesini Duyarlı Bir Siteye Dönüştürme
Rochester Oliveira tarafından - [Öğreticiyi görüntüle]
Bu, temel bilgilerden başlayan, ancak işletim sistemi ve web sitenizi yanıt veren döndüğünüz tarayıcılar ve web sitesi farklı cihazlardan görüntülendiğinde etkilenen öğeler dahil olmak üzere her şeyi bit parçaya ayıran başka bir derstir. Yazar ayrıca, çalışmanızı çok daha kolay hale getirmenize yardımcı olacak bazı WordPress ve jQuery eklentilerine de sahipti..
3 Adımda Duyarlı Tasarım
Nick La tarafından - [Öğreticiyi görüntüle]
Bu öğretici, meta etiketler, HTML yapısı ve tüm önemli medya sorguları ile nasıl duyarlı bir web tasarımı üretebileceğinizi açıklayacaktır. Anlamak için CSS bilgisine ihtiyacınız var…
Duyarlı Bir Web İçin Tasarlama
Max Luzuriaga tarafından - [Öğreticiyi görüntüle]
İşte size yanıt veren web tasarımı için bir rehber olduğu kadar öğretici olmayan bir makale. Bununla birlikte, yazar tam anlamıyla size duyarlı web tasarım yapmanın ve yapılmayacağını söyler. Bazı özelliklerin neden yeterince duyarlı olmadığı, oranlar ve modüller ile nasıl çalışılacağı hakkında açıklamalar var ve hepsinden iyisi, nispeten kısa ve emilmesi kolaydır..
Yanıt veren Web Tasarımı: Görsel Bir Rehber
Andrew Gormley tarafından - [Öğreticiyi görüntüle]
Metin dolu öğreticiler uygun seçenekler değilse, bunun yerine bu video öğreticiyi deneyin. Hala oldukça teknik ama daha iyi hissettiriyorsa, fazla okuma yapmak zorunda değilsiniz. Yaklaşık 25 dakika sürüyor ve video yapımcısı kodları koyduğu parçalar arasında hızlı bir şekilde ilerliyor ve ardından kodların ne yaptığını açıklamak için geri dönüyor..
İnşaata Başla
Pekala, hadi bazı duyarlı tasarımlar oluşturmaya başlayalım.
Sıvı Izgaraları
Ethan Marcotte tarafından - [Öğreticiyi görüntüle]
Izgara söyleyin ve 'sert yapılar' deyin, akışkan olun ve tarayıcıya baskı uyguladığınızda ekranın bir tarafından alt veya üst veya yanlara akabileceğini düşünün; akışkan ızgaralarının tasarımınızı nasıl daha duyarlı hale getirmelerine yardımcı olabileceğini tam olarak anlamak için muhtemelen bu eğitime göz atmanız gerektiğini düşünebilirsiniz..
Sıvı görüntüleri
Ethan Marcotte tarafından - [Öğreticiyi görüntüle]
Bu yazının sonunda, Ethan Marcotte'ın kim olduğunu bilmelisin. İşte bir ipucu: web duyarlı tasarımları için kavram ve terim ile gelen kişi. Adı, bu listedeki diğer tüm eğitmenlerde hemen hemen ortaya çıkacak, bu nedenle neden doğrudan Üstadın kendisinden alınan sıvı görüntüler hakkında tavsiye almıyorsunuz??.
Duyarlı Web Tasarımında Ölçeklendirilebilir Gezinme Kalıpları
Michael Mesker tarafından - [Öğreticiyi görüntüle]
Bu eğitimde, yazarın büyük ölçekli, duyarlı bir web tasarım projesi üzerinde çalışmaktan öğrendiği dersler anlatılmaktadır. Kullanıcı dostu ve duyarlı sonuçlar için yapılandırması daha kolay şablonların nasıl oluşturulacağı hakkındaki 'adımlarını' okuyun. Masaüstü, tablet ve mobil görünümler için arayüzleri en iyi şekilde nasıl tasarlayacağınızı anlamada perde arkasına harika bir bakış.
CSS3 Medya Sorgularıyla Duyarlı Web Tasarımı
Nick La tarafından - [Öğreticiyi görüntüle]
Ve HTML5 ve CSS3 ile tarayıcılar arası duyarlı bir web sitesi şablonu tasarlamayı öğrenmenizi sağlayan mükemmel bir ders. Bu adım adım bir yaklaşımdır ve medya sorgularının uygulanmasından önce ve sonra medya sorgularının etkisini daha iyi anlamak için bir web tasarımı demoları vardır..
CSS Etkileri: Metin Yükseklikleriyle Eşleşmek için Boşluk Görüntüleri
Zoe Mickley Gillenwater tarafından - [Öğreticiyi görüntüle]
Bu öğretici, tarayıcı penceresinin nasıl yeniden boyutlandırıldığına bakılmaksızın, beraberindeki metne hizalamak için sabit genişlikte görüntülerin boyutlarını ve aralıklarını değiştirme hilesini öğrenmenizi sağlar.
Medya Sorgularına Sahip Uyarlanabilir Düzenler
Aaron Gustafson tarafından - [Öğreticiyi görüntüle]
Uyarlamalı veya esnek mizanpajları CSS ortam sorgularıyla nasıl kullanacağınızı öğrenin. Tasarımınızı çift sütunlu görünüme veya tek sütunlu görünüme uyarlamanın yanı sıra tasarımı iPhone ve iPad için hazırlamayı öğrenmek için alıştırmayı takip edin.
Duyarlı Resimler: Bağlam Duyarlı Resim Boyutlandırma ile Deneme
Scott Jehl tarafından - [Öğreticiyi görüntüle]
İşte cep telefonundan ilke yaklaşımını kullanan bir eğitim. Bu teknik, görüntülerin daha büyük ekran çözünürlüklerinde, eksi görüntü isteklerinde ve UA koklamada kullanması için daha büyük bir boyut belirler..
Daha fazla yap
Elastik Videolar
Nick La tarafından - [Öğreticiyi görüntüle]
Bu öğretici, tarayıcı pencereniz yeniden boyutlandırıldıkça videoların ölçeklendirilmesiyle ilgilidir. Bu aslında bir CSS numarasıdır ve işin püf noktasını eğitimde görmek için bir demo vardır..
Görüntü Bölümlerini Gizleme ve Gösterme
Zoe Mickley Gillenwater tarafından - [Öğreticiyi görüntüle]
Öğretici, aslında ekranın çözünürlüklerine bağlı olarak görüntü parçalarının nasıl gösterileceğini veya gizleneceğini açıklayan yazarın kitabından alınmıştır. Ekran boyutu değiştiğinde görüntüleri tam olarak nasıl kırpacağınızı, sınırlı alan olduğunda tam görüntünün sadece bir kısmını gösterdiğinizi size öğretir.
CSS3 ile Duyarlı İçerik Gezgini
Mary Lou tarafından - [Öğreticiyi görüntüle]
Kullanıcıların sizin tarafınızda dolaşması için daha meraklı bir yol mu tercih ediyorsunuz? Daha sonra, bazı harika geçişlerde nasıl kodlanacağını öğrenmek için bu eğitim kitabını okumalısınız: solma, slaytlar, döndürmeler ve ölçeklendirme. Geçişler esasen belirli kodlamalarla gösterilen veya gizlenmiş içerik katmanlarıdır..
Duyarlı bir Web Tasarım Şablonu Yaratın
Harry Atkins tarafından - [Öğreticiyi görüntüle]
Bu bir duyarlı üretmek için kısa bir öğretici web şablonu hem masaüstünde hem de iPhone'da çalışır.
Duyarlı Yatay Düzen
Mary Lou tarafından - [Öğreticiyi görüntüle]
Bu öğretici, birkaç kaydırılabilir içerik paneline sahip yatay bir düzen oluşturmayı öğretir. kullanma Türlerin Kökeni Örnek metin olarak, kitabın her bölümü tam tarayıcı modunda yan yana yerleştirilen sütunlarla ayrılır, ancak yeterince küçük boyutlara küçültüldüğünde, düzen tamamen dikey kayan bir 'kitap'a dönüşür..
Küçük Ekranlar İçin Bir Menüyü Bir Aşağıya Dönüştürün
Chris Coyier tarafından - [Öğreticiyi görüntüle]
Bu öğretici, tarayıcı penceresi dar olduğunda veya bir mobil cihazdayken bir menüyü açılır listeye nasıl dönüştürebileceğinizi gösterir. Gezinme seçeneklerinden ödün vermeden yerden tasarruf etmek için sayfanın sağ üst köşesindeki bağlantı satırı açılır menüye dönüştürülür.
Esnek Slayttan Yukarıya Akordeon
Mary Lou tarafından - [Öğreticiyi görüntüle]
Ekran boyutuna ve çözünürlüklerine bağlı olarak solmaya geçişler ve ayarlanabilir genişliklerle basit ve esnek bir akordeon düzeni oluşturmayı öğrenin.
CSS3 Yönlendirme Medyası Sorguları Nasıl Kullanılır
Ryan Seddon tarafından - [Öğreticiyi görüntüle]
Dikey (genişlikten büyük yükseklik) ve yatay (yükseklikten büyük genişlik) modlarını tanımlayan basit kurala dayanarak, görüntülediğiniz moda göre belirli stilleri hedeflemek için bir medya sorgusu yazabilirsiniz. Bu eğitim bize tam olarak nasıl yapılacağını gösterecek ve tarayıcı penceresini küçültürken bu değişikliği göstermek için renk kullanan bir renk değiştiren bukalemun bağlantısıyla birlikte geliyor.
Duyarlı Veri Tabloları
Chris Coyier tarafından - [Öğreticiyi görüntüle]
Masalar küçük ekran boyutları söz konusu olduğunda bir baş ağrısı kaynağıdır, ancak bu tamamen masalardan kaçınmamız gerektiği anlamına gelmez. Mobil ekran boyutlarına geçtiğinizde tablonuzun formatları tamamen değiştirmesini sağlamak için ortam sorgularını nasıl kullanacağınızı öğrenin. Bu eğitime dayanarak yapabileceğiniz sihir hakkında bir fikir edinmek için gösterimi izleyin.
Paralaks Etkisi ile Sıvı CSS3 Slayt Gösterisi
Ring Wing tarafından - [Öğreticiyi görüntüle]
İki arka plan görüntüsünün kullanıldığı ve arkaların konumları değiştiğinde bir paralaks etkisi görülen bir CSS3 slayt gösterisi oluşturun. Bunun dışında slayt gösterisi esnektir, tarayıcı penceresi kapanırken kendini yeniden boyutlandırır.
Duyarlı Küçük Resim Galerisi Nasıl Kurulur
Joshua Johnson tarafından - [Öğreticiyi görüntüle]
Bu, bir galeride küçük resimler bulunan web siteleri için harikadır. Tarayıcı penceresi yeniden boyutlandırıldığında, düzen iki sütun (daha küçük ekran boyutları) ve beş (maksimum) sütun arasında yer alacak şekilde değiştirilir. Daha benzer slayt gösterileri ve sürgüleri için, En İyi 10 Ücretsiz Duyarlı Resim Galerisi / Slayt Gösterisi makalemize bakın..
E-postanızı Mobil Cihazlar İçin Optimize Etme
Ros Hodgekiss tarafından - [Öğreticiyi görüntüle]
E-postalar bile web sitelerinin nasıl olduğu gibi küçük ekran görünümleri için optimize edilebilir. Bir HTML e-postasındaki metnin çoğu zaman rahat bir okuma için yapılmamış bir noktaya getirilir; Bunu ve bu öğreticiden daha fazlasını nasıl yöneteceğinizi öğrenin.
çerçeveleri kullanmak
Skeleton ile Duyarlı Bir Mobil Web Sitesi Kurun
Joshua Johnson tarafından - [Öğreticiyi görüntüle]
Skeleton, beraberinde duyarlı web siteleri oluşturmak için harika bir çerçevedir. Bu eğitici yazı, sizi harika duyarlı tasarımlar oluşturmak için Skeleton framework'ün nasıl kullanılacağı konusunda adım adım yönlendiren bir rehbere götürür. Uygulamanın ne kadar kolay olduğunu görmekten şaşıracaksınız.
HTML5 ve Less Framework 3 ile Duyarlı Web Tasarımı
Louis Simoneau tarafından - [Öğreticiyi görüntüle]
Less ile tam olarak tanışmadıysanız, Less'in tadına bakmak için önce kendi Less CSS eğitimimizi inceleyin. Bu derste, medya sorgularının etkilerini açıkça görmenize izin vermek için Daha Az çerçeve kullanılmıştır..
Sonuç
Ve bu bizim sonucumuz Duyarlı Web Tasarımı dizi. Bu dizide yer alan temaların, araçların ve diğer kaynakların, duyarlı web tasarımı konseptini okuyucularımıza göstermeye yardımcı olduğunu umuyoruz. Ama bize söylemezsen nasıl bilebiliriz?
Bize geri bildiriminizi bildirin dizi ve hongkiat.com'da görmek istediğiniz daha fazla fikir için önerileriniz varsa. Bize bir satır veya aşağıya bir yorum bırakın.
