طراحی سایت ریسپانسیو Responsive Web Design یا این که به فارسی وب سایت واکنشگرا در طراحی سایت در مشهد مورد پیاده سازی یک وبسایت با صفحاتی می باشد که در همه دستگاه ها و نمایشگرها اعم از شیت دسکتاپ، لپ تاپ، تبلت، موبایل های گوشی و حتیدر تلویزیون های هوشمند به درستی اکران داشته باشد.
یک وبسایت با پیاده سازی ریسپانسیو به طور اتوماتیک برای اکران در گونه های دیوایس با هر اندازه ای تهیه و تنظیم می گردد. دراین نوشته ی علمی با ما هم پا باشید تا با تمجید دقیقتر این مفهوم مهم در طراحی وب آشنا گردید و استیناف کنیم چرا داشتن یک سایت واکنشگرا انقدر اساسی میباشد و با طریق های رسیپانسیو کردن وبسایت و آزمایش آن آشنا گردید.
مضمون سایت ریسپانسیو Responsive Design
یکیاز مراحل اساسی در ساخت سایت واکنشگرا بودن آن میباشد. یعنی تمامی المان های HTML یک وب سایت اعم از منو، دکمه ها، متن و تصاویر، فونت، رزولوشن بر طبق برگه اکران دستگاهی که استفاده کننده از آن به کارگیری می نماید به طور خود کار تهیه و تنظیم و تغییر تحول نماید.
فرآیند ریسپانسیو کردن تارنما شامل ترکیبی از شیت بندی و پیکربندی متعدد در CSS وب سایت است که امداد می نماید که صفحه های سایت به صورت خود کار برای تطبیق وضوح، اندازه تصویر، رنگ و حتی جهت آیتم به کار گیری کاربر، تغییر و تحول نماید.
دلیل اهمیت ریسپانسیو بودن وبسایت
میدانید که با ظهور موبایل های هوشمند در اندازه های گوناگون، بیشترین درصد از مخاطبان فضای اینترنت را یوزرها تلفن همراه وگوشی های گوشی تشکیل می دهند. یک وبسایت که صفحات آن به خیر برای اشکال دستگاه های مورد به کار گیری یوزرها باصرفه شدهاست بیشترین معیار از تجربیات کاربری اثر گذار را در چنگ مخاطبان قرار می دهد.
داشتن یک تجربه کاربری برای بقای تجارت و تارنما شما در فضای آنلاین و موتورهای کاوش بسیار مهم میباشد. ممکن است برای شما اتفاق افتاده باشد که وارد یک وبسایت گردیده اید که متن در آن به قدری خرد میباشد که نیاز به زوم و یا این که اسکرول کردن های مکرر داشته اید. همین دشواری در به کار گیری از یک وب سایت سبب گردیده از آن تارنما بیرون گردیده و به سراغ وبسایت دیگری بروید.
به همین ترتیب، داشتن یک سایت واکنشگرا که به خوبی کلاً دستگاه ها اکران داشته باشد و UX موفقی را ایجاد می نماید، ولی که توفیق بیشتری را در سوژه سئو تارنما نیز دستیابی خواهد کرد. چون گوگل ریسپانسیو بودن را یکی از مهمترین موضوعات در الگوریتم های موتور کاوش معرفی نموده است.
آزمایش ریسپانسیو بودن تارنما
ابزارهای بدون پول مختلفی برای آزمایش واکنشگرایی یک وب سایت وجود داراست که میتوانید از آن ها یاری بگیرید که بدانید آیا سایت شما به نه ریسپانسیو شدهاست یا این که نه؟!
یکیاز شایسته ترین و جالب ترین آنها designmodo میباشد که با کلیک برروی آن وارد شیت آن گردیده میتوانید با واردن کردن URL سایت خویش شیوه اکران آن را در گونه های دیوایس با اندازه بر حسب اینچ ببینید.
خصوصیت های سایت ریسپانسیو
برای آنکه یک وبسایت با پیاده سازی ریسپانسیو یا این که واکنشگرا تلقی خواهد شد بایستی دارنده این ۳ خصوصیت و فاکتور باشد.
هر اینترنت سایتی به آسانی ریسپانسیو نمیشود و برای آنکه به نه دراین حوزه با صرفه شود بایستی برروی این ۳ خصوصیت به طور همزمان شغل گردد. این فاکتورها عبارتند از:
گریدهای قابل تغییر
یکی از از مباحث اصلی در پیاده سازی رسیپانسیو تارنما Flexible Grid یا این که کانال سیال است. در این نصیب سعی میشود تا اساس تغییرو تحول بر روی ردیف ها، مسافت ها و کانتینرها با به کار گیری از یکسری ریاضی ها ابتدایی برروی طرح بندی های وب سایت اجرا گردد و خیر برروی پیکسل ها! یعنی اندازه یک ورقه مطابق پیکسل و انتخاب اندازه برای آن محصور نمیشود، بلکه موادسازنده وبسایت نسبت به سایز نمایشگر چیده می گردد.
تصاویر
یک کدام از مهم ترین بخش ها در ساخت سایت واکنشگرا مرتبط با تصاویر میباشد. با دقت به اینکه تصاویر نصیب متعددی از محتوای یک تارنما را تشکیل می دهند اساسی میباشد که به صدق در هر دستگاهی اکران داشته باشد. برای واکنشگرا کردن آن یکسری تکنیک راحت وجود دارااست که ریلکس ترین آن مرتبط با تصاویر سیال با به کارگیری از تعریف حداکثری CSS اندازه تصویر است.
بهاین شکل: img{ max-width: ۱۰۰%; }
دراینصورت هر تصویر در اندازه حداکثر خویش لود میشود، بنابراین تصویر دقیقاً به اندازه نمایشگر نشان داده میشود. در این صورت شما پهنا و یا این که ارتفاعی برای تصویر خویش اعلام نمیکنید و این مرورگر میباشد که اندازه نسبی تصاویر را از CSS به دست میاورد.
ساختار لایه بندی
هنگامی که در دستگاه های متفاوت بعد ها المان ها و یا این که متن و تایپوگرافی دچار تغییرات شدید میباشند با به کارگیری از برخی اوامر می توان آنانرا متعادل نمود. در حالی که لایه بندی ساختار می تواند تغییر و تحول نماید اما مدل آنها اثبات باقی خواهد ماند. یعنی عناصری همانند منو، متن و محتوای صفحه های و ساید توشه و… با پهنا و طول، رنگ دورنما و تایپو گرافی به طور پیش فرض برای اندازه های مخلف تعریفوتمجید گردیده اند و در تغییر و تحول اندازه های شدید به طور خیلی باریک یا این که خیلی عریض به طور متعادل اکران دارند.
این تغییرات با به کارگیری از کدهای CSS و قاب ورک های پیش فرض و یا این که بقیه کد نویسی های سفارشی انجام می گردد. با استفاده ازین فاکتور عناصری همانند منو به طور خودکار از شکل افقی در دسکتاپ به شرایط عمودی در موبایل تغییر و تحول می نمایند و یا این که نصیب ساید توشه که در ورژن دسکتاپ در گوشه ها میباشد در ورژن موبایل به نصیب انتهای صفحه خواهند رفت.
طرز ریسپانسیو کردن وب سایت
در حالتی که وب سایت شما براساس سیستم رئیس محتوا مانند ورد پرس، جوملا، دروپال و… باشد، برای پیاده سازی صفحه های خویش قطعاً از شیت سازهایی مانند المنتور، ویژوآل کامپوزر و… به کارگیری نموده اید. این صفحه سازها به شما این قابلیت و امکان را می دهند تا در هنگام صفحه آرایی به طور زنده ورقه را در سه شرایط دسکتاپ، موبایل و تبلت مشاهده کنید. و درصورتی که در هر مورد از دستگاه ها مشکلی از بابت ریسپانسیو داشته باشد می توانید با تغییر تحول بعد ها در به عبارتی دستگاه این نقص را برطرف کرده به گونه ای که در دستگاه دیگر تأثیر نگذارد.
ولی در شرایطیکه تارنما شما بر اساس گویش های نرم افزار نویسی مانند php، asp.net باشد برای ریسپانسیو کردن آن می بایست از کدهای CSS مانند Media Query بهره برد. این کدها نوع دستگاه کاربر را تشخیص داده و بر اساس پهنا آن برگه را به به عبارتی اندازه اکران میدهد. شایسته ترین ابزار برای ریسپانسیو کردن این وب سایت ها به کار گیری از کادر ورک های CSS مانند Bootstrap و یا این که فریم ورک tailwind میباشد.
یک وبسایت با پیاده سازی ریسپانسیو به طور اتوماتیک برای اکران در گونه های دیوایس با هر اندازه ای تهیه و تنظیم می گردد. دراین نوشته ی علمی با ما هم پا باشید تا با تمجید دقیقتر این مفهوم مهم در طراحی وب آشنا گردید و استیناف کنیم چرا داشتن یک سایت واکنشگرا انقدر اساسی میباشد و با طریق های رسیپانسیو کردن وبسایت و آزمایش آن آشنا گردید.
مضمون سایت ریسپانسیو Responsive Design
یکیاز مراحل اساسی در ساخت سایت واکنشگرا بودن آن میباشد. یعنی تمامی المان های HTML یک وب سایت اعم از منو، دکمه ها، متن و تصاویر، فونت، رزولوشن بر طبق برگه اکران دستگاهی که استفاده کننده از آن به کارگیری می نماید به طور خود کار تهیه و تنظیم و تغییر تحول نماید.
فرآیند ریسپانسیو کردن تارنما شامل ترکیبی از شیت بندی و پیکربندی متعدد در CSS وب سایت است که امداد می نماید که صفحه های سایت به صورت خود کار برای تطبیق وضوح، اندازه تصویر، رنگ و حتی جهت آیتم به کار گیری کاربر، تغییر و تحول نماید.
دلیل اهمیت ریسپانسیو بودن وبسایت
میدانید که با ظهور موبایل های هوشمند در اندازه های گوناگون، بیشترین درصد از مخاطبان فضای اینترنت را یوزرها تلفن همراه وگوشی های گوشی تشکیل می دهند. یک وبسایت که صفحات آن به خیر برای اشکال دستگاه های مورد به کار گیری یوزرها باصرفه شدهاست بیشترین معیار از تجربیات کاربری اثر گذار را در چنگ مخاطبان قرار می دهد.
داشتن یک تجربه کاربری برای بقای تجارت و تارنما شما در فضای آنلاین و موتورهای کاوش بسیار مهم میباشد. ممکن است برای شما اتفاق افتاده باشد که وارد یک وبسایت گردیده اید که متن در آن به قدری خرد میباشد که نیاز به زوم و یا این که اسکرول کردن های مکرر داشته اید. همین دشواری در به کار گیری از یک وب سایت سبب گردیده از آن تارنما بیرون گردیده و به سراغ وبسایت دیگری بروید.
به همین ترتیب، داشتن یک سایت واکنشگرا که به خوبی کلاً دستگاه ها اکران داشته باشد و UX موفقی را ایجاد می نماید، ولی که توفیق بیشتری را در سوژه سئو تارنما نیز دستیابی خواهد کرد. چون گوگل ریسپانسیو بودن را یکی از مهمترین موضوعات در الگوریتم های موتور کاوش معرفی نموده است.
آزمایش ریسپانسیو بودن تارنما
ابزارهای بدون پول مختلفی برای آزمایش واکنشگرایی یک وب سایت وجود داراست که میتوانید از آن ها یاری بگیرید که بدانید آیا سایت شما به نه ریسپانسیو شدهاست یا این که نه؟!
یکیاز شایسته ترین و جالب ترین آنها designmodo میباشد که با کلیک برروی آن وارد شیت آن گردیده میتوانید با واردن کردن URL سایت خویش شیوه اکران آن را در گونه های دیوایس با اندازه بر حسب اینچ ببینید.
خصوصیت های سایت ریسپانسیو
برای آنکه یک وبسایت با پیاده سازی ریسپانسیو یا این که واکنشگرا تلقی خواهد شد بایستی دارنده این ۳ خصوصیت و فاکتور باشد.
هر اینترنت سایتی به آسانی ریسپانسیو نمیشود و برای آنکه به نه دراین حوزه با صرفه شود بایستی برروی این ۳ خصوصیت به طور همزمان شغل گردد. این فاکتورها عبارتند از:
گریدهای قابل تغییر
یکی از از مباحث اصلی در پیاده سازی رسیپانسیو تارنما Flexible Grid یا این که کانال سیال است. در این نصیب سعی میشود تا اساس تغییرو تحول بر روی ردیف ها، مسافت ها و کانتینرها با به کار گیری از یکسری ریاضی ها ابتدایی برروی طرح بندی های وب سایت اجرا گردد و خیر برروی پیکسل ها! یعنی اندازه یک ورقه مطابق پیکسل و انتخاب اندازه برای آن محصور نمیشود، بلکه موادسازنده وبسایت نسبت به سایز نمایشگر چیده می گردد.
تصاویر
یک کدام از مهم ترین بخش ها در ساخت سایت واکنشگرا مرتبط با تصاویر میباشد. با دقت به اینکه تصاویر نصیب متعددی از محتوای یک تارنما را تشکیل می دهند اساسی میباشد که به صدق در هر دستگاهی اکران داشته باشد. برای واکنشگرا کردن آن یکسری تکنیک راحت وجود دارااست که ریلکس ترین آن مرتبط با تصاویر سیال با به کارگیری از تعریف حداکثری CSS اندازه تصویر است.
بهاین شکل: img{ max-width: ۱۰۰%; }
دراینصورت هر تصویر در اندازه حداکثر خویش لود میشود، بنابراین تصویر دقیقاً به اندازه نمایشگر نشان داده میشود. در این صورت شما پهنا و یا این که ارتفاعی برای تصویر خویش اعلام نمیکنید و این مرورگر میباشد که اندازه نسبی تصاویر را از CSS به دست میاورد.
ساختار لایه بندی
هنگامی که در دستگاه های متفاوت بعد ها المان ها و یا این که متن و تایپوگرافی دچار تغییرات شدید میباشند با به کارگیری از برخی اوامر می توان آنانرا متعادل نمود. در حالی که لایه بندی ساختار می تواند تغییر و تحول نماید اما مدل آنها اثبات باقی خواهد ماند. یعنی عناصری همانند منو، متن و محتوای صفحه های و ساید توشه و… با پهنا و طول، رنگ دورنما و تایپو گرافی به طور پیش فرض برای اندازه های مخلف تعریفوتمجید گردیده اند و در تغییر و تحول اندازه های شدید به طور خیلی باریک یا این که خیلی عریض به طور متعادل اکران دارند.
این تغییرات با به کارگیری از کدهای CSS و قاب ورک های پیش فرض و یا این که بقیه کد نویسی های سفارشی انجام می گردد. با استفاده ازین فاکتور عناصری همانند منو به طور خودکار از شکل افقی در دسکتاپ به شرایط عمودی در موبایل تغییر و تحول می نمایند و یا این که نصیب ساید توشه که در ورژن دسکتاپ در گوشه ها میباشد در ورژن موبایل به نصیب انتهای صفحه خواهند رفت.
طرز ریسپانسیو کردن وب سایت
در حالتی که وب سایت شما براساس سیستم رئیس محتوا مانند ورد پرس، جوملا، دروپال و… باشد، برای پیاده سازی صفحه های خویش قطعاً از شیت سازهایی مانند المنتور، ویژوآل کامپوزر و… به کارگیری نموده اید. این صفحه سازها به شما این قابلیت و امکان را می دهند تا در هنگام صفحه آرایی به طور زنده ورقه را در سه شرایط دسکتاپ، موبایل و تبلت مشاهده کنید. و درصورتی که در هر مورد از دستگاه ها مشکلی از بابت ریسپانسیو داشته باشد می توانید با تغییر تحول بعد ها در به عبارتی دستگاه این نقص را برطرف کرده به گونه ای که در دستگاه دیگر تأثیر نگذارد.
ولی در شرایطیکه تارنما شما بر اساس گویش های نرم افزار نویسی مانند php، asp.net باشد برای ریسپانسیو کردن آن می بایست از کدهای CSS مانند Media Query بهره برد. این کدها نوع دستگاه کاربر را تشخیص داده و بر اساس پهنا آن برگه را به به عبارتی اندازه اکران میدهد. شایسته ترین ابزار برای ریسپانسیو کردن این وب سایت ها به کار گیری از کادر ورک های CSS مانند Bootstrap و یا این که فریم ورک tailwind میباشد.
- چهارشنبه ۱۰ بهمن ۰۳ ۱۴:۰۹
- ۲۲ بازديد
- ۰ نظر