چه کارهایی را باید برای تسلط بر طراحی واکنش گرا انجام دهیم؟

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

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

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

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

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

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

محتوای خود را رها و یا مخفی نکنید

رها کردن و یا پنهان کردن محتوای وبسایت برای اینکه صفحات شما بر روی یک صفحه نمایش کوچکتر بهتر نمایش داده شود، اصلا ایده ی مناسبی نیست. کاربران شما انتظار دارند که همان محتوایی که در وبسایت شما در دسکتاپ مشاهده میکنند را در تلفن همراه خود به شکلی دیگر مشاهده کنند.

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

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

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

تصاویر را سازگار ارائه دهید

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

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

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

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

صفحات لمسی را در طراحی خود در نظر بگیرید

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

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

تمام کارهایی که با موبایل میشود انجام داد را در نظر بگیرید

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

منبع: لرن سورس