תגובות

תבניות עם פריסת תוכן דינאמית – למי זה טוב? + 3 תוספי הjQuery הטובים ביותר בנושא

לאחרונה יצא לי לגלות סוג חדש של לייאווטים (Layouts). זה טרנד דיי חדש וחם שרץ ברשת כבר כמה חודשים שלעניות דעתי רק ימשיך לגדול ולהתפתח בזמן הקרוב.

מדובר בלייאווטים עם פריסת תוכן דינאמית. "מה שתגיד אחי.." – למי שלא מכיר, בד"כ כשאנחנו בונים אתר, הלייאווט – מבנה העמוד או יותר נכון – מיקומי האלמנטים בעמוד הם קבועים. לדוגמא: יש לנו עמודת ווידג'טים מצד ימין ועמודת תוכן בצד שמאל שהיא עצמה מחולקת לתאים / קופסאות עליהם אנחנו מחליטים מראש וממלאים בתוכן.

הבעיה

בלייאווט מהסוג הזה סביר להניח שניתקל ב2 בעיות מעצבנות שצריך לקחת בחשבון:

1. כדי לבנות את הלייאווט בד"כ נשתמש בDIVים עם רחבים קבועים והצפות (Floats). בהנחה שהאתר שאנחנו בונים הוא בשביל לקוח, ולא אנחנו אלה שמחליטים על התוכן שיהיה בו, ובהנחה היפותטית לחלוטין – ללקוח הנהדר שלנו אין מושג בווב והחשיבות שהוא מייחס לעיצוב היא כמידת החשיבות שאני מייחס לIE7, שוב באופן היפותטי לחלוטין, רוב הסיכויים שתגיעו למצב שבו לא כל עמודות התוכן הן באותו הגובה – בחלקן יש יותר תוכן ובחלקן פחות, מה שיגרום לתופעה הבאה:

2. בעיה נוספת ומעצבנת לא פחות (מנסיון) היא התמיכה במסכים ברזולוציות וגדלים שונים. הרוחב הסטנדרטי לבניית אתר הוא לרוב 960 פיקסלים – מה שאומר שבמידה ואני ארצה לבנות לייאווט שהרוחב המרכזי שלו הוא 1000 פיקסלים או אפילו 1200 פיקסלים כדי לפנק את בעלי המסכים הרחבים, הצד השני- משתמשי הנטבוקים יקבלו חווית גלישה לקויה בגלל הופעת הסקרולברים האופקיים ויש סיכוי מאוד סביר שאותם משתמשים יפספסו תוכן שעשוי להיות חשוב. מנגד, אם נבנה לייאווט ברוחב 960 פיקסלים, בעלי המסכים הרחבים יקבלו בלוק מרכזי של תוכן עם יותר מדי Blank Space – שטח מת ולא מנוצל.

הפיתרון

בדיוק בגלל בעיות מהסוג הזה נוצרו הלייאווטים עם פריסת התוכן הדינאמית. מה שזה אומר במילים פשוטות זה שהלייאווט יודע לשנות את מיקומי התכנים בעמוד בהתאם לרזולוצית הצפייה ולגודל מסך הדפדפן. כדי להבין את הקונספט של הלייאווטים האלה יותר טוב הנה כמה דוגמאות: (נסו לשחק עם גודל החלון או לחילופין לשחק עם הרזולוציה של האתר בעזרת CTRL + / CTRL -)

איך עושים את זה?!

עכשיו אחרי שהבנו מה זה פריסת תוכן דינאמית הגיע הזמן להסביר איך עושים את זה. כמו כל פלאגין שנוצר בjQueryסליידרים, גלריות, טולטיפים, טאבים וכו' גם לפלאגין מהסוג הזה יש הרבה יוצרים, סוגים וגרסאות, לפוסט הזה אני מצרף 3 פלאגינים מעולים איתם יצא לי לשחק בזמן האחרון:

1. QhuickSand

2. jQuery Masonry

3. Isotope

אם יש לכם שאלות / נתקלתם בבעיות בנושא אשמח אם תעלו אותם במערכת השאלות והתשובות של הבלוג!

אם יצא לכם לבנות אתר עם פריסת תוכן דינאמית שתפו את כולם בתוצאות דרך מערכת התגובות :)

קצת על דניאל שטרנליכט

דניאל שטרנליכט הוא מעצב ומפתח צד לקוח ואב לשני אייפונים מקוריים. חי ונושם ווב בעבודה ובבית, משתדל ללמוד כל יום משהו חדש עם גוגל כמורה, ו- Notepad++ כמחברת. בזמנו הפנוי תמצאו אותו מנהל את הבלוג לעיצוב גרפי וטכנולוגיה וחוקר טכנולוגיות ווב חדשות.

7 תגובות לפוסט "תבניות עם פריסת תוכן דינאמית – למי זה טוב? + 3 תוספי הjQuery הטובים ביותר בנושא"

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים