مفهوم طراحی واکنشگرا
امروزه با به روی کار آمدن انواع دستگاه های چندرسانه ای از قبیل تلویزیون های هوشمند، کامپیوترها، تبلت ها، موبایل ها و به تازگی ساعت های مچی هوشمند، دنیای اینترنت دستخوش تغییرات بسیاری شده است. شبکه های مختلف پا به عرصه ظهور نهاده اند، بیشتر کسب و کارها اینترنتی شده اند و وب سایت ها روز به روز درحال پیشرفته تر شدن می باشند که این مستلزم دانش، خلاقیت و صبرو و حوصله فراوان است.
برای اینکه یک وب سایت در اندازه های مختلف قابل نمایش باشد دو روش وجود دارد: 1- استفاده از وب سایت نسخه موبایل 2- استفاده از وب سایت واکنشگرا(Responsive)
در گزینه اول وب سایت قبل از بارگذاری بررسی می کند که مرورگر توسط کامپیوتر(یا موارد مشابه) باز شده است یا توسط موبایل(یا موارد مشابه). اگر توسط کامپیوتر بازشده باشد که وب سایت عادی را بارگذاری می کند درغیراینصورت یعنی اگر توسط موبایل یا تبلت باز شده باشد، وب سایت مخصوص موبایل را بارگذاری می کند. این روش قدیمی ترین راه حل تفاوت اندازه ها در دستگاه های مختلف است و هنوزهم علاقه مندان و کاربردهای زیادی دارد.
و اما گزینه دوم و بروزترین راه حل: منظور از وب سایت واکنشگرا(Responsive) ، وب سایتی است که برای هراندازه صفحه نمایش یک نوع طراحی خاص داشته باشد. دقت کنید که در اینجا شکل کلی وب سایت یک بار طراحی شده است و با تغییر اندازه صفحه نمایش فقط اندازه و مکان اجزاء آن تغییر می کند. این روش جدیدترین و بهترین روش می باشد و محبوبیت بسیاری در میان برنامه نویسان کسب کرده است.
انواع نمایشگرها:
1- تلویزیون های هوشمند، کامپیوترها و لپ تاپ ها:
دستگاه های تبلت
تبلت:
یکی از دستگاه های چندرسانه ای که در سال های اخیر بسیار مورد توجه قرار گرفته است تبلت می باشد. تبلت ها انواع مختلفی دارند و برای کارهای مختلف تولید می شوند. مثلا تبلت های صنعتی، باسیم کارت و بدون سیم کارت، مخصوص کودکان، با یا بدون دوربین و... . اما نکته هائز اهمیت این است که تمامی تبلت های یاد شده قابلیت باز کردن صفحات وب را دارن و این یعنی ما بایستی وب سایت خود را برای اندازه نمایشگرهای تبلت ها نیز تنظیم کنیم.
تنظیم گرافیک سایت با اندازه صفحه نمایش تبلت باید در دو مرحله انجام شود.
مرحله اول: تنظیم گرافیک سایت با اندازه افقی تبلت یعنی زمانی که تبلت را به پهلو بگیریم. عموما این اندازه با حداقل اندازه مانیتور کامپیوترها یکی است و مشکل خاصی وجود نخواهد داشت.
مرحله دوم: تنظیم گرافیک وب سایت با اندازه عمودی یا همان حالت ایستاده تبلت. این سایز عموما از 768px شروع می شود و باید طراحی وب سایت را با آن تطبیق داد. در این مرحله باید نکات زیادی را در نظر داشت تا گرافیک سایت از حالت استاندارد خارج نشده و کاربر را خسته نکند زیرا وی به محض خستگی وب سایت را ترک خواهد کرد. همچنین تغییرات را باید بگونه ای اعمال کرد که کاربر بتواند مانند اندازه اصلی ، در همان 3 ثانیه اول ورود به وب سایت از موضوع کار شرکت و نیز میزان حرفه ای بودن آن آگاه شود.
تبلت ها دارای مزایای بسیاری هستند که باعث محبوبیت هرچه بیشترشان شده است ازجمله: کاربری هایی مانند لپ تاپ ها، قابلیت حمل آسان، بهره وری عالی، دارای سرگرمی های فراوان، سازگاری و درنهایت عمر طولانی تر باتری نسبت به لپ تاپ ها. بدلیل این محبوبیت ها حتما بایستی وب سایت را برای اندازه نمایشگر این دستگاه ها نیز تنظیم کنیم.
نا گفته نماند که بسیاری از کاربران اینترنت، استفاده از تبلت را به دیگر دستگاه ها برای وبگردی ترجیح می دهند.
دستگاه های موبایل
موبایل:
با آمدن تلفن های همراه هوشمند به بازار، دنیای فناوری ها و گجت ها و همچنین صنعت وب دچار دگرگونی ها و پیشرفت های بسیار شدند. تلفن های همراهی که بیشتر شبیه کامپیوتر هستند تا موبایل!
با این نسل از تلفن های همراه براحتی می توان انواع مکتلمه های متنی، صوتی و یا تصویری را انجام داد. از شبکه های اجتماعی و یا حتی اپلیکیشن ها مهندسی استفاده کرد، با دوربین هایشان لحظات بیاد ماندنی را ثبت کرد و یا با اضافه کردن گجت هایی از آن ها در جهت سلامتی کاربرانشان استفاده کرد و... . تمام این امکانات و فناوری ها فقط به یک چیز اشاره دارند و آن محبوبیت تلفن های همراه هوشمند است.
ما باید از این محبوبیت در کسب و کار خود استفاده کنیم و کسب و کار خود را به تا می توانیم به تک تک کاربران این نوع تلفن های همراه معرفی کنیم. ولی چگونه؟ جواب بسیار ساده است! باید کسب و کار خود را به موبایل این کاربران منتقل کنیم. برای این کار بایستی وب سایت خود را برای اندازه صفحه نمایش انواع تلفن های همراه هوشمند از کوچک تا بزرگ تنظیم کنیم.
همان طوری که می دانید گوشی های موبایل دارای اندازه های مختلفی هستند. برای مثال شما iphone4 را با iphone7 مقایسه کنید. یکی با صفحه نمایش با رزولوشن ... x ... و دیگری با صفحه نمایشی با رزولوشن ... x ... این قانون برای همه شرکت های تولید کننده تلفن همره صادق است و هرکدام با خصوصیات و اندازه های مختلف، انواع تلفن های همراه هوشمند دارند.
ما باید همانند تنظیم در اندازه تبلت در اینجا نیز از دو مرحله گفته شده، استفاده کینم و برای هر دو حالت افقی و عمودی در هر اندازه از صفحه های نمایش پرکاربرد، گرافیک سایت را تنظیم کنیم.