در صورت داشتن حساب کاربری لطفا از اینجا وارد شوید
ورود پرتال کاربران ایجاد حساب کاربری جدید کلمه عبورم را فراموش کرده امدرصورت وارد کردن شماره تلفن، همکاران ما در بخش مشاوران فروش با شما تماس خواهند گرفت.
ساعته حتی در ایام تعطیل در کنار شما خواهیم بود
در حال بررسی ...
اطلاعات دامنه
کپی کردن اطلاعات در حافظه
طراحی وب سایت واکنش گرا یا RWD یک استراتژی طراحی صفحات وب است که هدف آن سازگاری و نمایش مناسب صفحات وب در دستگاه های مختلف همچون تلفن همراه، تبلت و دسکتاپ و مرورگرهای مختلف است.
طراحی ریسپانسیو یکی از فاکتوهای مهم برای کسب رتبه بهتر در موتورهای جستجو همچون گوگل است.
درصورتیکه بازدیدکنندگان سایت از طریق گوشی موبایل به وب سایت شما مراجعه نمایند و با ظاهر نامناسب مواجه شوند، قطعاً وب سایت شما را ترک خواهند کرد.
در این مقاله راهکارهای رایج برای طراحی صفحات ریسپانسیو بررسی شده اند.
متا تگ viewport دستورالعمل هایی را در مورد نحوه کنترل ابعاد صفحه به مرورگر می دهد.
هنگامی که متا تگ viewport وجود ندارد، مرورگرهای تلفن همراه، صفحات وب را با تنظیمات پیش فرض دسکتاپ نمایش می دهند.
اگر در طراحی ریسپانسیو صفحات وب تازه کارهستید، اولین و مهمترین قدم، یادگیری Media Query ها در css است. Media Query ها امکان استایل دهی به المان ها براساس عرض صفحه نمایش را فراهم می سازند.
یکی از استراتژی های رایج CSS این است که ابتدا استایل های مربوط به تلفن همراه را بنویسید.
Media Query ها بخش مهمی از طراحی وب واکنش گرا هستند که معمولاً برای grid layout ها، اندازه فونت، margin ها و padding هایی که بین صفحات با اندازه های مختلف و جهت های مختلف متفاوت است، استفاده می شود.
در مثال زیر عرض ستون برای دستگاه های کوچکتر 100٪ است، اما در دستگاه های با عرض بزرگتر از 600px پنجاه درصد است.
شاید برای شما این سوال پیش آمده باشد که Flexbox چه کاری انجام می دهد؟
فلکس باکس، ساده ترین راه برای ایجاد مرکزیت عمودی با CSS و یا ایجاد طرح بندی شبکه ای یا grid layout است. فلکس باکس راهکاری مؤثر برای چیدمان، تراز کردن و توزیع فضا بین آیتم های یک container است.
برای استفاده از Flexbox، ابتدا یک conatainer برای فلکس تعریف می کنیم و استایل display:flex را به آن می دهیم.
در مثال زیر، از ترکیب فلکس باکس با media Query برای ایجاد یک طراحی ریسپانسیو استفاده شده است.
flex-wrap: این ویژگی مشخص می کند که آیتم های موجود در فلکس باکس باید در یک ردیف و یا زیر هم قرار بگیرند.
flex-basis: اندازه آیتم های فلکس باکس را نشان می دهد.
justify-content: هنگامیکه آیتم های فلکس باکس از همه فضای موجود استفاده نکنند؛ این ویژگی محل قرار گرفتن آیتم ها در محور افقی را مشخص می کند.
تصویر اول خروجی کد بالا در گوشی موبایل و تصویر دوم خروجی این کد در دسکتاپ را نشان می دهد.
ویژگی overflow:scroll مشخص می کند که در صورت سرریز محتوا، یک نوار پیمایش یا اسکرول برای مشاهده بقیه محتوا اضافه گردد.
از کاربردهای متداول استفاده از این تکنیک، می توان به منوها و جداول قابل پیمایش اشاره نمود.
overflow-x: مشخص می کند که با لبه های چپ و راست محتوا چه باید کرد. در صورت نیاز اسکرول افقی ایجاد می کند.
overflow-y: مشخص می کند که با لبه های بالا و پایین محتوا چه باید کرد. در صورت نیاز اسکرول عمودی ایجاد می کند.
با استفاده از ویژگی های مدرن تگ img می توانیم تصاویر را برای طیف وسیعی از دستگاه ها و رزولوشن ها ریسپانسیو نماییم.
در مثال بالا
max-width: به تصویر اجازه می دهد تا اندازه خود را بر اساس عرض container تنظیم کند.
ترکیب تگ های picture, source, img: با استفاده از ترکیب این برچسب ها، در واقع فقط یک تصویر را ارائه می دهیم و بهترین و مناسب ترین تصویر بر اساس دستگاه کاربر را بارگذاری می کنیم.
source: برای ارجاع به یک تصویر WebP استفاده می شود که می تواند توسط مرورگرهایی که از آن پشتیبانی می کند، مورد استفاده قرار بگیرد.
برچسب source دوم به یک فایل PNG از همان تصویر برای مرورگرهایی که از WebP پشتیبانی نمی کند، اشاره می نماید. WebP یک فرمت با قابلیت فشرده سازی پیشرفته برای تصاویر مبتنی بر وب است.
srcset: بسته به وضوح صفحه نمایش دستگاه خاص، به مرورگر اطلاع می دهد که کدام تصویر باید نمایش داده شود.
loading = lazy: پیاده سازی لود تنبل یا lazy loading را انجام می دهد.
یک استراتژی کلیدی برای ایجاد تصاویرریسپانسیو، ویدئوها، iframe ها و سایر عناصر استفاده از aspect-ratio است. aspect-ratio یک تکنیک جدید نیست و یک ابزار مفید برای برنامه نویسان وب است.
برای صرفه جویی در وقت می توانید از قالب از پیش طراحی شده ریسپانسیو استفاده کنید. وردپرس گزینه های متعددی در این زمینه را به صورت رایگان و پولی ارائه می دهد.
یکی از راهکارهای رایج برای ایجاد صفحات وب ریسپانسیو، استفاده از فریم ورک های رایج برای ریسپانسوسازی است. در ادامه به بررسی بهترین فریم ورک های موجود برای طراحی ریسپانسیو صفحات وب می پردازیم. برای افزایش سرعت وب سایت های وردپرسی پیشنهاد می گردد از هاست وردپرس استفاده نمایید.
Bootstrap محبوب ترین فریم ورک HTML ، CSS و JS برای توسعه پروژه های ریسپانسیو در وب است. بوت استرپ برنامه نویسی فرانت-اند را سریعتر و آسانتر می کند. Bootstrap مجموعه گسترده ای از اسناد، مثالها و نسخه های نمایشی را برای شروع و آموزش سریع فراهم ساخته است. جدیدترین نسخه بوت استرپ، Bootstrap5 است.
Tailwind یک روش مدرن مبتنی بر ابزار را برای ایجاد سایت های واکنش گرا ارائه می دهد. این فریم ورک دارای تعداد زیادی کلاسهای کاربردی است که به شما امکان می دهد وب سایت های مدرن را بدون نوشتن CSS بسازید.
در صورت استفاده از این فریم ورک میبایست اندازه فایل CSS نهایی را کاهش دهید، در غیر اینصورت یک فایل CSS بزرگ به دست خواهید آورد.
UIkit یک فریم ورک سبک و ماژولار برای توسعه سریع و قدرتمند رابط های وب است. UIkit مجموعه ای جامع از اجزایHTML ، CSS و JS را در اختیار شما قرار می دهد که استفاده از آن آسان و با قابل سفارشی سازی و توسعه است.
Semantic UI یک فریم ورک پیشرفته CSS است که بیش از 50 المانUI و بیش از 300 متغیر CSS را برای سفارشی سازی ارائه می دهد و با مقادیر EM برای طراحی واکنش گرا ساخته شده است؛ همچنین براساس flexbox است.
Semantic یک فریم ورک CSS آماده است و با فریم ورک هایی مانندReact ، Angular، Meteor و Ember سازگار است. به این معنی که می توانید آن را با هر یک از این فریم ورک ها ادغام کرده و لایه UI خود را در کنار منطق برنامه خود سازماندهی کنید.
Materialize یک فریم ورک ریسپانسیو مدرن است که بر اساس Material Design طراحی شده است. متریال دیزاین توسط گوگل ارائه شده است و یک روند طراحی محبوب است که شامل کارت، سایه و انیمیشن می شود.
Material Design Lite Framework ارائه شده توسط Google یکی از محبوب ترین فریم ورک های CSS برای افزودن ظاهر و طراحی متریال به وب سایت های شما است.
این فریم ورک متکی بر به هیچ کدام از فریم ورک های جاوا اسکریپت نیست؛ اما برای استفاده در دستگاه های مختلف سازگاراست و برای مرورگرهای قدیمی یک درجه پایین تر را ایجاد می کند.
اگر در حال انجام پروژه کوچکی هستید و احساس نمی کنید به تمام ابزارهای فریمورک های بزرگتر نیاز دارید، می توانید از Skeleton استفاده کنید. Skeleton فقط تعداد انگشت شماری از عناصر استاندارد HTML را در بر می گیرد و شامل grid، 12 ستونی است.
از فریم ورک های رایج دیگر می توان به موارد زیر اشاره کرد:
ابزارهای مفید متعددی برای کمک به طراحان وب سایت در ایجاد وب سایت با طراحی واکنش گرا وجود دارد.
Chrome DevTools شبیه سازی تلفن همراه را با طیف وسیعی از تبلت ها و دستگاه های تلفن همراه ارائه می دهد. همچنین با گزینه "responsive" امکان تعیین اندازه صفحه نمایش را برای شما فراهم می سازد.
از ابزارهای رایج دیگر برای تست ریسپانسیو سازی سایت می توان به موارد زیر اشاره کرد:
هاست وردپرس صباهاست با استفاده از منابع قوی تر همچون RAM بالا و CPU قدرتمند، همچنین هارد NVMe که سرعت بالایی دارد و برای میزبانی مناسب است؛ باعث افزایش کارایی و سرعت وب سایت های وردپرسی می گردد.
هاست وردپرس برای وب سایت های وردپرسی و همچنین فروشگاه های اینترنتی که با فروشگاه ساز ووکامرس طراحی شده اند، انتخاب بسیار مناسبی است و باعث افزایش سرعت تا 5 برابر می گردد.
در این مقاله تکنیک های مختلف برای ساخت صفحات وب به صورت ریسپانسیو یا واکنش گرا به همراه مثال هایی از کدهای مورد استفاده در هر کدام از روش ها مورد بررسی قرار گرفت. همچنین فریم ورک های رایج برای طراحی سایت به صورت ریسپانسیو و ابزارهای موردنیاز برای تست ریسپانسیو سایت معرفی گردید.
امیدواریم این مقاله برایتان مفید واقع شده باشد. اگر سوالی دارید که در این مقاله پاسخش را پیدا نکردید، در قسمت کامنت ها سوال خود را مطرح کنید، کارشناسان ما در کمتر از چند دقیقه به سوالات پاسخ خواهند داد.
این مقاله را با دوستان خود به اشتراک بگذارید.
موفق باشید.
اگر سوالی دارید که پاسخش را در زیر پیدا نکرده اید، آن را با واحد پشتیبانی یا فروش ما در میان بگذارید.
CMS چیست؟ این واژه مخفف عبارت Content Management System و به معنی یک سیستم مدیرت محتوا است. این نرم افزار برای مدیریت تولید و اصلاح محتوای دیجیتال استفاده می شو...
ابزارهای ساخت سایت در سال 2021 می توانند برای هر کسب و کاری مفید و کاربردی باشند. طراحی وب سایت که یک مقوله بسیار مهم است که ما در مراحل اولیه شروع کسب و کار خو...
معروفترین سیستم مدیریت پایگاههای داده mySQL که به صورت متن باز بوده و از زبان SQL برای انجام کارها بهره میبرد، یکی از پرطرفدارترین و کاربردی ترین ابزارها در حوز...
hello bar چیست؟Hellobarیکی از خدماتی است که در قالب وبسایت عرضه میشود. از طریق این سرویس قادر خواهیم بود تا پیامهای مورد نظر خود را برای بازدیدکنندگان مدیریت و...
پس از الگوریتم اخیر گوگل یعنی BERT هم اکنون گوگل آماده می شود تا به تدریج الگوریتم جدید و بسیار قدرتمند خود یعنی MUM را به جهان آنلاین معرفی کند.این به روزرسانی...
بروزرسانی قالب سایت و استفاده از ابزارهایی مانند فایل زیلااز جمله فنونی است که وبمستران و مدیران سایت باید بر آن تسلط کافی داشته باشید، ابزار Filezillaابزاری بس...
بهبود رتبه سایتهمواره یکی از دغدغه های اساسی صاحبان وب سایت است. تصور کنید یک وبسایت تاسیس کرده و محصولی را به صورت آنلاین می فروشیم. حدی از ترافیکی وارد سایت ش...
یکی از صفحاتی که در برخی سایت ها دیده می شود و بسیار صفحه مفیدی است صفحه پرسش و پاسخ های رایج است. این صفحه را می توان در وردپرس و یا سی ام اس های دیگر طراحی کر...
یکی از کارهای بسیار مهمی که در ابتدای کسب و کار و زمانی که در حال تأسیس وب سایت هستیم، باید انجام شود، انتخاب دامنه وب سایت است.انتخاب دامین همیشه یکی از دغدغه...
اگر قصد داشته باشیم که برای کسب و کارمان یک وب سایت تأسیس کنیم، یکی از مواردی که باید هنگام خرید به آن توجه شود انتخاب شرکت میزبانیوب یا هاستینگ و پلن مناسب است...
سرعت وب سایتدر افزایش بازدید از سایت تأثیر بسیار زیادی دارد. سایت هایی کهلود تایم بالایی دارند، معمولاً با آمار بالای شاخص بانس ریت مواجه هستند. عوامل متعددی در...
استفاده از ابزارهای چک سئو به صورت مداوم و منظم باعث کشف و رفع مشکلات مرتبط با سئوی onpage، offpage و تکنیکال شده و به ما در بهبود وضعیت سئوی سایت و در نهایت کس...
سی پنل و دایرکت ادمین دو نرم افزار لینوکسی هستند که برای مدیریت کنترل پنلهاستمورد استفاده قرار میگیرند. این دو نرم افزار قابلیت های بسیاری داشته و از محبوبیت با...
سی پنل یکی از معروفترین نرم افزار کنترل پنل سایت های لینوکسی است و تقریبا پر استفاده ترین آنها. در مجموعه ذیل به بررسی بخش های مختلف سی پنل می پردازیم. ساخت دیت...
اگر صاحب یک وب سایت هستید، اصلی ترین الویت شما باید ارائه یک تجربه کاربری یا UX ( User Experience ) عالی به کاربران باشد. متأسفانه لینک های شکسته در سایت ها می...
صفحات خطا از نظر بهینه سازی برای موتور های جستجو و سئو گزینه مناسبی نیستند، و هیچ پوئن مثبتی نیز برای وب سایت ها ندارند. با این حال هر وب سایتی ممکن است بنابر د...
این روز ها تعداد زیادی از کاربران در سطح اینترنت برای وب گردی از گوشی های موبایل یا تبلت ها با اندازه و ابعاد متنوعی استفاده می کنند. در واقع، 52 درصد از کل ترا...
شاید دو ثانیه زمان زیادی به نظر نرسد. با این حال، وقتی نوبت به وبسایت شما می رسد، اتفاقات زیادی در این مدت کوتاه میتواند رخ دهد.به گفته گوگل، افزایش زمان بارگذا...
PHP امروزه یکی از محبوب ترین زبان های برنامه نویسی در وب است. بر اساس گزارش W3Techs، بیش از 78٪ از وب سایت ها از PHP به عنوان زبان برنامه نویسی سمت سرور استفاده...
امروزه، افراد زیادی ترجیح می دهند زمان خود را برای خرید به صورت حضوری صرف نکنند و در عوض خرید کالاها یا خدمات را به صورت آنلاین و از خانه خود انجام دهند. این مو...
برای ساخت سایت فروشگاهی، استفاده از وردپرس یکی از گزینه های مناسب است. در حال حاضر بیش از 40.6٪ از وب سایت ها با استفاده از وردپرس طراحی شده اند. بسیاری از این...
آیا می دانید cdn یا شبکه توزیع (تحویل) محتوا چیست و چه کاربردی دارد؟ در این مقاله ابتدا به طور مفصل در خصوص چیستی، مزایا، کاربردها و تاثیر cdn بر سئو توضیح خواه...
وردپرس به عنوان محبوب ترین پلتفرم وب شناخته می شود. بیش از یک سوم کل وب سایت ها با استفاده از وردپرس ساخته شده اند.نصب وردپرس بر روی رایانه به ما کمک می کند ورد...
چنانچه که شما تا کنون با طراحی سایت سر و کار داشته باشید به طور قطع نام سیستم های مدیریت محتوا یاCMSها را شنیده اید. سیستم مدیریت محتوا متعددی در دنیای طراحی سا...
همانگونه که میدانید وردپرس از محبوبت ترین سیستم مدیریت محتوا به شمار میاید که از سایت ساز های رایگان به حساب میاید. پیش از 33 درصد همه ای وب سایت های دنیا به وس...
بیشتر ما زمانی که با یک نرم افزار کار کرده ایم یا با نرم های گوناگون با مواردی برخورد کرده ایم که با وجود اینکه ظاهری زیبا و دلنشین دارد. ولیکن کار کردن با آنها...
چنانچه که شما یک طراح وب سایت باشید یا در رابطه با سئو آشنا باشید همچنین اگر در دنیای وب گشتی زده باشید. بدون شک نام DNS را شنیده اید این کلمه که مخفف عبارت Dom...
یکی از بهترین و مهم ترین کار های که بایستی برای بهینه سازی محتوا و همچنین بهبود سایت انجام داد ثبت نقشه سایت در گوگل میباشد. در حقیقت یکی از اساسی ترین گام های...
اگر شما در دنیای وب و اینترنت فعالیت داشته باشید. بدون شک با انواع سیستم های مدیریت محتوا آشنا هستید به تبع وردپرس را میتوان یکی از این سیستم مدیریت محتوای کارآ...
زمانی که شما وارد یک فروشگاه میشود و مهم ترین عامل برای جذب شما ویترین و ظاهر آن فروشگاه بوده است. در واقع صفحه اول سایت نیز همینطور میباشد از اینرو شما بایستی...