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

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

  • نوشته شده توسط : رضا رجب پور
  • دسته بندی :مقالات
  • بازدید: 4018
اصول طراحی سایت ریسپانسیو
Rate this blog

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

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

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

طراحی سایت نسخه موبایل

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

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

  • تاریخچه طراحی سایت ریسپانسیو

اولین سایتی که برای موبایل طراحی شده سایت Audi.com بود که در سال ۲۰۰۱ توسط یورگن Spangl و جیم Kalbach با استفاده از نت اسکریپ طراحی شد و برای موبایل تغییر اندازه می دهد

در سال ۲۰۰۴ کامرون آدامز توانست با تکنیک های css3 ,jquery  سایت ها را به انذازه دلخواه برای هر اسمارت فون در بیاورد و در سال ۲۰۱۴ با تکنیک های مختلف سایت های واکنشگرا طراحی شدند

چگونه طراحی سایت ریسپانسیو را انجام دهیم

این کار به تخصص و نیازمند دانش برنامه نویسی و طراحی قالب سایت هست شما باید با زبان های Html,Css,  و media  هایی که سایت بر اساس هر اسمارت فونی کوچک و بزرگ می شود که بر اساس

موبایل های قدیمی سایز ۳۲۰

موبایل های جدید سایز ۴۸۰

تبلت هایی به صورت افقی هستند

تبلت هایی که به صورت عمودی هستند

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

  طراحی سایت (Responsive Web Design)   با پیشرفت علم طراحی وب سایت و پیشرفت وب این تکنیک به وجود آمده است.

منظور از Responsive یعنی اینکه برای سایت شما . تکنیکی استفاده می شود. که باعث می شود

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

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

در همه نمایشگرها به راحتی نمایش داده شود.

ما در ساین وب آماده خدمات با طراحی سایت ارزان و قیمت مناسب هستیم

کد نویسی سایت

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

کاربر پسند بودن سایت

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

بارگذاری عکسها

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

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

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

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

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

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

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

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

استفاده نکردن از جدول

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

طراحی سایت اختصاصی

لوگو سایت

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

آیا در نمونه کار بالا همه این نکات رعایت نشده است نظر شما چیست؟

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

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

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

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

ریسپانسیو کردن عکسهای وردپرس از طریق کد نویسی

ریسپانسیو کردن عکسهای وردپرس از طریق کد نویسی

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

add_image_size( ‘sml_size’, 300 );

add_image_size( ‘mid_size’, 600 );

add_image_size( ‘lrg_size’, 1200 );

add_image_size( ‘sup_size’, 2400 );

 

نصب پلاگین ریسپانسیو کردن عکسها

 راه دوم : نصب پلاگین ریسپانسیو کردن عکسها

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

<img class=”aligncenter wp-image–۱۷۶ size-full” src=”http://signwebdesign.ir/wp-content/uploads/2017/05/img1.jpg” >

 

ولی وقتی شما پلاگین را نصب می کنید به این شکل در می آید

 

<img class=”aligncenter wp-image–۱۳۷ size-full” src=”http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo.jpg” srcset=”http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo–۱۶۹×۳۰۰.jpg 169w, http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo–۵۷۶×۱۰۲۴.jpg 576w, http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo–۳۰۰×۵۳۴.jpg 300w, http://localhost/SebastianGreen/2017/wp_dev/wp-content/uploads/2017/05/onavo–۶۰۰×۱۰۶۷.jpg 600w, http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo.jpg 600w” alt=”onavo” width=”600″ height=”1067″ sizes=”(max-width: 600px) 100vw, 600px”>

خوب تصاویر سایت وردپرسی شما ریسپانسیو شد به همین راحتی و آسانی خیلی راحت نبود؟

چند نکته برای طراحی سایت واکنشگرا

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

چند نکته برای طراحی سایت واکنشگرا

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

موبایلی بودن طراحی سایت

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

استفاده از  Media Queries

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

خودتان را بزارید جای کاربر طراحی سایت

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

استفاده از درصد  در طراحی سایت

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

این نکته خیلی مهم است خیلی از طراحان سایت این مشکل را دارند

منو سایت موبایلی

منو سایت موبایلی به نوعی باید طراحی شود تا کاربر خیلی راحت بتواند منو را پیدا کند سعی کنید سایتی طراحی کنید که هم ui ,ux خوبی داشته باشد اگر نمی دانید ui ,ux  چیست حتما این مطلب تفاوت ui , ux را در این مورد بخوانید

مشکل نداشتن در اسکرین های مختلف

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

انتخاب صحیح برای کد نویسی سایت موبایلی

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

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

منبع : طراحی سایت مهندسین ساین وب

مقالات مرتبط

پیشنهاد می کنیم این مطالب هم مطالعه کنید

رنک برین چه تاثیری در سئو سایت دارد؟

الگوریتم رنک برین چه تاثیری در سئو سایت دارد؟

تا به حال اسم رنک برین را شنیده اید؟این مطلب را حتما مطالعه کنید چون در مورد رنک برین هست…

طراحی سایت با وردپرس بهتر است یا PHP

طراحی سایت با وردپرس بهتر است یا PHP

طراحی سایت با وردپرس بهتر است یا PHP این مطلب را مطالعه کنید تا فرق بین طراحی سایت php و…

تنظیمات htaccess در وردپرس

تنظیمات htaccess در وردپرس

اگر می خواهید طراحی سایت وردپرسی خودتون رو از لحاظ امنیت و سرعت بالا ببرید حتما این مطلب را مطالعه…

پرسش و پاسخ 0

بحث درباره این مقاله را شما آغاز کنید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی