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

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

1. حفظ طرح و نام تجاری (برند)

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

1. ماهیت برند شما چیست؟ (مثلاً رسمی است یا فانتزی)
2. اگر وب سایت شما حول یک پروژه می چرخد، چه نوع پروژه ای است. کوتاه مدت است یا بلند مدت؟ زیرا، این احتمال وجود دارد که یک پروژه بلندمدت (مثلاً یک مجله یا یک خبرنامه) نیاز های بیشتری نسبت به پروژه کوتاه مدت داشته باشد و ممکن است با گذشت زمان نیاز به تغییر تایپ فیس داشته باشد. بنابراین، بهتر است یک خانواده فونت بزرگ با انواع و وزن‌ های مختلف انتخاب کنید تا گزینه‌ های متفاوتی در اختیار داشته باشید. اما، اگر روی یک پروژه کوتاه‌ مدت کار می‌کنید (مانند راه‌اندازی محصول یا یک کمپین بازاریابی)، پس پایبندی به نسخه‌های فونت ساده بدون وزن اضافی ممکن است کافی باشد.

2. توجه به کیفیت و خوانایی

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

همچنین، بسیار مهم است که حروفی را انتخاب کنید که در اندازه‌ ها و وزن‌ های مختلف به خوبی کار کند تا خوانایی در هر اندازه حفظ شود (بررسی کنید که حروفی که انتخاب می‌کنید در صفحه‌ های کوچک‌ تر خوانا باشد!).

سعی کنید از به کار بردن فونت هایی که از خط شکسته استفاده می کنند. مانند: Vivaldi (در مثال زیر) اجتناب کنید. هرچند، زیبا هستند. اما خواندن آن ها دشوار است.

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

3. انتخاب فونت Serif در مقابل Sans

معمولاً یکی از اولین تصمیماتی که هنگام انتخاب یک تایپ برای متن انجام می شود، انتخاب فونت Serif یا Sans است؟ در حالی که نوع انتخاب شما تا حد زیادی به مخاطب هدف شما و حالتی که می خواهید با طراحی فونت خود ایجاد کنید، بستگی دارد. مهم ترین نکات در انتخاب نوع آن بستگی به موارد زیر دارد که عبارت اند از:

• یکی از مهم ترین نکات طول نسخه شما است و انتخاب فونت Serif برای کپی طولانی راحت تر از san ها خوانده می شوند. بنابراین، فونت های Serif به حرکت چشم در یک خط کمک می کنند، به خصوص اگر خطوط طولانی باشند. در اینجا چند تایپ Serif امن وجود دارد که عبارت اند از:
  • Georgia
  • Lucida
  • Times New Roman
• همچنین در این بخش، در نظر گرفتن مخاطب هدف نیز مهم است. انتخاب Sans برای کودکان خردسال یا افرادی که تازه خواندن را یاد می گیرند، ترجیح داده می شود. همچنین، برای خوانندگانی که دارای اختلالات بینایی خاصی هستند، استفاده از آن مفید است.
• در نهایت، فونت Times New Roman به طور ویژه در دسته فونت های کلاسیک ایمن وب قرار می گیرد. به طور کلی، در انتخاب انواع فونت پیش‌فرض مانند این اشتباه نمی‌کنید. زیرا، معمولاً خواندن آن‌ها آسان است و برای مدت طولانی در دسترس بوده‌اند. بنابراین، بسیاری از کاربران اینترنت به آن ها عادت کرده‌اند.

با این حال، اگر ترجیح می دهید رویکرد جسورانه تری را امتحان کنید، توصیه می کنیم فونت هایی مانند: Noe Display، Freight Text یا مجموعه Portrait را بررسی کنید. البته، همیشه در گوگل فونت هایی مانند: Playfair Display، Cormorant Garamond یا Crimson Text وجود دارد که می‌توانید به صورت رایگان از آن ها استفاده کنید.

هرچند، به کار بردن “فونت های امن وب” (فونت هایی که به طور پیش فرض توسط همه مرورگر های وب اصلی پشتیبانی می شوند) یک شرط مطمئن است. اما، در اینجا چند تایپ بدون ایمنی وجود دارد که می توانید با آن ها نیز شروع کنید:

• Arial
• Tahoma
• Verdana

4. در نظر گرفتن هدف طراحی وب و مخاطبان

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

• آیا می‌خواهید کاربردی بودن را هدف قرار دهید؟ پس به سراغ یکی از فونت‌ های ایمن وب بروید.
• اما، اگر می‌خواهید از بقیه متمایز شوید؟ پس فونت منحصر به‌ فرد تری را امتحان کنید؟

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

5. ایجاد تنوع بصری (از به کار بردن فونت مشابه خودداری کنید)

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

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

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

در اینجا چند نکته برای جفت کردن فونت وجود دارد:

برای ایجاد تنوع شما می توانید از به کار بردن فونت های خیلی مشابه خودداری کرده و به ترکیب فونت ها فکر کنید. از آنجا که هر فونتی ویژگی متمایز خود را دارد. بنابراین، هنگام جفت کردن فونت های مختلف باید چندین نکته را در نظر گرفت که عبارت اند از:

• هنگام انتخاب دو فونت، از کنتراست استفاده کنید: انواع مختلف کنتراست شامل: اندازه، وزن (پررنگ جلوه دادن قسمت‌های خاصی از متن)، رنگ، فرم (مثلاً حروف بزرگ یا کوچک) و ساختار (اشکال مختلف مخلوط با حروف مختلف) است و در طراحی وب تایپوگرافیک، از روش های مختلف کنتراست برای تأکید بر قسمت های مختلف متن (با این هدف که قسمت های مهم بیشتر برجسته شوند) استفاده می شود. بنابراین، هنگام ترکیب دو فونت بسیار متفاوت، ایجاد سلسله مراتب نکته کلیدی آن است. یکی از فونت ها باید برجسته تر از دیگری باشد و این را می توان با تغییر اندازه و وزن هر فونت به دست آورد. ترکیب سریف با sans serif یک حرکت کلاسیک است.
  • به عنوان مثال: ممکن است ترکیب دو فونت با حالت های مختلف (استفاده از فونت های متضاد) ایده خوبی باشد. بنابراین، سعی کنید انواع فونت های بی رنگ را با فونت های خنثی تر و ضعیف تر ترکیب کنید.
  • یکی دیگر از ترکیب های خوب که به ندرت می توانید از آن استفاده کنید، ترکیب فونت سریف و سان سریف است. جفت کردن فونت‌ها تماماً به ایجاد کنتراست می‌پردازد، و ترکیب سریف‌ها و سان‌سریف‌ها برای ایجاد یک تفاوت ظریف، اما متمایز کافی هستند.
• از فونت هایی با خانواده یکسان استفاده کنید: برخی از فونت ها جدی‌تر و برخی دقیق‌تر به نظر می‌رسند. اما، فونت ها در وهله اول به گونه ای ساخته شده اند که با هم ترکیب شوند. به همین دلیل جفت کردن فونت‌ های یک خانواده می‌تواند به شما کمک کند تا حس سازگاری بیشتری داشته باشید. بنابراین، اگر هنوز مطمئن نیستید که چه فونت هایی را با هم ترکیب کنید، می توانید از فونت هایی که خانواده یکسانی دارند، استفاده کنید. این فرآیند طراحی یک وب‌سایت را بسیار آسان‌ تر می‌کند.
• استفاده از ابزار های آنلاین: همچنین، اگر برای جفت کردن فونت ها به کمک نیاز دارید، چندین ابزار آنلاین عالی مانند: fontpair وجود دارد که می تواند در یافتن و جفت کردن فونت ها کمک کند. از طرف دیگر، همیشه می‌توانید ترکیب‌ های فونت Google را بررسی کنید تا بدانید کدام فونت‌ های مجموعه Google به‌طور استثنایی با هم هماهنگ هستند.

نکته: وقتی انتخاب می‌کنید از چند تایپ‌ فیس استفاده کنید. مطمئن شوید، حروفی که استفاده می‌کنید، تفاوت‌ های متضاد قابل‌ توجهی دارند. اما، به یاد داشته باشید ترکیب ایده آل فونت ها باید هارمونی ایجاد کند. شما می توانید برای انجام آن از یک قانون ساده پیروی کنید. دو تایپ فیس را بیابید که در یک چیز مشترک هستند. سپس، با تغییر مواردی مانند: اندازه، یا وزن، با ترکیب کردن حروف معمولی با حروف کج و … در بین خانواده‌ های فونت مشابه، تضاد ایجاد کنید.

6. نحوه جلوگیری از کاهش سرعت سایت، هنگام انتخاب فونت

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

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

7. استفاده از سایر ابزارها برای الهام گرفتن در انتخاب فونت

در صورتی که در طول جستجوی فونت خود به کمک بیشتری نیاز داشته باشید، مکان‌های زیادی در وب وجود دارد که می‌توانند از فونت الهام بگیرند. به عنوان مثال:

• “Typewolf” سایتی است که در آن می توانید تعداد زیادی توصیه و لیست فونت را پیدا کنید که می تواند خلاقیت شما را برانگیزد یا حداقل مسیری را به شما نشان دهد که می توانید طراحی فونت خود را در آن طی کنید. یکی دیگر از سایت های عالی برای شروع، “Fonts In Use” است. در اینجا می‌توانید فونت‌ هایی را که بسیاری از طراحان در دنیای واقعی و همچنین در وب استفاده می‌کنند، مرور کنید.
• همچنین، مجموعه کاملی از منابع تایپوگرافی از جمله: کتاب ها و ابزار هایی که می توانند به شما در شناسایی فونت تا وبلاگ های تایپوگرافی مفید کمک کنند، در دسترس شما می باشد.
• همچنین، اگر به صورت آنلاین به طرحی برخورد کرده اید که فونت بسیار جالبی دارد. اما، نام آن را نمی دانید و می خواهید این فونت را در صفحه وب خود استفاده کنید، می توانید برای شناسایی از ابزار های آنلاین مانند: ابزار “WhatTheFont” استفاده کنید. این یکی از این شناسه‌ های فونت است که توسط یکی از بزرگترین مجموعه‌های فونت در وب ارائه می‌شود. تنها کاری که باید انجام دهید این است که یک عکس با فونت مورد نظر خود آپلود کرده و آن را برش دهید و نتایج نام فونت مورد نظر را به شما نشان می دهد.
  • یکی دیگر از برنامه های قابل استفاده بر روی مرورگر ها، برنامه “Fontface Ninja” است که به صورت رایگان به شما امکان می دهد هر فونتی را که به آن علاقه دارید بررسی و امتحان کنید و یا بخرید (وقتی ماوس را روی فونت می گذارید، نه تنها می توانید نام آـن را بررسی کنید، بلکه می توانید در مورد اندازه، هسته، ارتفاع خط و رنگ آن اطلاعات کسب کنید).

سخن آخر

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

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

منبع:

qodeinteractive.com

نوشته 7 نکته مهم هنگام انتخاب فونت مناسب در طراحی سایت اولین بار در ممتاز دیزاین. پدیدار شد.

گرید CSS چیست؟

گرید CSS توسط مایکروسافت به گروه کاری CSS پیشنهاد شد و پیش نویس گرید CSS برای اولین بار در آوریل 2011 منتشر شد. با گذشت زمان، این مشخصات به لطف بازخورد توسعه دهندگان و فروشندگان که با هم همکاری می کنند تا گرید CSS را به یک راه حل واقعاً مؤثر برای طرح بندی تبدیل کنند، بهبود یافته است.

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

مزایای ساخت و استفاده از گرید CSS

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

علاوه بر این، بدون ساختار محتوا ، طراحی گرید به راحتی می تواند با تغییرات در دستگاه ، فضا و جهت گیری سازگار شود بدون اینکه نیاز به تغییر معنایی در محتوا داشته باشد. شما می توانید عناصر گرید- بدون توجه به ترتیب منبع آن ها – را تنظیم مجدد کنید که این امکان را فراهم می آورد تا طرح را بدون تغییر علامت اصلی متناسب با زمینه متناسب کنید.

یک ویژگی قدرتمند قرار دادن خودکار به شما امکان می دهد به راحتی فضای موجود را پر کرده و نیازی به محاسبات پیچیده نداشته باشید. گرید حتی به شما این امکان را می دهد تا مواردی را که نیاز دارید با یکدیگر همپوشانی کنید، که قطعاً با جداول امکان پذیر نیست. اکنون که با گرید CSS آشنا شدید، بیایید نحوه استفاده از آن را بررسی کنیم.

نحوه ساخت و استفاده از گرید CSS

W3Schools نشان می دهد که اگر می خواهید طرح گریدی را تنظیم کنید، باید یک عنصر div والد (ظرف گرید) و یک یا چند عنصر div (آیتم های گرید) ایجاد کنید. تنظیم ویژگی نمایش یک عنصر HTML، آن را به یک ظرف گرید تبدیل می کند.

آیتم های گرید، فرزندان مستقیم ظرف گرید هستند. آن ها به صورت عمودی به ستون و به صورت افقی به ردیف مرتب شده اند. فاصله بین یک سطر و یک ستون را شکاف می نامند. با استفاده از این ویژگی ها می توانید فاصله را تنظیم کنید:

• grid-column-gap، که فاصله بین ستون ها را مشخص می کند.
• grid-row-gap، که فاصله بین ردیف ها را مشخص می کند.
• grid-gap، که یک ویژگی مختصر برای grid-column-gap و grid-row-gap است.

در بین ستون ها و سطر ها، خطوطی به ترتیب خطوط ستون و خطوط ردیف وجود دارد. ما می توانیم نمونه ای از آن را در زیر مشاهده کنیم.

هنگام قرار دادن یک مورد گرید در داخل یک ظرف، شما شماره خطوط را ارجاع می دهید.

چگونه می توان یک گرید را ساخت و در CSS متمرکز کرد؟

گرید دو بعدی است، بدین معنی که طرح با دو محور تکمیل می شود: محور y (محور بلوک) و محور x (محور درون خطی).

در CSS، از ویژگی align برای تعریف محور بلوک استفاده می شود در حالی که ویژگی justify محور درون خطی را تعریف می کند.

برای شروع متمرکز کردن موارد گرید، از ویژگی align-items استفاده کنید. برخی از مقادیری که می توانید به این ویژگی اختصاص دهید عبارتند از start ،end و stretch. هنگامی که مقدار ویژگی align-items شروع به کار می کند، این موارد را در ابتدای عمودی ناحیه گرید مربوطه قرار می دهد در حالی که آن را در انتها قرار می دهد. هنگامی که مقدار stretch می شود، آیتم ها در سراسر گرید گسترده می شوند.

ویژگی justify-items مشابه ویژگی align-items عمل می کند و مقادیر یکسانی را در محور درون خطی می پذیرد. برای هدف قرار دادن فقط یک مورد تا بتوانید آن را در مرکز قرار دهید، به ترتیب از ویژگی های align-self و justify-self در سطح مورد استفاده کنید. آخرین مرحله این است که گرید خود را نسبت به طرح موبایل ریسپانسیو کنید. اگر یک نمایش شگفت انگیز ایجاد کنید، می خواهید از طریق رابط تلفن همراه نیز قابل اشتراک گذاری باشد.

چگونه می توان هنگام ساخت یک گرید CSS را ریسپانسیو کرد؟

یکی از بهترین ویژگی های گرید این است که نسبتاً از ابتدا ریسپانسیو است. W3Schools این دستورالعمل های اضافی را برای تضمین ریسپانسیو بودن هنگام استفاده از گرید به اشتراک می گذارد. برای ساخت یک گرید CSS واکنش گرا، ابتدا ویژگی اندازه باکس همه عناصر HTML را در border-box قرار دهید. این شامل Padding و Margin به عرض و ارتفاع عناصر است.

این کد را به CSS خود اضافه کنید:

* { box-sizing: border-box; }

در مرحله بعد، یک صفحه وب ریسپانسیو ساده برای تمرین ایجاد می کنید:

برای یک صفحه وب تنها با دو ستون، مثال بالا کافی است. با این حال، اگر می خواهید کنترل بیشتری بر صفحه وب داشته باشید، می توانید از 12 ستون در گرید استفاده کنید. ابتدا باید محاسبه کنید که هر ستون چند درصد را اشغال می کند. به عنوان مثال، 100 درصد یا 12 = 8.33% در هر ستون. سپس، برای هر ستون، “-class=”col، یک کلاس ایجاد کنید، به شرح زیر:

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

هر سطر در یک <div> پیچیده شده است و تعداد ستون های داخل یک سطر همیشه به 12 می افزاید:

در مرحله بعد، باید مطمئن شوید که float را پاک کرده اید، اطمینان حاصل کنید که همه ستون های داخل ردیف در جریان صفحه قرار دارند:

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

مثال هایی برای ساخت گرید CSS

اکنون که ما اصول اولیه گرید CSS را پوشش دادیم، بیایید به نمونه های اولیه طرح بندی گرید CSS نگاه کنیم. برخی از نمونه های زیر توسط طراح وب سایت راشل اندرو تهیه شده و بر همین اساس ذکر شده است.

طرح بندی قرارگیری مبتنی بر خط

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

در زیر، کد های CSS است که محل قرارگیری شش مورد گرید را مشخص می کند. توجه داشته باشید که شش مجموعه قانون وجود دارد که خصوصیات grid-column-start ،grid-column-end ،grid-row-start و grid-row-end را با شماره خط برای هر مورد گرید تعریف می کند.

در اینجا نتیجه را در front-end مشاهده می کنید:

استفاده از مختصر های Grid-Row و Grid-Column

ما می توانیم با استفاده از ویژگی های مختصر grid-column و grid-row، طرح بندی گرید را از بالا ایجاد کنیم. این ویژگی های مختصر نویسی می تواند در وقت شما صرفه جویی کرده و کد شما را تمیزتر نشان دهد. به جای نوشتن خصوصیات grid-column-start و grid-column-end در دو خط جداگانه، می توانید آن ها را در یک خط زیر مختصر ستون گرید ترکیب کنید. برای تعریف این ویژگی مختصر نگاری، شماره اول را خط ستون محل شروع آیتم grid قرار دهید و شماره دوم نشان دهنده خط ستون جایی است که مورد grid به پایان می رسد. مقادیر را با یک اسلش جدا کنید.

شما می توانید همین کار را برای ویژگی مختصر خط گرید انجام دهید. در اینجا همان CSS از مثال بالا با استفاده از ویژگی های مختصر grid-column و grid-row بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از ویژگی مختصر Grid-Area Property

ما همچنین می توانیم با استفاده از ویژگی مختصر ناحیه گرید، ساخت گرید CSS را شروع کنیم. این ویژگی مختصر نویسی می تواند با نیاز به کد کمتر، زمان بیشتری را در شما ذخیره کند. فقط به خاطر سپردن ترتیب مقادیر ویژگی کمی سخت تر است.

برای هر یک از شش مجموعه قانون، تنها کاری که باید انجام دهید این است که ویژگی grid-area را با چهار مقدار تعریف کنید. ترتیب مقادیر به شرح زیر است:

خط سطر در جایی که مورد گرید شروع می شود / خط ستون در جایی که مورد گرید شروع می شود / خط سطر در جایی که مورد گرید به پایان می رسد / خط ستون جایی که مورد گرید به پایان می رسد.

در اینجا همان CSS از مثال بالا با استفاده از ویژگی مختصر grid-area بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از نام سطر و ستون

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

ابتدا، در زیر selector.wrapper، ویژگی grid-template-columns و grid-template-rows را خواهید یافت. در مثال های قبلی، فقط ویژگی grid-template-columns با 100 پیکسل سه بار تعریف شد. به این معنی که اندازه هر ستون برابر 100px عرض بود. در اینجا نحوه نمایش آن در CSS آمده است:

