מה זה עיצוב רספונסיבי?

11921
19-01-2014

ברוכים הבאים, היום נדבר על עיצוב רספונסיבי (responsive design), למה הוא הפך לכורח המציאות, מה בכלל בכלל עיצוב רספונסיבי ואיך אנחנו יכולים לבנות אתרים רספונסיביים. מי שלא יודע מהו עיצוב רספונסיבי מדובר על עיצוב שמתאים את עצמו לגודל המסך בו התוכן נצפה.

למעשה פירוש המילה רספונסיבי הוא "מגיב לשינויים". בדומה גם עיצובים רספונסיביים בעולם עיצוב אתרים הם עיצובים אשר מוכנים ללא יצירה של אתר סלולרי משני לתצוגה גם באתרים אשר נצפים במכשירים סלולריים. גם האתר שלנו רספונסיבי! נסו אותנו מסלולרי…

ניווט מהיר

מה זה עיצוב רספונסיבי
אלטרנטיבה לעיצוב רספונסיבי
דוגמה לעיצוב רספונסיבי
תשתיות עיצוב רספונסיבי ועוד
כלים לבדיקת עיצוב רספונסיבי
ים של מדריכים רספונסיבים
תודה שביקרתם

מה זה עיצוב רספונסיבי

עיצוב רספונסיבי (Responsive web design) היא גישה חדשה יחסית לבניית אתרים חכמים שמטרתם להציע תצוגה מותאמת לגודל הצפייה וכך גם למכשיר בו משתמשים כדי לצפות באתר מסוים ובמקביל להציע פתרונות לגודל הטקסט, תמונות ואלמנטים שונים באתר.

מבנה נוזלי

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

אתרים סלולריים

אחת הסיבות העיקריות בגללן אתם קוראים על עיצוב רספונסיבי הוא בשל התגברות מהירה של כמות הגולשים אשר מבקרים באתר שלכם בעזרת מכשיר סלולרי כשלהו. עיצוב רספונסיבי מאפשר לכם להציג אתר מותאם לגודל סלולרי וגם לאייפד ואפילו למכשירים אשר יצאו בעתיד!

אלטרנטיבה לעיצוב רספונסיבי

לא רוצים לשנות את האתר הקיים שלכם? אתם לא לבד! יש לכם אופציה אחרת.

מנהלי אתרים רבים מעדיפים שלא להכנס להרפתקאה עם אתר קיים ובמיוחד אם מדובר על אתרים מורכבים בהם קיימים מספר רב של סוגי תכנים וסוגי עמודים שונים ומגוונים.

במקרה כזה יש אתם יכולים לבנות אתר סלולרי

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

דוגמה לעיצוב רספונסיבי

מסך מלא
חצי מסך
רבע מסך
רבע מסך

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

עמודה ראשונה לדוגמה שיודעת להתכווץ

תשתיות עיצוב רספונסיבי ועוד

סוג	שם	מידע נוסף
	fittextjs	תוסף jQuery להתאמת טקסט אוטומטית
	bootstrap	פריימוורק רספונסיבי פופולארי והרבה יותר מזה!
	inuitcss	פריימוורק רספונסיבי קל במיוחד לשימוש!
	adapt	סקריפט ג'אווה סקריפט שמאפשר לטעון CSS בהתאם לתצוגה!
	semantic	פריימוורק רספונסיבי בסיסי וקל לשימוש.
	columnal	תשתית Css (framework) למבנה עמודות גמיש רספונסיבי
	masonry	תוסף javascript מעולה שמאפשר ליצור גריד נוזלי
	Respond	תוסף קל משקל ליצירת ממשק רספונסיבי אפילו עם IE
	tinynav	תוסף JS שעוזר להמיר תפריט רחב לתפריט נפתח!
	protofluid	תוסף Js נפוץ אשר מאפשר לבחון את האתר במגוון גדלים.

כלים לבדיקת עיצוב רספונסיבי

סוג	שם	מידע נוסף
חינם	responsivepx	כלי מעולה לבדיקת אתר ברזולוציות סלולריות שונות.
חינם	ready.mobi	כלי מתוחכם שמחזיר מידע עשיר על אתר סלולרי
חינם	validator	ולידציה והתאמה לכל הדפדפנים
חינם	mobilephoneemulator	כלי מתוחכם לבדיקת אתר סלולרי
חינם	quirktools	כלי מעולה לבחינת אתרים סלולריים
חינם	responsinator	כלי לבדיקת אתר באייפון

ים של מדריכים רספונסיבים

רוצים לדעת עוד? להלן אוסף מאמרים מושקעים (באנגלית) בנושא בניית אתרים רספונסיביים.

תודה שביקרתם

אני מקווה שפתרנו את כל השאלות בנוגע לבניית אתרים רספונסיבים וכי עזרנו לכם למצוא כלים ומשאבים רלוונטים לפרויקט הבא או לאתר הקיים שלכם. כמו תמיד אתם יותר ממוזמנים להגיב, לשאול שאלות ולתרום טיפים ומידע רלוונטי נוסף.

אהבתם? פרגנו לנו עם פלוס+ או עם לייק. בנוסף אתם מוזמנים להרשם לפורום שלנו כדי לדבר איתנו ביתר פירוט על עיצוב רספונסיבי.