نکات طراحي سايت ريسپانسيو

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

  • طرح ريزي

مانند هميشه طرح ريزي در اولويت اول قرار دارد. به محض اينکه بتوانيد چالشهاي طراحي خود را روي کاغذ حل کنيد، آماده طراحي سايت خود ميباشيد.

  • استفاده از نرم افزارهاي نمونه سازي

يک چنين برنامه اي Adobe Edge Reflow مي باشد که به شما امکان استفاده از کوئري هاي واسط، تنظيم نقطه شکست breakpoints درون برنامه و طراحي چارچوب منطبق با دسکتاپ، تبلت و گوشي همراه را ميدهد. بعد از آن شما ميتوانيد CSS ها را در برنامه اي نظير دريم ويور يا ويرايشگرهاي ديگر HTML کپي کرده و طراحي خود را بهبود ببخشيد.

  • در نظر گرفتن استراتژي موبايل – اول (اولويت طراحي مطابق با گوشي همراه)

اين حالت براي زماني است که ابتدا سايت موبايلي خود را ميسازيد و بعد آن را در مقياس تبلت و دسکتاپ در مي آوريد. يکي از نگراني هاي عمده در هر سه حالت، لوگو و يا متن تبليغاتي ميباشد. اگر متن در يک گوشي همراه به راحتي قابل خواندن باشد پس بالتبع نبايد مشکلي براي تبلت يا دسکتاپ داشته باشيد.

  • دوري کردن از حالت جهت يابي و نويگيشن

اگر سايت شما فقط دو سه تا منوي جهت يابي دارد، ميتوانيد آنها را روي يک منو قرار دهيد. اما اگر تعداد منوها زياد است، بهتر است يک آيکون طراحي کنيد که منوها به صورت افتادني در آن قرار گيرند. ميتوانيد از استايلهاي منوي آيکني موجود در سايت GoMobi استفاده کنيد.

  • در ابتدا نماي کلي از سايت خود توليد کنيد

بعضي طراحان قبل از هرگونه کدنويسي چارچوب کاملي از سايت را در ابتدا ايجاد ميکنند. اين کار اطمينان از ديدگاه و احساس مشتري را ايجاد ميکند. زماني که چارچوب سايتهاي منطبق با موبايل در حال طراحي است، يکي از مهمترين مسائل اين است که دکمه ها را به اندازه کافي بزرگ درست کنيم که قابل ضربه زدن توسط انگشت باشد. مسئله ديگر اين است که طراحي را ساده و در عين حال کاربردي انجام دهيم. بعضي طراحان تمايل زيادي به پرداختن به جزئيات موبايلي دارند که ممکن است منجر به مشکلات طراحي و کارايي سايت شود. بنابراين تا ميتوان بايد کار را ساده انجام داد.

  • براي استفاده از برنامه هاي نرم افزاري بي شمار آماده باشيد

بسياري از کاربران استفاده از يک تمپليت وردپرس را کافي ميدانند اما اگر قصد داريد يک طراحي پيچيده انجام دهيد، ممکن است به استفاده از برنامه هاي سفارشي نياز پيدا کنيد و حتي هر سايت را شخصا برنامه نويسي کنيد.

  • عکسها

زماني که در حال توليد طرح بندي هاي ريسپانسيو هستيد، عکسهاي بهينه شده براي هر طرح بندي قرار دهيد. اين کار مشکلات سنجشي و پهناي باندي را کاهش ميدهد. از فايلهايي با پسوند JPEG و يا GIF و يا PNG-8 استفاده کنيد. به هيچ وجه از PNG استفاده نکنيد چون ميتواند اندازه فايلهاي شما را 5 تا 10 بار بزرگتر کند.

  • اندازه گيري دقيقي براي عکسها به کار گيريد

اندازه ها را معمولا 500 در 350 پيکسل و 100 ppi گرفته و ابعاد عکس را با آن تطبيق دهيد. اين کار مقياس گذاري را مرتفع کرده و رزولوشن و کيفيت عکسها را نيز حفظ ميکند. در غير اينصورت ممکن است مشکلات رنگ و رزولوشن براي عکسها ايجاد گردد.





محصولات مرتبط :



مقالات مرتبط :

درخواست تماس