Tasarım için tablolar neden aptalca:

sorunlar tanımlandı, çözümler önerildi

HTML'de tabloların bulunmasının tek bir nedeni var: Çizelge biçiminde olan veriyi sergilemek. Ama daha sonraları border="0" özelliği tasarımcılara resim ve metinlerini yerleştirebileceği bir ızgara olanağı sundu. Görsel bakımdan zengin Web siteleri tasarlamada hala baskın bir yöntem olan tabloların kullanımı şu anda daha iyi, daha ulaşılabilir, esnek, ve işlevsel bir Web inşa etmeye engel olmakta. Sorunların nerelerden ileri geldiğini keşfedin, ve geçişken ya da tamamen tablosuz tasarımlar oluşturmanın çözümlerini öğrenin.

Gidin patronunuzu bulup getirin

Dinleyiciler arasında hiç "takım elbiseli" var mı? Patronlarınız burada, Seybold'da, ancak şu anda başka bir oturuma mı katılmaktalar? Gidin onları getirin. Web standartlarının şirketinizin parasını nasıl tasarruf ettirebileceğini öğrenmesi gereken onlar.

Tanıtım: İçinde benim için ne var?

Size şunlar hakkında bir çalışma yöntemi tanıtacağız

Sayfaları Geçişli Stil Sayfaları (CSS) ile tasarlamanın içeriğiniz ve işaretlemeniz hakkında daha önce alışmış olduğunuzdan nasıl biraz daha farklı düşünme şekli gerektirdiği hakkında da konuşacağız.

Çekici Web Siteleri: iç içe tablolar ve ayırıcı GIFler

Başlangıçta, internet öncelikli olarak öğretim görevlilerin, araştırmacıların, ve askeriyenin bilgi paylaşımı için bir araç idi. Fakat, bu yeni aracın taze ürün ve köpek mamasından ikinci el arabalara kadar her şeyin satışı için ideal bir ortam olduğunun farkına varmak ön görüşlü girişimciler için fazla zaman almadı.

Ancak, başlangıç aşamasında olan her ortamda olduğu gibi, ilk zamanlarında İnternet estetik açıdan ‘ham’ idi(ve tam manasıyla tüketiciler için o kadar da çekici değildi) ta ki David Siegel tarafından varolan tarayıcıların kısıtlamaları ve 1997 dolaylarında çıkan W3C tanımlamaları için harika çalışma yöntemleri sunan dönüm noktası kitabı yayınlanana dek. (Millet, Netscape 2 ve 3 hakkında konuşuyoruz.)

Bu çalışma yöntemleri o kadar harika idi ki, gerçekten, günümüzde hala Web sayfalarını tasarlarken kullanılan en yaygın yöntemler bunlardır.

Tabloların kullanılmasının yarattığı sorun:

Kurtuluş çok yakında

Çağdaş tarayıcılar Web standatlarını yorumlamada çok daha iyi ve artık bu modası geçmiş yöntemleri kullanmak zorunda değiliz.

Tablo içine tablo gömmek ve boş hücreleri ayırıcı GIFler ile doldurmak yerine, daha hızlı yüklenen, tekrar tasarımı daha kolay olan, ve herkese daha erişilebilir güzel siteler tasarlamada daha basit işaretleme ve CSS kullanabiliriz.

Çözüm: CSS ve yapısal işaretleme

Sayfalarımızın tasarımı için HTML dökümanlarımızda yapısal işaretleme ve Geçişli Stil Sayfaları kullanarak sayfalarımızın gerçek içeriğini tasarım verisinden ayrı tutmayı başarabiliriz.

Bu tablo kullanımına karşın çeşitli avantajlara sahiptir....

Tasarım yenilemeleri daha kolay ve daha az masraflı

Sayfalarınızdan tasarım için kullanılan işaretlemeyi çıkarmakla, varolan sitelerin ve içeriğin tasarımlarının yenilenmesi çok daha az işgücü gerektiren (ve daha az masraflı) bir hale gelir. Sitenin görünümünü değiştirmek için tüm yapmanız gereken stil sayfalarını değiştirmektir; sayfaların kendilerini değiştirmenize hiçbir şekilde gerek yoktur.

Örneğin CSS Zen Bahçesini, veya Eric Meyer'in sitesindeki stil değiştiriciler inceleyin. Daha fazla bilgi için Paul Sowden tarafından hazırlanmış Alternatif Stil adlı makaleye göz atın.

Bant genişliği bedava değil

Kullanıcıların ziyaret ettiği her bir sayfa için tasarım verisini indirmesine gerek kalmadığı için, Web standartlarını kullanmak sayfalarınızın dosya boyutlarını düşürür. Tasarımı kontrol eden Stil sayfaları ziyaretçilerin tarayıcılarında saklanmaktadır.

Azaltılmış dosya boyutları daha hızlı yüklemeler ve daha düşük hosting masrafları anlamına gelir.

Hey, bu sayfaların hepsi birbirlerine benziyor!

Web standartlarını kullanmak bir sitenin her tarafındaki görsel uyumu korumayı son derece kolay hale getirir. Sayfaların görünümü için aynı CSS dökümanını kullanığı için, hepsi aynı şekilde biçimlendirilir.

Bu markanızı güçlendirir ve sitenizi daha kullanışlı yapar.

Bir kez yaz, her yerde, herkes için kullan

Web standartlarını kullanmak, sakatılkarı olan ve Web'e erişim için mobil telefon ve PDAlar kullanan ziyaretçiler için sayfalarımızı çok daha fazla erişilebilir yapar.

Ekran okuyucusu kullanan ziyaretçiler (yavaş bağlantılara sahip ziyaretçilerde de olduğu gibi) sayfaların asıl içeriğine ulaşmak için sayısız tablo hüceresi ve ayırıcı GIFler arasından güç bela geçmek zorunda kalmazlar.

Bir başka deyişle, sayfa tasarımınızı sayfanın içeriğinden ayırmakla içeriğiniz cihazdan bağımsız hale gelir.

Google kördür

Erişilebilirlikten söz açılmışken, işaretlemenizi en aza indirmeniz ve başlık etiketlerini (header taglarını) uygun bir şekilde kullanmanız arama motorlarındaki sıralamalarınızı da geliştirecektir.

Kodun içeriğe oranını düşürmek, başlık etiketlerinde anahtar kelimeler kullanmak, ve başlık GIFlerini gerçek metinlerle değiştirmek sitelerinizin daha iyi arama motoru sonuçlarına sahip olmasında yardımcı olacaktır.

Mecbur kalırsanız hâlâ tablolar kullanmaya devam edebilirsiniz, sadece çok fazla kullanmayın

Bu, ölecekleri güne kadar tarayıcıların 4. versiyonlarını kullanmaya bağımlı ve kararlı izleyicilere (ve patronlara), dünyanın geri kalan kısmının ne görmekte olduğu hakkında kabul edilebilir bir yaklaşım verecektir.

Yeterince hoş görünümlü bir tablo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eros et accumsan et iusto odio dignissim qui blandit
Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Epsum factorial non deposit quid pro quo hic escorol.
Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Dış görünüşün ardında ne yattığına bir bakın

Bu gerçekten çok daha kolay bir şekilde yapılabilirdi.Tahmin edin bu küçük tablo içerisinde ne kadar işaretleme var? 13.7k. Bu şeyin içinde 17 satır ve 9 kolon var. Ve tüm ayırıcı GIFlerden bahsettim mi?
Burda bir sürü tablo hücresi ve ayırıcılar var.Ve tüm bu noktalı kenarlar bir background özelliği ile yapıldı, ki bu onaylanmayacaktır.
İç içe geçmiş bir tablo? Ne için?
Madde imli bir liste yapmak için mi? Şaka yapıyorsunuz, değil mi?
Bunların hepsi 8 tablo hücresi ve 4 CSS kuralı ile yapılabilirdi.Cidden. 8 hücre ve 4 css kuralı, tüm gereken bu kadar.
Oh hayır, madde imli liste kılığına girmiş başka bir tablo daha.
Madde imli listelerinizi sadece madde imli liste olarak işaretleyin ve bırakın gerisini CSS yapsın.
<table> için bir tane, <td> için bir tane, <ul> için bir tane ve <li> için bir tane kurala ihtiyacınız var.Bu kadar. Bunları yaptığınız takdirde paha biçilmezsiniz.
Sahte bir madde imli liste yapmak için 8'den fazla tablo hücresi kullanmaya kıyasla bu daha iyidir. Kaldı ki diğer kullanım çok daha az erişilebilir bir tasarımdan öteye gidemez.
Mükemmel! En sonuncu sahte madde imi.

Tablo yapısını gösteren kod:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

Bu daha iyi

daha iyiTahmin edin bu küçük tabloda ne kadar işaretleme var? 2.1k. Bu şeyde 4 satır ve 2 kolon var. Ve hiç ayırıcı GIF yok.
sadece doğruVe tüm bu noktalı kenarlar CSS ile yapıldı ve tamamen geçerli.
  • Artık bu bir liste elemanı
  • Sadece olması gerektiği gibi
Bunların hepsi 8 tablo hücresi ve 4 css kuralı ile yapıldı.Cidden. 8 hücre ve 4 css kuralı, tüm gereken bu kadar.
  • Yaşasın madde imli listeler
  • Neden madde imli listeleri sadece madde imli liste diye işaretleyip, kalanını da CSS'nin yapmasına izin vermiyoruz ki?
<table> için bir tane, <td> için bir tane, <ul> için bir tane ve <li> için bir tane kurala ihtiyacınız var.Bu kadar. Bunları yaptığınız takdirde paha biçilmezsiniz.
  • Şimdi madde imli listelere aşık oldum
  • Mükemmel! daha fazla sahte madde imi kalmadı

Ve zırva işaretlemeden kurtulmak için kullandığımız CSS Kodu burada:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Geçişli tasarımları özetlersek

Extra hücre ve ayırıcı GIFler yerine margin ve padding özelliklerini kullanın.

link ve @import stillerini kullanın. İlki eski tarayıcılar için, ikincisi ise modern tarayıcılar için.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Gerçek dünyadan örnekler:

Ama bekleyin, daha fazlası var:

Geçişli tasarımlar hakkında daha fazla bilgi için, Eric Meyer on CSS adlı kitaptaki birinci bölüme ve Jeffrey Zeldman'ın Designing with Web Standards adlı kitabına bakabilirsiniz.

CSS tasarımlar: gelecek burada.

Günümüzde kullanıcıların büyük çoğunluğunun kullandığı tarayıcılar iyi derecede CSS desteğine sahipler. Hepsinin tuhaflıkları var, ama bir kere onlara alıştığınızda onlarla beraber çalışabilirsiniz.

CSS kodlamak kolaydır. JavaScript'in çoğunun küfürlere benzediğini düşünen bir adam olan benim için bile.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Her CSS kuralı bir tane selector (seçici) ve bir tane tanımlama bölümüne sahiptir. Tanımlama bölümü bir özellik ve bir değerden meydana gelir. 2 kelimeden oluşan özelliklerde kelimeler arasında tire kullanılır.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Yapısal işaretleme: anlatmak istediğini kodla, kodlamak istediğini anlat

CSS'nin kendisini yazmak kolay olmasına karşın tasarımlarımızı yaparken CSS'yi kullanmak çoğumuzun muhtemelen alışmış olduğundan biraz daha farklı düşünme şekli gerektirir.

Bir sayfa veya tasarım üzerinde çalışırken "bu buraya gelecek ve bu da buraya gelecek" şeklinde düşünmek yerine, sayfamızdaki bilginin çeşitleri ve bu bilginin yapısı hakkında düşünmemiz gerekir.

