Görsel Web Tasarımı Dersi 5. Ünite Özet

Giriş

Yazının kullanılmaya başlamasıyla birlikte basılı ve basılı olmayan (elektronik ortam, web ortamı) ortamlarda yazıların farklı şekillerde gösterilmesi, yazıya sanat katılması sürecine geçilmiştir. Bu bağlamda “ yazı ile sanat yapma k” anlamına gelen tipografi kavramı ortaya çıkmıştır.

Tipografi ve Tipografi ile İlgili Temel Kavramlar

Yunanca “typos” (form) ve “graphia” (yazmak) kelimelerinden türetilen tipografi kavramı en basit açıklamasıyla forma uygun yazmaktır. Tipografi, harf, sözcük ve satırlarla, boşluklarının düzenlenmesi gereken diğer ögelerle belirlenmiş bir sayfa üzerinde yapılan görsel ve işlevsel düzenlemelerdir. Bir başka tanımla, izleyiciye sözel mesajları iletmek için tasarlanmış harfler, rakamlar ve noktalama işaretlerinin iki boyutlu yüzeyler üzerinde, tek başlarına, kelimeler ya da metinler olarak hangi büyüklük ve türde kullanılacaklarını ve bir araya geleceklerini belirleyen kurallar sistemidir. Tipografi, bilgi ve mesajın anlaşılabilir bir form diliyle iletilmesinin yanı sıra bir tarz, kişilik, görsel bir dil ve farklı imge olarak ortaya konan elemanlar olarak yazı karakteri (tipi) boyutu ortaya çıkmaktadır.

Tipografi dalında uzmanlaşmış bireylere tipograf denir. Tipograflar; grafik tasarımı, reklamcılık ve web tasarımı gibi görsel mesajların ağırlıklı olduğu iş kollarında görev yapmaktadırlar.

Tipografi ile ilgili temel kavramlar aşağıdakilerdir:

• Serif: Karakterlerin uç kısımlarındaki tırnaklı kısımları ifade eder.
• Sans Serif: Tırnaksız karakterleri ifade eder.
• Leading: Metindeki satırlar arası boşluğu ifade eder.
• Kerning: Metni oluşturan harfler arasındaki boşluğu ifade eder.
• Tracking: Bir satır içindeki karakterler arası boşluktur.
• Baseline: Metni oluşturan harflerin kuyruklarının dâhil edilmediği tabanı ifade eder.
• x-Height: Metni oluşturan küçük harflerin kuyruk ve harfin üst çıkıntısı dışında kalan gövdesinin yüksekliğini ifade eder.
• Type Size: Metni oluşturan harflerin, karakterlerin boyutunu ifade eder. Tipografik ölçü birimleri dijital ve baskı için ayrı ayrı aşağıdaki gibi ifade edilir:
• Dijital Ölçüler: 12 punto (point) = 1 em (pica)
• Baskı Ölçüleri: 1 punto = 0,376 mm, 72 punto (point) = 6 pika (pica) = 1 inç (inch)
• Descender (Alt): Harfin satır çizgisinin alt kısmında yani gövde kısmının (x-Height) alt bölgesinde kalan kuyruk kısmıdır.
• Ascender (Üst): Harfin gövde kısmının (x- Height) üst kısmında kalan çıkıntıdır.

Reklam amaçlı çalışmalarda tipografi özellikle iki amaçla kullanılmaktadır. Bunlardan birincisi verilmek istenen mesajı ikna edici kılmaktır. İkincisi ise mesajı dikkat çekici bir hale getirmektir. Bu anlamda, tipografinin sadece font seçimi olmadığını bilmek gerekir. Aksi halde, verilmek istenen bir mesajdaki diğer görseller ne kadar iyi olsa da iyi bir tipografik görsel oluşturulmamışsa, reklamın istenen etkiyi yaratamayacağı söylenebilir.

Tipografi ile Anlam Yaratma ve Tipografik Vurgular

Bir metinde verilmek istenen mesajın doğru şekilde iletilebilmesi için dikkat edilmesi gereken noktalardan en önemlisi sayfa yapısında hiyerarşik düzen dir. Hiyerarşik düzenden kasıt başlık, alt başlıklar ve metin sıralamasının doğru bir şekilde yapılmasıdır. Sayfalardaki hiyerarşik düzenin sağlanması için harf büyüklüklerine , yazı karakterlerinin farklılıklarına ve bold, italik gibi şekilsel değişkenlere dikkat edilmelidir. Hiyerarşik düzenlemelerin yanı sıra yazı biçimi, yazı karakterleri, yazı ailesine de dikkat edilmelidir.

