حتما اصطلاحاتی مثل اول-موبایل، واکنشگرا و تطبیقی رو تو مقالات مختلف خوندید، ولی شاید فقط یک مفهوم کلی از همشون تو ذهن داشته باشید و تفاوت های دقیق اینها رو با هم ندونید. برای اینکه بتونید یکی از این نظریه ها رو برای طراحی وب سایتتون انتخاب کنید باید حتما با ویژگی های هر کدوم آشنا باشید تا بهترین انتخاب رو داشته باشید. تو این مقاله با مفهوم دقیق هر کدوم از این اصطلاحات آشنا خواهید شد و در انتها میتونید هر کدوم رو که برای شرکتتون مناسب تره انتخاب کنید.

خلاصه ای کوتاه از تاریخچه طراحی سایت واکنشگرا
طی چند سال اخیر، تعداد کاربرهای دستگاه های تلفن همراه و تعداد خود گوشی ها خیلی بیشتر شده. در نتیجه ارائه یه تجربه کاربری بی نظیر و باکیفیت برای کامپیوترهای رومیزی، تبلت و موبایل مهمتر از همیشه شده. طراحی سایت واکنشگرا یا RWD بی شک یکی از بهترین روشهای حل این مشکل چند دستگاهی بودنه.
طبق تعریف ویکی پدیا، طراحی سایت واکنشگرا یا RWD (حروف اختصاری برای Responsive Web Design) روشیه که طراح سایت برای فراهم کردن شرایط تجربه مشاهده مناسب سایت (یعنی وقتی که بتونیم سایت رو بدون نیاز به تغییر اندازه و زوم کردن براحتی بخونیم و اسکرول کنیم) در دستگاههای مختلف (از مانیتورهای کامپیوترهای رومیزی تا موبایل و تبلت) بکار میگیره. اگه میخواهید بدونید چرا این مدل طراحی انقدر اهمیت پیدا کرده، بد نیست یه نگاهی به تاریخچه پشتش بندازیم.

• طراحی با عرض ثابت

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

• انقلاب موبایل

اواسط دهه هشتاد شمسی، گوشیهای موبایل توانایی دسترسی به اینترنت پیدا کردند اما فقط میتونستند داده های متنی ساده نمایش بدند، تا دهه نود که دیگه گوشی های هوشمند محبوبیت گرفتند و مرورگرهای موبایلی شروع به نمایش "واقعی" سایتهایی کردند که از جاوااسکریپت و CSS2 استفاده میکردند.
برای اولین بار دستگاه های موبایل میتونستن سایتها رو دقیقا همونطوری نمایش بدن که کامیپوترها نمایش میدادند. اما هنوز هم یه مشکلی بود: برای کاربرها خیلی قابل جهتیابی نبودند. کاربرهای موبایل باید کلی زوم میکردند و روی صفحه نمایش کلیک میکردند و از اون طرف هم سرعت بارگذاری پایین صفحات رو تحمل میکردند. به خصوص وقتی گوشی هوشمند روی سرعت 3G میخواست باز بشه.

• پدرخوانده ی سایتهای واکنشگرا: اتان مارکوت

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

• اهمیت طراحی سایت واکنشگرا

کاربرهای موبایل خیلی زیاد شدند و موفقیت شرکتها تو تسخیر این فضای جدیده. سایتهاشون باید برای همه دستگاهها بهینه باشه. سایتهای واکنشگرا فقط یه URL دارند و یه سری کد لازم دارن، بنابراین نیازی نیست چند تا سایت طراحی کنند یا نگران چند URL باشند. کاربر چه سایت رو روی تبلت ببینه و چه گوشی هوشمند یا موبایل، در هر حال یک سایت یکسان رو میبینه و سایت به طور خودکار میچرخه و خودشو با صفحه نمایشگری که داره باهاش دیده میشه سازگار میکنه. اینطوری طراحی سایتتون درسته و علاوه بر این تو هزینه های طراحی سایت صرفه جویی کردید. فقط هم یک سایت میسازید و یک سایت رو مدیریت میکنید و اگه هنوز هم فکر میکنید همه این دلایل قانع کننده نبود، چی از این بهتر که کاربرهاتون تجربه باکیفیت و بینظری میتونن داشته باشن و سایتتونو روی دستگاه های مختلف مشاهده کنند. نقاط مثبت طراحی سایت واکنشگرا خیلی بیشتر از نقطه ضعفهاشه.

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

• خواندن محتوا

طراحان سایت باید بدونن کاربرها چطوری محتوای سایتو میخونن تا بتونن محتوا رو کاربرپسندتر کنن و بیشتر توجه کاربرها رو جلب کنن. حالا این یعنی چی؟ یعنی طراحان باید محتوایی تولید کنن که هم مرور کلی و سریعش راحت باشه و هم کاربری که تمایل داره بتونه به راحتی دقیق بخونتش. اینطوری اگه کاربری عجله داشته باشه هم میتونه راحتتر تصمیم بگیره که بقیه متن رو بخونه یا نه. طراحی واکنشگرا وضوح و خوانایی بیشتری به کاربرها میده. اما کاربرها چطوری میتونن از توسعه سایتی که برای ارائه خدمات به اونها بوجود اومده بهره ببرن؟

• داستان بگویید

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

• انفجار محتوای مجازی

ببینید چطوری میتونید این روشو تو بازاریابی شبکه های اجتماعیتون بکار بگیرید تا فالوئرهای بیشتری جمع کنید و داستانتون عین یه بمب سراسر دنیای وب پخش و به اشتراک گذاشته بشه؟ صفحه وب شما باید مثل یه هرم ساختار بندی بشه تا داستانتون اثرگذارتر باشه:
شرح واقعه
شدت بخشیدن به اتفاقات
لحظات اوج
اوج
نتیجه و/یا درخواست برای اقدام
وقتی از این ساختار هرمی برای محتواتون استفاده کنید، خواننده هارو جذب می کنید و همیشه قسمتهای مهم داستان – که در واقع محصولات یا خدمات شما هستن - تو ذهنشون میمونه.

• محتوا را خوانا کنید

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

• جمع بندی

وقتی شفافیت و خوانایی با هم ترکیب بشن محتوا به هدف خودش میرسه. با طراحی سایت واکنشگرا مشتری هاتون میتونن از یه جهتیابی راحت لذت ببرن. بنابراین وقتی یه طراح سایت انتخاب می کنید، خوبه که این موارد رو در نظر بگیرید و موفقیت سایتتونو تضمین کنید.

