جستجو در تالارهای گفتگو

[h=2] [/h] طراحی قالب وب سایت سازگار با موبایل کار ساده ای نیست و نیاز به تجربه فراوانی دارد. در صورتی که تجربه ای در ساخت سایت سازگار با موبایل ندارید این کار را به طراحی سایت دارکوب بسپارید. طراحی سایت سازگار با موبایل بسیاری از هزینه های شما در مقایسه با طراحی جداگانه سایت برای موبایل را پایین می آورد. برای ساخت سیستم ستون بندی می بایست جهت صفحه بندی کلاس ستون اول و آخر را بدانید. البته بدون دانستن ستون اول و آخر نیز می توانید ستون بندی سازگار با انواع مرورگرها را داشته باشد. در این مقاله می خواهم به شما نحوه ساخت سیستم ستون بندی سازگار با موبایل توسط nth-of-type دستور css را آموزش دهم. لازم نیست کلاس ستون آخر و اول داشته باشید و یا تعداد ستون ها را بدانید، زیرا همه کارها توسط viewport انجام می شود. زیرا در سایزهای مختلف مرورگر و رزولوشن صفحه قالب به ستون های مختلف تبدیل می گردد. بروز خطا در استفاده از کلاس اول و آخر به صورت پیش فرض می بایست کلاس ستون اول و آخر (.first و .last) را به کدهای خود اضافه نماییم ولی انجام این کار برای پیاده سازی قالب مناسب برای رزولوشن های مختلف مشکل ایجاد می نماید. طراحی سایت موبایل استفاده از nth-of-type دستور زیر به شما امکان ایجاد فلوت و مارجین را بدون استفاده از (.first و .last) می دهد. :nth-of-type(An+B) - دستور زیر ستون های 4 ام از ستون 1 را انتخاب می نماید. .grid4 .col:nth-of-type(4n+1) - دستور زیر ستون های3 ام از ستون 1 را انتخاب می نماید. .grid3 .col:nth-of-type(3n+1) - دستور زیر ستون های 2 ام از ستون 1 را انتخاب می نماید. .grid2 .col:nth-of-type(2n+1) طراحی سایت موبایل .grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } سازگاری با موبایل توسط Media Queries /* col */ .col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; } /* grid4 col */ .grid4 .col { width: 22.6%; } /* grid3 col */ .grid3 .col { width: 31.2%; } /* grid2 col */ .grid2 .col { width: 48.4%; } تبدیل 4 ستونه به 3 ستونه برای تبدیل 4 ستونه به 3 ستونه که عرض آن کمتر از 740px می باشد 1. تبدیل عرض .grid4 .col به 31.2% 2. بازنویسی left margin و clear 3. ست نمودن مجدد left margin و clear property توسط دستور nth-of-type(3n+1) برای ایجاد قالب سه ستونه @media screen and (max-width: 740px) { .grid4 .col { width: 31.2%; } .grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; } .grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; } } تبدیل 4 ستونه و 3 ستونه به 2 ستونه برای تبدیل 4 ستونه به 3 ستونه و 2 ستونه که عرض صفحه کمتر از 600px باشد نیز به همان روش بالا اقدام نمایید. @media screen and (max-width: 600px) { /* change grid4 to 2-column */ .grid4 .col { width: 48.4%; } .grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; } .grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } /* change grid3 to 2-column */ .grid3 .col { width: 48.4%; } .grid3 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; } .grid3 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } } تمام عرض کردن تمامی ستون ها برای تمام عرض کردن کلیه ستون ها که رزولوشن صفحه آنها از 400px: کمتر است می بایست به روش زیر اقدام شود. @media screen and (max-width: 400px) { .col { width: 100% !important; margin-left: 0 !important; clear: none !important; } } مشکلات اینترنت اکسپلورر هم media queries and nth-of-type توسط اینترنت اکسپلورر 8 به پایین پشتیبانی نمی شود. شما می توانید از selectivizr.js برای nth-of-type و respond.js برای media queries به جهت پشتیبانی اینترنت اکسپلورر استفاده نمایید. هر دوی selectivizr.js and respond.js متاسفانه به یکدیگر به خوبی کار نمی کنند بنابراین ستون بندی ها از 4 به 3 و 2 تغییر نمی یابند. البته فقط در اکسپلورر. لینک منبع: صفحات وب سایت سازگار موبایل (ریسپانسیو)