برای این مثال، ما باید ویژگی های grid-template-column و grid-template-row را با نام خطوط و مقادیر تعریف کنیم. هر ستون به ترتیب “col1-start” “col2-start” و “col3-start” نامگذاری شده و روی 100px تنظیم می شود. هر سطر به ترتیب “row1-start” و “row2-start” نامگذاری شده و روی “auto” تنظیم می شود. در اینجا کد CSS آن آمده است:

.wrapper {

    display: grid;

    grid-gap: 10px;

    grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px;

    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];

    background-color: #fff;

    color: #444;

}

اکنون در اینجا همان بخش کد CSS از مثال بالا آمده است که با استفاده از ویژگی های مختصر نویسی و نام خطوط گرید بازنویسی شده است.

    .a {

        grid-column: col2-start;

        grid-row: row1-start;

    }

    .b {

        grid-column: col2-start;

        grid-row: row2-start;

    }

    .c {

        grid-column: col3-start;

        grid-row: row2-start ;

    }

    .d {

        grid-column: col1-start ;

        grid-row: row1-start ;

    }

    .e {

        grid-column: col1-start ;

        grid-row: row2-start ;

    }

    .f {

        grid-column: col3-start ;

        grid-row: row1-start ;

    }

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

لی اوت قرارگیری مبتنی بر خط که بیش از یک مسیر گریدی را شامل می شود

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

در اینجا HTML است که گرید را تعریف می کند.

در زیر کد CSS است که محل قرارگیری چهار آیتم گرید را مشخص می کند. توجه داشته باشید که از ویژگی های مختصر grid-column و grid-row استفاده می شود و در بیشتر موارد فقط یک مقدار تعریف شده است. دلیل این امر این است که شما فقط باید مقادیر شروع و پایان را برای موارد گریدی که می خواهید چندین ویژگی را در بر گیرد، تعریف کنید.

برای مثال، برای داشتن آیتم گرید A در دو ستون، می توانید ویژگی خط مختصر ستون گرید را با تبدیل مقدار اول به “1” و مقدار دوم به “3” تعریف کنید. برای داشتن آیتم B در دو ردیف، می توانید ویژگی خط مختصر گرید را با ایجاد مقدار اول “1” و مقدار دوم “3” تعریف کنید.

در اینجا نتیجه را در قسمت جلویی مشاهده می کنید:

استفاده از کلمه کلیدی Span

ما می توانیم با استفاده از کلمه کلیدی span همان طرح بندی گرید را از بالا ایجاد کنیم. به جای نوشتن مقدار نهایی برای ویژگی های خط ستون و خط گرید در دو مورد که بیش از یک ویژگی گرید را شامل می شود، باید “span” را بنویسید و تعداد ستون ها یا گرید هایی را که می خواهید مورد مورد نظر در آن قرار گیرد، درج کنید.

در اینجا همان CSS از مثال بالا با استفاده از کلمه کلیدی span بازنویسی شده است. موارد A و B به ترتیب دو ستون و دو ردیف را شامل می شوند، بنابراین مقدار نهایی “2” است. توجه داشته باشید که بسیاری از ویژگی ها فقط با یک مقدار تعریف می شوند. در این حالت، پیش فرض گستردگی یک ستون یا سطر فرض می شود.

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

طرح گرید جام مقدس

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

در زیر نگاهی به کد و طرح بندی که “طرح مقدس جام مقدس” ایجاد شده است می اندازیم.

در اینجا HTML سرفصل، نوار کناری نویگیشن، محتوای اصلی (عنصر )، نوار کناری سمت راست (عنصر ) و پاورقی را تعریف می کند. توجه داشته باشید که در صورت تمایل می توانید مورد را با عنصر دیگری جایگزین کنید.

<div class="grid">
<header>
Header
</header>

<nav>
Navigation
</nav>

<article>
Article
</article>

<aside>
Right Sidebar
</aside>

<footer>
Footer
</footer>
</div>

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

