עיצוב רספונסיבי · web view1.3. מבנה העבודה9 2. עקרונות עיצוב...

Responsive Web Design

נטע שלוםמגישה:301908653ת.ז:

, רמת גן26, דירה 1שדרות התמרים כתובת:[email protected]דוא"ל:

ד"ר מיה הרמןמנחה:ב'2014סמסטר

תוכן עניינים

3..................................................................................................... מבוא1

3.................................................................. הצורך בפתרון ריספונסיבי1.1

8..................................................................... עיצוב ריספונסיבי, מהו?1.2

9................................................................................... מבנה העבודה1.3

10................................................... עקרונות עיצוב אתרים ריספונסיביים2

10.............................................................................................. תכנון2.1

Desktop first..................................13 לעומת גישת Mobile first. גישת 2.2

15............................................................ תבנית גמישה מבוססת גריד2.3

16............................................................................... טיפול בתמונות2.4

17........................................................................................ שאילתות2.5

18............................................................................... מימוש ריספונסיבי3

18...................................................................................... טכנולוגיות3.1

19.......................................................................................... ביצועים3.2

27................................................................................. תמיכה לאחור3.3

28........................................................................................... כלי עזר3.4

28..................................................................................... ספריות עזר3.5

31.................................................................................................. סיכום4

32................................................................................................ מקורות5

2

מבוא. 1

הצורך בפתרון ריספונסיבי. 1.1

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

, טלפונית2000בעיקר דרך מחשב שולחני )נייח או נייד(. בתחילת שנות ה-

סלולריים החלו להציע אפשרות התחברות לאינטרנט. בתחילה היה מדובר

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

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

מכלל הגלישה0.6%, הגלישה דרך מכשירים סלולריים היוותה רק כ- 2008

[.1באינטרנט ]

בתחום העצומה הטכנולוגית ההתקדמות עם יחד האחרונות, בשנים

השימוש במכשירים נוספים, כגון טאבלט, טלפון סלולריהסלולר, הולך וגובר

יחודיים,חכם ועוד, לצורך גלישה באינטרנט יכולות ומגבלות . לכל מכשיר

ובפרט לכל מכשיר רזולוציה וגודל מסך שונים.

הוא כלשהו מכל מכשיר, אינטרנטי גולש לאתר צרכן כאשר אחד, מצד

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

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

מכשיר.

ניתן היה להתעלם מכך ולא לייחס חשיבות זו תופעה חולפת, אם הייתה

ולרזולוציה דו"ח2013, אולם לא כך המצב. בשנת ייחודית לסוג המכשיר

הוריזון קבע כי טאבלטים אינם תופעה חולפת, אלא טכנולוגיה חדשה לחלוטין

[ הגבוהה ההשכלה בקרב אחיזה משתמשי[3שקנתה אחרות, במלים .

המכשירים החדשניים, כגון טאבלטים וטלפונים חכמים, אינם יוצאי הדופן

בקרב גולשי האתרים ויש לייחס להם ולחוויית הגלישה בהם חשיבות רבה

בבניית והתאמת אתרי אינטרנט.

כתוצאה מהבדלי הרזולוציות בין המכשירים השונים, צפיה באתר אינטרנט

שמותאם למסך שולחני אך אינו מותאם לטלפון חכם נהיית משימה מאוד

3

קשה עד לכדי בלתי אפשרית. זאת מכיוון הטקסט מאוד קטן באופן יחסי,

וכמות האינפורמציה שנראית על המסך קטנה מאוד ביחס למסך השולחני.

לאור העובדות לעיל, גופי פיתוח אתרים מעוניינים כיום להתאים את אתרי

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

כמה שפחות שינויים בין הרזולוציות השונות וללא צורך לרענן מחדש את

טאבלט בין במעבר )למשל השונות הרזולוציות בין מעבר בעת העמוד

במצב מאוזן לבין טאבלט במצב מאונך(.

נסקור אפשריים. פתרונות מספר השנים במהלך עלו זו סוגיה לפתרון

פתרונות נבחרים בקצרה:

פתרון מסוג זה מאפשר אפליקציות ייעודיות לכל מכשיר/רזולוציה –

,GPSלבצע שימוש מותאם בכלים אשר נתמכים בכל מכשיר )לדוגמא

מצלמה וכו'...(.

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

(, וכן עבור סוגיםiOSשונים של מערכות הפעלה )לדוגמה אנדרואיד/

שונים של מכשירים )כגון טלפון חכם, טאבלט, וכד'(. פיתוח פתרון

מערכת של עדכון לאחר במכשיר תוכנה עדכון דורש זה מסוג

[.1ההפעלה או שינוי אחר שמתבצע בתוכנה ]

אף על פי שפיתוח אפליקציות הינו כלי חזק וגמיש, פתרון מסוג זה

דורש מחשבה ותכנון רב לגבי תמיכה מרובה בסוגי מכשירים ולגבי

תהליך עדכון התוכנה.

בפתרון מסוג זה מפותח אתר ייעודי אתר ייעודי לכל סוג מכשיר –

סוג המכשיר שמעלה סוג מכשיר/רזולוציה. האתר מזהה את לכל

אותו ולפיו טוען את סוג האתר המתאים. פתרון זה אינו תומך בשינוי

בדפדפן שגולשים בעת )למשל הדפדפן של החלון גודל של ידני

במחשב שולחני(.

4

פתרון מסוג זה מאפשר לפתח אתר אחד בלבד פתרון ריספונסיבי –

שיתאים לכל הרזולוציות והמכשירים, ללא צורך בפיתוח ייעודי לכל

מכשיר. על פתרון זה נרחיב בעבודה זו.

5

( ובאתרwww.walla.co.ilלהמחשת הפתרונות השונים, נתבונן באתר וואלה )

(:www.microsoft.com/he-ilמיקרוסופט ישראל )

הפעלה מערכת עם חכם טלפון באמצעות )נצפה וואלה אתר אנדרואיד(:

ב( וואלה – צפייה באתר האינטרנט1)א( וואלה – מסך בחירה1)

ד( וואלה – צפיה באמצעות1)ג( וואלה – צפייה באתר מותאם1 )

אפליקציה

6

http://www.microsoft.com/he-il

http://www.walla.co.il/

א(. ממסך זה ניתן1בעת פתיחת האתר בטלפון חכם נקבל מסך בחירה )-

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

באמצעות צפייה מותאםאפשרויות: באתר צפיה יעודית, אפליקציה

לרזולוציה וצפיה באתר האינטרנט הרגיל )בדומה למחשב שולחני(.

אם נצפה דרך אפליקציה ייעודית, לא נראה את האתר באופן ישיר, אלא-

את האפליקציה שתשקף לנו את המתרחש באתר. האפליקציה תותקן

על המכשיר ולכן תדרוש מקום אחסון עבור ההתקנה ובנוסף הרשאות

של הפתיחה מסך את לראות ניתן מסוימות. פעולות ביצוע עבור

ד(.1האפליקציה באיור )

ב(. כבר1אם נצפה באתר האינטרנט הרגיל, נקבל את המסך באיור )-

ממבט ראשוני, ניתן לראות עד כמה מתסכל לצפות באתר כזה עבור

)נדרשת כמו טלפון חכם נמוכה, רזולוציה אדם הגולש ממכשיר בעל

