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

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

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

وب سایت واکنش گرا چیست؟

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

RWD از CSS برای ارائه ویژگی‌های سبک متنوع – مانند فونت، تصاویر و منوها – بر اساس دستگاه، اندازه صفحه، جهت، رنگ‌ها و سایر ویژگی‌های دستگاه مشاهده استفاده می‌کند. CSS همچنین استفاده بهینه از نمای دستگاه (ناحیه قابل مشاهده موجود در صفحه) و پرس و جوهای رسانه ای را تسهیل می کند و به صفحات وب اجازه می دهد بسته به عرض درگاه دید و طرح وب سایت تغییر کنند.

10 بهترین روش برای طراحی وب سایت واکنش گرا

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

1. به مسیریابی خود توجه کنید

اتخاذ طراحی وب ریسپانسیو تأثیر بسیار زیادی در ناوبری سایت دارد. بیایید نگاهی به وب سایت مایکروسافت از سال 2007 بیندازیم :

تصویری از وب‌سایت دسکتاپ مایکروسافت در سال 2007، با فونت پس‌زمینه آبی روشن، یک تصویر بزرگ که Windows Server 2008 را تبلیغ می‌کند، و یک جعبه ناوبری در سمت راست.

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

اکنون، وب سایت مایکروسافت در سال 2022 را در نظر بگیرید:

اسکرین شات از وب سایت دسکتاپ 2022 مایکروسافت، با تبلیغاتی برای Surface Pro 9 که بر روی صفحه تسلط دارد و یک سری پیوندهای ناوبری در سمت چپ بالای صفحه نمایش

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

اسکرین شات از نمای موبایلی وب سایت مایکروسافت 2022، که دارای تبلیغات مشابه نسخه دسکتاپ و منوی همبرگر در گوشه بالا سمت چپ است.

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

شما معمولاً فقط برای 4-5 پیوند اصلی در ناوبری خود جا دارید که بر کل استراتژی محتوای سایت و معماری اطلاعات شما تأثیر می گذارد. مطمئن شوید که این پیوندها مکان‌هایی را نشان می‌دهند که مردم بیشتر به دنبال آن هستند، سپس فرصت‌هایی را برای کاوش عمیق‌تر ارائه می‌دهند.

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

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

تصویری از صفحه اصلی دسکتاپ Creation Processes
Creation Processes از یک نوار کناری به‌عنوان پیمایش اصلی خود استفاده می‌کند که به بخش‌های مختلف صفحه تکی خود متصل می‌شود، و این کار را به‌عنوان یک منوی افقی تکرار نمی‌کند.

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

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

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

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

محتوا و طراحی زمانی شکوفا می شوند که پشت سر هم توسعه پیدا کنند. هر دو عنصر به یکدیگر معنی می دهند، بنابراین مهم است که محتوای خود را به وضوح سازماندهی کنید. بیایید به یک مثال از Arobase Creative نگاه کنیم .

تصویری از اینفوگرافیک تعاملی با ترکیب رنگ صورتی روشن و آبی.

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

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

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

3. طراحی خود را با در نظر گرفتن موبایل شروع کنید

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

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

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

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

4. دکمه های فراخوان را اضافه کنید

اسکرین شات موبایلی از صفحه ای در quickoption.com که دکمه سبز روشن «اکنون دانلود کنید» را نمایش می دهد
دکمه های شما باید به راحتی قابل شناسایی و درک باشند.

یک فراخوان برای اقدام (CTA) جزء حیاتی هر صفحه وب است. پیوندها و دکمه‌های دارای یک فراخوان برای اقدام به‌عنوان ایستگاه‌های بین راهی عمل می‌کنند و به کاربران راهنمایی می‌کنند که کجا باید بروند. درک اینکه چگونه و کجا باید بدون CTA واضح اقدام به خرید یا پیوستن به یک برنامه کنند، برای مردم دشوار است.

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

وقتی صحبت از رنگ می شود، سعی کنید از تعداد زیاد آن استفاده نکنید تا بازدیدکنندگان خود را تحت تأثیر قرار ندهند. 2-3 از پالت رنگ برند خود را برای سایت انتخاب کنید و از چیزی روشن برای جلب توجه به CTA خود استفاده کنید. سایه‌های رها، شیب‌ها، و دیگر افزودنی‌های سبک وام‌دهنده بعد نیز می‌توانند افراد را به سمت کلیک کردن روی دکمه‌هایی که می‌خواهید کلیک کنند راهنمایی کنند.

5. فقط از کلماتی که نیاز دارید استفاده کنید

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

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

کتاب الکترونیکی رایگان: فرآیند طراحی وب مدرن

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

شروع به خواندن کنید

6. تایپوگرافی در صفحه نمایش های کوچکتر اهمیت بیشتری دارد

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

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

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

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

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

7. فضای منفی را در آغوش بگیرید

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

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

شما همچنین نمی خواهید هیچ چیز حیاتی را حذف کنید. از فضای منفی برای ایجاد وقفه در طراحی خود استفاده کنید و قسمت هایی از محتوا را برجسته کنید که نمی خواهید کسی از دست بدهد.

8. یک نمونه اولیه پاسخگو ایجاد و آزمایش کنید

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

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

این کار باعث صرفه جویی در وقت و دردسر شما می شود – و از توییت های خجالتی که گزارش می دهند سایت شما در تلفن همراه “شکسته شده است” صرفه جویی می کند. استفاده از یک پلت فرم توسعه وب بصری می تواند به ساده سازی این فرآیند کمک کند.

9. با تصاویر پاسخگو به مسیر سریع بچسبید

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

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

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

 

10. طرح بندی های خود را با flexbox تقویت کنید

Flexbox یک ماژول طرح‌بندی CSS3 است که تضمین می‌کند پاسخ‌دهی طرح‌بندی شما به طور روان به دستگاه‌های مختلف ترجمه می‌شود. این مهم است زیرا Flexbox به ایجاد وب سایت های واکنش گرا بدون نیاز به توسل به کدها و ویژگی های پیچیده در CSS کمک می کند. درد ایجاد طرح‌بندی‌های خلاقانه مانند صفحه‌نمایش‌های تقسیم‌شده، ستون‌های کناری، و پوشش‌های قهرمان را از بین می‌برد و به شما امکان می‌دهد الگوهای طراحی محبوبی مانند ماژول‌های با ارتفاع مساوی و لیست‌های ویژگی الگوی Z را در یک لحظه ایجاد کنید.

برای استفاده از flexbox ، به سادگی تنظیمات نمایش “flex” را به یک کانتینر والدین بدهید، سپس نحوه توزیع کودکان درون آن ظرف را انتخاب کنید. در اصل نسبتاً ساده است اما انعطاف پذیری قوی را امکان پذیر می کند.

طراحی ریسپانسیو وب را به سمت بهتر شدن تغییر داده است

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

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

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

نظرات غیر فعال است