.grid {
display: grid;
grid-template-columns: repeat (3, 1fr);
grid-template-rows: 30% 200px auto;
grid-gap: 1em;
}

.grid > * {
display: flex;
align-items: center;
justify-content: center;
}

اکنون وقت آن رسیده است که محتوا را سبک بندی کنیم. ابتدا رنگ پس زمینه و پدینگ عنصر سرصفحه، نام، متن، نوار کنار و پاورقی را تغییر می دهم. سپس من خصوصیات grid-column-start و -end را روی 1 و 4 قرار می دهم تا طول گرید را باز کنند. در نهایت، حداقل عرض را برای عنصر مقاله تعیین می کنم تا محتوای اصلی بیشتر صفحه را اشغال کند.

header,
nav,
article,
aside,
footer {
background: lightgray;
padding: 1em;
}

header, footer {
grid-column: 1 / 4;
}

article {
min-width: 15em;
}

در اینجا نتیجه را مشاهده می کنید:

وب سایت هایی که از گرید های CSS استفاده می کنند

ما در مورد گرید های CSS از لحاظ تئوری بسیار صحبت کرده ایم، اما در واقع آن ها چگونه به نظر می رسند؟ در مرحله بعد، بیایید چند نمونه عالی و واقعی از گرید در عمل را بررسی کنیم، که از وبلاگ Calendly شروع می شود.

وبلاگ Calendly

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

Ikea

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

نتیجه

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

منبع: hubspot.com

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

به همین دلیل وب سایت هایی که برای ارائه تجربه بهتر وب سایت خود برای موبایل تلاش نمی کنند، به شدت از رقبای خود عقب می مانند.

نکات گفته شده در این مقاله به شما کمک می کند وقتی شخصی از نسخه موبایل شما را جستجو می کند، وب سایت تان به درستی کار کند. در ادامه با ما همراه باشید تا این نکات را بیاموزید.

7 نکته برتر در زمینه طراحی وب سایت برای موبایل

1- استفاده از روش رویکرد اول موبایل

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

به همین دلیل ابتدا اولویت با بهینه سازی وب سایت برای نسخه موبایل و بعد نسخه دسکتاپ است و این روش در طول سال ها، بهترین روش معمول بوده است.

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

طراحی وب سایت برای گوشی موبایل از همان ابتدا بر سادگی و سهولت استفاده تاکید دارد.

2- از ابعاد و اندازه توصیه شده استفاده کنید

در گوشی های موبایل، فضا نسبت به سایر زمینه های طراحی محدودتر است. اما در نظر گرفتن محدودیت های اندازه در آغاز پروژه بهترین راه برای جلوگیری از درگیری بعدا است.

وضوح صفحه نمایش گوشی های همراه، با توجه به نوع دستگاه متفاوت خواهد بود، اما طبق تحقیقات انجام شده توسط statcounter، در حال حاضر بیشترین استفاده از آن 360 × 640 (نسبت ابعاد 9:16) است. Google Analytics می تواند به شما بگوید که کاربران از چه دستگاه هایی استفاه می کنند و باید مطمئن شوید که طراحی وب سایت شما به اندازه کافی پاسخگو تغییرات می باشد.

در مورد اندازه فونت در طراحی وب سایت موبایل ، حداقل 16 پیکسل برای بدنه توصیه می شود. همچنین بسته به نوع حروف استفاده شده می تواند متفاوت باشد (بر اساس نوع آن ها، برخی از فونت ها در 16 پیکسل کمتر از بقیه قابل خواندن هستند).

اندازه استانداردی برای فونت ها وجود ندارد. در صورت تردید به راحتی اندازه های فونت را روی یک دستگاه تلفن همراه برای خود آزمایش کنید.

در استفاده از یک تصویر می توانید بر روی قسمت مورد نظر بزرگنمایی کرده و عناصر اضافی پس زمینه را مانند مثال بالا برش دهید.

