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

[elham1388]

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


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





طراحی وب سایت رسپانسیو در Artisteer



Artisteer 4 اولین قالب برای طراحی قالب ریسپانسیو بوده است. در این نسخه طی مسیر زیر می توان طراحی وب سایت ریسانسیو را انجام داد.


xport → Options → General








طراحی قالب در Artisteer برای استفاده پذیری در دسکتاپ، تلفن های هوشمند و تبلت ها منظور گردیده است و مرورگر خاصی را تعیین ننموده است. ریسپانسیو زمانی بیان می شود که سایز مرورگر از سایز طراحی سایت کوچکتر باشد. در قالب رسپانسیو استایل و کدهای خاص خود را دارد برای مثال responsive.style.css andresponsive.script.js که این استایل در استایل قالب اصلی دخالتی ندارد. برای فراخوانی فایل استایل و جاوای قالب ریسانسیو می بایست در فایل HTML صفحه سایت کد زیر درج شود.


<link rel="stylesheet" href="/demo/style.responsive.css" media="all" />


<script src="/demo/script.responsive.js"></script>





فایل CSS قوانین استایل را متناسب با دستگاه ها مشخص می نماید. کلاس های .responsive ، .responsive-tabletو .responsive-phone بدین منظور می باشند. استایل ریسپانسیو در قالب Artisteer برای منوهای افقی از سایز صفحه 480 px یا کمتر باشد قابل اجرا می باشد. تنظیمات زیر منو در شاخه زیر می باشد.


Menu→ Submenu → Options → Responsive Levels




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