soroosh25
January 6th, 2016, 12:00
کم‌تر از 1 دقیقه‌ی پیش
http://sorooshpardaz.com/images/blogimages/Themer-bootstrap-responsive-web-template-jpg-1394-10-15.jpg
10 نکته طلایی در طراحی سایت واکنش گرا
طراحی سایت واکنشگرا امروزه بعنوان یک اصل مهم در برنامه نویسی و طراحی سایت (http://sorooshpardaz.com/) بشمار میرود تا بتواند بصورت مطلوبی در اسکرین های کوچک تر قابل نمایش باشد. در این مقاله نکات کلیدی و مهم را در طراحی سایت واکنش گرا یا رسپانسیو آموزش خواهیم داد.
اگر با طراحی سایت واکنش آشنا نیستید به بلاگ آموزش طراحی سایت واکنش گرا مراجعه نمایید.
1) اولین و مهمترین اصل در بوت استرپ یا واکنش گرایی حل کردن مساله و برطرف کردن چالش های آن بر روی کاغذ می باشد. اگر شما بتوانید از نظر منطقی بر روی کاغذ پیاده سادی کنید در طراحی سایت کار دشواری پیش رو نخواهید داشت.
2) دومین قدم استفاده از نرم افزار هایی میباشد که بشما اجازه ی نمونه سازی و مدل سازی به شما خواهد داد تا بتوانید بسادگی مدیا کوئری های خود را ایجاد کنید از این نرم افزار ها میتوان به adobe اشاره کرد.
3) سومین گام تدوین استراژی برای موبایل میباشد. شما در ابتدای طراحی میبایستی اسکرین موبایل را برای خود در نظر بگیرید و سپس اقدام به سایر سایز های صفحه نمایش کنید زیرا هر چقدر فضا بیشتر باشد راحتی کار نیز افزایش می یابد بنابراین از سخت به ساده حرکت کنید.
4) قدم مهم بعدی دوری کردن از منوی یا نویگیشن میباشد. اگر آیتم های شما از سه عد تجاوز نمیکند سعی کنید آنها را بصورت عمودی طراحی کنید و اگر تعدادآنها بیشتر است توسط یک آیکن که بعد از کلیک بروی آن باز میشود بصورت کم جا طراحی کنید.
5) سعی کنید مخاطبان خود را درک کنید . اگر از باتن ها و یا کادر های جهت نوشتن متن استفاده میکنید سعی کنید سایز آنها برای انگشتان دست کاربر متناسب باشد و موقع استفاده بمشکل نخورد.
http://cdn.persiangig.com/preview/OHtrwbDJpZ/download%20(1).png
6) برای استفاده از تمام نرم افزار های طراحی سایت آماده باشید.اگر شما بخواهید وبسایتی را ایجاد کنید که زذاحی آن ساده باشد نظظیر (وردپرس) کار سختی پیش رو نخواهید داشت و میتوانیذ آنرا با تمپلیت هایی نظیر Moboom طراحی نمایید . اما بعضی دیگر طراحی دارای پیچیده گی های خاصی هستند که باید برای هر صفحه نمایش بصورت جداگانه طراحی شوند. برای طراحی این وبسایت ها از نرم افزار هایی نظیر visual studio و یا dreamweaver میتوان استفاده کرد.
http://cdn.persiangig.com/preview/BXHf9mAPlS/download.png
7) تصاویر یکی از حساس ترین موضوعات سایت های واکنش گرا میباشد. سعی کنید از عکس های بهینه سازی شده برای سایت خود استفاده کنید. این امر سبب میشود هنگام تغییر سایز مشکل مقیاس و پهنای تصاویر کاهش یابد. برای این کار تصاویر خود را فرمت ها ی مقابل ذخیره سازی کنید :JPEG, GIF و PNG-8 و از فرمت PNG خود داری نمایید.
8) هشدار در مورد بروز رسانی (آپدیت) سایت. اگر سایت شما حاوی یک محصول و خدمات هست مشکلی در طراحی سایت ندارید .اما قرار باشد با بروز رسانی سایت سایز و تعداد المان های محصولات و یا خدمات تغییر کند مطمعن شوید که پس از طراحی واکنش گرایی آن دچار مشکل نمیشود.
9) تا آنجا که امکان دارد از متن در سایز های موبایل استفاده نکنید. استفاده از متن های بلند باعث طولانی شدن محتوا و اسکرول زیاد میشود. در صورت نیاز از متون کوتاه استفاده کنید.
10) از گوگل در طراحی خود کمک بگیرید . شما میتوانید با مراجعه به آدرس زیر :
https://googlewebmastercentral.blogspot....-fast.html (https://googlewebmastercentral.blogspot.co.uk/2013/08/making-smartphone-sites-load-fast.html)
پیشنهاد های گوگل را در طراحی سایت واکنش گرای خود بکار ببرید تا سرعت بارگذاری سایت شما در موبایل ها و اسمارت فون ها به بالاترین حد ممکن برسد.
در طراحی سایت واکنش گرا عملکرد مهمترین بخش کار میباشد. در هر مرحله از طراحی سعی کنید تمام المان های تا ان لحظه ساخته شده را امتحان کنید و از صحت اجرای صحیح آنها مطمئن شوید ودر صورت عملکرد نا صحیح آنها امکان رفع آنها بسادگی باشد.
منبع: sorooshpardaz.com | ده نکته طلایی در طراحی سایت واکنش گرا (http://sorooshpardaz.com/blog/1394/10/top-ten-tip-in-web-design-responsive)
آیا این مطلب برای شما مفید بود؟
http://sorooshpardaz.com/images/blogimages/Themer-bootstrap-responsive-web-template-jpg-1394-10-15.jpg
10 نکته طلایی در طراحی سایت واکنش گرا
طراحی سایت واکنشگرا امروزه بعنوان یک اصل مهم در برنامه نویسی و طراحی سایت (http://sorooshpardaz.com/) بشمار میرود تا بتواند بصورت مطلوبی در اسکرین های کوچک تر قابل نمایش باشد. در این مقاله نکات کلیدی و مهم را در طراحی سایت واکنش گرا یا رسپانسیو آموزش خواهیم داد.
اگر با طراحی سایت واکنش آشنا نیستید به بلاگ آموزش طراحی سایت واکنش گرا مراجعه نمایید.
1) اولین و مهمترین اصل در بوت استرپ یا واکنش گرایی حل کردن مساله و برطرف کردن چالش های آن بر روی کاغذ می باشد. اگر شما بتوانید از نظر منطقی بر روی کاغذ پیاده سادی کنید در طراحی سایت کار دشواری پیش رو نخواهید داشت.
2) دومین قدم استفاده از نرم افزار هایی میباشد که بشما اجازه ی نمونه سازی و مدل سازی به شما خواهد داد تا بتوانید بسادگی مدیا کوئری های خود را ایجاد کنید از این نرم افزار ها میتوان به adobe اشاره کرد.
3) سومین گام تدوین استراژی برای موبایل میباشد. شما در ابتدای طراحی میبایستی اسکرین موبایل را برای خود در نظر بگیرید و سپس اقدام به سایر سایز های صفحه نمایش کنید زیرا هر چقدر فضا بیشتر باشد راحتی کار نیز افزایش می یابد بنابراین از سخت به ساده حرکت کنید.
4) قدم مهم بعدی دوری کردن از منوی یا نویگیشن میباشد. اگر آیتم های شما از سه عد تجاوز نمیکند سعی کنید آنها را بصورت عمودی طراحی کنید و اگر تعدادآنها بیشتر است توسط یک آیکن که بعد از کلیک بروی آن باز میشود بصورت کم جا طراحی کنید.
5) سعی کنید مخاطبان خود را درک کنید . اگر از باتن ها و یا کادر های جهت نوشتن متن استفاده میکنید سعی کنید سایز آنها برای انگشتان دست کاربر متناسب باشد و موقع استفاده بمشکل نخورد.
http://cdn.persiangig.com/preview/OHtrwbDJpZ/download%20(1).png
6) برای استفاده از تمام نرم افزار های طراحی سایت آماده باشید.اگر شما بخواهید وبسایتی را ایجاد کنید که زذاحی آن ساده باشد نظظیر (وردپرس) کار سختی پیش رو نخواهید داشت و میتوانیذ آنرا با تمپلیت هایی نظیر Moboom طراحی نمایید . اما بعضی دیگر طراحی دارای پیچیده گی های خاصی هستند که باید برای هر صفحه نمایش بصورت جداگانه طراحی شوند. برای طراحی این وبسایت ها از نرم افزار هایی نظیر visual studio و یا dreamweaver میتوان استفاده کرد.
http://cdn.persiangig.com/preview/BXHf9mAPlS/download.png
7) تصاویر یکی از حساس ترین موضوعات سایت های واکنش گرا میباشد. سعی کنید از عکس های بهینه سازی شده برای سایت خود استفاده کنید. این امر سبب میشود هنگام تغییر سایز مشکل مقیاس و پهنای تصاویر کاهش یابد. برای این کار تصاویر خود را فرمت ها ی مقابل ذخیره سازی کنید :JPEG, GIF و PNG-8 و از فرمت PNG خود داری نمایید.
8) هشدار در مورد بروز رسانی (آپدیت) سایت. اگر سایت شما حاوی یک محصول و خدمات هست مشکلی در طراحی سایت ندارید .اما قرار باشد با بروز رسانی سایت سایز و تعداد المان های محصولات و یا خدمات تغییر کند مطمعن شوید که پس از طراحی واکنش گرایی آن دچار مشکل نمیشود.
9) تا آنجا که امکان دارد از متن در سایز های موبایل استفاده نکنید. استفاده از متن های بلند باعث طولانی شدن محتوا و اسکرول زیاد میشود. در صورت نیاز از متون کوتاه استفاده کنید.
10) از گوگل در طراحی خود کمک بگیرید . شما میتوانید با مراجعه به آدرس زیر :
https://googlewebmastercentral.blogspot....-fast.html (https://googlewebmastercentral.blogspot.co.uk/2013/08/making-smartphone-sites-load-fast.html)
پیشنهاد های گوگل را در طراحی سایت واکنش گرای خود بکار ببرید تا سرعت بارگذاری سایت شما در موبایل ها و اسمارت فون ها به بالاترین حد ممکن برسد.
در طراحی سایت واکنش گرا عملکرد مهمترین بخش کار میباشد. در هر مرحله از طراحی سعی کنید تمام المان های تا ان لحظه ساخته شده را امتحان کنید و از صحت اجرای صحیح آنها مطمئن شوید ودر صورت عملکرد نا صحیح آنها امکان رفع آنها بسادگی باشد.
منبع: sorooshpardaz.com | ده نکته طلایی در طراحی سایت واکنش گرا (http://sorooshpardaz.com/blog/1394/10/top-ten-tip-in-web-design-responsive)
آیا این مطلب برای شما مفید بود؟