آموزش طراحی سایت – طراحی واکنش گرا – قسمت اول

توسط ۱۳۹۴/۰۷/۲۶ آموزش طراحی سایت 18 نظر

مفاهیم و فواید طراحی سایت واکنش گرا (Responsive)

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

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

تفاوت Responsive design و نسخه موبایل

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

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

نگاهی به آینده در طراحی سایت

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

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

تاثیر Responsive design بر سئو

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

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

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

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

به این بحث بپیوندید / 18 نظر

  • محسن می‌گه:

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

  • admin می‌گه:

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

  • ای تی ایران می‌گه:

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

  • هادی می‌گه:

    سلام
    من چنددرصد از درآمدم را باید برای رونق کسب و کارم در زمینه طراحی سایت هزینه کنم

  • admin می‌گه:

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

  • سارا می‌گه:

    بسیار مفید و عالی بود. ممنون

  • سمیه می‌گه:

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

  • سینا می‌گه:

    لطفا مطالب کلی هم در مورد طراحی سایت بذارید.
    مثلا برای سبک شدن سایت، یا اصول طراحی سایت که به سئو کمک میکنن مثل همین ریسپانسیو بودن.
    ممنون

  • طراحی سایت 123 می‌گه:

    به نظر شما برای کسی که در طراحی سایت کار کرده است برای اندروید نویسی چ مدت زمان نیاز است
    ممنون از سایت خوبتون

  • admin می‌گه:

    سلام و با احترام
    منظورتونو دقیقا متوجه نشدم

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

  • چكامه می‌گه:

    سلام
    لطفا به غیر از مورد طراحی سایت به صورت ریسپانسیو موارد دیگه ای که در زمان طراحی سایت روی سئو شدن تاثیر داره رو هم بگید
    ممنون

  • بهنام می‌گه:

    سلام در طراحی سایت و اموزش طراحی سایت چطور میتونیم زود پیشرفت کنیم و یاد بگیریم

  • شادی می‌گه:

    ممنون از مطالب اموزندتون لطفا مطالب جدید هم بزارین

  • admin می‌گه:

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

  • اکبر می‌گه:

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

  • کریمی می‌گه:

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

  • admin می‌گه:

    سلام
    پیشنهاد شما به واحد تولید محتوای آموزش انتقال داده می شود.

  • فهیمه می‌گه:

    سلام میشه نمونه هایی به عنوان دمو در سایت قرار بدهید

نظر خود را بیان کنید