طراحی وبسایت Responsive یا واکنشگرا یک راهکار بزرگ برای حل مشکل چند صفحه‌ای شدن است، اما رسیدن به آن از طریق نمای چاپی کمی دشوار است.

این نوع طراحی فاقد اندازهٔ ثابت صفحه، فاقد میلی‌متر و اینچ و فارغ از محدودیت‌های صفحه نمایش است. طراحی در واحد پیکسل فقط برای دستگاه‌های رومیزی (desktop) یا همراه (mobile) دیگر قدیمی شده، چراکه هر روز دستگاه‌های بیشتر و بیشتری توانایی باز کردن وبسایت را پیدا می‌کنند. بنابراین می‌خواهیم در این بخش چند اصل اساسی را درخصوص طراحی وب‌سایت واکنشگرا مطرح کنیم و به جای مقابله با وبسایت شناور (fluid web)، به استقبال آن برویم. برای حفظ سادگی کار، بر چیدمان (layout) تمرکز می‌کنیم (درست است، مفهوم واکنشگرا از این فراتر می‌رود، ولی اگر می‌خواهید بیشتر در این زمینه یاد بگیرید، این شروع خوبی است).

مقایسه‌ی طراحی وبسایت Responsive و Adaptive

شاید واکنشگرا و سازگارپذیر به نظر یکسان برسند، اما اینطور نیست. هر دو روش مکمل یکدیگرند، بنابراین درست و غلطی در این مورد وجود ندارد. بگذارید محتوا این مسئله را مشخص کند.

855752add9d03abb838665dd97d4ae82

جریان (flow)

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

10ddf1785d7438869b86fff09862c5a3

واحدهای نسبی (Relative units)

بوم (canvas) می‌تواند صفحه نمایش همراه یا رومیزی یا چیزی بین این دو باشد. تراکم پیکسل هم ممکن است متنوع باشد، بنابراین نیاز به واحدهایی داریم که انعطاف‌پذیر بوده و با همه‌ی محیط ها سازگاری داشته باشند. اینجاست که واحدهای نسبی نظیر درصد به کار می‌آید. از این رو، چیزی را ٪۵۰ درصد گستردن یعنی که همیشه نیمی از صفحه (یا در واقع میدان دید یا viewport که اندازه‌ی پنجره‌ی باز مرورگر است) را اشغال می‌کند.

97383ddb860dfac4d5a51ed9443daa21

نقاط شکست (Breakpoints)

نقاط شکست به چیدمان امکان می‌دهد در نقاط معینی تغییر کند، مثلا در صفحهٔ دسکتاپ سه ستون داشته باشد ولی در صفحهٔ همراه فقط یک ستون. بیشتر خصوصیات CSS می‌تواند از یک نقطهٔ شکست به دیگری تغییر کند. معمولا مکان قرارگیری یک نقطه بستگی به محتوا دارد. اگر یک جمله بشکند باید یک نقطهٔ شکست اضافه کنید. بایستی این نقاط را با احتیاط به‌کار برید چراکه ممکن است کارتان خیلی سریع به هم ریخته شود و تشخیص اینکه چه چیزی بر دیگری اثر می‌گذارد سخت شود.

5c5e00e3e38a1cdc5446422098f5fbc6

مقادیر بیشینه (Max) و کمینه (Min)

گاهی اوقات خیلی خوب است که محتوا همهٔ عرض صفحه را بگیرد، مثلا روی یک دستگاه همراه. اما اینکه همان محتوا کل عرض صفحه نمایش تلویزیونتان را بگیرد معمولا کار معقولی نیست. اینجاست که مقادیر بیشینه و کمینه به کمک ما می‌آیند. مثلا پهنای ٪۱۰۰و عرض بیشینهٔ ۱۰۰۰ پیکسل به این معناست که محتوا کاملا صفحه را پر می‌کند، اما نباید بیشتر از ۱۰۰۰ پیکسل شود.

03ff0a65bae9ba8c7ed829428de66caf

عناصر تودرتو (Nested objects)

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

035ce91f552f89fa65eb4e1d50f6ae2b

اول موبایل یا دسکتاپ

از نظر تکنیکی تفاوت چندانی ندارد که یک پروژه از یک صفحه‌نمایش کوچک به بزرگ (اول دستگاه همراه) آغاز گردد یا برعکس (اول دسکتاپ).گرچه اگر با نسخهٔ همراه شروع کنید محدودیت‌های مضاعفی دارد که به شما در تصمیم‌گیری‌ها کمک می‌کند. خیلی‌ها همزمان از هر دو آغاز می‌کنند، پس امتحان کنید و ببینید کدام روش برایتان بهتر است.

eef9c0b16536281ce23f1130414901d0

مقایسهٔ فونت‌های وبی (Webfonts) با فونت‌های سیستم (System fonts)

آیا می‌خواهید خانوادهٔ فونت جذاب Didot یا Futura را در وبسایتتان داشته باشید؟ از فونت‌های وبی استفاده کنید! هر چند که این فونت‌ها خیلی زیبا هستند اما به خاطر داشته باشید که هر یک را باید دانلود کرد و هر چه تعدادشان بیشتر باشد، زمان بیشتری برای بالا آمدن صفحه صرف می‌شود. از سوی دیگر فونت‌های سیستمی سریع‌تر لود می‌شوند، به غیر از مواقعی که کاربر آن را در سیستمش نداشته باشد که در این صورت به فونت پیش‌فرض تغییر حالت می‌دهد.

cb684d69012251e464a7c001d221edfb

تصاویر Bitmap در برابر Vector

آیا آیکون شما دارای جزئیات زیادی است و افکت‌های زیبایی به آن افزوده شده؟ اگر پاسخ مثبت است پس از بیت‌مپ استفاده کنید. در غیر این صورت، تصویرِ بُردار (vector) را به کار ببرید. برای بیت‌مپ، فرمت jpg، png یا gif و برای بردارها SVG یا فونت آیکون بهترین گزینه‌ها هستند. هر کدام مزایا و معایب خاص خود را دارد. اما بایستی اندازهٔ آنها را هم در نظر داشته باشید — هیچ عکسی نباید بدون بهینه‌سازی در سایت قرار گیرد. از سوی دیگر بردارها کوچک هستند اما برخی از مرورگرهای قدیمی آنها را پشتیبانی نمی‌کنند. به علاوه اگر بُرداری منحنی‌های زیادی داشته باشد از یک بیت‌مپ هم سنگین‌تر می‌شود، پس هوشمندانه و با دقت انتخاب کنید.

8eeee5533e4ada481144f54f9e85ba36

فکر می‌کنید مسئلهٔ مهمی را در این بخش از قلم انداخته‌ایم؟ در بخش کامنت‌ها برایمان بنویسید!

منبع: فرانش

درباره نویسنده

سامان

فارغ التحصیل کارشناسی نرم افزار، علاقه مند به برنامه نویسی، طراحی وب، تکنولوژی های نوین، یادگیری و فیلم

مشاهده تمام مقالات