حتما شما هم شنیدید که گوگل الگوریتم جستجوی طبیعیشو بروز کرده. البته گوگل قبلا هم به طور مرتب الگوریتمشو تغییر میداد و اصلاح می کرد و این چیزا تازگی نداره.
چیزی که اینجا مهمه، اینه که این بروزرسانی بزرگ که در اردیبهشت 1395 انجام شد، سایتهایی رو که برای نمایش روی دستگاه های تلفن همراه بهینه سازی نشده باشند، جریمه می کنه. این تغییر میتونه تأثیرات زیادی روی رتبه سایت ها بذاره. اگه سایتتون سازگار با موبایل نیست، شاید رتبه شما هم پایین بیاد. اما نترسید، ما کمکتون می کنیم که با یه سری تغییرات مانع این امر بشید.
برای درک بهتر قضیه باید تفاوت بین سایت موبایلی و سایت واکنش گرا رو بدونید.
سایت موبایلی – دو طراحی: دو دستگاه
طراحی موبایل
سایت های موبایلی خیلی وقته که هستن. الآن چند سالی میشه، و از زمان ظهور تبلت ها و گوشی های هوشمند ما شاهد سایت های سازگار با موبایل بودیم. اغلب اوقات دو تا سایت کاملا شبیه همند، فقط روی یکی از نسخه ها یه سری اصلاحات انجام شده و روی قالب سایت تغییراتی اعمال شده که جهت یابی، زیبایی و محتوا روی صفحه نمایش های کوچیک قابل استفاده باشن.
معمولا، مرورگر متوجه میشه که کاربر داره از گوشی هوشمند استفاده می کنه و در نتیجه نسخه موبایلی سایت رو باز می کنه که روی یه زیردامنه از دامنه اصلی مثل m.yourwebsite.com قرار داده. این یکی از روشهای نمایش سایت روی گوشی های هوشمنده و دیگه نیازی به زوم کردن سایت –که اوایل ظهور گوشی های هوشمند، کاربرهای این دستگاهها رو به ستوه آورده بود- نیست.
از نظر فنی، قبلا این روش روش خوبی به حساب میومد، اما با مهم تر شدن و پیچیده تر شدن محتوا یه روش بهتری بوجود اومد: طراحی سایت واکنشگرا (ریسپانسیو).
سایت واکنشگرا – یک طراحی: همه دستگاه ها
طراحی سایت واکنشگرا
به جای اینکه دو نسخه از سایت بسازیم و جهتیابی و کارهای هنری و محتوا رو تغییر بدیم و مناسب دستگاه های هوشمند کنیم، طراحی سایت واکنشگرا به طور دینامیکی و پویا به هر اندازه صفحه نمایشی واکنش میده و خودشو باهاش هماهنگ می کنه.
عناصر صفحه نمایش بر اساس رزولوشن دستگاه تغییر اندازه میدن، دوباره مرتب شده و ظاهر یا نامرئی میشن. تو این روش سایت طوری بهینه شده که همیشه، روی هر صفحه مجازی، بزرگ یا کوچیک، بهترین تجربه کاربری رو ارائه بده. بیشتر از روش "شخصی سازی تناسبات" برای نمایش سایت ما روی صفحه نمایش های مختلف – از کامپیوتر تا گوشی هوشمند- بهره میبره.
چیزی که جالبه اینه که شما قبلا هم احتمالا سایتهای واکنشگرا دیده باشید و ازشون استفاده کردید، اما هیچوقت متوجهش نشدید، چون همیشه اسیر محتوای سایت میشدید و توجهتون میرفت سمت محتوا، نه طراحی سایت.
هر چی جلوتر میریم، کاربرد این طراحی بیشتر میشه و گوگل هم داره بی سر و صدا این مد جدید رو تماشا می کنه.
گوگل – ارتباط و دسترسی
گوگل بیشتر تمایل داره محتوای مرتبط با سطح دسترسی آسان روی سایت ها فرستاده بشه. یعنی نه تنها محتوا باید خوب باشه، بلکه باید به راحتی کاربرها پیداش کنن. اینجاست که معلوم میشه باید طراحی واکنشگرا داشته باشید و معلوم میشه چرا گوگل انقدر روی واکنشگرا بود سایت ها تأکید داره. فرض کنید دو تا سایت هستن که از نظر محتوا رتبه یکسانی دارن، اما یکیشون واکنشگراست، گوگل از بین این دوتا، به احتمالا بالایی برای رتبه دهی جستجو سایت واکنشگرا رو انتخاب می کنه.
اگه میخواهید بیشتر راجع به بروزرسانی های اخیر گوگل، طراحی واکنشگرا و تست سازگاری با موبایل سایت بدونید، میتونید به مقاله های قبلی دارکوب مراجعه کنید.
شما
اگه متوجه شدید که سایتتون سازگار با موبایل نیست، نگران نباشید. ما اینجاییم که به سوالات شما جواب بدیم. باهامون تماس بگیرید، خوشحال میشیم بهتون کمک کنیم.

طراحی وب سایت ریسپانسیو(RWD) ، یک فرآیند طراحی سایت است که باعث می شود صفحات وب به خوبی بر روی انواع دستگاه ها و صفحات نمایش به خوبی مشاهده شود.  محتوا، طراحی و عملکرد در تمام دستگاه ها مطابق با همان دستگاه می باشد.

در سال های اخیر با توجه به افزایش استفاده از دستگاه های هوشمند و تلفن های همراه ، طراحی وب سایت ریسپانسیو بسیار اهمیت پیدا کرده است. امروزه بیش از نیمی از ترافیک وب سایت ها از طریق تلفن های همراه می باشد.

