این روزها استفاده از موبایل ، تبلت و یا سایر تجهیزات همراه برای مرور و مشاهده صفحات وب سایت ها بسیار همه گیر شده است و اکثر طراحان وب برای طراحی سایتهایشان نیز تمایل دارند تا وب سایت هایی که طراحی میکنند در انواع تبلت ، موبایل و یا وسایل دیگر قابل مشاهده و استفاده باشد. در واقع شما با استفاده از اصول طراحی ریسپانسیو (Responsive) یا همان وب واکنشی قادر هستید تا محتویات صفحات وب سایت خود را با توجه به نوع وسیله مورد استفاده بازدیدکننده وب سایت تنظیم کنید.
طراحی وب واکنشی Responsive Web Design بخش اول: مفاهیم
فرض کنید وب سایت شما تنها در مرورگرهای رایج توسط کامپیوترهای شخصی به درستی نمایش داده شود. حال اگر برخی بازدیدکنندگان سایت شما از تبلت و یا موبایل های هوشمند امروزی برای مشاهده سایت شما استفاده کنند و صفحات وب سایت شما به درستی نمایش داده نشوند طبیعتا این دسته از بازدیدکنندگان از سایت شما خارج می شوند و این به معنی از دست دادن این بازدیدکنندگان و حتی در برخی مواقع مشتریان خواهد بود.
طراحان وب سایت در طراحی سایت با استفاده از ترکیب برخی موارد در CSS و ترکیب آنها با جداول شناور (Fluid Grid) میتوانند طراحی سایت خود را به صورتی طراحی کنند که در تمامی وسایل و تجهیزات به درستی نمایش داده شوند و این یعنی طراحی واکنشی (طراحی سایت ریسپانسیو) و یا همان Responsive Web Design که در مورد آن صحبت میکنیم. معمولا در این نوع طراحی بزرگترین مشکل نمایش صحیح تصاویر در مرورگرها و تجهیزات مختلف با صفحه نمایش های متفاوت است. اما شما با استفاده از دستورات نمایش به صورت کامل مانند: max-width میتوانید این کار را انجام دهید. در واقع تصاویر شما همواره در اندازه واقعی خود نمایش داده میشوند مگر آنکه در فضای کوچکتری قرار گیرند.
در روش Responsive شما میتوانید فایل های CSS گوناگونی را برای نمایش سایت بر روی دستگاه های مختلف فراخوانی کنید. به عنوان مثال برای نمایش بر روی موبایل یک فایل CSS و برای نمایش در یک دستگاه دیگر از یک نوع فایل CSS دیگر استفاده نمایید. نمایش در گوشی موبایل در حالت معمولی و بعد از لمس منو (منو از سمت چپ به داخل باز می شود)
طراحی سایت با طراحی وب واکنشی بخش دوم: جداول شناور
بعد از یادگیری مفاهیم اولیه در بخش قبلی، حال می توانیم سراغ مفهوم Fluid Grid برویم و آن را باهم بیاموزیم. در این روش با استفاده از واحد های نسبی (Relative Units) به جای واحد های ثابت مانند: px, cm, mm و... سعی می کنیم ساختار قالب وب سایت نسبت به اندازه صفحه نمایشی که در آن نمایش داده می شود تغییر خواهد کرد. به عبارتی با تغییر اندازه صفحه نمایش، سایت کوچکتر یا بزرگتر می شود. برای شروع ساختار زیر را در نظر بگیرید:
- • یک صفحه ساده با اندازه کلی 960px
- • منو اصلی در سمت چپ با اندازه 215px و فاصله از اطراف با اندازه 20px
- • مطالب اصلی در سمت راست با اندازه 685px و فاصله از اطراف با اندازه 20px
- • بخش کناره به اندازه 215px در داخل بخش مطالب اصلی و فاصله از اطراف با اندازه 20px
برای رسیدن به Fluid Grid باید ابتدا تمامی اندازه ها را به اندازه های نسبی تبدیل کنیم. در این بخش از % درصد استفاده می کنیم. برای مثال: width: 90% به این معنی است که طول المنت ما نود درصد طول پدر خود را پر کند. برای تبدیل تمامی اندازه المنت به مقادیر نسبی میتوانید از فرمول زیر استفاده کنید:
هدف ÷ پدر * 100 = درصد
حال این فرمول را به کار میگیریم و مقادیر را محاسبه می کنیم:
- • منو اصلی: 215/960 × 100 = 22.3958333333%
- • مطالب اصلی: 685/960 × 100 = 71.3541666667%
- • بخش کناره: 215/685 × 100 = 31.3868613139%
- • فاصله منو اصلی و مطالب اصلی از اطراف: 20/960 × 100 = 2.0833333333%
- • فاصله بخش کناره از اطراف: 20/685 × 100 = 2.9197080292%
توجه داشته باید که برای محاسبه مقادیر "بخش کناره " و "فاصله بخش کناره از اطراف" مقدار پدر را در فرمول 685 یعنی مقدار عرض بخش مطالب اصلی قرار دادیم چون بخش کناره طراحی سایت در داخل بخش مطالب اصلی قرار دارد در نتیجه طول آن نسبت به این المنت محاسبه می شود. در آخر با جایگزینی این مقادیر به جای مقادیر قبلی نتیجه دلخواه ما حاصل می شود. که قالبی ست به صورت Fluid Grid که با کوچک و بزرگ شدن اندازه صفحه نمایش نسبت به آن تغییر اندازه خواهد داد. در بخش بعدی به بررسی نحوه استفاده از Media Queries ها خواهیم پرداخت.
طراحی وب واکنشی(طراحی ریسپانسیو) بخش سوم: CSS3 Media Queries
بعد از یادگیری جداول شناور (Fluid Grid) در بخش قبلی، حال می توانیم سراغ مفهوم CSS3 Media Queries برویم و آن را باهم بیاموزیم. در این مفهوم هدف ما اعمال شیوه (style) های خاصی به سند با توجه شرط هایی که ما تعیین می کنیم.
به قالب طراحی سایت زیر توجه کنید:
همانگونه که مشاهده می کنید عرض بخش اصلی سایت در مانیتور های با پهنای بیشتر از 1024 به صورت معمولی با پهنای 980 خواهد بود. در صورتی که در همین وب سایت در مانیتور های با پهنای کوچکتر یا موبایل پهنای بخش اصلی سایت کوچکتر شده است. و همچنین می بینید که در موبایل ستون سمت راست نیز به پایین بخش اصلی رفته است. این امکانات با استفاده از Media Query ها در طراحی سایت فراهم می شود. ساختار کلی Media Query ها به صورت زیر است:
@media [شرط ها] {
body {
background-color: red;
}
// Other styles
}
در بخش ]شرط ها[ می توانید شرط هایی روی عرض یا ارتفاع صفحه و... نمایش نوشت:
@media screen and (max-width: 980px) {
body {
background-color: red;
}
// Other styles
}
در کد بالا استایل زمانی به body اعمال میشود که عرض صفحه نمایش حد اکثر 980px باشد. و همچنین شرط screen به این معنی است که تنها برای صفحه نمایش های رنگی کامپیوتر یا گوشی های هوشمند اعمال کردد. Media Query ها را علاوه بر استفاده در تگ های <style> که در بالا دیدیم در تگ های <link> نیز به صورت زیر قابل استفاده است:
<link rel='stylesheet' media='screen and (min-width: 980px)' href='styles.css' />
با استفاده این روش می توانید تمامی شیوه (style) هایی که می خواهد با شرط های خاصی به صفحه اعمال شوند در یک فایل قرار داده و آن را به روش در صفحه معرفی کرد. بخش ]شرط ها[ در Media Query امکانات و ویژگی ها فراوانی است
|
Description
|
Media Type
|
|
Used for all media type devices
|
All
|
|
Used for speech and sound synthesizers
|
aural
|
|
Used for braille tactile feedback devices
|
braille
|
|
Used for paged braille printers
|
embossed
|
|
Used for small or handheld devices
|
handheld
|
|
Used for printers
|
print
|
|
Used for projected presentations, like slides
|
projection
|
|
Used for computer screens
|
screen
|
|
Used for media using a fixed-pitch character grid, like teletypes and terminals
|
tty
|
| |
Used for television-type devices
|
|
tv
|
در بخش بعدی سعی می کنیم صفحه ای با 4 ستون را با استفاده از Media Query ها به صورت Responsive طراحی کنیم. برای مشاهده نمونه اجرا شده طراحی وب واکنشی (Responsive) می توانید از وب سایت گروه هتل الماس یکی از نمونه کاری های شرکت داده پردازی فراتک دیدن فرمایید: HotelAlmas.com
طراحی سایت با طراحی وب واکنشی بخش چهارم (آخر) CSS3 Media Queries
بعد از یادگیری Media Query ها در طراحی سایت در بخش قبلی، حال می توانیم با استفاده از این ویژگی در طراحی سایت یک قالب ساده با 3 ستون و Header را ریسپانسیو کنیم. به شکل کلی قالب توجه کنید:
همانگونه که می بینید در طراحی سایت تمامی اندازه ها به صورت درصدی وارد شده است. حال با استفاده از Media Query ها در طراحی سایت شروع به ریسپانسیو کردن قالب می کنیم. در ابتدا یک مفهوم به نام viewport آشنا شویم. این لغت به معنی محدوده نمایش صفحه برای کاربر است. برای نمایش سایت در گوشی های موبایل، تبلت ها و ... باید تک متا viewport را برای تنظیم محدوده نمایش سایت به صفحه خود اضافه کنید. این تگ باعث می شود که محدوده viewport برای عرض دستگاه تنظیم گردد. و با مقدار دهی device-width به تگ viewport به مرورگر می گوییم عرض دستگاه را با عرض صفحه نمایش یکی کن مثلا اگر عرض دستگاه 320px است، به جای آن که مقدار پیش فرض 980px را به عرض صفحه اختصاص دهد همان مقدار را به عرض صفحه اختصاص بدهد.
حال با استفاده از آموزش های بخش قبلی مقاله (بحث Media Query ها( شروع به نوشتن کد های Media Query می کنیم. در ابتدا با کوچک کردن مرورگر خود متوجه می شوید که سایت نیز تغییر اندازه می دهد. ولی توجه به این نکته ضروری است که با کوجک شدن سایت از عرض مثلا 1024px به پایین ستون های راست و چپ خیلی کوچک می شوند و عملا باید یکی از ستون های را برای نمایش بهتر سایت حذف کرد. این کار را با کد زیر می توانید انجام دهیم:
همانگونه که مشاهده می کنید در طراحی وب سایت در عرض پایین تر از 1024px با اعمال کد بالا اندازه Box را افزایش و ستون سمت چپ را حذف می کنیم که باعث نمایش بهتر و خواناتر سایت در گوشی های همراه و تبلت ها و ... خواهد شد. با بیشتر کوچکتر کردن مرورگر متوجه می شویم که در عرض پایین از 480px ستون سمت راست نیز خوانایی مناسب را ندارد و باید حذف گردد. پس با اعمال کد زیر سایت به شکل زیر در خواهد آمد:
در این بخش از آموزش طراحی سایت با طراحی وب واکنشی توانستیم یک قالب ساده را ریسپانسیو کنیم. توجه داشته باید قالب های دیگر با توجه به پیچیدگی، طبیعتا زمان و توجه بیشتری نیاز دارد.
برای مشاهده نمونه اجرا شده طراحی سایت با طراحی وب واکنشی (Responsive) می توانید از وب سایت گروه هتل الماس مشهد یکی از طراحی سایت های شرکت داده پردازی فراتک دیدن فرمایید: طراحی سایت هتل الماس مشهد شرکت داده پردازی فراتک با طراحی بیش از 500 وب سایت، در سال های فعالیت خود و با به کارگیری این تکنولوژی آماده ارائه خدمات در زمینه طراحی وب سایت با ویژگی های منحصر به فرد است. از نمونه طراحی سایت ما دیدن فرمایید.
نویسنده: واحد تحقیق و توسعه شرکت داده پردازی فراتک (طراحی سایت - طراحی سایت مشهد)