Duyarlı Tasarım İçin İçerik Düzenlemesi Nasıl Planlanır?

Son bir yayında, nasıl tartıştım görsel içerik alakalı düzen tasarımı. Bununla birlikte, bu konu çok ayrıntılıdır ve bunlardan biri olan pek çok alt konuya bölünür. Duyarlı düzenler için görsel organizasyon.

Bu yayında, en iyi uygulamalara bakmak için duyarlı içeriğe daha derinlemesine bakmak istiyorum. daha küçük ekranlar için içeriği yeniden düzenleme. UI ve UX tasarımında, her proje için tek bir doğru cevap yoktur, ancak iyi çalışan trendler, ve bu trendlerden kendi fikirlerinizi oluşturabilirsiniz..

Izgaraları Listelere Yeniden Düzenleme

Her web sitesi görünür olsun veya olmasın bazı ızgara türlerini kullanır.. Katı bir ızgaradaki içerik genellikle daha geniş monitörlerde yatay olarak birlikte gruplanır, ancak bu daha küçük cihazlarda bir anlam ifade etmez. En iyi çözüm, bu ızgaraları daha küçük ekranlara ayırmak ve öğeleri listelere dönüştür.

Örnek 1: Wellington Şehir Konseyi

Wellington Belediye Meclisi web sitesine bakınız. ızgara biçimli bölümler ana sayfada.

Küçük bir kare slayt gösterisi slayt gösterisi var. azaltır tarayıcı penceresi yeniden boyutlandırılır. Ayrıca alt bölüm küçülür, ve sonunda dikey bir bağlantı listesine dönüştürür.

320 piksel genişliğe sahip çok küçük telefonlarda, cihaz boyutuna göre tasarım yapmanız gerekir. Bir iPhone durumunda, cihaz daha geniş olduğundan, içeriği bu şekilde düzenlemek mantıklıdır..

Örnek 2: Mooyah Burgers

Mooyah için ana sayfaya bir göz atın ve düzeni yeniden boyutlandırmayı deneyin. Bir masaüstü ekranında üç öğe içeren küçük bir slayt gösterisi alanı var, ancak bu küçülür mobil cihazda yalnızca bir öğe göstermek için (widget’a daha fazla gizli slayt ekleyerek).

Mooyah uygulamasını ve menüsünü tanıtan iki promosyon kutusu yan yana sabit kalıyor ekran yeterince küçülene kadar dikey olarak yeniden düzenlemek.

“Bizimle iletişime geçin!” bölüm ayrıca içeriği yeniden düzenler; böylece her sosyal gönderi mümkün olduğunca fazla yer kaplıyor. Genel olarak konuşursak, geniş ekran monitörler en geniş ve akıllı telefon ekranları en uzun.

Örnek 3: Tema Piyasası

Izgaralı bir düzen tasarlarken, göz önünde bulundurmalısınız. Hem geniş hem de uzun boylu düzen stilleri tek bir kod satırı yazmadan önce. Bu şekilde hazırlanacaksınız mantıklı kesme noktaları oluşturmak.

Tam ızgara düzenine sahip bir sayfa kutuların boyutunu küçült onları yeni bir satıra bölmeden önce. Örneğin, Tema Pazarı’nın sabit maksimum genişlik 1240 ve ızgara içerir satır başına dört blok.

Ekran küçüldükçe bu bloklar genişliği azaltmak, ama sonunda Yıkmak için satır başına üç kutu bırakın. En küçük boyutta, satır başına bir kutu alırsınız ve bol bol yer var metin ve görüntülerin parlaması için.

Her zaman bir denge var mümkün olduğunca çok bilgi görüntülemek ihtiyaç ile birlikte metni okunabilir hale getir. Izgara düzenleri ne kadar çok oluşturulursa, bunu bulmak o kadar kolay olur içerik düzenleme dengesi.

Sütunları Gizle veya Kaldır

Daha geniş monitörler ve daha fazla tarayıcı desteği geliştiricilerin inanılmaz karmaşık düzenler oluşturmasına olanak sağlar. İle sık sık blog görüyorum üç hatta dört sütun bu ekranın iyi bir bölümünü kaplar.