اندازه دکمه در طراحی وب سایت سازگار برای موبایل بسیار مهم است. زیرا صفحه های لمسی در انتخاب ورودی کاربر دقت کمتری نسبت به ماوس و صفحه کلید دارند. یک مطالعه با تمرکز بر روی کاربران مسن، دکمه های صفحه لمسی را برای دسترسی بهینه بین 42 تا 72px توصیه می کند.

3. مطالب خود را ساده کنید

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

در مثال زیر هنگام جستجو اطلاعات مربوط به دونات روی دسکتاپ، صفحه اصلی به شکل زیر خواهد بود:

تمام اطلاعاتی که می توانید در مورد این شیرینی های خوشمزه یاد بگیرید به شما نمایش داده می شود.

هنگامی که از طریق تلفن همراه به جستجوی همان وب سایت بپردازیم صفحه اصلی به شکل زیر است:

شما فقط موارد ضروری را می بینید. مهم ترین اطلاعات در بالا قرار داده شده اند. (“اکنون سفارش دهید”) و عناصری را که برای یک تجربه خرید موبایل مهم نیستند حذف شده اند.

4- به حداقل رساندن منو

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

برای سبک یک منوی واقعی، یک روش معمول نوار کناری کشویی است که بخشی از صفحه را با گزینه های راهنما پوشانده است. این باعث می شود که منو بتواند در ابعادی جداگانه از بقیه محتوای صفحه کار کند در حالی که فضای کاری کاربر را برای خارج شدن از منو و بازگشت به صفحه قبلی باز می گذارد.

بسته به میزان پیچیده بودن منو شما، هر گزینه منو ممکن است شامل گزینه های تو در تو یا یک زیر منو باشد. هنگامی که کاربر بر روی یکی از این زیر منوها کلیک می کند، برای کوتاه نگه داشتن لیست، بهتر است لیست گزینه های جدید جایگزین منوی موجود شود.

فراموش نکنید که نوار پیمایش را بر روی صفحه نمایش اصلاح کنید تا کاربر مجبور نباشد برای این منظور تمام صفحه را به بالا برگرداند.

5- حذف محتوای غیر ضروری

از آنجا که طراحی وب سایت مبتنی بر موبایل نیاز به اطلاعات کافی دارند، طراحان باید تمام محتوای غیرضروری را حذف یا کوتاه کنند. اینجا جایی است که بخش های مختصر و قابل انعطاف مفید هستند. کوتاه بودن محتوا شامل اختیاری کردن توضیحات توضیحی با نمادی مانند مثلث یا علامت + است که محتوای پنهان را نمایش داده یا پنهان می کند.

محتوای تکراری را می توان ادغام کرد تا به جای انباشته شدن روی یکدیگر، فضای مشابه را همپوشانی کند. در طراحی Artyom Ost که در اینجا آورده شده است، سه عبارت در زیر عنوان در نسخه دسک تاپ وجود دارد و در نسخه تلفن همراه طراح آن ها را با هم ادغام کرده است.

6. تصاویر و CSS خود را فشرده کنید

آیا می دانید طبق گفته Kissmetrics، چهل و هفت درصد از بازدید کنندگان وب سایت انتظار دارند سایتی در کمتر از 2 ثانیه بارگیری شود؟ اگر فرآیند بارگیری بیش از 3 ثانیه طول بکشد، 40 درصد بازدیدکنندگان از وب سایت خارج می شوند.

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

راه حل این است که تصاویر و کد ها را بهینه سازی کنید. وقتی اندازه فایل تصویری خود را فشرده می کنید، سریع تر دانلود می شوند، بدون اینکه روی اینکه روی کیفیت سایت شما تأثیر منفی بگذارد.

سخن آخر

بیش از یک میلیارد وب سایت در جهان وجود دارد، اما همه این وب سایت ها برابر نیستند. دارندگان وب سایتی که برای بهبود تجربه کاربری موبایل سخت تلاش می کنند با بازدید بیشتر، مراجعه به سایت و بازدید مجدد از آن ها پاداش می گیرند.

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

منابع: 99designs – hostgator.

نوشته 6 نکته برتر برای طراحی وب سایت مناسب برای موبایل اولین بار در ممتاز دیزاین. پدیدار شد.