همچنین گوگل از سال 2015، طراحی سایت ریسپانسیو (RWD) را یکی از عوامل رتبه بندی اعلام کرد.

چند نکته که در هنگام طراحی سایت ریسپانسیو باید در نظر گرفت

آیا شما به فکر ریسپانسیوسازی وب سایت خود هستید؟  اگر چنین تصمیمی دارید رعایت نکات زیر در هنگام ساخت سایت ریسپانسیو مهم می باشد.

هدفمند کردن محتوای حیاتی

فکر می کنید چه چیز باعث می شود که وب سایت شما به رتبه بالاتری صعود کند؟ الویت دادن به اطلاعات و محتوای سایت بسیار ضروری است. محتوای حیاتی اصول ساخت هر سایتی می باشد. به خصوص اگر می خواهید طراحی سایت ریپسپانسیو داشته باشید باید این نکته را در نظر بگیرید.

سعی کنید حداقل سه پوسته را طراحی کنید

یک سایت ریسپانسیو باید حداقل دارای سه پوسته برای پهنای باند مرورگر باشد. اعدادی که ما در زیر می گوئیم به صورت مثال است.

کوچک: زیر600 پیکسل. این سایز برای اغلب تلفن های همراه می باشد.

متوسط:  600 تا 900 پیکسل. این سایز برای اکثر تبلت ها، برخی از تلفن های همراه بزرگ و رایانه های کوچک مانند نوت بوک ها می باشد.

بزرگ: بیش از 900 پیکسل. این سایز برای کامپیوترهای شخصی رومیزی می باشد.

هر کدام از این پوسته ها باید متن و عناصر گرافیکی یکسانی داشته باشند اما هر کدام باید به گونه ای طراحی شوند که بهترین نمایش را در همان دستگاه داشته باشند.

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

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

تصاویر انعطاف پذیر برای طراحی وب سایت ریسپانسیو بسیار ضروری است. شما باید در مورد مقیاس اندازه عکس ها فکر کنید. چگونه بر روی صفحه نمایش یک کامپیوتر رومیزی بزرگ و یا یک تبلت و یا یک گوشی تلفن همراه به نظر می رسد. کدها به تصاویر اجازه می دهند تا با توجه به  مقدار درصد عرض پنجره مرورگر مقیاس شوند.

ناوبری در تلفن همراه مهم است. چندین روش معمول برای ساخت منو ها و محتویات وجود دارد. می تواند به شکل یک منوی همبرگری باشد و یا یک منو کشویی ساده  و یا می توانید از زبانه های افقی مانند یوتیوب استفاده کنید.

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

ابزارها و منابع

مرورگر وب سایت : سعی کنید از چند مرورگر برای مشاهده وب سایت استفاده کنید. چند مرورگر مختلف نصب کنید تا طیف خوبی از بازخورد را دریافت کنید. سپس شروع به تغییر اندازه مرورگر کنید.

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

طراحی ریسپانسیو چیست ؟ و چرا به آن نیاز دارید؟

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

توسعه وب سایت های پاسخگو

طراحی وب سایت موبایلی شامل سه اصل برای توسعه است. برای انجام صحیح این موضوع باید موارد زیر رعایت شود:

·         شبکه های روان

·         کوئری های رسانه ای

·         تصاویر و رسانه های انعطاف پذیر

شبکه های روان

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

کوئری های مدیا

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

تصاویر و فیلم های انعطاف پذیر

این ویژگی به شما این امکان را می دهد تا تصاویر و سایر رسانه ها را به صورت متناسب با دستگاه با توجه به ویژگی سرریز CSS استفاده کنید. مقیاس بندی در CSS  بسیار ساده است. حداکثر عنصر را می توان 100% در نظر گرفت. در این صورت بسته به اندازه مرورگر کوچک و بزرگ می شود.

چگونه می توانیم یک وب سایت ریسپانسیو بسازیم؟

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

طراحی وب سایت موبایلی، طراحی کاملا متفاوتی نسبت به طراحی سایت های معمولی دارد و طراحان باید جوانب مثبت و منفی آن را بدانند.

تصاویر در طراحی سایت موبایلی  به صورت هوشمند به متن هستند. این تکینک خاص در واقع به هدف طراحی سایت پاسخگو کمک می کند. زیرا تصاویر در اندازه های مختلف می تواند خود را با این روش مطابقت دهند.

می توانیم در 15 دقیقه یک وب سایت ریسپانسیو بسازیم. در اینجا چگونگی ساخت یک وب سایت ریسپانسیو را آموزش می دهیم . درانتهای آموزش شما خواهید توانست یک وب سایت پاسخگو بسازید. سایتی که شما می سازید با اندازه تمام صفحات نمایش سازگاری خواهد داشت.

صفحه index.html  را باز کنید. ما از تمام عناصر موجود در آن استفاده نمی کنیم.

هدف ما ایجاد وب سایت است که زمینه های اصلی یک وب سایت مانند هدر، بدنه اصلی ، فوتر و سایدبار را دارد. البته همه چیز حتی تصاویر و متن ها  را به صورت ریسپانسیو ایجاد می کنیم.

مرحله 1: پایه

در ابتدا شما باید در مورد ایجاد لایه ها بدانید. کد آن به صورت زیر نوشته می شود.

این کد به این معنا است که در این ردیف مشخص شما 12 ستون را با عرض 1000 پیکسل اشغال می کنید.  در حالی که در کد زیر:

ما دو "شش" ستون را در داخل "دوازده" ستون قرار داده ایم. این به این معناست که شش ستون پنجاه درصد از عرض 12 ستون را اشغال می کند. به همین صورت باقی ستون ها را می توان انجام داد.

مرحله دوم: لایه بندی

ابتدا با استفاده از ویرایشگر متن خود، یک فایل به نام index.html ایجاد کنید. سپس در ابتدای فایل کد زیر را بنویسید.

در این کد ما در واقع می خواهیم که همه چیز ریسپانسیو باشد. سپس کد زیر را اضافه می کنیم . در این کد تعداد سطر ها و ستون ها مشخص می شود.

ما هنوز سبک های استایل شیت خود را اضافه نکرده ایم ولی توانستیم به اهداف خود برسیم.

چهارچوب های ساخت وب سایت های ریسپانسیو

در اینجا می خواهیم در مورد فریم ورک ها و چگونگی استفاده از آنها صحبت کنیم.  به این ترتیب می خواهیم به طراحان کمک کنیم تا منابع و امکانات جدیدی را کشف کنند.

فریم ورک چیست؟

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

در دنیای طراحی وب ، اگر بخواهیم تعریف ساده تر از فریم ورک ها داشته باشیم  می گوئیم:  یک فریم ورک به عنوان یک بسته از ساختار، فایل ها و پوشه کد های استاندارد مانند css  و html و js  و غیره است . که می تواند برای حمایت از توسعه وب سایت ها ، به عنوان پایه ای برای شروع ساختن یک سایت استفاده می شود.

اکثر وب سایت ها یک ساختار مشابه دارند. هدف از فریم ورک ها ارائه یک ساختار مشترک است تا توسعه دهندگان مجبور نباشند از اول دوباره آن را انجام دهند و می توانند از کد های مورد نیاز خود استفاده کنند. چهار چوب ها به ما کمک می کنند تا در زمان خود صرفه جویی کنیم.

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

فریم ورک های ریسپانسیو،  شامل برچسب های CSS  و  HTML هستند . بنابراین ، بهترین انتخاب برای ایجاد طرح های وب سایت های استثنایی هستند. در زیر خلاصه ای از برخی از فریم ورک های ریسپانسیو گفته شده است.

بوت استراپ (bootstrap)

بوت استراپ یکی از پر طرفدار ترین و محبوب ترین فریم ورک های توسعه فایروال  است . در حال حاضر آخرین نسخه بوت استراپ 3 در دسترس است.  بوت استراپ دارای ویژگی های بی نظیر یک سیستم شبکه ساختاری عناصر ناوبری و خیلی چیز های دیگر است. با داشتن این فریم ورک توسعه دهندگان می توانند به راحتی هر نوع وب سایتی را  بدون هیچ گونه تکنیکی ایجاد کنند. همچنین دارای پشتیبانی قوی تلفن همراه است. بنابراین در تلفن های همراه به خوبی دیده می شود.

Foundation

این فریم ورک همچنین به عنوان یکی از فریم ورک های استثنایی است. این چهارچوب فوق العاده ریسپانسیو است.  برای ایجاد طرح های یکپارچه سایت،  برنامه های کاربردی سایت و قالب های تلفن همراه و ایمیل استفاده می شود. این فریم ورک ساده ترین فریم ورک برای یادگیری است و بنابراین می تواند توسط کاربران جدید به راحتی مورد استفاده قرار گیرند. این چهارچوب استثنایی دارای تعدادی از اجزای نمایش پوسته، ناوبری ، رسانه و بسیاری از موارد دیگر است. همچنین دارای لیست استثنایی از افزونه ها است.

Pure

این ماژول دارای مجموعه ای ماژول های css  است که ردپای کوچکی از خود بر جای می گذارد. این چهارچوب برجسته در حال توسعه با تلفن های همراه است. به توسعه دهندگان کمک می کند تا بسته های مورد نیاز را بنویسند. طیف گسترده ای از اجزای css ، نیز با pure  در دسترس هستند. این چهارچوب برجسته نیز قابلیت سفارشی سازی را دارد.

نتیجه گیری

پیدا کردن بهترین چهارچوب برای طراحی سایت شما می تواند یک چالش باشد،  اما زمانی که شما چندین چهارچوب را در دسترس دارید، آنها را تست کنید تا بتوانید یکی از آنها را پیدا کنید که به بهترین نحو برای شما مناسب باشد.

با پیشرفت تکنولوژی، تمام فریم ورک های جدید اغلب پاسخگو هستند. چهارچوب های قدیمی تر از بین خواهند رفت و یا بهبود پیدا خواهند کرد. 

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

چرا سایت واکنش گرا؟
تو این مقاله میخوام دو تا جواب به این سوال بدم. اول، واکنش گرا بودن سایت دیگه داره تبدیل به یکی از استانداردهای سایت ها میشه و یه جورایی واجبه که سایتمون واکنش گرا باشه. هرچند، ریزه کاری های زیادی هست که باید قبلش درباره طراحی واکنش گرا بدونید.

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

طراحی واکنش گرا چطور کار می کند؟
سایت های واکنش گرا با استفاده از CSS تنظیم می کنن که بسته به اندازه صفحه نمایش، کدوم مطالب کجای صفحه نمایش داده بشن. به عبارت دیگه جای مطالب، عکس ها و فهرست های جهت یاب رو تغییر میده تا با تعداد پیکسل های موجود هماهنگ بشن. حتی لوگو و عناصر گرافیکی هم می تونن از صفحه نمایش های معمولی کامپیوتر تا تبلت و موبایل تغییر اندازه بدن.
همونطور که گفتم الآن خیلی از سایت ها واکنش گرا شدند، ولی اگه بخوام براتون یه مثال عالی از سایت های واکنش گرا رو معرفی کنم، میتونید سایت BostonGlobe.com رو ببینید. توسعه دهنده این سایت آقای Ethan Marcotte، همون کسیه که برای اولین بار واژه responsive design یا طراحی واکنش گرا رو بکار برد.
طراحی های واکنش گرا، به جز عکس های با اندازه مشخص، از عکس های تطبیقی هم استفاده می کنن. بنابراین هر وقت با موبایل سایتی رو باز کنید، عکس ها کوچیکتر دیده میشن و اگه همون سایت رو با مرورگر کامپیوتر باز کنید، عکس هارو بزرگتر میبینید. اینطوری عکس ها فضای صفحه نمایش بزرگ کامپیوتر رو بهتر می تونن پر کنن.

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