دليل اول – وجود وب سايت، اعتبار شما را اقزايش مي دهد. وب سايت تائير قوي بر اعتماد مشتري هاي بالقوه دارد. يک طراحي حرفه اي، متن مناسب با توشتار خوب، اطلاعات مقيد از محصولات و اطلاعات تماس مناسب باعث افزايش اعتماد مشتريان به شرکت شما مي شود. به مردم مي فهماند که شما داراي دانش و به روز هستيد. اگر شما در طراحي يک سايت با کيفيت و داراي اطلاعات مفيد هزينه کنيد، مردم حتما تحت تاثير قرار خواهند گرفت. دليل دوم – وب سايت باعث مي شود شرکت شما در هر زمان و از هر مکان قابل دسترس باشد. تا آوريل سال 2002 ميلادي، فقط در آمريکا، 166 ميليون نفر از مردم روي خط بوده اند. برخي از آنها در جستجوي محصولات و خدمات شما هستند. با داشتن يک سايت وب، شما شرکت خود را براي دنيايي از فرصتها براي دسترسي مردمي که غير از سايت شما راهي ديگر براي رسيدن به شما ندارند آماده مي کنيد. با کليک ساده موس، هر کسي مي تواند در 7 روز هفته و 24 ساعت شبانه روز به شرکت شما دسترسي داشته باشد. دليل سوم – وجود وب سايت سهولت ارجاع مشتريان جديد به شرکت شما را فراهم مي کند. براي بسياري از تجارتها، يک منبع حياتي براي يافتن مشتريان جديد، ارجاع سايرين است. داشتن وب سايت اين امکان را فراهم مي کند که مردم به راحتي سايت شما را به ديگران ارجاع دهند. آدرس وب سايت راحت تر از شماره تلفن به خاطر مي ماند به علاوه دادن راه هاي مختلف تماس با شما به مردم، امکان برقراري تماس را بيشتر مي کند. دليل چهارم – وب سايت يک ابزار قوي فروش است. فروش محصولات از طريق يک فروشگاه اينترنتي يک راه بسيار عالي براي افزايش فروش است. شما يک ويترين دائمي و سهل الوصول که هزينه آن خيلي کمتر از يک فروشگاه آجري است داريد ضمن اينکه مردم بيشتري امکان دسترسي به آن را دارند. وجود اطلاعات فروش موثر در وب سايت شما، امکان وادار شدن مردم به کليک روي دکمه خريد را افزايش مي دهد. هرچند که شما از طريق اينترنت نتوانيد فروش انجام دهيد، وب سايت شما يک سرمايه مهم است. وب سايت شما يک شروع براي متقاعد کردن بازديد کنندگان به نياز آنها به محصولات شما است. شما آنها را براي خريد تحريک مي کنيد سپس از آنها دعوت مي کنيد که با شما تماس بگيرند. دليل پنجم – وب سايت باعث افزايش ارزش تبليغات شما مي شود. اضافه کردن آدرس وب سايت در تبليغات، کارت تجاري و امضاء شرکت، يک راه خوب براي جلب مشتري به شرکت شما است. داشتن آدرس سايت به مردم کمک مي کند که هر زمان که در مورد شما مي شنوند و يا تبليغات شما را مي بينند، به پيام شما عکس العمل نشان دهند. مراجعه به وب سايت شما راحت تر از نوشتن نامه يا رفتن به مغازه يا حتي تلفن زدن به شما است. مردم اطلاعات شما را به راحتي دريافت مي کنند و نيازي نيست براي آقاي فروشنده براي کمک صبر کنند. همچنين بازديد از وب سايت خيلي راحت است چون هيچ مغذوريتي وجود ندارد و بازديد کنندگان تحت فشار نيستند. دليل ششم – وب سايت به شما کمک مي کند با مشتريان بالقوه در ارتباط باشيد. مردم زيادي وجود دارند که به آنچه شما ارائه مي کنيد علاقمند هستند ولي ممکن است هم اکنون براي خريد آمادگي نداشته باشند. شما بايد با آنها در ارتباط باشيد تا زماني که آنها براي خريد آمادگي يافنتد، با خبر شويد. وب سايت يک روش عالي براي تسهيل اين فرايند است. شما مي توانيد از طريق وب سايت خود آدرس تماس مشتريان بالقوه را جمع آوري کنيد. سپس مي توانيد به تناوب، نامه يا خبرنامه برايشان ارسال کنيد. در ارتباط ماندن با مردم به تازه ماندن شرکت شما در اذهان کمک مي کند. خوب، شما هر شش راهي را که وب سايت شما به تجارت شما کمک مي کند را مي دانيد. آيا مي خواهيد اين فرصت را براي رقيبان خود رها کنيد ؟ حتما جواب شما منفي است. هر روز که صبر کنيد، به رقبا اين اجازه را که در حيطه فعاليت شما روي خط باشند داده ايد. همين امروز اين اجازه را از آنها صلب کنيد. نويسنده: علي ميرشاهي منبع