میلر مدیروس و دیوید وال از آژانس دیجیتال Firstborn در مورد اصول طراحی وب سایت واکنش‌گرا و اینکه چگونه برند‌ها باید فرا‌تر از ابزارهای رومیزی فکر کنند و تفکرات خلاقانه داشته باشند، توضیح داده‌اند:
دنیای پر از فعل و انفعالات امروز به طور دائم در حال تغییر است و تعداد ابزارهای مختلفی که این فعل و انفعالات را به هم مرتبط می‌سازد، هر ساله بیشتر و بیشتر می‌شود. مشکلی که در رابطه با این مساله وجود دارد این است که برای این بازی هیچ قانونی وجود ندارد. در حالی که شرکت‌های بزرگ کالاهای جدید با سیستم‌ها و تکنولوژی‌های گوناگون تولید می‌کنند، ناگزیر باید به فکر روش‌های خلاقانه باشیم تا خود را با این شرایط سازگار کنیم.
طراحی وب واکنش‌گرا (Resoponsive Web Design) مفهوم جدیدی نیست، اما طی دو سال گذشته به عنوان یک جایگزین خوب برای طراحی صفحات با اندازه‌ها و نسبت‌های تصویر مختلف، برای کارکرد در ابزارهای رومیزی، تبلت و موبایل، توجه افراد زیادی را به خود جلب کرده است. به طور ساده‌تر، طراحی واکنش‌گرا یعنی ایجاد یک وب سایت با شبکه سیال تناسبی که به صورت اتوماتیک با موتورهای جستجو و ابزارهایی که کاربران استفاده می‌کنند، سازگار می‌شود.
طراحی وب واکنش‌گرا (Resoponsive Web Design) مفهوم جدیدی نیست، اما طی دو سال گذشته به عنوان یک جایگزین خوب برای طراحی صفحات با اندازه‌ها و نسبت‌های تصویر مختلف، برای کارکرد در ابزارهای رومیزی، تبلت و موبایل، توجه افراد زیادی را به خود جلب کرده است. به طور ساده‌تر، طراحی واکنش‌گرا یعنی ایجاد یک وب سایت با شبکه سیال تناسبی که به صورت اتوماتیک با موتورهای جستجو و ابزارهایی که کاربران استفاده می‌کنند، سازگار می‌شود.
این یعنی که برند‌ها اکنون بر نحوه دسترسی کاربران و تعامل آن‌ها با محتوای وب سایت‌ها کنترل بیشتری دارند. این تغییرات بسیار گسترده‌اند؛ بیشتر برند‌ها فقط ابزارهای رومیزی را مورد توجه قرار می‌دهند و دیگر ابزار‌ها را رها می‌کنند. در حال حاضر، مشتری بیش از همیشه و از هر جایی که می‌تواند با برند‌ها ارتباط برقرار می‌کند؛ به خصوص، مشتریان این روز‌ها از موبایل به عنوان روشی برای تکمیل و توسعه یک تجربه برند دیگر استفاده می‌کنند. برند‌ها اگر دسترسی به محتوا را به خطر اندازند، خودشان را در موقعیتی منفی قرار می‌دهند.
تسهیل دسترسی، کار خوبی است اما آسان نیست. در حالی که ما با پایگاه‌های وب چندگانه‌ای مواجه هستیم، مجبوریم محتوا و همچنین فرمتی را که برای کاربران به نمایش گذاشته می‌شود اولویت بندی و برنامه‌ریزی زود هنگام کنیم. از نظر ما، اولویت‌بندی، بزرگ‌ترین چالش برند‌ها است. قدم بعدی این است که کلیه این اطلاعات را بگیرند و با استفاده از ساده‌ترین کد ممکن، آن را با یک الگوی انفرادی تطبیق دهند و مطمئن باشند این اطلاعات روی ابزارهایی که قابلیت‌های کمتری هم دارند، قابل نمایش دادن است.
برای برندهای بزرگی که کالا‌ها و ابزارهای بیشمار دارند، این کار ساده‌ای نیست، اما برخی برند‌ها مانند استارباکس و سونی این کار را با موفقیت انجام داده‌اند. این دو برند، وب سایت‌های واکنش‌گرای جدیدی راه‌اندازی کرده‌اند که با کلیه فرمت‌ها و ابزار‌ها سازگاری دارد و در نتیجه تجربه خوبی برای کاربران و خودشان ایجاد کرده‌اند.
مورد مناسب دیگری از طراحی وب واکنش‌گرا، وب سایت جدید Mountain Dew است که توسط آژانس Firstborn طراحی شده است. Firstborn یک آژانس دیجیتال در نیویورک است که اعضای آن استراتژیست‌ها، طراحان، تولید کنندگان و تکنولوژیست‌هایی هستند که ایده‌های خلاقانه ارائه می‌دهند و این ایده‌ها را به تجربه‌های هوشمندانه و مبتکرانه برای کاربران تبدیل می‌کنند. کار اصلی این آژانس، ایجاد وب سایت‌ها، آگهی‌های آنلاین، تولید آنتی ویروس‌ها، برنامه‌های کاربردی دیجیتال، مدل‌های ۳ بعدی، ابزارهای مدیریت محتوا و هر چیز دیگری است که از تکنولوژی دیجیتال بهره می‌برد.
سایت Mountain Dew که توسط این آژانس طراحی شده، سرمایه‌های با ارزشی را در ورزش‌های حرکتی، موسیقی، تبلیغات، آماده سازی محصول و کانال‌های اجتماعی، جمع آوری می‌کند. فرا‌تر از این طراحی واکنش‌گرا، تجربه‌ای شخصی ایجاد شده که در آن کاربران می‌توانند محتوا را فیلتر کنند و تنها چیزی را که بیشترین ارتباط را با آن‌ها دارد، به نمایش بگذارند.
در طول طراحی و توسعه پروژه‌های قبلی در Firstborn قوانین ساده‌ای ایجاد شده‌اند که اگر پایگاه‌های وب چندگانه هدف شما هستند، باید این قوانین را مورد توجه قرار دهید:
برنامه‌ریزی زودهنگام
به منظور ایجاد یک طراحی واکنش‌گرا و کارآمد، باید امور را به درستی برنامه‌ریزی کنیم. فرآیند این نوع طراحی با طراحی وب سایت‌های قدیمی معمولا کمی متفاوت است، به خصوص به این دلیل که نمی‌توان طرح‌بندی آن را بر یک سایز ثابت ویو پورت قرار داد و هیچ روش ساده‌ای برای طراحی تک تک وب سایت‌ها وجود ندارد. بنابراین بهتر است تا جایی که امکان دارد نقاط اتصال کمتری طراحی کنیم و سپس طرح‌بندی را بین این نقاط قرار دهیم.
اگر طرح‌بندی بر اساس شبکه باشد، باید مطمئن شوید که شبکه هنوز روی صفحات کوچک‌تر یا بزرگ‌تر کارایی دارد و همچنین سایز شبکه به آسانی قابل سازگاری است.
بیشتر افراد اتفاق نظر دارند که بهتر است ساختار شبکه شما از نوع موبایل راه‌اندازی شود و ابتدا بر صفحات کوچک‌تر و تا جایی که ممکن است با ویژگی‌های کمتر متمرکز شوید. با این کار این امکان وجود دارد که هم نوع بسیار معمولی سایت را داشته باشید که در قدیمی‌ترین گوشی‌ها یا تبلت‌ها نیز کار می‌کند و هم نوع پیشرفته آن را برای موتورهای جستجو با قابلیت بالا به‌کار گیرید.
رابطه‌ای که یک کاربر با ابزارهای رومیزی دارد با رابطه وی با ابزارهای موبایل متفاوت است و بنابراین نباید به طور یکسان با آن‌ها رفتار شود. در ابزارهای موبایل اولویت‌ها تغییر می‌کنند و محتوا باید واضح‌تر و مختصر‌تر باشد. مثال خوب این موضوع این است که اگر به سایت Chase Mobile دسترسی داشته باشید، سه گزینه پیش روی شما قرار دارد که بسیار واضح هستند و کل نیازهای شما را تامین می‌کنند. اولویت‌های خود را مرور کنید و به کاربر تنها چیزی را منتقل کنید که بیشتر از همه به دنبال آن است.
به یاد داشته باشید که در تبلت‌ها و موبایل‌ها دکمه غلتک موس وجود ندارد و بیشتر عوامل حرکتی که برای ابزارهای رومیزی طراحی شده، با حرکات بدن کار نمی‌کند. اخیرا این نکته مورد توجه قرار گرفته که ما برخی ابزارهای کاربری را به جای یکدیگر استفاده می‌کنیم. به عنوان مثال، موس جدید ساخت شرکت اپل مرجع‌های حرکتی را از iPad و iPhone به کار می‌گیرد. این یک رویکرد خوب است، چرا که سایت‌ها باید با ما سازگار شوند.
ساخت مدل اولیه، به عنوان مقدمه کار
ساخت مدل اولیه برای تست کردن و تایید اندازه شبکه و همچنین اطمینان از اینکه ساختار کلی در مقیاس صفحات چندگانه است، امری بسیار مهم است. از آنجایی که طراحی‌ها بر اساس صفحات با هر پهنای ممکن صورت نمی‌گیرند، بهتر است برخی نقاط انفصال را روی خود مدل اولیه قرار دهیم. نمونه‌های اولیه نیز ابزارهای خوبی برای معرفی پروژه به مشتری هستند. این نمونه‌ها نشان می‌دهند یک طراحی چگونه با سایزهای مخلتف صفحه سازگار می‌شود و در تعیین اولویت‌های محتوا که به افزایش تجربه کاربر منجر می‌شود، کمک می‌کند.
ساده‌سازی کنید
هر چقدر سایت ساده‌تر باشد، شانس کارایی آن در ابزارهای چندگانه بیشتر می‌شود. وبلاگ‌های ساده، نسبت به سایت‌های پیچیده تعاملی بیشتر سازگاری دارند. اگر خواهان بهترین تجربه در دامنه گسترده‌تری از ابزار‌ها هستید، محدودیت‌های فنی را باید همیشه مد نظر قرار دهید. گاهی اوقات نیاز است تعامل و پیچیدگی طرح‌بندی را ساده‌سازی کنیم تا میزان دسترسی مشتری را افزایش دهیم.
نقاط انفصال باید در حداقل میزان ممکن نگهداشته شوند، چون هر نقطه انفصال جدید، تست کردن و حفظ سیستم را سخت‌تر می‌کند، به خصوص اگر هر نقطه انفصال طراحی را به میزان قابل توجهی تغییر دهد و برای کار کردن حتما به JavaScript وابسته باشد.
قوانین را نقض کنید
دریافتن اینکه یک قانون چرا به وجود آمده و آیا واقعا با پروژه شما همخوانی دارد، مهم است. گاهی اوقات یک تجربه جالب توجه مهم‌ترین موضوع است. اجازه ندهید این قوانین دست و پای شما را ببندند
منابع:
- fastcocreate.com
- firstborn.com