גלילה מרובה, הטקסט קטן וקשה לקריאה, ובאופן כללי ישנם פרטים

רבים מדי עבור מסך קטן(.

ג(. נשים לב שכמות1אם נצפה באתר מותאם, נקבל את המסך באיור )-

המידע אותו אנו מקבלים במסך הפתיחה באתר היעודי קטנה בהרבה

מאשר כמות המידע באתר המקורי. בהתחשב בגודל המסך, אפשרות זו

ברורה יותר ואינפורמטיבית עבור הגולש הממוצע.

בנוסף, יש לשים לב שאת האתר המותאם נקבל רק עבור טלפון חכם

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

שולחני ונקטין את החלון ידנית, לא נקבל אתדפדפן שמותקן על מחשב

.האתר המותאם, אלא את האתר הרגיל

8

אתר מיקרוסופט ישראל )נצפה באמצעות דפדפן שמותקן על מחשבשולחני(:

ב( מיקרוסופט – צפייה באתר האינטרנט2)א( מיקרוסופט – צפיה באתר אינטרנט2)ברזולוציה של טאבלט מאוזןברזולוציה מקסימלית

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

א(. לאחר2בעת פתיחת האתר במחשב שולחני נקבל את המסך באיור )-

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

ב(. באופן דומה, נקבל את המסכים באיורים )2נקבל את המסך באיור )

ד( בעת הקטנה נוספת של המסך.2ג(, )2

אם נפתח את האתר במכשיר בעל רזולוציה נמוכה יותר, נקבל באופן-

מיידי את תצוגת האתר המתאימה אל הרזולוציה.

9

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

שימוש בעיצוב ריספונסיבי, בעוד שאתר וואלה עושה שימושישראל עושה

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

עיצוב ריספונסיבי, מהו?. 1.2

הינו עיצוב אשר מטרתו לפתחעיצוב ריספונסיבי עבור אתרי אינטרנט

, שיתמוך בכל סוגי הרזולוציות והמכשירים בצורה מיטבית.אתר אחד בלבד

אתר המעוצב באופן ריספונסיבי מתאים את עצמו בצורה אוטומטית עבור

הרזולוציה בה מתבצע בו שימוש. זאת נעשה ע"י התאמת מבנה הרכיבים

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

( פורסם ע"י מאמרresponsive web designהמושג "עיצוב אתרים ריספונסיבי" )

]2010ע"י מעצב ומפתח האתרים איתן מרקוט בשנת שנכתב [. במאמר,4

חזה שתוך בין השאר, מרקוט ניידים3-5, מכשירים דרך הגלישה שנים

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

מידע מחפשים גולשים כאשר )למשל, מסויימים תוכן סוגי עבור צדק

כלשהו, כגון כתובת או טלפון, סביר שיעשו זאת היום דרך מכשיר הטלפון

[.1הסלולרי( ]

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

(. עפ"י שיטה זו, על המפתחים להיצמדpixel-perfect web designפיקסלים" )

כמה שיותר לתבנית העיצוב הגרפי שנוצרה בפוטושופ. כתוצאה מכך, האתר

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

לנו לשכוח כי אתרי אינטרנט, בניגוד למגזינים, הינם גמישים וניתנים לשינוי

גודל ע"י משתמש הקצה. למשל, אם משתמש הקצה יקטין את הרזולוציה

בה הוא עובד או אפילו את חלונית הדפדפן, אתר האינטרנט המפותח עבור

כמות בו בעידן קריא. לבלתי ולהפוך להתעוות עלול מסוימים פיקסלים

צורך ויש בעייתית נהיית זו שיטה וגדלה, הולכת הנפוצות הרזולוציות

בגמישות רבה יותר.

10

הצורך בעיצוב הריספונסיבי גבר, כאמור, בשנים האחרונות. כתוצאה מכך,

מצאו עצמם אתרים רבים מנסים להתאים עצמם באופן מהיר לכל מכשיר

על פתרון ולא לחשוב נפוצים בקרב השוק בנפרד, רזולוציה שנמצאו או

"בנק" ולשמור על כולל. הסיבה לכך היתה לקבל התאמה במינימום זמן

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

יכול להימנע אם לעתים משולשת או מרובעת של מפתחים, דבר שהיה

[.1האתר היה מפותח באופן ריספונסיבי ]

המטרות העיקריות של העיצוב הריספונסיבי:

,התאמת תבנית עמוד האינטרנט כך שתתאים לכל גדלי המסכים

החל ממסך רחב וכלה במסכים של מכשירים סלולריים קטנים.

.שינוי גדלי תמונות בהתאם לרזולוציית המסך

לרזולוציית "איכות" התמונות הנשלחות לצד הלקוח בהתאם שינוי

המכשיר )כדאי לשלוח תמונה באיכות ירודה למכשיר בעל רזולוציה

יורגש ולא יפגע כתוצאה מכך, נמוכה מכיוון שקצב טעינת העמוד

הבדל משמעותי בחוויית הצפייה(

.פישוט אלמנטים ותהליכים עבור מכשירים קטנים

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

.בניית אתר ידידותי למשתמש גם עבור מכשירים קטנים

מכשיר כל שמציע הייחודיות באפשרויות שימוש האפשר, במידת

בטלפונים סלולריים(.GPS)לדוגמא,

הבעיות את פותר הריספונסיבי העיצוב כיצד נראה העבודה, בהמשך

המוזכרות לעיל ועונה על צרכי השימוש של אתרי אינטרנט כיום.

מבנה העבודה. 1.3

שאחת היקף, רחב בפרויקט עיסוק בעת הייתה האישית החשיפה

מדרישותיו הייתה אתר אינטרנט ריספונסיבי. מאחר ששיטה זו מהווה מושג

חדש יחסית בעולם התוכנה, נבחר הוא לנושא הסמינר על מנת להעשיר את

הידע והניסיון האישי.

11

צורות מימוש שונות יוצגו ייסקרו עקרונות העיצוב הריספונסיבי, בסמינר,

וכלים אפשריים לשימוש, תוך כדי מתן דוגמאות מוחשיות. שאלת השאלות

חיובית, גלישה חוויית ליצור ניתן כיצב היא הריספונסיבי העיצוב בנושא

הרזולוציות כל עבור האינרנט, צרכני כלל עבור ויעילה אינטואטיבית

והמכשירים. העבודה תתרכז במתן מענה לשאלה זו.

12

עקרונות עיצוב אתרים ריספונסיביים. 2

ידידותיות נוחות, גמישות, וברורים: רבים יתרונות הריספונסיבי לעיצוב

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

להוביל ליצירת אתרים מסורבלים שאינם ידידותיים למשתמש. ברזולוציות

נמוכות מתרחש מירוץ קבוע בין חשיפה מירבית של מידע ופונקציונליות לבין

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

ריספונסיביים לרוב לא תהיה למשתמש אפשרות לצפות באתר המלא דרך

מכשירים בעלי רזולוציות נמוכות )זאת בניגוד לאתרים מותאמים בהם ניתן

גם לבחור לגלוש באתר המלא, במקרה שבו חסרה אפשרות כלשהי באתר

[.4המותאם או שהיא פחות נוחה למשתמש( ]

על מנת להגיע לתוצאה האופטימלית, יש להקפיד על העקרונות המנחים,

למצוא את האיזון, ללמוד מטעויות עבר, ולבצע בקרה מתמדת לאורך כל

שלבי הפרויקט אם האתר המפותח אכן תואם את רצון הלקוח.

תכנון . 2.1

טרם פיתוח אתר, ובפרט אתר ריספונסיבי, יש לבצע תכנון מעמיק על מנת

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

יחודיים, ולא תמיד פתרון שהיה הנכון ביותר עבור אתר א' יהיה הנכון ביותר,

או נכון בכלל, עבור אתר ב'. ישנם אתרים אשר עיצוב ריספונסיבי "יחליש

את כוחם" ברזולוציות נמוכות )כלומר, אם ימנע מהמשתמש לבצע פעולות

מסוימות, האתר יהיה בלתי-שמיש(. גם לכך יש פתרונות, בהם נמנים יצירת

לגשת למשתמש אפשרות חשיפת ריספונסיבי, אתר במקום אפליקציות

ע"י לחיצה על )למשל ע"י הסרת העיצובים הריספונסיבים לאתר המלא

עיצובי ה- יותרCSSכפתור שיסיר את המייחדים את הרזולוציות הנמוכות

מהראשית(.

כלומר התכנון, בשלב כבר לאתר ריספונסיבי "אב-טיפוס" לייצר מומלץ

באתר: הריספונסיבית כיצד תתבצע ההתנהגות תבנית בסיסית שתגדיר

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

במעטפת האתר בכל רזולוציה וכד'.13

]SharePoint 2013( דוגמה ל"אב-טיפוס" ריספונסיבי עבור אתר מבוסס 3) [ עבור6 שתי רזולוציית: רזולוציית מכשיר נייד )ימין( ורזולוציית מחשב שולחני )שמאל(.

ניתן לראות כי התפריט העליון ברזולוציית מחשב שולחני3לדוגמא, באיור

המכשיר ברזולוציית למעלה( ימין )בצד "המבורגר" מסוג לתפריט הפך

הנייד.

לשם התאמה מרבית לכלל הרזולוציות, ישנן "נקודות שבירה" ברוחב המסך

בהן נהוג לבצע את השינויים. לדוגמא, להלן החלוקה של נקודות שבירה

[:7עפ"י איתן מרקוט ]

320px ,סלולריים טלפונים כמו קטנים, מסכים בעלי מכשירים –

כאשר מוחזקים במצב אנכי )"מצב עומד"(.

480px ,סלולריים טלפונים כמו קטנים, מסכים בעלי מכשירים –

כאשר מוחזקים במצב אופקי )"מצב שכיבה"(.

600px .טאבלטים קטנים אשר מוחזקים במצב אנכי –

768px אינץ' אשר מוחזקים במצב אנכי.10 – טאבלטים בגודל

14

1024px טאבלטים גדולים אשר מוחזקים במצב אופקי, מחשבים –

שולחניים בעלי מסך קטן.

1200px .מסכים רחבים, כמו מסכי מחשבים שולחנים –

:נראה דוגמה הממחישה את נקודות שבירה אלו באופן מוחשי

[. נקודות השבירה שונות מעט2( דוגמה לנקודות שבירה עפ"י סוגי המכשירים ]4)מאלו המוצעות ע"י מרקוט, אך שותפות לאותו הרעיון.

. נושא הביצועיםנושא נוסף שיש לייחס לו חשיבות רבה בשלב התכנון הוא

כל עבור שונים עיצובים על מושתת אתר אתר הינו ריספונסיבי אתר

רזולוציה, אך בדרך כלל קבצי הקוד והלוגיקה זהים עבור כלל הרזולוציות.

מסיבה זו, זמן טעינת כל עמוד יכול לקחת זמן רב. במחקר שביצע החוקר

אתרים שעליהם ביצע בדיקה ב-347גיא פודג'רני, נוכח לראות כי מתוך

נמוכות. בהחלט סביר86% מהם לא הייתה טעינה חסכונית ברזולוציות

)טלפונים נמוכות רזולוציות בעלי במכשירים הגלישה מהירות כי להניח

במחשבים מאשר יותר איטית כלל בדרך וכו'( טאבלטים סלולריים,

שולחנים, ולכן אם אינה מתבצעת התאמה לאתר, זמן טעינתם יהיה ארוך

בדק את תגובת הגולשים2009יותר. מחקר שהתבצע ע"י חברת גוגל בשנת

15

לאחר האטת מנוע החיפוש. התוצאה לכך היתה שהתבצעו פחות חיפושים

במנוע, ומעבר לכך, גם לאחר סיום הניסוי, משתמשים אשר חוו איטיות לא

חזרו להשתמש במנוע החיפוש בתדירות בה השתמשו לפני הניסוי. מצב

[.4מסוג זה עלול להוביל לשימוש מועט באתר עד לכדי חוסר שימוש ]

ב- שפורסמו סקר תוצאות כמעט 2011עפ"י גומז, ע"י מהגולשים60%

מוכנים לחכות74% שניות ו-3 מצפים לטעינת אתר עד בטלפונים סלולריים

[.6 שניות לפני שיעזבו את האתר ]5עד

יכולה להיות טעינה חסכונית, כלומר אפשרות לשיפור הביצועים, כאמור,

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

אכן לא ייטענו )ולא רק יוסתרו(.

לוותר שיעדיפו יש הביצועים, לשיפור התאמות לבצע שניתן פי על אף

לפתח ובמקומו אתר, עבור ריספונסיבי עיצוב על מסויימים במקרים

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

(.3המימוש )ראה סעיף

Desktop first לעומת גישת Mobile firstגישת . 2.2

טרם עידן העיצוב הריספונסיבי, היה ברור לגופי הפיתוח כי יש לשים בראש

המשתמשים מעט את ולא השולחני, המחשב משתמשי את ובראשונה

עיצוב האתרים ואחרים. כתוצאה מכך, שונים כאלו שגולשים במכשירים

למכשירים האתר בהתאמת צורך היה ואם השולחני, למחשב הותאם

)גישת השולחי האתר של ההתחלה מנקודת יצאו ההתאמות אחרים,

desktop first .)

ה- מכניסת בשנת iPhoneהחל לשוק הראשון הכפלת2007 עם ויחד ,

בשנת הסלולרי האינטרנט קפיצה2010מהירות התרחשה היום, ועד

משמעותית בשימוש בטלפונים הסלולריים עד כדי מצב, שכיום חלק נרחב

באינרנט לגלישה הסלולרי במכשיר יותר משתמש בעולם מהאוכלוסיה

לייחס ניתן המתוארת לקפיצה הסיבה את השולחני. במחשב מאשר

16

לנגישות רבה יותר של מכשירים מסוג זה, הן מבחינת המחיר שהתמתן עם

השנים והן מבחינת יכולות המכשירים שגברו במרוצת השנים.

17

באיור הבא, ניתן לראות דיאגרמה הממחישה את הגידול בשימוש באינטרנט

[:2הסלולרי עם השנים ]

.AT&T עפ"י הנתונים בחברת 2009 ל-2006( גידול השימוש באינטרנט סלולרי בין השנים 5)

. אתmobile firstאי לכך, העיצוב הריספונסיבי נוקט בגישה ההפוכה, גישת ה-

]2009הגישה הציג לראשונה לוק רובלבסקי בשנת [. על פי גישה זו, יש7

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

רזולוציית הטלפון החכם(, ואת עיצוב זה להמשיך ולשדרג עבור הרזולוציות

[. גישה זו "מכריחה" את גוף העיצוב והפיתוח לחשוב כבר6הגבוהות יותר ]

מההתחלה על תשובות לשאלות רבות, לדוגמא:

?כיצד האתר ייראה ברזולוציות השונות

?מהן המגבלות הפונקציונליות בכל רזולוציה

?מהן פעולות הליבה של האתר שחייבות להיתמך בכל הרזולוציות

?איזה מידע הוא הנחוץ והמעניין ביותר באתר

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

על מנת לענות על שאלות אלו, מומלץ להתמש בכלי סטטיסטיקות שונים,

או ביצוע סקרים בקרבGoogle analyticsכגון קובץ לוג פעולות על האתר,

משמשי האתר, ובעזרת המסקנות לקבל את ההחלטות לגבי השאלות הנ"ל

[1.]

18

( ההדרגתי" ה"שיפור נושא הוא זו, גישה של נוסף progressiveיתרון

enhancement)על כל קודם חושבים והמעצבים התוכן עורכי כאשר .

הרזולוציות הנמוכות, לעתים בלי לשים לב, צריכים להחליט איזה תוכן הוא

החשוב ביותר. באופן זה מובטח שהתוכן שנמצא החשוב ביותר יופיע בכל

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

.מידע, ולא נגרע ממנה

תבנית גמישה מבוססת גריד. 2.3

זו או אחרת בצורה של "גריד" ) מרבית אתרי האינטרנט מעוצבים בדרך

grid-ל נחלק המסך ועמודות, באמצעותה שורות בעלת כלומר רשת ,)X

עמודות ובהם מסודרים הרכיבים.Yשורות ו-

באלמנטים הוא רזולוציה של רחב למגוון גמיש אתר בניית של הבסיס

וכן הלאה(, אשר ידעו לשנותdivגמישים ככל האפשר )כפתור, גופן, חלוקות

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

גריד גמיש.

בפיתוח עבור אתר בעל רזולוציה קבועה, ניתן לקבוע את רוחב העמודות על

( פיקסלים כמות pixel-perfectפי web designברוחב מסך עבור למשל ,)

1024pxחלוקת המסך לשלוש עמודות, כאשר האמצעית מביניהן ברוחב של

512px 256 ושתי הצדדיות ברוחב שלpxאולם, בעת עיצוב אתר אשר עתיד .

להיות ריספונסיבי, רוחבי העמודות אשר יקבעו בפיקסלים יתאימו לרזולוציה

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

לקבוע את רוחב העמודות באחוזים ובנוסף להשאיר מקום לשוליים )בדרך

מהמסך ישמשו לשוליים(. לדוגמא, עבור חלוקה לשלוש עמודות10%כלל

( נוכל לקבוע90%, ומתוך השטח שנותר )10%נקבע שהשוליים יהיו ברוחב

ושתי העמודות הצדדיות50%שהעמודה האמצעית והמרכזית תהיה ברוחב

כל אחת.25%יהיו ברוחב

ויותאם עבור כלל הרזולוציות, ללא יחסי יהיה זה, רוחב העמודות באופן

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

העיצוב הריספונסיבי לעומת ה"קביעות" בה מתנהג עיצוב מבוסס פיקסלים.19

האיור הבא ממחיש גריד גמיש באתר ריספונסיבי:

[.6( גריד גמיש – רוחב העמודות מיוצג באחוזים ]6)

טיפול בתמונות. 2.4

תמונות באתרים עלולות לגרום לבעיות ברזולוציות השונות, מכיוון שגודל

התמונה אינו משתנה מרזולוציה לרזולוציה. בעזרת העיצוב הריספונסיבי,

ניתן לדאוג לטיפול יחודי עבור כל רזולוציה וכל רכיב המכיל תמונה. הטיפול

יכול להיות העלמת התמונה ברזולוציה מסויימת, חיתוך מסויים, הקטנה או

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

זה נוכל לשמור על נראות הולמת של האתר ברזולוציות השונות.

21

שאילתות. 2.5

נשענים בעיצוביהן על קבצי Webאתרי CSSניתן לשלוט על , באמצעותם

(.3.1מיקומים, גדלים ונראות של אלמנטים שונים באתר )ראה גם סעיף

, ניתן לשלוט גם על ההבדליםCSS, הגרסה העדכנית ביותר של CSS3בעזרת

ניתן להגדיר שעיצוב עלCSSבין הרזולוציות השונות, כלומר יחול מסוים

רזולוציה מסוימת ולא על האחרות ולהיפך. האבחנה בין הרזולוציות השונות

היא מודול ב-media query(. ה-media queryמתבצעת באמצעות "שאילתא" )

CSS3יודע להבחין בין רזולוציות ולהכיל הגדרות כלשהן על רזולוציות אשר

[.3מסוימות בלבד ]

Media Query[ 4:]להלן מבנה בסיסי של

@media <mediatype>[ <boolean_operator> (<condition>)]

יכול להיות מוחלף[boolean_operator> (<condition>)] >כאשר הביטוי

. תנאיםבשרשור של מספר

הבא:Media Queryלדוגמא, נסתכל על ה-

@media screen and (max-width: 640px) {img {display: none;};P {font-size: 1.1em };}

פירושו:

(img הסתר את כל התמונות )תגיות :640pxעבור רזולוציה קטנה או שווה ל- "

" מגודל הגופן הבסיסי.110% ל- p את גודל הגופן של וקבע

22

מימוש ריספונסיבי. 3

, כך שצדClientעיצוב אתרים ריספונסיבי מתבצע ברובו המכריע ברמת ה-

השרת

(server sideיוכלו להתאים את עצמם ( שולי בעניין זה )מפתחי צד השרת

לכמעט כל החלטה שתתקבל(. את עיצוב האתרים יש לבצע בשיתוף פעולה

( הלקוח צד פיתוח וגוף גוף ממשק המשתמש clientשל sideחלק את .)

עפ"י מקדימה, תכנון עבודת שהתבצעה לאחר לבצע חשוב המימוש

העקרונות המנחים.

בכדי לממש אתר באופן ריספונסיבי, ניתן להשתמש במגוון ספריות מוכנות

וכלי עזר, על חלקם נפרט בהמשך הפרק.

טכנולוגיות. 3.1

HTML5 -ל – הגרסה החמישית HTML (HyperText Markup Language),

מכילה אפשרויות רבותHTML5ליצירה ועיצוב של דפי אינטרנט. שפה

מהגרסאות וסרטים.יותר מוזיקה אנימציות, כדוגמת הקודמות,

מכך, אינטרנטHTML5כתוצאה מערכות לבניית לשמש יכולה

מסובכות יותר ללא צורך בתוספים.

CSS3 של השלישית הגרסה – CSS (Cascading Style Sheets)שפה ,

לתיאור פורמט ועיצוב דפי אינטרנט. הגרסה תומכת בכל הגרסאות

יותר, בעזרתן ניתן הקודמות ומוסיפה עליהן תכונות רבות ועשירות

ובזמן ולהגיע להישגים עיצוביים בפשטות יותר לתכנן עיצוב גמיש

קצר יותר.

JavaScript( שפת תכנות לכתיבת סקריפטים – scriptsבעזרתה ניתן ,)

משלימה אתJavaScriptלבצע התאמות והגדרות בצד הלקוח. שפת

CSS3-ו HTML5בבניית אתר בעל יכולות גבוהות ומסובכות, בעל עיצוב

מותאם בצורה הטובה ביותר. קיימות ספריות עזר רבות מבוססות

JavaScript כמו למשל ,jQuery .

23

ביצועים. 3.2

, נושא הביצועים הינו נושא רגיש מאוד2.1כפי שתואר בשלב התכנון בסעיף

באתרים בעלי עיצוב ריספונסיבי. בעת טעינת עמוד אינטרנטי מתבצעות

מספר פעולות, כגון פניה לשרת, פניה תקשורתית לרשת האינטרנט, טעינת

וכו'. כתוצאה מכך, כאשר בוחנים ביצועים של ועיצובים קבצי סקריפטים

אתר אינטרנט, לא פשוט להצביע במבט ראשון איזו נקודה בדיוק דורשת

שיפור. לשם כך, ניתן להיעזר בכלים, עליהם נדון בהמשך.

[ לבעיות ביצועים באתרי6 ]2011בשנת בוטקביץ' על פי מחקר שבוצע ע"י

אינטרנט קיימים גורמים רבים, כאשר העיקריים שבהם הינם )מסודרים עפ"י

סדר חשיבות( :

מספר הבקשות מהשרת

כמות קבצי הסקריפטים

גודל הדף

14%בשנים האחרונות מספר הבקשות הממוצעות לדף מהשרת גדלו בב-

והגיע88% בקשות לדף. כמו כן, גודל הדף הממוצע גדל בכ-92והגיעו לכ-

.3 לדףMB 1.45לכ-

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

2013

אתרי ברוב לפינה נדחק הביצועים נושא כי להסיק ניתן הנתונים, לאור

האינטרנט לטובת עיצוב מרשים יותר, אתר עשיר יותר באפשרויות, פיתוח

24

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

המשתמש בזמן הקצר והראשוני בו הוא נחשף לאתר, אך "לשכוח" ממנו

לאחר מכן. תופעה זו יכולה לגרום למשתמש לא לרצות לחזור ולהשתמש

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

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

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

ריספונסיבי. נסקור בקצרה מספר שיטות נבחרות:

תמונות של על אופטימיזציה מבוססים רבים אתרים עיצובי –

או גרפיקאים בוחרים רבים, במקרים דף. בכל מרובות תמונות

לא )על מנת ביותר הגבוהה באיכות תמונות להעלות משתמשים

ביותר הגבוהה באיכות תמונות באתר(. נמוכה באיכות להסתכן

עלולות להיות גדולות מאוד, וזמן הטעינה שלהן רב. מעבר להעלאת

גם אופטימיזציה לבצע ניתן הניתן, ככל נמוכה באיכות תמונות

בהיבט התכנותי, ובעזרת כלים להסיר מידע מיותר אשר נשמר עבור

או Kraken Image Optimizerהתמונות. כלים לדוגמה הם Smush.itשל

Yahooכלים אלו מסירים את המידע המיותר מבלי לפגוע באיכות .

התמונה.

Page size diff. percentage

Page size difference

Req. diff. percentage

Requests differenceTechnique

-18%-194 kb0%0Minimizing Images Usingan Image Optimizer

.Kraken Image Optimizer 2013( דוגמה לאופטימיזציה של תמונות באמצעות 8) מבלי לפגוע משמעותית באיכות התמונותkb (18%) 194גודל העמוד צומצם ב-

25

ריספונסיביות ריספונסיביים תמונות באתרים תמונות עבור –

קיימות מספר דרכי טיפול שונות:

o חיתוך תמונה באמצעות CSS [ בטכניקה זו - [ יש למקם את2

. אלמנט האב צריךPהתמונה הרצויה בתוך אלמנט אב, כמו

( או להיות בעל רוחב קבוע.floatingלהיות צף )בעל מאפיין

לאחר מכן, הרוחב או הגובה מקבלים גודל קבוע, כאשר השני

floatingמביניהם נשאר גמיש. בנוסף, יש להגדיר במאפיין ה-

זה, במקרה בו משתנה יחתך. באופן איזה צד של התמונה

הרזולוציה התמונה תחתך בהתאם.

לדוגמה:HTMLקוד

<html><head><title>Flexible Images - Cropping</title> <style type=”text / CSS”> div#foreground { overflow : hidden ; width:50%: /* flexible value */ height : 206px ; /* fixed value */ border : 2px solid #000; } div#foreground img { float : left ; /* defines which side gets cut */ } </style></head><body> <div id=”foreground”> <img src=”logo_big . png” width=”450” height=”206”/> </div></body></html>

26

תוצאה של חיתוך התמונות ניתן לראות להלן:

)א( התמונה ברזולוציה גבוהה )ללא החיתוך(9) )אחריב( 9 נמוכה ברזולוציה התמונה החיתוך(

o שימוש במאפיין Max-width .המאפיין פותח ע"י ריצ'ארד רוטר -

בטכניקה זו את יש למקם את התמונה תחת אלמנט אב בעל

. באופן זה, רוחב100% ל-max-widthולהגדיר את רוחב מוגדר,

[.2 ]התמונה יותאם לרזולוציה


<html><head><title>Flexible Images - Max Width</title> <style type=”text / CSS”> div#foreground { width:50%; border : 2px solid #000; } div#foreground img { max-width : 100%; /* low screen res. = low width */ } </style></head><body> <div id=”foreground”> <img src=”logo_big . png”/> </div></body></html>

27

oכפולות בתמונות כל שימוש עבור שונה תמונה טעינת –

ו-HTML5בעזרת רזולוציה CSS3-הפתרון מבוסס על שימוש ב .

media queries.


<html><head><title>Flexible Images - Multiple Images</title> <style type=”text / CSS”> @media (min-device-width:400px) { img[data-src-400px] { content : attr(data-src-400px , url) ; } } @media (min-device-width:800px) { img[data-src-800px] { content : attr(data-src-800px , url) ; } } </style></head><body> <img src=”logo . png” data-src-400px=”logo . png” data-src-800px=”logo_big . png” /></body></html>

o'חיתוך התמונות באמצעות הגדרות פתרון צד ג – CSSפשוט

אך יש הוא בעל חסרונות: התמונה לא תמיד נחתכת, יחסית

וממנה בצורה הרצויה. בנוסף תמיד תיטען התמונה הגדולה,

, וכך לא יתבצע חסכון בטעינת העמוד. אם כן,יתבצע החיתוך

פתרון למצוא התמונותנדרש יטענו רזולוציה כל עבור שבו

הדרושות בגודל הרצוי בלבד.

)פלטפורמהSharePoint 2013 מציעה פתרון עבור Microsoftחברת

" נקרא אשר אתרים( Imageליצירת Renditionsזה בפתרון ."

כל נשמרים עבור )חיתוכים אשר אפשריים חיתוכים תמונה

עליהם( לשלוט יכול התוכן נוסף,עורך תוסף בעזרת .

Responsive Image Rendition שלMaventionגודל החלון הנוכחי .

28

( ולפיו נטענת גרסת התמונה )Cookieנשמר בצד הלקוח )ב-

image rendition.הרלוונטית בלבד )

29

:Image Renditionsלהלן דוגמא ל-

(10 )Image Renditions-ב SharePoint 2013מנהל האתר/המפתח מגדירים את כל גדלי – התמונות הנדרשים באתר ועורך התוכן בוחר עבור כל תמונה את החיתוך המתאים ביותר

עבור כל גודל





Responsive Images

-48.9 %-553 kb+22.2 %+6Phones < 480 pixels

-29.2 %-316 kb+7.4 %+2Phones to portrait tablets481 – 767 pixels

-27.5 %-298 kb+7.4 %+2Landscape tablets768 – 979 pixels

-28.7 %-310 kb+3.7 %+1Default 980 – 1199 pixels

-25.9 %-280 kb0+1Large display > 1200 pixels

הכלים 11) בעזרת ריספונסיביות תמונות באמצעות ביצועים לשיפור דוגמה )Image Rendition+

Responsive Image Rendition Plug-Inניתן לראות צמצום גדול הן בגודל הדף והן במספר . הקריאות לשרת ברזולוציות השונות

30

( אופטימיזציה של קבצי צד לקוח JavaScript -ו ( CSS קבצי צד לקוח -

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

העמוד; בעת שימוש בקבצי צד לקוח, עלינו לזכור כי הקבצים נטענים

אופטימיזציה פעולתו. את להאט המשתמש למחשב שהם כמו

לקבצים מסוג זה כוללת שני שלבים עיקריים:

o( צמצום הקבציםMinify-בעזרת כלים מקוונים או תוספים ל – )

Visual Studioגדלי הקבצים. הכלים ניתן בקלות לצמצם את

התווים את שורה,מסירים ירידות )רווחים, המיותרים

לקצרים יותר, ועוד. כלהמיותרים, וכו'(, משנים שמות משתנים

גודל הקובץ שיטען בצד הלקוח. זאת, על מנת לצמצם את

לאחר פעולה זו אמנם הקבצים אינם קריאים, אך תמיד ניתן

ולבצע המקורי הקובץ על בכלMinifyלעבוד נוספת. פעם

פרויקט בו מתבצעות פעולות רבות בצד הלקוח יש להקפיד על

קבוע.Minifyנוהל

o( איחוד קבציםUnify ניתן לבצע איחוד של קבצי – )Styleאו

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

הפניות לשרת על מנת לטעון את הקבצים הללו. ישאת כמות

לזכור כי יש מקרים בהם נעדיף לוותר על האיחוד – מקרים

או CSSכאשר ישנו קובץ JavaScriptגדול במיוחד שאין לו צורך

להיטען בכל הדפים באתר, אלא במקרים מסוימים בלבד.

עלMinifyבדרך כלל נבצע את איחוד הקבצים ורק לאחר מכן נבצע

.הקובץ המאוחד





Optimizing JavaScript and CSS

-11.6 %-125 kb+14.8 %-4Remove files

-0.9 % -10 kb0 %0Optimizing Bootstrap-files

( דוגמה לשיפור ביצועים באמצעות הימנעות מטעינת קבצי צד לקוח לא רלוונטיים של12)SharePoint ושל Bootstrap.)באתר המבוסס על כלים אלו(

31

( "עצלנית" Lazy טעינה Loading ) מסויימים אלמנטים ישנם –

יהיה בהם בו לרגע ניתן להמתין עם טעינתם עד באתר אשר

הקריאות ההתחלתית ומכמות הדף מגודל לחסוך ובכך צורך,

שלו. כך לדוגמא, במידה ומדובר בעמוד ארוך, ניתן לטעון בעליית

את לטעון גלילה ובכל לעין, הנראה החלק את רק הדף

זו על האלמנטים הרלוונטיים. כמו כן, ניתן להשתמש בטכניקה

את ולחסוך מסויימות, ברזולוציות רק אלמנטים לטעון מנת

טעינתםן ברזולוציות בהן אין בהם תורך )לדוגמא תמונות שנראות

[.6רק ברזולוציות גבוהות לא נרצה לטעות ברזולוציות הנמוכות( ]





-12.2 %-132 kb-7.4 %-2Lazy Loading

Lazy( דוגמה לשיפור ביצועים באמצעות 13) Loadingזה במקום לטעון מספר – במקרה אלמנטים, הם הוסתרו ונוסף כפתור "שירותים נוספים", אשר לחיצה עליו יוזמת את הופעת

הרכיבים הללו

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

ריספונסיביים. על מנת להעצים את השיפור ניתן לבצע שילוב בין השיטות

יותר ונראה לעיני ניתן להשיג שיפור משמעותי שהוצגו מעלה. באופן זה,

המשתמש.





Combination of Techniques

-64.6 %-699 kb-3.7 %-1Phones < 480 pixels

-45.1 %-488 kb-14.8 %-4Phones to portrait tablets481 – 767 pixels

-43.3 %-468 kb-14.8 %-4Landscape tablets768 – 979 pixels

-44.4 %-481 kb-18.5 %-5Default 980 – 1199 pixels

-46.6 %-440 kb-22.2 %-6Large display > 1200 pixels

ניתן לראות שיפור של14) כל השיטות שהוצגו. ( דוגמה לשיפור ביצועים באמצעות שילוב בצמצום כמות הקריאות לשרת.22.2%-3.7% בגודל הדף ושיפור של 64.6%-40.6%

32

תמיכה לאחור. 3.3

CSS3 -אינו תומך בדפדפנים ישנים, כמו למשל ב Internet Explorer 8וקודמיו. על

את השונות בין הדפדפנים השונים, נוצרו מספר ספריות עזרמנת למזער

[:4שתפקידן תמיכה לאחור ]

CSS3-mediaqueries.js -ב שימוש מאפשרת זו ספריה –media

queries מה כל פשוט; הוא בה השימוש ישנים. בדפדפנים גם

בו נרצה לעשותHTMLשצריך לעשות הוא להוסיף אותה לקובץ ה-

, ולאחר מכן להשתמש בהם כרגיל.media queriesשימוש ב-

Respond.js של האפשרויות את ורק אך מספקת זו ספריה –

min/max-width שלCSS3הספריה מתמקדת בתאימות לגרסאות .

של Internetהשונות Explorerקיימת השאר, בין זו, בספריה .

CSS או CSS media type לבדיקה האם מוכל matchMediaהפונקציה

media query.

Mediatizr.js -ב שימוש מאפשרת זו ספריה –media queries

-min/max-width, min/maxישנים. יכולות הספריה כוללים בדפדפנים

device-width.

jQuery Media Helpers תוסף מבוסס –JavaScriptלהתמודדות עם

cross-browser media queries.בדפדפנים שאינם תומכים בכך

33

כלי עזר. 3.4

ערכות נושא ( לפלטפורצות רבות של אתרי ניהול תוכן - CMSכמו ,)

WordPress או Drupalישנן ערכות נושא ריספונסיביות אשר בעזרתן

ניתן להמיר אתר בעיתוב רגיל לאתר בעיצוב ריספונסיבי בקלות.

ריספונסיבי לפיתוח עזר אשר ספריות רבות ספריות ישנן -

ספריות מספר על )נפרט ריספונסיביים אתרים בפיתוח מסייעות

(.3.5לדוגמה בסעיף

ישנם כלים אינטרנטיים ואפליקציות המדמים כיצד כלי בדיקות –

הוא לדוגמה כלי השונים. מכשירים מתוך בצפייה ייראה האתר

Responsinator (http://www.responsinator.com)להזין ניתן זה באתר .

( אותו נרצה לבדוק, ונראה כיצד ייראה האתרURLאת כתובת האתר )

בסוגי המכשירים השונים.

ספריות עזר. 3.5

וגובר, כך גם נבנות ככל שהשימוש בעקרונות העיצוב הריספונסיבי הולך

יותר ויותר ספריות עזר למימוש קל ומהיר יותר של אתרים ריספונסיביים.

להלן מספר דוגמאות ספריות עזר כאלו.

Base (matthewhartman.github.com/base) גריד זו מספקת – ספריה

עם שלוש נקודות שבירה שונות, בעזרתן ניתן להתאים את960pxשל

ומכשירים טאבלטים ניידים, לטלפונים איניבידואלי באופן האתר

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

אין לצפות בספריה זו לפתרון כולל, אלא לספרייתלעיצוב. מסיבה זו,

.[7עזר מצומצמת וגמישה ]

34

http://www.responsinator.com/

Bootstrap (twitter.github.com/bootstrap) ספריה זו נוצרה ע"י – Twitter

מספקת כליםfront-end. Bootstrapלמוצר חזק מאוד בפיתוח והפכה

הריספונסיבי בפיתוח )כגוןרבים פקדים גמיש, גריד ביניהם ,

[.7כפתורים(, יכולות ניווט, מעבר בין עמודים ועוד ]

Foundation (foundation.zurb.com) – Foundationעזר ספריית הינה

בקבוצת נוצרה אשר לשימוש וקלה . הספריה מספקתZurbחזקה

בעל של 12גריד מקסימלי רוחב עם עמודות 980pxכברירת .

נועדה וזו בלבד, אחת שבירה נקודת יש זו לספריה המחדלף

זו הגריד הופך להיות בעל עמודות4לטלפונים סלולריים. בנקודה

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

בשמות מאופיינת הספרייה נוספות. שבירה נקודות CSSלהוסיף

משמעותיים, כך שלמתכנת קל ואינטואיטיבי יותר להבין ולבצע את

jQuery [7.]הדרוש. הספריה כוללת פקדים רבים וכן ספריות

Titan (bit.ly/HPKACU) ספריה חדשה יחסית, אשר מאופיינת בגריד –

ול-Bootstrapופקדים עם אפשרויות רבות, בדומה ל- Foundationאך(

מראש, קבועים עיצובים ללא ובפשטות מהם( פחות עתה לעת

Base[ 7.]בדומה ל-

Snow – Snow היא ספריה שנוצרה ע"י חברת Trilibisחברה לבניית ,

אתרmobileאתרי לבנות למתכנתים לעזור היא הספריה . מטרת

ריספונסיבי ללא יצירת אתר יעודי לכל רזולוציה. הייחודיות של ספריה

זו היא שזוהי ספרייה בצד השרת. אופן הפעולה שלה מתחיל מזיהוי

ה- את הלקוח לצד לשלוח ולפיו לאתר ניגש אשר HTMLהמכשיר

...(המתאימים. באופן זה, השרתCSSושאר קבצי צד הלקוח )תמונות,

הוא זה שעובד על מנת להחליט אילו קבצים לטעון, ולא הלקוח.

35

,Snow, יש להשתמש בתגיות של HTMLמבחינת המתכנת, בבניית ה-

יודע לזהות את סוג המכשירHTML5מבוססות . תוסף מיוחד אשר

Snow tagsיושב בשרת. טעינת הקבצים הנכונים מתבצעת בעזרת ה-

.HTMLכפי שנכתבו ב-

Snowפתרון מציעה אשר הראשונה השרת צד ספריית היא

של הוא מהירות הטעינה זה היתרון של פתרון מסוג ריספונסיבי.

העמוד. כאשר ההחלטות לטעינה עוברות לצד השרת, אשר ברוב

המקרים חזק יותר מצד הלקוח, משתמש הקצה סובל פחות מבעיות

ב- המשתמשים למתכנתים בנוסף, גמישותSnowאיטיות. ישנה

בעיקר מתאים הפתרון מכשיר. בכל שמוצג התוכן על מירבית

.mobileלאתרים שנועדו בראש ובראשונה למכשירי

פתרון זה שונה מעט משאר הפתרונות שנסקרו כאן, אך נותן מענה

[.7ריספונסיבי דומה ]

Snow( דיאגרמה המתארת את תהליך הסבת הקוד לריספונסיבי בעזרת 15)

36

סיכום. 4

העיצוב הריספונסיבי הפך לפופולרי בשנים האחרונות בקרב מפתחי אתרי

בכל דומה גלישה לחוויית המצפים הגולשים, בקרב והן האינטרנט,

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

אינטרנט, וסביר לצפות לכך שהנושא ימשיך לצבור תאוצה ולהתפתח בזמן

הקרוב.

הוצג הצורך1עבודה זו מציגה את מהותו של העיצוב הריספונסיבי: בפרק

סקר את העקרונות2שיטה זו ויתרונותיה לעומת שיטות קיימות וישנות. פרק

הובאו שיטות וכלים שונים לסיוע32הראשיים בגישה הריספונסיבית, ובפרק

פיתוח בשיטה זו, וכמו כן יתרונותיהם ומגבלותיהם לעומת כלי פיתוח נפוצים

אחרים.

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

הריספונסבית )כגון עיצוב עפ"י פיקסלים ועבור רזולוציות קבועות בלבד(.

לאתרים חדשים פיתוח כלי על בלמידה תרמה זו עבודה כן, כמו

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

37

מקורות. 5

1 Robert Fox, “Responsive Web Design 101: How to Make Your Site

Responsive”, OCLC Systems & Services: International digital library

perspectives, July/August 2013

2 Eva Harb, Paul Kapellari, Steven Luong, Norbert Spot, “Responsive Web

Design”, courses.iicm.tugraz.at, 6.11.11

3 Nancy R. Glassmana, Phil Shena, “One Site Fits All: Responsive Web Design”,

Journal of Electronic Resources in Medical Libraries, 30.5.14

4 Richard Duchatsch Johansen, Talita C. Pagani Britto, Cesar Augusto Cusin, “CSS

Browser Selector Plus: A JavaScript Library to Support Cross-browser

Responsive Design”, International World Wide Web Conferences Steering

Committee, May 2013

5 Bohyun Kim, “Chapter 4: Responsive Web Design, Discoverability, and Mobile

Challenge”, Library Technology Reports, 8-9.13

6 Joel Nandorf, “Responsive Web Design – Evaluation of Techniques to

Optimize Load Time”, Spring 2013

7 Brandi Scardillli, “Trilibis: Server-Side Service”, Information Today, December

2013

8 Jeremy Shell, “Flexible Everything – Getting Responsive with Web Design”,

Information Today, April 2013

38

עיצוב רספונסיבי · web view1.3. מבנה העבודה9 2. עקרונות עיצוב...

Documents