طراحی ریسپانسیو ( Responsive ) از ایده تا اجرا !

با شنیدن نام ریپسپانسیو ( responsive ) یا واکنش گرا این تصویر برای ما تداعی میشود که وب سایتی که واکنش‌گراست از طریق موبایل و سایر دیوایس‌ها در دسترس است، ولی واقعا چند درصد از این وب سایتهای ریسپانسیو قابل استفاده هستند؟!

یکی از مشکلات عمده اشخاصی که در حوزه UI/UX و فرانت‌اند کار می‌کنند پیاده سازی وبسایتی ریسپانسیو و کارا مطابق نظر مشتری یا صاحب پروژه است که با وجود عدم آشنایی با این مفهوم قصد دارد همه موارد داخل وبسایت که از طریق دسکتاپ قابل دسترس است روی موبایل و تبلت هم وجود داشته باشد!

قبلا در مقاله نوشته بودم که همیشه حق با مشتری نیست!

نکته : پروژه‌ای که ما برای کارفرما پیاده‌سازی می‌کنیم قطعا باید مورد پسند کارفرما باشد ولی این به این معنا نیست که هر چیزی که کارفرما درخواست داشت درست است، باید این اعتماد را ایجاد کنیم که کاری که انجام می‌شود بر اساس تجربه و دانشی است که در نهایت به نفع کارفرما تمام می‌شود و رابطه‌ی کاری برد-برد را مدنظر داریم در واقع این هنر توسعه دهنده است که چطور کارفرما را قانع کند.

پرسش و پاسخ برای درک یک واقعیت!

بیایید با طرح دو سوال به سبکی بهتر به موضوع بپردازیم :

  • چرا هنگام چک کردن و یا انتقال وجه از حساب بانکی خود از  وب‌سایت اصلی بانک موردنظر استفاده نمی کنید؟
  • چرا اپلیکیشن بانک مورد نظر را دانلود و از آن برای بررسی موجودی و …. استفاده می‌کنید؟

پاسخ ۱ : به این‌خاطر که فقط اطلاعات کاربردی و موردنیاز نمایش داده میشود و کار کردن با آن بسیار راحتتر از وب سایت برروی موبایل است.

پاسخ ۲ : به این خاطر که وب‌سایت فونت ریزی داره و اطلاعات اضافی زیادی وجود دارد.

پاسخ ۳ : سرعت بارگذاری پایین است، امکان انتخاب منو‌ها و آیتم‌ها سخت است و….

در واقع در نسخه ریسپانسیو فقط و فقط اطلاعاتی که موردنیاز کاربر است بر اساس نیاز نه سلیقه شخصی به نمایش بذاریم.

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

یک سوال که اینجا مطرح می‌شود این است که این نیاز کاربران را از کجا تشخیص دهیم؟

 

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

در واقع ما وب‌سایت و پروژه را باید برای مشتری طراحی کنیم نه کارفرما! چونکه مشتری کارفرما رو به هدفی که می‌خواهد می‌رساند که این هدف می‌تواند پول و درآمد بیشتر باشد.

برای مثال یکی از دوستان من که در یکی از شرکت‌های بزرگ فروشگاهی فعالیت داشت، اظهار داشت که فروش محصولات فروشگاهی نسبت به بازدید صفحات محصول کمتر از مقدار مورد انتظار بود. بعد از تحلیل و بررسی رفتار کاربران و تغییر رنگ دکمه خرید و مکان دکمه خرید فروش محصولات را به میزان ۲۰ درصد افزایش دادند و این یعنی موفقیت در پروژه.

در نهایت لازم است تاکید کنم راه تشخیص اینکه کدام مورد بهتر و بهینه‌تر است تست و تحلیل نتایج است، یکی از راههایی که خیلی میتواند کمک کند A/B Testing است که مثلا به صورت رندم برای برخی کاربران استایل به یک سبکی نمایش داده شود و نتایج بررسی شود. این مورد مخصوصا در ایمیل مارکتینگ بسیار کاربردی و تاثیرگذار است که با استفاده از ابزارهایی همچون میل چیمپ و میلرلایت و … میتوان این موارد را تست کرد.

معرفی ابزارهایی برای آنالیز و تحلیل وب‌سایت و رفتار کاربران :

شما می‌توانید از ابزارهایی که وب‌سایت‌های زیر ارائه می‌دهند استفاده نمائید تا روند بهبود و رشد وب‌سایت خود را فرآهم کنید.

۱. گوگل آنالیتیک –  Google Analytics

۲. هات‌جار – Hotjar

۳. کریزی اِگ – Crazy Egg

در صورت تمایل می‌توانید کلمه Heat Map را در گوگل جستجو نمائید تا در رابطه با این موارد بیشتر مطالعه کنید.

 

استفاده از css preprocessor برای توسعه وب سایت

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

