یادداشت‌ها

طراحی وب واکنشی

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

گذشته از ابعاد صفحه نمایش کاربر، ویژگی‌های دیگری نیز هست که بر اساس آنها می‌توان سایتی کاربرپسندتر به کاربر اراده داد. به این سبک طراحی و سایت حاصله در اصطلاح واکنش‌گرا (Responsive) گفته می‌شود که همین سایت فعلی 9px.ir یک نمونه آن است.

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

1. ابعاد صفحه کاربر
   حسب پیکسل یا سایر واحدهای تعریف شده مثل em, rem, cm, mm, ...
2. افقی یا عمودی بودن حالت فعلی صفحه
   خصوصا برای موبایل و تبلت. مثلا در صورتی که کاربر از موبایل در حالت ایستاده استفاده می‌کند، می‌توانید line-height, padding, margin عناصری همچون h1, h2 را کمتر کنید یا اگر در حالت افقی (Landscape) از موبایل‌ش استفاده می‌کند، بهتر است بیخیال سرآیند ثابت‌شده (fixed header) شوید.
3. تراکم پیکسل
   که برای عرضه تصاویر با کیفیت بالا برای صفحات باکیفیت (مثل رتینا) کاربرد دارد
4. شدت نور
   که با آن می‌توان حسب کم یا زیاد بودن نور محیط، رنگ‌بندی صفحه را به تناسب تغییر داد مثلا در اگر نور محیط کاربر کم است، رنگ زمینه را تیره و متن را روشن کنید یا اگر نور محیط کاربر بسیار زیاد هست، حتما رنگ زمینه را سفید کامل و رنگ متن را سیاه کامل و سایز آن را درشت‌تر کنید.
5. و ...

برخی CSS, JS هایی که در این زمینه آماده و گسترش یافته‌اند، در ادامه لیست شده‌اند:

• Adapt.js
  کاری از گرید سیستم 960 که معروف و معتبر است و بر مبنای آن گریدهای خوبی مثل FEM ساخته شده است.
• The 1140px CSS Grid System
  یک گرید سیستم css که مبتنی بر لایه‎های شناور است و خود را تا حد موبایل می‌تواند کوچک کند
• SimpleGrid
  همانطور که از نامش پیداست؛ یک گرید سیستم ساده
• Golden Grid System
  یک گرید سیستم خوب که فقط با IE مشکل دارد!
• Toast
  یک گرید سیستم بسیار ساده اما قدرتمند
• One% CSS Grid
  یک گرید سیستم شناور (برخلاف اکثر گریدسیستم‌ها که شناور نیستند و دارای چند مقدار ثابت هستند) که جدیدا معرفی شده و نکات جالبی دارد هرچند به دلیل نوین بودن، با براوزرهای قدیمی (از جمله IE8) مشکلاتی نیز دارد اما با javascript مرتفع می‌شود همانطور که اینجا توضیح دادم.
• fluid baseline grid
  یک گرید سیستم شناور خوب و جدید که شامل برخی فایل‌های موردنیاز کوچک نیز هست.
• Centurion
  یک گرید سیستم جدید که از هر نظر حرف ندارد! هم آسون و هم خوش‌دست است.
• MUELLER
  یک گرید سیستم که بتازگی معرفی شده و به خوب به نظر می‌رسد.
• xyCSS
  اگر بگویم بهترین شاید اغراق نباشد. یک گریدسیستم عالی به همراه ابزار و مثال و ... با انعطاف‌پذیری و قابلیت‌های ویژه.
  جالب اینجاست که حتی براوزرهای قدیمی مثل IE6 را هم ساپورت می‌کند در حالی که برخی گریدسیستم‌ها IE8 را هم ساپورت نمی‌کنند و آن را قدیمی می‌دانند.
• YAML را می‌توان یکی از بهترین‌ها دانست. یک گرید سیستم کامل و ریسپونسیو که از زبان‌های RTL (راست به چپ) مثل فارسی و عربی نیز پشتیبانی می‌کند.
• Flexible.gs
  flexible یک گرید سیستم جدید و پرامکانات است.

لینک‌های مفید مرتبط با این مبحث

• برای شروع می‌توانید این مطلب را بخوانید تا با مبانی کار آشنا شوید. سپس این مطلب را بخوانید تا با واحدها (px, em و ...) که از پیش‌نیازهای طراحی واکنش‌گراست، آشنا شوید. نهایتا و نهایتا این مطلب را ببینید. برای ادامه مطالعه، به همه کسانی که به این مبحث علاقمند هستند، مطالعه اخبار، منابع و ساختارهای طراحی وب واکنشی را که در این صفحه ارائه گردیده است، پیشنهاد می‌کنم.
• همچنین افزونه و بوکمارکلت‌هایی هستند که در این زمینه کار شما را راحت‌تر می‌کنند. یک نمونه آن افزونه Web Developer برای فایرفاکس است که در اینجا معرفی شد. همچنین بوکمارکلت Viewport resizer نیز در این زمینه عالی‌ست.
• در سایت mediaqueri.es نیز نمونه‌های فراوانی از سایت‌هایی که با این تکنیک طراحی شده، معرفی شده است.
• مشکل جداول یکی از مشکلات طراحی ریسپونسیو است چرا که جدول ممکن است دارای تعداد زیادی فیلد (مثلا 10 ستون) باشد و نتوان آن را از حد معینی کوچکتر کرد.
  برای حل این مشکل دو راه حل اندیشیده شده است. یکی اینکه در صفحات با عرض کم، برخی ستون‌های جدول hide شده و با کلیک نمایش داده شود. کاری که پلاگین FooTable انجام داده است (نمونه).
  روش دوم، تبدیل جدول به لیست (Li) در صفحات با عرض کم است. پلاگین ReStable این ایده را پیاده‌سازی کرده است. (مشاهده این پلاگین در عمل)
  stacktable.js نیز یک پلاگین جدید در این زمینه است.
  البته این کار را با css محض (بدون جاوا اسکریپت) نیز می‌توان انجام داد. در این مقاله روش این کار به زبان ساده تشریح شده است و این قطعه کد نیز این کار را با جزئیات بیشتری با کمک css خالی پیاده کرده است.
• ZURB نام تمپلتی برای ایمیل‌های ارسال شده توسط برنامه است در قالب responsive.
• منوهای بالای سایت یکی از مشکلات طراحی واکنشی است که برای آن راه‌حل‌های متعددی ارائه شده است. برخی مثل MeanMenu یا ResponsiveNav یا sidr اینطور طراحی شده‌اند که در صفحه نمایش کوچک، جمع شده و به صورت یک دکمه دربیایند تا اگر روی آن کلیک شد، باز شود. هرچند روش دیگری هم وجود دارد که جالب است؛ تبدیل منوها به لیست بازشو که ReSmenu به نظرم بهترین موردی است که دیده‌ام و منوهای دارای هر تعداد زیرمنو را به سادگی به یک select تبدیل می‌کند و همچنین از نظر width موردنظر برای تبدیل منو به select هوشمند (بسته به تعداد منوها) عمل می‌کند.
  همچنین چون طراحی واکنشی توجه ویژه‌ای به وسایل لمسی (موبایل و تبلت) دارد، لذا منوهایی که دارای زیرمنو هستند و در حالت عادی با رویداد mouseover آتش می‌شوند، در صفحات لمسی به مشکل برمی‌خورند که برای این مشکل منوها نیز راه‌حل‌هایی داده شده که flexnav یکی از بهترین نمونه‌های آن است که در صفحاتی با width کم (موبایل و تبلت) زیرمنوها با کلیک باز می‌شود...
  همچنین در مطلب مربوط به منوها نیز چندین منوی جالب معرفی شده که برخی از آنها ریسپونسیو است.
• سربرگ یا TAB ها نیز یکی از مشکلات طراحی ریسپونسیو است که برای حل آن راه حل‌هایی ارائه شده است. یکی از سبک‌ترین آنها که فقط 2 کیلوبایت حجم دارد، پلاگین جی‌کوئری Responsive Tabs است. پیش نمایش آن را در این لینک می‌توانید مشاهده بفرمایید.
• تصاویر نیز یکی از مشکلات طراحی ریسپونسیو هستند و راه‌حل‌های متعددی برای آن ارائه شده که سختی‌های خاص خود را دارد. اما به نظرم راه حلی که در مقاله One Solution To Responsive Images بهترین روش است خصوصا زمانی برای ما که وارد کنندگان مطالب سایت‌هایی که می‌سازیم، معمولا تنبل یا ناآگاه هستند و نمی‌توانند یک تصویر را با کیفیت‌های مختلف تهیه و آپلود کنند!
  در روش معرفی شده در مقاله فوق، جی‌کوئری حسب عرض صفحه درخواست مربوطه را به سرور می‌فرستد و PHP تصویری با کیفیت تقاضاشده را تهیه می‌کند. این روش (خصوصا اگر بدون کش کردن تصاویر در سرور باشد) کمی به سرور فشار وارد می‌کند (از نظر مصرف رم و cpu) اما ظاهرا تنها چاره کار است!
• یکی از ملزومات طراحی واکنشی، آشنایی با ابعاد و رزولوشن وسایل متداول (موبایل و تبلت و مانیتور و ...) است و mydevice.io یک سایت مفید در این زمینه است.
  گوگل نیز اخیرا صفحه‌ای برای این امر ایجاد کرده است.
• ریسپونسیو بودن یک سایت اگر صرفا با css باشد، بیشتر روی چینش عناصر صفحه تاثیر می‌گذارد. با استفاده از جاوا اسکریپت می‌توان به یک سایت قابلیت واکنش‌گرایی بیشتری بخشید که این اسلاید در این خصوص راهنمای خوبی خواهد بود.
  کتابخانه‌های SimpleStateManager و enquire.js نیز دونمونه خوب در این زمینه هستند.
• برش خوردن تصاویر در نمای موبایلی یک سایت ریسپونسیو، یکی دیگر از مشکلات طراحی ریسپونسیو است که پلاگین FocusPoint به خوبی آن را حل کرده است.

1. معرفی برخی اسلایدرهای جی کوئری
2. انیمیشن با CSS
3. چرا باید بینندگان موبایلی سایت تان را در اولویت قرار دهید؟
4. ساخت PDF آنلاین
5. اعتبارسنجی و شکل دهی فرم ها با استفاده از html5
6. حذف درخواست اضافه تصویر انیمیشن لودینگ
7. برنامه نویسی اندروید
8. پیمایش و منو برای یک صفحه
9. کار با تصاویر در سمت کاربر
10. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
11. نمونه کارهایی با اچ تی ام ال پنچ
12. برنامه ها و سرویس های ضروری برای برنامه نویسان و طراحان وب