عرض استاندارد برای وب سایت

شنبه, ۲۵ام مهر , ۱۳۸۸ | ۱۴ دیدگاه

این خیلی سخته که از تک تک مخاطبان وب سایتمون در مورد نحوه نمایش وب سایت سوال کنیم  و یا اینکه وب سایتمون رو توی همه مانیتورها و یا دستگاهها با ، رزولوشن های مختلف ، کیفیت رنگهای مختلف ، و برنامه های تفسیرگر ( Browser  )  مختلف امتحان کنیم و مطمئن بشیم که وب سایت ما درست نمایش داده میشه و مشکلی براش پیش نمی یاد!
three LCD monitors in successively larger sizes
مخاطبان وب سایت ما از سیستم عاملهای مختلف ، مانیتورهای مختلف ، کیفیت رنگهای مختلف ، و رزولوشن های مختلف استفاده میکنند و این نکته در یک طراحی حرفه ای بسیار مهمه که وب سایت ما به نحوی طراحی بشه که با وجود این همه عناصر تعیین کننده مختلف اونطور که ما میخواهیم نمایش داده بشه؟

خوب منظورم رو دقیق تر بیان میکنم .یک طراح دوست داره که مخاطبانش دقیقا اون چیزی رو که طراحی کرده ببینند و در حالت کلی تر وب سایتی که طراحی کرده برای همه مخا طبانش به یک شکل نمایش داده بشه.

خوب برای این که وب سایت ما برای همه مخاطبان به یک شکل نمایش داده بشه چه باید کرد؟

خوب جواب این سوال استاندارده؟ و این میتونه تنها پاسخ این سوال باشه.رعایت استانداردها در طراحی یک وب سایت می تونه به نمایش یکسان وب سایت ما برای مخاطبان و در حالت دقیقتر اکثریت مخاطبان کمک کنه. رعایت استاندارد در واقع احترام گذاشتن به مخاطبان وب سایت ما هست. ما باید عموم مخاطبان وب سایت رو در نظر بگیریم و وب سایت رو طوری طراحی کنیم که برای اکثریت قابل نمایش باشه.بحث استانداردهای وب سایت بسیار گسترده است و در اینجا ما به بخشی از این مقوله می پردازیم.

چه عرضی رو برای وب سایت در نظر بگیریم؟

خوب در همین ابتدا تکلیف رو مشخص میکنم و میگم ۹۶۰px  . اما اینکه چرا این اندازه رو برای عرض وب سایت شما پیشنهاد میکنیم دلیل داره.در نظر گرفتن این اندازه برای وب سایت شما میتونه جلوی بسیاری از ناسازگاری ها و معایب رو بگیره.

در زیر نموداری از مشخصات  مخاطبان بیش از ۲۷٫۰۰۰  وب سایت   که توسط سازمان بین المللی استانداردهای وب ( W3C ) در سال ۲۰۰۹ و در ماه September  صورت گرفته رو می بینید.

screen resolution statistics from September 2009

خوب با یک بررسی کوچیک متوجه میشید که اکثریت مخاطبان از رزولوشن ۱۰۲۴×۷۶۸  و یا بیشتر از این استفاده میکنند.بنابر این عرض وب سایت ما باید متناسب با این رزولوشن باشه تا اکثریت کاربراین اینترنت بتونن بدون مشکل وبدون تغییرات ظاهری وب سایت ما رو ببینند. خوب این قطعیه که طول و عرض یک وب سایت به نوع محتوای وب سایت و گرافیک اون هم ربط داره به طور مثال وب سایتهای که صرفا به کار طراحی و یا عکاسی می پردازند و یا مخاطبان خاصی دارند از طول و عرض های مختلفی برای طراحی وب سایتشون استفاده می کنند .

اما چیزی که مشخصه اینه که اگر می خواهید وب سایت شما برای همه مخاطبان به یک شکل و بدون ایراد نمایش داده بشه باید این استاندارد رو رعایت کنید.

یکی از دلایل استفاده از این اندازه که به نظر من مهمترینشون هم هست اینه که بسیاری از مخاطبان از تمامی صفحه مانیتورشون برای دیدن صفحات وب استفاده نمی کنند ( FullScreen  )  و مقداری از فضا در صفحات مرورگرشون به  ، عنوان صفحه ، قسمتهای مربوط به آدرس صفحات وScroll  ها …. و منوها اختصاص داره که در مرورگرهای مختلف متفاوته  . در نظر گرفتن عرض ۹۶۰px  به شما کمک می کنه با وجود این اجزاء عرض صفحه شما به Scroll  احتیاج نداشته باشه و این یک قانون نا نوشته در طراحی صفحات  وب هست ، در تعیین این اندازه فضاهایی که این اجزاء اشغال می کنند هم در نظر گرفته شده بنابر این ، نگران این اجزاء نباشید وبه راحتی از این اندازه استفاده کنید.