Yazı Biçimi: Sayfa tasarımında sadece harflerin kullanıldığı ve bu kullanımda büyük ve küçük harf dizisinin sayfa hiyerarşisine göre doğru bir şekilde kullanılmasıdır.

Yazı Karakteri: Metinde kullanılan harflerin, rakamların, işaretlerin, sembollerin aynı biçimsel özellik ve oranlara göre seçilerek kullanılmasıdır. Metnin okunurluğu açısından karakterlerin birbirinden ayırt edilerek algılanması açısından harflerin oranları önemlidir. Alfabedeki harflere bakıldığında en dar harfin “I” en geniş harfin ise “M” olduğu görülmektedir. Bu bağlamda harfler arasındaki boşlukların da harf genişliklerine göre düzenlenmesi anlam oluşturmada önemlidir. Bir başka ifade ile, yazı karakterlerini bilmenin sağlayacağı fayda harflerin birbirinden farklı şekilsel yapıda olduklarını bilerek ona göre aralarındaki boşluğu ayarlayabilmektir.

Yazı Ailesi: karakterlerinin yanı sıra anlam oluşturabilmek için yazı ailesinin de bilinmesi gerekmektedir. Bu bağlamda, metni oluşturan karakterlerin anlam oluştururken vurgu yapılmasını sağlamak amacıyla biçimsel özelliklerine dikkat edilmelidir. ailelerine bakıldığında Serif (Tırnaklı) , Sans Serif (Tırnaksız) ve Typewriter (Daktilo) olarak üç sınıflandırma altında toplandığı görülmektedir. ailelerinin karakterlerinin biçimsel özelliklerine bakıldığında farklı kalınlıklardaki uyarlamaları extra light (çok ince), light (ince), book, demi (yarım), medium (orta), bold (kalın), extra bold (çok kalın), heavy (ağır) ve ultra (aşırı)’dır. Farklı kalınlıklara sahip bu uyarlamaların condensed (yoğunlaştırılmış), regular (normal) ve extended (seyreltilmiş) uyarlamaları, farklı açılara sahip roman (dik) ve italik (eğik) uyarlamaları ile işleme seçenekleri outline (kontür), shaded (gölgeli), decorated (süslü) de bulunmaktadır.

Metni oluştururken karakterlerin biçimsel özelliklerinin ve oranlarının yanı sıra metnin okunurluğu açısından harfler, sözcükler ve satırlar arasındaki boşluk da önemlidir. Bu boşluk düzenleri aşağıdaki gibi açıklanabilir;

• Harf Boşluk Düzeni: Okunurluğu artırabilmek için büyük puntolarla yazılan başlıkların harf aralıklarının doğru bir şekilde düzenlenmesi önemlidir. Harf aralarındaki boşlukların ne çok az ne de çok fazla olmamasına dikkat edilmelidir.
• Sözcük Boşluk Düzeni: Metni oluşturan sözcüklerin arasındaki boşluklar “ı” harfinin genişliği kadar olmalıdır. Başlıkların daha iyi algılanması ve bütünün algılanması sağlanarak daha akıcı bir okuma için sözcükler arasındaki boşluklar azaltılır.
• Satır Boşluk Düzeni: Bir metinde satırlar arası boşluk düzenlenirken boşluğun ne çok az ne de çok fazla olmamasına dikkat edilmelidir. Metni okuyan bir kişi satır boşluklarından kaynaklanan sorundan dolayı aynı satırı tekrar okumamalı ya da satır atlayarak başka satırlara geçmemelidir. Satır aralıkları düzenlenirken harflerin alt (descender) ve üst (ascender) uzantılarının satırlarda kaybolmaması da önemlidir. İdeal satır arası boşluk ölçüsüne harfin punto değerine 2 eklenerek ulaşılır.

Tipografik Kurallara Dayalı Tipografi Seçimi

