بایدها و نبایدهای طراحی واکنشگرا

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

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

باید: درک طراحی وب واکنشگرا

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

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

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

نباید: محتوای وبسایت‌ را رها نکنید

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

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

باید: تصاویر وفق پذیر را آماده کنید

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

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

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

نباید: نادیده گرفتن طراحی برای Touch

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

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

باید: از تمام ویژگی های موبایل استفاده کنید

بهینه کردن لایه های وبسایت برای هر دستگاهی با هر اندازه‌ای کافی نیست. بهترین وبسایت واکنشگرا وبسایتی است که بتواند از هرچیزی که موبایل می تواند انجام دهد بهره ببرد. برای مثال، وبسایت شما باید قابلیتی داشته باشد که وقتی کاربر روی دکمه Call Now کلیک کرد فورا به قسمت تماس موبایل مراجعه کند. وبسایت می تواند از ویژگی های دیگری مانند موقعیت دستگاه، پرکردن خودکار، بارکد اسکنر، تشخیص تصویر و … برخوردار باشد. فکر خود را گسترده‌تر کنید و به ویژگی هایی که در موبایل وجود دارد و کاربر می تواند از آنها در داخل یک وبسایت استفاده کند فکر کنید.

برای اینکه بتوانید وبسایت را بیشتر به سمت واکنشگرا بودن هدایت کنید می توانید از لایه های fluid یا متغیر نیز استفاده کنید. مطمئنا شما نمی توانید دستگاه کاربرانی که وارد وبسایت می شوند را کنترل کنید، اما می توانید طراحی‌تان را مبتنی بر دستگاه کاربر نمایش بدهید. برای اینکار می توانید از لایه های  fluid استفاده کنید. برای اینکار باید اندازه مربوط به لایه ها را به صورت درصد اندازه گیری کنید نه به‌صورت پیکسلی. با استفاده از واحد درصد شما می توانید لایه های خود را منعطف تر طراحی کنید اما استفاده از پیکسل مانند آن است که شما از یک واحد ثابت و تغییرناپذیر استفاده کنید. 

نباید: بالابردن حجم فایل‌ها

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

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

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

باید: خلاق باشید

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

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

منبع