اصول طراحی سایت واکنش گرا
یکی از مهمترین موضوعات در طراحی سایت، اندازه و چیدمان اجزا در صفحه نمایش می باشد که با یادگیری اصول طراحی سایت واکنش گرا قابل ئیاده سازی می باشد. به دلیل وجود روش های متفاوت برای مشاهده صفحات سایت در مرورگرها، وجود و شناخت ابزار مناسب برای نمایش دادن اجزاء به طور استاندارد، در تمام صفحه نمایش ها کار سخت و مهمی می باشد و نیاز به یادگیری اصول طراحی سایت واکنش گرا می باشد. با ما همراه باشید تا بتوانید این ابزار مهم را بشناسید و از آن استفاده نمایید.
سایت واکنش گرا چیست؟
به طور ساده یک سایت واکنش گرا وب سایتی می باشد که در تمام دستگاه ها بدون حذف شدن یا نمایش داده نشدن قسمت هایی از آن قابل مشاهده باشد. منظور از دستگاه ها وسیله هایی همچون گوشی، تپلت، لپ‌تاپ و کامپیوتر های خانگی می باشد که کاربر برای مشاهده صفحات در مرورگرها از آن ها استفاده می کند.
پیش نیازهای ساخت صفحات ریسپانسیو
شما به عنوان برنامه نویس برای شروع اصول طراحی سایت واکنش گرا نیاز به پیش نیازهای زیر دارید.
- html
- css
- html5
- css3
- JavaScript
- مدیا کوئری (media query)
- فریم ورک های bootstrap ،Foundation ،Skeleton ،YAML
اصول طراحی سایت واکنش گرا یا ریسپانسیو
برای طراحی سایت واکنش گرا یا تبدیل یک سایت به سایت واکنش گرا (رسپانسیو) یک سری نکته و اصول بسیار مهم وجود دارد، که شما به عنوان طراح سایت باید به این اصول طراحی سایت واکنش گرا توجه نمایید.
بررسی چگونه استفاده کردن کاربران از گوشی های هوشمند
منظور از چگونه استفاده کردن از گوشی هوشمند این است که کاربر از چه مدل گوشی استفاده می کند. دلیل اهمیت این نکته این است که شما به عنوان برنامه نویس و طراح سایت می بایست بدانید که اجزای سایت را بر حسب چه اندازه ای از صفحه نمایش گوشی ها باید طراحی نمایید.
برنامه ریزی طرح اولیه خود
طرح اولیه وب سایت در اصول طراحی سایت واکنش گرا به تمام اجزایی گفته می شود که می خواهید در داخل سایت نمایش دهید. شما به عنوان برنامه نویس باید بدانید که سایت مورد نظر از چه قسمت هایی تشکیل شده و برای طراحی چقدر زمان می برد. این برنامه ریزی باعث طراحی بی عیب و نقص شما می شود.
هدایت کاربر برای دسترسی راحت به قسمت های مختلف سایت
مسیریابی، جهت یابی یا هدایت کاربر یکی از مهم ترین اصول طراحی سایت واکنش گرا می باشد. شما به عنوان برنامه نویس سایت با مسیریابی درست سایت خود این امکان را برای کاربران خود فراهم می کنید که به راحتی به تمام سایت شما دسترسی پیدا کنند. این نکته زمانی اهمیت خود را نمایش می دهد که کاربران شما برای مشاهده سایت شما، از گوشی همراه استفاده می کنند.
بهینه سازی تصاویر سایت
تصاویر نقش مهمی در ارتباط بین کاربران با سایت شما دارند. برای رسپانسیو کردن سایت خود حتما تصاویر خود را بهینه سازی نمایید. برای بهینه سازی تصاویر خود، باید آنها را با پسوند JPG یا PNG ذخیره نمایید. پس از ذخیره آنها با پسوند بیان شده باید قبل از استفاده از آنها، حجم عکس های مورد استفاده را کاهش دهید. برای این کار می توانید از وب سایت هایی همچون tinypng.com و compressjpeg استفاده نمایید.
تهیه یک نسخه آزمایشی از وب سایت برای گوشی موبایل
استفاده از دستورات Media Queries در سایت
اضافه کردن قابلیت صفحه کلید به فرم های موجود در وب سایت
دقت به ابعاد و اندازه دکمه های سایت و منوها
بهینه سازی تایپوگرافی سایت
تایپوگرافی در سایت شامل مواردی همچون اندازه فونت و نوشته ها، اندازه سربرگ ها، نوع فونت، ارتفاع بین خطوط متن، فاصله میان تیتر مطالب و خط اول متن و عناوین اصلی و فرعی می شود. در سایت واکنش گرا اندازه این ها مهم می باشد و شما باید اندازه مناسب را انتخاب نمایید تا تمام موارد در سایت قابل مشاهده باشند. بهترین اندازه برای نمایش متن ها در تمام صفحه نمایش ها سایز ۱۶PX می باشد.
تمرکز بر روی قالب های ریسپانسیو ساده و زیبا
زمانی که شما به عنوان طراح سایت، قالب سایت واکنش گرای خود را ساده انتخاب می کنید، باعث بالا رفتن سرعت بارگذاری سایت و نمایش کامل آن و محبوبیت بین کاربران می شود.
امتحان قالب خود در موتور جستجوگر بعد از پایان طراحی سایت ریسپانسیو
برای بالا رفتن سئو سایت خود باید سایت شما دارای امکان مشاهده در گوشی باشد که با رسپانسیو کردن آن این امکان به وجود می آید. بعد از اتمام طراحی، سایت خود را با مرورگر گوشی های مختلف چک کنید تا مشکلی وجود نداشته باشد.
طراحی یک سایت واکنش گرا (responsive) در HTML
شما به عنوان یک برنامه نویس سایت با رعایت اصول طراحی سایت واکنش گرا باید برای طراحی قالب واکنش گرا (responsive) سایت خود موارد زیر را رعایت نمایید.
View port
یک فضای مجازی است که دارای اندازه حدود ۱۰۰۰ پیکسل می باشد، که مرورگرهای موبایل برای پشتیبانی و نمایش سایت ها از آن استفاده می کنند.
-
اطلاع رسانی به مرورگر برای تغییر اندازه Viewport
اولین قدم برای طراحی قالب واکنش گرای سایت، تغییر اندازهViewport و اطلاع رسانی آن به مرورگر می باشد. برای انجام این کار از تگ متا در فایل HTML استفاده می شود.
<head>
<meta name="viewport" content="width=480">
</head>
|
در کد نویسی بالا عرض Viewport برابر ۴۸۰ پیکسل می باشد، که شما به عنوان برنامه نویس، کمترین مقداری که می توانید مشخص کنید همین عدد می باشد. در صورتی که عرض صفحه نمایش گوشی از ۴۸۰ پیکسل بیشتر شود، عرض Viewport نیز افزایش می یابد. راه دیگری برای تعیین عرض Viewport وجود دارد که می توانید از آن استفاده نمایید.
<head>
<"meta name="viewport" content="width=device-width>
</head>
|
اندازه مجازی
برای انتخاب اندازه مجازی مناسب Viewportدر اصول طراحی سایت واکنش گرا باید از واحدهای فیزیکی مانند point ،cm و … استفاده نمایید.
بزرگ نمایی کردن تصاویر
به دلیل بزرگ نمایی و کوچک نمایی تصاویر شما از سمت مرورگرها، تگ متا قابلیتی دارد که شما به عنوان برنامه نویس می توانید مقدار بزرگ نمایی و کوچک نمایی را کنترل نمایید.
<head>
<meta name="viewport" content="width=480", initial-scale=1, maximum-scale=2>
</head>
|
همانطور که در کد داده شده برای شما مشخص است، مقدار بیشترین اندازه بزرگ نمایی را ۲ برابر و اندازه پیش فرض آن را ۱ مشخص نموده است.
عرض حداقل و حداکثر در طراحی واکنش گرا
شما برای نمایش بهتر سایت خود در تمام مرورگر ها باید از قابلیت عرض حداقل و حداکثر استفاده نمایید. برای بکارگیری آن در سایت خود می بایست آن را در تگ Body تعریف کنید.
نمایش دو بعدی اجزای یک وب سایت
این ویژگی امکان طراحی جداگانه تمام اجزای سایت را برای شما فراهم می کند. به راحتی می توانید اجزایی که نیاز به ویرایش یا حذف هستند را پیدا و آنها را حذف یا ویرایش نمایید.
تصویر ها
2 نکته بسیار مهم درباره تصاویر مورد استفاده در سایت های واکنش گرا وجود دارد که به عنوان طراح سایت باید به آن ها توجه نمایید.
نکته اول: انتخاب اندازه مناسب تصویرها
در انتخاب اندازه مناسب برای تصاویر در اصول طراحی سایت واکنش گرا باید به کیفیت آنها در زمان نمایش و مناسب بودن حجم آن ها برای گوشی های هوشمند دقت نمایید.
نکته دوم: تغییر عرض خودکار تصویر بر اساس عرض صفحه
شما به عنوان طراح سایت یادتان باشد که اندازه تصویر را با بزرگترین اندازه پیکسل های واقعی صفحه نمایشگر در نظر بگیرید. برای نمایش تصاویر در نمایشگر های بزرگ عددهای ۱۰۰۰ یا ۱۳۶۶ مناسب تر می باشند. در نمایشگرهای کوچکتر باید با اندازه درصدی عرض تعیین کنید و برای ارتفاع مقدار تعیین نکنید یا مقدار آن را روی auto قرار دهید.
img#header {
width: 100% ;
height : auto ;
}
|
برای تغییر اندازه تصاویر پس زمینه می توانید از کد زیر استفاده نمایید.
div#header {
width: 100%;
padding-top: 50%;
("Background-image: URL ("01.jpg ;
background-repeat: no-repeat;
Background-size: 100% auto;
}
|
اندازه فونت وب
برای داشتن نوشته ها در اصول طراحی سایت واکنش گرا بهتر است اندازه فونت وب را با واحد های فیزیکی تعیین نمایید.
مثلا برای فونت پیش فرض صفحه به جای استفاده از مقدار 14px از مقدار 14pt استفاده نمایید.
مدیا کوئری در Html
مدیا کوئری (media query) یک ویژگی است که علاوه بر تغییر اندازه فونت و تصاویر، استایل های مختلفی به عناصر می دهد.
|
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
(@media screen and (max-width: 800px {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
|
کد بالا مشخص می کند که با هر بار تغییر پنجره مرورگر، در نوار زیر چه تغییراتی به وجود می آید.
افزونه های مورد استفاده در اصول طراحی سایت واکنش گرا
افزونه هایی که در این قسمت به طور خلاصه برای شما معرفی می کنیم در WordPress کاربرد دارد که در مقالات بعدی به آن ها می پردازیم.
- افزونه JetPack
- افزونه WPtouch
- افزونه WP Mobile Detector
- افزونه Mobile Pack
- افزونه WP Mobile Edition
بهترین رزولوشن صفحه نمایش در طراحی سایت واکنش گرا
بهترین رزولوشن های استاندارد در طراحی سایت واکنش گرا به صورت زیر می باشد.
- ۳۶۰×۶۴۰ – ۲۱٫۵۴%
- ۱۳۶۶×۷۶۸ – ۱۲٫۸۵%
- ۱۹۲۰×۱۰۸۰ – ۷٫۷۶%
- ۳۷۵×۶۶۷ – ۴٫۹۴%
- ۱۴۴۰×۹۰۰ – ۳٫۳۲%
- ۱۲۸۰×۸۰۰ – ۲٫۶۷%
سایزهای استاندارد در اصول طراحی سایت واکنش گرا
شما به عنوان یک برنامه نویس می توانید از سایزهای استاندارد در اصول طراحی سایت واکنش گرا که شامل موارد زیر می باشد، استفاده نمایید.
ابعاد طراحی سایت موبایل
- ۳۲۰ *۴۸۰ پیکسل
- ۳۶۰×۶۴۰ پیکسل ۴۱٫۱۱%
- ۳۷۵×۶۶۷ پیکسل ۹٫۵۸%
- ۷۲۰×۱۲۸۰ پیکسل ۵٫۱۶%
- ۳۲۰×۵۶۸ پیکسل ۴٫۵۵%
- ۴۱۴×۷۳۶ پیکسل ۳٫۷۹%
- ۳۲۰×۵۳۴ پیکسل ۳٫۴۶%
ابعاد طراحی سایت تپلت
- ۷۶۸×۱۰۲۴ پیکسل ۵۷٫۹۹%
- ۱۲۸۰×۸۰۰ پیکسل ۵٫۸۹%
- ۶۰۰×۱۰۲۴ پیکسل ۴٫۶%
- ۶۰۱×۹۶۲ پیکسل ۳٫۰۲%
- ۸۰۰×۱۲۸۰ پیکسل ۲٫۹۴%
- ۱۰۲۴×۶۰۰ پیکسل ۲٫۳۶%
ابعاد طراحی سایت دسکتاپ
- ۱۳۶۶×۷۶۸ پیکسل ۲۹٫۲۵%
- ۱۹۲۰×۱۰۸۰ پیکسل ۱۷٫۳۴%
- ۱۴۴۰×۹۰۰ پیکسل ۷٫۳۲%
- ۱۶۰۰×۹۰۰ پیکسل ۵٫۷۲%
- ۱۲۸۰×۸۰۰ پیکسل ۵٫۲۷%
- ۱۲۸۰×۱۰۲۴ پیکسل ۴٫۵۱%
- ۹۸۰*۱۲۸۰ پیکسل
- ۱۲۸۰*۶۰۰ پیکسل
- ۱۲۹۰*۹۰۰ پیکسل
برای رعایت اصول طراحی سایت واکنش گرا، قالب رسپانسیو را باید برای چه دستگاه هایی طراحی کرد؟
یکی از اصول طراحی سایت واکنش گرا طراحی قالب واکنش گرا برای دستگاه های زیر می باشد.
- موبایل : کوچکتر از 768 پیکسل
- تپلت: بزرگتر و مساوی 768 پیکسل
- مانیتور رومیزی متوسط: بزرگتر و مساوی 992 پیکسل
- مانیتور رو میزی بزرگ: بزرگتر و مساوی 1200 پیکسل
چگونه عناصر وب سایت را در دستگاه های مختلف نمایش دهیم؟
شما برای نمایش عناصر سایت در دستگاه ها می توانید به صورت زیر عمل کنید.
گوشی
(@media screen and (max-width: 767px {
#codefriend { width: 100%; margin:0 auto; }
}
|
تبلت
(@media screen and (min-width: 768px) and (max-width: 991px{
#codefriend { width: 150px; float: right; }
}
|
تفاوت سایت واکنش گرا و غیر واکنش گرا در چیست؟
در سایت های واکنش گرا، اندازه و چیدمان اجزاء را طبق تغییر عرض صفحه مشخص می شود و برای کاربر اسکرول افقی نمایش داده نمی شود. در سایت های غیر اسپانسیو اینجوری نمی باشد و در صورت کوچک بودن صفحه نمایش برای کاربر اسکرول افقی ظاهر می شود.
آیا طراحی سایت ریسپانسیو فقط برای بهبود نمایش در موبایل انجام می شود؟
شاید برای شما هم سوال باشد که آیا طراحی سایت ریسپانسیو فقط برای بهبود نمایش در موبایل انجام می شود؟ باید بگوییم که خیر. رسپانسیو کردن باعث تطابق سایز صفحه نمایش شما با صفحه نمایش کاربر می شود.
آیا طراحی سایت به صورت واکنش گرا تاثیری در نتایج گوگل دارد؟
مدیریت محتوا پروژه ها روی یک سایت واکنش گرا از نظر سئو به نسبت 2 سایت داشتن، آسان تر و اقتصادی تر می باشد. این کار باعث بالا رفتن رتبه سایت، بر نتایج گوگل نیز تاثیر دارد.
طراحی سایت واکنش گرا از لحاظ فنی نسبت به روش های قبلی چه تفاوت هایی دارد؟
تفاوت های بین سایت واکنش گرا با روش های قبلی شامل موارد زیر می شود
-
روش های قدیمی طراحی سایت
- تمام اجزاء سایت دارای اندازه های ثابت هستند
- کاربر در نمایشگر های کوچک نیاز به اسکرول و زوم کردن دارد
- افت رزولوشن تصاویر
- لازم داشتن به zoom in و zoom out کردن
-
طراحی سایت واکنش گرا
- رزولوشن متناسب با رزولوشن دستگاه های مختلف
- نیاز به اسکرول افقی ندارد
- کاربر پسند بودن
- نمایش اجزاء به صورت شناور
- نیاز نداشتن به zoom in و zoom out کردن
اشتباهات رایج در اصول طراحی سایت واکنش گرا :
در اصول طراحی سایت واکنش گرا یک سری اشتباهات وجود دارد که باید در زمان طراحی سایت واکنش گرا به آن ها توجه نمایید.
- استفاده از متن های طولانی در موبایل
- فعال کردن شماره تلفن ها برای تماس
ابزار های تست ریسپانسیو بودن سایت در اصول طراحی سایت واکنش گرا
- تست ریسپانسیو بودن سایت با ابزار Xrespond
- تست ریسپانسیو بودن سایت با ابزار Responsinator
- تست ریسپانسیو بودن سایت با ابزار Google Mobile Test
- تست ریسپانسیو بودن سایت با ابزار Am I Responsive
- تست ریسپانسیو بودن سایت با ابزار Designmodo Responsive Test
- تست ریسپانسیو بودن سایت با ابزار Responsive Design Checker
- تست ریسپانسیو بودن سایت با ابزار Matt Kersley’s Responsive Tool
- تست ریسپانسیو بودن سایت با ابزار Mobile friendly test
- تست ریسپانسیو بودن سایت با ابزار Responsive Test
- تست ریسپانسیو بودن سایت با ابزار BrowserStack
مزایای طراحی سایت واکنش گرا
طراحی سایت واکنش گرا دارای مزایای زیر می باشد.
- انعطاف پذیری هنگام بارگذاری صفحات با طول و عرض مختلف
- پشتیبانی از ابعاد مختلف گوشیهای هوشمند
- پشتیبانی از ابعاد مختلف تپلت
- پشتیبانی از ابعاد مختلف صفحه نمایش دسکتاپ
- پایین آوردن هزینه و زمان
- بالا بردن ترافیک سایت
نکات مهم در اصول طراحی سایت واکنش گرا
برای طراحی سایت واکنش گرا به نکات زیر توجه نمایید.
- دقت به سرعت لود شدن سایت های ریسپانسیو
- توجه به برنامه های خاص موبایل به منظور هدایت به صفحه سایت
سخن پایانیبه دلیل وجود اندازه و رزولوشن های مختلف در صفحه نمایش ها و استفاده کاربران از گوشی های هوشمند و تبلت برای مشاهده وب سایت ها، نیاز به یادگیری و آشنایی با اصول طراحی سایت واکنش گرا می باشد لذا در این مقاله به معرفی کامل تر طراحی سایت واکنش گرا پرداختیم. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید