اصول طراحی سایت ریسپانسیو

تعداد گوشی های در دست مردم روز به روز در حال افزایش است. بر اساس آمارها، بیش از 90 درصد از بزرگسالان حداقل یک گوشی همراه دارند و این در حالی است که 50 درصد از کاربران گوشی های هوشمند اعتراف کرده اند که نمی توانند بدون گوشی های خود حتی یک روز زندگی کنند.

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

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

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

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

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

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

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

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

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

طراحی سایت ریسپانسیو چیست؟

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

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

چه این دستگاه ها یک گوشی قدیمی با صفحه نمایشی به پهنای 320 پیکسل باشند و یا یک فبلت (Phablet) مدرن با صفحه نمایشی با عرض 7 اینچ، یک آی پد بزرگ، و یا یک تلویزیون 64 اینچی بزرگ فرقی نخواهد کرد و مطالب، طراحی ها و به ویژه کارایی های سایت باید به طرز صحیحی بر روی تمام این دستگاه ها کار کند تا رضایت تمام کاربران در سطح بالایی فراهم شود.

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

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

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

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

در سال های دهه 90 شمسی، طراح سایتی به نام اتان مارکوت (Ethan Marcotte) روشی را به نام طراحی ریسپانسیو پیشنهاد داد که به سرعت جایگزینی برای روش های مرسوم طراحی سایت در آن زمان شد (در آن زمان نسخه های مختلفی از یک سایت را برای محدوده های وسیعی از عرض های صفحه نمایش طراحی می کردند).

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

امروزه این تکنیک تنها روش ثابت شده برای ساخت یک سایت اینترنتی ریسپانسیو است.

با ما همراه باشید تا قدری آن را بررسی کنیم.

مزایای طراحی سایت ریسپانسیو

مزیت اصلی استفاده از یک سایت ریسپانسیو به شرح زیر است:

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

اگرچه طراحی ریسپانسیو بدون عیب نیست ولی مزایای آن به راحتی بر معایبش غالب است. ریسپانسیو معایبی هم می تواند داشته باشد به عنوان مثال:

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

در هر صورت مزایای استفاده از سایت ریسپانسیو به معایب آن غالب است در نتیجه امروزه ریسپانسیو استانداردی برای وب سایت هاست.

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

چرا طراحی سایت ریسپانسیو این قدر اهمیت دارد؟

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

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

شما نمی توانید چنین نیازها و ضرورت هایی را نادیده بگیرید چرا که اعداد دروغ نمی گویند: بر اساس آخرین مطالعات:

• بیش از 80 درصد از کاربرانی که در اینترنت گشت و گذار می کنند از دستگاه های موبایل استفاده می کنند (آمار سال 1397)
  
  
• بیش از 60 درصد از بازدیدها به سایت از سمت گوگل از طریق موبایل های همراه است.
  
  
• گوشی های همراه بیش از 50 درصد از ترافیک کل سایت ها در جهان را تشکیل می دهند.

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

اجازه دهید به برخی از دلایلی که بر اهمیت طراحی سایت ریسپانسیو اشاره دارند نگاهی گذرا داشته باشیم:

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

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

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

اصول اساسی طراحی سایت ریسپانسیو

برای آنکه طراحی ریسپانسیو را بهتر درک کنید ابتدا باید خود را با مفاهیم اساسی و مبانی آن آشنا کنید.

در نتیجه اولین چیز آن است که بفهمیم یک سایت ریسپانسیو چگونه کار می کند.

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

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

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

همه چیز به صورت خودکار روی کامپیوتر یا دستگاه کاربر صورت خواهد گرفت.

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

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

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

• چارچوبی انعطاف پذیر
• تصاویری انعطاف پذیر
• آگاهی از محیط

ما یک ویژگی دیگر را نیز اضافه می کنیم: تایپوگرافی ریسپانسیو. چرا که مطالب پادشاهان دنیای اینترنتی هستند که نیازمند توجه ویژه به آن ها هستند.

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

این سه ویژگی شاکله اصلی یک طراحی سایت واکنش گرا یا ریسپانسیو را تشکیل می دهد.

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

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

در نتیجه این چهار ویژگی برای اطمینان از حصول یک طراحی ریسپانسیو ضروری هستند.

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

چارچوب انعطاف پذیر

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

بسیار مهم است تا ایدئولوژی پشت ساختارهای مشبک انعطاف پذیر (flexible grid) را درک کنید که می گوید شما نیاز دارید در زمانی که محتوای شما بد نمایش داده می شود آن را در نقطه شکست (breakpoint) قرار دهید به جای آنکه استایل هایی را برای کلیه سایزهای صفحه نمایش بنویسید.

دو راه کلی برای پیاده سازی این قاعده وجود دارد.

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

عرض طراحی شده / عرض صفحه نمایش کاربر = نسبت بزرگنمایی

در نتیجه امروزه توسعه دهندگان سایت ها ترجیح می دهند تا از تکنولوژی های مدرنی استفاده کنند که راه حل های تمیزتر و دقیق تری را ارائه می دهد راه حل هایی نظیر چیدمان های چند ستونی، مستعطیل های انعطاف پذیر (Flexbox) و یا گریدها.

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

نکته آخر

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

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

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

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

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

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

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

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

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

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

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

استفاده از چند نسخه یک عکس

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

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

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

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

استفاده از max-width در css

دومین روش توسط اتان مارکوت پیشنهاد شد و در جامعه طراحان در اوایل دهه 2010 از آن استقبال زیادی شد. این روش از max-width به بهترین نحو استفاده می کند. ایده پشت آن این بود که شما تصاویر را با بالاترین سایز ممکن تهیه می کنید و اجازه می دهید تا مرورگر تصاویر و عکس های شما را بر اساس استایل ها و css های به کار رفته ریسایز کند.

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

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

در صورتیکه سایز تصاویر بزرگ باشد و آنها را برای نمایش تصاویر در دستگاه هایی با سایز بزرگ لازم داشته باشید اما تبدیل این تصاویر به سایز کوچک برای نمایش در دستگاه های کوچک و گوشی های همراه ممکن است زمان های اضافه ای را بگیرد.

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

در هر حال علیرغم این دو ایراد اساسی، اما این روش انتخاب مرسومی است که کاملا قابل اتکا و اطمینان است.

تصاویر ریسپانسیو

سومین روش اشاره ای به محدودیت تصاویر ریسپانسیو دارد. این تکنولوژی سالیان سال همراه ما بود. در نتیجه راه های مختلف زیادی برای پیاده سازی آن وجود دارد:

• بسته به سایز viewport یا dpi صفحه نمایش، شما می توانید از تصویر مناسب با آن شرایط که به خوبی بهینه سازی شده است استفاده کنید و آن را به کاربران خود نمایش دهید و این کار را با استفاده از srcset در تگ img انجام خواهید داد.
  
  
• بسته به عرض صفحه نمایش دستگاه، شما می توانید از یک عکس با برش های مختلفی استفاده کنید و تمرکز خود را بر روی بخش مهم تصویر قرار دهید و آن را با ویژگی capture معرفی کنید.
  
  
• استفاده از تابع جاوا اسکریپت image() که به شما این اجازه را خواهد داد تا تصویر را برای سایزهای مختلف صفحه نمایش برش یا ریسایز دهید.

SVG

چهارمین روش استفاده از SVG است. اگرچه این فایل ها با عکاسی تولید نمی شوند ولی در هر صورت می توانید از مزیت های گرافیکی چنین تکنولوژی های که شامل فایل های ایلوستریتورها، آیکون ها و لوگوتایپ ها می شوند بهره مند شوید.

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

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

نکته آخر

وقتی صحبت از انعطاف پذیری تصاویر به میان می آید یک نکته مهم وجود دارد که باید به آن توجه داشته باشید: راهی را برای کاهش حجم تصاویر پیدا کنید به طوریکه کیفیت تصویر نیز حفظ شود.

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

مهمتر از همه این ها شما لازم است تا تفاوت میان رزولوشن css و رزولوشن صفحه نمایش را در نظر بگیرید. این رزولوشن صفحه نمایش بر روی صفحه نمایش تمام گوشی ها و حتی برخی از دسکتاپ ها وجود دارد.

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

این ممکن است باعث شود سرعت لود پایین آید و پروژه شما برای کاربران بلا استفاده شود. به این مشکل، مشکل سرعت پایین اینترنت گوشی ها را نیز اضافه کنید و در پایان ممکن است پروژه ای در دست تان مانده باشد که کاربران آن مایوس و مبهوت مانده اند تا یک تصویر لود شود.

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

آگاهی از محیط (media query)

سومین جزء یک سایت ریسپانسیو، آگاهی از محیط است.

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

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

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

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

نکته آخر

به یک نکته توجه کنید. اگرچه مرورگرها به صورت وسیعی از media query ها پشتیبانی می کنند اما مرورگرهای برخی از کاربران ممکن است قدیمی یا آپدیت نشده باشند. برای حل این مشکل، شما می توانید از کتابخانه جاوا اسکریپت css3-mediaqueries.js استفاده کنید که به مرورگرها کمک خواهد کرد تا چنین ویژگی هایی را پشتیبانی کنند.

تایپوگرافی ریسپانسیو

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

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

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

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

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

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

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

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

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

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

چند راه حل مختلف برای انجام این کار وجود دارد که شما می توانید آن ها را برای پروژه های خود امتحان کنید و بهترین آن ها را استفاده و انتخاب نمایید. با ما همراه باشید تا برخی از راه حل های مرسوم را بررسی نماییم.

روش های ایجاد تایپوگرافی ریسپانسیو

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

با استفاده از فرمول های ریاضی ساده نظیر معادلات خطی و نیز استفاده از تابع calc() در css، شما به سادگی می توانید فرمولی را برای سایز فونت ها نوشته و اطمینان حاصل کنید که این فرمول به صورت نرمی با تغییر سایز صفحه نمایش، به آرامی اندازه فونت ها را تغییر خواهد داد.

در صورتیکه با sass آشنایی دارید می توانید این پروسه را با نوشتن یک تکه کد، اتوماتیک و خودکار کنید.

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

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

این دو ویژگی واحدهای viewport و تابع calc() هر دو با احتمال زیادی توسط بسیاری از مرورگرهای مدرن پشتیبانی می شوند اما در هر صورت عاری از خطا نیستند و مرورگرهای وجود دارند که از آنها پشتیبانی نمی کنند.

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

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

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

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

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

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

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

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

فرق بین طراحی ریسپانسیو با طراحی موبایل فرندلی

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

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

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

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

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

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

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

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

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

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

چطور یک سایت ریسپانسیو طراحی کنیم؟ 3 روش معروف

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

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

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

استفاده از سایت سازهای ریسپانسیو

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

برخی از سایت سازها به طور ویژه بر روی رفتار ریسپانسیو سایت تمرکز دارند در حالی که برخی دیگر از آنها موبایل فرندلی بودن را هدف قرار داده اند که ابزارهایی را به کاربران ارائه می دهند که توسط آنها می توانید یک سایت بهینه برای دستگاه های موبایل را طراحی کنید.

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

استفاده از سیستم های گرید

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

این گریدها از قبل همه آنچه را که شما نیاز دارید در خود دارند: مخزن ها یا کانتینرها، ستون ها، سطرها، و کلاس های css برای ترتیب، تنظیم و ابعاد اندازه ها، و همچنین برخی از استایل های پایه ای برای سایزهای مختلف صفحه نمایش با کمک media query ها و تعریف نقاط مشخصی از سایز صفحات نمایش. به عنوان یک قاعده، توسعه دهندگان وب از گریدها به عنوان پایه ای محکم برای ساخت سایت استفاده می کنند.

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

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

همچنین بوت استرپ کتابخانه ای مفید و ابزارهایی را ارائه می دهد که کدنویسی را راحت تر و لذت بخش تر خواهد کرد.

استفاده از CMS های مدیریت محتوا

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

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

روش های عملی برای طراحی ریسپانسیو

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

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

• ابتدا نسخه موبایل را طراحی کنید و سپس از روی آن به نسخه دسکتاپ سایت خود برسید. بر طبق آمارها، استفاده از موبایل برای مشاهده وب سایت ها شایع تر از استفاده از دسکتاپ است. در نتیجه احتمال زیادتری وجود دارد که کاربران سایت شما از گوشی های هوشمند برای مشاهده سایت شما استفاده کنند. به نسخه موبایل اولویت بیشتری دهید و از آن به عنوان پایه های ساخت نسخه دسکتاپ سایت خود استفاده کنید. بعلاوه در دنیای طراحی وب، بزرگ کردن یک سایت خیلی راحت تر از کوچک کردن آن است.
  
  
• رزولوشن های معروف را بشناسید. بر طبق آمار GlobalStats، تقریبا 25 درصد از کاربران سایت از گوشی هایی با عرض صفحه نمایش 360 پیکسل استفاده می کنند و تنها 12 درصد از آنها از لپ تاپ ها با استاندارد 1366 پیکسل در عرض صفحه نمایش استفاده می کنند. این نکته را نیز در نظر داشته باشید برای ابعاد هیچ اندازه استانداردی وجود ندارد. و شما می بایست این استاندارد را برای سایت خود از طریق اطلاعات آماری نظیر گوگل آنالیتیکس بیابید.
  
  
• به رزولوشن هایی که بیشترین بازدید را از سایت شما کرده اند بهای ویژه دهید تا رضایت کاربران سایت خود را حتی در زمانی که سهمتان از بازار کم شده است افزایش دهید.
  
  
• درصد استفاده کاربران سایت خود را برای هر مرورگر بدانید. طراحی ریسپانسیو حول محور نمایش صحیح سایت بر روی دستگاه های مختلف با توانایی های سخت افزاری مختلف می چرخد. تجربه کار کردن صحیح با سایت شما با مرورگرهای مختلف توسط کاربران، بر قدرت برند شما خواهد افزود و ایراد در آن، به شدت به برند شما آسیب خواهد زد. حقیقت تلخ این است که دنیای وب کامل نیست و هنوز مرورگرهایی هستند که حتی معروف ترین ویژگی های css را نیز پشتیبانی نمی کنند چه برسد به ویژگی هایی نظیر calc() یا پشتیبانی از Flexbox. در این شرایط شما نمی توانید کورکورانه تنها راه حل های خود را پیاده سازی کنید. شما نیاز است تا سایت تان را بر روی مرورگرهای کاربران تان تست کنید. ضمنا در شرایطی که می خواهید مخاطبان سایت خود را گسترش دهید شدیدا توصیه می کنیم تا مرورگرهای مدرن را فراموش کنید و به نسخه های ابتدایی مرورگرها برای تست اکتفا کنید. البته این برای شرایطی خاص است و شما باید با توجه به آمارگیر سایت خود، تصمیم بگیرید چه مرورگر و نسخه هایی را برای کمترین پشتیبانی انتخاب کنید.
  
  
• تفاوت فیزیکی استفاده از سایت در صفحات کوچک و بزرگ را در نظر داشته باشید. دنیای موبایل حول محور لمس با انگشتان می چرخد. حداقل باید موارد زیر را در نظر داشته باشید:
  
  
  • کلیدها باید بزرگ طراحی شوند
    
    
    
  • لینک ها باید به راحتی قابل کلیک باشند
    
    
  • اسلایدرها باید توسط حرکت انگشتان قابل حرکت باشد
    
    
  • اجزای تعاملی، جزییات کلیدی، و منوها باید به اندازه یک انگشت از یکدیگر فاصله داشته باشند
    
    
  • منوها باید در قسمت فوتر سایت نیز باشند
    
    
  • جستجو باید ریسپانسیو باشد
    
    
  • انگشت ها نباید جلوی نمایش محتوای سایت را در زمانی که قصد دارید منویی را باز کنید بگیرد
    
    
  • بخش نمایش محتوا باید به اندازه ای بزرگ باشد که با انگشتان دست بتوان با اجزای داخل آن تعامل داشت.
    
    
• وسواس زیاد روی الگوی خواندن مطالب توسط کاربران که به الگوی F معروف است نداشته باشید. در حالی که نسخه های دسکتاپ این قاعده ممکن است صحیح باشد و کاربران، صفحات سایت شما را همانند شکل F بخوانند اما در موبایل و با کوچک شدن سایز صفحه نمایش، این قاعده بی اساس خواهد شد. به عنوان یک قاعده کلی، کاربران موبایل اولین جایی را که نگاه می کنند وسط صفحه نمایش است. این مکان همچنین راحت ترین جا برای دسترسی و لمس آنهاست. در نتیجه بهترین مکان برای قرار دادن اطلاعات مهم وسط صفحه نمایش است. اما برای تبلت ها و دستگاه هایی با سایز متوسط، وسط صفحه نمایش برای دسترسی راحت نیست. در این گونه دستگاه ها نیاز است تا منوها و جزییات حساس خود را به کناره های صفحه نمایش منتقل کنید.
  
  
• اطمینان حاصل کنید که سایت شما در کلیه نقاط عطف سایز صفحه نمایش به خوبی کار می کند. به یاد داشته باشید که همه کاربران در هنگام مشاهده سایت شما، مرورگر خود را ماکسیمایز نکرده اند و ممکن است از سایزهای میانی کوچکتر برای مشاهده سایت شما استفاده کنند. واسط کاربری شما باید آماده چنین شرایطی باشد. چیدمان های سایت شما باید به طور طبیعی سایزهای مختلف صفحه نمایش را پشتیبانی کنند.
  
  
• یادتان نرود سایت خود را در حالت افقی صفحه نمایش برای کاربران موبایل و تبلت تست کنید چرا که بسیاری از کاربران سایت شما را در این شرایط مشاهده و مطالعه خواهند کرد.
  
  
• از بمباران کاربران با مطالب خود در صفحات نمایش کوچک پرهیز کنید. موارد غیر ضروری را حذف کنید و تمرکز خود را روی اطلاعات اصلی و حیاتی بگذارید. در این شرایط، کلیه محتوای سایت را به کاربر نمایش ندهید و تنها اطلاعات مهم را نمایش دهید چرا که در این صورت کاربر روی صفحات نمایش کوچک با صفحه ای بسیار بلند مواجه خواهد شد که شاید چندین دقیقه برای اسکرول کامل نیاز به زمان داشته باشد. بر طبق آمار، کاربران موبایل بیشترین آمادگی را برای پاسخ های سریع دارند. و این پاسخ ها اولینش ترک سایت شماست. آنها باید اطلاعات مورد نیاز خود را در کمترین زمان ممکن پیدا کنند در غیر این صورت سایت شما را ترک خواهند کرد. در نتیجه تنها اطلاعاتی را به آنها نمایش دهید که برای آن روی سایت شما آمده اند و سپس به آنها آزادی عمل برای گشت و گذار در سایت دهید.
  
  
• بر گذشته حسرت نخورید بلکه هدف تان آینده باشد. تمایلات به وجود آمده را در بازار رصد کنید. برخی اوقات راه حل های مدرن ممکن است برای نیازهای فعلی بیشترین مناسبت را داشته باشند تا راه حل های قدیمی و آزمایش شده در طول زمان. به عنوان مثال امروزه شدیدا توصیه می شود تا از SVG در گرافیک سایت خود استفاده کند. اگرچه شما می توانید از مزایای تصاویر ریسپانسیو بهره مند شوید ولی می توانید از تصاویر وکتوری نظیر SVG که به خوبی با هر ابعاد صفحه نمایشی کار خواهند کرد نیز در سایت خود استفاده کند. ضمن آنکه SVG ها غالبا حجم به مراتب کمتری را نسبت به روش های سنتی دارند. از ویژگی های استفاده از SVG ها به جای تصاویر، می توان به افزایش سرعت لود سایت و نیز افزایش کیفیت نمایش تصاویر در هر ابعاد و اندازه ای اشاره کرد.

5 ابزار برتر برای آزمایش طراحی سایت ریسپانسیو

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

این ابزارها به شما کمک خواهند کرد تا نقاط عطف یا breakpoint را در استایل های css خود تعریف کنید. همچنین این ابزارها به شما کمک خواهند تا بفهمید کدام المان و اجزا نیاز به تغییرات دارد و چه عناصری روی سایت در بهترین حالت خود هستند.

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

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

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

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

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

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

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

تنها کافی است تا سایت تان را در بخش URL نوشته و منتظر بمانید تا صفحات رندر شوند. سپس ابزار، سایت شما را در دستگاه های مختلف نمایش خواهد داد.

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

ابزار بعدی "Am I Responsive?" شاید یکی از قدیمی ترین ابزارها برای تست سایت خود برای گوشی های موبایل باشد. برخلاف دیگر ابزارهایی که اینجا معرفی شد، این ابزار تنها یک پاسخ استاتیک به این پرسش شما خواهد داد که آیا سایت من ریسپانسیو است؟ تمام کاری که این سایت انجام می دهد این است که سایت شما را بر روی چهار پلتفرم معروف موبایل نمایش می دهد: نسخه دسکتاپ، لپتاپ، تبلت (مد پورتره) و نسخه موبایل.

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

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

ابزار دیگر Responsive testing است ابزاری رایگان از سوی شرکت BrowserStack که سایت شما را بر روی سیستم عامل های مختلفی نظیر iOS و اندروید برای دستگاه هایی نظیر تبلت، گوشی های هوشمند، لپ تاپ ها، iphoneX, Galaxy S9 Plus, iPad Mini, iPad Pro, MacOSX و حتی Kindle نمایش می دهد.

این ابزار، ابزار خوبی برای صحت کارکرد سایت تان در دستگاه های مختلف و به ویژه iOS می باشد.