En önemli başlığımıza bir <h1> etiketi vermeli; alt başlıklarımızı <h2> etiketleri ile işaretlemeli, vs.; ve paragraflarımızı da paragraf olarak işaretlemeliyiz.

"Yapısal" veya "anlamsal" işaretleme olarak bilinen şey bu.

İçeriğinizi tabloların ve tablo hücrelerinin içine koymaktansa, onları div etiketleri içine yerleştirin. div etikelerinize, onların görünüşlerinden daha ziyade içerik ve/veya işlevini açıklayan bir id veya bir class değeri verin.

<b> ve <br> etiketlerinden oluşan işaretlemeden kaçının

Bir şeyi neden belirli bir şekilde görünmesini istediğinizi düşünün; ne anlama geliyor bu? İşaretlemeniz, sayfanızı göremeyen biri için bile, anlam taşıyabilmeli ve taşımalı. Anlamsal işaretleme sayfalarımızı arama motorları dahil herkese karşı daha fazla erişilebilir yapar.

Bir şeyi italik yaptığınızda bunun nedeni onu vurgulamak, <em>, istemeniz midirdir veya bu bir kitabın ismi midir, <cite>?

Eğer bir şey kalın yazıtipinde ise, büyük ihtimalle <strong> olarak işaretlenmesi gerekmektedir.

Eğer bir şeyin ardından bir satır aralığı vermek istiyorsanız, muhtemelen bir başlık etiketi ile işaretlenmesi gerekmektedir. Bu bir başlık değil de sayfanızın her yerinde bulunan bir class'ın parçası mı? Eğer durum buysa <br> yerine CSS kullanılmalıdır.

.foo {display:block}

Daha fazla bilgi için Tantek Çelik tarafından hazırlanan Bed and BReakfast markup (B&BR) adlı yazıya bakabilirsiniz.

Tabloların CSS'den daha işe yaradığı yerler

Kimi yerler var ki CSS, tablo ile yapılmış tasarımlar kadar iyi iş çıkarmaz.

Mesela, tüm içeriğinizin yüksekliğince uzamasını istediğiniz siyah bir navigasyon barınız olduğunu varsayalım. Tablo ile hazırlanmış bir tasarım için bu bir çocuk oyuncağı: o <td> etiketine siyah bir arkaplan rengi vermeniz yetecektir.

Bunu CSS ile yapabiliriz, ancak bu farklı bir düşünme şekli gerektirir.

Eğer navigasyon barımızın div etiketine siyah bir arka plan rengi verirsek, bu siyah sadece navigasyon barımızın sona erdiği yere kadar uzayacaktır. Çoğu sayfalarda içerik navigasyondan daha uzun olacağı için bu iyi bir çözüm değildir.

Onun yerine içerik için kullandığımız div etiketini siyah bir GIF ile kaplayabilir ve bu div etiketine yeterince sol boşluk (left padding) verebiliriz, ama navigasyonumuz içeriğimizden daha uzun ise bu da çalışmayacaktır.

Bunun üstesinden gelmenin diğer bir yolu ise <body> etiketimizin arkaplanını siyah bir GIF ile kaplamaktır. Arkaplan için başka bir resim koymak istemediğimiz sürece bu iyi bir çözümdür.

Veya, içeriğimizi bir 'wrapper' div etiketi içine yerleştirebilir ve bu div etiketinin arkaplanını resimle kaplayabiliriz. Ancak, bu yöntem ile işaretlememize anlamsal olmayan şeyler eklemiş oluruz.

Ve tabii ki navigasyonunuzun genişliğinin akışkan olmasını istiyorsanız arkaplanı resim ile kaplamak hiç bir işe de yarmayacaktır.

Dediğimiz gibi, tabloların CSS'den daha işe yaradığı yerler mevcuttur. Ama en sonunda veri yerine görünüm için kullandığınız tablolar ile gelen bir sürü şey buna değer mi diye kendi kendinize sormalısınız.

Tablolardan Web standartlarına geçmek: büyük resim

Öncelikle bir geçiş stratejisine karar vermelisiniz. Tüm siteyi aynı anda mı geçireceksiniz, veya bunu bölüm bölüm baz alarak mı yapacaksınız?

Dönüşümden en çok yararlanacak bölümleri ve sayfaları belirleyin. Ana sayfalar, yeni ürün duyuruları, ve buna benzer sayfalar başlamak için çok uygun yerlerdir.

Sitenizdeki içerik/bilgi çeşitlerini bir bütün olarak belirleyin

  • Ürün bilgisi
  • Fiyat bilgisi
  • Şirket bilgisi
  • Portföy
  • Sunulan hizmetler
  • Yatırımcı bilgisi
  • Alışveriş sepeti
  • Kullanıcı forumları
  • ve benzerleri

Sayfalarınızı ayrıştırmak

Sitenizdeki içerik türlerini anladığınız zaman, içeriğinizi mantıksal bölümlere ayırma amacıyla varolan sayfalarınızı analiz etme zamanı gelmiştir.

  • Ana navigasyon
  • Alt navigasyon
  • Başlıklar ve sayfa alt notları
  • İçerik
  • İlgili bilgi
  • Diğerleri

Tablo yapılarınızdaki içiçe girmiş tabloları ve boş ayırıcı ve sınır hücrelerini analiz edin. (Bunları div etiketleriyle veya daha basit bir tablo yapısıyla değiştirmek istiyoruz.)

İşaretlemenize bakın

Sayfalarınızın yapısını analiz ettikten sonra, sayfalarınızın görünümü için kullandığınız varolan HTML kodunun yapısal işaretleme ile değiştirilip değiştirelmeğeceğini analiz etmenin zamanı gelmiştir

  • Her şeyin saf ve iyi olması hatrına, <font> etiketlerinden ve ayırıcı GIFlerden kurtulun!
  • Aynı şekilde, <b> ve <br> işaretlemelerini de atın.
  • Tabloların görünümü için kullandığınız işaretlemelerden kurtulun (bgcolor, background, ve benzerleri).
  • Uygun yapısal işaretleme ile tamamen gösterim için kullanılmış CSS kodlamanızı değiştirin (<span class="header"> gibi şeyler). (Tantek Çelik A Touch of Class adlı yazısında daha fazla ayrıntıdan bahsediyor.)

Gösterim için kullandığınız etiketleri yapısal işaretleme ile değiştirin

Bul ve değiştir (ve regular expression) kullanabilirsiniz, ancak bu işi yapmanın en kolay yolu varolan sayfanızı bir tarayıcı ile açmak ve oradaki metinleri HTML editörünüze kopyalayıp yapıştırmaktır.

Dökümanınızın yapısını iyice düşünün! Sadece <b> etiketlerini <strong> etiketleri ile değiştirmek yeterli değil.

En önemli başlık ne? Onu bir <h1> etiketi ile işaretleyin. Alt başlıklarınızı <h2> etiketleri ile işaretleyin ve bu şekilde devam edin. Paragrafları <p> etiketi ile işaretleyin. Navigasyonunuzu sıralanmamış listeler şeklinde işaretleyin.

Bir DOCTYPE belirleyin ve onu kullanın. (Aşırı uçta biri olmadıkça XHTML transitional öneriririz ama öyleyseniz gidin ve XHTML strict kullanın.)

Sayfanızı mantıklı divlere bölün

Ana navigasyonunuzu ananav idsi ile bir divin içine koyun; alt navigasyonunuzu bir subnav idsi veya classına sahip bir div içine koyun, sayfa altnotunuzu bir <div id="footer"> içine koyun, ve içeriğinizi bir <div id="content"> ile sarmalayın.

Şu an fazla bir şeye benzemeyebilir, ancak stil sayfalarınıza kurallar eklemeye başladığınızda her şey hızla daha iyi bir hal alacaktır.

CSS kodunuzu yazmaya başalama zamanı

En başta, her bir dive border değeri verin. Örneğin, div {border: 1px dotted gray; padding: .5em} Bu nerede başlayıp bittiklerini, ve ayrıca herhangi bir yuvalama olup olmadığını görmenize yardımcı olacaktır.

CSS kodunuzu öncelikle öğe seçiciler için yazın (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, vs.)

Olabildiğince bağlamsal seçiciler kullanın. Bu işaretlemenizin daha temiz kalmasını sağlıyacaktır. Örneğin, #subnav li {border: 1px solid black; padding: .5em; display: inline} sadece subnav divi içinde yer alan liste elemanlarını etkileyecektir.

Olabildiğince fazla tarayıcıda test edin ve arkadaşlarınıza da kendi tarayıcılarında test ettirin.

İlgili her şeyi okuyun

Açıkça belli ki, bir saat içinde CSS ile tasarım hakkında bilmeniz gereken her şeyi anlatamayız, ama bu kitaplar Web standartlarını kullanarak sayfalarınızı daha zayıf, daha temiz ve daha hızlı bir hale getirmenizde size yardımcı olabilir.

Kağıt? Kötü kokulu kağıda ihtiyacımız yok: Online kaynaklar

CSS-Discuss

  • posta listesi: Çok aktif, çok yararlı.
  • Wiki: "Diğerlerine göre wiki uzun süre önce gerçekleşen olayların kayıtlarını tutan bir hafıza rolüne sahip." Windows'taki Internet Explorer'a anlayabileceği bir şeyler, ama daha iyi tarayıcalara 'gerçek olanı' vermek mi istiyorsunuz? Bunu ve daha fazlasını nasıl yapacağınızı burada bulabilirsiniz.
  • Arşivler: Sizi şaşırtan bir CSS probleminiz mi var? Endişelenmeyin, başka birisi çoktan o problemi yaşamıştır (ve çözümünde yardım almıştır). Cevapları burada keşfedin.

zeldman.com Günlük Rapor: Anlayışlı, kışkırtıcı, ve iyi yazılmış içerik ve sürekli sunulan linkler

A List Apart Web sitesi yapan insanlar için

The Web Standartları projesi Bu insanları kutsayın.

CSS: Neşesiz olanlar için bir rehber Harika bir link sayfası

CSS Yerleştirme Teknikleri: Eğlence ve Kâr için Eric Costello'dan projelerinizde kullanabileceğiniz yerleşimler. Kaynaklar ve örnekler de var.

Gerçek Stil Mark Newhouse'den CSS yerleşimleri, ipuçları, hileleri, ve teknikleri.

DevEdge Netscape Sidebar Tabları CSS, HTML, ve DOM için W3C tanımlamalarına inanılmaz derecede kullanışlı bağlantılar.

New York Halk Kütüphanesi Stil Rehberi XHTML ve CSS temellerini anlamak için çok kullanışlı bir kaynak.

Web Standartlarının İş için Yararları Takım elbiseliler için iyi haber. Bir MBA'nın takdir edeceği bir şekilde sunulmuş olan Web standartlarının hakikatleri.

Teşekkürler. Soru?

Note for users of Internet Explorer:

In order to properly view sites using non-roman alphabets (such as the Bulgarian and Chinese translations of this site), you need to change your Language/Fonts preferences so that the Default Character set is "Universal Alphabet (UTF-8)". This will not affect any of the sites you normally view and will give you access to a whole new world of sites in languages you probably can't read anyway.

; Scott Design, Inc.

; Adobe Systems Incorporated

International Versions

We're going global! If English isn't your native language, check out our translations page. If you'd like to translate this into your native tongue, .

Creative Commons LicenseThis work is licensed under a Creative Commons License.