برخی سایت‌ها خصوصا سایت‌های معروف و پربازدید که هزینه زیادی صرف طراحی و برنامه‌نویسی و ... می‌کنند، برای کاربری که با موبایل به سایت‌شان آمده، سایتی مجزا طراحی می‌کنند.
اما برای سایت‌های معمولی با بازدید عادی، طراحی سایتی که خود را متناسب با صفحه کاربر درآورد، راه‌حل کم‌هزینه‌تری است.
گذشته از ابعاد صفحه نمایش کاربر، ویژگی‌های دیگری نیز هست که بر اساس آنها می‌توان سایتی کاربرپسندتر به کاربر اراده داد. به این سبک طراحی و سایت حاصله در اصطلاح واکنش‌گرا (Responsive) گفته می‌شود که همین سایت فعلی 9px.ir یک نمونه آن است.
طراحی یک سایت واکنش‌گرا، با توجه به مشخصات زیر صورت می‌گیرد:
- ابعاد صفحه کاربر
حسب پیکسل یا سایر واحدهای تعریف شده مثل em, rem, cm, mm, ... - افقی یا عمودی بودن حالت فعلی صفحه
خصوصا برای موبایل و تبلت. مثلا در صورتی که کاربر از موبایل در حالت ایستاده استفاده می‌کند، می‌توانید line-height, padding, margin عناصری همچون h1, h2 را کمتر کنید یا اگر در حالت افقی (Landscape) از موبایل‌ش استفاده می‌کند، بهتر است بیخیال سرآیند ثابت‌شده (fixed header) شوید. - تراکم پیکسل
که برای عرضه تصاویر با کیفیت بالا برای صفحات باکیفیت (مثل رتینا) کاربرد دارد - شدت نور
که با آن می‌توان حسب کم یا زیاد بودن نور محیط، رنگ‌بندی صفحه را به تناسب تغییر داد مثلا در اگر نور محیط کاربر کم است، رنگ زمینه را تیره و متن را روشن کنید یا اگر نور محیط کاربر بسیار زیاد هست، حتما رنگ زمینه را سفید کامل و رنگ متن را سیاه کامل و سایز آن را درشت‌تر کنید. - و ...
برای طراحی واکنش‌گرا، می‌توان از js استفاده کرد اما روش اصلی برای این کار، استفاده از css (و ویژگی مدیاکوئری) می‌باشد خصوصا که برخی کاربران ممکن است js را غیرفعال کنند (به دلایل امنیتی یا برای کم‌شدن ترافیک مصرفی و ...) که خب css حتی در صورت غیرفعال بودن جاوا اسکریپت کارا خواهد بود.
برخی 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 یا
