کمتر پیش میاد که مقاله ای رو تا آخر بخونم!!

این موضوع بیشتر از آنکه به نویسنده مقاله مربوط بشه، به طراح قالب سایت مربوطه چون حتی مقاله هایی هم خیلی خوب نوشته شدند به دلیل طراحی ضعیف و عدم رعایت یک سری نکات ریز، غیر قابل خوندن می شن. البته منظورم سایت های درپیت و الکی نیست! انگشت اشاره ام به سوی سایت های بزرگی چون Wikipedia و CNET هستش که با وجود اینکه این همه بازدید کننده در ماه و سال می گیرن و باید تمام سلیقه های مختلف رو به خوبی جواب بدن، چرا خوندن مقاله هاشون تا انتها انقدر سخته!!!

به شخصه خیلی دوست دارم مقاله های این سایت های بزرگ رو تا آخر بخونم و هرچقدر می تونم ازشون اطلاعات کسب کنم ولی یه عاملی این وسط مانع میشه طوری که بعد از خوندن چند پاراگراف کلا کلافه میشم و در آخر CTRL+W (نزنید یه وقت ها!). به نظرم یکی از عوامل تاثیر گذار روی این قضیه سایز قسمتی است که نوشته ها داخلش قرار میگیره یا بهتریم بگیم عرض کادر محتوی. در این مقاله می خوام یه مقدار موضوع رو باز کنم و ببینم چه سایزی برای یک سایت وبلاگ مانند مناسبه؟ تمام عرض یا عرض ثابت؟

تمام عرض یا عرض ثابت؟

خب مثالی که در بالا نشون دادم یکی از مقاله های سایت Wikipedia هستش که به سختی تونستم تا آخر بخونم. ویکی پدیا از سیستم "تمام عرض" یا 100% عرض مرورگر استفاده می کنه یعنی هرچی سایز مرورگر بزرگ یا کوچک بشه، عرض نوشته ها نیز بدون محدودیت بزرگ یا کوچک میشه. خب مسلمه که این نوع طراحی چشم رو موقع خوندن اذیت می کنه چون در نمایشگر های بزرگ فاصله ابتدا و آخر هر خط خیلی زیاد میشه و چشم باید فاصله ی بیشتری رو برای رفتن از یک خط به دیگری طی کنه. به شخصه هیچ وقت طرفدار این سبک نوشتن نبوده و نخواهم بود و ترجیح میدم محدودیتی برای عرض نوشته ها متناسب با سایز مرورگر در نظر گرفته بشه.

شما را نمیدانم اما همین توجیح برای خط زدن گزینه "تمام عرض" برای عرض محتوای وبلاگ بنده رو قانع می کنه و بیشتر از این نمی خوام راجبش بحث کنم. در ادامه به عرض ثابت ایده آل برای محتوای وبلاگ می پردازیم...

بهترین عرض ثابت برای محتوای وبلاگ کدام است؟

کمتر با سایت یا بلاگی برخورد می کنم که عرض ایده آلی رو رعایت کرده باشه چون معمولا پس از خوندن چند پاراگراف چشام خسته میشه و سرم درد می گیره! از همه بدتر تبلیغات و باکس های اضافی ای که معمولا با اسکرول صفحه پایین و بالا میاند و واقعا روی موخت راه میرن.
یک مثال بسیار واضح همین اول کار بخوام بیارم، قالب کنونی وبلاگ خودم هستش که فکر نکنم حتی مقدمش هم تا آخر بخونم...
اما این از وبلاگ مذخرف خودم، سایت CNET رو چی بگم که با وجود اینکه نویسنده هاش درجه یک اند و مقاله هاش از کیفیت بالایی برخورداره اما باز هم خوندن مقاله هاش انقدر سخته! جدا از ویدیوهاش که خودشون واسه خودشون پخش میشن و باکس های تبلیغاتی اش که هرجا میری دنبالت میان و فونت یه مقدار زیادی برجستش دیگه غیر از عرض متن ها نمودنم چی باعث میشه که CNET غیر قابل تحمل بشه. اونطور که اندازه گرفتم CNET برای متن هاش عرض حدودا 720 پیکسل رو در نظر گرفته...
سایت های دیگه هم مثل CNET هستند که با اینکه نویسنده های خوبی دارند اما مقاله هاشون را نمیشه تا انتها همراهی کرد مثل Digital Trends یا Trusted Reviews و بقیه. البته به نظر شخص بنده بیشتر از عرض صفحه، تبلیغات این سایت ها بساط اذیت و آزار را فراهم می کنند ولی به هر حال در زیر عرض کادر محتوای تعدادی از این سایت ها را آورده ایم...
  • Digital Trends: مقدار* 640 پیکسل**
  • Trusted Reviews: مقدار 720 پیکسل
  • Techradar: مقدار 600 پیکسل
  • Which.co.uk: مقدار 576 پیکسل
  • Life Hacker: مقدار 636 پیکسل
  • Tom's Guide: مقدار 743 پیکسل
* کلمه "مقدار" رو گذاشتم تا فارسی انگلیسی قاطی نشه
** اندازه های گرفته شده دقیقا قسمتی است که نوشته توش قرار میگیره و نه کل کادر!
خب این از سایت های خارجی، سایت های ایرانی چطور؟ باید بگم که شاید 1 در 1000 بشه که من یه مقاله فارسی رو تا آخرش بخونم چون در این مورد علاوه بر مشکلات طراحی سایت، با نویسنده های ناشی تری نیز رو به رو هستیم. در زیر عکس یکی از مقالات دیجی کالا رو گذاشتم...
عرض کادر محتوای دیجی کالا 810 پیکسل است. یه مورد دیگه ای که دیجی مگ از اون رنج میبره، باکس های چسبون آزار دهندش است که مثل تبلیغات سایت های خارجی هر کجا میری دنبالت میاد. چندتا سایت خوب ایرانی دیگه که خوندن مقالاتشون تا آخر واقعا سخته رو اندازه گرفتم تو لیست زیر آوردم...
  • Zoomit: مقدار 620 پیکسل
  • سایت خوب ایرانی دیگه ای هم داریم مگه؟ اگه داریم تو نظرات بنویسید

بالاخره این "سایز ایده آل کادر محتوای بلاگ" چقدر باید باشه؟

بعید میدونم کسی تو دنیا وجود داشته باشه که تا اینجای مقاله رو بخونه ولی بای اطلاعات خودمم که شده مقاله رو تموم می کنم. "سایز ایده آل کار محتوای بلاگ" می خوای بدونی چقدره؟ از CSS-Tricks بپرس. میتونم به جرات بگم اگه نویسنده مقاله CSS-Tricks خوب باشه من نه تنها کل مقاله رو بلکه تمام نظراتش رو هم می خونم.
اما این عدد جادویی چیه؟ چیزی بین 700 تا 750 پیکسل ما می گیم 743 پیکسل کی به کیه! اما این همه ی ماجرا نیست. با وجود اینکه CSS-Tricks هم از تبلیغات سایدبار استفاده می کنه، ولی این تبلیغات زیاد رو موخت راه نمیرن. در کل یه چند تا نکته و "ترفند" رو میشه همین الان از CSS-Tricks دزدید...
  • فضای خالی زیاد بین متن و حاشیه
  • فونت واقعا تر و تمیز و نازک با برجستگی های مشخص
  • لینک های متمایز از نوشته نه در حدی که زیاد به چشم بزنند (به تو نگاه میکنم CNET)
  • فاصله های مناسب رعایت شده بین خطوط و پاراگراف ها
  • عدم استفاده از سایدبار چسبنده یا Sticky

جمع بندی

هنوز هستید؟ بابا دمتون گرم من خودمم این مقاله رو تا آخر نمی خونم. حیف نیست تا اینجای مقاله رو خونده باشین ولی یه نظر ندین؟ حداقل یه چندتا سایت که فکر می کنید راحت مقالاتش رو تا آخر می خونید معرفی کنید شاید نظرم راجب CSS-Tricks برگشت.
ولی در کل این موضوع مسئله ی خیلی مهمیه و طراح ها و CSS باز ها خیلی باید بهش توجه کنند چون واقعا چه فایده ای داره یه مقاله خوب نوشته بشه وقتی بلاگ اونقدر زاقارت باشه که نشه خوندش؟