طراحی واکنشگرا را امروزه می‌توانید همه جا مشاهده کنید. دلیل آن هم بسیار ساده است. تعداد بسیار زیادی از مردم امروزی از دستگاه‌هایی با اندازه کوچکتر از کامپیوترهای رومیزی استفاده می‌کنند و به همین دلیل نیاز است که وبسایت برای چنین دستگاه‌هایی بهینه‌سازی شود. اگر چنین کاری انجام نشود، تجارت شما از چنین پتانسیلی برخوردار نخواهد بود.
وقتی چنین کاری را انجام دهید، یقینا گوگل در الگوریتم سرچ خود وبسایت شما را یکی از اولویت‌ها قرار می‌دهد. اگر به تازگی وبسایت‌تان را ساخته‌اید و یا اینکه تصمیم به ساخت آن دارید، در این مطلب نکاتی گفته می‌شود که به شما کمک می‌کند تا بتوانید سایتی واکنشگرا و جذاب داشته باشید. نکته مهم اینجاست که اگر در حال حاضر وبسایتی دارید، با بازطراحی وبسایت نیز می‌توانید از این نکات بهره ببرید.
چگونه طراحی واکنشگرا را پیاده‌سازی کنیم
نکاتی که در زیر آمده است به شما کمک می‌کند که طراحی مبتنی بر موبایل و واکنشگرایی را داشته باشید، این موارد به شما این اطمینان را می‌دهند که وبسایت‌تان همزمان با اینکه واکنشگرا است، به صورت کامل با موبایل نیز سازگاری دارد. در اینجا بهترین نکات و تکنیک‌ها را می‌توانید مشاهده کنید:
۱. بیاموزید که بازدیدکنندگان‌تان چگونه از موبایل استفاده می‌کنند
این مورد را که افراد از وبسایت در کامپیوترهای دسکتاپ و موبایل به صورت متفاوتی استفاده می‌کنند را بیاموزید و درک کنید، زیرا که بسیار نکته مهمی است. بازدیدکنندگان وبسایت‌تان را مورد بررسی قرار دهید و یا این موضوع که چرا کاربران از موبایل برای دسترسی به وبسایت‌تان استفاده می‌کنند و چه برگه‌ها و المان‌هایی را بیشتر استفاده می‌کنند را بیابید. این اطلاعات کمک می‌کند که بیشتر به این موضوع که چه برگه‌ها و المان‌هایی نیاز دارند که بیشتر روی صفحات کوچک قابل دستیابی باشند، پی ببرید.
برای مثال، اگر آن‌ها در حال انجام یک جستجوی سریع برای دسترسی به اطلاعات تماس هستند، مطمئن شوید که صفحه اطلاعات مربوط به تماس به سادگی روی منو ناوبری موبایل قابل دسترس است.
۲. برای طراحی‌تان برنامه‌‌ریزی کنید
قبل از اینکه شروع به طراحی وبسایت‌تان بکنید، بسیار مفید است که ابتدا لایه‌بندی را تعیین نمایید. در حقیقت بیشتر طراحان وب قبل از اینکه هرکاری را انجام دهند ابتدا یک چهارچوب کلی از وبسایت را تعیین می‌کنند، بعد آن را به صورت بصری می‌سازند و بعد از آن وارد قسمت کدنویسی می‌شوند. این موضوع نه تنها باعث می‌شود که درست چیزی را که می‌خواهید بسازید، بلکه کمک می‌کند که قابلیت شخصی‌سازی -بعدها- چه برای شما و چه برای بقیه طراحان ساده‌تر شود تا بتوانند براساس برندهای متفاوت وبسایت را تغییر دهند.
مطمئن شوید که چند نمونه اولیه از وبسایت را ساخته‌اید و آن‌ها را در صفحاتی با اندازه‌ها و وضوح‌های متفاوتی امتحان کرده‌اید. در اینجا می‌توانید چند ابزار برای اینکه نمونه‌های اولیه‌ی واکنشگرا را ایجاد کنید مشاهده نمایید:
- Adobe Edge Reflow: محصولات ادوبی این قابلیت را می‌دهند تا بتوانیم طراحی بصری یک وبسایت واکنشگرا را از طریق فوتوشاپ و تبدیل آن‌ها به HTML و CSS انجام دهیم. همچنین قابلیت اضافه کردن breakpointها را نیز می‌دهد.
- InVision: با تشکر از InVision شما می‌توانید نمونه‌های اولیه تعاملی از وبسایت را ارائه کنید. کاربران با استفاده از یک لینک می‌توانند منوها، دکمه‌ها، حالت اسکرول و… را امتحان کنند و برای‌تان فییدبک قرار دهند. این ابزاری مناسب برای مشاهده کردن حالت وبسایت با داشتن محتوای مختلف است.
- Wirefy: این مورد برای زمانی که می‌خواهید طراحی‌تان را براساس محتوا ایجاد کنید بسیار مناسب است. این مورد به شما اجازه می‌دهد تا گرید‌های واکنشگرا و نمونه‌های اولیه‌ای را بدون اینکه به صورت دستی اندازه‌ها را محاسبه کنید داشته باشید.
۳. در رابطه با فهرست ناوبری دقیق باشید
قسمت فهرست ناوبری همواره یکی از مهمترین قسمت‌های هر وبسایتی است. این قسمت یک مسیر را برای بازدیدکنندگان ایجاد می‌کند که به آن‌ها این اجازه را می‌دهد تا وبسایت را بهتر مشاهده کنند و سریع‌تر به برگه‌های مختلف وبسایت دسترسی داشته باشند. در وبسایت‌ها وقتی صفحه بازدیدکننده یک دسکتاپ باشد معمولا قسمت ناوبری شامل چند لینک کلی از وبسایت برای دسترسی به برگه‌هاست و در صورتی که صفحه بازدیدکننده دستگاهی کوچکتر مانند موبایل باشد، راه‌حل عمومی استفاده کردن از منوی همبرگری و پنهان کردن موارد در پشت آن است.
البته باید در نظر داشته باشید که این موضوع همواره نمی‌تواند یک رویکرد عالی و تمام و کمال باشد، به این دلیل که برخی اوقات کاربر متوجه این موضوع که باید روی دکمه کلیک کند تا لینک‌ها برای وی به نمایش دربیاید نمی‌شود. یک رویکرد جایگزین و البته عالی برای این مورد آن است که لینک‌های بسیار مهم وبسایت را در وبسایت به نمایش بگذارید و بعد باقی لینک‌ها را در پشت یک منوی همبرگری قرار دهید. می‌توانید برای ساده کردن ناوبری در وبسایت، برخی از متن‌های داخل صفحه اصلی را به صفحات دیگر وبسایت لینک کنید.
۴. تصاویر را بهینه‌سازی کنید
تصاویر نقش بسیار مهمی را در طراحی وبسایت ایفا می‌کنند. آن‌ها می‌توانند باعث شوند که یک رابطه عاطفی بین کاربر و وبسایت به وجود بیاید. همچنین باعث می‌شود که بتوانند بهتر محصولی که قصد خرید آن را دارند، مورد بررسی قرار دهند. به همین دلیل بسیار مهم است که تصاویر در فضای وب بهینه‌سازی شوند.
این بدان معناست که تصاویر باید در قالب‌بندی مناسبی ذخیره شوند – JPG برای تصاویر و عکاسی و PNG-8 برای آیکون‌ها و لوگوهایی که نیاز به پس‌زمینه شفاف دارند. براساس این موارد شما باید اندازه تصاویر را با استفاده از ابزارهایی مانند TinyJPG فشرده‌سازی نمایید. همچنین این موضوع که باید تصاویر را برای breakpointهای مختلف موبایل بهینه نمایید را در نظر بگیرید.
۵. رویکردی سازگار با موبایل را در نظر داشته باشید
یکی دیگر از راه‌ها برای دنبال کردن رویکرد طراحی واکنشگرا این است که یک نسخه موبایل از وبسایت تان را ایجاد کنید. این کار اجازه می‌دهد که حالت تصاویر، متن‌ها، لوگو و… را روی یک صفحه کوچکتر مشاهده کنید. اگر این موارد هیچ مشکلی نداشته باشند، پس یقینا شما نیز هیچ مشکلی با صفحه بزرگتری نخواهید داشت.
۶. یاد بگیرید که چگونه از Media Querieها استفاده کنید
Media querieها اولین مواردی بودند که در سی‌اس‌اس پیاده‌سازی شدند، اما عملا به دلیل اینکه در ابتدا مرورگرها از آن پشتیبانی نمی‌کرد، قابل استفاده نبودند، تا اینکه در سال ۲۰۱۲ به صورت رسمی توسط مرورگرها پشتیبانی شد و استفاده از آن توسط طراحان وب شروع گشت. هدف اصلی Media querieها این است که لایه‌بندی وبسایت را با عرض‌های مختلفی از صفحه نمایش بهینه کنند.
وقتی از این media querieها استفاده کنید، محتوا به اندازه‌های متفاوت از صفحه دستگاه جواب و به آن‌ها واکنش نشان می‌دهد. به صورت مختصر، یک مدیا کوئری وضوح، عرض و جهت دستگاه را بررسی می‌کند و CSSهای تعیین شده برای آن وضعیت را اجرا می‌نماید. یک مثال از این حالت را در زیر مشاهده می‌کنید:
@media screen and (min-width:500px) {
your CSS rules here
}
۷. از کیبورد مناسب در فرم‌ها استفاده کنید
یکی از موارد مهم در استفاده کردن از فرم ها این است که در طراحی واکنشگرا آن ها را باید با اندازه عرض صفحه هماهنگ کنید، اما جدای از آن شما می‌توانید یک قدم جلوتر نیز بروید، با فیلد‌های ورودی مختلف از نوع مناسب کیوبورد استفاده کنید. برای این مورد از المان input استفاده کنید.
برای مثال فیلدهایی که دارای نام، ایمیل و آدرس هستند را با کیبورد معمولی و متنی همراه سازید، اما برای ورودی‌هایی که از شما شماره‌ای را درخواست می‌کنند، از کیبورد شماره‌ای یا عددی بهره بگیرید. این موضوع در کنار بهتر کردن تجربه کاربری، میزان سازگاری با موبایل را بهتر و بیشتر می‌کند.
۸. مطمئن شوید که دکمه‌ها در صفحات کوچک قابلیت دسترسی‌پذیری آسان‌تری دارند
هیچوقت فراموش نکنید که باید توجه بسیار زیادی را به دکمه‌ها در وبسایت داشته باشید. به دلیل تنظیمات صفحه، وضعیت این مورد بسیار مهم و حیاتی است، بنابراین باید حتما آن‌ها را سازگار با اندازه صفحه در نظر بگیرید. اگر این کار را انجام ندهید کلیک کردن روی آن‌ها دشوارتر می‌شود و شانس کلیک را از دست میدهید.
مطمئن شوید که با استفاده از این دو نکته، دکمه‌های‌تان به سادگی تشخیص داده می‌شود:
- از رنگ‌ها برای اینکه آن‌ها را از بقیه صفحه جدا سازد استفاده کنید.
- از یک مربع یا دایره برای نمایش آن‌ها استفاده نمایید.
همانگونه که اندازه بزرگ‌تر می‌شود سعی کنید که میزان padding را نیز افزایش دهید تا ناحیه کلیک‌پذیر بزرگ‌تر شود.
۹. تایپوگرافی را بهینه کنید
وقتی موضوع به متن در وبسایت می‌رسد، شما باید مطمئن شوید که متن در صفحاتی با اندازه کوچک قابلیت خواندن بالایی دارد. یک اندازه خوب و منطقی برای متون در وبسایت ۱۶ پیکسل یا 1em است. بعد از این باید مطمئن شوید که ارتفاع خطوط در وبسایت مناسب است، برای مثال میزان 1.5em می‌تواند ارتفاق بسیار درستی باشد.
یکی‌دیگر از موارد مهم در این زمینه استفاده کردن از یک فونت خوانا و مناسب است. برای این کار از فونت‌های تزئینی یا اسکریپتی اجتناب کنید، به این دلیل که باعث می‌شود خواندن تا حد زیادی سخت شود، مخصوصا این موضوع در صفحاتی با اندازه کوچک بسیار دشوارتر می‌شود.
۱۰. از ریزتعاملات استفاده کنید
یکی از موضوعاتی که امروزه در طراحی وب استفاده می‌شود، ریزتعاملات است. در سال‌های اخیر تابع‌های انیمیشن و تعاملی در وبسایت‌های مختلف مخصوصا وبسایت‌های تجاری استفاده بسیاری شده است. اگر به موضوع تجربه کاربری اهمیت زیادی میدهید و این موضوع برای‌تان ضرورت خاصی دارد، استفاده کردن از انیمیشن‌ها در وبسایت می‌تواند بسیار مربوط و مناسب باشد، به خصوص استفاده از این حالت در فرم‌ها مورد توجه قرار می‌گیرد.
برای خواندن اطلاعات بیشتر در رابطه با ریزتعاملات می‌توانید مطلب «استفاده از متدهای ریز تعاملات در وبسایت» را مطالعه کنید.
۱۱. از فریمورک‌ها استفاده کنید
اگر می‌خواهید جریان کاری طراحی یک وبسایت واکنشگرا را سریع‌تر کنید و جریان بهتری را داشته باشید، یک فریمورک HTML مانند بوت‌استرپ می‌تواند جوابگوی کارتان باشد. برای ساخت وبسایت‌های ایستا این مورد بهترین حالت ممکن است.
همچنین اگر می‌خواهید وبسایت‌هایی با پیچیدگی بیشتری بسازید، می‌توانید از پوسته‌های واکنشگرا وردپرس استفاده کنید. استفاده کردن از این موارد نیز باعث می‌شود که سرعت کاری‌تان افزایش بسیار زیادی پیدا کند.
۱۲. به طراحی مینیمالیستی ملحق شوید
طراحی مینیمالیستی در چند سال اخیر محبوبیت زیادی پیدا کرده و رشد نسبتا خوبی داشته، که البته این موضوع نیز به دلایل خوبی مربوط می‌شود. اینگونه طراحی تمام موارد اضافی را از صفحه‌تان حذف می‌کند و باعث می‌شود که کاربر بتواند روی محتوای اصلی وبسایت تمرکز بیشتری را پیدا نماید. این موضوع باعث می‌شود که نرخ تبدیلات در وبسایت بالاتر رود و سرعت وبسایت بدلیل بارگذاری المان‌ها با سرعت زیاد، بالاتر رود. این موضوع با طراحی واکنشگرا نیز سازگاری بالایی دارد، به این دلیل که شما می‌توانید قسمت‌های مهم وبسایت را پر رنگ نشان دهید و توجه کاربران را به قسمت مهمی از وبسایت معطوف نمایید.
۱۳. مطمئن شوید که دکمه‌های به اشتراک گذاری محتوا را مسدود نمی‌کنند.
در نظر گرفتن دکمه‌های به اشتراک‌گذاری در قسمت محتوای وبسایت باعث می‌شود که مطالب بیشتر دیده شوند و ترافیک وبسایت بالاتر برود. با این حال برخی اوقات ممکن است که این دکمه‌ها باعث شود تا مطالب شما مسدود شوند، مخصوصا وقتی که روی صفحات کوچک قرار دارند. مطمئن شوید که این دکمه‌ها با اندازه‌های مختلف از صفحه خود را هماهنگ می‌سازند و می‌توانند به درستی کار کنند.
در پایان
ایجاد یک وبسایت واکنشگرا دیگر یک انتخاب گزینشی نیست. این موضوع یک اجبار است. طراحی وبسایت به صورت واکنشگرا این کمک را می‌کند که وبسایت به صورت بهتری مشاهده شود و همه بدون مشکل از وبسایت استفاده کنند. این موضوع باعث می‌شود که برندسازی در وبسایت شما بهتر شود و کاربران بتوانند بهتر به شما اعتماد نمایند. در نهایت تمام این موارد باعث می‌شود که تجربه کاربری بهتری را عرضه کنیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید