عرض بهینه صفحه وب چیست؟

طراحی یک وب سایت و تنظیم عرض صفحه وب روی یک عرض بهینه گفتگویی است که ارزش داشتن آن را دارد. بسیاری از شما متوجه شده اید که من اخیراً عرض طراحی وبلاگ خود را تغییر داده ام. عرض صفحه را به 1048 پیکسل رساندم. ممکن است برخی از شما با این حرکت مخالف باشید - اما من می خواستم برخی از آمارها و دلایلی را که چرا عرض موضوع را بسیار گسترده فشار دادم به اشتراک بگذارم.

هرچند 1048 پیکسل عددی تصادفی نبود.

دو تأثیر کلیدی در گسترش عرض صفحه من وجود دارد:

  • تغییر عرض Youtubeاکنون یوتیوب اندازه های بزرگتر جاسازی شده را ارائه می دهد. اگر روی چرخ دنده کوچک در نوار کناری صفحه ویدیوی Youtube کلیک کنید ، گزینه هایی برای اندازه های بزرگتر و همچنین موضوع ارائه می شود. از آنجایی که فیلم های با کیفیت بالاتر در حال تبدیل شدن به مکان رایج در Youtube هستند ، من می خواستم این فیلم ها را در وبلاگ خود قرار دهم و با بیشترین جزئیات (بدون مصرف کل عرض صفحه) آنها را نمایش دهم.
  • عرض تبلیغات معمولی در عرض های 125 ، 250 و 300 پیکسل است. به نظر می رسد 300 پیکسل بیشتر و بیشتر در سایت های درآمد آگهی ظاهر می شود و من می خواستم آنها را مرتبا در نوار کناری خود قرار دهم.

و البته ، برخی از لایه های سمت چپ و راست صفحه ، محتوا و نوار کناری وجود دارد ... بنابراین عدد جادویی 1048 پیکسل برای موضوع من بود:

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

آیا آمار خواننده خود را بررسی کردم؟

بله حتما! اگر اکثر بازدید کنندگان من از صفحه نمایش با وضوح پایین تر استفاده می کردند ، مطمئناً فکر دیگری در مورد گسترش صفحه خود داشتم. عرض و درصدپس از خروج از وضوح صفحه از بسته Analytics من (در Google آن Visitors> قابلیت مرورگر> وضوح صفحه) ، من یک صفحه گسترده اکسل از نتایج ایجاد کردم و عرض را از قسمت وضوح تجزیه کردم.

Google وضوح تصویر را 1600 × 1200 ارائه می دهد ، بنابراین شما باید همه چیز را از سمت چپ "x" بردارید ، آن را در 1 ضرب کنید تا به یک نتیجه عددی تبدیل شود ، بنابراین می توانید بر روی آن مرتب کنید ، سپس یک SUMIF بزنید و ببینید چند بازدید بزرگتر یا کمتر از عرض طراحی مورد نظر شما هستند.

= LEFT (A2، FIND ("x"، A2,1،1) -1) * XNUMX

آیا 22٪ از خوانندگانی را که وضوح کمتری دارند ، کنار گذاشتم؟ البته که نه! نکته خوب در مورد چیدمان با محتوای سمت چپ و نوار کناری سمت راست شما این است که می توانید اطمینان حاصل کنید که محتوای شما هنوز در عرض اکثر مرورگرها است. در این حالت ، 99٪ خوانندگان من بیش از 640 پیکسل عرض دارند ، بنابراین من خوب هستم! من نمی خواهم که آنها نوار کناری را کاملا از دست بدهند ، اما این درجه دوم محتوای آن است.

9 نظرات

  1. 1

    من یک طرح ترکیبی و عرض ظرف CSS 100٪ پیشنهاد می کنم. تا زمانی که یک عرض ثابت برای نوار کناری داشته باشید ، سرصفحه ، پاورقی و مناطق محتوای اصلی متناسب با عرض باقیمانده صفحه تنظیم می شوند. بدون در نظر گرفتن وضوح صفحه نمایش کاربر ، 100٪ از پنجره مرورگر همه را پر می کند. پس دیگر لازم نیست پیکسل ها را بشمارید یا آمار کاربر را در مورد وضوح تصویر مانیتور پیگیری کنید.

    • 2

      I really like hybrid layouts, Bob – but unfortunately they don’t play well sometimes with the actual content. Maybe I’m lazy, but it’s easier for me to know that max and min are 640px in my site. Stretching is difficult to conceive when I’m writing the posts.

      حدس می زنم فقط یک اولویت شخصی باشد!

  2. 3

    اساساً ، من با نتیجه گیری شما موافقم ، اما اگر از تنظیمات عرض ثابت استفاده می کنم ، عرض را به 960 پیکسل محدود می کنم.

    یکی باید نوارهای پیمایشی عمودی و سایر نوارهای میانبر مرورگر را که عرض اضافی را اشغال می کنند ، حساب کند. با ماندن در محدوده 960 پیکسل ، اطمینان حاصل می شود که هیچ پیمایشی از چپ به راست روی وضوح صفحه نمایش به عرض 1024 پیکسل وجود ندارد.

    اندی ابون

  3. 4
  4. 5

    خیلی عجیب و غریب. در Firefox ، سایت شما دارای یک نوار پیمایشی horizont با شماره 1048 است و تا زمانی که به 1090 نرسیدید ، ظاهر تمیز ندارد.

    با این وجود از آماری عالی که در قطعنامه های Google ارائه دادید متشکریم

  5. 6

    Since you've got your <div id="page"> set to 1048px, your site causes horizontal scroll bars on a 1024 screen. I think it would have been better to skim a 100px off the width (and padding) of your sidebar and content area so it fits on a 728×1024. That's what is best practice today.

    تنها موردی که در برابر این امر وجود دارد این است که اعداد تجزیه و تحلیل از آن پشتیبانی کنند ... اما از آنجا که شما این داده ها را در مقاله خود ارائه نکرده اید ، می توانم بگویم که طراحی صفحه شما دارای اشکال است.

  6. 7
  7. 8

    مرد احمق
    همه از پنجره ها در حالت تمام صفحه استفاده نمی کنند - در واقع ، من شرط می بندم که تعداد کمی از آنها استفاده کنند. 

    من وبلاگ شما را در 80٪ windo دارم ... و در اینجا یک نوار پیمایشی افقی است

    و آنچه در خارج از صفحه است… اجازه می دهد تا چیزی را ببینیم

    بنابراین نوار پیمایشی شما بی معنی است.

    یک راه آسان برای از دست دادن خوانندگان !!

    • 9

      محتوا در صفحه @ heenan73: disqus متمرکز است و دقیقاً همان چیزی را که خواننده نیاز دارد ارائه می دهد. اگر خوانندگانم را از دست می دهم زیرا آنها هم می توانند محتوا را ببینند و هم یک نوار پیمایشی افقی را می بینند ... مطمئن نیستند که آنها خواننده هایی بودند که دنبال آنها می گشتم. مطمئناً چیزی منحصر به فرد در محتوای ما وجود دارد که آن را به 1217 پیکسل می رساند ، بنابراین من می خواهم آن را ردیابی کرده و آن را برطرف کنم. این پست در واقع در مورد یک موضوع قبلی نوشته شده است. از اینکه مرا از این موضوع مطلع کردید ممنونم!

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.