اولین چیزی که طراحان در هنگام ساختن صفحه وب خود در نظر میگیرند، چه وضوحی برای طراحی دارد. این چیزی که واقعا ارزش دارد، تصمیم گیری در مورد چگونگی طراحی طراحی شماست. هیچ چیز دیگری مانند عرض استاندارد وب سایت وجود ندارد.
چرا تصمیم بگیرید؟
در سال 1995، مانیتورهای استاندارد 640x480، بزرگترین و بهترین مانیتورهای موجود بودند. این بدان معنی است که طراحان وب با تمرکز بر ساخت صفحات به خوبی در مرورگرهای وب به حداکثر بر روی مانیتور 12 اینچ تا 14 اینچی با رزولوشن آن تمرکز داشتند.
این روزها، رزولوشن 640x480 کمتر از 1 درصد از بیشتر ترافیک وب سایت را تشکیل می دهد. مردم از رایانه های با وضوح بسیار بالاتر از جمله 1366x768، 1600x900 و 5120x2880 استفاده می کنند. در بسیاری از موارد، طراحی برای یک صفحه رزولوشن 1366x768 کار می کند.
ما در یک نقطه از تاریخ طراحی وب است که در آن ما نگران نباشیم در مورد رزولوشن. اکثر مردم مانیتورهای بزرگ و صفحه نمایش گسترده ای دارند و پنجره مرورگر خود را به حداکثر خود نمی رسانند. بنابراین اگر تصمیم به طراحی صفحه ای با ابعاد بیش از 1366 پیکسل نداشته باشید، صفحه شما احتمالا در بسیاری از پنجره های مرورگر حتی در مانیتورهای بزرگ با وضوح بیشتری نیز ظاهر خواهد شد.
عرض مرورگر
قبل از اینکه فکر کنی "خوب، صفحاتم را 1366 پیکسل عرض میکنم"، بیشتر به این داستان وجود دارد. یک مسئله اغلب نادیده گرفته شده در هنگام تصمیم دادن به عرض یک صفحه وب این است که مشتریان چگونه مرورگر خود را حفظ می کنند. به طور خاص، آیا مرورگرهای خود را به اندازه صفحه تمام به حداکثر می رسانند یا آنها را کوچکتر از صفحه نمایش کامل می کند؟
در یک نظرسنجی غیر رسمی از همکاران که همه از لپ تاپ رزولوشن 1024x768 استاندارد استفاده می کردند، دو مورد تمام برنامه های خود را به حداکثر رسانده بودند. بقیه پنجره های مختلف را به دلایل مختلف باز کردند. این نشان می دهد که اگر شما در حال طراحی اینترانت این شرکت در 1024 پیکسل گسترده، 85 درصد از کاربران را مجبور به حرکت به صورت افقی برای دیدن کل صفحه.
پس از اینکه حساب کاربری را برای مشتریانی که به حداکثر برسانید یا نپردازید، در مورد مرزهای مرورگر فکر کنید. هر مرورگر وب یک نوار پیمایش و مرزهای دو طرف دارد که فضای موجود را از 800 تا 740 پیکسل یا کمتر در رزولوشن 800x600 و حدود 980 پیکسل در حداکثر رزولوشن 1024x768 پیکسل کاهش می دهد. این مرورگر "کروم" نامیده می شود و می تواند از فضای قابل استفاده برای طراحی صفحات شما دور باشد.
صفحات ثابت یا مایع عرض
عرض عددی واقعی تنها چیزی است که شما باید در هنگام طراحی عرض وبسایت خود فکر کنید. شما همچنین باید تصمیم بگیرید که آیا شما یک عرض ثابت یا عرض مایع داشته باشید . به عبارت دیگر، شما می خواهید عرض را به یک شماره خاص (ثابت) یا به یک درصد (مایع) تنظیم کنید؟
عرض ثابت
صفحات عرض ثابت دقیقا همانند صدا هستند. عرض در یک شماره مشخص ثابت می شود و مهم نیست که مرورگر چه اندازه یا کوچک باشد. این می تواند مفید باشد اگر شما نیاز به طراحی خود را به دقیقا به همان نگاه بدون توجه به اینکه مرورگرهای خوانندگان خود را گسترده و یا باریک است، اما این روش خوانندگان شما را در نظر نمی گیرد. افراد با مرورگرهای باریک از طراحی شما مجبور به حرکت به صورت افقی هستند و افرادی که دارای مرورگرهای گسترده هستند، مقدار زیادی فضای خالی روی صفحه نمایش دارند.
برای ایجاد صفحات عرض ثابت، به سادگی از اعداد پیکسل مخصوص برای عرض تقسیم صفحه خود استفاده کنید.
عرض مایع
صفحات عرض مایع (گاهی اوقات صفحات انعطاف پلاستیکی نامیده می شود) بسته به اینکه پنجره مرورگر چقدر گسترده است، عرض متفاوت است. این اجازه می دهد تا شما را به طراحی صفحات بیشتر تمرکز بر مشتریان خود. مشکل صفحه صفحات مایع این است که آنها می توانند برای خواندن دشوار باشد. اگر طول اسکن یک خط از متن بیش از 10 تا 12 کلمه یا کمتر از 4 تا 5 کلمه باشد، خواندن آن دشوار است. این به این معنی است که خوانندگان با پنجره های مرورگر بزرگ یا کوچک مشکل دارند.
برای ایجاد صفحات پهنای انعطاف پذیر، به سادگی از درصد یا ems برای عرض تقسیم صفحه خود استفاده کنید. شما همچنین باید خود را با ویژگی CSS حداکثر عرض آشنا کنید. این ویژگی به شما اجازه می دهد عرض را در درصد تعیین کنید، اما آن را محدود کنید تا به اندازه کافی بزرگ نگردد که مردم نمی توانند آن را بخوانند.
و برنده است: پرس و جو رسانه CSS
بهترین راه این روزها استفاده از پرس و جوهای رسانه ای CSS و طراحی پاسخگو برای ایجاد یک صفحه است که به عرض مرورگر آن را تنظیم می کند. یک طراحی وب پاسخگو با استفاده از محتوای مشابه برای ایجاد یک صفحه وب کار می کند که آیا شما آن را در عرض 5120 پیکسل عرض یا 320 پیکسل عرض مشاهده کنید. صفحات با اندازه های مختلف متفاوت به نظر می رسند، اما دارای محتوای مشابه هستند. با پرس و جوی رسانه در CSS3، هر دستگاه دریافتی پرس و جو را با اندازه آن پاسخ می دهد و صفحه سبک به آن اندازه خاص تنظیم می شود.