Bir tasarım yapılırken görsellerin kullanılması kadar doğru tipografi seçimi de metin okunurluğunun sağlanması açısından çok önemlidir. Tipografi seçiminde takip edilmesi gereken adımlar sırasıyla aşağıdaki gibidir:

1. Font Seçimi
2. Büyük ve Küçük Harf Kullanımı
3. Boşlukları Düzenleme
4. Metni Düzenleme
5. Yayınlanacak Ortamı Seçme

Font Seçimi: Metnin okunurluğunda öncelikli olarak font seçiminin doğru yapılması gerekmektedir. Font seçimi aşaması en zor aşamadır. Çünkü bu aşamada metin yazarlarının karşısına yüzlerce font çıkmaktadır. Font seçiminde dikkat edilecek hususlar şu şekilde sıralanabilir:

• Yazının yazılma amacına göre font seçimi değişiklik gösterir. Formal bir metin için geleneksel fontlardan serif’li yazı fontu tercih edilebilirken; informal bir metin için modern fontlardan olan sans serif’li yazı fontu tercih edilmelidir.
• Metinde kullanılan yazı fontları, metnin vermek istediği mesajın önüne geçmemelidir.
• Metin içerisinde duruma göre farklı fontlar tercih edilebilir. Fakat okunurluğu azaltacak ve dikkat dağıtacak şekilde fazla font kullanılmamalıdır.
• Kullanılan fontların baskıya uygun olması gerekmektedir.

Dan Mayer’in font seçimi için belirlemiş olduğu beş kural:

• Duruma uygun seçim
• Font ailelerini bilme
• Arka planın metnin önüne geçmemesi
• Kullanım amacına göre seçim
• Kuralsızlık

Büyük ve Küçük Harf Kullanımı: Uygun font belirlendikten sonra metin içerisinde büyük ve küçük harf kullanımına dikkat edilmelidir. Metni komple BÜYÜK harflerle yazmak metnin okunurluğunu azalttığı gibi yazılı iletişimde büyük harf ile yazmak, karşı tarafa bağırarak konuşmak anlamına da gelmektedir. Diğer taraftan, devamlı aynı şekilde hiç hareketsiz ilerleyen yazı da okuyucuda sıkıcılığa sebep olacak ve belli bir zaman sonra okumayı bırakacaktır. Bu nedenle, büyük harfler başlıklarda ve cümle başında, sadece büyük harflerden oluşan yapılar ise kısa uyarılarda, yönlendirme levhalarında, emir cümlelerinde kullanılmalıdır. Bu durumlar dışında metnin devamında alt ve üst kuyruk yapıları sayesinde gözü tekdüzelikten kurtaran ve metnin okunurluğunu arttıran küçük harfler tercih edilmelidir.

Boşlukları Düzenleme: Metni oluşturan sözcüklerin ve sözcükleri oluşturan kelimelerin arasındaki boşluklar ile satırlar arasındaki boşluklar da tipografi seçiminde dikkat edilmesi gereken önemli noktalardan biridir. Bir metinde boşluklar düzenlenirken dikkat edilmesi gereken hususlar şu şekilde sıralanabilir:

• “Sözcükler arasında” ve “noktalama işaretlerinden sonra” bir boşluk bırakılır.
• “Harf arası” ya da “satır arası” boşluk gereğinden fazla arttırıldığında/azaltıldığında okuma güçlüğü doğar.
• Paragraf boşluğu verildiği durumlarda satırların arası ayrıca açılarak paragraf vurgulanmaya çalışılmaz.

Metni Düzenleme: Oluşturulan metnin sayfada doğru şekilde konumlandırılması okunurluğu artıracaktır. Göz, sayfada aynı yapıda hareket etmek isteyeceğinden, metnin satırlarının aynı hizada başlaması metni okuyan kişi için faydalı olacaktır. Metni düzenlerken dört farklı hizalama ya da bloklama tekniği kullanılır:

• Sola Yaslı (Soldan Blok, Sola Hizalı): Metnin sola yaslanması ile oluşturulan her satırın aynı başlangıç noktasında başladığı ve sonunun farklı olabildiği sayfa düzeni yapısıdır. Soldan sağa doğru okuma düzeni, gözün her satırda aynı başlangıç noktasına dönmesini sağladığından dolayı okunurluğu artıran ve gözü yormayan bir düzendir.
• Sağa Yaslı (Sağdan Blok, Sağa Hizalı): Metnin sağa yaslanması ile oluşturulan ve her satırın farklı başlangıç noktalarından başladığı fakat satır sonlarının eşit olduğu sayfa düzeni yapısıdır. Soldan sağa doğru okuma düzeninde gözün her satırda farklı başlangıç noktalarına hareket edeceğinden dolayı okunurluk azalır ve göz yorulur.
• Ortaya Hizalı (Ortadan Blok): Metnin ortadan hizalanması sonucunda satırların başlangıç ve bitiş noktaları farklı olacaktır. Genellikle başlıklarda tercih edilir.
• Her İki Yana Yaslı (Her İki Taraftan Blok, Her İki Tarafa Hizalı): Metnin sağ ve sol sütunlara yaslanmasıyla oluşturulan sayfa yapısıdır. Başlıklarda tercih edilen bir yapıdır.

Okuma düzeni soldan sağa doğru olan dillerde yazılan içeriğin sunulmasında sola yaslı ya da her iki tarafa yaslı yapılar tercih edilirken; başlık ve türevlerinde ortaya ya da her iki yana yaslı yapılar tercih edilir.

Yayınlanacak Ortamı Seçme: Tipografi seçiminde dikkat edilmesi gereken en önemli noktalardan biri metnin yayınlanacağı ortamın belirlenmesidir. Basılı ortamda yayınlanacak metinlerin düzenlenmesinde ilk dört kural takip edilebilir. Fakat metnin basılı olmayan elektronik ortamda (yani web ortamında), yayınlanması durumunda yayınlanacak ortamda kullanılan yazılımın alt yapısı, üstünlükleri ve sınırlıklarının yanı sıra içeriğin görüntüleneceği ekran büyüklüğü önemlidir. Web ortamında kullanılan tasarım yapıları şunlardır:

• Sabit (Fixed) Tasarım: İçeriğin bulunduğu web sayfalarının tasarlanırken sayfa genişliğinin sabit ölçülerle yapılması ve görüntüsünün farklı araçlarla etkili bir şekilde görüntülenememesidir. Bu tarz tasarımlar, küçük ekranlı araçlarda görüntülenirken sayfayı sağa sola kaydırarak sayfa içeriği net şekilde okunabilir.
• Akışkan (Fluid) Tasarım: İçeriğin bulunduğu web sayfalarının genişliği yüzde (%) oranlar kullanılarak geliştirilir. Bu tarz tasarımlarda sütunlar tarayıcıların izin verdiği ölçüde aşağı yukarı olacak şekilde ölçeklenir. Böylece, içerik görüntülenmeye çalışılırken ekranda sağa sola gitmeye gerek kalmaz.
• Uyarlanabilir (Adaptive) Tasarım: Belirli araç ölçülerine göre tasarım yapılan tasarımdır. Ekran boyutu farklı olan her dijital araç göz önünde bulundurulmalıdır.
• Esnek (Responsive) Tasarım: Esnek tasarım, sayfa yapılarının bütün dijital araçlarda sağlıklı görüntülenmesi için gerekli olan tasarımdır. Bu tasarım ile sayfa yapıları dijital araçların ekran boyutları ve çözünürlüklerine bağlı kalarak ölçeklendirilmekte ve sayfaların sağlıklı şekilde görüntülenmesi sağlanmaktadır. Hazırlanan içeriğin esnek tasarıma uygun şekilde görüntülenebileceği sayfa yapılarının oluşturulması için ücretsiz ya da ücretli olan birçok tipografi paketi bulunmaktadır.

Tipografi Paketleri

Özelikle 21. yüzyılın ilk çeyreğinde internete ulaşılabilecek iletişim teknolojileri çok çeşitlenmiştir. Akıllı telefonlar, tabletler, masaüstü¨ bilgisayarlar, akıllı televizyonlar bunlara örnektir. Bunların hepsinin ekran büyüklükleri de birbirinden farklı olabilir. Tipografi paketlerinin çoğunluğu ise herhangi bir sorun yaşamadan bütün bu ekranlarda yazılı metinlerin kullanıcılar tarafından okunmasını sağlayabilirler.