Ancak, daha küçük cihazların içerik akışına ihtiyacı vardır. dikey olarak mantıklı. İçin iki seçenek buldum aşırı kenar çubuklarını kullanma:

1. Onları ana içeriğin altına bırak
2. Bunları tamamen gizle

Örnek 1: Basın Durdur

Stop Press'in internet sitesine bakınız. Var dört dikey sütun masaüstü monitörümde.

Soldaki sütun dikey bir gezinme menüsü, sonraki sütun ise son makalelerden oluşan ana içerik sütunu. Ardından, fazladan taşan iki farklı kenar çubuğu sütunu var “bir kenara” içerik.

Tarayıcı penceresi yeniden boyutlandırıldığında, bu sütunlar yavaş yavaş boyutunu küçült. İlk gitmek hamburger menü simgesinin arkasına gizlenmiş sol gezinme.

Bir sonraki kesme noktası, orta sütunu üstteki sosyal paylaşım düğmeleriyle birlikte gizler. Sonunda en küçük ekranlarda en sağdaki kenar çubuğu tamamen kayboluyor sadece birincil merkez sütunu bırakarak İçeriğin.

Ana içeriğin altında kenar çubuğu içeriğinin hiçbiri görünmez. Onun görünümden tamamen gizlenmiş, ve bu tamamen kabul edilebilir bir seçimdir. sayfa yükünü azalt ve kaydırma çubuğunun yüksekliğini iyi bir boyutta tutmak için.

Öte yandan, birçok blog kenar çubuğunu ana içeriğin altına kaydırın kenar çubuğundaki ilgili mesajların yer aldığı Concept Art Empire gibi içeriğin altına düşmek.

Örnek 2: Wishpond Blog'u

Wishpond Bloğu ayrıca kenar çubuğunu tamamen kaldırır Küçük vitrinlerde ekrandan. Bu kenar çubuğu alanı genellikle reklam, kayıt formları ve ilgili yayın linklerini içerir. Bu içeriğin hiçbiri hayati değildir, ancak ziyaretçilere değer katabilir.

Takip etmeyi severim karma yaklaşım kenar çubuğunu içeriğin altına kaydırdığımda, kenar çubuğundaki birkaç öğeyi belirli bir kesme noktasını geçerek gizledim.

Örneğin, tam düzende üç reklam bloğum varsa, bu reklam alanlarından ikisini mobil cihazda gizleyebilirim. Bu kenar çubuğu içeriğini erişilebilir yapar fakat sayfayı karıştırmaz aşırı içerikli.

Örnek 3: Madame Gautier

Madam Gautier’in nasıl kullandıklarını da seviyorum “Son Haberler” Giriş sayfasındaki kenar çubuğu. Sonunda içeriğin altına düşer, ve tam bir bakış açısı alıyor sayfada.

Neredeyse her web sitesinin tasarımında en az bir kenar çubuğu olacaktır. Bu, site genelinde bir kenar çubuğu mu yoksa yalnızca bir sayfa şablonunda görünen bir şey mi, yan yana tasarım stili popüler çünkü o daha fazla içeriğe uyar ekranda.

Seçim senin içeriğin nasıl kullanılacağı. Kenar çubuğunu aşağıya indirebilir, tamamen gizleyebilir veya bu iki tekniğin bir melezini kullanabilirsiniz. Ama seçimini yapmalısın kenar çubuğunun alaka düzeyine bağlı olarak, ve Onun zorunluluk sayfaya.

Kenar Boşluklarını Ayarla ve Sıkıştır

Her zaman bir nokta olacak içerik sıkıştırılamaz dahası, ve bir bölüm gerekir diğerinin altına düşmek.

Tarafından kenar boşluklarını ayarlama Sayfadaki içeriği azaltmadan önce, okuyuculara seçecekleri daha geniş bir içerik genişliği verirsiniz..

Örnek 1: Bir Dünya

