9 نکته مهم در طراحی وب سایت واکنش گرا :

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

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

1. طراحی Responsive در مقابل طراحی Adaptive

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

2-    روان بودن عناصر در ساختار Responsive

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

3-    واحد های غیر static و مربوط به صفحه  (Relative Units)

همواره باید از واحد های غیر static در طراحی وب سایت های ریسپانسیواستفاده کرد.به طور کلی واحدهای static مثل pixel یا point و واحدهای Relative Units مثل درصد هستند. دستگاه هایی که قرار است سایت شما در آنها به نمایش در بیایند با هم فرق دارند، یعنی نمی توانید از واحدهای static استفاده کنید، باید از Relative Units استفاده کنید که پهنای آن به صورت درصدی از عنصر مادر خود باشد تا بدون کدنویسی اضافی با دستکاری شدن پهنای صفحه، پهنایش تغییر کند

4-    نقاط شکست  (breakpoints)

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

  -5 تایین مقادیر حداکثری و حداقلی برای پهنای عتاصر صفحه

در یک گوشی هوشمند و تبلت در بسیاری از موارد باید تمامی پهنای باند در دسترس اشغال شود تا تصویر به خوبی نمایش داده شود. اما اگر پا را فراتر بگذاریم و قرار باشد که  دریک تلویزیون  هوشمند 50 اینچی با قابلیت نصب نرم اقزار و جستجو در اینترنت صفحات اینترنت شما نمایش داده شوند چه مشکلی پیش خواهد آمد!!! مطمئنا تجربه جالبی نیست زیرا المنت ها بسیار بزرگ شده و جذابیتی نخواهند داشت. پس می توان با استفاده از ست کردن برخی خصیصه های css یا … جلوی همچین اتفاقی را گرفت  

6-عناصر تودرتو یا Nest شده

فرض کنید که چند عنصر دارید که می خواهید در یک width خاص یا اندازه view point خاص به سمت چپ یا راست صفحه منتقل کنید. ما می توانیم این کار را با کدهای جاوااسکریپت یا css تامین کنیم اما زمانی که برای مثال view point صفحه تغییر می کند این عناصرتک به تک به این سمت و آن سمت می روند. از طرفی اگر از خصیصه float استفاده شود عناصر بر روی همدیگر یا به صورت بی نظم کنار همدیگر ریخته می شوند. یکی از راه حل ها استفاده کردن از Nested element هاست. یعنی در حقیقت همگی عناصر را در داخل یک بخش nest  می کنیم و یک عنصر والد(معمولا یک div ) برای آنها تعریف و سپس float را برای آن ست می کنیم.

7-طراحی اولیه برای گوشی باشد یا دسکتاپ

از نظر تکنیکی و کاربردی این دو پیچ تفاوتی با هم ندارند .یعنی هیچ تغییری در کدهای وب سایت شما اعمال نمی شود مگر اینکه در نوع دید کاربر اثر بگذارد. در این صورت بسته به اینکه کاربرانتان در چه screen و پهنایی قرار است سایت شما را مشاهده کنند از قرار دادن کدهای اضافی  java معاف خواهید شد.

8- بهره بردن از فونت های سیستمی یا فونت های تحت وب ˓کدامیک؟

  همیشه طراحان در خصوص استفاده کردن از web font ها و  system font ها مشکل دارند که این مسئله هیچ ربطی به طراحی ریسپانسیو ندارد. web font ها فونت هایی هستند که ما با css آنها را load می کنیم و کاربرد بسیار بالایی در طراحی و زیباسازی آن دارند. اما در عین حال حجم زیادی دارند.  بنابراین اگر اولویت اول شما گرافیک سایت باشد مطمئنا پیشنهاد ما به شما استفاده از web font است، زیرا هیچ گاه نمی توان به فونت های سیستمی اعتماد کرد و دو دلیل واضح آن این است که:

1.      برای مثال بسته به نوع فونتی که می خواهید  web font اش را وارد صفحه کنید ممکن است تا چند صد کیلوبایت به صفحه فشار وارد کند.در نتیجه زمان بارگذاری صفحات در مرورگر کاربران افزایش خواهد یافت و این برای کاربر قابل قبول نیست. البته شایان ذکر است نه تنها این به کاربر فشار وارد می کند بلکه به سرور شما هم فشاری اضافی را تحمیل می کند و این باعث می شود سرور برای هر کاربر این مقدار حجم اضافی را تامین کند.

2.       در عین حال شما نمی توانید به system font ها اعتماد کنید چون ممکن است حتی اگر کاربر یک فونتی مثل bardia در سیستمش داشته باشد باز هم به خوبی برایش نمایش داده نشود. در اکثر موارد مشکلاتی با bold بودن فونت هایی که به صورت پیشفرض در سیستم عامل توپر هستند و استفاده نسخه نازک آنها برای مرورگر امکان پذیر نیست پیش می آید و خیلی از زحمات شما برای بهبود گرافیک سایتتان را از بین می برد.چون web font ها برای مرورگرها تنظیم می شوند استفاده کردن از آنها بهتر خواهد بود.

9- تصاویر bitmap در مقابل تصاویر Vector

آیا آیکن ها و تصاویر ریز و درشت موجود در سایتتان جزئیات زیادی دارند و می خواهید از آنها برای جلب توجه کاربران استفاده کنید؟ معمولا برای بکارگیری تصاویری با گرافیک و جزئیات بالا باید از انواع Bitmap استفاده کنید، فرمت هایی مانند jpg، png یا gif همگی بیت نقش هستند. در مقابل اگر تصاویری که استفاده می کنید از نظر گرافیکی جزئیات بالایی هم ندارند به شما توصیه می کنیم از انواع وکتور استفاده کنید و عمده تفاوت وکتور با بیت نقش دو چیز است:

.1کیفیت تصاویر Vetor با تغییر سایز یا zoom شدن به هیچ وجه تغییر نمی کند. اما برای مثال  در تصاویر Bitmap ˓اگر یک تصویر png را سه برابر بزرگ کنید شاهد افت کیفیت در آن خواهید بود و هر چقدر هم که کیفیت تصویر Bitmap بالا باشد باز هم محدودیت داشته و در افزایش سایز دچار افت کیفیت می شود.

Vector.2 ها اگر جزئیات زیادی نداشته باشند حجم خیلی کمی خواهند داشت اما اگر جزئیات تصویر از یک حدی بیشتر شود ممکن است که حجم تصاویر Vector از Bitmap ها نیز بیشتر شود.

پس بسته به نوع کارتان و جایگاهش باید یکی از این دو را انتخاب کنید. برای استفاده از انواع وکتور در طراحی سایت ریسپانسیو هم می توانید از فرمت های SVG و یا icon font استفاده کنید