6 راه کلیدی برای مدرن شدن

مدل جعبه

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

ستون‌های شناور

وقتی موقعیت‌دهی دقیق به نتیجه نمی‌رسد، مردم دو کار را انجام می‌دهند، فورا به‌حالت ویندوزی بازخواهند گشت، یا راه‌حل دیگری را انتخاب می‌کنند:

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

اندازه‌گیری با اندازه‌های ‌EM‌

معیار ‌em‌ برای طراحی وب، بسیار مهم است. یادتان باشد که حتما دو چیز را با ‌em‌ مقداردهی کنید: فونت‌ها و طرح‌بندی‌ها.

اینترنت اکسپلورر 6 و قبل از آن، تغییر اندازه متونی که با مقیاس پیکسل طراحی شده‌اند را مجاز نمی‌داند. در این حالت حالت ‌Larger Text‌ برای کاربران کار نمی‌کند. اما وقتی با ‌em‌ مقداردهی می‌کنید، این مشکل حل می‌شود. یکی دیگر از اهمیت‌های اندازه‌دادن به متون با مقیاس ‌em‌، تا زمانی که کاربران به مرورگرهای جدیدتر نرفته‌اند، از بین نمی‌رود. ‌ ‌

اندازه طرح‌بندی‌ها را با ‌em‌ مشخص کردن، مزایای بیشتری دارد و انعطاف بیشتری حاصل می‌شود. وقتی با اندازه متون بازی می‌کنید، حتما دیده‌اید که در بسیاری از سایت‌ها، متن بزرگ می‌شود اما پس‌زمینه و بک‌گراند بزرگ نمی‌شود، این به‌این خاطر است که متن را با مقیاس نسبی ‌pt(،(em‌،‌ مقدار دهی کرده‌اند و طرح‌بندی را با مقیاس مطلق (پیکسل.) در این حالت، متون از پس‌زمینه بیرون می‌زند و طرح درهم می‌رود. به‌سادگی می‌توان با مقدار دهی ‌em‌ این مشکل را حل کرد و به پایایی طراحی در مرورگرها، رزولوشن‌ها و محیط‌های مختلف، افزود.

جایگزینی عکس

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

منوهای شناور

اگر توانستید در ستون‌های شناور مهارت کافی را کسب کنید، بخش دیگری که بسیار هم هنر می‌خواهد، منوهای شناور است. بسیاری از حرفه‌ای‌های دنیای طراحی وب، از لیست‌های مرتب‌نشده منوهای فوق‌العاده می‌سازند و می‌توانید منوهای ‌CSS‌ زیادی را به‌طور آماده پیدا کنید و آن‌ها را مطابق میل خود در آورید.

نوار مهم است

اگر به‌قدر کافی کنجکاو بودید و فایل‌های پس‌زمینه ‌(Texture)‌ بازی‌های ویدئویی را باز می‌کردید، قطعا متوجه می‌شدید که تعداد زیادی از انواع مختلف پس‌زمینه را کنار هم قرار داده و یک‌جا لود می‌کنند و به‌ازای نیاز هر جسم، تکه‌ای از فایل را به جسم مورد نظر اختصاص می‌دهند. چسباندن چند عکس به یکدیگر و گذاشتن توی یک‌عکس دیگر به یک تکنیک محبوب برای حل مشکلات‌ ‌بدل شده است. بدین ترتیب، می‌توانید لوگو، آیکن‌ها، لبه‌های کناری منوها، لبه‌های بالا و پایین جعبه‌های اخبار و ... را توی یک فایل بگذارید و بعد با مقدار دهی مختصات، آنها را سر‌جای خود بگذارید.

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

محمدحسین کردونی