Bir Dünyadaki altbilgi harika bir örnek. Var sitewide altbilgi bağlantıları yüzdü sağ bir e-posta kayıt formu soldaki.

Mizanpaj yeniden boyutlandırıldığında, bu öğeler arasındaki kenar boşlukları ve dolgular küçülür. Bağlantı sütunları birbirine yaklaşmak, ve kayıt formu biraz daha küçülür, çok.

Belirli bir noktadan sonra, sadece mantıklı bağlantıları kayıt formunun altına bırakın, ve altbilgiyi ver nefes almak için bolca yer var.

Evet, sayfayı daha uzun yapar ve evet, o kadar ileri gitmek için daha fazla çaba harcar, ancak bu küçük kesme noktalarında kullanıcıların olduğunu varsayabilirsin dikey olarak yönlendirilmiş cihazlarda.

Örnek 2: Altın Adalar

Sevdiğim bir diğer örnek ise Altın Adalar ana sayfası. benzersiz gezinme stili. Tarayıcı penceresini yeniden boyutlandırdığınızda birlikte sıkmak. Sonunda onlar tek bir satırdan kopmak iki sıraya, daha sonra en küçük boyuttaki sütunlara.

Sayfadaki diğer öğeler aynı modeli takip et. Bu örnek gücünü göstermektedir kenar boşluklarını yeniden boyutlandırma düzeni tamamen yeniden düzenlemeden önce.

Küçük Ekranlarda Dikey Akış

Sayfa içeriği doğal akış, ve dikey hizalama mobilde mantıklı. Bu, sayfa içi içerik bloklarını dikkate almanız gerektiği anlamına gelir. içerik stilini buna göre güncelleyin. Bu paragrafları, başlıkları, blok alıntıları, sıralanmamış listeleri ve ayrıca özel içerik kutularını içerir.

Örnek 1: BodyBuilding.com Tek Gönderi

Örneğin, bu Vücut Geliştirme binasını ele alalım. küçük kutular kullanır Farklı glute egzersiz programı göstermek.

Bu kutular sağ tarafta küçük resimler egzersizi göstermek için. Küçük ekranlarda, bu küçük resimler yeni bir çizgiye bölünmek, ve sonunda birbirinin üstüne yığmak.

Duyarlı CSS’niz, web sayfasının her sayfası için bu küçük notu dikkate almalıdır.

Örnek 2: Vanity Fair

Daha büyük bir örnek için, Vanity Fair ana sayfasına bakın. özellikli hikaye kaydırıcısını tamamen yeniden düzenler. Bir tam ekran masaüstünde, hikayeler bir yandan gösterilen özel bir resim içeren başlıkları listeler. Tarayıcı küçültüldüğünde, bu en önemli hikayeler bölümü kayan bir atlıkarınca olur.

Arayüz kendisi tamamen değişiyor Nokta gezinme, oklar ve listedeki her hikaye için özel görüntüler ekleyerek. Makalelerin tam ekran listesi daha fazla “dikey”, ancak bu düzen mobil bir ekranda çalışmak için daha zordur, bu nedenle kayan bir karusel olarak değiştirmek daha iyi bir seçenektir.

düşünmek kullanıcının akışı hakkında daha fazla içerik akışınızdan ziyade. içerik her zaman dikey bir düzende zorlanmak zorunda değildir küçük ekranda. Sadece içeriği nasıl düzenleyeceğinizi düşünün dikey tarama deneyimini destekler.

Düşünceleri Kapatmak

Bugünlerde duyarlı tasarım çok önemlidir ve her web tasarımcısı ve geliştiricisi nasıl çalıştığını anlamalıdır. Ziyaretçiler tüm web sitelerinin olmasını bekliyor Mobil cihazlara uygun. Ne zaman yanıt vermeyen bir web sitesine rastlarsam, yatay kaydırma çubuğunun görüntüsünü tıkarım.

İçin bu yayındaki ipuçlarını izleyin içeriği yeniden düzenlemek için tasarım stratejilerini planlama Tüm cihazlarda mümkün olan en iyi kullanıcı deneyimi için.