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

طراحی یک وب سایت و تنظیم عرض صفحه وب روی یک عرض بهینه گفتگویی است که ارزش داشتن آن را دارد. بسیاری از شما متوجه شده اید که اخیراً عرض طراحی وبلاگم را تغییر داده ام. عرض صفحه را به 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

    I suggest a hybrid layout and a CSS container width of 100%. As long as you’ve got a fixed width for the sidebar, the header, footer, and main content areas will adjust to fit the remaining width of the screen. Fills 100% of everyone’s browser window, regardless of the user’s monitor resolution. Then you don’t have to count pixels any more or keep track of user statistics regarding monitor resolutions.

    • 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.

      Just a personal preference I guess!

  2. 3

    Essentially, I agree with your conclusion, but if I’m using a fixed width set-up, I limit the width to 960 pixels.

    One has to account for vertical scroll bars and other browser shortcut bars that take up additional width. By staying within 960 pixels, one is assured that there is no left-to-right scrolling on a 1024 pixel-width screen resolution.

    Andy Ebon

  3. 4
  4. 5
  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.

    The only case against this would be if the analytics numbers support it… but since you didn't provide that data in your article, I'd say that you're page design is flawed.

  6. 7
  7. 8

    Silly man
    Not everyone uses every window at full screen – in fact, I’d wager that few do. 

    I have your blog in an 80% windo … and there it is, a horizontal scroll bar

    And what’s off the screen … lets see … nothing.

    So your scroll bar is pointless.

    One easy way to lose readers!!

    • 9

      The content is centered within the page @heenan73:disqus , providing the reader with exactly what they need. If I’m losing readers because they can both see the content AND see a horizontal scrollbar… not sure they were the readers I’m looking for. There’s definitely something unique within our content that pushes it out to 1217px so I am going to track that down and fix it.  This post was actually written about a previous theme.  Thanks for bringing it to my attention!

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

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