• بخش چهارم – طراحی وب واکنش گرا
بخش چهارم – طراحی وب واکنش گرا
1395/01/15 - 19:17:16 // تکنولوژی و عکاسی // 0 نظر // 361 بازدید

تا کنون مباحث مربوط به طراحی واکنش گرا ، تمرکزش بر این بود که چگونه می توان سایت هایی طراحی کرد که در دستگاه های موبایل بدرستی کار کند . در صورتی که ، تنها دستگاه های موبایل نیستند که می توانند از فواید طراحی واکنش گرا بهمره مند گردند .

طراحی واکنش گرا ، تنها به موبایل ها محدود نمی شود

تا کنون مباحث مربوط به طراحی واکنش گرا ، تمرکزش بر این بود که چگونه می توان سایت هایی طراحی کرد که در دستگاه های موبایل بدرستی کار کند . در صورتی که ، تنها دستگاه های موبایل نیستند که می توانند از فواید طراحی واکنش گرا بهمره مند گردند .

علیرغم رشد عظیم تلویزیون های بر پایه ی وب ، نظیر BBC’s iPlayer , Netflix , Amazon Lovefilm که همگی روی دستگاه های موبایل می باشند اما تلویزیون همچنان در مرکز سرگرمی های خانواده ها می باشد . بیشترین استفاده از تلویزیون استفاده از رسانه ها می باشد : تماشای برنامه های تلویزیونی ، بازی توسط یک کنسول بازی ، و یا استفاده گوش دادن به موزیک و یا رادیو .

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

در کنار تلویزیون ، کامپیوترهای دسکتاپ و یا نوت بوک ها با وضوح بالا و نمایش بزرگتر متداول تر می باشند .با توجه به موارد ذکر شده ی قبل تاریخچه ی وب سایت ها در وضوح 1028 * 800 ساخته می شدند و در مارس 2012 صفحه نمایش ها با وضوح 1366*768 تبدیل به صفحه های معمول شدند . با تکنیک طراحی واکنش گرا شما می توانید از فضای بیشتری از صفحه بجای حاشیه های زیاد و سفید استفاده کنید . تصاویر می توانند بزرگتر باشند و محتواها می تواند با فضا و فاصله ی بیشتری از هم نمایش داده شوند . و همچنین محتوای بیشتر می تواند قبل از اینکه کاربر شروع به اسکرول کردن صفحه کند دیده شود .

اگر به بخشی از دستگاه ها نگاهی بیاندازیم ، بسادگی در میابیم که گستره ی وسیعی از وضوح صفحه نمایش ها وجود دارد . در شکل زیر تفاوت بین رزولوشن های متفاوت دستگاه های موبایل از یک کارخانه ی خاص ( در این جا اپل ) را مشاهده می کنید .

 
 

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

چه زمانی شما از طراحی واکنش گرا استفاده نخواهید کرد ؟

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

یک مثال اولیه از مناسب نبودن طراحی واکنش گرا ، نرم افزارهای کاربردی تحت وبی خواهد بود که برای استفاده از دسکتاپ ساخته شده اند ، Google Docs یکی از آن نرم افزارها می باشد که دارای امکانات و ویژگی های بسیار و سنگینی است که در دسکتاپ قابل دسترسی می باشد و شما آن را روی موبایل با آن امکانات نخواهید داشت و در نسخه ی تحت موبایل بسیاری از ویژگی های آن حذف و یا ساده سازی شده است . یکی از دلایل این اتفاق آن است که برای یک نرم افزار تحت وب با ویژگی های غنی مانند Google Docs ، صفحات نمایش کوچک مشکل بزرگی بشمار خواهد آمد . در یک گزارشگر بزرگ بسیار ساده است که تمام ویژگی ها را در یک نوار ابزار قرار دهید ، اما در موبایل این امکان وجود نخواهد داشت . بنابراین برای کاربر تجربه ی بهتری خواهد بود تا برای نسخه ی دسکتاپ و موبایل ویژگی های جداگانه ای در نظر گرفته شود .

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

درک دیدگاه یا viewport

یکی از مفاهیم مهم در طراحی واکنش گرا دیدگاه می باشد . دیدگاه یا viewport در واقعی نامی پیشنهادی برای عبارت نگاهی در میان سایتی می باشد که شما می بینید .

اولویت در HTML5 و CSS3 در این است که ما ارتباط یک وب سایت و سایز پنجره ی مرورگر نگاه می کنیم . نوعا کاربران ما از حداقل سایز 1024 * 800 برای وضوح صفحه نمایش خود در حالت تمام صفحه استفاده می کنند . بنابراین ما وب سایت خود را بر اساس یک اندازه ی ثابت بین 960 تا 980 طراحی میکردیم . و هنگامی که دستگاهی صفحه ی کوچکتری داشت ما در نمایش آن سایت به مشکل بر میخوردیم . و اگر چنین اتفاقی برای ما می افتاد ، کاربر آن دستگاه بناچار مجبور می شد تا بصورت افقی نیز صفحه ی نمایش را اسکرول نماید . ولی برخی از دستگاه ها و سیستم عامل های مانند IOS هنگامی که صفحه نمایش بزرگتر از رزولوشن دستگاه مورد نظر می شدند آن ها را تبدیل به مقیاس کوچکتری میکرد تا سایت بطور کامل و بدون اسکرول افقی دیده شود . اما در این حالت چون محتوای سایت بسیار کوچک می شد ، کاربر مجبور بود تا سایت را بزرگنمایی نموده و مجددن اسکرول افقی کند . و این راه حل یکی از بهترین راه حل ها برای سایت های قدیمی بود که برای رزولوشن های بزرگتری ساخته شده بودند .

برای اینکه کنترل دیدگاه یا viewport به توسعه دهندگان وب داده شود ، یک تگ متا Meta Tag تولید شده است که اجازه ی تعیین عرض و مقیاس دیدگاه را به توسعه دهنده ی وب می دهد . در این بخش شرح می دهیم که چگونه از این تگ متا استفاده کنید . این تگ متا به مرورگر موبایل نشان می دهد که در عرض های متفاوت چگونه سایت را رندر کرده و به نمایش در آورد . شما می توانید تعیین کنید که کجا طراحی واکنش گرا استفاده شود و یا تعیین کنید که اندازه ی دیدگاه viewport هم اندازه ی پنجره ی مرورگر شود .

در شکل زیر ارتباط میان عرض و ارتفاع دیدگاه viewport را با پنجره ی مرورگر مشاهده می نمایید

 
 
 

گستره ی وسیع دستگاه ها ، به آن معنیست که شما نیاز دارید تا تعداد زیادی از اندازه های دیدگاه viewport را آزمایش نمایید . برای اینکه این گستره ی وسیع را در دستگاه های مختلف براحتی تست کنید می توانید به آدرس سایت http://viewportsizes.com مراجعه کنید . این سایت به شما این امکان را می دهد تا در میان لیست دستگاه ها جستجو کرده و اندازه ی مناسب مورد نظر خود را مورد امتحان قرار دهید .

پایان قسمت چهارم

محمد جعفری فوتمی

قسمت پنجم درک نقاط شکست ( Breakpoints )

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

در کنار شما هستیم ، تا در اوقات فراغت خود بدور از استرس ها و مشکلات و خستگی ناشی از کار ، به آرامش برسید و لحظاتی شاد را بگذرانید و همچنین با نکاتی ساده مهارت های زندگی خود را بالا ببرید

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر