طراحی رسپانسیو یا واکنشگرا (Responsive) چیست؟ + نکاتی مهم برای طراحی رسپانسیو

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

gootvqoj

با تکنولوژی طراحی ریسپانسیو یا واکنش گرا ” Responsive design ” این مشکلات برطرف میشود.

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

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

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

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

اگر وب سایتی ریسپانسیو نباشد به مرور بازدید کنندگان آنها سهولت وبگردی آسان را در website شما از دست خواهند داد و این امر موجود کاهش بازدید و از دست دادن مخاطبانتان گردد پس بهتر است هرچه سریعتر وبسایت های خود را به سمت طراحی ریسپانسو ببرید و یا اگر می خواهید وبسایت جدیدی راه اندازی کنید از این تکنولوژی در آن بهره ببرید.

دردسر نمایش درست یک وب سایت در نمایشگرهای مختلف یکی از دغدغه های طراحان وب است. به این معنی که اگر یک کاربر سایت شما را با یک نمایشگر دکستاپ(Desktop) ببیند و کاربر دیگری همان سایت را با یک اسمارت فون(Smart Phone) مشاهده کند هیچ فرقی بین این دو نکند و یا حداقل تفاوت را داشته باشد.

اما قابلیت ریسپانسیو بودن طراحی سایت دقیقا چیست ؟

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

آیا ریسپانسیو بودن طراحی سایت در رتبه سایت تاثیر دارد ؟

این قابلیت باعث ایجاد ترافیک بیشتر برای سایت می شود که در نهایت در رتبه وب سایت تاثیر گذار است ، چرا که در تماما شرایط شما در دسترس خواهید بود .

آیا ابزاری برای بررسی رسپانسیو بودن وب سایت وجود دارد؟

شما می توانید در این وب سایت نحوه نمایش وب سایت خود را در مدلهای معروف گوشیهای هوشمند و تبلتهای معروف بازار و دستگاه های اپل و همچنین رزولوشن های انتخابی خود مشاهده نمایید و مشکلات وب سایت خود را ببینید

نتیجه گیری

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

۸۰% کسانیکه گوشیهای هوشمند دارند هنگام صبح قبل از اینکه دندانهای خود را مسواک بزنند گوشیهای خود را چک می کنند.

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

۸۰% کسانیکه گوشیهای هوشمند دارند هر ۱۵ دقیقه گوشی خود را برای مطالب جدید چک می کنند


و حالا نکاتی مهم برای طراحی رسپانسیو

طراحی برای وبسایت های رسپانسیو ابتدا ممکن است کمی مشکل به نظر برسد و این به دلیل روش های متفاوتی است که برای طراحی رسپانسیو داریم، در این مقاله روش هایی را برای طراحی رسپانسیو بیان میکنیم که یقینا در پروژه هایتان به به کارتان می آید و همچنین ایجاد طرح های رسپانسیو را برای شما آسان تر میکند.

نقاط شکست را بدانید !

قبل از شروع هر پروژه ای باید نقاط شکست صفحه را مشخص کنید، یک قانون ثابت و همیشگی میگوید سعی کنید ابتدا یک لایه برای تلفن های هوشمند طراحی کنید، سپس یک لایه برای تلبت طراحی کنید و سپس برای دسکتاپ طراحی کنید و اگر نیاز دارید برای سایزهای بزرگ تر طراحی کنید میتوانید برای عرض های ۱۲۰۰ یا ۱۴۰۰ پیکسل نیز طراحی کنید.

برنامه ریزی روی به جلو داشته باشید !

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

iqflfqu9

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

از مرورگر کمک بگیرید !

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

همه چیز در یک فایل PSD

به شدت توصیه میشود هنگام طراحی رسپانسیو تمام المنت هارا در یک فایل psd قرار دهید، یک مثال ساده میزنم، از ۱۲۰۰ پیکسل به عنوان بزرگترین سایز عرض طرحمان استفاده میکنیم، بنابراین یک فایل psd جدید میسازیم با ۱۲۰۰ پیکسل عرض و ۲۰۰۰ پیکسل ارتفاع، سایز عرض های بعدی را به ترتیب ۱۰۲۴ ، ۷۶۸ و ۴۸۰ پیکسل قرار میدهیم.
برای شروع لایه ی بک گراند را از حالت قفل در می آوریم و به تعداد لایه های بک گراندی که نیاز داریم یکی بیشتر کپی میگیریم و میسازیم، لایه ی بک گراند اصلی را کاملا به رنگ سیاه در می آوریم و بقیه را سفید میکنیم. هر لایه ی بک گراند سفید را درون یک پوشه می اندازیم و نام سایز صفحه را نام پوشه قرار میدهیم برای مثال ۴۸۰ .
سپس خطوط راهنمای فتوشاپ را در نقاط شکست خود قرار دهید. بر روی View کلیک کنید سپس New Guide  را بزنید و سپس Vertical را انتخاب کنید و به آن مقادیر ۹۰ ، ۲۱۶ ، ۳۶۰ ، ۸۴۰ و ۱۱۱۰ پیکسل بدهید. از ابزار Rectangular Marquee استفاده کنید برای اینکه لایه ی درونی را انتخاب کنید ( ۴۸۰ پیکسلی )

fcp6fxj7

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

h6h9q7n9

از ماک آپ ها استفاده کنید !

طبیعتا شروع کردن از کوچک ترین سایز راحت تر میباشد، از کوچیکترین سایز که در این مثال ۴۸۰ پیکسل است شروع کنید و سپس محتوای آن لایه را duplicate کنید در پوشه ی ۷۸۰ پیکسل و تغییرات لازم را انجام دهید، لازم نیست پیکسل به پیکسل در طراحی خود دقت به خرج بدهید بلکه فقط جاگذاری المنت ها در آن را به درستی انجام دهید، سعی کنید زمان زیادی برای قرار دادن فاصله ی بین متون خود در فتوشاپ صرف نکنید زیرا آن چیزی که شما در فتوشاپ میبینید با آن چیزی که بعدها در مرورگر خواهید دید تفاوت بسیاری خواهند داشت برای همین وقت زیادی در فتوشاپ برای متون صرف نکنید.

تغییرات را درک کنید !

زمانی که رسپانسیو طراحی میکنید باید درک کنید که هنگام تغییر وضعیت و اندازه ی مرورگر المنت ها باید چگونه تغییر کنند، باید همچنین درنظر داشته باشید که اگر سایز صفحه ی کاربرتان از نقاط شکستتان خیلی بیشتر یا کمتر بود چه اتفاقی رخ دهد.
راه های متفاوتی است برای تطبیق مناسب المنت ها در تمام لایه بندی هایتان و این به درک شما از CSS بستگی دارد، برای مثال میتوانید المنت ها را fix کنید، hidden کنید، float های راست و چپ به آنها بدهید، لایه بندی Liquid داشته باشید یا حتی المنت هارا scale کنید. در طرح های رسپانسیو خود باید بتوانید از تمامی این ویژگی ها به صورت مناسب استفاده کنید.

  • دادن Float به محتواهایی که کنار سایدبار قرار دارند در صفحه های بزرگ میتواند گزینه ی خوبی باشد اما باید دقت کنید که هرچقدر صفحه ی شما کوچک تر میشود، المنت هایی که Float دارند به همدیگر فشار بیشتری وارد میکنند.
  • محتوای Liquid بهترین گزینه برای تغییر نقاط شکست میباشد اما برای صفحه ی بزرگ تقریبا به درد نخور است، محتوای Liquid عموما برای ستون های متنی استفاده میشود که میتوانند هنگام زیاد شدن عرض در عرض پخش بشوند، در صفحات کوچک به خوبی عمل میکنند اما در صفحات بزرگ ممکن است متون خیلی طولانی شوند و این اصلا خوب نیست برای همین بهتر است در این مواقع از حالت fixed استفاده کنید.
  • شبیه به حالت Liquid، المنت های Scale شده میتوانند درصد بگیرند و به اندازه ی پدرشان بزرگ و کوچک بشوند، این خاصیت را میتوان به عکس ها یا اندازه ی نوشته ها داد.
  • Fixed یکی از راه های متداول برای ثابت قرار دادن المنت ها است، اگر محتوایی دارید که به هیچ وجه نمیخواهید سایز یا اندازه ی آن دچار تغییر شود آن را در صفحه Fix کنید، در صفحه های کوچک میتوانید المنت ها را Fix کنید تا به راحتی در صفحه قرار بگیرند.
  • اگر میخواهید یک المنت را حذف کنید یا اگر فضای کافی برای آن ندارید، آن را Hide کنید، المنت های Hide شده توسط کاربران دیده نمیشوند اما در صفحه ی وب دانلود میشوند، اگر از عکس های بزرگ در صفحه استفاده میکنید در سایز موبایل هم آن عکس ها دانلود میشوند، هرچند عکس ها دیده شوند یا دیده نشوند.

توجه کنید که میتوانید تمام این ویژگی ها را به یک المنت بدهید، برای مثال در یک لایه بندی المنت Fix باشد در لایه بندی دیگر المنت Float باشد و در یک لایه بندی دیگر همین المنت مخفی شود.

طراحان گرافیک را فراموش نکنید !

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

المنت ها و عکس های گرافیکی

wkmh006l

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

ثبات و پایداری داشته باشید !

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

چرخ را دوباره اختراع نکنید !

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

نتیجه گیری

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

 

منبع : خانه اسکریپت



لینک کوتاه مطلب : https://www.homescript.ir/?p=546