Tipografi paketlerinin temelini Cascading Style Sheets (CSS) oluşturmaktadır. CSS, HTML yapısındaki web sayfalarında metin ve format biçimlendirme alanında olanaklar sunan bir web teknolojisidir. Web sayfaları için hazır şablonlar sunduğu gibi bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Web sayfası tasarımında esnek tasarımı sağlayan başlıca tipografi paketleri Bootstrap, Skeleton, Cardinal, Concise, Furtive, BassCSS, Mueller, vb.dir.

Bootstrap: HTML, CSS ve JavaScript çerçevesi için geliştirilmiş esnek ve mobil cihaz uyumlu web biçimlendirme çatısıdır. www.getbootstrap.com adresinden .zip dosyası indirilerek web tasarımı çalışmalarında kullanılabilir. Bootstrap, tipografi için CSS, ön işlemci olarak Less ve Sass’ı tercih etmektedir. Less, Bootstrap ile geliştirilecek tasarımlarda CSS kodları ile kolaylıkla kullanılabilir. Sass için aynı durum söz konusu değildir, zira dosyaları indirip tasarım projesinin içerisine kurmak gerekmektedir. Bootstrap ile hazırlanan web tasarımlarında tek çerçeve ile bütün cihazlarda uyum sorunu olmadan projeleri yayınlamak mümkündür.

Skeleton: D aha küçük web tasarımı projelerinde kullanılabilecek tipografi paketidir. www.getskeleton.com adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Skeleton, standart HTML elementleri stillerini kullanır ve ızgara (grid) yapısını içerir. Izgara yapısı, genişliği en fazla 960px olan bir yapıyı 12 sütunluk akışkan ızgaralara dönüştürür. Bu sayede en geniş sayfa yapısı tek satır CSS kodu ile tek sütun olacak şekilde yeniden ölçülendirilir ve küçük cihazlarda sayfa yapısı sağlıklı görüntülenebilir. Skeleton’da tipografi, “rems” ile ayarlanır. Bu şekilde yazıların boyutu ve özel ilişkileri tek HTML kodu ile esnek yapıda olabilir ve tüm boyutlardaki cihazlarda görüntülenebilir.

Cardinal : Modüler yapıda olan ve mobil cihazlar için performans ve ölçeklenebilir yapıda geliştirilmiş CSS çerçevesidir. www.cardinalcss.com adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Cardinal’in amacı, web tasarımcılarının esnek, kullanıcı dostu arayüze sahip uygulamalar için kolaylıkla ölçeklenebilir ve sürdürülebilir CSS yapısı oluşturmalarını sağlamaktır. Cardinal’in benimsendiği modern yaklaşımlardan biri CSS Box Model’dir. Bu sayede sayfadaki ögelerin genişlik ve yükseklikleri kolaylıkla belirlenebilir. Bootstrap’te olduğunu gibi ön işlemci olarak Less CSS yapısını kullanmaktadır.

Concise: Sürdürülebilir CSS yollarından en önemli adımlar olan Sass, Less ve Stylus temelli CSS çerçevesidir. Bunun yanı sıra basit CSS yapısı da tercih edilebilir. www.concisecss.com adresinden .zip dosyası indirilerek tasarımlarda kullanılabilir. Web tasarımında gereksiz kodlarla yapıyı şişirmeden ihtiyaç¸ duyulan eklentilerin kolaylıkla eklenebildiği bir yapıdır. Temel kullanımda gerekli olan başlık, paragraf, tablolar, formlar ve butonlar gibi ögeleri içinde barındırmaktadır.

Furtive : Izgara yapısının ve ögelerin boyutlandırılmasında rem parçası için Flexbox ve SVGs kullanımı gibi gelişmiş web standartları etrafında geliştirilmiş CSS çerçevesidir. www.furtive.co adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Furtive, eski tarayıcıların desteklemediği küçük CSS ayak izine sahiptir ve CSS indirmeleri için gerekli olan bant genişliğini kesmektedir. Gelişmiş web tasarımı projelerinde kullanılmak üzere geliştirilmiş yapıdır. Esnek ızgara yapısıyla sayfa yapıları rahatlıkla cihaz boyutuna göre ölçeklenebilir.

BassCSS: Esnek uygulamaları yapmak için temel stil, yardımcı programlar, ana hat ve renk stili ögelerinin oluşturulmasını sağlayan CSS çerçevesidir. Bu çerçeveyi kullanmak için herhangi bir .zip dosyası indirmeye gerek yoktur. Web üzerinden sağlanan CSS dosyasının HTML kodları kullanılarak tasarım bağlanılabilir. CSS dosyasının içerdiği stil kolay bir şekilde kişiselleştirilebilir ve tipografi ile oynamalar yapılabilir.

Mueller : Sass ve Compass temelinde yapılmış esnek modüler ızgara sistemidir. www.muellergridsystem.com adresinden .zip dosyası indirilerek web tasarımlarında kullanılabilir. Mueller ile ya HTML ögelerine sınıf eklenerek ya da tercihe bağlı olarak düzenli HTML ögeleri “grid()” fonksiyonu kullanılarak ızgara yapılabilir. Mueller ızgarası, Masonry JS Kütüphanesi ile sıralı kullanılabilir.

Yukarıda belirtilen tipografi paketlerinin yanı sıra Tuktuk, Base, Toast, CSS Lint, CSS Prism, PCSS, Normalize.css gibi daha birçok tipografi paketi bulunmaktadır. Web tasarımı projesinin amacına uygun olarak bu paketlerden herhangi biri tercih edilerek web sayfası geliştirilebilir.

Tipografi Paketi ile Web Sayfası Oluşturma

Bootstrap tipografi paketi kullanılarak bir web şablonu hazırlamak için aşağıdaki adımlar izlenmelidir:

• Bootstrap’e ait .zip dosyası www.getbootstrap.com adresinden “Download Bootstrap” düğmesine basarak indirilir.
• Bootstrap dosyası indirildikten sonra aynı sayfanın alt kısmında bulunan “Basic Templates” başlıklı kısımdaki kodlar kopyalanarak bir html sayfası oluşturulur.
  • Bu aşamada, kopyalanan html kodları ile bir web sayfası oluşturmak için Dreamweaver programı kullanılabilir.
  • Burada dikkat edilmesi gereken nokta oluşturulan html sayfasının HTML5 sayfa özelliğinde olmasıdır.
• Oluşturulan HTML5 sayfasına Bootstrap için hazırlanacak olan “Basic Template” kodu eklendikten sonra kaydedilir.
  • Dreamweaver’da oluşturulan HTML5 sayfası, masaüstünde oluşturulan klasöre kaydedilir.
  • Kaydetme işleminden sonra daha önce indirilen .zip’li Bootstrap dosyasının içindeki dosyalar HTML5 sayfasının kaydedildiği klasöre taşınır.
  • Oluşturulan HTML5 dosyası ile Bootstrap dosyalarının aynı klasörde yer alması daha önce “Basic Template” bölümünden alınan kodlarla gerçekleştirilen CSS dosyalarını bağlama ile web sayfasının sorunsuz çalıştırılması sağlanmıştır. Bu sayede, web sayfasında görünmesini istediğimiz içeriklere Bootstrap dosyasının içindeki CSS dosyaları ile şekillendirmeler yapılabilecektir.
• Kod kısmında el ile kodlama yapılabileceği gibi Bootstrap dosyalarının indirildiği www.getbootstrap.com adresinde “Components (Bileşenler)” sekmesinden tipografi paketlerine ulaşmak mümkündür. Burada bulunan kodları kullanarak web şablonunda bulunması gereken ögeler sayfaya rahatlıkla eklenebilmektedir.
  • “Components (Bileşenler)” sekmesinde bulunan bileşenleri kullanarak bir sayfa düzenlemek istenildiğinde, sayfanın sağındaki bileşenler seçilerek kodları kopyalama yoluyla html uzantılı HTML5 sayfasına eklenebilir. Bu sayede sayfalar kolaylıkla üretilebilir.

Bootstrap gibi tipografi paketleri ile hazırlanan web şablonlarının en önemli özelliği her platformda ve her boyuttaki cihazda görüntülenmesinde sorun yaşanmaması ve altta bulunan gezinme çubuğu yerine içeriğin sayfaya sığdırılmasıdır. Aynı içeriğin tablet bilgisayarlarda ve akıllı telefonlarda görüntülenmesinde de sorun oluşmamaktadır. Ekran boyutuna ve cihazın sahip olduğu işletim sistemine göre sayfa yapısı iyileştirilmekte ve görüntülenmesi sağlanmaktadır.