-
نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید
-
تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.
-
00
-
بازدید این صفحه : ۴۵۲۲تاريخ نشر : 17 ارديبهشت 1393
نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید
تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.
تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.
http://en.wikipedia.org/wiki/Responsive_web_design
طراحی ریسپانسیو امروزه بسیار گسترش پیدا کرده که به دلیل استفاده بسیار و در حال افزایش کاربران از موبایل و تبلت برای رویت وب سایت می باشد. طبق این منبع در سال 2012 55% از کاربران در سال 2012 از موبایل برای مرور وب استفاده می کرده اند و 31 درصد از کاربران اذعان داشتند که وسیله پیش فرض مرور وبشان موبایل می باشد. پس در صورتی که در مورد طراحی وب سایت ریسپانسیو سوالی دارید ادامه دهید.
طراحی ریسپانسیو چیست؟
قبل از همه باید بدانید وب سایت ریسپانسیو و یا واکنش گرا چیست. وب سایت واکنش گرا وب سایتی است که خود را سازگار با سایز صفحه نمایش کاربر می سازد. به دلیل استفاده بسیار از تبلت و مرورگرهای موبایل برای مرور وب طراحان وب مجبور شدند سایت را به گونه ای طراحی نمایند که در صفحه کوچک موبایل به خوبی نمایش داده شود. به همین دلیل از media queries استفاده شد تا سایر دستگاه کاربر را مشخص نماید و از تصاویر و صفحه بندی انعطاف پذیر در سایزهای مختلف استفاده شد.
طراحی ریسپانسیو به معنی سایت نسخه موبایل نیست
برای برخی سایت ها به صورت جداگانه نسخه ای برای موبایل طراحی می گردد و زمانی که کاربر با موبایل سایت را مشاهده می نماید به آدرس دیگری هدایت می شود که نسخه مخصوص موبایل وب سایت می باشد. ولی در طراحی ریسپانسیو کاربر سایت را در همان آدرس و با ترکیب مناسب موبایل مشاهده می نماید و کاربر به آدرس دیگری ارجاع داده نمی شود. که بر طبق نظر گوگل طراحی ریسپانسیو بهترین نوع برای ایجاد نسخه سازگار با موبایل وب سایت است.
جعبه های شناور
جعبه ها و یا باکس های شناور به پیاده سازی سایت ریسپانسیو کمک می نماید. به این صورت که صفحه به ستون های مختلف شناوری تقسیم می گردد و زمانی که عرض صفحه کوچک شده ستون ها بر روی هم حرکت می نمایند و کاربر کافی است در صفحه اسکرول عمودی نماید تا کلیه مطالب را مطالع نماید. المان هایی از صفحه که در حالت عادی عرض بیشتری دارند با توجه به تغییر عرض صفحه تغییر سایز می کنند تا در عرض مورد نظر بدون نیاز به اسکرول افقی یه خوبی نمایش داده شوند.
تصاویر و فونت ها نیز می بایست ریسپانسیو باشند
استفاده از تصاویر در سایت ریسپانسیو به خودی خود آنها را ریسپانسیو نمی نماید. توسط برخی از کتابخانه ها نظیر Bootstrap می توان این کار را به صورت اتوماتیک انجام داد. برای فونت ها نیز می توان از rems به جای px استفاده نمود. با تعیین سایز فونت صفحه به صد درصد
html {font-size: 100%;}
می توانید از استفاده نمایید تا سایز فونت ها را مطابق با عرض صفحه تعیین نماید.
@media (max-width: 640px) {body {font-size: 1.2rem} } @media (max-width: 1100px) {body {font-size: 1.5rem} }
استفاده از فریم ورک ها همه چیز را ساده می سازد
در دنیای ریسپانسیو فریم ورک هایی وجود دارند که با استفاده از آنها می توانید لایه بندی و قالب سایت خود را طراحی نماید. در حقیقت قالب هایی هستند که موارد پیش فرض در آنها رعایت گردیده و شما مطمئن خواید بود که سایت شما با مرورگرهای مختلف سازگاری کامل دارد. برخی از این فریم ورک ها به وصورت کامل طراحی شده اند و می توانید با تغییرات کوچکی در آن قالب مورد نظر خود را پیاده سازی نمایید. در زیر چند نمونه را برای شما آورده ام:
http://foundation.zurb.com
http://gumbyframework.com
http://www.getskeleton.com
ایمیل ها نیز می توانند ریسپانسیو باشند
با توجه به افزایش استفاده از موبایل برای چک کردن و بررسی ایمیل، ایمیل های ارسالی نیز می بایست در موبایل ظاهر مناسبی داشته باشند. می توان با استفاده از استفاده از المان های خاصی ایمیل را نیز ریسپانسیو و سازگار با عرض صفحه نمود. همچنین می توان با استفاده از امکان جعبه های شناور و بدون استفاده از کتابخانه خارجی ایمیل های ریسپانسیو طراحی نمود.
نظر شما
0
0
بازدید این صفحه : ۴۵۲۲
تاريخ نشر : 17 ارديبهشت 1393
-
خدمات طراحی سایت
-
ویترین اخبار
- راه اندازی سایت نشریه الکترونیک فرهنگ انقلاب اسلامی
- ملاک شناخت یک شرکت طراحی سایت قوی و توانا برای راه اندازی سایت اینترنتی شما چیست؟
- فرا رسیدن نوروز باستانی، یادآور شکوه ایران و یگانه یادگار جمشید جم بر همه ایرانیان پاک پندار، راست گفتار و نیک کردار خجسته باد
- راه اندازی وب سایت اینترنتی ماشین سازی درستگاههای تولید آرد
- راه اندازی وب سایت اینترنتی ملک آریا
- 7 مورد از قابلیتهای غیرمنتظره در iOS 7
- Apex در برابر Nova: مقایسه دو لانچر اندروید
- پاداش 15,000 دلاری برای شکستن قفل TouchID
- نیکون از AW1، اولین دوربین ضد آب با قابلیت تعویض لنز، پرده برداشت
- لومیا 1520 نوکیا و این بار مشخصات فنی، قیمت و زمان عرضه
- رکورد فروش موبایل در دست 8 مدل
- اپل در حال تست نسخه های 701 و702 و 71 سیستم عامل iOS؟
- علت دقیق سرعت پایین اینترنت را نمیدانیم
- بررسی اکسپریا Z1 سونی
- آموزش ساخت ایمیل یاهو پس از حذف ایران!
- سهام توییتر روانه بازار بورس میشود
- تبلیغات تازه مایکروسافت علیه آیفون شکست خورد
- مدیرعامل اینتل: تبلتهای زیر 100 دلاری در تعطیلات سال نوی میلادی از راه میرسند
- 27 شهریور iOS 7 برای آیفونها و آیپدها منتشر میشود
- کنسول بازی جدید سونی با قابلیت های جذاب و قیمت مناسب معرفی شد: Vita TV
- کمپانی دل برای چینی ها لب تاب لوحی می سازد!!!
- ایسوس فون پد 7 اینچی جدید را معرفی کرد: تبلت/تلفن هیبریدی با اسپیکر دو کاناله
- یاهو لوگوی جدید خود را رونمایی کرد
- ایسوس از لپتاپ لمسی و ارزان قیمت X102BA با پردازنده AMD پرده برداشت
- دوباره Moto X و این بار تصویر رندر شده تبلیغاتی آن [بروز شد]
- ولخرجیهای گوگل در حوزه دیتاسنتر ادامه دارد: 6-1 میلیارد دلار در سه ماهه دوم 2013
- تشکیل گروه جهانی« طراحی فناوریهای پوشیدنی» در موتورولا، با استناد به آگهی استخدام این شرکت
- آشنایی با سیستمفایلها و نحوه فرمتکردن درایوهای خارجی در مک
- سرفیس RT هنوز نمرده است
- دانلود کنید: اپلیکیشن VLC برای کاربران iOS منتشر شد
- بررسی همهجانبۀ شایعات پیرامون ساعتهای هوشمند
- تصاویر واضح از آیفون ارزان قیمت در کنار آیفون 5 فاش شد
- تبدیل تصاویر به فرمت ICO و استخراج آیکونها از فایلهای با فرمت EXE و DLL
- نسخه جدید اندروید در 2 مردادماه معرفی میشود
- ال جی از نام G2 برای پرچمدار بعدی خود استفاده میکند
- مشخصات فنی و بنچمارک گلکسی نوت 3 فاش شد
- تصویر و مشخصات جدید آیفون 5S به بیرون درز کرد: صفحه نمایش IGZO، دوربین 12 مگاپیکسل، پردازنده سریعتر و پردازنده گرافیکی چهار هستهای
- آیا میتوان پس از مرگ اطلاعات با ارزش را در اختیار خانواده، دوستان و آشنایان قرار داد؟
- تصاحب Omek توسط اینتل ممکن است باعث شود هرگز نیاز به لمس کامپیوتر خود نباشید
- نسخه جدید تحت وب نقشه گوگل در دسترس همگان قرار گرفت
- تلفن G2 ال جی مجهز به باتری 2540 میلی آمپر ساعتی است
- جزئیات بیشتر از دوربین 20 مگاپیکسلی هونامی: سنسوری بزرگ ولی نه به اندازهی لومیا 1020
- مرور تاریخچه دوربین در گوشیهای برجسته نوکیا
- دریافت استاندارد و رتبه 6 از 10 گوگل توسط سایت شرکت راوک نگار پارس
- بروزرسانی تعدادی از جدیدترین نمونه آثار طراحی سایت های هوشمند راوک نگار پارس
-
نماد اعتماد الکترونیکی
-
آمار بازدید
- کل (online):۸۹۵
- اعضاء (online):۳
- میهمان (online):۸۹۲
- بازدید امروز::۹۸۴
- بازدید دیروز::۹۵۶
- بازدید کل::۲۸۸۶۳۸۷۰
-
تبلیغات