هرچقدر کدهای بخش فرانت‌اند را ماژولار و منظم بنویسیم باز دستمون برای ساختاری منظم برای توسعه راحتتر بسته است به همین دلیل استفاده از css preprocessor ها کار ما را خیلی راحت‌تر میکند به طوریکه حتی بتوانیم در سایر پروژه‌ها از بخشی از کدها استفاده کنیم.

استفاده از Sass

sass

Sass یکی از قدرتمندترین css preprocessor های موجود است که بهتون توصیه میکنم در استفاده از آن شک نکنید. لازم است تاکید کنم Sass هیچ چیزی به css اضافه نمی کند ولی قابلیت‌هایی به شما می‌دهد که بتوانید از کدنویسی سمت فرانت‌اند هم بیشتر لذت ببرید و هم امکاناتی را در اختیار شما قرار میدهد که تاثیر بسیار مثبتی روی پروژه‌ی شما می‌گذارد.

برای مثال ‌قابلیت‌هایی همچون تعریف متغیر، ایجاد فانکشن و … را در اختیار شما قرار میدهد.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins , inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

شما میتوانید متغیرهایی را تعریف کنید و در بخش‌های مختلف پروژه از آن استفاده نمایید. همچنین میتوانید فایلهای جامعی برای تعریف فانکشن داشته باشید و برای بخش های مختلف پروژه از آن استفاده نمائید و یا قابلیت nesting برای تگ ها داشته باشید و در نهایت Sass  به css کانورت میکند.

برای مثال :

sass to css

نصب Sass

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

نصب Sass  بر روی مک

gem install sass

برای اینکه مطمئن شوید که Sass  نصب شده است می‌توانید کد زیر را در ترمینال اجرا کنید که ورژن Sass  نصب شده را نمایش می دهد.

sass -v

استفاده از Compass

compass style

در صورتیکه میخواهید از Sass  استفاده کنید بدون Compass  از آن استفاده نکنید! در واقع در بالا اشاره کردیم که شما میتوانید mixinهایی را تعریف کنید تا بتوانید راحت‌تر کدهای سمت فرانت‌اند  را توسعه دهید اما زمان بسیار زیادی لازم است تا شما تمام فانکشن‌هایی که لازم دارید را بنویسید به همین خاطر استفاده از Compass  که براساس Sass  به صورت متن‌باز نوشته شده است را توصیه میکنم.

برای استفاده از Compass  میتوانید توی ترمینال کد زیر را اجرا کنید :

 gem install compass

بعد از نصب آن، داخل فایل های Sass  ابتدا Compass  را import  کنید و سپس از امکانات آن استفاده می‌کنید.

@import "compass/css3"

 

@import "compass/css3";
 
@import "compass/utilities";
 
#demo {
  @include clearfix;
}
 
.border-radius-example {
  width: 125px;
  height: 125px;
  background: red;
  margin: 20px;
  float: left;
  padding: 5px;
}
 
#border-radius {
  @include border-radius(25px);
}
 
#border-radius-top-left {
  @include border-top-left-radius(25px);
}

استفاده از Susy

Susy

در صورتیکه با فریمورک‌هایی همچون FoundationBootstrap کار کرده باشید قطعا با طراحی واکنش‌گرا ( responsive ) و گریدبندی آشنا هستید. نقطه قوت این فریم‌ورک‌ها ریسپانسیو بودن و کامپوننت‌هایی است که میتوان استفاده کرد.

برای اینکه شما با استفاده از Sass این ساختار را ایجاد کنید میتوانید خودتون برای گریدبندی و حالتهای مختلف کدنویسی کنید و یا از ابزارهایی همچون Susy استفاده کنید.

با استفاده از Susy شما میتوانید برای هر پروژه و بسته به نیازتون گریدبندی‌های مختلف داشته باشید.

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

gem install susy

برای استفاده از آن باید همچون Compass آن را import  نمایید.

@import "compass/css3";
@import "susy";

$susy: (
    columns: 12,
    container: 1200px,
    gutters: 1/4,
    global-box-sizing: border-box,
    debug: (image: hide)
);

در کد بالا شما تنظیمات Susy را برای پروژه می بینید که ۱۲ ستونه است و عرض تگ container آن ۱۲۰۰ پیکسل است و همچنین فضای خالی ( margin ) بین هر ستون است که میتوانیم مشخص کنیم قبل یا بعد از هر ستون قرار بگیرد.

gutter after in susy
منبع :  zellwk.com/blog/susy-gutter-positions

در صورتیکه حالت debug  را روی حالت نمایش قرار دهید بر روی پروژه مکان هر گرید را میتوانید ببینید.

تنظیمات کلی و پیشفرض susy به صورت زیر است که میتوانید هر کدام را تغییر دهید :

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

در نهایت یک نمونه کد یکی از کاربران که این ساختار را نوشته است می توانید ببینید و تست کنید :

See the Pen Susy Grid Example 1A by Michelle Barker (@michellebarker) on CodePen.