این عرض بر طبق استانداردهای صفحه بندی انتخاب شده به این معنی که شما می تونید به راحتی از استانداردهای صفحه بندی در صفحات وب خودتون استفاده کنید و نگران چیزی نباشید. این اندازه می تونه شما رو در پیاده کردن طرحهای مختلف از نظر صفحه بندی و ساختاری و البته استاندارد کمک کنه.

خوب یه مشکلی وجود داره و اون اینه که بسیاری از مراکز دولتی ، ادارات و … هنوز خودشون رو بروز نکردند و دارن از صفحات مانیتور با رزولوشن ۸۰۰×۶۰۰  استفاده میکنند . باید برای اونها هم فکری کرد چون مخاطبان مهمی هستند در عین اینکه خیلی قدیمین !

چند روش برای بر طرف کردن این مشکل وجود داره . اول اینکه از دستورات CSS  برای کنترل صفحات در رزولوشن های مختلف استفاده کنیم و دوم اینکه یک وب سایت با عرض متغیر برای تمامی رزولوشن ها طراحی کنیم که البته کار بسیار تخصصی هست.

خوب در حال حاضر فرض میکنیم که اندازه عرض وب سایت ما به صورت ثابت ۹۶۰px  هست که برای رزولوشن ۱۰۲۴×۷۶۸  طراحی شده اما چه اتفاقی برای وب سایت ما در رزولوشن  ۸۰۰×۶۰۰  میوفته؟

خوب اگه Dir  ( دایرکشن ) و یا چینش وب سایت ما که زبانمون فارسی هست از راست به چپ باشه تنها قسمتی از وب سایت ،  که در دید اولیه نمایش داده نمیشه منوهای سمت راست وب سایت ما هستن و تمامی محتوای وب سایت ما که بخش اصلی وب سایت ما هست بدون اینکه احتیاج به Scroll  صفحه باشه نمایش داده میشه!.البته این یک راه حل حرفه ای و۱۰۰%  نیست .البته اگه چینش و یا Dir  از چپ به راست باشه قسمتی که نمایش داده نمیشه منوهای سمت راست هستند که بیشتر در وب سایتهای انگلیسی زبان استفاده میشه.

در کل به نظر من هر روشی معایب و محاسن خودش رو داره اما مهم اینه که محاسنش نسبت به معایبش در مقایسه با روشهای دیگر قابل ملاحظه باشه.انتخاب این عرض به طور ثابت برای یک وب سایت ممکنه معایبی هم داشته باشه ( در رزولوشن های ۸۰۰×۶۰۰  ) ولی محاسنش بسیار بیشتره و این نکته رو هم اضافه میکنم که تا چند سال پیش وب سایتها برای رزولوشن ۸۰۰×۶۰۰  طراحی میشدند چون کاربردش عمومی تر بود ولی در حال حاضر با پیشرفت سخت افزارها و نرم افزارها این رزولوشن به ۱۰۲۴×۷۶۸  تبدیل شده و رزولوشن  ۸۰۰×۶۰۰  داره منقرض میشه !

Be Sociable, Share!


۱۴ دیدگاه


  1. رضا
    ۲۵ مهر ۱۳۸۸

    نمی دونم چطوریه ولی بعضی از وب سایت ها هستن که عرضشون متغیره . یعنی با هر رزولوشنی که بری توش به همون اندازه تغییر میده و نشونت میده . اگر آدرسش یادم بود میذاشتم




  2. امیر
    ۲۵ مهر ۱۳۸۸

    ممنون رضا جان.
    همونطور که گفتم این روشی که شما میگی هم یکی روش برای طراحی هست که در مورد وب سایتهای کم حجم از نظر مطالب خیلی راحت کار میشه ولی در مورد وب سایت های پر محتوا احتیاج به تخصص و کار زیادی داره.
    در هر صورت ۲ روش برای انتخاب عرض وب سایت وجود داره عرض ثابت و عرض متغیر که شما فرمودین.




  3. آرش
    ۲۶ مهر ۱۳۸۸

    سلام. مطلبتون برام خیلی به جا و به موقع بود ولی خوب متوجه نشدم. من دارم یه سایتیو راه اندازی میکنم که از cms استفاده می شه. دارم پوستشو توی فتوشاپ طراحی میکنم. آیا در فتوشاپ باید عرض پوستمو ۹۶۰pix تنظیم کنم. موندم چی کار کنم. عرض قبلی پوستم ۷۶۶pix بوده در ارتفاع ۶۲۰pix. (در بخش ایمیج سایز در کادر پیکسل دیمانسیون).بعد از اینکه مقاله ی شما رو خوندم عرض پوسته ی صفحمو رسوندم به ۹۶۰pixو ارتفاع رو دست نزدم. در نتیجه صفحاتم کشیده شد(دفورمه شد) و مجبور شدم خیلی چیزها رو تغییر بدم و همچنان در گیرش هستم.خسته شدم لطفا راهنماییم کنید.




  4. امیر
    ۲۶ مهر ۱۳۸۸

    سلام آرش جان.باید بگم که رعایت استانداردها در طراحی وب سایت خیلی هم آسون نیست و سختی های خودش رو داره.ولی رعایت استانداردها خیلی می تونه به بهتر بودن وب سایت شما کمک کنه.این اندازه (۹۶۰) یکی اندازه استاندارد برای تمامی وب سایتها در همه جای دنیاست . مگر اینکه وب سایت شما یک وب سایت خاص باشه و بخواید که دارای عرض و ارتفاع خاص دیگه ای باشه.در این استاندارد ارتفاع کلی سایت مهم نیست ولی در بحث ارتفاع مهم اینه که قسمتهای مهم از وب سایت شما در زمانی که صفحه لود میشه بدون اسکرول نمایش داده بشه.
    این نکته رو باید اضافه کنم یکی از سخت ترین کارها در طراحی یک وب سایت جمع آوری اطلاعات و چینش اونهاست.وقتی میگی اندازه رو تغییر دادم باید چینش اطلاعات در وب سایت رو هم تغییر بدی و البته کار سختیه ولی به کارش می ارزه چون اون وقع میتونی بگی یک وب سایت استاندارد طراحی کردم.در این زمینه میتونم توصیه کونم که نمونه های طراحی شده در ارتباط با موضوع وب سایت خودت رو ببینی و الگو بکیری.
    امیدوارم که مشکلت البته مشکل که نه کارت پیش بره ولی در صورتی که سوالی داشتی همینجا مطرح کنید تا جواب بدم.ممنون.



  5. […] This post was mentioned on Twitter by Amir GT, Hamed. Hamed said: عرض استاندارد برای وب سایت http://ff.im/-a1kPE […]




  6. آرش
    ۲۷ مهر ۱۳۸۸

    ببخشید منظورتون از ۹۶۰ ، اینه که عرض وبسایت ۹۶۰ باشه درسته ؟




  7. امیر
    ۲۷ مهر ۱۳۸۸

    بله آرش جان منظورم عرض وسایت هست ۹۶۰ پیکسل.




  8. مریم
    ۱۲ آبان ۱۳۸۸

    منون از بابت راهنماییتون چون واقعا به درد من یکی که برای اندازه مشکل داستم بهدرد خورد




  9. امیر
    ۱۲ آبان ۱۳۸۸

    ممنون از شما ، خوشحالم که بدردت خورد.




  10. علیرضا
    ۱ آذر ۱۳۸۸

    سلام.منم از راهکار مورد نظر شما استفاده کردم ولی چون عرض سایتم full هستش جواب نمیده.
    بعدشم عرض سایتمو در رزولیشنهای مختلف (۱۲۸۰/۱۰۲۴) به پایین امتحان کردم که با توجه به رزولیشن عرض سایتم تغییر میکنه.
    اگر امکان داره یه راهکاری نشونم بدید که عرض سایتم در همه رزولیشنها fix باشه و تغیر نکنه ک
    شدیدا منتظر جواب هستم .با تشکر.




  11. امیر
    ۱ آذر ۱۳۸۸

    علیرضا جان من دقیقا متوجه مشکل شما نشدم. ولی وقتی اندازه خاصی رو برای عرض وب سایت در نظر میگیری یعنی فیکس شده دیگه ؟
    ولی ایراداتی هم در رزولوشن های پایین داره.
    البته باید بگم که در حال حاضر دیگه از رزولوشن ۸۰۰ در ۶۰۰ استفاده نمیشه و شما می تونی به راحتی از ۹۶۰ استفاده کنی.
    نکته دوم اینکه اگه بخوای عرض وب سایت شما با رزولوشن های مختلف تغییر کنه باید از درصد ها برای اندازه عرض وب سایت استفاده کنید و البته ساختار صفحه وب شما باید این قابلیت رو داشته باشه که در رزولوشن های مختلف بهم نریزه.




  12. مجيد
    ۱۶ بهمن ۱۳۸۸

    سلام ،‌ یه راه سخت هم هست ! position:absolute

    ولی این به این معنی هست که باید آستین ها رو بالا بزنید و بگید هر آبجکت دقیقاً در کجای صفحه قرار بگیره ! مثلاً از سمت راست ۱۰۰ پیکسل و از بالا ۵۰ پیکسل فاصله بگیره ، یا همیشه در هر رزولیشنی به یکی از لبه های مروگر بچسبه !

    ولی همیشه این نوع کد زدن توصیه نمی شه !

    نمی خوام تبلیغ کنم یا از این حرفا ،‌ ولی سایت من می تونه براتون یه نمونه کار خوب باشه .

    سایت : cblog.ir

    اینم از css :
    http://cblog.ir/css/Styles.css




  13. shahrokh
    ۲۴ آبان ۱۳۸۹

    امیر خان ما رو هم راهنمایی کن…
    یه سایت با LMS زدم رو سیستم خودم با هر مرورگری یه جوره . رو سیستم دیگه (کاملا مشابه از همه لحاظ) با همون مرورگر یه جوره دیگه !!
    کلافه شدم




  14. نگار
    ۱۷ مرداد ۱۳۹۱

    طول رو چقدر بدم؟
    عرض و بدم ۹۶۰ !!!



دیدگاه خود را بنویسید